body {
    padding-top: 50px;
    padding-left: 54px;
}

.bg-light-green {
    background-color: #afe784;
    color: #000;
}

.bg-light-pink {
    background: #EFB5B9;
    color: #000;
}

.menu-sidebar:hover,
.sidebar-collapsein .menu-sidebar {
    width: var(--sidebar-width);
}

.menu-sidebar .sidebar-inner-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .menu-sidebar .sidebar-inner-content::-webkit-scrollbar {
        display: none;
    }

.menu-sidebar .sidebar-footer {
    padding-bottom: 23px;
    margin-top: 20px;
}

.sidebar-logo {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    position: relative;
}

    .sidebar-logo:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 8px;
        background: var(--muted);
        height: 1px;
        opacity: 0.1;
    }

    .sidebar-logo a {
        display: block;
    }

    .sidebar-logo .img-full {
        display: none;
    }

.menu-sidebar:hover .sidebar-logo .img-full {
    display: block;
}

.menu-sidebar:hover .sidebar-logo .img-icon {
    display: none;
}

.sidebar-logo img {
    display: block;
}

.sidebar-logo .img-icon {
    margin: 0 auto;
    max-width: 42px;
    display: block;
}

ul.menu-navigation {
    list-style: none;
    margin: 0;
    padding: 18px 0px;
}

    ul.menu-navigation > li {
        margin-bottom: 10px;
        text-align: center;
    }

        ul.menu-navigation > li:last-child {
            margin-bottom: 0;
        }

        ul.menu-navigation > li > a {
            color: var(--dark);
            position: relative;
            display: flex;
            align-items: center;
            padding: 0;
            line-height: 18px;
            white-space: nowrap;
            font-size: 14px;
            width: 34px;
            height: 34px;
            display: inline-flex;
            border-radius: 10px;
            align-items: center;
            padding: 6px;
            justify-content: center;
        }

.menu-sidebar:hover ul.menu-navigation > li > a,
body.sidebar-collapsein ul.menu-navigation > li > a {
    width: calc(100% - 25px);
    padding: 0px 11px;
    margin: 0px;
    text-align: left;
}

ul.menu-navigation > li > a svg path, ul.menu-navigation > li a svg path {
    transition: all 0.3s;
}


ul.menu-navigation > li:hover > a, ul.menu-navigation > li.active > a {
    background-color: var(--primary);
    color: var(--white)
}

    ul.menu-navigation > li > a[aria-expanded="true"] svg path,
    ul.menu-navigation > li:hover > a svg path,
    ul.menu-navigation > li.active a svg path {
        fill: var(--white);
    }

    ul.menu-navigation > li:hover > a img,
    ul.menu-navigation > li.active a img {
        filter: brightness(0) saturate(100%) invert(96%) sepia(0%) saturate(7500%) hue-rotate(111deg) brightness(106%) contrast(101%);
    }





ul.menu-navigation > li > a .icon {
    width: 22px;
    min-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

ul.menu-navigation > li > a > .text {
    margin-left: 10px;
    display: none;
    flex-grow: 1;
    white-space: break-spaces;
}

    ul.menu-navigation > li > a > .text:first-child {
        margin-left: 0;
    }

li.toggle-icon {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #EAEEF5;
}

.menu-sidebar:hover ul.menu-navigation > li > a > .text,
.sidebar-collapsein ul.menu-navigation > li > a > .text {
    display: block;
}

.form-field.page-heading-search-field {
    min-width: 350px;
    width: 100%;
    position: relative;
}

.field-icon .icon {
    width: 38px;
    height: 38px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #767F8F;
    z-index: 2;
    pointer-events: none;
}

.sidebar-toggle {
    cursor: pointer;
    position: absolute;
    left: 68px;
    margin-left: -18px;
    bottom: 25px;
    width: 36px;
    height: 36px;
    color: var(--primary);
    background: var(--white);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.1);
    padding: 0 10px;
}

li.toggle-icon a.navbar-toggle span.icon i:last-child,
body.sidebar-collapsein li.toggle-icon a.navbar-toggle span.icon i:first-child {
    position: relative;
    transition: all 0.5s;
    width: 0;
    font-size: 0;
}

body.sidebar-collapsein li.toggle-icon a.navbar-toggle span.icon i:last-child {
    position: static;
    transition: all 0.5s;
    font-size: 16px;
}

header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 50px;
    padding: 0px 10px;
    z-index: 99;
    transition: all 0.3s;
    background: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
}

    header h2 {
        margin: 0;
        font-size: 14px;
        display: flex;
        gap: 8px;
        align-items: center;
        font-weight: 500;
    }

.menu-sidebar:hover header,
body.sidebar-collapsein header {
    padding-left: calc(var(--sidebar-width) + var(--page-content-space));
}

.img-stretch {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.content {
    padding: var(--page-content-space) var(--page-content-space);
    transition: all 0.3s;
}

.menu-sidebar:hover .content,
body.sidebar-collapsein .content {
    transform: translatex(calc(var(--sidebar-width) - 65px));
}

.navbar-toggle {
    display: flex;
    position: relative;
    width: 36px;
    height: 60px;
    margin: 0 auto;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.menu-sidebar .toggle-icon {
    border-top: 1px solid rgba(234, 238, 245, 1);
}

li.toggle-icon a.navbar-toggle {
    margin-left: 0;
}

.header-profile-name {
    position: relative;
}

.header-profile-name .submenu.active {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
}

.simplebar-track.simplebar-vertical {
    width: 7px;
}

.submenu {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    top: 100%;
    margin-top: 20px;
    min-width: 148px;
    right: 0;
    transition: all 0.2s;
    padding: 10px;
    background: var(--white);
    border-radius: 6px;
    z-index: 9;
    box-shadow: 0 5px var(--body-font-size) 0 rgba(0,0,0,0.05);
}

ul.inner-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

    ul.inner-submenu > li > a {
        display: block;
        border-radius: 4px;
        padding: 5px 12px;
        color: var(--dark);
        font-size: var(--body-font-size);
    }

        ul.inner-submenu > li > a:hover {
            background: var(--primary);
            color: #fff;
        }

.submenu hr {
    border-color: var(--luted);
    margin: 5px 0;
}

html .simplebar-scrollbar:before {
    background: var(--secondary);
}

html .tooltip {
    --bs-tooltip-bg: var(--dark);
    --bs-tooltip-color: var(--white);
    --bs-tooltip-opacity: 1;
}

    html .tooltip .tooltip-inner {
        box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);
        background: var(--dark);
        font-weight: 500;
        font-size: var(--body-font-size);
        padding: 5px 8px;
    }

.header-search-field {
    width: 300px;
}

.page-heading {
    margin-bottom: 10px;
}

    .page-heading h2 {
        font-size: 18px;
        margin: 0 0 5px;
        text-transform: uppercase;
    }

.inner-banner {
    background: linear-gradient(268.73deg, #CDF0FF -13.73%, #E7F4F8 141.9%);
    margin: -12px -12px 12px;
    padding: var(--page-content-space);
}

.breadcrumb {
    font-size: 13px;
    margin: 0;
}

    .breadcrumb a {
        color: var(--muted);
    }

        .breadcrumb a:hover,
        .breadcrumb .breadcrumb-item.active {
            color: var(--dark);
        }

.inner-banner .form-switch .form-check-input {
    background-color: rgb(31 44 70 / 10%);
    border-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 1%29'/%3e%3c/svg%3e");
}

    .inner-banner .form-switch .form-check-input:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 1%29'/%3e%3c/svg%3e");
    }

    .inner-banner .form-switch .form-check-input:checked {
        background-color: var(--dark);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }

.dropdown-menu.filter-dropdown {
    min-width: 400px;
    padding: 20px;
}

.filter-item-field {
    display: flex;
    align-items: center;
}

    .filter-item-field label {
        font-weight: 500;
        margin-right: 5px;
        font-size: var(--body-font-size);
        color: var(--muted);
    }

.table-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dropdown-toggle.arrow-none::after {
    display: none;
}

.notification-dropdown {
    padding: 18px;
    width: 400px;
}

.notification-items .item {
    padding: 8px 10px 8px 65px;
    background: #f9fbff;
    border-radius: 10px;
    position: relative;
    margin: 0 0 6px;
    border: 1px solid var(--light);
    min-height: 64px;
}

    .notification-items .item.readed {
        background: transparent;
        border-color: transparent;
    }

    .notification-items .item .icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 0;
        margin: 12px;
        font-size: 14px;
    }

    .notification-items .item h5 {
        font-size: 16px;
        margin: 0 0 0px;
        font-weight: 700;
    }

        .notification-items .item h5 a {
            color: var(--dark);
        }

            .notification-items .item h5 a:hover {
                color: var(--primary);
            }

.header-search {
    width: 330px;
}

.header-icon-list .btn.btn-icon {
    --bs-btn-color: var(--muted);
    --bs-btn-hover-color: var(--dark);
    --bs-btn-active-color: var(--dark);
}

.header-profile-name .btn {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
    border: 0;
    background: transparent;
    color: var(--dark);
}

    .header-profile-name .btn .icon {
        width: 30px;
        height: 30px;
        background: var(--primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        overflow: hidden;
    }

        .header-profile-name .btn .icon img {
            object-fit: cover;
        }

        .header-profile-name .btn .icon svg {
            margin: 0;
        }

.notification-status-dot {
    position: absolute;
    right: 0;
    top: 0;
    width: 7px;
    height: 7px;
    display: block;
    margin: 9px;
    border-radius: 50%;
}

.header-nav-wrap {
    border-top: 1px solid var(--border-color);
    margin-top: 6px;
    padding-top: 6px;
}

    .header-nav-wrap .row {
        flex-wrap: nowrap;
    }

    .header-nav-wrap .navwrap {
        max-width: calc(100vw - 225px);
        overflow-x: auto;
    }

html .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    top: 6px;
    height: 4px;
}

.header-back-link {
    padding-right: 16px;
    position: relative;
}

    .header-back-link:before {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        height: 26px;
        background: var(--border-color);
        margin: auto;
    }

header nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

    header nav > ul > li + li {
        margin-left: 22px;
        position: relative;
    }

    header nav > ul > li > a {
        font-size: 14px;
        color: rgba(95, 111, 141, 1);
        display: inline-flex;
        vertical-align: top;
        line-height: 60px;
        white-space: nowrap;
        font-weight: 400;
        border-bottom: 2px solid transparent
    }

li.menu-parent > a:after {
    content: "\f107";
    display: block;
    text-align: center;
    transition: all .2s linear;
    font-family: 'FontAwesome';
    padding-left: 3px;
}

li.menu-parent:hover .submenu {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}

.submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .submenu ul a {
        display: block;
        border-radius: 4px;
        padding: 5px 12px;
        color: var(--dark);
        font-size: var(--body-font-size);
    }

        .submenu ul a:hover {
            color: var(--white);
            background: var(--primary);
        }

header nav > ul > li.active > a,
header nav > ul > li > a:hover {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.hide {
    display: none;
}

.menu-sidebar {
    background: var(--white);
    position: fixed;
    left: 0;
    top: 50px;
    height: calc(100% - 50px);
    width: 54px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    border-right: 1px solid var(--border-color);
}

/*.menu-sidebar:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 8px;
        background: var(--muted);
        height: 1px;
        opacity: 0.1;
    }*/

.header_menu > ul > li.menu-parent > a:after {
    content: "";
    display: inline-block;
    vertical-align: top;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    width: 6px;
    height: 6px;
    margin: 0 0 0 6px;
    transition: all 0.4s;
}

.menu-sidebar:hover .toggle-icon span.icon svg,
.sidebar-collapsein .toggle-icon span.icon svg {
    opacity: 0;
}

.menu-sidebar:hover .toggle-icon span.icon,
.sidebar-collapsein .toggle-icon span.icon {
    background-image: url('data:image/svg+xml,<svg width="222" height="222" viewBox="0 0 222 222" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M212 212L111 111M111 111L10 10M111 111L212 10M111 111L10 212" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 12px;
    background-repeat: no-repeat;
    height: 100%;
    background-position: center;
}

.content-header {
    padding-bottom: 20px;
}

    .content-header h2 {
        font-size: 22px;
        margin: 0;
        font-weight: 700
    }


.page-heading .btn i {
    margin-right: 7px;
}

.dropdown i {
    margin: 0;
}

.table.table-list-data {
    border-spacing: 0 5px;
    border-collapse: separate;
    margin-top: -5px;
}

html .table-list-data thead.bg-light {
    background: var(--light) !important;
}

html .table-list-data thead th {
    color: var(--dark);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    padding: 10px 12px;
    white-space: nowrap;
}

.table.table-list-data thead th:first-child,
.table.table-list-data tbody td:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.table.table-list-data thead th {
    border: 0;
    background: rgba(20, 7, 34, 0.02);
    padding-top: 15px;
    padding-bottom: 15px;
}

.table.table-list-data tbody td {
    background: var(--white);
    border: 0;
    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 01.5%);
}

html .table-list-data tbody td,
html .table-list-data tbody th {
    font-size: 13px;
    color: #5F6F8D;
    letter-spacing: 0;
    padding: 6px 12px;
    vertical-align: middle;
    height: 40px;
    font-weight: 500;
}

.table-thumbnail {
    width: 34px;
    border-radius: 50%;
    overflow: hidden;
    height: 34px;
}

    .table-thumbnail img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

html .form-control.form-control-shadow,
.form-select-shadow ~ .select2-container--default .select2-selection--single {
    border: 0;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 2%) !important;
}

html .page-heading .page-heading-search-field .field-icon .form-control {
    padding-left: 34px;
    height: 36px;
    font-size: 13px;
}

    html .page-heading .page-heading-search-field .field-icon .form-control::placeholder {
        color: #767F8F;
    }

html .page-heading .page-heading-search-field .field-icon .icon {
    width: 36px;
    height: 36px;
}

.filter-dropdown .dropdown-menu {
    padding: 20px;
    min-width: 350px;
}

ul.advance-table-pagination .page-item {
    margin-right: 6px;
}

    ul.advance-table-pagination .page-item .page-link {
        border: 0;
        color: #5F6F8D !important;
        background-color: transparent !important;
        font-weight: 500;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        font-size: 13px;
        box-shadow: 0 0 0 transparent !important;
    }

ul.advance-table-pagination li.active .page-link {
    color: var(--dark) !important;
    background: var(--white) !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02) !important;
}

ul.advance-table-pagination li .page-link:hover {
    color: var(--primary) !important;
    background: #e4f8ff !important;
}

/*  Product add page  */

.card-strash .card {
    min-height: 100%;
    margin-bottom: 0;
}

.row.card-strash > * {
    margin-bottom: 12px;
}

