@fleetbase/ember-ui/addon/styles/layout/next.css

Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.

body {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
}

body,
html,
button,
a,
* {
    cursor: default;
}

a[disabled='true'],
button[disabled='true'],
input[disabled='true'],
select[disabled='true'],
textarea[disabled='true'] {
    cursor: not-allowed;
}

body.scrollable,
body.virtual {
    overflow-y: scroll;
}

body.next-sidebar-is-resizing {
    overflow-x: hidden;
}

.next-content-overlay .new-order-overlay-body {
    @apply px-4 pt-4 space-y-4;
}

.next-content-overlay .new-order-overlay-body .input-group {
    @apply mb-0;
}

.next-content-overlay .new-service-rate-overlay-body .input-group:last-child {
    @apply mb-0;
}

.next-mobile-navbar {
    @apply flex h-16 bg-white border-t border-gray-200 flex-shrink-0;
    z-index: 999;
}

.next-mobile-navbar .next-mobile-navbar-tabs {
    @apply flex flex-row w-full relative;
}

.next-mobile-navbar .next-mobile-navbar-tabs > .scrollable-nav-items::-webkit-scrollbar {
    height: 0;
}

.next-mobile-navbar .next-mobile-navbar-tabs > .scrollable-nav-items {
    @apply flex flex-row items-center overflow-x-scroll flex-shrink-0;
    width: calc(100% - 5rem);
}

.next-mobile-navbar .next-mobile-navbar-tabs > .scrollable-nav-items > .next-mobile-navbar-tab-item,
.next-mobile-navbar .next-mobile-navbar-tabs > .next-mobile-navbar-tab-item {
    @apply flex flex-col items-center justify-center border-r border-gray-200 px-2 w-20 flex-shrink-0;
    height: 100%;
}

.next-mobile-navbar .next-mobile-navbar-tabs > .scrollable-nav-items + .next-mobile-navbar-tab-item.menu-toggle {
    @apply shadow-next-nav absolute right-0 top-0 bottom-0 border-l border-gray-300 bg-white;
}

.next-mobile-navbar .next-mobile-navbar-tabs > .scrollable-nav-items > .next-mobile-navbar-tab-item span,
.next-mobile-navbar .next-mobile-navbar-tabs > .next-mobile-navbar-tab-item span {
    @apply text-xs text-gray-800 mt-1 truncate block;
}

.next-mobile-navbar .next-mobile-navbar-tabs > .scrollable-nav-items > .next-mobile-navbar-tab-item:last-child,
.next-mobile-navbar .next-mobile-navbar-tabs > .next-mobile-navbar-tab-item:last-child {
    @apply border-r-0;
}

body[data-theme='dark'] .next-mobile-navbar {
    @apply bg-gray-900 border-gray-700;
}

body[data-theme='dark'] .next-mobile-navbar .next-mobile-navbar-tabs > .scrollable-nav-items > .next-mobile-navbar-tab-item,
body[data-theme='dark'] .next-mobile-navbar .next-mobile-navbar-tabs > .next-mobile-navbar-tab-item {
    @apply border-gray-700;
}

body[data-theme='dark'] .next-mobile-navbar .next-mobile-navbar-tabs > .scrollable-nav-items + .next-mobile-navbar-tab-item.menu-toggle {
    @apply border-gray-800 bg-gray-900;
}

body[data-theme='dark'] .next-mobile-navbar .next-mobile-navbar-tabs > .scrollable-nav-items > .next-mobile-navbar-tab-item span,
body[data-theme='dark'] .next-mobile-navbar .next-mobile-navbar-tabs > .next-mobile-navbar-tab-item span {
    @apply text-gray-100;
}

.fleetbase-next-container {
    @apply text-gray-800 flex flex-col bg-white border-t-0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    align-items: stretch;
    border-top: none;
}

body[data-theme='dark'] .fleetbase-next-container {
    background-color: rgb(31, 32, 35);
    color: rgb(247, 248, 248);
}

.next-content-overlay {
    @apply absolute inset-0 opacity-0 transition duration-300 ease-in-out pointer-events-auto bg-gray-900 bg-opacity-50;
    width: 100%;
    height: 100%;
    z-index: 800;
}

.next-content-overlay
    > .next-content-overlay-panel-container
    > .next-content-overlay-panel
    .next-content-overlay-panel-body
    .next-content-overlay-panel-body-inner-wrapper
    > .section-header-actions {
    overflow-y: hidden;
}

.next-content-overlay.is-open {
    @apply opacity-100;
}

.next-content-overlay.is-open .next-content-overlay-panel-container .next-content-overlay-panel {
    @apply shadow-none;
}

.next-content-overlay.next-content-overlay-pos-right .next-content-overlay-panel-container {
    @apply border-l border-gray-200 dark:border-gray-700 border-solid;
}

.next-content-overlay.next-content-overlay-pos-left .next-content-overlay-panel-container {
    @apply border-r border-gray-200 dark:border-gray-700 border-solid;
}

