:root {
    --primaryColor: #292645;
    --SecondaryColor: #FFD705;
    --SecondaryColor2: #D9E1FF;
    --accordionColor: #C8E1FF;
    --magntaColor: #b200ff;
    --badge-light-magnta: #D6C2FF;
    --badge-light-danger: #FFA3A3;
    --ClickColor: #EEF6FF;
    --White: #fff;
    --DefaultColor: #f1f1f1;
    --DefaultColor2: #F8F5FF;
    --lightGray: #FCFBFB;
    --kbi1: #FF505085;
    --kbi2: #FBF7FF;
    --kbi3: #FFF8D2;
    --kbi4: #C8BFFD;
    --kbiText1: #292645;
    --blueText: #0A0067;
    --blueLightText: #0094ff;
    --blueLightBG: #F0F5FB;
    --SecondSection1: #BAE8E8;
    --SecondSection2: #F3FCFB;
    --SecondSection3: #F0F5FB;
    --CustSection: #FBF7FF;
    --bs-light-warning: #FFE86D;
    --CyanColor: #F9FFFE;
    --font-20px: 20px;
    --font-25px: 25px;
    --font-30px: 30px;
    --font-35px: 35px;
    --font-40px: 40px;
}

@font-face {
    font-family: Allura;
    src: url(../fonts/Allura-Regular.ttf);
}
/*default css*/
.text-blue {
    color: var(--blueText);
    font-weight: 600;
}

.card .card-body {
    padding: 2rem 1.25rem;
}

.justify-content-space-around {
    justify-content: space-around;
}
/*default css*/
/*.app-main {
    background: var(--White);
}*/