.product-add-page .image-upload {
    background: var(--white);
    border: 1px solid #F3F6F9;
    box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    width: 130px;
    min-height: 130px;
    margin: 0 auto 10px;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-add-page .image-edit-btn {
    background: var(--white);
    border: 1px solid #F3F6F9;
    box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
    right: -10px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.3s;
    font-size: var(--body-font-size);
}

    .product-add-page .image-edit-btn:hover {
        color: var(--dark);
    }

.product-add-page .size-n-value-wrap {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

.product-add-page ul.size-n-value {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 -6px;
    padding: 0;
}

    .product-add-page ul.size-n-value li {
        width: 16.66%;
        margin-bottom: 12px;
        padding: 0 6px;
    }

.product-add-page label.size-wrap {
    cursor: pointer;
    display: block;
}

    .product-add-page label.size-wrap input {
        display: none;
    }

    .product-add-page label.size-wrap span {
        color: var(--muted);
        background: #F7F8FC;
        border: 1px solid #E1E8EF;
        border-radius: 6px;
        padding: 10px 0;
        display: block;
        text-align: center;
        font-size: 12px;
        transition: all 0.4s;
    }

        .product-add-page label.size-wrap span b {
            display: block;
            font-size: 16px;
            font-weight: 600;
        }

    .product-add-page label.size-wrap input:checked ~ span {
        color: var(--white);
    }

    .product-add-page .choose-store label.size-wrap input:checked ~ span,
    .product-add-page label.size-wrap input:hover ~ span {
        background-color: transparent;
        color: var(--dark);
    }

    .product-add-page label.size-wrap input:checked ~ span,
    .product-add-page label.size-wrap input:hover ~ span {
        background: var(--primary);
        border: 1px solid var(--primary);
        color: var(--white);
    }

    .product-add-page label.size-wrap input:checked:hover ~ span {
        background: transparent;
        color: var(--muted);
    }

html .product-add-page .modal-header {
    padding: 15px 25px;
}

.product-add-page .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 20px 25px;
}

.product-add-page .card-up-title h4 {
    top: -9px;
    background: var(--white);
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    position: absolute;
}


/* login */
.password-hideshow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 39px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .password-hideshow input[type="checkbox"] {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }

        .password-hideshow input[type="checkbox"]:checked ~ svg:nth-child(2) {
            display: none;
        }

    .password-hideshow svg:nth-child(3) {
        display: none;
    }

    .password-hideshow input[type="checkbox"]:checked ~ svg:nth-child(3) {
        display: block;
    }

.login-page {
    background: url("../images/login-bg.jpg") no-repeat center center;
    background-size: cover;
}

.login-content .logo a {
    max-width: 120px;
    margin: 0 auto;
}

.login-content .card {
    max-width: 450px;
    margin: 0 auto;
    min-width: 450px;
}

    .login-content .card .card-header {
        background: #fff;
        padding: 20px 30px 30px;
        border-radius: 20px 20px 0 0;
    }

        .login-content .card .card-header h2 {
            font-size: 26px;
            margin-bottom: 8px;
            color: var(--primary);
        }

    .login-content .card .card-body {
        padding: 25px 40px 20px;
    }

.login-content .card {
    border-radius: 18px;
}

.login-content {
    height: calc(100vh - 44px);
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.sign-or p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sign-or span.line {
    width: 30%;
    height: 1px;
    background: var(--bs-gray-300);
}

.copy-right {
    color: #fff;
    padding: 16px 0 0;
}

    .copy-right a {
        color: #fff;
        text-decoration: underline;
    }

        .copy-right a:hover {
            color: var(--primary);
            text-decoration: underline;
        }


/* loader */
.loading-state {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.loading {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid #fff;
    border-top-color: var(--primary);
    animation: loading 1s linear infinite;
}

.loading-hidden:before {
    content: "";
    width: 14px;
    height: 14px;
    animation: spin 1s linear infinite;
    border: 2px solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 100%;
    display: inline-block;
    translate: -6px 0;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.page-loader {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999991;
    transition: all 0.4s;
    transition-delay: 0.2s;
    display: none;
    align-items: center;
    justify-content: center;
    background: #ffff;
}

.loaded .page-loader {
    opacity: 0;
    visibility: hidden;
}

.page-loader .img {
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: loading-anim 3s infinite;
    flex-direction: column;
}

    .page-loader .img h3 {
        font-weight: 700;
        font-size: 22px;
        transform: translateX(5px) translatey(-45px);
        color: #12395f;
        position: relative;
        z-index: 1;
        order: 1;
    }

.animsition-overlay-slide {
    right: 0;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 9999;
    transition: all 0.7s;
}

@-webkit-keyframes loading-anim {

    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }

    100% {
        -webkit-transform: translateX(00px);
        transform: translateX(00px);
    }
}

.section-offset {
    margin-top: -40px;
}

.card.card-numbers {
    padding: 15px;
}

.card-numbers .img {
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 100%;
}

.card-numbers h6 {
    font-size: 13px;
}

.card-numbers h3 {
    font-size: 18px;
    margin: 0 0 3px;
}

    .card-numbers h3 small {
        font-weight: 500;
        font-size: 80%;
        margin-left: 8px;
    }

body:not(.dark-active) .eo-card-numbers .card.card-number2 {
    background-image: unset;
}

.report-sidebar [class*="col"]:has(.text-box):nth-last-child(-n + 2) {
    margin-bottom: 0px;
}

.report-sidebar [class*="col"]:has(.text-box) {
    margin-bottom: 18px;
}

.grediant-head table {
    border-radius: 10px;
    overflow: hidden;
}

    .grediant-head table tr:last-child td {
        border-bottom: 0;
    }

    .grediant-head table th {
        font-weight: 500;
        text-transform: uppercase;
        color: #5F6F8D;
        white-space: nowrap;
    }

        .grediant-head table th:not(:first-child), .grediant-head table td:not(:first-child) {
            text-align: right
        }

    .grediant-head table th, .grediant-head table td {
        padding: 10px 8px;
    }

    .grediant-head table thead::before {
        content: '';
        position: absolute;
        background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 84.72%);
        top: 0;
        width: 100%;
        height: 100%;
    }

.grediant-head .table > :not(caption) > * > * {
    background-color: var(--light);
}

.grediant-head table thead {
    position: relative;
}

.grediant-head .table > :not(caption) > * > th {
    position: relative;
    background: transparent;
}

.tab-style-1.nav-tabs .nav-link {
    background: transparent;
    border-radius: 7px;
    padding: 5px 14px;
    border: 0;
    color: var(--dark);
    font-weight: 500;
    border: 1px solid #D5DEEA;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
    line-height: 20px;
}

.tab-style-1.nav-tabs li {
    position: relative;
}

.tab-style-1.nav-tabs .nav-link.active,
.tab-style-1.nav-tabs .nav-link:hover {
    border: 0;
    background-color: var(--dark) !important;
    color: var(--light);
    border-radius: 7px;
    border: 1px solid var(--dark);
}

.tab-style-1 + .tab-content.panel {
    background: transparent;
    border: 0;
}

ul.nav.nav-tabs.tab-style-1.border-1 {
    border: 1px solid #1F2C461A;
    border-radius: 10px
}

ul.nav.nav-tabs.tab-style-1 li.nav-item:after {
    content: '';
    background-image: url('data:image/svg+xml,<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6.5L0 0.5L12 0.500001L6 6.5Z" fill="%231F2C46"/></svg>');
    width: 14px;
    height: 14px;
    position: absolute;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.4s;
    left: 50%;
    transform: translateX(-50%);
}

ul.nav.nav-tabs.tab-style-1 li.nav-item:has(.active):after {
    opacity: 1;
}

.image-box {
    display: flex;
    box-shadow: 0px 4px 8px 0px #00000008;
    background-color: var(--white);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

    .image-box .image-box-content {
        padding-left: 14px;
    }

.text-green {
    color: #0ACF97;
}

.text-red {
    color: #FA5C7C
}

.image-box-content svg {
    padding-right: 5px
}

.image-box-content .title span {
    line-height: 11px
}

.image-box-content p {
    color: var(--greay )
}

.bg-half:before {
    content: '';
    width: calc(100% + 40px);
    height: 37px;
    position: absolute;
    top: 0;
    left: -20px;
    background: linear-gradient(90deg, #E7F4F8 -13.73%, #CDF0FF 141.9%);
    z-index: -1;
}

.br-10 {
    border-radius: 10px !important;
}

.btn-outline-light {
    border: 1px solid #D5DEEA !important;
    color: #1F2C46
}

thead.thead-light th {
    background: #F5F7FA;
}

.border-table th, .border-table td {
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    color: #1F2C46;
}

html .product-add-page .card table th {
    font-weight: 500;
}

.border-table th:last-child, .border-table td:last-child {
    border-right: 0
}

.text-nowrap th, .text-nowrap td {
    text-wrap: nowrap
}

.card-tab-scroll .nav-tabs {
    margin: 0 -20px;
    padding: 0 20px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

.card-tab-scroll ul.nav.nav-tabs.tab-style-1 li.nav-item a {
    text-wrap: nowrap;
}
.card-tab-scroll {
    position: relative;
}
.idel-location {
    cursor: pointer;
    width: fit-content;
}
    .card-tab-scroll:before {
        content: "";
        display: block;
        position: absolute;
        right: -20px;
        top: 0;
        bottom: 0;
        width: 90px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 2.3%, #FFFFFF 104.02%);
        z-index: 5;
        pointer-events: none;
    }

.apexcharts-tooltip {
    background: #1F2C46 !important;
    color: #fff !important;
    padding: 3px !important;
}

    .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
        background: transparent !important;
        border: 0 !important;
        font-size: 16px !important;
        font-weight: 600;
        font-family: var(--font-1) !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .apexcharts-tooltip div {
        font-family: var(--font-1) !important;
    }

.dark-active text.apexcharts-text.apexcharts-xaxis-title-text {
    fill: #6c87b0;
}

.apexcharts-text tspan {
    font-family: var(--font-1) !important;
    font-size: 11px !important;
    color: var(--dark) !important;
    fill: var(--dark);
    font-weight: 600;
}

span.apexcharts-legend-text {
    font-family: var(--font-1) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    padding-left: 19px;
    padding-right: 7px;
}









html .apexcharts-legend {
    overflow: hidden;
}

.linechart > div:not(:last-child) {
    margin-bottom: -40px;
}

.voy-report {
    border: 1px solid #5F6F8D1A;
    padding: 5px 20px;
    color: var(--muted);
    border-radius: 10px;
    background: var(--light);
}

    .voy-report strong {
        color: var(--dark);
    }

html div#scatter-chart .apexcharts-legend .apexcharts-legend-series:has(span.apexcharts-legend-text:empty) {
    display: none;
}

html div#scatter-chart g.apexcharts-line-series.apexcharts-plot-series g.apexcharts-series-markers {
    display: none;
}

div#piechart > div {
    margin: 10px auto 0;
}

.apexcharts-legend.apexcharts-align-top.apx-legend-position-right {
    justify-content: center;
}

#columnchart text.apexcharts-text.apexcharts-xaxis-label {
    display: none;
}

#columnchart text.apexcharts-text.apexcharts-xaxis-group-label {
    transform: translateY(-15px);
}
/*Dark Version*/
.dark-active .dark-light-toggle > *:nth-child(2),
.dark-light-toggle > *:nth-child(1) {
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--light);
}

.dark-active .dark-light-toggle {
    background: var(--dark);
    padding: 0px 32px 0px 10px;
}

.dark-light-toggle {
    padding: 0px 10px 0px 32px;
    border-radius: 50px;
    line-height: 30px;
    font-size: 12px;
    transition: all 0.5s;
    position: relative;
}

    .dark-light-toggle .icon {
        width: 26px;
        height: 26px;
        border-radius: 50px;
        background: var(--light);
        color: var(--dark);
        padding: 6px;
        position: absolute;
        left: 2px;
        top: 2px;
        transform: translateX(0px);
        transition: all 0.5s;
    }

        .dark-light-toggle .icon svg:nth-child(2), .dark-active .dark-light-toggle .icon svg:nth-child(1), .light-text,
        .dark-active .dark-light-toggle .dark-text {
            display: none;
        }

.dark-active .dark-light-toggle .icon svg:nth-child(2), .dark-active .dark-light-toggle .light-text {
    display: inline-block;
}

.dark-active .dark-light-toggle > * .icon {
    transition: all 0.5s;
    transform: translateX(72px);
}

.dark-active {
    --white: #0D3556;
    --muted: #93A0C1;
    --dark: #FFFFFF;
    --bs-body-color: #fff;
    --light: #0C2B4A;
    --field-bg: #0C2B4A;
    --field-border-focus: rgba(255,255,255,0.2);
    --field-placeholder: #93A0C1;
    --primary-light: #0C2B4A;
    --bs-success-text-emphasis: #d1e7dd;
    --bs-info-text-emphasis: #cff4fc;
    --bs-warning-text-emphasis: #fff3cd;
    --bs-danger-text-emphasis: #f8d7da;
    --bs-success-bg-subtle: #0a3622;
    --bs-info-bg-subtle: #055160;
    --bs-warning-bg-subtle: #664d03;
    --bs-danger-bg-subtle: #58151c;
    --primary: #0084B3;
    --primary-dark: #026b91;
    --secondary: #5F6F8D;
    --danger: #DC3545;
    --success: #0ACF97;
    --warning: #FFC700;
    --border-color: #DFEBF0;
    --bs-secondary-bg: #d3d3d3;
    --greay: #5F6F8D;
}

    .dark-active .inner-banner {
        background: linear-gradient(268.73deg, #0D3556 -13.73%, #0C2A49 141.9%);
    }

    .dark-active .card-tab-scroll:before {
        background: linear-gradient(90deg, #0d355600 2.3%, #0D3556 104.02%);
    }

    .dark-active .report-sidebar {
        background: linear-gradient(270deg, #0D3556 6.97%, #0D3556 100%), #E7ECF4;
    }

    .dark-active ul.nav.nav-tabs.tab-style-1 li.nav-item:after {
        background-image: url('data:image/svg+xml,<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6.5L0 0.5L12 0.500001L6 6.5Z" fill="%23ffffff"/></svg>');
    }

    .dark-active .breadcrumb-item + .breadcrumb-item::before {
        color: var(--muted);
    }

    .dark-active ul.menu-navigation > li:hover > a,
    .dark-active ul.menu-navigation > li.active a,
    .dark-active ul.menu-navigation > li a[aria-expanded="true"] {
        color: var(--dark);
    }

        .dark-active ul.menu-navigation > li:hover > a svg path,
        .dark-active ul.menu-navigation > li.active a svg path,
        .dark-active ul.menu-navigation > li a[aria-expanded="true"] svg path {
            fill: var(--dark);
        }

    .dark-active ul.menu-navigation > li > a.btn-light {
        background: var(--light);
        color: var(--dark);
        border-color: transparent;
    }

    .dark-active .menu-sidebar {
        border-color: transparent;
    }
    /* Track */
    .dark-active ::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.1);
    }
    /* Handle */
    .dark-active ::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2);
    }
        /* Handle on hover */
        .dark-active ::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.3);
        }

    .dark-active .tab-style-1.nav-tabs .nav-link {
        border-color: rgba(255,255,255,0.2);
    }

html .dark-active span.apexcharts-legend-text {
    color: var(--muted) !important;
}

.dark-active .apexcharts-svg [stroke="#e0e0e0"],
.dark-active .apexcharts-svg [stroke="#e6e6e6"] {
    stroke: rgba(255,255,255,0.15);
}

.dark-active ul.nav.nav-tabs.tab-style-1.border-1 {
    border-color: rgba(255,255,255,0.2);
}

.dark-active .border-table th,
.dark-active .border-table td {
    border-right: 1px solid rgb(222 226 230 / 12%);
    border-bottom: 1px solid rgb(222 226 230 / 12%);
    color: var(--dark);
}

.dark-active .table > :not(caption) > * > * {
    background: transparent;
    color: var(--dark);
}

.dark-active thead.thead-light th {
    background: var(--light);
}

.dark-active .table {
    border-color: rgb(222 226 230 / 12%);
    --bs-table-border-color: rgb(222 226 230 / 12%);
}

html .dark-active .dropdown-menu {
    background: var(--light);
}

.dark-active .dropdown-item:hover {
    color: rgba(255,255,255,0.7);
}

.dark-active .grediant-head table thead::before {
    background: linear-gradient(180deg, #0C2B4A 0%, #0D3556 84.72%);
}

.dark-active .grediant-head table {
    background: var(--light);
}

.dark-active .btn.btn-mate:not(:hover) {
    background-color: rgb(255 255 255 / 08%);
}

.dark-active .inner-banner .form-switch .form-check-input {
    background-color: rgb(255 255 255 / 12%);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
}

    .dark-active .inner-banner .form-switch .form-check-input:checked {
        background-color: var(--dark);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230D3556'/%3e%3c/svg%3e");
    }

.dark-active .graph-select select {
    border-color: rgba(255,255,255,0.2);
}

.offcanvas-header {
    padding: 24px 24px 0;
}

.offcanvas-body {
    padding: 24px;
}

.accordion-style-1 .accordion-button {
    background: var(--light);
    color: var(--dark);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 15px;
    border-radius: 0;
    border: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .accordion-style-1 .accordion-button:not(.collapsed) {
        background: var(--primary-light);
    }

.accordion.accordion-style-1 {
    border: 0;
    border-radius: 0;
}

    .accordion.accordion-style-1 .accordion-item {
        border: 2px solid var(--light);
        border-radius: 0;
        margin: 0 0 15px;
        background: var(--white);
    }

.tab-style-1.nav-tabs.nav-fill .nav-link {
    border-color: transparent;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-legend ul {
    color: var(--greay);
    list-style: none;
}

    .chart-legend ul li {
        display: flex;
        align-items: center;
        margin-bottom: 3px;
    }

        .chart-legend ul li span {
            width: 8px;
            height: 8px;
            display: inline-flex;
            border-radius: 100%;
            margin-right: 5px
        }

.fueleu-report .icon-box .icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF66;
    border-radius: 10px;
    margin-right: 10px;
}

.voy-report.fueleu-report {
    background: #1F2C4605;
    padding: 0px 10px;
}

.card-number2 .img {
    background: #0ACF971A;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 10px;
    color: #0ACF97;
}

.card.card-number2 {
    border: 1px solid rgb(10, 207, 151);
    position: relative;
    /*background-image: url(../images/number-card-bg.png);*/
    background-size: 180px auto;
    background-position: right bottom;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 8px rgba(10, 207, 151, 0.5);
}

    .card.card-number2:after {
        content: '';
        width: 5px;
        position: absolute;
        top: 12px;
        left: 0px;
        background-color: #0ACF97;
        height: 30px;
    }

    .card.card-number2 small {
        color: #0ACF97;
    }

    .card.card-number2.card-number-default {
        border-color: var(--primary);
        box-shadow: 0px 4px 8px rgb(0, 132, 179, 0.5);
    }

        .card.card-number2.card-number-default small {
            color: var(--primary);
        }

        .card.card-number2.card-number-default .img {
            background: #0084b31f;
            color: var(--primary);
        }

        .card.card-number2.card-number-default:after {
            background-color: var(--primary);
        }

.card-number2.red .img {
    background: #FA5C7C1A;
    color: #FA5C7C;
}

.card.card-number2.red {
    border: 1px solid rgb(250, 92, 124);
    box-shadow: 0px 4px 8px rgba(250, 92, 124, 0.5);
}

    .card.card-number2.red:after {
        background: #FA5C7C;
    }

    .card.card-number2.red small {
        color: #FA5C7C;
    }

        .card.card-number2.red small svg {
            transform: scaleY(-1);
        }

.card.card-number2 h3 {
    margin: 0;
    font-size: 18px;
}

.penalty_data .icon_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 25px 0;
    border-bottom: 1px solid #5F6F8D1A;
}

    .penalty_data .icon_box:last-child {
        background: #0ACF971A;
        border-radius: 10px;
        border: 0;
        padding: 20px;
    }

    .penalty_data .icon_box:nth-last-child(2) {
        border: 0
    }

.table-responsive.fold-table {
    height: inherit;
}

    .table-responsive.fold-table thead tr:first-child th {
        position: sticky;
        top: 0;
    }

        .table-responsive.fold-table thead tr:first-child th:first-child {
            z-index: 2;
            min-width: 200px;
        }

.fold-table tfoot tr {
    position: sticky;
    background: var(--light);
    bottom: 0;
}

    .fold-table tfoot tr td {
        background: #E9EDF4;
        font-weight: 600;
    }

.card .fold-table tr td:first-child,
.card .fold-table tr th:first-child {
    position: sticky;
    left: 0;
}

.card .fold-table tbody tr td:first-child,
.card .fold-table tbody tr th:first-child {
    background-color: var(--white);
}

.tbl-accordion-body td {
    background-color: #F5F7FA;
}

.tbl-accordion-body {
    display: none;
}

.card .fold-table tbody tr td:first-child:before {
    content: '+';
    background: var(--light);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 5px;
    margin-right: 10px;
    transition: all 0.5s;
    cursor: pointer;
}

.card .fold-table tbody tr td:hover:first-child:before {
    background-color: #c3c8cf
}

.tbl-accordion-body tr td:first-child:before {
    opacity: 0;
}

.card table.table tbody tr.view.active td:first-child:before {
    content: '-';
}

.map-graph {
    margin-top: 15px;
}

    .map-graph img {
        max-height: 242px;
    }

.graph-select select {
    border: 1px solid #D5DEEA;
    color: var(--muted);
    font-size: 13px;
    padding: 0 8px;
    border-radius: 8px;
    height: 30px;
    background: transparent;
}

.inner-banner span.select2-selection.select2-selection--single {
    background: rgb(31 44 70 / 10%);
    border: 0;
}

.dark-active .inner-banner span.select2-selection.select2-selection--single {
    background-color: rgb(255 255 255 / 08%);
}

html .inner-banner .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dark);
}