.next-content-overlay.minimized .next-content-overlay-panel-container {
    @apply bg-transparent pointer-events-none;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-body {
    @apply bg-gray-50 dark:bg-gray-800;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .gutter {
    @apply hidden;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel {
    @apply bg-transparent shadow-none border-none;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-content-overlay-panel-header {
    @apply bg-white h-60 rounded-tl-md rounded-bl-md flex-col px-1 border-t border-l border-r border-gray-200 shadow-md justify-start items-start pointer-events-auto;
    transform: translateY(50px);
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-left {
    @apply flex-col flex-1 pt-2 pl-1.5;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-left > div {
    height: 100%;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-left > div > div:first-child {
    height: 100%;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-left > div > div:first-child > div {
    @apply hidden;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-left > div:not(:first-child) {
    @apply hidden;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-left .next-content-overlay-panel-title {
    @apply text-right flex flex-col flex-1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-left div[class='flex'] {
    flex-direction: column;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-right {
    @apply flex-col items-center justify-evenly pl-1;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-right > *:not([type='button']) {
    @apply hidden;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-view-header-right > [type='button'] {
    @apply m-0 w-7 h-7;
}

.next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel .next-content-overlay-panel-body {
    filter: blur(1px);
    @apply hidden;
}

.next-content-overlay.no-backdrop {
    @apply bg-transparent pointer-events-none;
}

.next-content-overlay.no-backdrop > * {
    @apply pointer-events-auto;
}

.next-content-overlay.outview {
    pointer-events: none;
    opacity: 0;
}

.next-content-overlay.outview.next-content-overlay-pos-right > .next-content-overlay-panel-container {
    transform: translateX(100%);
    pointer-events: none;
    opacity: 0;
}

.next-content-overlay.outview.next-content-overlay-pos-left > .next-content-overlay-panel-container {
    transform: translateX(-100%);
    pointer-events: none;
    opacity: 0;
}

.next-content-overlay.outview.next-content-overlay-pos-top > .next-content-overlay-panel-container {
    transform: translateY(-100%);
    pointer-events: none;
    opacity: 0;
}

.next-content-overlay.outview.next-content-overlay-pos-bottom > .next-content-overlay-panel-container {
    transform: translateY(100%);
    pointer-events: none;
    opacity: 0;
}

.next-content-overlay.full-height > .next-content-overlay-panel-container > .next-content-overlay-panel {
    height: 100%;
}

.next-content-overlay.full-height > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-body {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
}

.next-content-overlay.full-height > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-body .next-content-overlay-panel-body-inner-wrapper {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.next-content-overlay.full-height
    > .next-content-overlay-panel-container
    > .next-content-overlay-panel
    .next-content-overlay-panel-body
    .next-content-overlay-panel-body-inner-wrapper
    > div {
    box-sizing: border-box;
}

.next-content-overlay.next-content-overlay-pos-right > .next-content-overlay-panel-container {
    @apply right-0 bottom-0 top-0;
    transform: translateX(100%);
}

.next-content-overlay.next-content-overlay-pos-left > .next-content-overlay-panel-container {
    @apply left-0 bottom-0 top-0;
    transform: translateX(-100%);
}

.next-content-overlay.next-content-overlay-pos-top > .next-content-overlay-panel-container {
    @apply top-0 left-0 right-0;
    transform: translateY(-100%);
}

.next-content-overlay.next-content-overlay-pos-bottom > .next-content-overlay-panel-container {
    @apply bottom-0 left-0 right-0;
    transform: translateY(100%);
}

.next-content-overlay.is-open > .next-content-overlay-panel-container {
    transform: translate(0);
}

.next-content-overlay > .next-content-overlay-panel-container {
    @apply absolute transform transition ease-in-out duration-500 pointer-events-auto;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel {
    @apply transform transition ease-in-out duration-500 pointer-events-auto bg-white shadow-next-nav;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-cancel-button {
    @apply rounded-full flex items-center justify-center w-7 h-7 bg-gray-100 ml-2;
    cursor: default;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-cancel-button:hover {
    @apply bg-gray-200;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-maximize-button,
.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-minimize-button {
    @apply rounded-lg flex items-center justify-center w-8 h-7 bg-gray-100 ml-2;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-maximize-button:hover,
.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-minimize-button:hover {
    @apply bg-gray-200;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header {
    @apply px-4 flex items-center justify-between flex-shrink-0 min-w-full max-w-full border-b border-gray-200;
    box-align: center;
    height: 57px;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header.no-bottom-border,
.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header.border-b-0 {
    border-bottom-width: 0px !important;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header.align-start,
.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header.align-top {
    align-items: start !important;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header .next-content-overlay-panel-title {
    @apply text-base truncate;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header .next-view-header-left {
    @apply flex flex-1 items-center;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header .next-view-header-right {
    @apply flex flex-1 items-center justify-end;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header .ember-basic-dropdown-trigger {
    @apply flex;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-view-header-right button.btn,
.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-header .next-view-header-right button.btn {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-body {
    @apply overflow-y-scroll px-1;
}

body[data-theme='dark'] .next-content-overlay {
    display: flex;
    height: 100%;
}

body[data-theme='dark'] .next-content-overlay.minimized .next-content-overlay-panel-container .next-content-overlay-panel {
    @apply bg-transparent shadow-none border-none;
}

body[data-theme='dark'] .next-content-overlay .next-content-overlay-panel-container .next-content-overlay-panel {
    @apply bg-gray-900;
}

body[data-theme='dark'] .next-content-overlay .next-content-overlay-panel-container .next-content-overlay-panel .next-content-overlay-panel-cancel-button {
    @apply bg-gray-700;
}

body[data-theme='dark'] .next-content-overlay .next-content-overlay-panel-container .next-content-overlay-panel .next-content-overlay-panel-cancel-button:hover {
    @apply bg-gray-500;
}

body[data-theme='dark'] .next-content-overlay .next-content-overlay-panel-container .next-content-overlay-panel .next-content-overlay-panel-maximize-button,
body[data-theme='dark'] .next-content-overlay .next-content-overlay-panel-container .next-content-overlay-panel .next-content-overlay-panel-minimize-button {
    @apply bg-gray-700;
}

body[data-theme='dark'] .next-content-overlay .next-content-overlay-panel-container .next-content-overlay-panel .next-content-overlay-panel-maximize-button:hover,
body[data-theme='dark'] .next-content-overlay .next-content-overlay-panel-container .next-content-overlay-panel .next-content-overlay-panel-minimize-button:hover {
    @apply bg-gray-500;
}

body[data-theme='dark'] .next-content-overlay .next-content-overlay-panel-container .next-content-overlay-panel .next-content-overlay-panel-header {
    @apply border-gray-700;
}

.next-leaflet-container-map {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
}

.next-map-container .leaflet-top {
    @apply top-11;
}

.next-map-container .leaflet-popup .leaflet-popup-tip-container {
    @apply hidden;
}

.next-map-container .leaflet-popup-content-wrapper {
    @apply rounded-md bg-gray-900 text-gray-100 shadow-next-nav border border-gray-900;
}

.next-map-container .leaflet-tooltip {
    @apply rounded-md bg-gray-900 text-gray-100 shadow-next-nav border border-gray-900 px-3 py-0.5 text-xs;
}

.next-map-container .leaflet-tooltip.leaflet-tooltip-right:before {
    border: 0;
}

.next-map-container .leaflet-tooltip.leaflet-tooltip-left:before {
    border: 0;
}

.leaflet-contextmenu {
    @apply w-64;
}

.next-map-container .leaflet-contextmenu > a.leaflet-contextmenu-item {
    @apply text-gray-900 truncate;
}

.next-map-container {
    display: flex;
    flex-shrink: initial;
    flex-basis: initial;
    flex-direction: row;
    flex-grow: 1;
    position: relative;
    overflow: auto;
    align-items: stretch;
    justify-items: stretch;
    place-items: stretch;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
}

.next-map-container .ember-basic-dropdown-content {
    z-index: 600;
}

.next-map-container .next-content-overlay-z1 {
    z-index: 700;
}

.next-map-container .next-content-overlay-z2 {
    z-index: 750;
}

.next-map-container .next-content-overlay-z3 {
    z-index: 800;
}

.next-map-container .next-content-overlay-z4 {
    z-index: 850;
}

.next-map-container .next-content-overlay-z5 {
    z-index: 900;
}

.next-map-container .next-content-overlay-z6 {
    z-index: 950;
}

.next-map-container-topbar {
    z-index: 700;
    @apply absolute top-0 left-0 right-0 bg-gray-900 w-full flex h-10 border-b border-gray-700 px-3 shadow-next-nav;
}

.next-map-container-topbar.next-topbar-table,
.next-map-container-topbar.next-topbar-kanban {
    @apply shadow-none relative;
}

body[data-theme='light'] .next-map-container-topbar {
    @apply bg-white border-gray-200 shadow-none;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section {
    @apply relative;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section > .leaflet-draw-toolbar {
    @apply bg-white rounded-full flex flex-col items-center justify-center shadow-next-nav border-0;
    padding: 0.313rem;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section > .leaflet-draw-toolbar > a {
    @apply flex items-center justify-center rounded-full w-8 h-8 m-auto mb-2 border-b-0 bg-white;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section > .leaflet-draw-toolbar > a:hover {
    @apply bg-gray-200;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section > .leaflet-draw-toolbar > a:last-child {
    @apply mb-0;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section .leaflet-draw-actions {
    @apply mr-4;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section .leaflet-draw-actions li a {
    @apply bg-white border-gray-200;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section .leaflet-draw-actions li a:hover {
    @apply bg-gray-100;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section .leaflet-draw-actions li:first-child a {
    @apply rounded-l-md;
}

.next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section .leaflet-draw-actions li:last-child a {
    @apply rounded-r-md;
}

body[data-theme='dark'] .next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section > .leaflet-draw-toolbar {
    @apply bg-gray-900;
}

body[data-theme='dark'] .next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section > .leaflet-draw-toolbar > a {
    @apply bg-gray-900;
    background-image: linear-gradient(transparent, transparent), url(/engines-dist/images/drawing-controls-spritesheet-inverted.png);
}

body[data-theme='dark'] .next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section > .leaflet-draw-toolbar > a:hover {
    @apply bg-gray-700;
}

body[data-theme='dark'] .next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section > .leaflet-draw-actions li a {
    @apply bg-gray-900 border-gray-700;
}

body[data-theme='dark'] .next-map-container.next-map-container-layout-map .leaflet-draw > .leaflet-draw-section > .leaflet-draw-actions li a:hover {
    @apply bg-gray-800;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container {
    @apply w-10 absolute top-11 left-0 ml-3 mt-3 flex flex-col justify-center;
    z-index: 600;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container.toolbar-container-horizontal {
    @apply left-0 right-0 ml-0 mx-0 mt-0 mb-3 flex-row items-center justify-center w-full;
    top: auto;
    top: initial;
    bottom: auto;
    bottom: initial;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container.toolbar-container-horizontal.position-bottom {
    @apply bottom-0;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container.toolbar-container-horizontal.position-top {
    @apply top-0;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container.toolbar-container-horizontal .next-map-container-toolbar-drivers-panel,
.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container.toolbar-container-horizontal .next-map-container-toolbar-panel {
    @apply mb-0 flex-row;
}

.next-map-container.next-map-container-layout-map
    .next-map-container-toolbar-container.toolbar-container-horizontal
    .next-map-container-toolbar-drivers-panel
    .next-map-container-toolbar-drivers,
.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container.toolbar-container-horizontal .next-map-container-toolbar-panel .next-map-container-toolbar-drivers {
    @apply flex flex-row;
}

.next-map-container.next-map-container-layout-map
    .next-map-container-toolbar-container.toolbar-container-horizontal
    .next-map-container-toolbar-drivers-panel
    .next-map-container-toolbar-drivers
    > div,
.next-map-container.next-map-container-layout-map
    .next-map-container-toolbar-container.toolbar-container-horizontal
    .next-map-container-toolbar-panel
    .next-map-container-toolbar-drivers
    > div {
    @apply mr-3;
}

.next-map-container.next-map-container-layout-map
    .next-map-container-toolbar-container.toolbar-container-horizontal
    .next-map-container-toolbar-drivers-panel
    .next-map-container-toolbar-drivers
    > div:last-child,
.next-map-container.next-map-container-layout-map
    .next-map-container-toolbar-container.toolbar-container-horizontal
    .next-map-container-toolbar-panel
    .next-map-container-toolbar-drivers
    > div:last-child {
    @apply mr-0;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container.toolbar-container-horizontal .toolbar-button {
    @apply mb-0;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-zoom-control > div:last-child .toolbar-button,
.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-drivers > div:last-child .toolbar-button,
.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-actions > div:last-child .toolbar-button {
    @apply mb-0;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button {
    @apply flex items-center justify-center rounded-full w-8 h-8 m-auto mb-2;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button.is-action:hover {
    @apply bg-blue-500;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button:focus,
.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button:active,
.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button:hover {
    @apply outline-none;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button:hover {
    @apply bg-gray-600;
}

body[data-theme='light'] .next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button svg {
    @apply text-gray-800;
}

body[data-theme='light'] .next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button.is-action:hover {
    @apply bg-blue-500;
}

body[data-theme='light'] .next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button.is-action:hover svg {
    @apply text-white;
}

body[data-theme='light'] .next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .toolbar-button:hover {
    @apply bg-gray-200;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-zoom-control,
.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-drivers-panel,
.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-panel,
.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-actions {
    @apply bg-white rounded-full mb-3 flex flex-col items-center justify-center p-1 shadow-next-nav;
}

body[data-theme='dark'] .next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-zoom-control,
body[data-theme='dark'] .next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-drivers-panel,
body[data-theme='dark'] .next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-panel,
body[data-theme='dark'] .next-map-container.next-map-container-layout-map .next-map-container-toolbar-container .next-map-container-toolbar-actions {
    @apply bg-gray-900;
}

.next-map-container.next-map-container-layout-map .next-map-container-toolbar-container:hover {
    @apply opacity-100;
}

.next-map-container.next-map-container-layout-map .next-map-container-table-container {
    @apply transition-all duration-300 opacity-0;
}

/** leaflet map container for fleetbase style controls */
.fleetbase-leaflet-map-container .leaflet-control-container .toolbar-button {
    @apply mb-0;
}

.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar.leaflet-control > a[role='button'].leaflet-control-zoom-out {
    @apply mb-0;
}

.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button'] {
    @apply bg-transparent flex items-center justify-center rounded-full w-8 h-8 m-auto mb-2 border-0 outline-0;
}

.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button'].is-action:hover {
    @apply bg-blue-500;
}

.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:focus,
.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:active,
.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:hover {
    @apply outline-none;
}

.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:hover {
    @apply bg-gray-600;
}

body[data-theme='light'] .fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button'] svg {
    @apply text-gray-800;
}

body[data-theme='light'] .fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:hover {
    @apply bg-gray-200;
}

.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control {
    @apply bg-white rounded-full mb-3 flex flex-col items-center justify-center p-1 shadow-next-nav border-0 outline-0;
}

body[data-theme='dark'] .fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control {
    @apply bg-gray-900;
}

.fleetbase-leaflet-map-container .leaflet-control-container {
    @apply transition-all duration-300;
}

.next-map-search-bar-container {
    @apply absolute top-11 left-0 ml-20 mt-3 flex flex-col transition-all duration-300 opacity-0;
    z-index: 600;
}

.next-map-search-bar-container.is-visible {
    @apply opacity-100;
}

.next-map-search-bar-container .next-map-search-bar {
    @apply rounded-xl bg-white flex items-center justify-center w-70 shadow-next-nav;
}

.next-map-search-bar-container .next-map-search-bar > input {
    @apply flex-1 bg-transparent m-0 p-0 text-gray-800 px-4 py-2 border-0;
}

.next-map-search-bar-container .next-map-search-bar > input:focus {
    @apply outline-0;
    box-shadow: none;
}

.next-map-search-bar-container .next-map-search-results {
    @apply mt-2 rounded-xl bg-white flex items-center justify-center w-96 shadow-next-nav py-3 transition-all duration-300 opacity-0;
}

.next-map-search-bar-container .next-map-search-results.has-results {
    @apply opacity-100;
}

.next-map-search-bar-container .next-map-search-results .next-map-search-result {
    @apply w-full border-b border-gray-200 py-3;
}

.next-map-search-bar-container .next-map-search-results .next-map-search-result:hover {
    @apply bg-gray-50;
}

.next-map-search-bar-container .next-map-search-results .next-map-search-result:last-child {
    @apply border-b-0;
}

.next-map-search-bar-container .next-map-search-results .next-map-search-result .order-route-list:before {
    margin-left: 0.5rem;
    top: 0;
    height: 100%;
}

.next-map-search-bar-container .next-map-search-results .next-map-search-result .order-route-list .order-route-stop {
    background-color: transparent;
    background-color: initial;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0.375rem;
}

.next-map-search-bar-container .next-map-search-results .next-map-search-result .order-route-list .order-route-stop .order-route-stop-index .index-count {
    @apply h-4 w-4;
}

.next-map-search-bar-container .next-map-search-results .next-map-search-result .order-route-list .order-route-stop .order-route-location {
    @apply text-xs;
}

body[data-theme='dark'] .next-map-search-bar-container .next-map-search-bar {
    @apply bg-gray-900;
}

body[data-theme='dark'] .next-map-search-bar-container .next-map-search-bar > input {
    @apply text-gray-100;
}

body[data-theme='dark'] .next-map-search-bar-container .next-map-search-results {
    @apply bg-gray-900;
}

body[data-theme='dark'] .next-map-search-bar-container .next-map-search-results .next-map-search-result {
    @apply border-gray-800;
}

body[data-theme='dark'] .next-map-search-bar-container .next-map-search-results .next-map-search-result:hover {
    @apply bg-gray-800;
}

.next-content-overlay-panel.orders-panel .icon-container {
    @apply w-5;
}

.next-content-overlay-panel.orders-panel .orders-panel-fleets .next-content-panel-container .next-content-panel-toggle {
    @apply border-none text-gray-800 flex;
}

.next-content-overlay-panel.orders-panel .orders-panel-fleets .next-content-panel-container .next-content-panel-toggle.next-orders-driver-header {
    @apply pl-14 flex;
}

.next-content-overlay-panel.orders-panel .orders-panel-fleets .next-content-panel-container .next-content-panel-toggle.next-content-panel-header {
    @apply bg-white rounded-none;
}

.next-content-overlay-panel.orders-panel .orders-panel-fleets .next-content-panel-container .next-content-panel-body {
    @apply border-none;
}

.next-content-overlay.next-content-overlay-pos-right > .next-content-overlay-panel-container {
    @apply flex-row-reverse;
}

.next-content-overlay > .next-content-overlay-panel-container {
    @apply flex;
}

.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel .next-content-overlay-panel-body.no-padding,
.next-content-overlay > .next-content-overlay-panel-container > .next-content-overlay-panel.orders-panel .next-content-overlay-panel-body {
    @apply px-0;
}

.next-content-overlay
    > .next-content-overlay-panel-container
    > .next-content-overlay-panel.orders-panel
    .next-content-overlay-panel-body
    .order-listings
    > .next-content-panel-body-inner
    .order-listings-row {
    @apply pl-4 py-2 pr-2;
}

.next-content-overlay
    > .next-content-overlay-panel-container
    > .next-content-overlay-panel.orders-panel
    .next-content-overlay-panel-body
    .order-listings
    > .next-content-panel-body-inner
    .order-listings-row.selected {
    @apply bg-blue-400;
}

.next-content-overlay
    > .next-content-overlay-panel-container
    > .next-content-overlay-panel.orders-panel
    .next-content-overlay-panel-body
    .order-listings
    > .next-content-panel-body-inner
    .order-listings-row:hover:not(.selected) {
    @apply bg-gray-100 bg-opacity-75;
}

body[data-theme='dark']
    .next-content-overlay
    > .next-content-overlay-panel-container
    > .next-content-overlay-panel.orders-panel
    .next-content-overlay-panel-body
    .order-listings
    > .next-content-panel-body-inner
    .order-listings-row.selected {
    @apply bg-blue-500 bg-opacity-75;
}

body[data-theme='dark']
    .next-content-overlay
    > .next-content-overlay-panel-container
    > .next-content-overlay-panel.orders-panel
    .next-content-overlay-panel-body
    .order-listings
    > .next-content-panel-body-inner
    .order-listings-row:hover:not(.selected) {
    @apply bg-gray-800 bg-opacity-75;
}

body[data-theme='dark'] .next-content-overlay-panel.orders-panel .orders-panel-fleets .next-content-panel-container .next-content-panel-toggle {
    @apply text-gray-100;
}

body[data-theme='dark'] .next-content-overlay-panel.orders-panel .orders-panel-fleets .next-content-panel-container .next-content-panel-toggle.next-content-panel-header {
    @apply bg-gray-900;
}

.next-map-container.next-map-container-layout-table .next-map-container-view-switch {
    @apply shadow-none;
}

body[data-theme='light'] .next-map-container-toolbar > .next-map-container-view-switch > svg {
    @apply text-gray-900;
}

.next-map-container-view-switch {
    @apply flex items-center;
    height: 100%;
    z-index: 600;
}

.next-map-container-view-switch:hover {
    @apply opacity-100;
}

.next-map-container-view-switch > button > .status-badge {
    top: 0;
    bottom: 0;
    right: 0;
}

body[data-theme='dark'] .next-map-container-view-switch > button > .status-badge.info-status-badge > span {
    @apply bg-gray-800 border border-gray-700;
}

body[data-theme='light'] .next-map-container-view-switch > button > .status-badge.info-status-badge > span {
    @apply bg-white border border-gray-200 text-black;
}

.next-map-container-table-container {
    @apply bg-white opacity-100 relative;
    width: 100%;
    height: 100%;
    z-index: 500;
}

body[data-theme='dark'] .next-map-container-table-container {
    @apply bg-gray-900;
}

.next-map-container-view-switch > button {
    @apply bg-gray-200 text-gray-900 rounded-xl m-1 outline-none text-sm px-6 py-0.5;
}

.next-map-container-view-switch > button:hover,
.next-map-container-view-switch > button:focus,
.next-map-container-view-switch > button:active {
    @apply outline-none;
}

body[data-theme='dark'] .next-map-container-view-switch > button.active,
.next-map-container-view-switch > button.active {
    @apply bg-sky-500 text-white font-semibold;
}

body[data-theme='dark'] .next-map-container-view-switch > button {
    @apply bg-gray-700 text-white;
}

body[data-theme='dark'] .next-map-container-view-switch > button:hover,
body[data-theme='dark'] .next-map-container-view-switch > button:focus,
body[data-theme='dark'] .next-map-container-view-switch > button:active {
    @apply outline-none;
}

.next-view-container {
    display: flex;
    flex-shrink: initial;
    flex-basis: initial;
    flex-direction: row;
    flex-grow: 1;
    position: relative;
    overflow: auto;
    align-items: stretch;
    justify-items: stretch;
    place-items: stretch;
    overflow: hidden;
}

.next-view-container.sidebar-is-resizing {
    overflow-x: hidden;
}

.next-view-section-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.next-view-container > .next-view-section-container,
.next-view-container > section.next-view-section {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.next-view-header-item {
    @apply rounded-md text-sm px-3 py-1 flex items-center justify-center border border-transparent cursor-default mr-2;
    max-height: 31px;
}

.next-view-header-item > div:first-child {
    width: 1.5rem;
}

body[data-theme='light'] a.next-view-header-item:hover,
a.next-view-header-item:hover,
.next-view-header-item:hover,
.next-view-header-item.active,
.next-view-header-item.is-open {
    @apply bg-sky-500 text-white shadow-sm cursor-default;
}

body[data-theme='dark'] .next-view-header-item:hover,
body[data-theme='dark'] .next-view-header-item.active,
body[data-theme='dark'] .next-view-header-item.is-open {
    @apply bg-gray-700 bg-opacity-75 cursor-default;
}

.next-content-panel-wrapper {
    @apply flex flex-col;
}

.next-content-panel-wrapper .next-content-panel-container {
    @apply flex flex-col;
}

.next-content-panel-wrapper .next-content-panel-container .next-content-panel {
    @apply flex flex-col;
}

.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply flex flex-row items-center justify-between;
    min-height: 2.5rem;
}

/** bordered classic styling panel header */
.next-content-panel-wrapper.bordered-classic .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply border rounded-t-md bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 px-3;
}

.next-content-panel-wrapper.bordered-classic .next-content-panel-container .next-content-panel > .next-content-panel-body {
    @apply border-b border-x rounded-b-md bg-gray-100 dark:bg-gray-800 border-gray-200 dark:border-gray-700 px-3 py-2;
}

.next-content-panel-wrapper.bordered-classic.is-closed .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply rounded-md;
}

body[data-theme='dark'] .next-content-panel-wrapper.bordered .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply shadow-sm text-gray-200;
}

/** bordered styling panel header */
.next-content-panel-wrapper.bordered .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply border rounded-lg bg-gray-50 dark:bg-gray-900 border-gray-300 dark:border-gray-700 px-3 mb-2;
}

body[data-theme='dark'] .next-content-panel-wrapper.bordered .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply shadow-sm text-gray-200;
}

/** bordered inline styling */
.next-content-panel-wrapper.bordered-inline .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply border-t border-b bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 px-3;
}

.next-content-panel-wrapper.bordered-inline .next-content-panel-container.is-closed .next-content-panel > .next-content-panel-header {
    @apply border-b-0;
}

.next-content-panel-wrapper.bordered-inline:first-child .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply border-t-0;
}

body[data-theme='dark'] .next-content-panel-wrapper.bordered-inline .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply shadow-sm text-gray-200;
}

.next-content-panel-wrapper.bordered-inline .next-content-panel-container.is-open .next-content-panel > .next-content-panel-body > .next-content-panel-body-wrapper {
    @apply py-2 px-3;
}

/** simple single top bordered styling */
.next-content-panel-wrapper.bordered-top .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply border-t border-gray-200 dark:border-gray-700 px-3 py-0.5;
}

.next-content-panel-wrapper.bordered-top:first-child .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply border-t-0;
}

body[data-theme='dark'] .next-content-panel-wrapper.bordered-top .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply text-gray-200;
}

.next-content-panel-wrapper.bordered-top .next-content-panel-container.is-open .next-content-panel > .next-content-panel-body > .next-content-panel-body-wrapper {
    @apply pt-1 px-3 pb-5;
}

/** fix padding on closed panels */
.next-content-panel-wrapper.bordered.is-closed .next-content-panel-container .next-content-panel > .next-content-panel-body,
.next-content-panel-wrapper.bordered-inline.is-closed .next-content-panel-container .next-content-panel > .next-content-panel-body,
.next-content-panel-wrapper.bordered-top.is-closed .next-content-panel-container .next-content-panel > .next-content-panel-body,
.next-content-panel-wrapper.bordered-classic.is-closed .next-content-panel-container .next-content-panel > .next-content-panel-body {
    padding: 0;
}

.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-left {
    @apply flex flex-1 items-center py-2;
}

.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-left .icon-container {
    @apply w-5 h-full text-xs;
}

.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-right .icon-container {
    @apply w-5 h-full text-xs;
}

.next-content-panel-wrapper
    .next-content-panel-container
    .next-content-panel
    > .next-content-panel-header
    .next-content-panel-header-left
    > .next-content-panel-title-container
    .panel-title {
    @apply text-sm font-semibold uppercase;
}

.next-content-panel-wrapper
    .next-content-panel-container
    .next-content-panel
    > .next-content-panel-header.bordered
    .next-content-panel-header-left
    > .next-content-panel-title-container
    .panel-title {
    @apply font-normal;
}

body[data-theme='light'] .details-wrapper .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply bg-white;
}

.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-left > .next-content-panel-title-container {
    @apply flex flex-row items-center;
}

.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-right {
    @apply flex flex-1 items-center justify-end space-x-1 py-2;
}

.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-right button.btn,
.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-right > .btn-wrapper > .btn {
    @apply text-xs;
    max-height: 1.75rem;
}

body[data-theme='light']
    .next-content-panel-wrapper
    .next-content-panel-container
    .next-content-panel
    > .next-content-panel-header
    .next-content-panel-header-right
    .status-badge.info-status-badge
    > span {
    @apply bg-blue-500 border border-blue-600;
}

/* .next-content-panel-wrapper .next-content-panel-container .next-content-panel.next-content-panel-is-closed > .next-content-panel-header,
.next-content-panel-wrapper .next-content-panel-container .next-content-panel.cp-is-closed > .next-content-panel-header {
    @apply rounded-md;
} */

.next-content-panel-wrapper .next-content-panel-container .next-content-panel.next-content-panel-is-closed > .next-content-panel-body,
.next-content-panel-wrapper .next-content-panel-container .next-content-panel.cp-is-closed > .next-content-panel-body {
    @apply border-0;
}

/* .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-body {
    @apply rounded-b-md border border-gray-200 border-t-0;
} */

/* body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header {
    @apply border-gray-700 bg-gray-900;
} */

/* body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-body {
    @apply border-gray-700;
} */

.next-view-header {
    display: flex;
    box-align: center;
    align-items: center;
    justify-content: space-between;
    padding: 0px 24px 0px 36px;
    height: 57px;
    flex-shrink: 0;
    min-width: 100vw;
    max-width: 100%;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-app-region: drag;
}

.next-view-header .next-view-header-left {
    flex: 1;
    display: flex;
    box-align: center;
    align-items: center;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-app-region: drag;
}

.next-view-header .next-view-header-right {
    flex: 0 0 auto;
    display: flex;
    box-align: center;
    align-items: center;
    justify-content: flex-end;
    user-select: none;
    -webkit-app-region: drag;
}

.next-view-header .next-view-header-right .next-user-button button.next-dd-item svg,
.next-view-header .next-view-header-right .next-user-button a.next-dd-item svg {
    color: #1e293b;
}

body[data-theme='dark'] .next-view-header .next-view-header-right .next-user-button button.next-dd-item svg,
body[data-theme='dark'] .next-view-header .next-view-header-right .next-user-button a.next-dd-item svg {
    color: #cbd5e1;
}

.next-view-header #view-header-left-content-a,
.next-view-header #view-header-left-content-b,
.next-view-header #view-header-actions {
    display: flex;
}

.next-view-header .left {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.next-view-header .title {
    font-style: normal;
    line-height: normal;
    text-align: left;
    font-weight: 500;
    font-size: 15px;
}

.next-view-header .title.breadcrumb::before {
    @apply text-gray-400;
    content: '▸';
    margin: 0 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.next-view-section-footer,
.next-view-section-subheader {
    @apply border-gray-200 dark:border-gray-700;
    border-bottom-width: 1px;
    display: flex;
    flex: 0 0 57px;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    box-align: center;
    padding: 0px 24px 0px 36px;
    height: 57px;
    min-height: 57px;
    max-height: 57px;
    /* height: 44px; */
}

.next-view-section-subheader-fixed-height {
    height: 57px !important;
}

/** fix heights of subheader actions */
.next-view-section-subheader > .next-view-section-subheader-actions input.form-input,
.next-view-section-subheader > .next-view-section-subheader-actions span.btn-wrapper > button.btn {
    height: 28px;
}

.next-view-section-subheader.is-mobile {
    display: flex;
    flex-direction: row;
}

.next-view-section-subheader {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.next-view-section-footer.next-view-section-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.next-view-section-footer {
    @apply border-b-0 border-t sticky bottom-0 inset-x-0 dark:bg-gray-900;
}

.next-view-section-subheader .next-view-section-subheader-title {
    @apply text-base;
}

.next-view-section-subheader .next-view-section-subheader-left {
    flex: 1;
    display: flex;
    box-align: center;
    align-items: center;
}

.next-view-section-subheader .next-view-section-subheader-left .next-view-section-subheader-left-inner-wrapper {
    min-width: 100px;
}

.next-view-section-subheader .next-view-section-subheader-actions {
    flex: 1;
    display: flex;
    box-align: center;
    align-items: center;
    justify-content: flex-end;
}

.next-view-section-subheader .next-view-section-subheader-actions button.btn {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.next-view-section-subheader .next-view-section-subheader-actions .ember-basic-dropdown-trigger {
    margin: 0;
    padding: 0;
    display: flex;
}

.next-sidebar {
    height: 100%;
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    --sidebar-transition-width: 220px;
    --sidebar-drawer-width: 220px;
    --sidebar-collapse-offset: 0px;
    --sidebar-collapse-progress: 0;
    min-width: 0;
    max-width: 330px;
    width: 220px;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 2;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto;
    transition:
        margin-right 500ms,
        transform 500ms;
}

nav.next-sidebar {
    overflow: hidden;
}

.next-sidebar.sidebar-is-resizing {
    transition: none;
}

.next-sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background-color: rgb(229 231 235);
    pointer-events: none;
    z-index: 2;
}

.next-sidebar.sidebar-hide {
    margin-right: calc(-1 * var(--sidebar-transition-width));
    transform: translateX(-100%);
    pointer-events: none;
}

.next-sidebar.sidebar-hidden {
    margin-right: calc(-1 * var(--sidebar-transition-width));
    transform: translateX(-100%);
    pointer-events: none;
}

.next-sidebar.sidebar-minimized {
    transition: all 500ms;
    transform: translateX(-65%);
}

.next-sidebar > .next-sidebar-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.next-sidebar > .next-sidebar-content > .next-sidebar-content-inner {