[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background-color: var(--primaryColor);
}

    [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-title, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.setting-links .menu-link .menu-title {
        color: var(--SecondaryColor);
    }

.menu-icon {
    height: 24px;
    width: 24px;
}

    .menu-icon img {
        height: 100%;
        width: 100%;
    }

.KBIBlock {
    background: var(--DefaultColor);
    border-radius: 10px;
    padding: 14px;
}

    .KBIBlock .KBIIcon img {
        opacity: .5;
    }

    .KBIBlock .KBIDetails h1 {
        color: var(--kbiText1);
        font-size: var(--font-15px);
        opacity: 0.5;
    }

    .KBIBlock .KBIDetails p {
        color: var(--blueText);
        font-size: var(--font-15px);
        margin: 0;
    }

.col-lg-3:nth-child(2n+1) .KBIBlock {
    background: var(--kbi1);
}

.col-lg-3:nth-child(2n+2) .KBIBlock {
    background: var(--kbi2);
}

.col-lg-3:nth-child(2n+3) .KBIBlock {
    background: var(--kbi3);
}

.col-lg-3:nth-child(2n+4) .KBIBlock {
    background: var(--kbi4);
}

/*--------------- second section-----------------*/
.secondSection .Repair .repairInProcess.card .card-header .card-title, .secondSection .Repair .repairInProcess.card .card-header .card-title .card-label {
    font-size: var(--font-15px);
}

.secondSection .Repair .repairInProcess.card {
    height: 300px;
}

.secondSection .Repair:nth-child(2n+1) .repairInProcess.card {
    background: var(--SecondSection1);
}

.secondSection .Repair:nth-child(2n+2) .repairInProcess.card {
    background: var(--SecondSection2);
}

.secondSection .Repair:nth-child(2n+3) .repairInProcess.card {
    background: var(--White);
    border: 1px solid var(--DefaultColor);
}

.secondSection .card-header {
    border-bottom: none !important;
}

.secondSection .card-title .btn {
    display: flex;
    position: relative;
    right: -30px;
}

    .secondSection .card-title .btn img {
        background: #fff;
        padding: 12px;
        border-radius: 10px;
    }

.Card3 .card-header .btn img {
    background: var(--SecondSection2);
    padding: 8px;
    border-radius: 10px;
}

.secondSection .chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.secondSection .chart-container {
    display: block;
    box-sizing: border-box;
    height: 175px;
    width: 175px;
    position: relative;
    top: 0px;
    left: 0px;
}

.secondSection .chart-legend {
    margin-left: 0px;
}

    .secondSection .chart-legend div {
        display: flex;
        align-items: center;
        font-size: 15px;
        margin-bottom: 3px;
        justify-content: space-between;
    }

    .secondSection .chart-legend .bullet {
        width: 20px;
        height: 4px;
        border-radius: 2px;
        margin-right: 10px;
    }

    .secondSection .chart-legend .text-gray-500 {
        flex-grow: 1;
        margin-right: 10px;
    }

    .secondSection .chart-legend .NumVlaues {
        color: var(--blueText);
        font-weight: bold;
    }

    .secondSection .chart-legend .textValue {
        color: var(--kbiText1);
        font-weight: bold;
    }

/*cars type*/
.CarsType {
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    white-space: nowrap;
    width: 100%;
}

    .CarsType:hover {
        overflow-x: auto;
    }

.carItem {
    flex: 0px;
    background: #fff;
    /*    height: 50px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: 10px;
}

    .carItem img {
        max-width: 100%;
        max-height: 100%;
    }

.CarMediaCard {
    padding: 10px;
    background: var(--CustSection);
}

    .CarMediaCard .customGap {
        grid-gap: 20px;
    }

    .CarMediaCard .carMedia {
        width: 120px;
        height: 80px;
    }

        .CarMediaCard .carMedia img {
            max-width: 100%;
            max-height: 100%;
        }

.Card3 .card-body:hover {
    overflow: scroll !important;
}

.cust-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: var(--DefaultColor2);
    border-radius: 10px;
}

.chartBlock {
    background: var(--CustSection);
}

/*----------------------------------------------------------------------------------------*/
/*department section*/
/*---------------------------------------------------------------------------------------*/
.nav-link {
    background: none;
    border: none;
    color: #777;
}

    .nav-link.active {
        background: var(--ClickColor) !important ;
        border: none;
        color: var(--primaryColor) !important;
    }
.notify .nav-link.active {
    background-color: transparent !important;
}
.ServiceLinks {
    box-shadow: 0px 2px 3px .7px var(--DefaultColor);
    border-radius: 10px;
    padding: 5px;
}

table span.description {
    width: 120px !important;
    display: block;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

.table-responsive {
    border: 1px solid var(--DefaultColor);
    border-radius: 10px;
    padding: 0 20px;
    margin: 35px 0 20px 0;
}

.Category div.dt-buttons {
    float: right;
    display: flex;
    column-gap: 6px;
    margin: 35px 0 20px 0;
}

    .Category div.dt-buttons .btn.btn-secondary {
        background-color: var(--DefaultColor);
    }

table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after {
    display: none !important;
}

.custom-form, .SpareParts {
    display: none;
}

.form-control.form-control-solid {
    color: var(--blueLightText);
}

.SpareAccordion {
    background: var(--DefaultColor);
    padding: 10px;
    border-radius: 10px;
}

.SpareAccordionCollaps .text-gray-400 {
    color: var(--blueLightText) !important;
}

/*---------------------custom table------------------*/
.Custom-table-main .table th {
    border-bottom: 0;
    border-left: none;
    background: var(--primaryColor);
    color: var(--White);
    padding: 18px;
    vertical-align: middle;
}

.Custom-table-main .table tr td {
    border: 1px solid #ededee;
    border-right: 0;
    border-left: 0;
    font-size: 12px;
}

    .Custom-table-main .table tr td span {
       /* display: flex;
        justify-content: center;*/
        overflow-x: hidden;
        white-space: nowrap;
        /*width: 100%;*/
    }

    .Custom-table-main .table tr td a.btn span {
        overflow-x: visible;
        white-space: normal;
        width: auto;
    }

    .Custom-table-main .table th:first-child, .Custom-table-main .table tr td:first-child { /**/
        border-radius: 8px 0px 0px 8px;
        border-left: 1px solid #ededee;
        border-right: 0;
        /*text-align: center;*/
        padding: 18px 0 18px 9px;
    }

    .Custom-table-main .table th:last-child, .Custom-table-main .table tr td:last-child { /**/

        border-radius: 0px 8px 8px 0px;
        border-right: 1px solid #ededee;
        border-left: 0;
        text-align: right !important;
        padding: 0 13px 0 0 !important;
    }

.Custom-table-main .table td {
    border-bottom: 1px solid #ededee;
    border-left: none;
    vertical-align: middle;
    background: #fff0;
}

.Custom-table-main table {
    border-collapse: separate;
    border-spacing: 0 6px;
}

.Custom-table-main .table tr:last-child td:last-child {
    border-bottom-right-radius: 0px;
}

.Custom-table-main .table tr:last-child td:first-child {
    border-bottom-left-radius: 0px;
}

.Custom-table-main .table tr:first-child td {
    border-top: 1px solid var(--DefaultColor);
}

.Custom-table-main .table tr:last-child td {
    border-bottom: 1px solid var(--DefaultColor);
}

.Custom-table-main .table {
    border: 0;
}

.dataTables_filter {
    float: left;
    display: flex;
    align-items: center;
    position: absolute;
    top: 23px;
}

.table:not(.table-bordered) > :not(:last-child) > :last-child > * {
    padding: 12px;
}

table.dataTable tfoot td, table.dataTable tfoot th, table.dataTable thead td, table.dataTable thead th,
table.dataTable tbody td, table.dataTable tbody td, table.dataTable tbody td, table.dataTable tbody td {
   /* text-align: center;*/
}

.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    border: 0;
    padding: calc(0.5rem) calc(1rem + 1px);
    height: 41px;
    line-height: 41px;
    padding: 0 20px !important;
}

#kt_subscriptions_table_filter {
    position: relative;
}

    #kt_subscriptions_table_filter input {
        padding-left: 30px;
    }

    #kt_subscriptions_table_filter::before {
        content: '\f002'; /* Font Awesome search icon code */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: relative;
        left: 73px;
        transform: translateY(0);
        color: #aaa;
    }