.filter_form .graph-select select {
    height: 44px;
    font-size: 14px;
}

a.ui-slider-handle.ui-state-default.ui-corner-all {
    border-radius: 100%;
    top: -7px;
}

.ui-slider-range.ui-widget-header.ui-corner-all {
    background: var(--primary);
}

.filter-panel .ui-widget-content {
    height: 4px;
    background: var(--field-bg);
    border: 0;
}

html .irs.irs--flat .irs-handle > i:first-child {
    width: 15px;
    height: 15px;
    top: 2px;
    border-radius: 100%;
}

html .filter-panel {
    background: #d3e7ef;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.irs .irs .irs-line, .irs.irs--flat .irs-bar {
    top: 23px;
}

span.irs-handle {
    top: 15px;
}

.irs .irs .irs-from, .irs .irs .irs-single, .irs .irs .irs-to {
    top: 0px;
}

.irs .irs .irs-line {
    background: var(--light);
}

.select2-container--default .select2-selection--single {
    border: 0;
}

html body .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-heading-color);
}

html .dark-active .filter-panel {
    background: var(--white);
}

    html .dark-active .select2-container--default .select2-selection--single,
    html .dark-active .filter-panel .form-control {
        background-color: var(--field-bg);
        border-color: var(--field-border-focus);
    }

html .dark-active .select2-dropdown {
    background-color: var(--field-bg);
}

html .dark-active .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--field-border-focus);
    color: var(--dark);
}

html .dark-active .select2-container--default .select2-selection--single .select2-selection__arrow:before {
    background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.doughnut span.apexcharts-legend-marker svg {
    width: 8px;
    height: 8px;
    border-radius: 100%;
}

.doughnut .apexcharts-legend.apexcharts-align-right.apx-legend-position-right {
    justify-content: center;
}

header .logo a img:nth-child(2), .dark-active header .logo a img:nth-child(1) {
    display: none;
}

.dark-active header .logo a img:nth-child(2) {
    display: block;
}

header .logo a img {
    max-height: 100%;
}

header .logo a {
    display: block;
    height: 42px;
}




div#operational-profile {
    margin-top: -15px;
}

ul.menu-navigation li a .narrow {
    transition: all 0.4s;
}

ul.menu-navigation li a[aria-expanded="true"] > .narrow {
    transform: rotate(90deg);
}

ul.menu-navigation li a .narrow path {
    fill: none !important;
    transition: all 0s !important;
}

ul.menu-navigation li a .narrow svg {
    width: 6px;
}

.menu-sidebar:hover ul.menu-navigation > li ul {
    display: block;
}

.menu-sidebar ul.menu-navigation > li ul {
    list-style: none;
    padding: 0 22px 0 56px;
    text-align: left;
    display: none;
}

    .menu-sidebar ul.menu-navigation > li ul li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--dark);
        padding: 5px 0;
        line-height: 18px;
    }

        .menu-sidebar ul.menu-navigation > li ul li.active > a,
        .menu-sidebar ul.menu-navigation > li ul li:hover > a,
        .menu-sidebar ul.menu-navigation > li ul li a[aria-expanded="true"] {
            color: var(--primary);
        }

    .menu-sidebar ul.menu-navigation > li ul ul {
        padding: 0 0 0 18px;
    }

.dark-active .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.dark-active .accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.dark-active text.apexcharts-text.apexcharts-yaxis-label, .dark-active text.apexcharts-text.apexcharts-xaxis-label {
    fill: #d3d3d391;
}

.dark-active .card.card-number3 .card3-content h3 {
    color: #000;
}

.dark-active g.apexcharts-yaxis-title text {
    fill: #fff;
    opacity: 0.5;
}

.dark-active g.apexcharts-data-labels text.apexcharts-datalabel {
    fill: var(--dark);
}

.apexcharts-datalabels-group text {
    fill: var(--dark) !important;
}

.dark-active .line-with-label g.apexcharts-data-labels text.apexcharts-datalabel {
    fill: #fff !important;
}

div#filter_offcanvas .irs.irs--flat .irs-handle > i:first-child {
    margin-left: -8px;
}

#treeroot foreignObject.apextree-node > div {
    box-shadow: unset !important;
}

#treeroot foreignObject.apextree-node {
    box-shadow: 0 3px 9px -1px #00000030;
    border-radius: 10px;
}

.table_modal, .chart_modal {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000091;
    z-index: 9999;
    left: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

    .table_modal .table_body, .chart_modal .chart_body {
        transform: translateY(80px);
        transition: all 0.5s;
    }

.zoomable-table.active .table_modal .table_body, .active .chart_modal .chart_body {
    transform: translateY(0);
}

.table_modal .table_body, .chart_modal .chart_body {
    margin: 0 auto;
    padding: 10px;
}

.zoomable-table.active .table_modal, .active .chart_modal {
    opacity: 1;
    visibility: visible;
}

.table_modal button.zoomable-table_btn, .chart_modal button.zoomable-table_btn {
    background: transparent;
    border: 0;
    position: absolute;
    right: 26px;
    top: 26px;
}

.zoomable-table .table_modal .h2,
.chart_modal .h2 {
    background: #f5f7fa;
    padding: 13px;
    color: var(--dark);
}

/* .zoomable-table svg path, .chart_modal svg path {
    stroke: currentColor;
} */

.dark-active .zoomable-table .table_modal .h2,
.dark-active .chart_modal .h2 {
    background: var(--light);
}

.dark-active .table_modal button.zoomable-table_btn path,
.dark-active .chart_modal button.zoomable-table_btn path {
    fill: #fff;
}

.card.card-number3 {
    padding: 0;
    overflow: hidden;
}

    .card.card-number3 h6 {
        padding: 14px 20px;
        background: #0acf97;
        color: #fff;
        text-align: center;
        font-weight: 600;
        font-size: 18px;
    }

    .card.card-number3.red h6 {
        background: #FA5C7C;
    }

    .card.card-number3.card-number-default h6 {
        background: #f5f7fa;
        color: #000;
    }

    .card.card-number3 .card3-content {
        padding: 19px;
        margin: 0;
    }

        .card.card-number3 .card3-content h3 {
            width: 80px;
            height: 80px;
            background: #0ACF97;
            padding: 15px;
            margin: 0 auto;
            border-radius: 100%;
            color: var(--light);
        }

.card3-content h5 {
    margin-bottom: 0
}

.card.card-number3 .card3-content > .row {
    padding: 12.6px 10px;
}

    .card.card-number3 .card3-content > .row + .row {
        border-top: 1px solid var(--border-color);
    }

g.apexcharts-series path:hover {
    filter: unset;
}

.apexcharts-legend-series {
    margin: 4px 0px !important;
}

g.apexcharts-scatter-series.apexcharts-plot-series path.apexcharts-marker {
    filter: url();
}

g.apexcharts-bar-series.apexcharts-plot-series path.apexcharts-bar-area {
    filter: unset;
}

html .card-number3 .badge {
    border-radius: 5px;
}

span.dot {
    margin-bottom: 2px;
}

.card-row-height .card {
    min-height: auto;
}

.img.map-img img {
    height: 100%;
    width: 100%;
    max-height: 200px;
    object-fit: contain;
}

.dark-active .apexcharts-pie g.apexcharts-datalabels-group text {
    fill: #ffffff;
    opacity: 0.6;
}

body .apexcharts-legend.apx-legend-position-right {
    justify-content: center;
}

html table .badge {
    font-size: 9px;
    font-weight: 800;
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0;
    line-height: 16px;
    padding: 0px 4px;
}

.badge-animation {
    position: relative;
    display: inline-block;
}

html table .badge-animation:after {
    content: '';
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    position: absolute;
    left: 50%;
    top: 50%;
    background: #0acf97;
    border-radius: 5px;
    opacity: 0.2;
    animation: badge-blink 1.5s ease-out infinite;
    translate: -50% -50%;
    transform: scale(1.2);
    z-index: 0;
}

html table .badge-animation::before {
    content: '';
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: 1px solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--success);
    transform: scale(1.1);
    opacity: 0.5;
    border-radius: 5px;
    animation: badge-blink 1.5s ease-out infinite;
    translate: -50% -50%;
    animation-delay: 0.2s;
    z-index: 0;
}

html table .badge-animation:has(.bg-danger)::before, html table .badge-animation:has(.bg-danger)::after {
    background-color: var(--danger);
}

html table .badge-animation:has(.bg-light-green )::before, html table .badge-animation:has(.bg-light-green )::after {
    background: #afe784;
}

html table .badge-animation:has(.bg-warning )::before, html table .badge-animation:has(.bg-warning )::after {
    background: var(--warning);
}

@keyframes badge-blink {
    0% {
        transform: scale(0);
        opacity: 0;
    }
}

.card table.table-small.table tr td {
    padding: 8px 10px;
}

.card table.table.table-small tr th {
    vertical-align: top;
}

.simplebar-wrapper {
    height: 100%;
}


.m-1px {
    margin: 1px !important
}

.m-2px {
    margin: 2px !important
}

.m-3px {
    margin: 3px !important
}

.m-4px {
    margin: 4px !important
}

.m-5px {
    margin: 5px !important
}

.m-6px {
    margin: 6px !important
}

.m-7px {
    margin: 7px !important
}

.m-8px {
    margin: 8px !important
}

.m-9px {
    margin: 9px !important
}

.m-10px {
    margin: 10px !important
}

.m-5px {
    margin: 5px !important
}

.m-10px {
    margin: 10px !important
}

.m-15px {
    margin: 15px !important
}

.m-20px {
    margin: 20px !important
}

.m-25px {
    margin: 25px !important
}

.m-30px {
    margin: 30px !important
}

.m-35px {
    margin: 35px !important
}

.m-40px {
    margin: 40px !important
}

.m-45px {
    margin: 45px !important
}

.m-50px {
    margin: 50px !important
}

.mt-1px {
    margin-top: 1px !important
}

.mt-2px {
    margin-top: 2px !important
}

.mt-3px {
    margin-top: 3px !important
}

.mt-4px {
    margin-top: 4px !important
}

.mt-5px {
    margin-top: 5px !important
}

.mt-6px {
    margin-top: 6px !important
}

.mt-7px {
    margin-top: 7px !important
}

.mt-8px {
    margin-top: 8px !important
}

.mt-9px {
    margin-top: 9px !important
}

.mt-10px {
    margin-top: 10px !important
}

.mt-5px {
    margin-top: 5px !important
}

.mt-10px {
    margin-top: 10px !important
}

.mt-15px {
    margin-top: 15px !important
}

.mt-20px {
    margin-top: 20px !important
}

.mt-24px {
    margin-top: 24px !important
}

.mt-25px {
    margin-top: 25px !important
}

.mt-30px {
    margin-top: 30px !important
}

.mt-35px {
    margin-top: 35px !important
}

.mt-40px {
    margin-top: 40px !important
}

.mt-45px {
    margin-top: 45px !important
}

.mt-50px {
    margin-top: 50px !important
}

.me-1px {
    margin-right: 1px !important
}

.me-2px {
    margin-right: 2px !important
}

.me-3px {
    margin-right: 3px !important
}

.me-4px {
    margin-right: 4px !important
}

.me-5px {
    margin-right: 5px !important
}

.me-6px {
    margin-right: 6px !important
}

.me-7px {
    margin-right: 7px !important
}

.me-8px {
    margin-right: 8px !important
}

.me-9px {
    margin-right: 9px !important
}

.me-10px {
    margin-right: 10px !important
}

.me-5px {
    margin-right: 5px !important
}

.me-10px {
    margin-right: 10px !important
}

.me-15px {
    margin-right: 15px !important
}

.me-20px {
    margin-right: 20px !important
}

.me-25px {
    margin-right: 25px !important
}

.me-30px {
    margin-right: 30px !important
}

.me-35px {
    margin-right: 35px !important
}

.me-40px {
    margin-right: 40px !important
}

.me-45px {
    margin-right: 45px !important
}

.me-50px {
    margin-right: 50px !important
}

.mb-1px {
    margin-bottom: 1px !important
}

.mb-2px {
    margin-bottom: 2px !important
}

.mb-3px {
    margin-bottom: 3px !important
}

.mb-4px {
    margin-bottom: 4px !important
}

.mb-5px {
    margin-bottom: 5px !important
}

.mb-6px {
    margin-bottom: 6px !important
}

.mb-7px {
    margin-bottom: 7px !important
}

.mb-8px {
    margin-bottom: 8px !important
}

.mb-9px {
    margin-bottom: 9px !important
}

.mb-10px {
    margin-bottom: 10px !important
}

.mb-5px {
    margin-bottom: 5px !important
}

.mb-10px {
    margin-bottom: 10px !important
}

.mb-15px {
    margin-bottom: 15px !important
}

.mb-20px {
    margin-bottom: 20px !important
}

.mb-25px {
    margin-bottom: 25px !important
}

.mb-30px {
    margin-bottom: 30px !important
}

.mb-35px {
    margin-bottom: 35px !important
}

.mb-40px {
    margin-bottom: 40px !important
}

.mb-45px {
    margin-bottom: 45px !important
}

.mb-50px {
    margin-bottom: 50px !important
}

.ms-1px {
    margin-left: 1px !important
}

.ms-2px {
    margin-left: 2px !important
}

.ms-3px {
    margin-left: 3px !important
}

.ms-4px {
    margin-left: 4px !important
}

.ms-5px {
    margin-left: 5px !important
}

.ms-6px {
    margin-left: 6px !important
}

.ms-7px {
    margin-left: 7px !important
}

.ms-8px {
    margin-left: 8px !important
}

.ms-9px {
    margin-left: 9px !important
}

.ms-10px {
    margin-left: 10px !important
}

.ms-5px {
    margin-left: 5px !important
}

.ms-10px {
    margin-left: 10px !important
}

.ms-15px {
    margin-left: 15px !important
}

.ms-20px {
    margin-left: 20px !important
}

.ms-25px {
    margin-left: 25px !important
}

.ms-30px {
    margin-left: 30px !important
}

.ms-35px {
    margin-left: 35px !important
}

.ms-40px {
    margin-left: 40px !important
}

.ms-45px {
    margin-left: 45px !important
}

.ms-50px {
    margin-left: 50px !important
}

.mx-1px {
    margin-left: 1px !important;
    margin-right: 1px !important
}

