/* ===== Root Variables ===== */
:root {
    /* Font Family */
    /* --font-primary: 'Be Vietnam Pro', sans-serif; */
    --font-primary: "BeVietnam", sans-serif;

    /* Colors */
    --color-primary: #0AB1AC;
    --color-dark-blue: #002244;
    --color-light-blue: #E6EFFF;
    --color-white:#FFFFFF;
    --color-blue: #1673B4;
    --color-orange: #AD3A05;
    --color-red: #BD3234;
    --color-dark-gray: #353535;
    --color-gray: #8D8D8D;
    --color-light-gray: #F5F5F5;
    --color-brown: #705B00;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    line-height: 100%;
    letter-spacing: 0%;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'BeVietnam';
    src: url('be-vietnam/BeVietnam-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}


body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-primary);
}

input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ===== Typography Classes ===== */

/* Heading 1 */
.h1 {
    font-family: var(--font-primary);
    font-size: 64px;
    font-weight: 800;
    /* Extra Bold */
    line-height: 1.2;
}

/* Heading 2 */
.h2 {
    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: 700;
    /* Bold */
    line-height: 1.3;
}

/* Heading 3 */
.h3 {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 600;
    /* SemiBold */
    line-height: 1.3;
}

/* Explainer / Text */
.text-explainer {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 500;
    /* Medium */
    line-height: 1.5;
}

/* Body Text */
.body {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    /* Regular */
    line-height: 1.6;
    box-sizing: border-box;
}

/* Input Bar Text */
.input-text {
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 300;
    /* Light */
    line-height: 1.4;
}

/* ===== Utility Classes (Optional) ===== */
.text-primary {
    color: var(--color-primary);
}

.text-dark-blue {
    color: var(--color-dark-blue);
}

.text-white {
    color: var(--color-white);
}

.text-blue {
    color: var(--color-blue);
}

.text-orange {
    color: var(--color-orange);
}

.text-red {
    color: var(--color-red);
}

.text-dark-gray {
    color: var(--color-dark-gray);
}

.text-gray {
    color: var(--color-gray);
}

/* Optional background utilities */
.bg-primary {
    background-color: var(--color-primary);
}

.bg-dark-blue {
    background-color: var(--color-dark-blue);
}

.bg-orange {
    background-color: var(--color-orange);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-light-gray {
    background-color: var(--color-light-gray);
}

.bg-brown {
    background-color: var(--color-brown);
}

.bg-light-blue {
    background-color: var(--color-light-blue);
}


.required-label::after {
    content: " *";
    color: #AD3A05;
}

/* Navbar */
.navbar-bg {
    background-color: var(--color-dark-blue);
    height: 49px;
}

.navbar-bg {
    background-color: var(--color-dark-blue);
    /* or any background color */
    color: white;
    padding: 10px 20px;
}

.navbar-bg img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    cursor: pointer;
}

.navbar-bg {
    background-color: #002f5f;
    color: white;
    padding: 0.5rem 1rem;
}