.dataTables_scrollHeadInner {
    width: auto !important;
}

.not-found-message span {
    color: var(--primaryColor);
}

    .not-found-message span .btn-circle {
        border-radius: 50px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        padding: 0 !important;
        text-align: center;
    }

.brandLogo {
    height: 40px;
    width: 40px;
}

.table .brandLogo {
   /* margin: auto;*/
}

.brandLogo img {
    height: 100%;
    width: 100%;
    object-fit:cover;
}

.brandLogo.uploadImg {
    height: 40px;
    width: 40px;
    margin: auto;
}
/*-----------------------------------------------------*/

/*.form-check .form-check-input:checked {
    background-color: #50cd89;
}*/

.image-input-placeholder {
    background-image: url('../media/mosaedPublicIcons/AvatarIcon.svg');
}



.TopFormProfile .image-input [data-kt-image-input-action=change] {
    left: 60%;
    top: 0;
}

.TopFormProfile .image-input.image-input-changed [data-kt-image-input-action=cancel] {
    display: flex;
    left: 60%;
    bottom: 0;
    top: auto;
}

.image-input {
    position: relative;
    display: inline-block;
    border-radius: .475rem;
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: 21px 21%;
}

.tab-content {
    margin: 20px 0;
}

    .tab-content .card {
        border: 2px solid #292645;
    }

/*-----------------------provider form---------------------*/
.label-item {
    border: 1px solid var(--blueText);
    border-radius: 50px;
}
/*------------------------------working hours-----------------------------------*/
.Wroking-card {
    padding: 32px;
    border-radius: 8px;
}

.copyLink {
    color: #292645;
}

.Wroking-card .form-select {
    background: var(--DefaultColor);
    appearance: auto;
    padding: 8px;
}
/*------------------------ car types------------*/
.carType-form .collapsible {
    border: 1px solid #444;
    padding: 0 10px;
    border-radius: 10px;
}

.carType-form .collapse.show {
    border: 1px solid #555;
    border-radius: 10px;
    padding: 10px;
    margin-top: 20px;
}

/*-----------------------------------------------------*/
/*---------------------------permissions--------------------------*/
.TopHeader {
    background: var(--primaryColor);
}

    .TopHeader h3 {
        color: #fff;
    }

.PanelHeader {
    background: var(--SecondaryColor2);
}

    .PanelHeader h3 {
        color: var(--primaryColor);
    }

.PanelCard .collapsible {
    background: var(--accordionColor);
}

.PanelCard .form-check.form-check-solid .form-check-input:not(:checked) {
    background-color: #ffffff;
    border: 2px solid;
}

.border-blue {
    color: var(--primaryColor);
}

.border-blue {
    border-color: var(--primaryColor);
}

.border-magenta, .text-magenta {
    color: var(--magntaColor);
}

.border-magenta {
    border-color: var(--magntaColor);
}

.badge-light-magnta {
    background: var(--badge-light-magnta);
}

.swal2-cancel {
    background: #ed6464;
    color: #fff;
}

    .swal2-cancel:hover {
        background: #ed6464;
        color: #fff;
    }

.menu-sub.menu-sub-dropdown {
    z-index: 107;
    position: fixed;
    inset: 0px 0px auto auto;
    margin: 0px;
    transform: translate3d(-95.2px, 104.8px, 0px);
}

/*-----------------------------provider details------------------------------*/

.TopFormProfile .ProfilePic .image-input [data-kt-image-input-action=change] {
    right: 0%;
    left: auto;
}

.TopFormProfile .ProfilePic .image-input.image-input-changed [data-kt-image-input-action=cancel] {
    right: 0%;
    left: auto;
}