.mx-2px {
    margin-left: 2px !important;
    margin-right: 2px !important
}

.mx-3px {
    margin-left: 3px !important;
    margin-right: 3px !important
}

.mx-4px {
    margin-left: 4px !important;
    margin-right: 4px !important
}

.mx-5px {
    margin-left: 5px !important;
    margin-right: 5px !important
}

.mx-6px {
    margin-left: 6px !important;
    margin-right: 6px !important
}

.mx-7px {
    margin-left: 7px !important;
    margin-right: 7px !important
}

.mx-8px {
    margin-left: 8px !important;
    margin-right: 8px !important
}

.mx-9px {
    margin-left: 9px !important;
    margin-right: 9px !important
}

.mx-10px {
    margin-left: 10px !important;
    margin-right: 10px !important
}

.mx-5px {
    margin-left: 5px !important;
    margin-right: 5px !important
}

.mx-10px {
    margin-left: 10px !important;
    margin-right: 10px !important
}

.mx-15px {
    margin-left: 15px !important;
    margin-right: 15px !important
}

.mx-20px {
    margin-left: 20px !important;
    margin-right: 20px !important
}

.mx-25px {
    margin-left: 25px !important;
    margin-right: 25px !important
}

.mx-30px {
    margin-left: 30px !important;
    margin-right: 30px !important
}

.mx-35px {
    margin-left: 35px !important;
    margin-right: 35px !important
}

.mx-40px {
    margin-left: 40px !important;
    margin-right: 40px !important
}

.mx-45px {
    margin-left: 45px !important;
    margin-right: 45px !important
}

.mx-50px {
    margin-left: 50px !important;
    margin-right: 50px !important
}

.my-1px {
    margin-top: 1px !important;
    margin-bottom: 1px !important
}

.my-2px {
    margin-top: 2px !important;
    margin-bottom: 2px !important
}

.my-3px {
    margin-top: 3px !important;
    margin-bottom: 3px !important
}

.my-4px {
    margin-top: 4px !important;
    margin-bottom: 4px !important
}

.my-5px {
    margin-top: 5px !important;
    margin-bottom: 5px !important
}

.my-6px {
    margin-top: 6px !important;
    margin-bottom: 6px !important
}

.my-7px {
    margin-top: 7px !important;
    margin-bottom: 7px !important
}

.my-8px {
    margin-top: 8px !important;
    margin-bottom: 8px !important
}

.my-9px {
    margin-top: 9px !important;
    margin-bottom: 9px !important
}

.my-10px {
    margin-top: 10px !important;
    margin-bottom: 10px !important
}

.my-5px {
    margin-top: 5px !important;
    margin-bottom: 5px !important
}

.my-10px {
    margin-top: 10px !important;
    margin-bottom: 10px !important
}

.my-15px {
    margin-top: 15px !important;
    margin-bottom: 15px !important
}

.my-20px {
    margin-top: 20px !important;
    margin-bottom: 20px !important
}

.my-25px {
    margin-top: 25px !important;
    margin-bottom: 25px !important
}

.my-30px {
    margin-top: 30px !important;
    margin-bottom: 30px !important
}

.my-35px {
    margin-top: 35px !important;
    margin-bottom: 35px !important
}

.my-40px {
    margin-top: 40px !important;
    margin-bottom: 40px !important
}

.my-45px {
    margin-top: 45px !important;
    margin-bottom: 45px !important
}

.my-50px {
    margin-top: 50px !important;
    margin-bottom: 50px !important
}

.p-1px {
    padding: 1px !important
}

.p-2px {
    padding: 2px !important
}

.p-3px {
    padding: 3px !important
}

.p-4px {
    padding: 4px !important
}

.p-5px {
    padding: 5px !important
}

.p-6px {
    padding: 6px !important
}

.p-7px {
    padding: 7px !important
}

.p-8px {
    padding: 8px !important
}

.p-9px {
    padding: 9px !important
}

.p-10px {
    padding: 10px !important
}

.p-5px {
    padding: 5px !important
}

.p-10px {
    padding: 10px !important
}

.p-15px {
    padding: 15px !important
}

.p-20px {
    padding: 20px !important
}

.p-25px {
    padding: 25px !important
}

.p-30px {
    padding: 30px !important
}

.p-35px {
    padding: 35px !important
}

.p-40px {
    padding: 40px !important
}

.p-45px {
    padding: 45px !important
}

.p-50px {
    padding: 50px !important
}

.pt-1px {
    padding-top: 1px !important
}

.pt-2px {
    padding-top: 2px !important
}

.pt-3px {
    padding-top: 3px !important
}

.pt-4px {
    padding-top: 4px !important
}

.pt-5px {
    padding-top: 5px !important
}

.pt-6px {
    padding-top: 6px !important
}

.pt-7px {
    padding-top: 7px !important
}

.pt-8px {
    padding-top: 8px !important
}

.pt-9px {
    padding-top: 9px !important
}

.pt-10px {
    padding-top: 10px !important
}

.pt-5px {
    padding-top: 5px !important
}

.pt-10px {
    padding-top: 10px !important
}

.pt-15px {
    padding-top: 15px !important
}

.pt-20px {
    padding-top: 20px !important
}

.pt-25px {
    padding-top: 25px !important
}

.pt-30px {
    padding-top: 30px !important
}

.pt-35px {
    padding-top: 35px !important
}

.pt-40px {
    padding-top: 40px !important
}

.pt-45px {
    padding-top: 45px !important
}

.pt-50px {
    padding-top: 50px !important
}

.pe-1px {
    padding-right: 1px !important
}

.pe-2px {
    padding-right: 2px !important
}

.pe-3px {
    padding-right: 3px !important
}

.pe-4px {
    padding-right: 4px !important
}

.pe-5px {
    padding-right: 5px !important
}

.pe-6px {
    padding-right: 6px !important
}

.pe-7px {
    padding-right: 7px !important
}

.pe-8px {
    padding-right: 8px !important
}

.pe-9px {
    padding-right: 9px !important
}

.pe-10px {
    padding-right: 10px !important
}

.pe-5px {
    padding-right: 5px !important
}

.pe-10px {
    padding-right: 10px !important
}

.pe-15px {
    padding-right: 15px !important
}

.pe-20px {
    padding-right: 20px !important
}

.pe-25px {
    padding-right: 25px !important
}

.pe-30px {
    padding-right: 30px !important
}

.pe-35px {
    padding-right: 35px !important
}

.pe-40px {
    padding-right: 40px !important
}

.pe-45px {
    padding-right: 45px !important
}

.pe-50px {
    padding-right: 50px !important
}

.pb-1px {
    padding-bottom: 1px !important
}

.pb-2px {
    padding-bottom: 2px !important
}

.pb-3px {
    padding-bottom: 3px !important
}

.pb-4px {
    padding-bottom: 4px !important
}

.pb-5px {
    padding-bottom: 5px !important
}

.pb-6px {
    padding-bottom: 6px !important
}

.pb-7px {
    padding-bottom: 7px !important
}

.pb-8px {
    padding-bottom: 8px !important
}

.pb-9px {
    padding-bottom: 9px !important
}

.pb-10px {
    padding-bottom: 10px !important
}

.pb-5px {
    padding-bottom: 5px !important
}

.pb-10px {
    padding-bottom: 10px !important
}

.pb-15px {
    padding-bottom: 15px !important
}

.pb-20px {
    padding-bottom: 20px !important
}

.pb-25px {
    padding-bottom: 25px !important
}

.pb-30px {
    padding-bottom: 30px !important
}

.pb-35px {
    padding-bottom: 35px !important
}

.pb-40px {
    padding-bottom: 40px !important
}

.pb-45px {
    padding-bottom: 45px !important
}

.pb-50px {
    padding-bottom: 50px !important
}

.ps-1px {
    padding-left: 1px !important
}

.ps-2px {
    padding-left: 2px !important
}

.ps-3px {
    padding-left: 3px !important
}

.ps-4px {
    padding-left: 4px !important
}

.ps-5px {
    padding-left: 5px !important
}

.ps-6px {
    padding-left: 6px !important
}

.ps-7px {
    padding-left: 7px !important
}

.ps-8px {
    padding-left: 8px !important
}

.ps-9px {
    padding-left: 9px !important
}

.ps-10px {
    padding-left: 10px !important
}

.ps-5px {
    padding-left: 5px !important
}

.ps-10px {
    padding-left: 10px !important
}

.ps-15px {
    padding-left: 15px !important
}

.ps-20px {
    padding-left: 20px !important
}

.ps-25px {
    padding-left: 25px !important
}

.ps-30px {
    padding-left: 30px !important
}

.ps-35px {
    padding-left: 35px !important
}

.ps-40px {
    padding-left: 40px !important
}

.ps-45px {
    padding-left: 45px !important
}

.ps-50px {
    padding-left: 50px !important
}

.px-1px {
    padding-left: 1px !important;
    padding-right: 1px !important
}

.px-2px {
    padding-left: 2px !important;
    padding-right: 2px !important
}

.px-3px {
    padding-left: 3px !important;
    padding-right: 3px !important
}

.px-4px {
    padding-left: 4px !important;
    padding-right: 4px !important
}

.px-5px {
    padding-left: 5px !important;
    padding-right: 5px !important
}

.px-6px {
    padding-left: 6px !important;
    padding-right: 6px !important
}

.px-7px {
    padding-left: 7px !important;
    padding-right: 7px !important
}

.px-8px {
    padding-left: 8px !important;
    padding-right: 8px !important
}

.px-9px {
    padding-left: 9px !important;
    padding-right: 9px !important
}

.px-10px {
    padding-left: 10px !important;
    padding-right: 10px !important
}

.px-5px {
    padding-left: 5px !important;
    padding-right: 5px !important
}

.px-10px {
    padding-left: 10px !important;
    padding-right: 10px !important
}

.px-15px {
    padding-left: 15px !important;
    padding-right: 15px !important
}

.px-20px {
    padding-left: 20px !important;
    padding-right: 20px !important
}

.px-25px {
    padding-left: 25px !important;
    padding-right: 25px !important
}

.px-30px {
    padding-left: 30px !important;
    padding-right: 30px !important
}

.px-35px {
    padding-left: 35px !important;
    padding-right: 35px !important
}

.px-40px {
    padding-left: 40px !important;
    padding-right: 40px !important
}

.px-45px {
    padding-left: 45px !important;
    padding-right: 45px !important
}

.px-50px {
    padding-left: 50px !important;
    padding-right: 50px !important
}

.py-1px {
    padding-top: 1px !important;
    padding-bottom: 1px !important
}

.py-2px {
    padding-top: 2px !important;
    padding-bottom: 2px !important
}

.py-3px {
    padding-top: 3px !important;
    padding-bottom: 3px !important
}

.py-4px {
    padding-top: 4px !important;
    padding-bottom: 4px !important
}

.py-5px {
    padding-top: 5px !important;
    padding-bottom: 5px !important
}

.py-6px {
    padding-top: 6px !important;
    padding-bottom: 6px !important
}

.py-7px {
    padding-top: 7px !important;
    padding-bottom: 7px !important
}

.py-8px {
    padding-top: 8px !important;
    padding-bottom: 8px !important
}

.py-9px {
    padding-top: 9px !important;
    padding-bottom: 9px !important
}

.py-10px {
    padding-top: 10px !important;
    padding-bottom: 10px !important
}

.py-5px {
    padding-top: 5px !important;
    padding-bottom: 5px !important
}

.py-10px {
    padding-top: 10px !important;
    padding-bottom: 10px !important
}

.py-15px {
    padding-top: 15px !important;
    padding-bottom: 15px !important
}

.py-20px {
    padding-top: 20px !important;
    padding-bottom: 20px !important
}

.py-25px {
    padding-top: 25px !important;
    padding-bottom: 25px !important
}

.py-30px {
    padding-top: 30px !important;
    padding-bottom: 30px !important
}

.py-35px {
    padding-top: 35px !important;
    padding-bottom: 35px !important
}

.py-40px {
    padding-top: 40px !important;
    padding-bottom: 40px !important
}

.py-45px {
    padding-top: 45px !important;
    padding-bottom: 45px !important
}

.py-50px {
    padding-top: 50px !important;
    padding-bottom: 50px !important
}

.border-radius-0 {
    border-radius: 0px !important;
}

.border-0 {
    border: 0 !important;
}

.ratting-a {
    background-color: #1E990E !important;
    font-weight: bold;
    color: black !important;
}

.ratting-b {
    background-color: #AFE784 !important;
    font-weight: bold;
    color: black !important;
}

.ratting-c {
    background-color: #F7F73B !important;
    font-weight: bold;
    color: black !important;
}

.ratting-d {
    background-color: #EFB5B9 !important;
    font-weight: bold;
    color: black !important;
}

.ratting-e {
    background-color: #F15628 !important;
    font-weight: bold;
    color: black !important;
}

.table-layout-fixed {
    table-layout: fixed !important;
}

.theme-panel .theme-collapse-btn {
    position: absolute;
    left: -30px;
    top: 30%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    background: var(--white);
    text-align: center;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15)
}

.theme-panel .theme-panel-content {
    background: var(--white);
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    margin: 0;
    z-index: 10;
}

.theme-panel.active {
    box-shadow: 0 5px 25px rgba(0, 0, 0, .3);
    right: 0;
}

    .theme-panel.active .theme-collapse-btn .fa:before {
        content: "\f00d";
    }

.theme-panel .theme-panel-divider {
    height: 1px;
    margin: 15px 0;
    background-color: var(--primary-light);
}

.offcanvas {
    z-index: 99991 !important;
}

.offcanvas-backdrop {
    z-index: 9999;
}

    .offcanvas-backdrop.show {
        opacity: .1;
    }

header .dark-light-toggle .icon svg {
    vertical-align: top;
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left;
}

/*ion-range*/
html .irs.irs--flat .irs-handle > i:first-child {
    width: 15px;
    height: 15px;
    top: 2px;
    border-radius: 100%;
}

.irs .irs .irs-line, .irs.irs--flat .irs-bar {
    top: 23px;
}

span.irs-handle {
    top: 15px;
}

.irs .irs .irs-from, .irs .irs .irs-single, .irs .irs .irs-to {
    top: 0px;
}

.irs .irs .irs-line {
    background: var(--light);
}

div#filter_offcanvas .irs.irs--flat .irs-handle > i:first-child {
    margin-left: -8px;
}


.an_chart {
    background-color: transparent !important;
}

.dark-active .table-hover > tbody > tr:hover > * {
    color: var(--light);
}

.dark-active .table > :not(caption) > *.table-primary > * {
    background: #0f5a77;
    border-color: #207494;
}

.dark-active .table > :not(caption) > *.table-primary {
    border-color: #207494;
}

.dark-active .table > :not(caption) > *.table-danger > * {
    background: #5a3034;
    border-color: #794449;
}

.dark-active .table > :not(caption) > *.table-danger {
    border-color: #794449;
}

.dark-active header {
    border-color: rgba(255,255,255,0.05);
}

.dark-active .toast-wrap .toast {
    background: #0D3556;
    border-color: rgba(255,255,255,0.2);
}

.dark-active .toast-wrap .icon {
    border-color: rgba(255,255,255,0.2);
}

.dark-active .nav-tabs .nav-item.show .nav-link,
.dark-active .nav-tabs .nav-link.active {
    background-color: var(--white);
    border-color: var(--white);
}

.dark-active .tab-content.panel {
    background: var(--white);
    border-color: var(--white);
}

.dark-active td .form-control,
.dark-active td .form-select {
    border-color: rgba(255,255,255,0.2);
}

.dark-active .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.dark-active .card-header,
.dark-active .card-footer {
    --bs-card-border-color: var(--white);
}

.dark-active .modal-content {
    background: var(--white);
}

.dark-active .modal-header {
    border-color: var(--light);
}

.dark-active table.dataTable thead tr > .dtfc-fixed-start,
.dark-active table.dataTable thead tr > .dtfc-fixed-end,
.dark-active table.dataTable tfoot tr > .dtfc-fixed-start,
.dark-active table.dataTable tfoot tr > .dtfc-fixed-end {
    background-color: var(--white);
}

.dark-active td[style*="white"] {
    background-color: var(--light) !important;
}

.dark-active .nav-tabs .nav-link:focus,
.dark-active .nav-tabs .nav-link:hover {
    border-color: var(--light);
}

.dark-active div.dt-scroll-body {
    border-bottom-color: var(--light);
}

.SumoSelect .select-all {
    background-color: inherit;
    border-bottom: 1px solid var(--light);
    padding: 8px 0 3px 35px;
}

    .SumoSelect .select-all:hover {
        background-color: var(--dark);
        color: var(--white);
    }

    .SumoSelect .select-all > label, .SumoSelect .select-all > span i {
        cursor: pointer;
        color: inherit;
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
    }

