:root {
    --buttons-padding: var(--Padding-md) var(--Padding-sm) var(--Padding-lg) var(--Padding-sm);

    --zIndex-flatpickr-calendar-custom-position: 100;
    --zIndex-allArea-topBar-userBox-userMenu: 100;
    --zIndex-allArea-topBar-nav: 100;
    --zIndex-calendar: 100;
    --zIndex-side-sheet-bg: 1000;
    --zIndex-side-sheet: 2000;
    --zIndex-bottomSheet: 3000;
    --zindex-aside: 4000;
    --zIndex-modal: 5000;
    --zIndex-banner-container: 6000;
    --zIndex-allLoading: 7000;
    --zIndex-snackbar-container: 8000;
}
@media only screen and (min-width: 960px) {
    :root {
        --buttons-padding: var(--Padding-xl) 0 var(--Padding-xl) 0;
    }
}


::-webkit-scrollbar { /* width */
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track { /* Track */
    background: transparent;
}
::-webkit-scrollbar-thumb { /* Handle */
    background: var(--Background-Elevated);
    border-radius: 96px;
    border: 2px solid var(--Background-Surface);
    background-clip: padding-box;
}
    ::-webkit-scrollbar-thumb:hover { /* Handle on hover */
        background: var(--Background-Soft);
    }

body {
    background: var(--Background-Reverse);
}

.allLoading {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0px;
    background-color: #F3F3F380;
    z-index: var(--zIndex-allLoading);
}
    .allLoading .box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 88px;
        height: 72px;
        background-color: #FFFFFF;
        border-radius: 8px;
    }

.allArea {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    max-width: 1232px;
    height: 100%;
    margin: 0px auto;
}

    .allArea > * {
        width: 100%;
    }

    .allArea .topBar {
        display: flex;
        justify-content: end;
        align-items: center;
        margin: var(--Margin-sm) 0 var(--Margin-md) 0;
        border-bottom: 1px solid var(--Borders-On-Dark);
    }

    .allArea .topBar .mobile {
        display: none;
        width: 100%;
        padding: 0 var(--Padding-xs) 0 var(--Padding-md);
        gap: var(--Gap-xs);
    }
    .allArea .topBar .desktop {
        width: 100%;
        min-height: 48px;
        padding: 0 var(--Padding-md) 0 var(--Padding-md);
        gap: var(--Gap-lg);
    }

    .topNavBar {
        margin-left: auto;
        direction: rtl;
        gap: calc( var(--Gap-sm) + var(--Gap-lg) + var(--Gap-sm) );
    }

    .topNavBar .close {
        margin-right: auto;
    }
    .topNavBar .close svg {
        width: 24px;
        height: 24px;
        stroke: white;
    }

    .allArea .topBar .hamburgerMenu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    .allArea .topBar .hamburgerMenu svg {
        width: 24px;
        height: 24px;
        stroke: var(--Header-Icons);
        pointer-events: none;
    }
    .allArea .topBar > a {
        color: var(--Header-Texts);
    }

    .allArea .topBar .back {
        display: none;
        cursor: pointer;
        height: 40px;
    }
    .allArea .topBar .back > span {
        white-space: nowrap;
    }
    .allArea .topBar .back > svg {
        width: 24px;
        height: 24px;
        stroke: var(--Header-Texts);
    }
        
    .allArea .topBar .spacer {
        height: 10px;;
        margin-right: auto ;
    }
    .allArea .topBar .topBarTitle {
        overflow: hidden;
        flex: 1;
        justify-content: end;
        color: var(--Header-Texts);
        white-space: nowrap;
    }

    .allArea .topBar .topBarLogo svg {
        width: 40px;
        height: 28px;
        color: var(--Colors-Primary-600);
    }

    .allArea > main {
        position: relative;
        flex: 1;
        align-items: start;
        justify-content: start;
        background-color: var(--Background-Surface);
        min-height: 500px;
        padding-top: var(--Padding-lg);

        overflow-x: hidden;
        overflow-y: auto;
    }
    .allArea > main .topAreaHeader {
        height: 40px;
    }
    .allArea > main .topAreaHeader .leftSection {
        margin-right: auto;
    }
    .allArea > main .topAreaHeader .titleSection {
        position: absolute;
        margin: 0px auto;
        height: 40px;
        padding: 0px var(--Padding-2xl);
        color: var(--Text-Heading-Primary);
        border-bottom: 1px solid var(--Borders-Brand-Mid);
        align-items: center;
    }
    .allArea > main .topAreaHeader .leftSection {
        margin: 0px auto 0px var(--Padding-sm);
    }
    .allArea > main .topAreaHeader .rightSection {
        margin: 0px var(--Padding-sm) 0px auto;
    }

    .allArea > main > .placeHolder {
        background-color: var(--Background-Surface);
        flex: 1;
        width: 100%;
        height: 100%;
    }

    .allArea > main .mainArea {
        background: var(--Background-Surface);
        padding: var(--Padding-xl) var(--Padding-sm) 0px var(--Padding-sm);
    }