.desc-info {
    width: 150px !important;
    display: block;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

.Approval-table {
    border: 1px solid var(--primaryColor);
}

.UploadImage {
    margin: auto;
    padding: 80px 0;
    background: var(--DefaultColor2);
}

.secondSection.statistic .Repair .repairInProcess.card {
    background: var(--SecondSection1);
}
.secondSection.statistic .Repair .StuckSparePartsCard.card {
    background: var(--SecondSection3) !important;
    height: 600px;
}

    .secondSection.statistic .Repair .StuckSparePartsCard.card .Category {
        background: #fff;
        margin: 20px;
        border-radius: 8px;
        padding: 20px;
    }
.TruckImg {
    height: 150px;
    width: 150px;
    line-height: 150px;
}

    .TruckImg img.img-thumbnail {
        height: 100%;
        width: 100%;
    }

.UploadFileCard {
    border-color: var(--blueLightText);
    padding: 10px;
    border-radius: 8px;
}

    .UploadFileCard .fileImg {
        height: 100px;
        width: 100px;
        line-height: 100px;
    }

        .UploadFileCard .fileImg img {
            height: 100%;
            width: 100%;
        }

/*------truck order ------*/
.ProviderDtails .TruckImg {
    height: 130px;
    width: 130px;
    line-height: 130px;
}

.CustomerCard .card, .ProviderDtails .SpareAccordion, .ProviderDtails .SpareAccordionCollaps {
    border: 1px solid var(--DefaultColor);
}

.FlagIcon {
    height: 50px;
    width: 50px;
    line-height: 50px;
    background-color: var(--DefaultColor);
    border-radius: 8px;
}

    .FlagIcon img {
        height: 100%;
        width: 100%;
        text-align: center;
        padding: 6px;
        border-radius: 0;
    }

.statistic .card {
    border: none !important;
}

.statistic div:nth-child(2n+1) .card {
    background-color: var(--lightGray);
}

.statistic div:nth-child(2n+3) .card {
    background-color: var(--SecondSection2) !important;
}

.spareStatistic div:nth-child(2n+1) .card {
    background-color: var(--lightGray);
}

.spareStatistic div:nth-child(2n+2) .card {
    background-color: var(--SecondSection2) !important;
}

.spareStatistic div:nth-child(2n+3) .card {
    background-color: var(--SecondSection1) !important;
}

.statisticAreaChart .Item .line1 {
    height: 5px;
    width: 20px;
    background: var(--bs-light-warning);
    border-radius: 8px;
}

.statisticAreaChart .Item .line2 {
    height: 5px;
    width: 20px;
    background: var(--bs-warning);
    border-radius: 8px;
}

.First-Bullet .bullet {
    border-radius: 3px;
    width: 12px;
    height: 20px;
}

.bg-pink {
    background: var(--badge-light-danger);
}

.image-input.image-input-outline .image-input-wrapper {
    background-position: 50% 50%;
    background-size: cover;
}
/*Appointment calendar*/
/* Customize the datepicker container */
.calendar {
    width: 100%;
    padding: 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 5px 15px rgb(255 255 255 / 10%);
    font-family: 'Arial', sans-serif;
}

/* jQuery UI Datepicker custom styling */
.ui-datepicker {
    background: #fff;
    box-shadow: 0 3px 10px rgb(255 255 255 / 10%);
    padding: 10px;
    border-radius: 8px;
}

.ui-datepicker-header {
    color: white;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    font-size: 18px;
    text-align: center;
}

.ui-datepicker-title {
    font-weight: bold;
}

.ui-datepicker-prev, .ui-datepicker-next {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 18px;
}

    .ui-datepicker-prev:hover, .ui-datepicker-next:hover {
        color: #f1f1f1;
    }

.ui-state-default {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    color: #333;
}

    .ui-state-default:hover {
        background-color: #f1f1f1;
    }

.ui-state-active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

.ui-state-highlight {
    background-color: #FFEB3B;
    border-radius: 6px;
}

/* Additional styling for better visual */
.calendar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

span.ui-datepicker-month, span.ui-datepicker-year {
    font-size: 15px;
}

.ui-datepicker-header {
    background-color: #ffffff;
    color: #0e0c0c;
    border-bottom: none;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    border: none;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: none;
    background: #fff;
    font-weight: normal;
    color: #454545;
    text-align: center;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #009ef7;
    background: #009ef7;
    color: #ffffff;
}

.ui-datepicker {
    width: 100%;
}

/*------------------------------------------------------------------------------------------------*/

.providerCard {
    background: var(--DefaultColor2);
}

    .providerCard .form-control.form-control-solid {
        background-color: var(--DefaultColor2);
        border-color: var(--DefaultColor2);
        border-bottom: 1px solid var(--DefaultColor);
    }

.CustomerStatistic .card {
    border: 1px solid var(--DefaultColor) !important;
}

.CustomerStatistic div:nth-child(2n+5) .card {
    background-color: var(--CyanColor);
}

.customerImg {
    height: 220px;
    width: 250px;
}

    .customerImg img {
        height: 100%;
        width: 100%;
        border-radius: 8px;
        object-fit:cover;
    }

.CustomerCard .firstColumn {
    align-items: center;
    display: flex;
    justify-content: center;
}

.detailsInfo {
    margin-top: 15px;
}

.OwnedCars .nav-tabs .nav-link {
    background: var(--lightGray);
    border: 1px solid var(--DefaultColor);
    margin: 0 5px;
}

    .OwnedCars .nav-tabs .nav-link.active {
        background: var(--White) !important;
        border: 1px solid #009ef7 !important;
        border-bottom: none !important;
    }

.ordersAccordion .SpareAccordion {
    border: 1px solid var(--primaryColor);
}

.repairOrderTable .table-responsive {
    border: none;
}

.spareStatistic div:nth-child(2n+3) .card.repairOrderTable {
    background-color: var(--blueLightBG) !important;
}

.spareStatistic div:nth-child(2n+3) .tab-content .card {
    background-color: var(--White) !important;
}

.repairOrderTable .detailsInfo {
    text-align: justify;
}

#map {
    height: 400px;
    width: 100%;
}