.daterangepicker {
    background-color: var(--white);
    border: 1px solid var(--light);
    z-index: 99991 !important;
}

    .daterangepicker .calendar-table {
        background-color: inherit;
    }

    .daterangepicker td.available:hover, .daterangepicker th.available:hover {
        background-color: var(--dark);
        color: var(--light) !important;
    }

    .daterangepicker th.available span {
        border-color: var(--dark) !important;
        color: var(--dark) !important;
    }

        .daterangepicker th.available:hover span, .daterangepicker th.available span:hover {
            border-color: var(--light) !important;
            color: var(--light) !important;
        }

    .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
        background-color: var(--white);
        border-color: transparent;
        color: var(--muted);
    }

.popover-header {
    background-color: var(--primary-light);
}

.dark-active .popover-body, .dark-active .popover-header {
    background-color: var(--light);
}

.popover-body {
    max-height: 400px;
    overflow-y: auto;
}

.input-group-text {
    background-color: var(--light);
    border: var(--bs-border-width) solid var(--light);
}

@media (min-width:576px) {
    .container, .container-sm {
        max-width: 540px !important;
    }
}

@media (min-width:768px) {
    .container, .container-md, .container-sm {
        max-width: 720px !important;
    }
}

@media (min-width:992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px !important;
    }
}

@media (min-width:1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px !important;
    }
}

@media (min-width:1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px !important;
    }
}

.font-bold {
    font-weight: bold;
}

.text-center {
    text-align: center !important;
}

.table > thead, .table > tfoot {
    position: sticky;
    top: 0;
    z-index: 9;
}



.engine-fuel-hours .title h4 {
    font-size: 16px;
    background: #f5f7fa;
    padding: 16px;
    color: var(--dark);
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
}

.dark-active .engine-fuel-hours .title h4 {
    background: var(--light);
    border-color: #ffffff33;
}

.engine-fuel-hours .title h4:last-child {
    margin-bottom: 0;
}

.engine-fuel-hours .icon-box .img {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: 0 0 8px 0 #00000040;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: var(--dark);
}

.engine-fuel-hours .icon-box {
    align-items: center;
    display: flex;
    gap: 10px;
    background: var(--primary);
    padding: 12px;
    color: #fff;
    border-radius: 14px 14px 0 0;
}

    .engine-fuel-hours .icon-box .title h5 {
        margin-bottom: 0;
    }

.dummy_title {
    height: 63px;
}

.fule-hours {
    font-size: 16px;
    padding: 16px 11px;
    margin-bottom: 16px;
    background: #f9f9f9;
    height: 53px;
}

.dark-active .fule-hours {
    background: var(--light);
}

.fule-hours:last-child {
    margin-bottom: 0;
}

.fule-hours h5 {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.dark-active .engine-fuel-hours .icon-box .img {
    color: var(--light);
}

.dark-active .fule-hours img {
    filter: invert(1);
}

.dark-active button.btn.zoomable-table_btn svg path {
    stroke: #fff;
}

.card-number.grediant_card {
    height: 100%;
    color: #fff;
    background-image: url(../images/card-number-3.png);
    background-size: 164px auto;
    background-position: 110% 100%;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: unset;
    overflow: hidden;
    border-radius: 12px;
    min-height: 234px;
}

    .card-number.grediant_card:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
    }

    .card-number.grediant_card > * {
        position: relative;
        z-index: 1;
    }

.card.card-number.grediant_card :not(.icon-box) .img {
    width: 70px;
    height: 70px;
    background: #fff;
}

.card.card-number.grediant_card :not(.icon-box) .img {
    width: 70px;
    height: 70px;
    background: #fff;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 4px 4px 7px 0px #00000026;
}

.grediant_card h5.title {
    font-size: 28px;
    margin: 0;
}

.card-number.grediant_card .icon-box .icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #FFFFFF1A;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-right: 10px;
}

.card-number.grediant_card .icon-box .icon-box-content h6 {
    font-size: 18px;
    margin-bottom: 0;
}

    .card-number.grediant_card .icon-box .icon-box-content h6 small {
        font-weight: 400;
        font-size: 12px;
    }

.card-number.grediant_card .icon-box + .icon-box {
    margin-top: 14px;
    align-items: center;
}

.card-number.grediant_card .icon-box .icon-box-content p {
    line-height: 120%;
}

.table > tfoot {
    bottom: 0;
}

    .table > tfoot td {
        border-top: 1px solid #000;
    }

.dark-active tfoot.thead-light td {
    background: var(--light);
}

ul.tab-page-link a {
    display: inline-block;
    padding: 3px 10px 3px 3px;
    border-radius: 6px;
    color: #fff;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    background-image: linear-gradient(213deg, #00000040, #00000000);
}

    ul.tab-page-link a:hover {
        color: #fff;
    }

ul.tab-page-link .red a {
    background-color: var(--danger);
}

ul.tab-page-link .green a {
    background-color: var(--success);
}

ul.tab-page-link .orange a {
    background-color: #FF7F00;
}

ul.tab-page-link .purpal a {
    background-color: #868FF6;
}

ul.tab-page-link a:after {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.4s;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--danger);
    z-index: -1;
}

ul.tab-page-link .green a:after {
    border-top-color: var(--success);
}

ul.tab-page-link .orange a:after {
    border-top-color: #FF7F00
}

ul.tab-page-link .purpal a:after {
    border-top-color: #868FF6
}

ul.tab-page-link a:hover:after, ul.tab-page-link li.active a:after {
    opacity: 1;
    bottom: -7;
}

ul.tab-page-link {
    list-style: none;
    gap: 5px;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}

    ul.tab-page-link a img {
        width: 42px;
        height: 42px;
        object-fit: contain;
        background: #ffffff;
        border-radius: 5px;
        padding: 4px;
        margin-right: 6px;
    }

body .table_modal .card {
    height: auto;
    min-height: auto;
    max-height: 90vh;
}

.badge.badge-pill {
    width: auto;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 11px;
    display: inline-block;
    height: auto;
}

    .badge.badge-pill.badge-danger {
        background: var(--danger);
        color: #fff;
    }

    .badge.badge-pill.badge-success {
        background: var(--success);
        color: #fff;
    }

html .check-boxes .form-check {
    margin-bottom: 3px;
}

    html .check-boxes .form-check label {
        font-size: 13px;
    }

html .check-boxes .form-check-input {
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.graph-search-box input.form-control[type="search"] {
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-radius: 0;
    padding-left: 23px;
    background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.5087 1.70078C3.68724 1.70078 1.4 3.98802 1.4 6.80948C1.4 9.63094 3.68724 11.9182 6.5087 11.9182C9.33016 11.9182 11.6174 9.63094 11.6174 6.80948C11.6174 3.98802 9.33016 1.70078 6.5087 1.70078ZM0 6.80948C0 3.21483 2.91404 0.300781 6.5087 0.300781C10.1034 0.300781 13.0174 3.21483 13.0174 6.80948C13.0174 10.4041 10.1034 13.3182 6.5087 13.3182C2.91404 13.3182 0 10.4041 0 6.80948Z" fill="%235F6F8D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.1161 10.4169C10.3895 10.1435 10.8327 10.1435 11.1061 10.4169L15.195 14.5058C15.4684 14.7792 15.4684 15.2224 15.195 15.4958C14.9216 15.7691 14.4784 15.7691 14.205 15.4958L10.1161 11.4068C9.84277 11.1335 9.84277 10.6903 10.1161 10.4169Z" fill="%235F6F8D"/></svg>');
    background-repeat: no-repeat;
    background-position-y: center;
    height: 28px;
    background-size: 13px;
}

.graph-search-box .form-field {
    margin-bottom: 10px;
}

html .dark-active .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-bg-type: var(--bs-border-color-translucent);
}

.dark-active .daterangepicker {
    background: var(--white);
    border-color: #ffffff24;
}

    .dark-active .daterangepicker td.in-range {
        background: #0084b354;
        color: #fff;
    }

    .dark-active .daterangepicker td.available:hover, .dark-active .daterangepicker th.available:hover {
        color: #000 !important
    }

    .dark-active .daterangepicker .calendar-table .next span, .dark-active .daterangepicker .calendar-table .prev span {
        border-color: #ffffff;
    }

    .dark-active .daterangepicker td.in-range .end-date {
        background-color: var(--primary);
        border-color: transparent;
        color: #fff;
    }

    body .tbl-accordion-body tr td:first-child:before {
        display: none !important
    }

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--primary);
    border-color: transparent;
    color: #fff;
}

.card.card-number2 {
    height: calc(100% - 12px);
}

.apexcharts-legend-series:has(span.apexcharts-legend-text:empty) span.apexcharts-legend-marker {
    display: none;
}

.custom-legend {
    color: rgb(55, 61, 63);
    font-size: 10px;
    font-weight: 400;
    font-family: 'Nunito';
    justify-content: center;
    gap: 14px;
    margin-top: -15px;
    margin-bottom: 10px;
}

    .custom-legend .circle i {
        width: 8px;
        height: 8px;
        background: var(--primary);
        display: inline-block;
        border-radius: 100px;
        transform: translate(-4px, 0.5px);
    }

    .custom-legend .line i {
        width: 8px;
        height: 2px;
        background: var(--primary);
        border-radius: 0;
        display: inline-block;
        transform: translate(-5px, -2.5px);
    }

html .SumoSelect > .cselect.cselect-solid + .CaptionCont.line-light-28 {
    line-height: 28px
}

.dark-active .btn.btn-dark {
    background: var(--dark);
    color: var(--white)
}

.dark-active .custom-legend {
    color: var(--muted) !important
}

.apexcharts-legend-series:has(span.apexcharts-legend-text:empty) {
    display: none;
}

.map_chart .apexcharts-line-series g.apexcharts-data-labels:nth-child(even) {
    display: none;
}

.info_text {
    border-left: 1px solid var(--muted);
    padding: 7px 13px;
    background: #f5f7fa;
}

.dark-active .info_text {
    background: #ffffff13;
}

.info_text .row {
    gap: 5px 0;
}

.info_text .text-wrp p:first-child {
    font-weight: 600;
    font-size: 13px;
}

.info_text .text-wrp p:last-child {
    font-size: 12px;
    margin-top: -4px;
    line-height: 130%;
}

.text-wrp {
    margin-top: 0;
}

.wether_speed_gcu ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    width: 100%;
    margin: 0;
}

    .wether_speed_gcu ul li {
        padding: 8px 26px;
        background: #0ACF97;
        color: #fff;
        border-radius: 10px;
        border: 1px solid #0ACF97;
        width: 33.33%;
        text-align: center;
        position: relative;
        z-index: 3;
        display: block;
    }

        .wether_speed_gcu ul li a {
            width: 100%;
            display: block;
            color: #fff;
        }

        .wether_speed_gcu ul li.active {
            background: #FA5C7C;
            animation: mymove 2s infinite;
            border-color: transparent;
        }

.legend_map {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #ffffffc2;
    backdrop-filter: blur(2px);
    padding: 10px 10px;
}

    .legend_map ul {
        list-style: none;
        display: flex;
        gap: 10px;
        justify-content: center;
        width: 100%;
        margin-bottom: 0;
    }

        .legend_map ul li {
            position: relative;
            display: flex;
            gap: 5px;
            font-size: 12px;
            font-weight: 600;
            color: #000;
            align-items: center;
        }

            .legend_map ul li::before {
                content: '';
                width: 8px;
                height: 8px;
                display: inline-block;
                border-radius: 100%;
                background-color: var(--dark);
            }

            .legend_map ul li.success::before {
                background-color: var(--success);
            }

            .legend_map ul li.danger::before {
                background-color: var(--danger);
            }

            .legend_map ul li.blue::before {
                background-color: var(--primary);
            }

@keyframes mymove {
    0% {
        box-shadow: 0px 0px 0px 0px #fa5c7c63;
    }

    50% {
        box-shadow: 0px 0px 2px 5px #fa5c7c63;
    }

    100% {
        box-shadow: 0px 0px 0px 0px #fa5c7c63;
    }
}

/*Style CSS ----> Start*/
* {
    outline: none !important;
}

.btn:first-child:active:focus {
    box-shadow: none !important;
    border-color: transparent;
}

:root {
    --primary: #0084B3;
    --primary-dark: #026b91;
    --primary-light: #EAF5FA;
    --secondary: #5F6F8D;
    --light: #F5F7FA;
    --dark: #1F2C46;
    --white: #fff;
    --danger: #FA5C7C;
    --success: #0ACF97;
    --warning: #FF7F00;
    --muted: #5F6F8D;
    --border-color: #DFEBF0;
    --page-content-space: 12px;
    --body-font-size: 14px;
    --field-bg: #F4F6FB;
    --field-placeholder: #767F8F;
    --field-border-focus: #E7ECF4;
    --field-font-size: 14px;
    --sidebar-width: 260px;
    --bs-border-radius: 0.75rem;
    --bs-dark-rgb: 31, 44, 70;
    --bs-secondary-bg: #d3d3d3;
    --greay: #5F6F8D;
    --report-sidebar-width: 330px;
    --font-1: "Nunito", sans-serif;
}

.modal {
    --bs-modal-zindex: 99991;
}

.modal-backdrop {
    --bs-backdrop-zindex: 9999;
}

body {
    font-family: "Nunito", sans-serif;
    background-color: var(--light);
    font-size: var(--body-font-size);
    font-weight: 400;
    overflow-x: hidden;
}

html {
    font-size: var(--body-font-size);
}

::selection {
    color: var(--white);
    background: var(--primary);
}

img, svg {
    width: auto;
    max-width: 100%;
    height: auto;
}

*, ::after, ::before {
    box-sizing: border-box;
    outline: none;
}

html button {
    box-shadow: none !important;
}

p:last-child {
    margin-bottom: 0;
}

html a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s;
}

    html a:hover {
        color: var(--dark);
        text-decoration: none;
    }

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-weight: 700;
}

blockquote {
    margin: 0 0 16px
}

.card-text {
    color: #677788;
}

/*Buttons*/
.btn {
    --bs-btn-padding-x: 18px;
    --bs-btn-padding-y: 9px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 18px;
    --bs-btn-border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

    .btn.btn-lg {
        --bs-btn-padding-x: 20px;
        --bs-btn-padding-y: 12px;
        --bs-btn-font-size: 16px;
    }

    .btn.btn-sm {
        --bs-btn-padding-x: 15px;
        --bs-btn-padding-y: 4px;
        --bs-btn-font-size: 13px;
    }

    .btn.btn-md {
        --bs-btn-padding-x: 14px;
        --bs-btn-padding-y: 5px;
        --bs-btn-font-size: 13px;
        --bs-btn-border-radius: 6px;
        gap: 6px;
    }

        .btn.btn-md svg {
            max-height: 12px;
        }

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-link {
    --bs-btn-color: var(--primary);
    --bs-btn-hover-color: var(--primary-dark);
    --bs-btn-active-color: var(--primary-dark);
}

.btn-soft-primary {
    color: var(--primary);
    background-color: var(--primary-light);
    border-color: transparent;
}

    .btn-soft-primary:focus,
    .btn-soft-primary:hover {
        color: #fff;
        background-color: var(--primary);
        border-color: transparent;
    }

.btn-ghost-primary {
    color: var(--primary);
    background-color: transparent;
}

    .btn-ghost-primary:focus,
    .btn-ghost-primary:hover {
        color: var(--primary);
        border-color: transparent;
        background-color: var(--primary-light);
    }

.btn.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .btn.btn-icon.btn-lg {
        width: 43.6px;
        height: 43.6px;
    }

    .btn.btn-icon.btn-md {
        width: 30px;
        height: 30px;
    }

    .btn.btn-icon.btn-sm {
        width: 27.6px;
        height: 27.6px;
    }

    .btn.btn-icon.btn-xs {
        width: 20px;
        height: 20px;
        border-radius: 5px;
        padding: 4px;
    }

    .btn.btn-icon.btn-circle {
        border-radius: 50px;
    }

.btn.btn-mate {
    background-color: rgb(31 44 70 / 10%);
    color: var(--dark);
}

    .btn.btn-mate:hover {
        background-color: var(--dark);
        color: var(--white);
    }

.btn.btn-outline {
    --bs-btn-color: var(--dark);
    --bs-btn-border-color: var(--field-border-focus);
    --bs-btn-hover-border-color: var(--dark);
}

.form-field {
    margin: 0 0 18px;
    line-height: 120%;
}

    .form-field label, .form-label {
        font-size: 13px;
        color: var(--dark);
        font-weight: 500;
        margin-bottom: 2px;
        display: inline-block;
        vertical-align: top;
        line-height: 18px;
    }

span.form-text {
    display: block;
    font-weight: 400;
}

.form-field label em {
    color: red;
    font-style: normal;
}

.form-field label > button {
    font-size: var(--body-font-size);
    font-weight: 500;
    text-decoration: underline;
    background: transparent;
    border: 0;
    color: var(--primary);
}

html .form-control, html .form-select {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 0 15px;
    height: 38px;
    font-size: var(--field-font-size);
    box-shadow: 0 0 0 transparent !important;
    color: var(--dark);
    transition: all 0.2s;
    font-family: inherit;
    font-weight: normal;
}

html .form-select {
    padding-right: 25px;
}

html .form-control-light {
    background: var(--light);
    box-shadow: none;
}

.form-control.form-control-lg {
    height: 44px;
}

.form-control.form-control-sm,
.form-select.form-select-sm {
    height: 30px;
    border-radius: 6px;
    font-size: 14px;
}

.form-control[type=file] {
    line-height: 36px;
    padding-left: 10px;
}

html textarea.form-control {
    padding: 10px 15px;
    min-height: 100px;
}

.input-group > textarea.form-control {
    min-height: 60px;
}



.form-field-icon {
    position: relative;
}

    .form-field-icon .icon {
        width: 38px;
        height: 38px;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-field-icon .form-control,
    .form-field-icon .form-select {
        padding-left: 38px;
    }








html .form-control-solid,
html .form-select-solid {
    background-color: var(--field-bg);
    border-color: var(--field-border-focus);
}

html .form-control:hover:not(:disabled):not([readonly]),
html .form-control:focus:not(:disabled):not([readonly]),
html .form-select:hover:not(:disabled):not([readonly]),
html .form-select:focus:not(:disabled):not([readonly]) {
    border-color: var(--field-border-focus);
    background-color: var(--white);
}

html .form-control-light:hover,
html .form-control-light:focus,
html .form-select-light:hover,
html .form-select-lightfocus {
    background: var(--light);
}

html .form-control.form-control-solid:hover,
html .form-control.form-control-solid:focus,
html .form-select.form-select-solid:hover,
html .form-select.form-select-solid:focus {
    background-color: var(--field-bg);
}

html .form-control::-webkit-input-placeholder { /* Edge */
    color: var(--field-placeholder);
}

html .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--field-placeholder);
}