.nav-icon-group img {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.nav-section-title {
    font-size: 14px;
    color: #cccccc;
}

.nav-main-title {
    font-size: 18px;
    font-weight: bold;
}

.search-box {
    display: none;
}

.search-box {
    position: absolute;
    right: 50px;
}

.search-container {
    position: relative;
    display: inline-block;
}

.search-input {
    width: 100%;
    padding: 10px 10px 10px 40px;
    /* add left padding for the icon */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.search-img {
    position: absolute;
    left: 10px;
    top: 20px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    /* So it doesn't block input clicks */
    opacity: 0.6;
}

/* ASIDE */
.aside-bg {
    background: linear-gradient(179.98deg, var(--color-dark-gray) 68.97%, #0AB1AC 99.99%);
    width: 177px;
    min-height: 983px;
    /* height: 100vh; */
    /* height: 983px; */
    text-align: center;
    align-items: center;
    padding: 17px;
    position: relative;
    overflow: visible;
    /* height: 100vh; */
    flex: 0 0 auto;
}

.sidebar-logo-img {
    padding-top: 18px;
    margin-bottom: 77px;
}

.sidebar-img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-bottom: 8px;
}

.sidebar-item.active .sidebar-img {
    filter: brightness(0) invert(1);
}

.sidebar-item.active .sidebar-img-title {
    color: white;
}


.sidebar-img-title {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
}

.sidebar-line {
    height: 2px;
    /* Makes it thicker horizontally */
    border: none;
    background-color: #0AB1AC;
    width: 100%;
    /* Or set to a specific width like 200px */
    margin: 20px 0;
    /* Optional spacing */
}


.sidebar-item.active {
    width: 91px;
    height: 91px;
    border: 1px solid;
    border-radius: 7px;
    padding: 5px;
    border-color: #0AB1AC;
    /* border-image-source: linear-gradient(180deg, #0AB1AC 0%, #131313 100%); */
    background: linear-gradient(179.98deg, var(--color-dark-gray) 68.97%, #0AB1AC 99.99%);
}

.sidebar-item {
    width: 91px;
    height: 91px;
    padding: 5px;
}

.sidebar-item:hover {
    border: 1px solid;
    border-radius: 7px;
    border-color: #0AB1AC;
    /* border-image-source: linear-gradient(180deg, #0AB1AC 0%, #131313 100%); */
    background: linear-gradient(179.98deg, var(--color-dark-gray) 68.97%, #0AB1AC 99.99%);
}

.sidebar-link:has(.dropdown-list:hover) .sidebar-item {
    border: 1px solid #0AB1AC;
    border-radius: 7px;
    padding: 5px;
    background: var(--color-dark-gray);
}

/* nested report css */
.sidebar-link {
    position: relative;
    display: block;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.dropdown-list {
    display: none;
    position: absolute;
    top: 0px;
    left: 117%;
    min-width: 180px;
    z-index: 9999;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 1px solid #0AB1AC !important;
    border-color: #0AB1AC;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: none;
    background: linear-gradient(179.98deg, var(--color-dark-gray) 68.97%, #0AB1AC 99.99%);
}

.dropdown-list::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -56px;
    width: 56px;
    height: 91.5px;
    border-top: 1px solid #0AB1AC !important;
    border-bottom: 1px solid #0AB1AC !important;
    background: var(--color-dark-gray);
}

.dropdown-list::after {
    content: '';
    position: absolute;
    top: 89.5px;
    left: -20px;
    width: 20px;
    height: 20px;
    border-right: 1px solid #0AB1AC;
    border-top: 1px solid #0AB1AC;
    border-top-right-radius: 10px;
    box-shadow: 1px -3px 0px 1px var(--color-dark-gray)
}

.dropdown-list li {
    padding: 10px 15px;
    white-space: nowrap;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    letter-spacing: 0%;
}

.dropdown-list li:hover {
    background-color: #0AB1AC;
}


.dropdown-list:hover>.nested-dropdown-list {
    display: block;
}

/* Hover to show submenu */
.sidebar-link:hover>.dropdown-list {
    display: block;
}

/* Nested Dropdown Styling */
.nested-dropdown-list {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 1px solid #0AB1AC;
    border-radius: 5px;
    top: 0;
    left: 100%;
    white-space: nowrap;
    min-width: 160px;
    z-index: 9999;
    background: var(--color-dark-gray);

}

.nested-dropdown-list li {
    padding: 10px 15px;
}

.nested-dropdown-list li:hover {
    background-color: #0AB1AC;
}

.dropdown-list>li {
    position: relative;
}

/* Show nested on hover */
.dropdown-list>li:hover>.nested-dropdown-list {
    display: block;
}


/* Optional arrow */
.arrow {
    float: right;
    margin-left: 5px;
}

/* DASHBOARD */

.sidebar-item:hover {
    .report-item {
        display: hide;
    }

    .nested-iem {
        display: block;
        position: absolute;
        left: 100%;
    }
}

a {
    text-decoration: none;
}

.dashboard {
    /* position: fixed;
      top: 0;
      left: 0; */
    width: 100%;
    height: 100%;

    background-color: #f4f6f8;
    padding: 15px;
    overflow-y: auto;
}


.widget-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.hide {
    display: none;
}

.notification {
    /* display: none; */
}


/* Small devices (phones, less than 576px)
@media (max-width: 575px) {
    .signup-bg-section {
        padding: 40px 20px;
    }
} */

/* Medium devices (tablets, 576px and up) */
/* @media (min-width: 576px) and (max-width: 767px) {
    .signup-bg-section {
        padding: 60px 30px;
    }
} */

/* Large tablets (768px and up) */
/* @media (min-width: 768px) and (max-width: 991px) {
    .signup-bg-section {
        padding: 100px 80px;
    }
} */

/* Medium desktops (992px and up) */
/* @media (min-width: 992px) and (max-width: 1199px) {
    .signup-bg-section {
        padding: 150px 200px;
    }
} */

/* Large desktops (1200px and up) */
@media (min-width: 1200px) {

    /* .signup-bg-section {
        padding: 234px 439px 108px;
    } */
    .signup-bg {
        width: 562px !important;
        margin-top: 234px !important;
    }
}


/* Pagination */

.dataTables_paginate .page-item.disabled .page-link {
    background: none;
    border: 1px solid var(--color-dark-gray);
    color: var(--color-dark-gray);
    cursor: default;
}

.page-link {
    min-width: 23px;
    min-height: 23px;
    line-height: 0;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 5px;
    color: #8D8D8D;
    border: 1px solid rgba(198, 197, 195, 1);
}

.next>.page-link,
.last>.page-link,
.previous>.page-link,
.fist>.page-link .page-link.next,
.page-link.last,
.page-link.previous,
.page-link.fist {
    border-color: var(--color-dark-gray);
    background-color: var(--color-dark-gray);
    color: #fff;
}

.page-link:hover {
    z-index: 2;
    color: var(--color-dark-gray);
    background-color: var(--bs-pagination-hover-bg);
    border-color: #0AB1AC;
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: var(--color-dark-gray);
    background-color: transparent;
    border-color: #0AB1AC;
}

ul.pagination {
    gap: 8px;
}

/* cust select */

.form-control.is-valid,
.was-validated .form-control:valid {
    background-image: none;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #BEBCBC;
    outline: 0;
    box-shadow: none;
}

.add_vehicle .stdform .selectBox {
    font-size: 14px;
    min-height: 51px;
    display: flex;
    align-items: center;
}

.add_vehicle .selectBox {
    font-size: 10px;
    padding: 0;
    height: auto;
    padding: 10.25px 40px 10.25px 20px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.selectBox {
    border: 1px solid #ccc;
    position: relative;
    padding: 12px 24px;
    cursor: pointer;
}

.form-control,
.selectBox {
    border: 1px solid rgba(190, 188, 188, 0.74);
    font-size: 14px;
    line-height: 1.5;
    border-radius: 5px;
    background: rgba(245, 245, 245, 1);
    color: rgba(190, 188, 188, 1);
    font-weight: 500;
    height: 51px;
}

.selectBox {
    border: 1px solid #ccc;
    position: relative;
    padding: 12px 24px;
    cursor: pointer;
}

.selectBox.show {
    z-index: 99;
}

.selectBox__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.selectBox:after {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: all 0.2s ease-in-out;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.001' height='8.165' viewBox='0 0 14.001 8.165'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23212121;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M13.861,60.224l-.7-.7a.441.441,0,0,0-.645,0L7,65.036,1.487,59.522a.441.441,0,0,0-.645,0l-.7.7a.441.441,0,0,0,0,.645l6.537,6.538a.441.441,0,0,0,.645,0l6.538-6.538a.442.442,0,0,0,0-.645Z' transform='translate(0 -59.382)'/%3E%3C/svg%3E");
    mix-blend-mode: difference;
}

.selectBox .dropdown-menu {
    transition: all 0.5s ease-in-out;
    opacity: 0;
    display: block;
    top: 100%;
    width: 100%;
    max-height: 250px;
    z-index: -1;
    overflow-y: auto;
    transform: translateY(-15%);
    visibility: hidden;
}

.selectBox.show {
    background-color: #fff;
}

.selectBox.show:after {
    transform: translateY(-50%) rotate(180deg);
}

.selectBox.show .dropdown-menu {
    transition: all 0.3s ease-in-out;
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: translateY(0);
}

.selectBox .dropdown-menu {
    left: 0;
    padding: 10px;
}

.dropdown-item {
    border-bottom: 2px solid #8D8D8D;
}