.mainErrorArea {
    display: none;
    justify-content: center;
    align-items: center;
    gap: var(--Gap-xl);
    width: 100%;
    height: 100%;
    background-color: var(--Background-Surface);
}
.modal {
    position: fixed;
    inset: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--zIndex-modal);
}
.modal .box {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Gap-xl);
    flex: 1 0 0;
    max-height: 100%;
    padding: var(--Padding-xl);
    color: var(--Text-Body-Primary);
    max-width: 320px;
    border-radius: var(--Radius-lg);
    background: var(--bottom-sheets-modals-background);
    direction: rtl;
}
.buttonArea {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--Gap-md);
    width: 100%;
}
aside {
    overflow: auto;
    display: none;
    position: fixed;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    inset: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--zindex-aside);
    opacity: 0;
    transition: all 0.4s ease-out;
}
aside.opened {
     opacity: 1;
}
aside main {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: var(--Gap-md);
    flex: 1 0 0;
    width: 280px;
    padding: var(--Padding-5xl) var(--Padding-sm) var(--Padding-xl) var(--Padding-sm);
    color: var(--Text-Body-Primary);
    border-radius: 12px 0px 0px 12px;
    background: var(--Background-Surface);
    transform: translateX(280px);
    transition: transform 0.4s ease-out;
}
aside.opened main {
     transform: translateX(0px);
}
aside main .userInfo {
    overflow: hidden;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32px;
    color: var(--Text-Heading-Secondary);
    padding: 0px var(--Padding-sm);
}
aside main .item {
    width: 100%;;
}
aside main .item a {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--Gap-sm);
    width: 100%;
    height: 48px;
    padding: 0px var(--Padding-sm);
    color: var(--Text-Heading-Primary);
    border-radius: var(--Radius-full);
    direction: rtl;
}
aside main .item a .plus, aside main .item a .minus {
    position: absolute;
    top: 16px;
    left: var(--Padding-sm);
    width: 16px;
    height: 16px;
    margin-right: auto;
    stroke: var(--Icons-Interactive-Alt);
    transition: all 0.2s ease-in;
    opacity: 1;
}
aside main .item a .minus {
    opacity: 0;
}
aside main .item.opened a .plus {
    opacity: 0;
}
aside main .item.opened a .minus {
    opacity: 1;
}
aside main .item a .icon  {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--Radius-full);
}
aside main .item a .icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--Icons-Interactive);
}

aside main .item.disabled a {
    color: var(--Text-Semantic-Disabled);
    background-color: unset !important;
    pointer-events: none;
    cursor: default;
}
aside main .item.disabled a .icon svg {
     stroke: var(--Icons-Disabled);
}

aside main .item a:hover {
     background-color: var(--Background-Soft);
}

aside main .item.secondary a {
    color: var(--Text-Body-Tertiary);
}
aside main .item.secondary a svg {
    stroke: var(--Icons-Interactive-Alt);
}

aside main .item .sub-menu {
    display: flex;
    width: 100%;
    margin-top: var(--Margin-md);
    flex-direction: column;
    justify-content: start;
    align-items: end;
    gap: var(--Gap-md);
}
aside main .item.opened .sub-menu {
    display: flex;
}

aside main .item > a.selected {
    font-weight: 700;
    background-color: var(--Background-Soft);
}
aside main .item > a.selected .icon {
    background-color: var(--Background-Brand-Mid);
}
aside main .item > a.selected .icon svg {
    stroke: var(--Icons-Heading);
}
aside main .item.opened > a.selected {
    font-weight: 700;
    background-color: var(--Background-Soft);
}

aside main .item .sub-menu a.selected {
    font-weight: 700;
    background-color: var(--Background-Soft);
}

aside main .item .sub-menu a.selected .icon div {
    width: 10px;
    height: 10px;
    background-color: var(--Background-Brand-High);
    border-radius: var(--Radius-full);
}

aside main .spacer  {
    margin-bottom: auto;
}

aside main .item.exit a {
    color: var(--Text-Body-Tertiary);
}
aside main .item.exit a svg {
    stroke: var(--Icons-Interactive-Alt);
}

aside main .copyright  {
    margin-top: 12px;
}
aside main .copyright svg {
    width: 23px;
    height: 16px;
    color: var(--Colors-Neutrals-400);
}


.divider {
    width: 100%;
    height: 1px;
    min-height: 1px;
    background: var(--Borders-Subtle);
 }

.allArea > main .mainArea .mainContainer {
    flex: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    width: 100%;
    zzzzzzzzmax-width: 500px;
}

.allArea > footer  {
    display: none;
}

.bottomSheet .list, .bottomSheet section, .sideSheet .list, .sideSheet section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: var(--Gap-md);
}
    .bottomSheet .list header, .bottomSheet section header, .sideSheet .list header, .sideSheet section header {
        width: 100%;
        display: flex;
        justify-content: end;
        align-items: center;
        gap: var(--Gap-xs);
        color: var(--Text-Heading-Primary);
    }
        .bottomSheet .list header svg.titleIcon, .bottomSheet section header svg.titleIcon, .sideSheet .list header svg.titleIcon, .sideSheet section header svg.titleIcon {
            width: 24px;
            height: 24px;
            stroke: var(--Text-Heading-Primary);
        }