html .input-group-merge .form-control {
    padding-left: 40px;
    border-radius: 8px !important;
}

.input-group-prepend {
    position: absolute;
    left: 4px;
    z-index: 6;
    top: 50%;
    background: transparent;
    border: 0;
    transform: translateY(-50%);
}

html .form-control::placeholder {
    color: var(--field-placeholder);
}

.select2-container {
    display: block;
    z-index: 9991;
}

html .select2.select2-container {
    width: 100% !important;
    z-index: 1;
}

.select2-container--default .select2-selection--single {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    padding: 0 35px 0 15px;
    height: 38px;
    font-size: var(--body-font-size);
    box-shadow: 0 0 0 transparent !important;
    color: var(--dark);
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.field-icon .select2-container--default .select2-selection--single {
    padding-left: 38px;
}

html .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
}

html .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 20px;
    height: 20px;
    right: 9px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    html .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none;
    }

    html .select2-container--default .select2-selection--single .select2-selection__arrow:before {
        content: "";
        width: 12px;
        height: 8px;
        display: block;
        transition: all 0.2s;
        color: var(--muted);
        background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="%23313131" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        background-repeat: no-repeat;
    }

html .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:before {
    transform: rotate(180deg);
    margin-top: 0;
}

html .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary);
    color: white;
}

html .select2-container--default .select2-results__option--selected {
    background-color: var(--light);
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 0 35px 2px 15px;
    min-height: 38px;
    font-size: var(--body-font-size);
    box-shadow: 0 0 0 transparent !important;
    color: var(--dark);
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin-top: 2px;
    }

html .select2-dropdown {
    border-color: rgba(0,0,0,0.1);
}

html .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--light);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 0 10px;
    height: 32px;
    font-size: var(--body-font-size);
}

html .select2-results__option {
    font-size: var(--body-font-size);
    padding: 6px 10px;
}

.select2-results__option.select2-results__message {
    text-align: center;
    color: var(--muted);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: none;
    background: #cfcfcf96;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: none;
    background: #cfcfcf96;
    padding: 3px 16px 3px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    left: auto;
    top: 0;
    right: 3px;
    border: 0;
    font-size: 14px;
    height: 100%;
}

.form-select-solid ~ .select2-container--default .select2-selection--single {
    background: var(--light);
    border-color: var(--field-border-focus);
}

.form-select-sm ~ .select2-container--default .select2-selection--single {
    height: 30px;
    font-size: 14px;
}

.form-select-lg ~ .select2-container--default .select2-selection--single {
    height: 44px;
}

html .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    font-weight: 400;
}

html .form-switch {
    margin-bottom: 0;
}

    html .form-switch .form-check-input {
        background-color: var(--light);
        border: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 0 0 transparent !important;
        cursor: pointer;
    }

        html .form-switch .form-check-input:focus {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
        }

        html .form-switch .form-check-input:checked {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        }

        html .form-switch .form-check-input:checked {
            background-color: var(--dark);
            border-color: var(--dark) !important;
        }

    html .form-switch .form-check-label {
        margin-bottom: 0;
        cursor: pointer;
    }

.form-switch.form-switch-2 {
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .form-switch.form-switch-2 .form-check-input {
        margin: 0 10px;
    }

        .form-switch.form-switch-2 .form-check-input + .form-check-label {
            order: -1;
            color: var(--primary);
        }

            .form-switch.form-switch-2 .form-check-input:checked + .form-check-label,
            .form-switch.form-switch-2 .form-check-input + .form-check-label + .form-check-label {
                color: var(--muted);
            }

                .form-switch.form-switch-2 .form-check-input:checked + .form-check-label + .form-check-label {
                    color: var(--primary);
                }

form:last-child {
    margin-bottom: 0;
}

.text-small {
    font-size: 13px;
    font-weight: normal;
}

html .form-check-input {
    width: 18px;
    height: 18px;
    top: 0;
    margin: 0;
    box-shadow: 0 0 0 transparent !important;
    background-color: var(--light);
    border: 1px solid rgba(0,0,0,0.1) !important;
}

    html .form-check-input.is-invalid {
        border-color: var(--bs-form-invalid-color) !important;
        background-color: transparent;
    }

html .form-check .form-check-input {
    margin-left: -24px;
}

html .form-check {
    min-height: 18px;
    padding-left: 25px;
    margin-bottom: 15px;
}

.form-field.form-check-field {
    display: flex;
    flex-direction: column;
}

    .form-field.form-check-field .form-check:last-child {
        margin-bottom: 0;
    }

    .form-field.form-check-field ul.parsley-errors-list {
        order: 1;
    }

html .form-check label {
    margin-bottom: 0;
}

html .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary) !important;
}

html .form-switch .form-check-input {
    width: 36px;
    height: 20px;
    margin-right: 10px;
}

html .form-control.shadow-sm {
    box-shadow: 0 1px 3px rgb(0 0 0 / 7%) !important;
    border: 0;
}
/* floting-lablel */
.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(.85) translateY(-24px) translateX(0);
}

.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 10px;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext {
    padding-left: 15px;
    padding-right: 15px;
}

.form-floating > label {
    left: 6px;
}

.form-field-light > .form-control-plaintext ~ label::after,
.form-field-light > .form-control:focus ~ label::after,
.form-field-light > .form-control:not(:placeholder-shown) ~ label::after,
.form-field-light > .form-select ~ label::after {
    height: 10px;
}

.form-range:disabled {
    opacity: 0.5;
}

.input-group-lg input.form-control {
    height: 44px;
    font-size: 14px;
}

.form-control.is-invalid {
    color: var(--bs-form-invalid-color);
}

.form-control.is-valid {
    color: var(--bs-form-valid-color);
}

.input-group-sm input.form-control {
    height: 30px;
}

.input-group-append, .input-group-prepend {
    display: flex;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -0.0625rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .select2-container--default .select2-selection--single {
    border-radius: 0;
}

.input-group > .input-group-append > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*input[type='range'] {
    overflow: hidden;
}

    input[type='range']::-webkit-slider-thumb {
        background: var(--primary);
    }

    input[type="range"]::-webkit-slider-runnable-track {
        background: #ccc;
    }*/

li.parsley-required, ul.parsley-errors-list.filled li {
    color: red;
    font-size: 14px;
    margin-top: 4px;
    font-weight: 400;
}

html .form-control.parsley-error, html .form-select.parsley-error {
    border-color: #ff000057;
}

.form-field.select-field {
    display: flex;
    flex-direction: column;
}

    .form-field.select-field ul.parsley-errors-list.filled {
        order: 1;
    }

html .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgb(245 247 250);
}

.table-sm > :not(caption) > * > * {
    padding: .25rem .25rem;
    font-size: 14px;
}

html .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: rgb(245 247 250);
}

html table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    box-shadow: inset 0 0 0 9999px var(--light);
}

