@import "../design-system/variables/_colors.css";
@import "../design-system/variables/_dimensions.css";
@import "../design-system/variables/_fonts.css";
@import url('https://fonts.googleapis.com/css2?family=MuseoModerno&family=Noto+Sans+Arabic:wght@500&family=Roboto&family=Tajawal&display=swap');

@font-face {
    font-family: 'Helvetica', sans-serif;
    src: url(../../css/fonts/Helvetica.otf);
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

body {
    font-family: 'Helvetica', sans-serif !important;
}

    body * {
        font-family: 'Helvetica', sans-serif;
    }

@font-face {
    font-family: 'Tajawal', sans-serif;
    src: url(../../css/fonts/Tajawal-Regular.ttf);
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

[dir=rtl], [dir=rtl], .rtl, [dir=rtl] *:not(.fa, .fas), [dir=rtl], .rtl * {
    font-family: 'Tajawal', sans-serif !important;
}

body {
    font-family: 'Helvetica', sans-serif !important;
    background: var(--norma__neutral--light-blue);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/***** header *****/
header.appHeader {
    height: var(--norma--height-xxxl);
}

    header.appHeader nav {
        height: var(--norma--height-xxxl);
        display: flex;
        width: calc(100% - var(--norma--width-xxxl-nav) - 11px);
        margin-inline-start: 11px;
        /*        border-radius: var(--norma--border-raduis-md) 0 var(--norma--border-raduis-md) var(--norma--border-raduis-md);
*/
        border-start-start-radius: var(--norma--border-raduis-md);
        border-start-end-radius: 0;
        border-end-end-radius: var(--norma--border-raduis-md);
        border-end-start-radius: var(--norma--border-raduis-md);
    }

    header.appHeader .toggleNavButtonWrap {
        width: var(--norma--width-xxxl-nav);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        position: relative
    }

    header.appHeader .toggleNavButton {
        border-radius: 50%;
        width: var(--norma--width-toggle-nav-btn);
        height: var(--norma--height-toggle-nav-btn);
        position: absolute;
        inset-inline-end: var(--norma--absolute-minus-var-24);
        display: flex;
        justify-content: center;
        align-items: center;
        outline: none;
    }

        header.appHeader .toggleNavButton img:nth-of-type(1) {
            position: absolute;
            inset-inline-start: var(--norma--absolute-minus-var-4);
            top: var(--norma--absolute-minus-var-4);
            inset-inline-end: var(--norma--absolute-minus-var-4);
            bottom: 0;
            z-index: 0;
        }

        header.appHeader .toggleNavButton img:nth-of-type(2) {
            position: absolute;
            inset-inline-start: var(--norma--absolute-minus-var-4);
            top: var(--norma--absolute-minus-var-4);
            inset-inline-end: var(--norma--absolute-minus-var-4);
            bottom: 0;
            z-index: 1;
        }
/* profile */
.profile {
    display: flex;
    align-items: center;
    padding-inline-start: var(--norma--padding-lg);
}

    .profile .profileName {
        font-size: 11px;
        text-transform: uppercase;
    }

        .profile .profileName span {
            color: #5f7583;
            font-size: 8px;
        }

        .profile .profileName p {
            color: var(--norma-primary--1);
            font-weight: 600;
            margin: 0px;
        }

            .profile .profileName p a {
                color: inherit;
                text-decoration: none;
            }

        .profile .profileName form button {
            padding: 0px;
            margin: 0px;
            border: none;
            font-size: 9px;
            font-weight: 500;
            text-transform: uppercase;
            color: #b6b5ac;
        }
/* logo */
.logo {
    margin-inline-start: auto;
    padding-inline: 8px;
    border-inline-start: 1px solid #213558;
}

    .logo img {
        display: block;
        height: 100%;
        width: auto;
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-end-end-radius: var(--norma--border-raduis-md);
        border-end-start-radius: 0;
    }
/* notificationsAndLanguageContainer */
.notificationsAndLanguageContainer {
    /* margin-inline-end: 40px; */
    margin-inline-start: auto;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}
/* notifications */
.notifications {
    margin-inline-end: 40px;
    /* margin-inline-start: auto; */
    /* flex-grow: 1; */
    position: relative;
    cursor: pointer;
}

    .notifications .notificationsIcon {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        /* justify-content: flex-end; */
        /* width: 100%; */
    }

        .notifications .notificationsIcon img {
            display: block;
            margin-inline-start: auto;
        }

        .notifications .notificationsIcon span {
            position: absolute;
            inset-inline-end: -24px;
            margin-top: 10px;
            color: #ffffff;
            font-size: 9px;
            font-weight: 600;
            font-family: "Poppins", sans-serif;
            background-color: #ff0000;
            border-radius: 7px;
            padding: 0px;
            width: 27px;
            height: 14px;
            text-align: center;
            line-height: 15px;
        }

    .notifications .notificationsList {
        width: 300px;
        /* height: 200px; */
        background: #28223e;
        position: absolute;
        inset-inline-end: -24px;
        z-index: 15;
        padding: 0px;
        list-style: none;
        z-index: 9999999999999999999;
    }

        .notifications .notificationsList.hidden {
            display: none;
        }

        .notifications .notificationsList .notification {
            /* background-color: #211B37;
    border: 3px solid #0B235A;
    box-shadow: 0px 3px 15px #030A25BA;
    margin: 0px 12px 6px;
    border-radius: 11px;
    padding: 5px;
    display: flex;
    align-items: center; */
            background-color: #211b37;
            border: none;
            box-shadow: none;
            margin: 0px 0px 1px 0px;
            border-radius: 0px;
            padding: 18px;
            display: flex;
            align-items: center;
            flex-grow: 1;
            width: 100%;
        }

        .notifications .notificationsList li:last-of-type {
            margin-top: 50px;
        }

        .notifications .notificationsList .notification img.notificationIcon {
            width: 30px;
            height: 30px;
            margin-inline-end: 16px;
        }

        .notifications .notificationsList .notification .notificationContent {
            margin-inline-end: 16px;
        }

            .notifications .notificationsList .notification .notificationContent h3 {
                color: rgba(254, 254, 254, 0.85);
                font-size: 12px;
                font-weight: 600;
                margin-bottom: 4px;
            }

            .notifications .notificationsList .notification .notificationContent p {
                color: rgba(254, 254, 254, 0.6);
                font-size: 10px;
                margin: 0px;
            }

        .notifications .notificationsList .notification button.closeIcon {
            background: transparent;
            padding: 0px;
            border: none;
            margin-inline-start: auto;
            margin-inline-end: 0px;
        }

            .notifications .notificationsList .notification button.closeIcon img {
                background: transparent;
                padding: 0px;
                border: none;
            }

        .notifications .notificationsList .SeeMoreBtn {
            color: #8aa1af;
            font-size: 8px;
            text-align: center;
            display: block;
            padding: 10px;
            text-decoration: underline;
            text-transform: capitalize;
            position: relative;
        }

        .notifications .notificationsList .SeeMoreBtnContainer {
            position: relative;
        }

            .notifications .notificationsList .SeeMoreBtnContainer::after {
                content: "";
                width: calc(100% - 20px);
                height: 1px;
                background: #273e63;
                position: absolute;
                top: 0px;
                inset-inline-start: 10px;
            }

/* language */
.language {
    position: relative;
    margin-inline-end: 40px;
    cursor: pointer;
}

    .language .languageIcon {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }

        .language .languageIcon img {
        }

        .language .languageIcon span {
            color: #b7cfe0;
            font-size: 12px;
            font-weight: 600;
            padding-inline-start: 5px;
            text-transform: uppercase;
        }

    .language .languageList {
        position: absolute;
        background: var( --norma__neutral--grey-3);
        width: var(--norma--width-xxxxl);
        list-style: none;
        padding: 0px;
        z-index: 1000;
        box-shadow: 0px 3px 6px var(--norma-shadow--grey-1);
        border-radius: var(--norma--border-raduis-sm);
        top: 40px;
        overflow: hidden;
    }

        .language .languageList.hidden {
            display: none;
        }

        .language .languageList li {
        }

            .language .languageList li a {
                text-decoration: none;
                font-size: var(--norma--font-xs);
                font-weight: 600;
                padding: var(--norma--padding-xs) var(--norma--padding-md);
                display: block;
                cursor: pointer;
                HEIGHT: var( --norma--height-md);
                LINE-HEIGHT: var(--norma--line-height-4);
            }
/*
            .language .languageList li:nth-of-type(1) a {
                border-bottom: 1px solid var(--norma__neutral--grey-2);
            }*/
/***** main *****/
main.appMain {
    display: flex;
    flex-grow: 1;
    height: calc(100vh - 54px);
}

.main.appMain.hidden {
    display: none;
}

/***** sideBar *****/
aside.appSideBar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: var(--norma--width-xxxl-nav);
    height: calc(100% - var(--norma--height-xxxl));
    padding-top: var(--norma--padding-md);
}

    /* menu */
    aside.appSideBar .menu {
        overflow-y: hidden;
        overflow-x: hidden;
        transition: overflow-y 0.3s;
    }

        aside.appSideBar .menu:hover {
            overflow-y: auto;
        }

main aside.appSideBar .menu::-webkit-scrollbar-thumb {
    background: #5a6c7b !important;
}

aside.appSideBar .menu ul {
    list-style: none;
    padding: 0px;
    margin: 0;
    text-align: center;
}

    aside.appSideBar .menu ul li {
        height: var(--norma--height-xxxl);
        width: calc(100% - var(--norma--margin-sm-md-between));
        display: flex;
        justify-content: center;
        align-items: center;
        margin: var(--norma--margin-xs-sm-between) var(--norma--margin-xs-sm-between);
        cursor: pointer;
        position: relative;
        text-align: initial;
        padding: var(--norma--padding-md) var(--norma--padding-md-lg-between);
    }

        aside.appSideBar .menu ul li > div, aside.appSideBar .menu ul li form button, aside.appSideBar .menu ul li form {
            width: var(--norma--width-md) !important;
            height: var(--norma--height-md) !important;
            text-align: center;
        }

            aside.appSideBar .menu ul li > div img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }

        aside.appSideBar .menu ul li.active::after {
            content: '';
            width: 5px;
            height: var(--norma--height-xxxl);
            position: absolute;
            inset-inline-end: var(--norma--absolute-minus-var-7);
            border-start-start-radius: var(--norma--border-raduis-hight);
            border-start-end-radius: 0;
            border-end-end-radius: 0;
            border-end-start-radius: var(--norma--border-raduis-hight);
        }

        aside.appSideBar .menu ul li.active > img {
            transform: rotate(90deg);
            filter: invert(71%) sepia(9%) saturate(3423%) hue-rotate(88deg) brightness(100%) contrast(76%);
            opacity: 1;
        }

        aside.appSideBar .menu ul li.active, aside.appSideBar .menu ul li:hover {
            border-radius: var(--norma--border-raduis-sm);
        }

        aside.appSideBar .menu ul li a {
            height: 50px;
            width: calc(100% - 10px);
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0px 5px;
            border-bottom: 1px solid rgba(112, 112, 112, 0.28);
        }

        aside.appSideBar .menu ul li form {
            width: 100%;
        }

            aside.appSideBar .menu ul li form button {
                border: none;
                padding: 0px;
                margin: 0 var(--norma--margin-xs);
                height: 50px;
                width: calc(100% - 10px);
                display: flex;
                align-items: center;
                width: 100%;
                justify-content: space-between;
            }

                aside.appSideBar .menu ul li form button > div {
                    display: flex
                }

                aside.appSideBar .menu ul li form button img {
                }
/* copyrights */
aside.appSideBar .copyrights {
    color: #6d8494;
    font-size: 9px;
    font-weight: 600;
    padding: 12px;
}

    aside.appSideBar .copyrights p {
        margin-bottom: 16px;
        font-size: var(--norma--font-xs);
    }

        aside.appSideBar .copyrights p:last-child {
            margin-bottom: 0px;
        }

/***** mainContent *****/
section.appContent {
    flex-grow: 1;
    width: calc(100% - 82px);
}

.hidden {
    display: none !important;
}
/* main layout sidebar*/
/*.norma--main-layout-menu li {
}

.norma--main-layout-menu img {
    margin-inline-end: 15px;
    margin-inline-start: 15px;
}

.norma--main-layout-menu span {
    width: 228px;
    color: #BDBDBD;
}

.norma--main-layout-menu-wrap {
    width: auto !important;
    max-width: 256px;
}
*/
aside.appSideBar.norma--main-layout-menu-wrap .menu ul li {
    justify-content: space-between;
}

    aside.appSideBar.norma--main-layout-menu-wrap .menu ul li > div {
        display: flex
    }

.norma--nav-title {
    display: none
}

aside.appSideBar.opened {
    width: var( --norma--width-sidebar-full);
    min-width: var( --norma--width-sidebar-full);
    text-align: initial;
}

    aside.appSideBar.opened .norma--nav-title {
        display: block;
        margin-inline-start: var(--norma--margin-md-lg-between);
        font-size: var(--norma--font-xs);
    }

header.appHeader.norma--main-layout-header-wrap.opened .toggleNavButtonWrap {
    width: var( --norma--width-sidebar-full);
    min-width: var( --norma--width-sidebar-full);
}

.sidebaropened section.appContent {
    width: calc(100% - var( --norma--width-sidebar-full));
}

aside.appSideBar .copyrights p {
    font-size: var(--norma--font-xxs);
}
/*@keyframes slideaway {
    from {
        display: block;
    }

    to {
        transform: translateY(40px);
        opacity: 0;
    }
}

.hidden {
    transition: display 200ms;
    display: none;
}*/
.askNormaHeaderButton {
    height: 32px !important;
    padding: 0 var(--norma--padding-md) 0 0 !important;
    background: var(--norma__neutral--light) !important;
    color: var(--norma__neutral--dark-blue) !important;
    font-weight: var(--norma--fw-bold) !important;
    font-size: var(--norma--font-xs) !important;
}

.askNormaWaitingSpinner {
    position: fixed;
    background: #1c243e;
    /* background: #00000030; */
    padding: 5px;
    width: auto;
    margin: auto;
    inset-inline-end: 416px;
    height: 44px;
    top: 5px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    inset-inline-start: 238px;
    justify-content: space-between;
}

.askNormaWaitingSpinnerProgress {
    position: relative;
    min-height: 6px;
    width: 98%;
    margin: 0 auto;
    border-radius: 15px;
    background: #AFB1D8;
}

    .askNormaWaitingSpinnerProgress .askNormaWaitingSpinnerColor {
        position: absolute;
        background-color: #3F53A4;
        width: 0px;
        height: 6px;
        border-radius: 15px;
        animation: progres 2s infinite linear;
    }

@keyframes progres {
    /*   0% {
        width: 50%;
        inset-inline-start: 0%;
    }

    25% {
        width: 50%;
        inset-inline-start:10%;
    }

    50% {
        width: 60%;
        inset-inline-start:20%
    }

    75% {
        width: 50%;
        inset-inline-start:40%
    }

    100% {
        width: 30%;
        inset-inline-start:70%
    }*/
    0% {
        width: 0%;
    }

    25% {
        width: 25%;
    }

    50% {
        width: 50%;
    }

    75% {
        width: 75%;
    }

    100% {
        width: 100%;
    }
}

.vehiclesAndOrdersContainer {
    width: 101%;
}

    .vehiclesAndOrdersContainer .owl-nav.disabled {
        display: block !important;
    }

    .vehiclesAndOrdersContainer .owl-nav button.owl-next, .vehiclesAndOrdersContainer .owl-nav button.owl-prev {
        background: linear-gradient(78.45deg, #0F223D -25.64%, #0F233D 392.94%) !important;
    }

    .vehiclesAndOrdersContainer .rz-chart {
        position: relative;
        height: 118px;
        width: 86px;
    }

.vehicle_timeline_grid_manual .each_vehicle.border-bottom-custom.clicked, .vehicle_timeline_grid_manual .each_vehicle.border-bottom-custom.clickedEl {
    background: rgba(189, 217, 249, 1);
    border: 1px solid rgba(26, 127, 213, 1);
/*    cursor: default;*/
}

.vehicle_timeline_grid_manual .each_vehicle.border-bottom-custom.clickedEl {
        cursor: default;
}
    .vehicle_timeline_grid_manual .each_vehicle.border-bottom-custom.clicked *, .vehicle_timeline_grid_manual .each_vehicle.border-bottom-custom.clickedEl * {
        color: #000 !important;
    }


.vehicle_timeline_grid_manual .each_vehicle.border-bottom-custom:hover {
    background: rgba(189, 217, 249, 1);
    border: 1px solid rgba(26, 127, 213, 1);
/*    cursor: default;*/
}

    .vehicle_timeline_grid_manual .each_vehicle.border-bottom-custom:hover * {
        color: #000 !important;
    }

.vehicle_timeline_grid_manual .each_vehicle.vehicle_row:hover {
    background: rgba(189, 217, 249, 0.8);
}

.vehicle_timeline_grid_manual .each_vehicle.vehicle_row.clicked, .vehicle_timeline_grid_manual .each_vehicle.vehicle_row.clickedEl {
    background: rgba(189, 217, 249, 0.8);
    cursor: default;
}

.vehicle_timeline_grid_manual .each_vehicle.border-bottom-custom {
    cursor: pointer;
}