.shared .circle {
    width: 8px;
    height: 8px;
    border: 2px solid var(--Text-Semantic-Info);
    border-radius: 50%;
}

@media only screen and (max-width: 959px) {

    .allArea .topBar {
        min-height: 50px;
        border-bottom: 0px;
    }

    .allArea .topBar .mobile {
        display: flex;
    }
    .allArea .topBar .desktop {
        display: none;
    }

    .allArea > main .topAreaHeader {
        display: none;
    }
    .topNavBar {
        display: none;
    }

}

@media only screen and (min-width: 960px) {

    .allArea .topBar .hamburgerMenu {
        margin-left: var(--Padding-sm);
    }

    .allArea .topBar .topBarTitle {
        display: none;
    }

    .allArea > main .topAreaHeader {
        position: relative;
        width: calc( 100% - 2 * var(--Padding-md));
        min-width: 360px;
        max-width: 1232px;
        min-height: 40px;
        margin: 0px var(--Padding-md);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .allArea > main .topAreaHeader button.btnTopAreaHeaderBack {
        position: absolute;
        top: 20px;
        right:0px;
    }

    .allArea > main {
        width: calc( 100% - var(--Gap-md) - var(--Gap-md) );
        border-radius: var(--Radius-md);
    }
    .allArea > main > .placeHolder {
        border-radius: var(--Radius-md);
    }
    .allArea > main .mainArea {
        border-radius: 0px 0px var(--Radius-md) var(--Radius-md);
        padding-top: var(--Padding-xl) !important;
    }

    .mainErrorArea {
        border-radius: var(--Radius-md);
    }
   
    .allArea footer  {
        display: flex;
        min-height: 40px;
        justify-content: center;
        gap: var(--Gap-sm);
        color: var(--Text-Body-Reverse-Secondary);
    }
}

/* Default fullscreen button */
.sangaar-fullscreen-btn {
    background: var(--Background-Surface) url("../../Images/icon-maximize.svg") no-repeat center center !important;
    background-size: 16px 16px;
    border-radius: var(--Radius-sm);
}
/* When map is already fullscreen */
.sangaar-fullscreen-btn.is-full {
  background-image: url("../../Images/icon-minimize.svg") !important;
}

.routeIcon  {
    display: flex;
    width: 28px;
    height: 28px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--Radius-full);
    box-shadow: 0 0 6px 0 rgba(133, 133, 133, 0.80);
    transform: rotate(var(--dir, 0deg));
}
.routeIcon svg  {
    width: 16px;
    height: 16px;
}
.routeMarker .routeIcon .disk  {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) translateY(-50%);
    border-radius: var(--Radius-full);
    background-color: var(--Icons-High-Contrast);
}
.routeMarker.showDisk .routeIcon svg  {
    display: none;
}
.routeMarker.showDisk .routeIcon .disk  {
    display: block;
}
.routeMarker .routeIcon.showAsGreenDot .disk  {
    display: block;
    background-color: green;
}
.routeMarker.showAsDot .routeIcon .disk  {
    display: block;
    background-color: var(--Icons-High-Contrast);
}

.routeIcon.move {
    border: 1px solid var(--Borders-Success);
    background: var(--Background-Surface);
}
.routeIcon.move svg {
    stroke: var(--Icons-Success);
}
.routeIcon.move.selected {
    background: var(--Background-Success-High);
}
.routeIcon.move.selected svg {
    stroke: var(--Icons-High-Contrast);
}

.routeIcon.stop {
    border: 1px solid var(--Borders-Warning);
    background: var(--Background-Surface);
}
.routeIcon.stop svg {
    stroke: var(--Icons-Warning);
}
.routeIcon.stop.selected {
     background: var(--Background-Warning-High);
}
.routeIcon.stop.selected svg {
    stroke: var(--Icons-High-Contrast);
}

.routeMarker.showAsDot {
    margin-left: -4px !important;
    margin-top: -4px !important;
    width: 8px !important;
    height: 8px !important;
}
.routeMarker.showAsDot .routeIcon  {
    width: 8px;
    height: 8px;
    border: unset;
    background-color: unset;
    box-shadow: none;
    pointer-events: none;
}
.routeIcon svg  {
    width: 16px;
    height: 16px;
}
.routeMarker.showAsDot .routeIcon svg  {
    display: none;
}

.marker-cluster-small {
    background-color: rgba(46, 46, 46, 0.6) !important;
}
.marker-cluster-small div {
    background-color: rgba(46, 46, 46, 0.6) !important;
}
.marker-cluster-medium {
    background-color: rgba(46, 46, 46, 0.6) !important;
}
.marker-cluster-medium div {
    background-color: rgba(46, 46, 46, 0.6) !important;
}
.marker-cluster-large {
    background-color: rgba(46, 46, 46, 0.6) !important;
}
.marker-cluster-large div {
    background-color: rgba(46, 46, 46, 0.6) !important;
}
.marker-cluster {
    color: white !important;
}