:root {
    --sell-navbar-height: 62px;
    /* --sell-sidebar-width: 68px; */
    /* --sell-sidebar-width: 90px; */
    /* --sell-sidebar-width: 50px; */
    /* --sell-sidebar-width: 200px; */
    --sell-left-panel: 300px;
    /* --sell-bottom-panel: 250px; */
    --sell-side-nav-width: 250px;
    --sell-side-nav-collapse-width: 74px;
    --sell-footer-height: 32px;

    --sell-left-panel: 300px;
    --sell-bottom-panel: 250px;

    --sell-left-float-panel-width: 330px;

}

.app-wrapper.app-side-nav-collapsed .app-side-nav {
    width: var(--sell-side-nav-collapse-width);
}

/* .app-wrapper.app-side-nav-collapsed .app-side-nav .menu-text {
    display: none;
} */

/* .app-wrapper.app-side-nav-collapsed .app-side-nav .menu-text,
.app-wrapper.app-side-nav-collapsed .app-side-nav .submenu {
    display: none;
} */

.app-wrapper.app-side-nav-collapsed .app-side-nav .menu-text,
.app-wrapper.app-side-nav-collapsed .app-side-nav .submenu.show {
    display: none;
}

/* .app-wrapper.app-side-nav-collapsed .app-main,
.app-wrapper.app-side-nav-collapsed .app-footer {
    left: var(--sell-side-nav-collapse-width);
} */


[dir='ltr']
.app-wrapper.app-side-nav-collapsed .app-main,
[dir='ltr']
.app-wrapper.app-side-nav-collapsed .app-footer {
    left: var(--sell-side-nav-collapse-width);
}

[dir='rtl']
.app-wrapper.app-side-nav-collapsed .app-main,
[dir='rtl']
.app-wrapper.app-side-nav-collapsed .app-footer {
    right: var(--sell-side-nav-collapse-width);
}



.app-header {
    /* background-color: brown; */
}

.app-side-nav {
    /* background-color: cadetblue; */
    background-color: var(--bs-body-bg);
}

.app-main {
    /* background-color: cornflowerblue; */
}

.app-footer {
    /* background-color: brown; */
    background-color: var(--bs-body-bg);
}

.app-header {
    z-index: 100;
    position: fixed;
    height:  var(--sell-navbar-height);
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--bs-body-bg);
    box-shadow: 0 5px 20px -10px #000;
}

.app-side-nav {
    z-index: 11;
    position: fixed;
    width: var(--sell-side-nav-width);
    top: var(--sell-navbar-height);
    /* left: 0; */
    /* bottom: var(--sell-footer-height); */
    bottom: 0;
    transition: width .3s ease;

    /* box-shadow: 20px 0 20px -20px #000; */
    overflow: hidden;
    font-size: .875rem;
}

[dir='ltr'] .app-side-nav {
    left: 0;
    box-shadow: 20px 0 20px -20px #000;
}

[dir='rtl'] .app-side-nav {
    right: 0;
    box-shadow: -20px 0 20px -20px #000;
}


.app-side-nav:hover {
    width: var(--sell-side-nav-width) !important;
}

.app-side-nav .menu-text {
    font-size: .875rem;
}

.app-side-nav .nav-link {
    width: var(--sell-side-nav-width) !important;
    text-align: left !important;
}

.app-side-nav:hover .menu-text {
    display: inline !important;
}

.app-side-nav:hover .submenu.show {
    display: flex !important;
}


.app-side-nav .menu-arrow {
    display: flex !important;
}

.app-side-nav .menu-btn {
    height: 42px;
}

.app-side-nav .menu-item .menu-arrow {
    transition: all .5s;
}

.app-side-nav .menu-item.menu-open .menu-arrow {
    transform: rotate(-90deg);
}


.app-main {
    position: fixed;
    top: var(--sell-navbar-height);
    /* left: var(--sell-side-nav-width);
    right: 0; */
    bottom: var(--sell-footer-height);
    transition: left 0.1s ease;
}

[dir='ltr'] .app-main,
[dir='ltr'] .app-footer {
    left: var(--sell-side-nav-width);
    right: 0;
}

[dir='rtl'] .app-main,
[dir='rtl'] .app-footer {
    left: 0;
    right: var(--sell-side-nav-width);
}


.app-footer {
    position: fixed;
    height:  var(--sell-footer-height);
    bottom: 0;
    /* right: 0;
    left: var(--sell-side-nav-width); */
    font-size: .75rem;
}

.app-main-contanair {
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: var(--sell-left-panel) 1fr;
    grid-template-rows: minmax(0, 1fr) var(--sell-bottom-panel);
    /* grid-gap: 1rem; */
}

.es-shell-content-panel {
    grid-row: 1;
    grid-column: 2;
}

.es-shell-content-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0px;
}

.es-shell-left-panel {
    grid-row: 1 / 3;
    grid-column: 1;
}

.es-shell-bottom-panel {
    grid-row: 2;
    grid-column: 2;
}

.es-shell-left-float-panel {
    position: absolute;
    top: 15px;
    left: 15px;
    /* height: fit-content; */
    /* bottom: 15px; */
    /* margin-bottom: 15px; */
    width: var(--sell-left-float-panel-width);
    /* max-height: calc(100vh - 200px); */
    max-height: calc(100% - 30px);
    /* pointer-events: none; */
}

.es-shell-left-float-panel-content {
    pointer-events: auto;
}

.es-shell-bottom-float-panel {
    position: absolute;
    left: calc( 30px + var(--sell-left-float-panel-width) );
    bottom: 15px;
    right: 15px;
}


.es-shell-content-panel.es-module-collapse{
    grid-template-columns: 0px 1fr;
}

.app-main-contanair.es-shell-left-panel-collapse {
    /* grid-template-columns: var(--sell-sidebar-width) 0px 1fr; */
    --sell-left-panel: 0px;
}

.app-main-contanair.es-shell-bottom-panel-collapse {
    /* grid-template-rows: var(--sell-navbar-height) minmax(0, 1fr) 0 20px; */
    --sell-bottom-panel: 0px;
}

/* .app-main-contanair.es-shell-left-float-panel-collapse .es-shell-left-float-panel,
.app-main-contanair.es-shell-bottom-float-panel-collapse .es-shell-bottom-float-panel {
        display: none !important;
} */

[dir='ltr'] .es-shell-left-float-panel {
    left: 15px;
}

[dir='rtl'] .es-shell-left-float-panel {
    right: 15px;
}

[dir='ltr'] .es-shell-bottom-float-panel {
    left: calc( 30px + var(--sell-left-float-panel-width) );
    right: 15px;
}

[dir='rtl'] .es-shell-bottom-float-panel {
    left: 15px;
    right: calc( 30px + var(--sell-left-float-panel-width) );
}


[dir='ltr'] .mapboxgl-ctrl-top-right {
    display: block;
}

[dir='rtl'] .mapboxgl-ctrl-top-right {
    display: none;
}

[dir='ltr'] .mapboxgl-ctrl-top-left {
    display: none;
}

[dir='rtl'] .mapboxgl-ctrl-top-left {
    display: block;
}


.geofence-draw-contanair {
    position: relative;
    /* top: calc(var(--sell-navbar-height) + 10px); */
    margin-top: 20px;
    top: var(--sell-navbar-height);
    left: 0;
    right: 0;
    width: 500px;
    /* height: 50px !important; */
    border-radius: 4px;
}

[dir='ltr'] .geofence-draw-contanair {
    left: var( --sell-left-float-panel-width);
}

[dir='rtl'] .geofence-draw-contanair {
    right: var( --sell-left-float-panel-width);
}