/*---------------------------invoice-----------------------*/
.InvoiceCard {
    position: relative;
    border: 1px solid var(--primaryColor);
    padding: 20px;
    box-shadow: none;
    border-radius: 10px;
    background-color: #fff;
}

    .InvoiceCard .card-body {
        padding: 2rem 1.25rem;
        position: relative;
        z-index: 11;
    }

    .InvoiceCard .border-shapes.position-top-left {
        top: 3%;
        right: auto;
        left: 3%;
        position: absolute;
    }

    .InvoiceCard .border-shapes {
        z-index: 0;
        background: none;
        padding: 0;
    }

        .InvoiceCard .border-shapes .border-img {
            height: 550px;
            width: auto;
        }

            .InvoiceCard .border-shapes .border-img img {
                height: 100%;
                width: 100%;
            }

        .InvoiceCard .border-shapes.position-bottom-right {
            left: 0;
            right: 3%;
            bottom: 3%;
            display: flex;
            justify-content: end;
            position: absolute;
        }

.LogoAtInvoice {
    top: 0px !important;
    right: 10%;
    display: flex;
    align-items: center;
    background-color: var(--primaryColor);
    width: 200px;
}

    .LogoAtInvoice img {
        width: 100%;
    }

.Signature p {
    font-family: Allura;
    color: var(--primaryColor);
}
.dataTables_scrollHead {
    overflow: auto !important;
    padding-left: 0 !important;
}