html div.dt-container div.dt-paging ul.pagination {
    gap: 8px;
}
/* time-picker */
.bootstrap-timepicker-widget.dropdown-menu {
    padding: .46875rem !important;
    border-radius: 6px !important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.bootstrap-timepicker-widget table tbody tr td .bootstrap-timepicker-hour, .bootstrap-timepicker-widget table tbody tr td .bootstrap-timepicker-meridian, .bootstrap-timepicker-widget table tbody tr td .bootstrap-timepicker-minute {
    width: 40px;
    height: calc(1.5em + .875rem + 2px);
    border: 1px solid #ced4da;
    padding: 6px;
    background: 0 0;
    color: #000;
    box-shadow: none;
    transition: all .2s linear;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.bootstrap-timepicker-widget table tbody tr td .glyphicon {
    font-family: Font Awesome\ 6 Free,Font Awesome\ 6 Pro,FontAwesome !important;
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-size: 12px;
}

.bootstrap-timepicker-widget table tbody tr td a:focus, .bootstrap-timepicker-widget table tbody tr td a:hover {
    background: var(--bs-component-dropdown-hover-bg);
    color: var(--bs-component-hover-color);
}

.bootstrap-timepicker-widget table td a:hover {
    text-decoration: none;
    background-color: #eee;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-color: #ddd;
}

.bootstrap-timepicker-widget table tbody tr td a {
    border: none;
    color: #adb5bd;
    padding: .46875rem;
    text-decoration: none;
    border-radius: 4px !important;
}

.bootstrap-timepicker-widget table tbody tr td .glyphicon.glyphicon-chevron-down:before {
    content: "\f078";
}

.bootstrap-timepicker-widget table tbody tr td .glyphicon.glyphicon-chevron-up:before {
    content: "\f077";
}

/* tagit */
.bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white;
    background: var(--primary);
    padding: 2px 7px;
    border-radius: 5px;
}

.form-field.tag-input .bootstrap-tagsinput {
    width: 100%;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 7px 7px;
    min-height: 38px;
    font-size: var(--field-font-size);
    box-shadow: 0 0 0 transparent !important;
    color: var(--dark);
    transition: all 0.2s;
    font-family: inherit;
    font-weight: normal;
    font-size: 12px;
}

.form-field.white-thems .bootstrap-tagsinput .tag {
    background: white;
    color: #000;
    border: 1px solid #ccc;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: '⛌' !important;
    font-weight: 700;
    font-size: 10px;
}

/* range-slider */
.irs.irs--big {
    height: 40px;
}

    .irs.irs--big .irs-bar {
        height: 4px;
        top: 30px;
        background: var(--primary);
        box-shadow: none;
    }

    .irs.irs--big .irs-handle {
        top: 21px;
        width: 20px;
        height: 20px;
        background: #fff;
        border: none;
        box-shadow: 0 2px 5px rgba(32,37,42,.2);
    }

        .irs.irs--big .irs-handle.state_hover, .irs.irs--big .irs-handle:focus, .irs.irs--big .irs-handle:hover {
            background: #fff;
            box-shadow: 0 2px 5px rgba(32,37,42,.4);
        }

.irs .irs .irs-line {
    height: 4px;
    top: 30px;
    background: #ced4da;
    border: none;
}

.irs.irs--flat .irs-handle > i:first-child {
    background: var(--primary);
    width: 4px;
    margin-left: -2px;
}

.irs.irs--flat .irs-handle.state_hover > i:first-child, .irs.irs--flat .irs-handle:focus > i:first-child, .irs.irs--flat .irs-handle:hover > i:first-child {
    background: #276baa;
}

.irs.irs--flat .irs-bar {
    height: 4px;
    top: 30px;
    background: var(--primary);
}

.irs .irs .irs-from, .irs .irs .irs-single, .irs .irs .irs-to {
    background: #2d353c;
    font-size: .6875rem;
    font-weight: 600;
}

    .irs .irs .irs-from:before, .irs .irs .irs-single:before, .irs .irs .irs-to:before {
        border-top-color: #2d353c;
    }






.table-sm > :not(caption) > * > * {
    padding: .25rem .25rem;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

html table .form-check {
    margin-bottom: 0;
}

ul.pagination li.dt-paging-button a.page-link {
    width: 36px;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--primary-light);
    color: var(--dark);
    border-radius: 6px;
    background: var(--white);
    box-shadow: 0 0 0 transparent !important;
}

    ul.pagination li.dt-paging-button a.page-link:hover,
    ul.pagination li.dt-paging-button.active a.page-link {
        background: var(--primary);
        color: #FFF;
    }

ul.pagination li.dt-paging-button.disabled a.page-link {
    background: transparent;
    opacity: 0.5;
}

.dt-container .dt-length {
    display: flex;
    align-items: center;
}

html .dt-container .select2 {
    min-width: 100px;
    margin-right: 10px;
}



.fs-8 {
    font-size: 8px !important;
}

.fs-9 {
    font-size: 9px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-17 {
    font-size: 17px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-19 {
    font-size: 19px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 22px !important;
}


.h-30px {
    height: 30px;
}

.fw-100 {
    font-weight: 100 !important
}

.fw-200 {
    font-weight: 200 !important
}

.fw-300 {
    font-weight: 300 !important
}

.fw-400 {
    font-weight: 400 !important
}

.fw-500 {
    font-weight: 500 !important
}

.fw-600 {
    font-weight: 600 !important
}

.fw-700 {
    font-weight: 700 !important
}

.fw-800 {
    font-weight: 800 !important
}

.blockquote {
    color: var(--secondary);
    border-left: .1875rem solid var(--secondary);
    padding-left: .75rem;
    margin-bottom: 0;
}

footer.blockquote-footer {
    font-size: 12px !important;
    margin-top: -12px;
}

figcaption.blockquote-footer {
    margin-top: 0;
}
/* tabs */
ul.nav.nav-tabs {
    border: 0;
}

.nav-tabs .nav-link {
    color: var(--secondary);
    padding: 10px 20px;
    font-size: 13px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: var(--dark);
        font-weight: 500;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: var(--dark);
        font-weight: 500;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

.tab-content.panel {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #DFEBF0;
    padding: 17px;
}

.card {
    box-shadow: 0 .375rem .75rem rgba(140,152,164,.075);
    border-color: rgba(231, 234, 243, 0.7);
    border-radius: 0.75rem;
}

.card-body {
    padding: 20px;
}

.card-subtitle {
    display: block;
    text-transform: uppercase;
    color: #8c98a4;
    font-size: 11px;
    margin-bottom: 4px;
}

.card-text {
    color: var(--secondary);
}

.card-link {
    font-weight: 600;
    white-space: nowrap;
}

.card-header, .card-footer {
    padding: 15px 16px;
    --bs-card-cap-bg: var(--light);
    --bs-card-border-color: var(--border-color);
}

.card-img-overlay {
    background: rgb(32 37 42 / 50%) !important;
    color: #fff;
}

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

.card-transition {
    transition: all .2s ease-in-out;
}

    .card-transition:focus, .card-transition:hover {
        -webkit-transform: translateY(-2px) !important;
        transform: translateY(-2px) !important;
    }

/* car-table */
.avatar {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 100%;
}

.avatar-circle .avatar, .avatar-circle .avatar-img, .avatar-circle .avatar-initials {
    border-radius: 50%;
}

.card table tr th {
    font-weight: 500;
}

.legend-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #bdc5d1;
    border-radius: 50%;
    margin-right: 7px;
}

.avatar:not(img) {
    background-color: #fff;
}

.avatar-soft-primary .avatar-initials {
    color: #377dff;
    background-color: rgba(55,125,255,.1);
}

.avatar-initials {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 2.625rem;
    height: 2.625rem;
    font-size: .875rem;
    font-weight: 600;
    pointer-events: none;
    text-transform: uppercase;
    border-radius: .5rem;
}

.card table.table tr td, .card table.table tr th {
    padding: 8px 10px;
    vertical-align: middle;
}

.card table.table tr th {
    vertical-align: bottom;
}

.card table.table tr td {
    white-space: nowrap;
}






h3, .h3 {
    font-size: 28px;
}

h3, .h3 {
    font-size: 26px;
}

h4, .h4 {
    font-size: 22px;
}

h5, .h5 {
    font-size: 18px;
}

h6, .h6 {
    font-size: 14px;
}







/* panel */
.panel .panel-heading {
    padding: 12px 15px;
    border: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--primary-light);
}

    .panel .panel-heading .panel-title {
        margin: 0;
        line-height: 1.35;
        flex: 1;
    }

    .panel .panel-heading .panel-heading-btn {
        display: flex;
        align-items: center;
        gap: 4px;
    }

.panel .panel-body {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
}

.panel.panel-inverse > .panel-heading {
    background: var(--bs-gray-900);
    color: var(--bs-white);
}

.panel.panel-inverse > .panel-heading {
    background: #f2f3f4;
    color: var(--dark);
}

    .panel.panel-inverse > .panel-heading ul.nav.nav-tabs {
        margin-bottom: -12px;
    }




/* modal */
.info-modal .modal-dialog {
    max-width: 350px;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}

.info-modal .modal-content {
    border-radius: 20px;
    border: 0;
    text-align: center;
}

.info-modal .modal-header {
    position: relative;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    z-index: 1;
    border: 0;
    margin: 0 0 10px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .info-modal .modal-header:before {
        content: "";
        display: block;
        position: absolute;
        left: -300px;
        right: -300px;
        bottom: 0;
        width: 500px;
        height: 500px;
        background: var(--primary);
        z-index: -1;
        border-radius: 50%;
        margin: 0 auto;
        opacity: 0.1;
    }

.info-modal.info-modal-danger .modal-header:before {
    background: var(--danger);
}

.info-modal.info-modal-warning .modal-header:before {
    background: var(--warning);
}

.info-modal.info-modal-success .modal-header:before {
    background: var(--success);
}

.info-modal.info-modal-primary .modal-header:before {
    background: var(--primary);
}

.info-modal .modal-header .icon {
    width: 102px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='102' height='78' viewBox='0 0 102 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM11 9.5C11 12.1232 12.5539 14.3834 14.7914 15.4105C13.653 17.3427 13 19.5951 13 22C13 25.6174 14.4775 28.8896 16.8618 31.2463C16.2978 33.7403 16 36.3354 16 39C16 58.33 31.67 74 51 74C58.9957 74 66.3652 71.3189 72.2584 66.8066C73.6694 67.5679 75.2843 68 77 68C82.5229 68 87 63.5228 87 58C87 55.1803 85.833 52.6331 83.9555 50.8152C85.279 47.1243 86 43.1463 86 39C86 19.67 70.33 4 51 4C43.6716 4 36.8692 6.25232 31.2473 10.1025C29.6425 9.39366 27.8672 9 26 9C25.3167 9 24.6458 9.05272 23.991 9.1543C23.8113 5.72516 20.9739 3 17.5 3C13.9101 3 11 5.91015 11 9.5ZM94 13C94 16.3137 91.3137 19 88 19C84.6863 19 82 16.3137 82 13C82 9.68629 84.6863 7 88 7C91.3137 7 94 9.68629 94 13ZM16 61C16 62.6569 14.6569 64 13 64C11.3431 64 10 62.6569 10 61C10 59.3431 11.3431 58 13 58C14.6569 58 16 59.3431 16 61ZM87 78C89.7614 78 92 75.7614 92 73C92 70.2386 89.7614 68 87 68C84.2386 68 82 70.2386 82 73C82 75.7614 84.2386 78 87 78ZM102 65.5C102 67.433 100.433 69 98.5 69C96.567 69 95 67.433 95 65.5C95 63.567 96.567 62 98.5 62C100.433 62 102 63.567 102 65.5Z' fill='%231E40AF'/%3E%3Ccircle cx='51' cy='39' r='33.5' stroke='%23363636' stroke-opacity='0.15' stroke-width='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.info-modal.info-modal-danger .modal-header .icon {
    background-image: url("data:image/svg+xml,%3Csvg width='102' height='78' viewBox='0 0 102 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM11 9.5C11 12.1232 12.5539 14.3834 14.7914 15.4105C13.653 17.3427 13 19.5951 13 22C13 25.6174 14.4775 28.8896 16.8618 31.2463C16.2978 33.7403 16 36.3354 16 39C16 58.33 31.67 74 51 74C58.9957 74 66.3652 71.3189 72.2584 66.8066C73.6694 67.5679 75.2843 68 77 68C82.5229 68 87 63.5228 87 58C87 55.1803 85.833 52.6331 83.9555 50.8152C85.279 47.1243 86 43.1463 86 39C86 19.67 70.33 4 51 4C43.6716 4 36.8692 6.25232 31.2473 10.1025C29.6425 9.39366 27.8672 9 26 9C25.3167 9 24.6458 9.05272 23.991 9.1543C23.8113 5.72516 20.9739 3 17.5 3C13.9101 3 11 5.91015 11 9.5ZM94 13C94 16.3137 91.3137 19 88 19C84.6863 19 82 16.3137 82 13C82 9.68629 84.6863 7 88 7C91.3137 7 94 9.68629 94 13ZM16 61C16 62.6569 14.6569 64 13 64C11.3431 64 10 62.6569 10 61C10 59.3431 11.3431 58 13 58C14.6569 58 16 59.3431 16 61ZM87 78C89.7614 78 92 75.7614 92 73C92 70.2386 89.7614 68 87 68C84.2386 68 82 70.2386 82 73C82 75.7614 84.2386 78 87 78ZM102 65.5C102 67.433 100.433 69 98.5 69C96.567 69 95 67.433 95 65.5C95 63.567 96.567 62 98.5 62C100.433 62 102 63.567 102 65.5Z' fill='%23D9214E'/%3E%3Ccircle cx='51' cy='39' r='33.5' stroke='%23363636' stroke-opacity='0.15' stroke-width='3'/%3E%3C/svg%3E");
}

.info-modal.info-modal-warning .modal-header .icon {
    background-image: url("data:image/svg+xml,%3Csvg width='102' height='78' viewBox='0 0 102 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM11 9.5C11 12.1232 12.5539 14.3834 14.7914 15.4105C13.653 17.3427 13 19.5951 13 22C13 25.6174 14.4775 28.8896 16.8618 31.2463C16.2978 33.7403 16 36.3354 16 39C16 58.33 31.67 74 51 74C58.9957 74 66.3652 71.3189 72.2584 66.8066C73.6694 67.5679 75.2843 68 77 68C82.5229 68 87 63.5228 87 58C87 55.1803 85.833 52.6331 83.9555 50.8152C85.279 47.1243 86 43.1463 86 39C86 19.67 70.33 4 51 4C43.6716 4 36.8692 6.25232 31.2473 10.1025C29.6425 9.39366 27.8672 9 26 9C25.3167 9 24.6458 9.05272 23.991 9.1543C23.8113 5.72516 20.9739 3 17.5 3C13.9101 3 11 5.91015 11 9.5ZM94 13C94 16.3137 91.3137 19 88 19C84.6863 19 82 16.3137 82 13C82 9.68629 84.6863 7 88 7C91.3137 7 94 9.68629 94 13ZM16 61C16 62.6569 14.6569 64 13 64C11.3431 64 10 62.6569 10 61C10 59.3431 11.3431 58 13 58C14.6569 58 16 59.3431 16 61ZM87 78C89.7614 78 92 75.7614 92 73C92 70.2386 89.7614 68 87 68C84.2386 68 82 70.2386 82 73C82 75.7614 84.2386 78 87 78ZM102 65.5C102 67.433 100.433 69 98.5 69C96.567 69 95 67.433 95 65.5C95 63.567 96.567 62 98.5 62C100.433 62 102 63.567 102 65.5Z' fill='%23FFC700'/%3E%3Ccircle cx='51' cy='39' r='33.5' stroke='%23363636' stroke-opacity='0.15' stroke-width='3'/%3E%3C/svg%3E");
}

.info-modal.info-modal-success .modal-header .icon {
    background-image: url('data:image/svg+xml,<svg width="102" height="78" viewBox="0 0 102 78" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="88" cy="13" r="6" fill="%2332B86F"/><circle cx="77" cy="58" r="10" fill="%2332B86F"/><circle cx="26" cy="22" r="13" fill="%2332B86F"/><circle cx="17.5" cy="9.5" r="6.5" fill="%2332B86F"/><circle cx="4" cy="4" r="4" fill="%2332B86F"/><circle cx="13" cy="61" r="3" fill="%2332B86F"/><circle cx="87" cy="73" r="5" fill="%2332B86F"/><circle cx="98.5" cy="65.5" r="3.5" fill="%2332B86F"/><circle cx="51" cy="39" r="35" fill="%2332B86F"/><circle cx="51" cy="39" r="33.5" stroke="black" stroke-opacity="0.15" stroke-width="3"/></svg>');
}

.info-modal.info-modal-primary .modal-header .icon {
    background-image: url('data:image/svg+xml,<svg width="102" height="78" viewBox="0 0 102 78" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM11 9.5C11 12.1232 12.5539 14.3834 14.7914 15.4105C13.653 17.3427 13 19.5951 13 22C13 25.6174 14.4775 28.8896 16.8618 31.2463C16.2978 33.7403 16 36.3354 16 39C16 58.33 31.67 74 51 74C58.9957 74 66.3652 71.3189 72.2584 66.8066C73.6694 67.5679 75.2843 68 77 68C82.5229 68 87 63.5228 87 58C87 55.1803 85.833 52.6331 83.9555 50.8152C85.279 47.1243 86 43.1463 86 39C86 19.67 70.33 4 51 4C43.6716 4 36.8692 6.25232 31.2473 10.1025C29.6425 9.39366 27.8672 9 26 9C25.3167 9 24.6458 9.05272 23.991 9.1543C23.8113 5.72516 20.9739 3 17.5 3C13.9101 3 11 5.91015 11 9.5ZM94 13C94 16.3137 91.3137 19 88 19C84.6863 19 82 16.3137 82 13C82 9.68629 84.6863 7 88 7C91.3137 7 94 9.68629 94 13ZM16 61C16 62.6569 14.6569 64 13 64C11.3431 64 10 62.6569 10 61C10 59.3431 11.3431 58 13 58C14.6569 58 16 59.3431 16 61ZM87 78C89.7614 78 92 75.7614 92 73C92 70.2386 89.7614 68 87 68C84.2386 68 82 70.2386 82 73C82 75.7614 84.2386 78 87 78ZM102 65.5C102 67.433 100.433 69 98.5 69C96.567 69 95 67.433 95 65.5C95 63.567 96.567 62 98.5 62C100.433 62 102 63.567 102 65.5Z" fill="%230084B3"/><circle cx="51" cy="39" r="33.5" stroke="%23363636" stroke-opacity="0.15" stroke-width="3"/></svg>');
}

.info-modal .modal-body h3 {
    color: var(--dark);
    font-size: 22px;
    margin: 0 0 14px;
}

.info-modal .modal-body h4 {
    font-size: 18px;
    margin: 0;
    font-weight: 500;
    line-height: 150%;
}

.info-modal .modal-footer {
    padding: 0 20px 35px;
    justify-content: center;
    border: 0;
}


.toast-wrap {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
    width: 420px;
    max-width: 100%;
}

    .toast-wrap .toast {
        margin: 8px;
        background: #FFFFFF;
        border: 1px solid #EBEEF2;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
        border-radius: 8px;
        padding: 12px;
        font-size: 13px;
        font-weight: normal;
        position: relative;
        overflow: hidden;
        width: auto;
    }

.toast-progress {
    background: var(--primary);
    height: 3px;
    position: absolute;
    left: 0;
    bottom: 0;
    animation-name: progressline;
    animation-duration: 2s;
}

@keyframes progressline {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

html .bg-primary {
    background-color: var(--primary) !important;
}

html .bg-danger {
    background-color: var(--danger) !important;
}

html .bg-warning {
    background-color: var(--warning) !important;
}

html .bg-success {
    background-color: var(--success) !important;
}

.toast-wrap .icon {
    border-right: 1px solid #EBEEF2;
    padding: 12px 15px 12px 5px;
    margin-right: 20px;
}

.toast-wrap .btn-close {
    position: absolute;
    right: 0;
    top: 0;
    margin: 10px;
    transition: all 0.4s;
    transform: scale(0.9);
}

.toast-wrap h3 {
    color: var(--dark);
    font-size: 16px;
    margin: 0 0 5px;
}

@media(max-width: 768px) {
    html .product-add-page .card th, html .product-add-page .card td {
        font-size: 13px;
    }
}


html .card {
    background: var(--white);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 10px;
    padding: 15px;
    margin: 0 0 12px;
}

.card .h2 {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
    margin: 0 0 12px;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-muted {
    color: var(--muted) !important;
}

.of-cover {
    object-fit: cover;
}
/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #F5F7FA;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #D4DBE6;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #bac0ca;
    }

html .badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 6px
}

.badge:empty {
    display: none
}

.badge-success {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.badge-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #DC3545;
}

.badge-warning {
    background: rgba(255, 122, 0, 0.1);
    color: #FF7A00;
}

html .dropdown-menu {
    --bs-dropdown-border-color: #ededed;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.1);
    border-radius: 8px;
    --bs-dropdown-item-padding-y: 8px;
    --bs-dropdown-link-active-bg: var(--primary);
    --bs-dropdown-link-hover-bg: var(--light);
    border: 0;
}

b, strong {
    font-weight: 600;
}

.number-box {
    padding: 0 0 0 12px;
    border-left: 1px solid var(--muted);
}

    .number-box p {
        color: var(--muted);
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

html .irs--flat .irs-min,
html .irs--flat .irs-max {
    color: #fff;
    background-color: #00000042;
}

html .apexcharts-legend {
    padding: 0;
}

html .SumoSelect {
    width: 100%;
    display: block;
}

    html .SumoSelect > .CaptionCont {
        background-color: var(--white);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        /*padding: 0 30px 0 14px;
        height: 38px;*/
        /*font-size: var(--field-font-size);*/
        box-shadow: 0 0 0 transparent !important;
        color: var(--dark);
        transition: all 0.2s;
        font-family: inherit;
        font-weight: normal;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

        html .SumoSelect > .CaptionCont span {
            padding: 0;
        }

        html .SumoSelect > .CaptionCont > label {
            margin: 0;
            cursor: pointer;
            transition: all 0.4s;
        }

    html .SumoSelect.open > .CaptionCont > label {
        transform: rotate(180deg);
    }

    html .SumoSelect > .CaptionCont > label > i {
        background-image: url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.25 0.75L4.75 4.25L1.25 0.75" stroke="black" stroke-width="1.5"/></svg>');
    }

.dark-active .SumoSelect > .CaptionCont > label > i {
    background-image: url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.25 0.75L4.75 4.25L1.25 0.75" stroke="white" stroke-width="1.5"/></svg>');
}

html .SumoSelect.open > .CaptionCont,
html .SumoSelect:focus > .CaptionCont,
html .SumoSelect:hover > .CaptionCont {
    border-color: rgba(0, 0, 0, 0.1);
}

html .SumoSelect > .cselect.cselect-solid + .CaptionCont {
    background-color: var(--field-bg);
    border-color: var(--field-border-focus);
}

html .SumoSelect > .cselect-sm + .CaptionCont {
    height: 30px;
    border-radius: 6px;
    padding-right: 25px;
}

html .SumoSelect.open > .optWrapper {
    top: 38px;
}

html .SumoSelect.open > .cselect-sm + .optWrapper {
    top: 30px;
}

html .SumoSelect > .optWrapper {
    border-radius: 6px;
    box-shadow: 4px 5px 4px 0 rgba(0,0,0,0.03);
    background: var(--white);
    border-color: var(--light);
}

    html .SumoSelect > .optWrapper > .options li.opt {
        transition: all 0.4s;
        padding: 6px 12px;
        border-color: var(--light);
    }

        html .SumoSelect > .optWrapper > .options li.opt:hover {
            background-color: var(--dark);
            color: var(--white);
        }

    html .SumoSelect > .optWrapper > .options li label {
        margin: 0;
        color: inherit;
    }

html .offcanvas {
    background: var(--white);
}

html .SumoSelect > .CaptionCont > span.placeholder {
    color: var(--dark);
    font-style: normal;
    background: transparent;
}

html .SumoSelect .select-all.partial > span i,
html .SumoSelect .select-all.selected > span i,
html .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i {
    background-color: #0C2B4A;
}

html .SumoSelect .select-all > span i,
html .SumoSelect > .optWrapper.multiple > .options li.opt span i {
    background-color: #fff;
}

.filter_heading {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 17px;
    color: var(--muted);
    margin: 20px 0 12px;
    gap: 10px;
}

    .filter_heading:first-child {
        margin-top: 0;
    }

    .filter_heading:after {
        content: "";
        display: block;
        height: 1px;
        flex-grow: 1;
        background-color: var(--muted);
        opacity: 0.2;
    }

.offcanvas-footer {
    border-top: 2px solid var(--light);
}

.dark-active .form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
}

    .dark-active .form-switch .form-check-input:checked {
        background-color: var(--dark);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230D3556'/%3e%3c/svg%3e");
    }

.panel.panel-default {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.2);
}

.panel-default .card-header,
.panel-default .card-footer {
    background: var(--primary-light);
}

.dark-active .panel.panel-default {
    border-color: rgba(255,255,255,0.1);
    background: var(--light);
}

.panel .panel-body {
    border: 0;
}

.box-shadow-none {
    box-shadow: none !important;
}

.form-control[readonly] {
    background-color: var(--white);
    color: var(--muted);
    opacity: 1;
    cursor: not-allowed;
}
.image-map-chart {
    max-height: 397px;
    width: 100%;
}
.image-map-chart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scroll-auto {
    max-height: 493px;
    overflow-y: auto;
    overflow-x: hidden;
}
.scroll-auto::-webkit-scrollbar{
    width: 2px;
}



.location-date span.date {
    background: #00000012;
    padding: 1px 7px;
    border-radius: 50px;
}
.dark-active .location-date span.date {
    background: #ffffff12;
}
.ship_status_wrap .legend-wrp {
    position: absolute;
    right: 12px;
    top: 6px;
    z-index: 1;
    font-size: 11px;
}
.legend-lable span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.legend-lable span i {
    line-height: 8px;
    margin-top: -3px;
}
html .card .legend-wrp {
    margin-top: -10px;
    margin-right: 12px;
}
.ship_status {
    background-color: var(--white);
    margin: 0 -12px;
    position: relative;
    padding: 0 12px;
}
.ship_status > div {
    padding: 12px 0px 0;
    overflow-x: auto;
}
.ship_status:after {
    content: '';
    width: calc(100% - 24px);
    height: 1px;
    background: #29b7ef;
    position: absolute;
    top: 37.5px;
}
.ship_status_wrap {
    background: var(--white);
    margin: 0 -12px;
    position: relative;
    padding: 19px 12px 0;
}
.status {
    position: relative;
    z-index: 2;
}
.legend-lable i img {
    width: 19px;
}
.tooltip h5{
    font-size: 16px !important;
    font-family: "Nunito", sans-serif;
}
.tooltip p {
    margin-bottom: 0;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-family: "Nunito", sans-serif;
}
.tooltip{
    text-align: left;
}
.more_detail_modal .modal-dialog.modal-dialog-centered {
    max-width: 700px;
}
.card.ship-info_card {
    min-height: 335px;
}
.status .line{
    position: absolute;
    width: 100%;
    height: 1px;
    border-radius: 50px;
    top: 7px;
    left: 0;
    z-index: 1;
}
.status .line {
    background-color: var(--danger);
    height: 3px;
}
.status.laden .line{
    background-color: var(--success);
    height: 3px;
}
.status svg {
    position: relative;
    z-index: 2;
    background: var(--white);
}
.dark-active .status svg path {
    fill: #ffffff;
}
.live-location {
    position: absolute;
    top: -8px;
    width: 30px;
    z-index: 3;
    background: var(--white);
}
.dots span.report .dot{
    width: 11px;
    height: 11px;
    display: flex;
    background: #000;
    border-radius: 100%;
    margin-top: -16px;
    position: relative;
    z-index: 2;
    border: 1px solid #fff;
}
.status.ballast .dots span.report .dot {
    background-color: #ffffff;
    border-color: #e97132;
}
.dark-active .status.ballast .dots span.report .dot {
    background-color: #0d3556;
    border-color: #e97132;
}
 .status.laden .dots span.report .dot{
    background-color: var(--success);
}
.dark-active  .date svg{
    color: var(--dark);
}
.status .dots {
    display: flex;
    gap: 40px;
    padding-left: 50px;
    justify-content: space-between;
    padding-right: 30px;
}
.live-location + .dots{
    padding-right: 150px;
}
.status .line {
    width: calc(var(--left ) + 26px);
}
.status.idel .line {
    background-color: #a2a2a2;
    top: 6px;
    transition: all 1s;
    width: 0 !important;
}
.location-this.active .status.idel .line{
    width: 100% !important;
}
.location-this {
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    overflow: hidden;
    z-index: 2;
    position: relative;
}
.location-this.active {
    width: fit-content !important;
    transition: all 0.5s;
    opacity: 1;
    visibility: visible;
    overflow: unset;
    margin-right: 8px;
}
span.location-close:after {
    position: absolute;
    right: -10px;
    content: '';
    width: 10px;
    height: 9px;
    background: var(--white);
}
.location-this span.report {
    margin-top: -1px;
    transition: all 0.5s;
}
span.location-close {
    width: 15px;
    height: 15px;
    padding: 0px;
    background: var(--dark);
    color: var(--white);
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 10px;
    padding: 0 3px;
    margin-right: -11px;
    cursor: pointer;
    position: absolute;
    right: 11px;
    top: 18px;
}
.location-date:last-child span{
    position: relative;
}
.location-this.active h5.location-date {
    margin-right: -15px;
}
.location-this.active{
    padding-right: 15px;
}
.status.idel {
    margin-top: -1px;
}
span.location-close svg path {
    fill: currentColor;
}
span.location-close svg {
    color: var(--white);
}
.location-icon {
    width: fit-content;
    cursor: pointer;
}
.status.idel .dots span.report .dot{
    background: #a2a2a2;
}
.text-orange{
    color: #e97132;
}
h5.location-date {
    margin-bottom: 6px;
    white-space: nowrap;
    font-size: 13px;
}
span.report {
    position: relative;
}
.status .tooltip-box {
    position: absolute;
    padding: 13px;
    background: var(--white);
    box-shadow: 0 0 5px -1px #0000003d;
    width: 151px;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
    left: -32px;
    top: 11px;
}
.status .dots span.report:hover .tooltip-box{
    visibility: visible;
    opacity: 1;
}
.status .tooltip-box h6 {
    font-size: 18px;
}
.status .tooltip-box p {
    margin-bottom: 0px;
}
.tooltip-box:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 10px solid transparent;
    border-left: 9px solid transparent;
    border-top: 10px solid #ffffff;
    border-bottom: 0;
    position: absolute;
    top: -10px;
    transform: scaleY(-1);
    left: 28px;
    filter: drop-shadow(0px 2px 2px #0000003d);
    z-index: 0;
}
.tab-style-3 .nav-link.active {
    background: var(--dark);
    color: var(--white);
}
.tab-style-3 .nav-link {
    background: rgb(31 44 70 / 7%);
    font-weight: 600;
    font-size: 12px;
    border-radius: 8px;
    padding: 4px 7px;
    border: 0;
}
.process_bar .progress {
    height: 4px;
    background: var(--danger);
}
.progress-bar {
    background: var(--success);
}
.icon-box-main .icon-box .icon {
    width: 34px;
    height: 34px;
    background: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    margin-right: 5px;
    min-width: 34px;
    position: relative;
}
.icon-box-main .icon-box .icon span {
    position: absolute;
    bottom: 6px;
    right: 4px;
}
.icon-box-main {
    background: var(--light);
    border-radius: 10px;
}
.icon-box-main .icon-box {
    padding: 6px 10px;
}
.icon-box-main + .icon-box-main{
    margin-top: 5px;
}
.icon-box-main:has(.red) {
    background: linear-gradient(90deg, #FA5C7C 0%, #CF3151 100%);
}
.icon-box-main .icon-box.red svg path {
    fill: var(--danger);
}
.card .table-style-2 tr th,.card .table-style-2 tbody tr td:first-child {
    background: var(--light);
}
.card table.table.table-style-2 tr th, .card .table-style-2 tbody tr td {
    padding: 4px 10px;
}
.process_bar h6 {
    margin-bottom: 0;
}
.dark-active .tab-style-3 .nav-link.active{
    background: var(--dark);
    color: var(--white);
}
.dark-active  .tab-style-3 .nav-link{
    background-color: var(--white);
    color: var(--dark);
}
.btn.btn-light-2 {
    background: #0084b312;
    color: var(--primary);
    border: 0;
}
.btn.btn-light-2:hover{
    background-color: var(--primary);
    color: #fff;
}
.dark-active .icon-box-main .icon-box .icon {
    background: #134e7f;
}
.date svg {
    width: 16px;
}
table span.alert {
    display: inline-block;
    width: 14px;
    height: 13px;
    padding: 0;
    margin: 0 5px 0px 0;
}
@keyframes blink {
    0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
}
  .live-location img {
    animation: blink 1s infinite;
  }
/* .live-location:after {
    content: '';
    width: 1px;
    height: calc(100% + 20px);
    position: absolute;
    top: -9px;
    right: -7px;
    border-left: 1px dashed #dd0000;
} */
/*Style CSS ----> End*/


/*Data-Quality Page ---> Start*/

.card .fold-table.fold-table-mini tbody tr td:first-child:before {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}
.card .fold-table.fold-table-mini tr td {
    padding: 5px 6px;
}
.card .fold-table.fold-table-mini tr th {
    padding: 5px 6px;
}
.card .fold-table-mini table.table tr td big {
    font-size: 90%;
}
.table-responsive.fold-table.fold-table-mini thead tr:first-child th:first-child {
    min-width: 180px;
}
.fold-table-mini .table > tfoot {
    background: #E9EDF4;
    border: 0;
}
.fold-table-mini .table > tfoot td {
    border-bottom: 0;
}
.card .fold-table tr td:first-child {
    border-bottom: 0;
    box-shadow: 0 -1px 0 0 #dee2e6 inset;
    height: 32px;
}
.dark-active .card .fold-table tr td:first-child {
    box-shadow: 0 -1px 0 0 rgb(222 226 230 / 12%) inset;
}
.c-logo a {
    max-height: 50px;
    display: inline-block;
    height: 42px;
}

.c-logo img {
    width: 100%;
    height: 100%;
}

.dark-active .text-dark {
    color: #fff !important;
}

.month-structure {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    border-left: 2px solid #5F6F8D1F;
    margin-left: -8px;
}

    .month-structure .wrp {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 7px 6px;
        gap: 6px;
        position: relative;
    }

        .month-structure .wrp::after {
            content: '';
            width: 83px;
            height: 1px;
            background: #5F6F8D1F;
            position: absolute;
            top: 0px;
            right: 0;
        }

        .month-structure .wrp span + span {
            padding: 3px 5px;
            background-color: #FFC48A;
            border-radius: 3px;
            color: #000;
            font-size: 10px;
        }

        .month-structure .wrp span:last-child {
            background-color: #B4E6F8;
        }

hr {
    margin-bottom: 22px;
    margin-top: 3px;
    border: 1px solid #5F6F8D1F;
    background: transparent;
    opacity: 1;
}

.month-structure .wrp span.month {
    width: 82px;
    text-align: right;
    font-size: 10.8px;
    text-transform: capitalize;
}

.card table.table.collapse_table tr td, .card table.table.collapse_table tr th {
    padding: 3px 7px;
    font-size: 11px;
    text-align: center;
}









.apexcharts-toolbar {
    top: -20px !important;
}

.card:has(ul.nav.nav-tabs) .apexcharts-toolbar {
    top: -25px !important;
}

.card:has(.custom-legend) .apexcharts-menu-icon {
    top: -18px !important;
}

div#saleschart .apexcharts-toolbar {
    top: 4px !important;
}

.card .h2 {
    padding-right: 115px;
}

.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg,
.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg {
    fill: #6e8192 !important;
}

.apexcharts-menu-item.exportsvg {
    display: none;
}




.speedmeter {
    width: 150px;
    height: 150px;
    background-image: url(../images/engine-meter.png);
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

    .speedmeter .info h5 {
        font-size: 12px;
        color: #000;
        position: absolute;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        z-index: 6;
    }

    .speedmeter .info span {
        position: absolute;
        bottom: 0;
        font-size: 9px;
        color: #000;
        z-index: 6;
    }

        .speedmeter .info span.start {
            left: 36px;
            bottom: 28px;
            transform: rotate(310deg);
        }

        .speedmeter .info span.end {
            right: 34px;
            bottom: 24px;
            transform: rotate(45deg);
        }

.temperature-box {
    background: #EFF0F280;
    padding: 16px;
    border-radius: 10px;
    width: 100%;
}

.speedmeter-box {
    text-align: center;
    padding: 10px;
    background: #EFF0F2;
    border-radius: 10px;
}

.dark-active .speedmeter-box {
    background: #002748;
}

.dark-active .temperature-box {
    background: #002748;
}

.speedmeter-box .box-title {
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
}

img.speed-meter-needal {
    max-width: 14px;
    position: absolute;
    top: 15%;
    left: 45%;
    transform-origin: bottom center;
    transition: transform 0.5s ease-in-out;
}

.speedmeter-box .needal:after {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../images/speedmeter-needal-bottom.png);
    background-repeat: no-repeat;
    background-position: center;
    content: '';
    left: 0;
    background-size: 21px;
}

.temperature-box {
    background: #EFF0F280;
    padding: 16px;
    border-radius: 10px;
}

    .temperature-box h5 {
        font-size: 12px;
        max-width: 153px;
        margin: 0 auto 10px;
    }

.temperature-bottom {
    width: 55px;
    height: 55px;
    background-color: currentColor;
    border-radius: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border: 6px solid #fff;
    justify-content: center;
    background-image: url('data:image/svg+xml,<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.44335 14.0441C2.36874 14.0441 2.29413 14.0441 2.21951 14.0441C1.29618 13.9042 0.65265 13.0368 0.792549 12.1415C1.54801 6.88128 5.29731 2.4045 10.3617 0.72571C11.229 0.445911 12.1803 0.921565 12.4881 1.78894C12.7679 2.6843 12.2923 3.60764 11.3969 3.91542C7.56366 5.17451 4.68174 8.58805 4.12214 12.6171C3.98224 13.4565 3.28275 14.0441 2.44335 14.0441Z" fill="white" fill-opacity="0.4"/></svg>');
    background-repeat: no-repeat;
    background-position: 4px 5px;
}

    .temperature-bottom h6 {
        margin-bottom: 0;
        font-size: 13px;
    }

    .temperature-bottom svg {
        position: absolute;
        right: 0px;
        bottom: 0px;
    }

.temperature-top {
    height: 147px;
    width: 22px;
    margin: 0 auto -7px;
    background: #E3E7EE;
    position: relative;
    z-index: 4;
    border-radius: 50px 50px 0 0;
    border: 6px solid #fff;
    border-bottom: 0;
}

.dark-active .temperature-bottom, .dark-active .temperature-top {
    border-color: #16456D;
}

.temperature-top:after {
    content: '';
    max-width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: currentColor;
    height: var(--temp-height);
    z-index: 2;
    width: 100%;
}

.temperature-top:before {
    content: '';
    background-image: url('data:image/svg+xml,<svg width="3" height="136" viewBox="0 0 3 136" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2.21463C3 0.959672 2.325 0 1.5 0C0.675 0 0 0.959672 0 2.21463V134.5C0 135.328 0.671573 136 1.5 136V136C2.32843 136 3 135.328 3 134.5V2.21463Z" fill="white" fill-opacity="0.4"/></svg>');
    width: 100%;
    position: absolute;
    left: 2px;
    height: 93%;
    z-index: 3;
    background-repeat: no-repeat;
    top: 9px;
}

.temperature-no {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    gap: 8px;
    position: relative;
    margin-top: 11px;
    margin-left: 0px;
    text-align: left;
}

    .temperature-no:before {
        width: 1px;
        height: 90%;
        position: absolute;
        left: -9px;
        top: 6px;
        content: '';
        background: #21252933;
    }

    .temperature-no span {
        position: relative;
    }

        .temperature-no span:before {
            content: '';
            width: 6px;
            height: 1px;
            background: #21252933;
            position: absolute;
            left: -9px;
            top: 6px;
        }

html .card.card-light {
    background: #F7F7F8;
    box-shadow: 0px 4px 8px 0px #00000080;
}

html .dark-active .card.card-light {
    background: #002d52;
}

html .card.card-light .h2 {
    text-transform: capitalize;
    font-size: 18px;
    color: var(--dark);
    font-weight: 700;
}

.dark-active .temperature-no span:before, .dark-active .temperature-no:before {
    background: #ffffff33;
}

html .card.card-light .card {
    box-shadow: 0px 4px 15px 0px #00000026;
}

g.apexcharts-yaxis-title text, g.apexcharts-xaxis-title text {
    font-family: 'Nunito' !important;
    font-weight: 700 !important;
}

.current-status span i {
    width: 10px;
    height: 10px;
    background: currentColor;
    display: inline-block;
    border-radius: 100%;
    transform: translateY(0px);
}

.current-status .wrp span {
    background: transparent;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    border: 2px solid currentColor;
    gap: 4px;
    font-size: 11px;
    color: var(--dark);
    border-radius: 4px;
}

    .current-status .wrp span em {
        color: var(--dark);
        font-style: normal;
    }

.custom-legend.month_legend {
    gap: 4px;
    display: flex;
    margin-left: auto;
    width: fit-content;
    margin-top: 20px;
    flex-direction: column;
}

    .custom-legend.month_legend button {
        text-align: left;
    }

        .custom-legend.month_legend button:before {
            width: 10px;
            height: 10px;
            background-color: #ffc48a;
        }

        .custom-legend.month_legend button:nth-child(2):before {
            background-color: #b4e6f8;
        }

/*Data-Quality Page ---> End*/




/*List Page ---> Start*/




/*List Page ---> End*/