/*.table tr td:last-of-type {
    display: flex;
    align-items: center;
    
}*/
.table .text-end {
    text-align: justify !important;
}
.table .text-center {
    text-align: justify !important;
}
/* Hide everything except the card when printing */
@media print {
    @page {
        size: landscape; /* Set the page to landscape orientation */
    }

    body * {
        visibility: hidden; /* Hide everything on the page */
    }


    .InvoiceCard, .InvoiceCard * {
        visibility: visible; /* Show only the card */
    }

    .InvoiceCard {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .LogoAtInvoice {
        background-color: #292645 !important;
    }


    .InvoiceCard .border-shapes.position-bottom-right {
        bottom: 0%;
        display: flex;
    }
}


.tab-content .fw-semibold {
    /* display:flex;*/
    justify-content: flex-start;
    align-items: end;
    width: 65%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.modal .fw-semibold {
    width: 100% !important;
}
.pagination{
    margin-top:20px;
}

.Category table tr .tools-td {
    width: 100px; /* Adjust the width as needed */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for overflowed text */
    padding: 0; /* Remove padding */
}


    .Category table tr .tools-td
    .text-muted, .Category table tr .tools-td p.description {
        width: 180px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.image-input [data-kt-image-input-action=cancel],
.image-input [data-kt-image-input-action=remove] {
    position: absolute;
    left: 120px;
    top: 72%;
}

/*.top-50 {
    top: 57% !important;
}*/

.detailsInfo h5{
    margin:0;
}

.card.main-Card .row {
    display: flex;
    align-items: center;
}

/*Appointment calendar*/
/* Customize the datepicker container */
.calendar {
    width: 100%;
    padding: 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 5px 15px rgb(255 255 255 / 10%);
    font-family: 'Arial', sans-serif;
}

/* jQuery UI Datepicker custom styling */
.ui-datepicker {
    background: #fff;
    box-shadow: 0 3px 10px rgb(255 255 255 / 10%);
    padding: 10px;
    border-radius: 8px;
}

.ui-datepicker-header {
    color: white;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    font-size: 18px;
    text-align: center;
}

.ui-datepicker-title {
    font-weight: bold;
}

.ui-datepicker-prev, .ui-datepicker-next {
    background-color: transparent;
    border: none;
    color: white;
    font-size: 18px;
}

    .ui-datepicker-prev:hover, .ui-datepicker-next:hover {
        color: #f1f1f1;
    }

.ui-state-default {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    color: #333;
}

    .ui-state-default:hover {
        background-color: #f1f1f1;
    }

.ui-state-active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

.ui-state-highlight {
    background-color: #FFEB3B;
    border-radius: 6px;
}

/* Additional styling for better visual */
.calendar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

span.ui-datepicker-month, span.ui-datepicker-year {
    font-size: 15px;
}

.ui-datepicker-header {
    background-color: #ffffff;
    color: #0e0c0c;
    border-bottom: none;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    border: none;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: none;
    background: #fff;
    font-weight: normal;
    color: #454545;
    text-align: center;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #009ef7;
    background: #009ef7;
    color: #ffffff;
}

.ui-datepicker {
    width: 100%;
}

/*------------------------------------------------------------------------------------------------*/

.providerCard {
    background: var(--DefaultColor2);
}

    .providerCard .form-control.form-control-solid {
        background-color: var(--DefaultColor2);
        border-color: var(--DefaultColor2);
        border-bottom: 1px solid var(--DefaultColor);
    }

.CustomerStatistic .card {
    border: 1px solid var(--DefaultColor) !important;
}

.CustomerStatistic div:nth-child(2n+5) .card {
    background-color: var(--CyanColor);
}

.customerImg {
    height: 220px;
    width: 250px;
}

    .customerImg img {
        height: 100%;
        width: 100%;
        border-radius: 8px;
        object-fit: cover;
    }

.CustomerCard .firstColumn {
    align-items: center;
    display: flex;
    justify-content: center;
}

.detailsInfo {
    margin-top: 15px;
}

.OwnedCars .nav-tabs .nav-link {
    background: var(--lightGray);
    border: 1px solid var(--DefaultColor);
    margin: 0 5px;
}

    .OwnedCars .nav-tabs .nav-link.active {
        background: var(--White) !important;
        border: 1px solid #009ef7 !important;
        border-bottom: none !important;
    }

.ordersAccordion .SpareAccordion {
    border: 1px solid var(--primaryColor);
}

.repairOrderTable .table-responsive {
    border: none;
}

.spareStatistic div:nth-child(2n+3) .card.repairOrderTable {
    background-color: var(--blueLightBG) !important;
}

.spareStatistic div:nth-child(2n+3) .tab-content .card {
    background-color: var(--White) !important;
}

.repairOrderTable .detailsInfo {
    text-align: justify;
}

#map {
    height: 400px;
    width: 100%;
}

/*---------------------------invoice-----------------------*/
.InvoiceCard {
    position: relative;
    border: 1px solid var(--primaryColor);
    padding: 20px;
    box-shadow: none;
    border-radius: 10px;
    background-color: #fff;
}

    .InvoiceCard .card-body {
        padding: 2rem 1.25rem;
        position: relative;
        z-index: 11;
    }

    .InvoiceCard .border-shapes.position-top-left {
        top: 3%;
        right: auto;
        left: 3%;
        position: absolute;
    }

    .InvoiceCard .border-shapes {
        z-index: 0;
        background: none;
        padding: 0;
    }

        .InvoiceCard .border-shapes .border-img {
            height: 550px;
            width: auto;
        }

            .InvoiceCard .border-shapes .border-img img {
                height: 100%;
                width: 100%;
            }

        .InvoiceCard .border-shapes.position-bottom-right {
            left: 0;
            right: 3%;
            bottom: 3%;
            display: flex;
            justify-content: end;
            position: absolute;
        }

.LogoAtInvoice {
    top: 0px !important;
    right: 10%;
    display: flex;
    align-items: center;
    background-color: var(--primaryColor);
    width: 200px;
}

    .LogoAtInvoice img {
        width: 100%;
    }

.Signature p {
    font-family: Allura;
    color: var(--primaryColor);
}

.dataTables_scrollHead {
    overflow: auto !important;
    padding-left: 0 !important;
}

/*.table tr td:last-of-type {
    display: flex;
    align-items: center;
    
}*/
.table .text-end {
    text-align: justify !important;
}

.table .text-center {
    text-align: justify !important;
}
/* Hide everything except the card when printing */
@media print {
    @page {
        size: landscape; /* Set the page to landscape orientation */
    }

    body * {
        visibility: hidden; /* Hide everything on the page */
    }


    .InvoiceCard, .InvoiceCard * {
        visibility: visible; /* Show only the card */
    }

    .InvoiceCard {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .LogoAtInvoice {
        background-color: #292645 !important;
    }


    .InvoiceCard .border-shapes.position-bottom-right {
        bottom: 0%;
        display: flex;
    }
}


.tab-content .fw-semibold {
    /* display:flex;*/
    justify-content: flex-start;
    align-items: end;
    width: 65%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.modal .fw-semibold {
    width: 100% !important;
}

.pagination {
    margin-top: 20px;
}

.Category table tr .tools-td {
    width: 100px; /* Adjust the width as needed */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for overflowed text */
    padding: 0; /* Remove padding */
}


    .Category table tr .tools-td
    .text-muted, .Category table tr .tools-td p.description {
        width: 180px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.image-input [data-kt-image-input-action=cancel],
.image-input [data-kt-image-input-action=remove] {
    position: absolute;
    left: 120px;
    top: 72%;
}

.top-50 {
    top: 57% !important;
}

.detailsInfo h5 {
    margin: 0;
}

.card.main-Card .row {
    display: flex;
    align-items: center;
}


ul .action-btns {
    list-style: none;
    padding: 10px;
}

    ul.action-btns li {
        padding: 5px;
    }

.PartImg {
    height: 100px;
    width: 100px;
    background: #fff;
    border: 1px solid #292645;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

    .PartImg img {
        height: 100%;
        width: 100%;
    }

.ImgPreview {
    position: relative;
    margin-bottom: 10px;
}

    .ImgPreview .deleteImg {
        position: absolute;
        top: 0;
        right: auto;
    }


.ui-datepicker {
    display: block !important;
    width: 100% !important;
    border-radius: 20px !important;
    /*padding: 10px !important;*/
    border: 0 !important;
    background: #ffffff !important;
    box-shadow: 0px 2px 3px .7px #eee;
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .2em 0;
        background: transparent;
        border: none;
    }

    .ui-datepicker td {
        border: 0;
        padding: 3px !important;
    }

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary, .ui-state-default {
    height: 30px;
    width: 40px;
    margin: auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #009ef7 !important;
    background: #009ef7 !important;
    color: #ffffff !important;
}

.soon .form-check-input:checked {
    background-color: #ffc700;
}

i.spareIcon {
    left: auto;
    right: 25px;
}

.table {
    table-layout: auto; /* Fix the layout */
    width: 100%; /* Full width */
}

    .table th {
        overflow: hidden; /* Hide overflow */
        text-overflow: ellipsis; /* Add ellipsis for overflow text */
        white-space: nowrap; /* Prevent wrapping */
        padding: 8px; /* Adjust padding */
    }

.tab-content .form-control.form-control-flush {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 10px;
}

.RepairOrderMain .card {
    height: 250px;
    width: 100%;
    background: aliceblue;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    margin-top: 10%;
}

    .RepairOrderMain .card .card-img {
        height: 80px;
        width: 80px;
        margin: 5% auto;
    }

        .RepairOrderMain .card .card-img img {
            height: 100%;
            width: 100%;
        }

.SpareAccordion.active {
    border-bottom: 0;
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: 0 !important;
}

.SpareAccordionCollaps {
    border: 1px solid #292645;
    border-top: 0;
    border-radius: 0 0 10px 10px !important;
    padding:20px;
        
}

.form-control.form-control-flush.searchstuck {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 10px;
}

.timeline-label .timeline-item {
    width: 100%;
}

.timeline-item .TruckImg {
    height: 130px;
    width: 130px;
    line-height: 150px;
    margin: 10px;
}

    .timeline-item .TruckImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.timeline-label:before {
    left: 90px;
}

.timeline-label .timeline-label {
    width: 90px;
}

.timeline-item:nth-child(2n+1) .timeline-label:before {
    background: #FFD705;
    height: 100%;
    min-height: 25rem;
}

.timeline-item:nth-child(2n+2) .timeline-label:before {
    background: #34D399;
    height: 100%;
    min-height: 26rem;
}

.timeline-item:nth-child(2n+3) .timeline-label:before {
    background: #fbad32;
    height: 100%;
    min-height: 15rem;
}

.DeliveryTimeline .timeline-item:nth-child(2n+3) .timeline-label:before {
    background: #10955f;
    height: 100%;
    min-height: 25rem;
}

.timeline-item:nth-child(2n+4) .timeline-label:before {
    background: #009ef7;
    height: 100%;
    min-height: 10rem;
}

.timeline-item:nth-child(2n+5) .timeline-label:before {
    background: #b200ff;
    height: 100%;
    min-height: 10rem;
}

.timeline-item:nth-child(2n+6) .timeline-label:before {
    background: #27cc79;
    height: 100%;
    min-height: 5rem;
}

.timeline-item a.zoom {
    position: absolute;
    top: 27px;
    left: auto;
    right: 20px;
    background: #ffffff;
    height: 20px;
    width: 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.modal .img-preview {
    height: 400px;
    width: 100%;
}

    .modal .img-preview img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }


.driverTabs {
    width: 100%;
    justify-content: space-around;
    display: flex;
}

    .driverTabs .nav-link.active {
        background: transparent;
        background-color: transparent !important;
        border-bottom: 2px solid #009ef7;
        color: #009ef7 !important;
        border-radius: 0;
    }

.DriverdetailsImg {
    height: 114px;
    width: 114px;
    border-radius: 10px;
}
.licenceImg {
    height: 80px;
    width: 114px;
    border-radius: 10px;
}
.DriverImgTable {
    height: 50px;
    width: 50px;
}

    .DriverdetailsImg img, .licenceImg img, .DriverImgTable img {
        height: 100%;
        width: 100%;
        border-radius: 10px;
        object-fit: cover;
    }

.Custom-table-main .table tr td span.address {
    overflow-x: hidden;
    white-space: nowrap;
    width: 100px;
    text-overflow: ellipsis;
    display: flex;
}

.app-sidebar a img.h-75px.app-sidebar-logo-default {
    height: 75px !important;
    padding: 10px;
}

.timeline .nav-line-tabs .nav-item .nav-link.active,
.timeline .nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
.timeline .nav-line-tabs .nav-item.show .nav-link {
    background-color: transparent !important;
}

.notifyMsg {
    display: flex;
    flex-direction: column;
}

.ListsOfData  .card .card-body {
    text-align: center;
    margin-left: auto;
    margin-right: 10px;
    width: 100%;
}
.ListsOfData .card {
    border: 2px solid #f4f4f4 !important;
    /*height: 400px;*/
    overflow: hidden;
}
.ListsOfData .card:hover {
   
    overflow-y: auto;
}

.driverCards.ListsOfData .card {

    height:200px;
}
    .timeline-item.unread .timeline-icon .bg-light {
    color: #fff;
    background-color: #009ef7 !important;
}

.timeline-item.unread .timeline-icon .text-gray-500 {
    color: #fff !important;
}

.timeline-item.unread .timeline-content {
    background: #fcfcfc;
    padding: 9px;
    border-radius: 10px;
}

.timeline-item.unread .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    line-height: 26px;
    background: #009ef7;
    color: #fff;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom: 1px dashed #393945;
    background: #fff;
}
.groupOfImages {
    margin-top: 20px;
    overflow-x: auto;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    margin: 10px;
    width: 280px;

}
.groupOfImages .image-input {
    background-size: contain;
    background-position: 50%;
}

    .groupOfImages .image-input [data-kt-image-input-action=cancel], .image-input [data-kt-image-input-action=remove] {
        position: absolute;
        left: 40px;
        top: 0;
        display: block;
    }
i.ki-notification{
    position:relative;
}
span#NotifyCount {
    position: absolute;
    top: -4px;
    font-size: 9px;
    background: #f1416c;
    height: 7px;
    width: 7px;
    border-radius: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 7px;
    padding: 8px;
    left: auto;
    right: -6px;
}

.note-toolbar.card-header {
    justify-content: flex-start;
    padding-bottom: 10px;
}

/**-----------------complain---------------**/
.ComplainCard {
    background: #F9F9F9;
    padding: 20px;
    border-radius: 20px;
}

.ComplaintsDescription {
    background: #F1F1F2;
    padding: 20px;
    border-radius: 20px;
}

.ComplainReplay .ComplaintsDescription {
    background: #F3FCFB;
}

/*------------------------repair orders record----------------------------------*/

.SparePartsTable .Category {
    height: 250px;
    overflow-y: scroll;
}

.timeline-item:nth-child(2n+3) .timeline-label:before {
    min-height: 100vh;
}

.categoryCard {
    background: #EEF6FF;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}
.categoryTitle {
    border: 2px solid #2b2b40;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
}
.modal-body .searchIcon {
    top: 20px;
}
/*------------ main dash -----------------*/

.MainDash .statistics {
    height: 500px;
    width: 650px;
    margin: auto;
}
    .MainDash .statistics img {
        height: 100%;
        width: 100%;
       object-fit:contain;
    }

.DeptContent .menu.menu-sub {
    position: absolute !important;
    z-index: 11 !important;
}

.card .Describe {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.CancelOrder .modal-body {
    height: 140px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

    .CancelOrder  .modal-body i {
        font-size: 60px;
        margin-bottom: 55px;
        color: red;
    }

.CancelOrder .modal-footer {
    margin-top: 55px;
}