// ============================================================
//   GMS Mobile — scoped host CSS for the ported GMS screens
// ============================================================
//
// The ported ronya.gms.Garage.MobilePages screens (embedded on Fleet's /super-admin,
// /home and /garageprofilesetting routes) are markup lifted verbatim from
// Ronya.Gms.Component (built from b.gms.cl). Their class names come from b.gms.fe's own
// app.css / app-new.css, which Fleet never loads. Ronya.Gms.Component itself ships no
// CSS of its own — same architectural split already used for Ronya.DriverLicense.Component:
// a component library ships no CSS, the host app supplies it.
//
// Every rule below is a straight copy of the matching rule in b.gms.fe (GMS/wwwroot/css/
// app.css and app-new.css), reproduced only for class names that:
//   1) are actually referenced (via class="..."/Class="...") in the ported .razor files, and
//   2) have no equivalent already provided by Fleet's own Bootstrap 5.3.3 — i.e. the class
//      name doesn't exist in Bootstrap 5 at all (GMS component/status classes, and a couple
//      of Bootstrap-4-only names Bootstrap 5 dropped, e.g. border-left/border-right).
// Plain Bootstrap utility classes the two apps already share (row, container-lg, text-end,
// d-flex, p-3, card, btn, form-control, ...) are intentionally NOT duplicated here, even
// where GMS's own CSS happens to also redeclare them with slightly different pixel values —
// Fleet's own Bootstrap already renders those classes, so they are not "missing".
//
// Every selector is nested under .gms-mobile-scope so none of this can ever repaint Fleet's
// own desktop pages, which reuse many of these same generic-looking class names. Only the
// three GMS-mobile routes wrap their content in a ".gms-mobile-scope" container (see
// Shared/MasterLayout.razor) and only those routes load this stylesheet at all.
//
// Do not add anything here that isn't traceable back to a real rule in b.gms.fe.

.gms-mobile-scope {
    @import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

    :root {
        --text-color: #0E1010;
        --text-light-color: #74817C;
        --primary-color: var(--primary-green);
        --red-color: #E82127;
        --primary-green: #03A57F;
        --blue: #0E74D9;
        --bg-light-grey: #F6F7F7;
        --dark-grey: #454545;
    }

    html, body {
        font-family: "Open Sans", sans-serif;
        color: var(--text-color) !important;
        font-size: 12px;
    }

    p {
        font-size: 12px;
        color: var(--text-color);
    }

    hr {
        margin: 10px 0;
    }

        hr:not([size]) {
            height: 0.5px;
        }

    body {
        position: relative;
        background: #F2F5FB;
    }

    a {
        text-decoration: none;
    }

    ::placeholder {
        opacity: 50% !important;
    }

    h1, h2, h3, h4, h5 {
        color: var(--text-color);
    }

    .font-9 {
        font-size: 9px;
    }

    .font-10 {
        font-size: 10px !important;
    }

    .font-14 {
        font-size: 14px !important;
    }

    .font-16 {
        font-size: 16px;
    }

    .font-18 {
        font-size: 18px;
    }

    .font-20 {
        font-size: 20px;
    }

    .text-light-grey {
        color: var(--text-light-color);
    }

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

    .text-green {
        color: var(--primary-green);
    }

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

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

    .text-disabled {
        opacity: .6;
        pointer-events: none;
    }

    .upload-image-outer {
        width: 100%;
        height: 150px;
        border: 1px solid #ddd;
        padding: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .upload-camera-icon {
        background: var(--text-light-color);
        border-radius: 50px;
        color: white;
        padding: 3px;
        font-weight: 400;
        position: absolute;
        top: 40%;
        transform: translateY(30%);
        border: 1px white dotted;
    }

    .upload-image {
        border: 0px solid;
    }

    .input-file-custom.k-upload .k-upload-files .k-file-name {
        width: 100%;
        white-space: nowrap !important;
        height: auto;
    }

    .input-file-custom {
        border: 0;
    }

    button.bg-transparent.border-0:disabled {
        color: var(--text-light-color);
    }

    .border-radius-50 {
        border-radius: 50px;
    }

    .heading-2 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .fw-600 {
        font-weight: 600;
    }

    .btn {
        font-size: 14px;
        padding: 7px 10px;
        font-weight: 500;
        border-radius: 4px;
    }

        .btn:focus, .form-check-input:focus {
            box-shadow: none;
        }

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

    .btn-text {
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--blue);
        font-size: 12px;
    }

        .btn-text:hover {
            background: transparent !important;
        }

    .btn-green {
        background: var(--primary-green);
        color: white;
    }

        .btn-green:hover {
            background: #06A17D;
            color: white;
        }

    .btn-border {
        border: 1px solid #AEAEAE;
        color: var(--text-color);
    }

    .btn-red-border {
        border: 1px solid #dc3545;
        color: #dc3545;
    }

    .btn-small {
        font-size: 12px;
        padding: 5px 12px;
        font-weight: normal;
    }

        .btn-small:hover {
            background: var(--text-color);
        }

    .logout-btn {
        background: var(--text-color);
        color: white;
        border-radius: 4px;
        padding: 3px 5px;
        line-height: normal;
    }

        .logout-btn:hover {
            background: #222;
            color: white;
        }

        .logout-btn span {
            font-size: 9px;
            text-transform: uppercase;
        }

    .light-green-bg {
        background: #EBF7F4;
    }

    .light-green-bg-on-blue {
        background: #E6FBEF;
        border-color: #D7D7D7;
    }

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

    .alert-warning {
        background: #FBE6E6;
        border: 0px solid;
        color: var(--text-color);
        font-size: 12px;
        font-weight: 600;
        padding: 7px;
    }

    .k-dropdownlist.form-control {
        background: transparent;
    }

    #tour-section {
        display: none;
    }

    .search-bar-icons .btn {
        padding: 6px 8px;
    }

        .search-bar-icons .btn i.bx {
            font-size: 20px !important;
        }

    .tour-inspection-edit {
        color: inherit;
    }

    .btn-tour {
        border: none;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tour-btn-finish {
        background: var(--primary-color);
        color: #fff;
        padding: 6px 15px;
    }

    .tour-btn-skip:hover {
        background: transparent !important;
        color: var(--primary-color) !important;
    }

    .shepherd-text {
        font-size: 12px !important;
        color: var(--text-color) !important;
    }

    .garage-logo {
        position: relative;
        width: 42px;
        height: 42px;
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f4f4f4;
        color: var(--text-light-color);
    }

        .garage-logo img {
            border-radius: 50%;
            width: 100%;
            height: 42px;
            object-fit: contain;
        }

    .form-label, label {
        font-weight: 500;
        color: var(--text-color);
        font-size: 12px;
    }

    .page-title-block {
        border-bottom: 1px solid #ddd;
        margin-bottom: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .page-title {
        font-size: 16px;
        font-weight: bold;
        color: var(--text-color);
    }

    button i.bx {
        font-size: 28px;
    }

    .card {
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .card-header {
        background: white;
        padding: .9rem 1rem;
        border-radius: 8px 8px 0 0 !important;
    }

        .card-header p {
            margin: 0;
            align-items: center;
        }

    .small-text {
        font-size: 10px;
        color: var(--text-light-color);
        font-weight: 600;
        margin-bottom: 4px;
    }

    .ovrflowx-hidden {
        overflow-x: hidden !important;
    }

    .k-listview {
        background: transparent;
    }

    .border-left {
        border-left: 1px solid #ddd;
    }

    .form-control {
        min-height: 35px;
    }

    .form-placeholder-text {
        position: absolute;
        top: 10px;
        right: 15px;
    }

    input.k-checkbox, input[type='checkbox'] {
        border-color: #BDBDBD !important;
    }

    .bg-blue-screen {
        background: #F2F5FB;
    }

    .welcome-btm-text {
        font-size: 12px;
        line-height: normal;
        padding-top: 0;
        padding-bottom: 20px;
    }

    .ronya-cap {
        position: absolute;
        top: 0px;
        width: 170px;
        right: 0;
    }

    .ronya-car {
        margin-left: -40px;
        width: 210px;
    }

    .login-top {
        padding-top: 0px !important;
    }

    .sidebar {
        height: 100%;
        width: 0;
        position: absolute;
        top: 0;
        overflow-x: hidden;
        transition: 0.5s;
        z-index: 11111;
    }

    .inner-sidebar {
        font-size: 14px;
        height: 100vh;
        background: #0000006e;
    }

        .inner-sidebar a {
            color: inherit;
        }

    span.setting {
        font-size: 25px;
        padding-right: 10px;
        font-weight: 100;
        cursor: pointer;
        line-height: normal;
    }

    .menu-list {
        border-bottom: 1px solid #ddd;
        padding-top: 10px;
        padding-bottom: 0px;
    }

        .menu-list li a {
            padding: 12px 0;
            color: var(--text-color) !important;
            display: inline-flex;
            align-items: center;
        }

        .menu-list .nav-item a {
            padding-left: 1.5rem;
            border-radius: 0 50px 50px 0;
            transition: 0.3s linear;
            width: 100%;
        }

            .menu-list .nav-item a:hover, .menu-list .nav-item a.active {
                background: #EBF7F4;
                font-weight: 500;
            }

    .inner-sidebar .bx {
        padding-right: 5px;
    }

    #page-cover {
        width: inherit;
        height: inherit;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1;
        pointer-events: none;
        display: none;
        transition: .3s ease-in;
    }

    .tab-button .tab-butn {
        border-radius: 0px;
        color: var(--text-light-color);
    }

        .tab-button .tab-butn:focus {
            box-shadow: none;
        }

    .tab-button .active {
        border-bottom: 2px solid var(--primary-green);
        color: var(--text-color);
    }

    .filter-btn .btn {
        font-size: 12px;
        padding: 3px 10px;
        border-radius: 10px;
    }

    .filter-btn .btn-filter-default {
        color: var(--text-light-color);
        border: 1px solid var(--text-light-color);
        background: white;
    }

    .filter-btn button.btn.btn-active {
        border: 1px solid var(--primary-green);
        background: #E2FAEA;
        color: var(--primary-green);
    }

    .filter-search .filter-link {
        font-size: 12px;
        align-self: center;
        font-weight: 400;
        position: relative;
        display: flex;
    }

    .filter-search .btn {
        font-size: 12px;
    }

    .background {
        border-radius: 4px;
        border: 1px solid #ECECEC;
    }

    .filter-pop {
        position: absolute;
        z-index: 999;
        width: 94%;
        padding: 20px 15px;
    }


    .ant-image-img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
        object-fit: contain;
    }

    .ant-image {
        height: 100% !important;
        display: flex;
        align-items: center;
        padding: 0px;
    }

    section.menu-top {
        background: #fff;
        border-bottom: 2px solid #F2F5FB;
        padding: 8px 0 !important;
    }

    .booking-status-draft {
        background: #D9D5D2;
        padding: 1px 10px;
        width: auto;
        text-align: center;
        border-radius: 20px;
        font-weight: 600;
        color: var(--text-color);
        font-size: 10px;
    }

    .booking-status-inprogress {
        background: #E2F0FA;
        color: #3C86E5;
        padding: 2px 7px;
        width: auto;
        text-align: center;
        border-radius: 20px;
        font-weight: 600;
        font-size: 10px;
    }

    span.booking-status-inprogress.garage-profile {
        border: 1px solid #c0dbfd;
        line-height: normal;
    }

    .booking-status-recieved {
        background: #FAECE2;
        color: #DE7C04;
        padding: 2px 7px;
        width: auto;
        text-align: center;
        border-radius: 20px;
        font-weight: 600;
        font-size: 10px;
    }

    .booking-status-deli {
        background: #E6FAE2;
        color: #22B08F;
        border-radius: 20px;
        padding: 2px 7px;
        line-height: normal;
        font-weight: 600;
        font-size: 10px;
        border: 1px solid #b3ebc6;
    }

    .booking-status-rejected {
        background: #FAE2E2;
        color: #FF5E5E;
        padding: 1px 10px;
        width: auto;
        text-align: center;
        border-radius: 20px;
        font-weight: 600;
        font-size: 10px;
        border: 1px solid #facccc;
    }

    .booking-num {
        font-size: 12px;
        color: var(--primary-green);
        margin: 0 0 0 8px;
        font-weight: bold;
    }

    .license-plate-link {
        color: var(--primary-green);
    }

    .booking-detail-card .card-header {
        padding: .5rem 1rem;
    }

    .booking-detail-card .accordion-item {
        border: 0px;
    }

    .booking-detail-card .accordion-button {
        box-shadow: none;
        padding: 0px;
        background-color: #E0FFF2;
    }

        .booking-detail-card .accordion-button::after {
            background-size: 1.15rem;
            background-position: center;
            filter: hue-rotate(360deg) !important;
            width: 1.5rem;
            height: 1.5rem;
            background-color: #E0FFF2;
            border-radius: 50%;
            border: 1px solid var(--primary-color);
            margin: auto;
        }

    .service-link {
        color: var(--blue);
        font-weight: 600;
        font-size: 12px;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

        .service-link.no-link {
            color: var(--text-color);
        }

    .service-item {
        border-top: 1px solid #ddd;
        padding: 8px 3px;
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .accordion-item .service-item:last-child {
        border-bottom: 0px;
    }

    .container-fluid {
        padding: 0 20px;
    }

    .complete-link {
        background: #F6F7F7;
        font-size: 14px;
        font-weight: 600;
        color: var(--primary-green);
        text-align: center;
        padding: 11px;
        margin-bottom: 10px;
    }

        .complete-link a {
            display: inline-flex;
            align-items: center;
            justify-items: center;
            color: inherit;
        }

            .complete-link a i.bx {
                margin-right: 5px;
            }

    .parts {
        border: 1px solid #DFDDDD;
        border-radius: 4px;
        padding: 5px;
        margin-bottom: 10px;
    }

        .parts p {
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0;
            margin-top: 1px;
        }

        .parts .total-p {
            font-size: 14px;
        }

    .additional {
        background: #f9f9f9;
        border-width: 1px 0;
        border-color: #efecec;
        border-style: solid;
    }



    .upload-doc {
        border: 1px dashed #8e8e8e;
        border-radius: 2px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

        .upload-doc .k-upload-button-wrap .k-button-text {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            justify-content: space-between;
        }

        .upload-doc .k-upload-files {
            border: 0;
        }

    .upload-icon .bx {
        font-size: 14px;
    }

    .upload-icon .k-file-icon-wrapper {
        display: none !important;
    }

    .upload-icon .k-upload .k-file-single > .k-file-info {
        text-align: left !important;
    }

    .upload-doc .k-upload .k-upload-button {
        background: white;
        border: 0px solid rgba(0, 0, 0, 0.2);
        border-radius: 0px;
        width: 100%;
        justify-content: flex-start;
    }

        .upload-doc .k-upload .k-upload-button:focus {
            box-shadow: none;
        }

    .upload-doc .k-upload-button-wrap .k-button-text:before {
        content: "";
        width: 22px;
        height: 23px;
        color: rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 999;
        top: 0px;
        margin: 0 10px 0 0;
    }

    .upload-doc .k-upload-empty.k-upload-async.telerik-blazor .k-upload-button-wrap .k-button-text:before {
        background: url("https://bronyadev.blob.core.windows.net/static/gms/gms-new/Image.svg");
    }

    .upload-doc .k-upload-async.telerik-blazor.k-upload-button-wrap .k-button-text:before {
        background: none;
    }

    .upload-doc .k-upload .k-dropzone {
        padding: 0 !important;
        border-color: #222 !important;
    }

    .upload-doc .k-upload-button-wrap {
        width: 100% !important;
        position: relative;
    }

    .k-button-solid-base {
        display: block;
    }

    .customer-comments {
        padding: 10px 15px;
    }

    .hu-au-list ul li label {
        display: block;
        width: 100%;
    }

        .hu-au-list ul li label div label {
            margin: 7px 0 7px 0;
        }

    .desktop-btn {
        margin: 0 0 20px 0;
    }

    .popup-btn {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        width: 100%;
        margin: 0 auto !important;
        background: #fff;
        padding: 10px;
        box-shadow: 1px 0 9px #ddd;
        width: 40%;
    }

    .step-content {
        height: calc(100vh - 12rem);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: #e2e0e0 #F2F5FB;
        scrollbar-width: thin;
    }

        .step-content .popup-btn {
            z-index: 1;
        }

    .form-control .k-input-spinner {
        display: none;
    }

    .custom-stepper {
        margin: 10px 0 0px;
        z-index: 0;
    }

    ul.k-radio-list {
        gap: 3rem !important;
    }

    .custom-radio-group.k-radio-list {
        gap: 1rem !important;
    }

    .custom-stepper li.k-step.k-step-first.k-step-current.k-step-focus {
        background: var(--primary-green);
    }

    .custom-stepper .k-step-list {
        background: white;
        border: 1px solid #ddd;
        border-radius: 50px;
        height: 9px;
    }

        .custom-stepper .k-step-list li:first-child {
            border-radius: 50px;
        }

        .custom-stepper .k-step-list li:last-child {
            border-radius: 0 50px 50px 0;
        }

    .custom-stepper li.k-step-current, .custom-stepper .k-step-done {
        background: var(--primary-green);
    }

    .custom-stepper .k-step-list li.k-step-done:first-child {
        border-radius: 50px 0 0 50px;
    }

    .custom-stepper .k-progressbar, .custom-stepper .k-step-link {
        display: none !important;
    }

    .k-switch-on .k-switch-track {
        border-color: var(--primary-green) !important;
        background-color: var(--primary-green) !important;
    }

    .k-switch-md .k-switch-track {
        height: 24px !important;
    }

    .k-switch-md .k-switch-thumb {
        height: 24px !important;
    }

    .steper-icon {
        width: 22px;
        background: linear-gradient(177deg, #E0E3EC, #EBEEF6);
        border-radius: 50px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        color: #484848;
    }

    .k-dialog.delete-pop {
        padding: 25px 0px;
        min-width: 500px;
        max-width: 100%;
        border-radius: 4px;
    }

        .k-dialog.delete-pop .k-dialog-titlebar-actions {
            display: none;
        }

        .k-dialog.delete-pop .bx-trash {
            display: block;
            font-size: 25px;
        }

        .k-dialog.delete-pop .k-dialog-buttongroup {
            border-width: 0 0 0 0 !important;
            padding-top: 15px;
        }

        .k-dialog.delete-pop .k-header {
            border: 0px solid !important;
            padding: 0px 0px !important;
        }

        .k-dialog.delete-pop .k-button-solid-base {
            background: #fff !important;
            color: var(--dark-grey) !important;
            border: 1px solid var(--dark-grey) !important;
            border-radius: 4px !important;
        }

        .k-dialog.delete-pop .k-button-solid-primary {
            background: #ea4747 !important;
            border-radius: 4px !important;
            color: white !important;
            border: 1px solid #ea4747 !important;
        }

    .delete-pop .k-button.k-button-solid {
        font-size: 12px;
        padding: 6px 25px;
        margin: 0 5px;
    }

    .k-dialog.delete-pop .k-dialog-content {
        margin: 0 0px !important;
        font-size: 12px;
        padding-top: 0;
    }

    .delete-pop .k-dialog-titlebar {
        background: white;
        color: var(--dark-grey);
        white-space: normal !important;
        border: 0px;
    }

        .delete-pop .k-dialog-titlebar label {
            font-size: 14px;
        }

    .delete-pop .k-dialog-actions {
        margin-top: 20px;
        border-top: 0px;
        justify-content: center;
    }

    .profile-detail .field .card-body {
        background: #F9F9F9;
        border: 1px solid #DFDDDD;
        border-radius: 4px;
        padding: 5px 10px;
    }

    .profile-detail .field span {
        font-size: 10px;
        font-weight: 600;
    }

    .bottom-sheet.show {
        transform: translateX(-50%) translateY(0);
    }

    .bottom-sheet .card-header {
        position: sticky;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0px 10px 11px;
        z-index: 1000 !important;
    }

    .bottom-sheet .icon-delete {
        margin-right: 10px;
    }

    .full-page-sheet {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        width: 100%;
        max-width: 600px;
        height: 100%;
        background-color: white;
        border-radius: 0px 0px 0 0;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease-in-out;
        z-index: 20;
        padding: 10px 10px 100px 10px;
        overflow-y: auto;
    }

        .full-page-sheet.show {
            transform: translateX(-50%) translateY(0);
        }

        .full-page-sheet .card-header {
            position: sticky;
            top: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

    .sticky-bottom {
        position: sticky;
        bottom: 0;
        background: white;
    }

    .login-tab .k-tabstrip-items-wrapper {
        border-bottom: 0px;
    }

    .login-tab ul.k-tabstrip-items {
        padding-left: 0 !important;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        background: #E9ECEB;
        border-radius: 50px;
        align-items: center;
        justify-content: center;
        padding: 5px;
    }

        .login-tab ul.k-tabstrip-items li {
            background: transparent !important;
            color: #222;
        }

    .login-tab ul li {
        width: 50%;
        margin-bottom: 0px !important;
        border: 0px !important;
        font-size: 14px;
    }

        .login-tab ul li.k-active {
            border-bottom: 0px !important;
        }

            .login-tab ul li.k-active span.k-link {
                z-index: 1;
                transition: 0.8s ease-in-out all;
                background: #fff;
                color: #222;
                font-weight: 700;
                border: 1px solid #ddd;
            }

    .login-tab .k-tabstrip-content, .login-tab .k-tabstrip > .k-content {
        border-color: transparent !important;
        background: transparent;
        padding-inline: 5px !important;
    }

    .login-tab .input-group-addon, .input-group-btn {
        width: 1%;
        white-space: nowrap;
        display: table-cell;
        vertical-align: middle;
    }

    .login-tab .input-group-addon {
        padding: 6px 19px 6px 7px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        color: var(--primary-green);
        text-align: center;
        border: 1px solid #ccc;
        border-right: 0px;
        border-radius: 4px 0 0 4px !important;
    }

        .login-tab .input-group-addon i {
            font-size: 16px;
        }

    .login-tab ul li span.k-link {
        padding: 8px 5px !important;
        font-size: 12px !important;
        border-radius: 50px;
        color: #74817C;
        font-weight: 500;
        margin: 0 5px;
        justify-content: center;
    }

    .login-tab label {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .k-notification > .k-notification-content {
        font-weight: 600;
        font-size: 12px;
    }

    .k-notification-success .k-notification-content {
        color: #087277;
    }

    .k-notification-error .k-notification-content {
        color: red;
    }

    .pac-container.pac-logo.hdpi {
        left: auto !important;
        margin-left: 15px;
    }

    .k-animation-container {
        z-index: 9999 !important;
    }

    .k-dialog-wrapper {
        z-index: 1 !important;
    }

    .k-overlay {
        z-index: -1;
    }

    .background.active-center {
        border-color: var(--primary-green);
    }

    .form-check-input:checked[type=radio], .k-radio:checked, .k-radio.k-checked {
        color: #2C2C2C;
        border-width: 2px;
        background: transparent !important;
        border-color: #BABABA !important;
        box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em #1d1d1d !important;
    }

    .form-check-input[type=radio], .k-radio, .k-radio {
        border-width: 2px !important;
        background: transparent !important;
        border-color: #BABABA !important;
    }

    .label {
        margin-bottom: 8px !important;
        font-weight: 500 !important;
    }

    .google-address .field {
        box-shadow: none;
        background: transparent;
        padding: 0;
        margin: 0;
        border-radius: 0;
    }

    .minimize_arrow_close {
        position: absolute;
        top: 50%;
        left: 50%;
    }

    .minimize_arrow_open {
        position: relative;
        top: -20px;
        left: 50%;
    }

    .minimize_arrow_button {
        border: 0;
        background: #ffffff;
        padding: 0;
        border-radius: 50px;
        line-height: normal;
        width: 30px;
        height: 30px;
        box-shadow: 0 0px 4px #ddd;
        margin-top: 10px;
    }

    .telerik-custom-pop .error-msg, .step-content .error-msg {
        position: static !important;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .font-0 {
        font-size: 0px !important;
    }

    .telerik-custom-pop {
        background: #fff;
        width: 100% !important;
        bottom: 0 !important;
        height: 100% !important;
        border-radius: 10px 10px 0px 0px !important;
        overflow: hidden;
        padding-bottom: 25px;
        animation: slideUp 0.5s ease-out forwards;
    }

        .telerik-custom-pop.profile-pop .popup-btn {
            width: 100% !important;
            bottom: 30px;
        }

        .telerik-custom-pop.height-auto {
            height: auto !important;
            max-height: 100% !important;
        }

    .k-centered {
        top: auto;
    }

    .telerik-custom-pop .k-window-titlebar {
        background: transparent;
        padding: 16px 11px;
    }

        .telerik-custom-pop .k-window-titlebar .k-window-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-color);
        }

        .telerik-custom-pop .k-window-titlebar .k-window-titlebar-actions .k-window-titlebar-action:active {
            background: transparent;
        }

        .telerik-custom-pop .k-window-titlebar .k-window-titlebar-actions .k-button-md.k-icon-button .k-button-icon.k-svg-icon {
            width: 20px;
            height: 20px;
        }

            .telerik-custom-pop .k-window-titlebar .k-window-titlebar-actions .k-button-md.k-icon-button .k-button-icon.k-svg-icon > svg {
                width: 22px;
                height: 22px;
            }

    .k-timepicker button {
        background: #f4f4f4;
        padding: 0 15px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .k-pager-numbers .k-button-flat-primary {
        color: #222;
    }

    .k-pager-numbers .k-selected {
        z-index: 1 !important;
        color: #222;
    }

    .operation-days-button {
        border-radius: 4px;
        border: 1px solid var(--primary-green);
        color: var(--text-color);
        box-shadow: none;
        padding: 5px 11px;
        font-size: 10px;
        font-weight: 600;
        line-height: normal;
    }

        .operation-days-button:hover, .operation-days-button.active {
            background: var(--primary-green);
            color: white;
        }

    .k-time-accept, .k-time-accept:active, .k-time-accept:hover, .k-time-accept:focus {
        background: var(--primary-color);
        border: 1px solid var(--primary-color);
    }

    .k-time-cancel {
        border: 1px solid red;
        color: red;
    }

    .k-timeselector {
        font-size: 12px;
    }

    .k-switch.k-disabled {
        background: transparent !important;
    }

    .setup-garage {
        background: linear-gradient(88deg, #139969 0%, #0098AD 35%, #054E5E 100%);
        background-clip: text;
        -webkit-background-clip: text;
        font-weight: bold;
        color: transparent;
    }

    .star {
        background: linear-gradient(180deg, #03a57f30, transparent);
        border-radius: 50px;
        padding: 12px;
        font-size: 50px;
        color: var(--primary-color);
    }

    .info-collapse {
        border-radius: 4px;
        border: 1px solid #ECECEC;
        position: relative;
        margin-bottom: 25px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        background: white;
    }

    .grey-badge {
        border-radius: 50px;
        font-size: 9px;
        border: 1px solid #D7D7D7;
        background: #f5f5f5;
        padding: 1px 5px;
        color: var(--text-light-color);
        font-weight: 700;
    }



    .garage-radio-group .k-radio-list-item {
        background-color: #fff;
        padding: 1rem !important;
        border: 1px solid #ECECEC;
    }

    ul.garage-radio-group {
        gap: 1rem !important;
    }

    .garage-radio-group .k-radio-list-item .k-radio-label {
        width: 100%;
    }

    .zindex-0 {
        z-index: 0;
    }

    .zindex-1 {
        z-index: 1;
    }

    .telerik-custom-pop.remove-content-space .k-window-content {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0;
    }

    .custom-pager {
        padding: 3px;
    }

    .content-height .k-window-content {
        max-height: 500px;
    }

    .login-language-componenet {
        position: relative;
        padding: 5px 0 0px 13px;
        background: white;
        margin: 0 auto;
    }

    .language-switcher {
        background: transparent !important;
        color: #222 !important;
        border: 0px;
        width: auto;
        z-index: 0;
    }

        .language-switcher:focus-within {
            box-shadow: none;
        }

    .k-card-header {
        z-index: 0;
    }

    main {
        position: relative;
        overflow-y: scroll;
    }

        main.login-layout {
            height: calc(100vh - 1.5rem);
            background: #fff;
        }

        main.main-layout {
            height: calc(100vh - 5rem);
        }

    .content {
        max-height: calc(100vh - 18rem);
        overflow-y: auto;
    }

    .section-loading {
        min-height: 250px;
        text-align: center;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-box {
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
        background: white;
        height: 35px;
    }

        .search-box .k-clear-value {
            border-right: 1px solid #a6a6a6;
            padding-right: 10px;
            margin-right: 10px;
            opacity: .75;
        }

        .search-box .btn {
            padding: 0;
            background: transparent;
            border: 0;
            font-size: 18px;
            margin-right: 10px;
            border-radius: 0px;
        }

            .search-box .btn:hover, .search-box .btn:focus {
                box-shadow: none;
            }

            .search-box .btn.search-close {
                border-right: 1px solid #ddd !important;
                padding-right: 10px !important;
            }

        .search-box i {
            font-size: 18px;
        }

        .search-box .k-dropdownlist {
            height: 100%;
            background: #F5F7F7;
        }

        .search-box .k-textbox {
            border: 0;
            font-size: 12px;
        }

            .search-box .k-textbox:hover, .search-box .k-textbox:focus, .search-box .k-textbox:focus-within {
                box-shadow: none;
            }

    .remove-footer-shadow .k-window-actions {
        padding: 0;
    }

    .popup-container {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .popup-box {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10px;
        min-width: 250px;
        max-width: 300px;
        background-color: #ffffff;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 12px;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .popup-container:hover .popup-box {
        opacity: 1;
        visibility: visible;
    }

    .popup-box::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 8px;
        border-style: solid;
        border-color: #ffffff transparent transparent transparent;
    }

    .k-group-start.k-selected, .k-group-end.k-selected {
        background: var(--primary-green);
        border-color: #067E5E;
    }

    .invoice-help-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        margin-top: 12px;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        cursor: pointer;
    }

        .invoice-help-trigger:hover {
            background: #f8f9fa;
        }

        .invoice-help-trigger .invoice-help-label {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--dark-grey);
        }

            .invoice-help-trigger .invoice-help-label i {
                font-size: 1.25rem;
                margin-right: 8px;
            }

        .invoice-help-trigger > i {
            color: var(--dark-grey);
        }

    .invoice-help-pop .invoice-help-close {
        position: absolute;
        top: 12px;
        right: 16px;
        z-index: 2;
        font-size: 22px;
        line-height: 1;
        color: var(--dark-grey);
        cursor: pointer;
    }

    .invoice-help-pop .invoice-help-title {
        border-bottom: 1px solid #ddd;
        padding-bottom: 8px;
    }

    .invoice-help-pop .invoice-help-note {
        min-height: 96px;
    }

    .summary-box {
        border-left: 3px solid var(--primary-color);
    }

        .summary-box .bullet-point {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--primary-color);
            margin-right: 6px;
            vertical-align: middle;
        }

    h1:focus {
        outline: none;
    }

    .blue-border {
        border: 1px solid #008A8D;
        border-radius: 0px;
        padding: 5px 6px;
        font-size: 13px;
        font-weight: 400;
        color: #008A8D !important;
        background: white;
    }

    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .pt-5 {
        padding-top: 30px;
    }

    .pb-5 {
        padding-bottom: 30px;
    }

    .pl-0 {
        padding-left: 0px;
    }

    .pr-0 {
        padding-right: 0px;
    }

    .mt-5 {
        margin-top: 30px;
    }

    .mb-5 {
        margin-bottom: 30px;
    }

    .bg-light {
        --bs-bg-opacity: 1;
        background-color: #ededed !important;
    }

    .text-green, .fill-green-icon {
        color: var(--primary-color) !important;
    }

    .text-red, .fill-red-icon {
        color: var(--red-color) !important;
    }

    .fill-red-bg-icon {
        background-color: #ff000014 !important;
        color: #f00 !important;
        border: 1px solid #ff000036 !important;
    }

    .fill-green-bg-icon {
        background-color: #08727714 !important;
        color: var(--primary-color) !important;
        border: 1px solid #08727754 !important;
    }

    .relative {
        position: relative;
    }

    span.powered-by {
        color: #939393;
        font-size: 19px;
    }

    .menu-logo {
        float: right;
    }

    .sidebar .closebtn {
        font-size: 36px;
        margin-left: 0;
        text-align: right;
        line-height: 17px;
        display: flex;
        height: 100%;
        color: transparent;
    }

    .primary-btn-border {
        border: 1px solid #087277;
        width: 100%;
        color: #087277 !important;
        font-weight: 500;
        font-size: 14px;
        padding: 8px 10px;
        border-radius: 4px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-select {
        background: white;
        border: 2px solid #222;
        color: #222;
        border-radius: 4px;
    }

        .btn-select.btn-radio {
            display: flex;
            width: 15px;
            height: 15px;
            border-radius: 20px !important;
            padding: 0px;
            justify-content: start;
            align-items: self-start;
        }

        .btn-select.selected {
            background: #222;
            border: 2px solid #222;
            color: white;
            box-shadow: inset 0 0 0 2px white, inset 0 0 0 1em #1d1d1d !important;
        }

    button.verify-btn {
        background: #000;
        color: #fff;
        width: 100%;
        height: 100%;
        position: relative;
        margin-left: -3px;
        border: 0px;
        border-radius: 0 5px 5px 0;
    }

    .card-header h6 {
        font-weight: bold;
    }

    .loading {
        width: 100%;
        text-align: center;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
    }

    .loading-panel-wrapper .loading-panel-overlay {
        background: #fff;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    .small-loader .loader-img-text img {
        width: 30% !important;
        height: auto;
    }

    .loader-img-text {
        position: absolute;
        height: 100%;
        display: flex;
        align-items: center;
        top: -25%;
    }

        .loader-img-text img {
            width: 30%;
        }

    .min-height-card {
        min-height: 100px;
    }

    .login-form {
        padding: 30px 30px;
        border-radius: 20px;
    }

    span.red {
        color: #f12f2f;
        font-weight: 500;
    }

    .welcome-top {
        background: url(https://bronyadev.blob.core.windows.net/static/gms/dashboard-bg.svg), #087277;
        padding-top: 30px !important;
        padding-bottom: 30px;
    }

    img.logo-img-top {
        width: 60%;
    }

    section.booking-details, .booking-details {
        background: #cfe6e7;
    }

    .booking-no-list {
        display: table;
        width: 100%;
    }

        .booking-no-list li {
            padding: 0px 10px;
            border-radius: 13px;
            display: table-cell;
        }

    .booking-top h2 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .garrage-assist {
        font-size: 27px;
        letter-spacing: 2px;
        font-weight: 400;
        margin-top: 20px;
    }

    .welcom-bck {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .primary-btn {
        background: #087277;
        width: 100%;
        color: #fff !important;
        font-weight: 500;
        font-size: 18px;
        padding: 15px 10px;
        border-radius: 0px;
    }

    .additional-btn {
        background: #087277;
        width: 100%;
        color: #fff !important;
        font-weight: 500;
        font-size: 14px;
        padding: 8px 10px;
        border-radius: 4px;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .shadow {
        box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 56px rgba(51, 51, 51, 0.16) !important;
    }

    .input-custom {
        height: 45px;
    }

    .border-radius {
        border-radius: 10px 10px 0 0;
    }

    .wlcm-garage {
        font-size: 23px;
        font-weight: 400;
        padding: 0 0 0 0;
        background: linear-gradient(91deg, #139969 -3.36%, #0098AD 48.91%, #054E5E 103.32%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .wrkstar {
        font-size: 14px;
        font-weight: 300;
        border-top: 1px solid #0A696E;
    }

    .tab-custom ul li span.k-link {
        color: #757575;
        font-size: 16px;
        font-weight: 400;
    }

    .tab-custom ul li.k-active span.k-link {
        color: #2C323F;
    }

    .tab-custom ul li.k-active {
        border-radius: 8px !important;
        box-shadow: 0px 2px 5px rgba(0,0,0,0.1) !important;
    }

    .k-tabstrip-items-wrapper .k-item:focus, .k-tabstrip-items-wrapper .k-item.k-focus {
        box-shadow: none;
    }

    .today-bokng {
        margin: 0px;
        font-size: 14px;
        font-weight: bold;
    }

    .filter {
        align-items: center;
        font-size: 17px;
        color: #2C323F;
    }

        .filter i {
            margin-left: 6px;
        }

    .tab-custom .k-content {
        padding: 0px !important;
        border: 0px !important;
    }

    .car-heading {
        text-transform: uppercase;
        font-size: 14px;
        margin: 0px;
        color: #087277;
    }

    ul.car-plate-list {
        background: inherit;
        padding: 0px;
        margin: 0px;
    }

        ul.car-plate-list li i {
            font-size: 19px !important;
            display: flex;
            align-items: center;
            line-height: 24px;
            display: flex;
            align-items: center;
            margin-right: 7px;
        }

        ul.car-plate-list li {
            color: #2C323F !important;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

            ul.car-plate-list li.car-plate-number {
                color: #008A8D !important;
                font-weight: 500;
            }

    .view-btn, .view-btn:hover, .view-btn:focus {
        background: #087277;
        width: 100%;
        font-size: 16px;
        color: #fff !important;
        font-weight: 400;
        outline: none;
        box-shadow: none;
    }

    .today-filer {
        margin: 0 0 5px 0;
        padding: 7px 8px 7px 0;
    }

    .open-job-filter .k-menu-group .k-item > .k-link:active, .open-job-filter .k-menu-group .k-item > .k-link.k-active, .open-job-filter.k-menu-group .k-item > .k-link.k-selected, .open-job-filter .k-menu.k-context-menu .k-item > .k-link:active, .open-job-filter .k-menu.k-context-menu .k-item > .k-link.k-active, .open-job-filter .k-menu.k-context-menu .k-item > .k-link.k-selected {
        color: white;
        background-color: #087277;
    }

    .booking-top {
        padding: 10px 0;
    }

    .field {
        background: #fff;
        box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 56px rgba(51, 51, 51, 0.16);
        padding: 15px 12px;
        margin: 0px 0px 10px 0px;
        border-radius: 5px;
    }

    span.arrow-icon {
        background: #ddd;
        font-size: 22px;
        padding: 0px 5px;
        display: inline-block;
        width: fit-content;
    }

    section.top-header {
        padding: 10px 0 0 0;
    }

    span.arrow-back {
        font-size: 24px;
        line-height: 1;
        display: flex;
    }

    .arrow-back i.bx.bx-chevron-left {
        font-weight: 900;
        color: #087277;
        font-size: 30px;
    }

    .capture-heading {
        font-size: 15px;
        color: rgba(0, 0, 0, 0.85) !important;
    }

        .capture-heading span {
            color: #9D9D9D;
        }

    input.input-file-custom {
        position: absolute;
        top: 0px;
        height: 88%;
        width: 100%;
        opacity: 0;
        left: 0px;
    }

    span.delete-icon {
        position: absolute;
        right: 14px;
        background: #fff;
        bottom: 10px;
        padding: 1px 2px;
        font-size: 18px;
        height: 25px;
        border-radius: 3px;
        color: red;
    }

    .k-selected.k-list-optionlabel:hover, .k-selected.k-list-optionlabel, .k-list-md ul li.k-selected, .k-list-md ul li:hover, .k-list-md ul li.k-selected:hover {
        background: #F2F5FB !important;
        color: #454545 !important;
        box-shadow: none;
    }

    .disabled span.k-input-spinner.k-spin-button {
        display: none;
    }

    .disabled span, .disabled input:disabled {
        background: #f2f2f2 !important;
        opacity: 1;
    }

    .no-record-found img {
        width: 40%;
        margin-bottom: 5px;
    }

    .no-record-found .plus-icon i {
        color: #8a8a8a;
        border: 2px dashed #cfcfcf;
        padding: 50px 100px;
        margin-bottom: 10px;
    }

    .not-find-srvc {
        text-align: right;
        display: block;
        background: transparent;
        border: 0px;
    }

        .not-find-srvc a, .not-find-srvc span {
            color: #008A8D !important;
            font-size: 15px;
            font-weight: 500;
            text-decoration: underline;
        }

    .k-radio:checked, .k-radio.k-checked {
        border-color: #2e2e2e !important;
        color: white;
        background-color: #585858 !important;
    }

    .k-radio-md {
        width: 14px !important;
        height: 14px !important;
    }

    .k-radio {
        border-width: 2px !important;
    }

    .form-check-input.radio-custom:checked {
        background-color: #757575;
        border-color: #757575;
    }

    .form-check-input.radio-custom:focus {
        box-shadow: 0 0 0 0.25rem #7575752e;
    }

    button.btn.update-btn {
        border: 1px solid #008A8D;
        border-radius: 0px;
        padding: 5px 6px;
        width: 100%;
        font-size: 13px;
        font-weight: 400;
        display: flex;
        align-items: center;
        color: #008A8D;
        justify-content: center;
    }

    span.delete {
        position: absolute;
        right: 0px;
        bottom: 0px;
        background: #fff;
        color: red;
    }

    .form-check-input.checkbox-custom:checked {
        background-color: #757575;
        border-color: #757575;
    }

    .form-check-input.checkbox-custom:focus {
        box-shadow: 0 0 0 0.25rem #7575752e;
    }

    .k-notification-success {
        border-color: #08727763;
        color: white;
        background-color: #33aeb4;
    }

    .text-yellow {
        color: #FFD175;
    }

    .service-tab.k-tabstrip-top > .k-tabstrip-items-wrapper ul {
        background: #ffffff;
        padding: 0;
        display: table;
    }

        .service-tab.k-tabstrip-top > .k-tabstrip-items-wrapper ul li {
            border-radius: 0px !important;
            box-shadow: 0px 2px 5px rgba(0,0,0,0.1) !important;
            display: table-cell;
            text-align: center;
            border-radius: 0px !important;
            box-shadow: none;
            display: table-cell;
            text-align: center;
            border: 0px;
            margin-bottom: 0px !important;
            border-bottom: 3px solid transparent !important;
            border-bottom-color: transparent !important;
            padding: 10px 0px;
        }

            .service-tab.k-tabstrip-top > .k-tabstrip-items-wrapper ul li.k-item.k-active {
                border-radius: 0px !important;
                box-shadow: none;
                display: table-cell;
                text-align: center;
                border: 0px;
                margin-bottom: 0px !important;
                border-bottom: 3px solid #000 !important;
                border-bottom-color: #008A8D !important;
                background: #F3F2EF;
                padding: 10px 0px;
                color: #008A8D !important;
                box-shadow: 0px 2px 5px rgba(0,0,0,0.1) !important;
                display: table-cell;
                text-align: center;
            }

            .service-tab.k-tabstrip-top > .k-tabstrip-items-wrapper ul li span {
                font-size: 17px;
                color: #008A8D;
                font-weight: 600;
            }

    .service-tab .k-tabstrip-content {
        padding: 0px !important;
    }

    .total-price {
        background: #adadad21;
        padding: 10px 10px;
    }

        .total-price label {
            margin-bottom: 20px;
        }

    .card.inspection-service-price {
        background: #008A8D;
    }

        .card.inspection-service-price table thead tr th {
            color: #A4D7D8;
            border-bottom: 0px;
            padding: 2px 0 20px 0;
        }

        .card.inspection-service-price table tbody tr td {
            color: #fff;
            border: 0px;
            padding: 2px 0 20px 0;
        }

            .card.inspection-service-price table tbody tr td span {
                color: #FFD175;
                font-weight: 700;
            }

        .card.inspection-service-price table tfoot tr td {
            border-top: 1px solid #ddd;
            border-bottom: 0px;
            color: #A4D7D8;
            padding: 20px 0 0px 0;
        }

    .link {
        color: #0085FF !important;
    }

    button.k-signature-maximize {
        display: none;
    }

    .k-signature-line {
        display: none;
    }

    .k-grid td.k-selected, .k-grid .k-table-row.k-selected > td, .k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .k-grid .k-table-th, .k-grid td, .k-grid .k-table-td {
        font-size: 14px !important;
    }

    thead.k-table-thead tr th, .detail-table thead tr th {
        font-weight: bold !important;
        background: #CFE6E7;
    }

    .ant-image-gallery {
        border: 1px solid #ccc;
        height: 150px;
        width: auto;
        max-width: 100%;
        position: relative;
        padding: 5px;
        text-align: center;
    }

    .view-eye-icon {
        position: absolute;
        right: 5px;
        bottom: 4px;
        z-index: 1;
        line-height: 16px;
        background: grey;
        border-radius: 2px;
        color: white !important;
        padding: 0px 2px;
        font-size: 17px !important;
    }

    .extra-buttons button.k-button-solid {
        display: none;
    }

    .extra-buttons button.k-split-button-arrow {
        display: block;
        border-radius: 4px !important;
        padding: 0px !important;
        border: 0px !important;
    }

        .extra-buttons button.k-split-button-arrow .k-i-arrow-s {
            font-family: 'boxicons' !important;
        }

            .extra-buttons button.k-split-button-arrow .k-i-arrow-s::before {
                content: "\ea16";
            }

    .error-msg {
        position: absolute;
        font-size: 0.85rem;
        color: #f00;
        font-style: italic;
        font-weight: 500;
    }

    .save-btn {
        padding: 14px 10px;
    }

    .k-notification-group {
        width: 40%;
    }

        .k-notification-group.gms-notification {
            width: 100%;
        }

        .k-notification-group.demo-notification .k-notification-container, .k-notification-group.demo-notification > div {
            margin-block: 2px;
            margin-inline: 0;
            display: block !important;
            vertical-align: top;
            width: 100% !important;
            top: 0;
        }

    .k-notification-success .k-svg-icon > svg {
        fill: #087277 !important;
        flex: 1 1 auto;
    }

    .k-notification-error {
        color: #000 !important;
        background-color: #fbdfdc !important;
        border: 0px !important;
        border-radius: 0px !important;
        padding: 20px 20px !important;
    }

        .k-notification-error .k-svg-icon > svg {
            fill: #f00 !important;
            flex: 1 1 auto;
        }

    .no-record-found {
        width: 100%;
        margin: auto;
        height: 40vh;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .mr-1 {
        margin-right: 10px !important;
    }

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

    .grage-logo-img .ant-image-mask {
        display: none;
    }

    a.text-blue {
        color: #2b82ff !important;
    }

    .tag-pickup {
        background: #eaffec;
        border: 1px solid #c4edc8;
        margin: 6px 0 0 0;
        padding: 2px 5px;
        border-radius: 3px;
        color: #008a8d;
        font-size: 12px;
        font-weight: 500;
    }

    .pr-1 {
        padding-right: 5px;
    }

    .garage-img-profile li {
        width: 20%;
        margin-right: 5px;
        display: inline-flex;
        border: 1px solid #ddd;
    }

        .garage-img-profile li:last-child {
            margin-right: 0px;
        }

        .garage-img-profile li img {
            width: 100%;
        }

    .k-upload.k-header.telerik-blazor.attach-select-file {
        border: 0px;
        background: inherit !important;
    }

    .attach-select-file.k-upload .k-dropzone {
        background: inherit;
        height: auto !important;
        text-align: left !important;
        display: inline-block;
        width: 100%;
    }

    .k-upload.k-header.telerik-blazor.attach-select-file .k-dropzone .k-upload-button-wrap button {
        border-color: #07c597 !important;
        background: #e9fffa !important;
        color: #07c597 !important;
        border-radius: 4px !important;
    }

    .k-file-validation-message {
        color: red !important;
    }

    footer {
        background: #ffffff;
        z-index: 1 !important;
    }

        footer h5 {
            margin: 0px;
            font-size: 10px;
            width: 100%;
            color: #bcbcbc;
        }

    input[type='checkbox'] {
        border-width: 2px !important;
        border-color: #1D1D1B !important;
        padding: 2px !important;
        width: 16px;
        height: 16px;
    }

        input[type='checkbox']:checked {
            border-color: #1d1d1d !important;
            border-width: 2px !important;
            background-color: #1d1d1d !important;
        }

    button i.bx, button i.ri-brush-2-line, a i.bx {
        font-size: 20px;
    }

    i.bx.bxs-show, i.bx.bxs-plus-square, i.bx.bxs-trash, i.ri-brush-2-line {
        background: #e7e7e7;
        padding: 5px;
        border-radius: 4px;
        font-size: 15px;
    }

    i.bx.bxs-pencil, i.bx.bx-download {
        background: #434D5D;
        padding: 5px;
        color: #fff;
        border-radius: 4px;
        font-size: 15px;
    }

    .sign-canva .k-signature {
        max-width: 100%;
        border-color: #aeaeae;
        border-radius: 0px;
        min-width: 100%;
    }

    .sign-canva canvas {
        max-width: 100%;
    }

    .env {
        background: #08727729;
        padding: 2px 9px;
        color: #087277;
        border: 0;
        border-radius: 3px;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        margin-left: 10px;
        position: absolute;
        right: 9px;
        bottom: 4px;
    }

    .delete-icon-bg {
        border-radius: 50%;
        background: #f8cfcf;
        border: 7px solid #fbe2e2;
        color: #ea4747;
        display: flex;
        width: 60px;
        height: 60px;
        margin: 0 auto 20px;
        justify-content: center;
        align-items: center;
    }

    .ant-image-preview-operations {
        position: fixed !important;
        top: 0;
        right: 0;
        z-index: 1081 !important;
        width: 100% !important;
    }

    .ant-image-mask-info {
        font-size: 0 !important;
    }

    .grage-logo-img .ant-image {
        height: auto !important;
    }

    .fixed-bottom {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        width: 40%;
        margin: auto;
    }

    .k-grid-md .k-table-th, .k-grid-md .k-table-td, .k-table-md .k-column-title, .k-column-title, .k-grid .k-grid-header .k-table-th {
        white-space: unset !important;
        text-overflow: inherit;
        overflow: inherit;
        flex-shrink: unset;
        vertical-align: top !important;
        word-break: break-word;
    }

    .k-grid-md .k-table-th, .k-grid .k-grid-header .k-table-th {
        font-size: 12.5px !important;
    }

    .k-grid-md .k-table-th, .k-grid-md .k-table-td, .k-grid-md th, .k-grid-md td {
        max-width: 25% !important;
        min-width: 25% !important;
    }

    .accordion-button:not(.collapsed) {
        color: rgba(0,0,0,.85) !important;
    }

    .accordion-button {
        color: rgba(0,0,0,.85) !important;
        font-weight: 500;
        font-size: 15px;
    }

        .accordion-button:focus {
            box-shadow: none;
        }

    .bg-grey {
        background: #e7e7e7;
    }

    .accordion-button::after {
        filter: brightness(0);
    }

    .upload-new .k-upload-button-wrap .k-button-text {
        display: flex;
        align-items: center;
    }

    .fw-500 {
        font-weight: 500;
    }

    .tab-custom ul.k-tabstrip-items, .car-involving-tabs ul.k-tabstrip-items {
        justify-content: start;
        width: 100%;
        flex-wrap: nowrap;
    }

    .k-tabstrip-items-wrapper .k-item:focus {
        box-shadow: none !important;
    }

    .new-tabing .k-tabstrip-items-wrapper .k-item {
        border: 4px solid transparent !important;
        color: #222;
    }

    .new-tabing.k-tabstrip-top .k-tabstrip-items-wrapper .k-item.k-active {
        font-weight: bold;
        color: #222;
        background: transparent;
        border-bottom: 4px solid var(--primary-color) !important;
        border-width: 0 0 4px 0 !important;
    }

    .lock-bg {
        background-image: url(https://bronyaqa.blob.core.windows.net/static/iemployee/bg-lock.png);
        background-position: top 20px right;
        background-repeat: no-repeat;
    }

    .box-shadow {
        box-shadow: 0px 4px 4px rgba(51, 51, 51, .4), 0px 4px 16px rgba(51, 51, 51, 0.4);
    }

    .new-pass-conditions {
        background: #f7f7f7;
        padding: 10px;
        margin-bottom: 20px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #e4e4e4;
        border-radius: 4px;
        border: 3px solid var(--primary-green);
    }

    ::-webkit-scrollbar {
        width: 4px;
    }

    .k-upload .k-upload-files .k-file-single {
        align-items: start;
    }

    .k-upload .k-file-single > .k-file-info {
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        flex-wrap: wrap;
    }

    .k-upload .k-upload-files .k-file-name {
        width: 100%;
        white-space: inherit !important;
    }

    .inline-radio .k-radio-item {
        display: inline-block !important;
    }

    .inline-radio .k-radio-list.k-list-horizontal {
        justify-content: end;
    }

    .k-tabstrip-content:focus, .k-tabstrip-content.k-focus, .k-tabstrip > .k-content:focus, .k-tabstrip > .k-content.k-focus {
        outline-width: 0px !important;
    }

    .btn:disabled {
        opacity: 1 !important;
        background: grey;
        color: #f5f5f5 !important;
        border-color: #808080 !important;
    }

    .update {
        position: fixed;
        bottom: 10px;
        z-index: 99999;
        width: auto;
        max-width: 100%;
        left: auto;
        right: auto;
    }

    div.shadow {
        box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.2) !important;
    }

    .update-inner {
        width: 317px;
        margin: 0 0 0 66px;
        background: #fff;
        padding: 20px;
        border-radius: 5px;
    }

    .upload-new .k-upload .k-upload-button {
        background: white;
        border: 0px solid rgba(0, 0, 0, 0.2);
        border-radius: 0px;
        width: 100%;
        height: 40px;
        justify-content: flex-start;
    }

    .upload-new .k-upload-button-wrap .k-button-text:before {
        content: "\ebbb";
        font-family: 'boxicons' !important;
        font-size: 28px;
        color: rgba(0, 0, 0, 0.5);
        position: relative;
        width: auto;
        z-index: 999;
        top: 0px;
        margin: 0 10px 0 0;
    }

    .upload-new .k-upload .k-dropzone {
        padding: 0 !important;
        border-color: #222 !important;
    }

    .upload-new .k-upload-button-wrap {
        width: 100% !important;
        position: relative;
    }

    .uploaded-img .garage-img {
        border: 1px solid #ccc;
        border-radius: 4px;
        position: relative;
        height: 80px;
    }

    .uploaded-img .garage-img-profile {
        border: 1px solid #4c4c4c;
        padding: 5px;
        position: relative;
        height: 170px;
        width: 200px;
        max-width: 100% !important;
    }

    .k-grid-md td.k-hierarchy-cell {
        padding: 7px 0px !important;
    }

    label.ant-checkbox-wrapper {
        width: 23px !important;
    }

    .bg-light-blue {
        background: #e3ecfa;
    }

    .font-12 {
        font-size: 12px !important;
    }

    .k-button-text {
        justify-content: center;
    }
    /*  .k-button {
        border: 0px;
        background: transparent;
    }*/
    .link-color {
        color: #4e90f0;
        text-decoration: underline;
    }

    .k-disabled.k-textbox input {
        background: #ced4da !important;
        color: #000 !important;
        opacity: 1 !important;
        border-color: #ced4da !important;
    }

    .k-checkbox:disabled, .k-checkbox.k-disabled {
        opacity: 0.3 !important;
    }

    .k-checkbox:checked, .k-checkbox.k-checked, input[type='checkbox']:checked {
        border-color: #454545 !important;
        border-width: 2px !important;
        background-color: #454545 !important;
    }

    .k-disabled:not(.k-checkbox), .k-dropdownlist.k-disabled {
        background: #ced4da !important;
    }

    li.k-radio-item.k-disabled {
        background: transparent !important;
    }

    .hu-au-list ul.k-radio-list.k-list-horizontal {
        justify-content: start;
        font-size: 12px;
    }

    .hu-au-list ul {
        display: inline-block !important;
        text-align: left;
    }

        .hu-au-list ul li {
            display: inline-flex !important;
            text-align: left;
            margin-top: 6px;
            width: 100%;
        }

            .hu-au-list ul li label div span.form-control {
                margin-top: 5px !important;
            }

    .car-involving-tabs li.k-item {
    }

    .car-involving-tabs .k-item .k-link {
        width: 100%;
        font-size: 16px;
        background: #e4e4e4;
        color: #222;
    }

    .car-involving-tabs .k-active .k-link {
        color: #ffffff;
        background-color: #07c597;
        border-color: #07c597 #dee2e6 #fff;
    }

    .car-involving-tabs .k-content {
        padding: 0 !important;
    }

    .telerik-blazor.k-grid {
        max-height: 550px;
    }

    @media screen and (min-width: 1024px) {
        .full-page-sheet {
            max-width: 40%;
        }

        .k-dialog.delete-pop {
            width: 30%;
        }
    }

    @media (min-width: 2560px) {
        .full-page-sheet {
            max-width: 60%;
        }

        .k-dialog.delete-pop {
            width: 50%;
        }
    }

    @media only screen and (max-width: 768px) {
        .k-dialog.delete-pop {
            min-width: auto;
            margin: 0 1px;
        }

        .upload-image-outer {
            height: 85px;
        }

        .logo {
            width: 100px;
        }

        .welcom-bck {
            font-size: 25px;
            margin-bottom: 10px;
        }

        .telerik-blazor.k-grid {
            max-height: 400px;
        }

        .ant-image {
            padding: 0px;
        }

        span.arrow-icon {
            background: #ddd;
            font-size: 22px;
            padding: 0px 2px;
        }

        .k-grid-md td, .k-grid-md .k-table-td {
            font-size: 12.5px;
        }

        .k-grid .k-grid-header .k-table, .k-grid .k-grid-content .k-table, .k-grid .k-grid-footer .k-table {
            table-layout: auto !important;
        }

        .k-column-title {
            min-width: 0;
            text-overflow: unset;
            white-space: unset;
            flex-shrink: 1;
            overflow: auto;
        }

        .container-fluid {
            padding: 0 20px;
        }

        .desktop-btn {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1030;
            width: 100%;
            margin: 0 auto !important;
            background: #fff;
            padding: 10px;
            box-shadow: 1px 0 9px #ddd;
        }

            .desktop-btn .primary-btn {
                width: 100%;
            }
    }

    @media only screen and (max-width: 990px) {
        .popup-btn {
            width: 100%;
        }

        .k-dialog.delete-pop {
            width: 70%;
        }
    }

    @keyframes slideUp {
        from {
            transform: translate(-50%, 100%);
            opacity: 0;
        }

        to {
            transform: translate(-50%, 30px);
            opacity: 1;
        }
    }

    @keyframes slideDown {
        from {
            transform: translate(-50%, 30px);
            opacity: 1;
        }

        to {
            transform: translate(-50%, 100%);
            opacity: 0;
        }
    }

    @media(max-width:575px) {
        .login-language-componenet {
            padding: 5px 0 0px 15px;
        }

        .ronya-cap {
            width: 135px;
        }

        .k-pager-info {
            display: none;
        }

        .steper-icon {
            margin-right: 0;
        }

        .filter-btn .btn {
            padding: 3px 8px;
        }

        .btn-small {
            padding: 5px 5px;
        }

        .popup-box {
            left: 50%;
        }
    }

    @media only screen and (max-width: 567px) {
        .k-radio-list.k-list-horizontal {
            gap: 5px;
            padding: 0px;
        }

        .upload-new .k-upload-button-wrap .k-button-text::before {
            font-size: 22px !important;
            margin-top: 5px;
        }

        .upload-new .k-upload-button-wrap .k-button-text {
            padding-left: 12px;
        }

        .extra-buttons button.k-split-button-arrow {
            padding: 0px !important;
        }

        .k-grid-md .k-table-th, .k-grid-md .k-table-td, .k-grid-md th, .k-grid-md td {
            max-width: 120px !important;
            min-width: 120px !important;
        }
    }

    @media only screen and (max-width: 1200px) {
        .k-grid .k-grid-header .k-table, .k-grid .k-grid-content .k-table, .k-grid .k-grid-footer .k-table {
            table-layout: fixed !important;
        }

        .k-column-title {
            min-width: 0;
            text-overflow: unset;
            white-space: unset;
            flex-shrink: 1;
            overflow: auto;
        }
    }

    @media only screen and (max-width: 992px) {
        .k-notification-group.demo-notification {
            top: 50px !important;
            z-index: 21 !important;
            right: 0 !important;
            width: 90%;
            bottom: auto !important;
        }

        .telerik-custom-pop {
            max-width: 90% !important;
        }

        .k-grid-md .k-table-th, .k-grid-md .k-table-td, .k-grid-md th, .k-grid-md td {
            max-width: 150px !important;
            min-width: 150px !important;
        }

        .fixed-bottom {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1030;
            width: 100%;
            margin: auto;
        }

        .k-grid .k-grid-header .k-table, .k-grid .k-grid-content .k-table, .k-grid .k-grid-footer .k-table {
            table-layout: fixed !important;
        }

        .k-column-title {
            min-width: 0;
            text-overflow: unset;
            white-space: unset;
            flex-shrink: 1;
            overflow: auto;
        }

        img.logo-img-top {
            width: 100%;
        }
    }

    @media only screen and (min-width: 768px) {
        .w-560 {
            width: 560px;
        }

        body {
            width: 100% !important;
            margin: auto;
            height: 100vh;
            z-index: 9999999;
            display: table;
            box-shadow: 0px 4px 4px rgba(1, 1, 1, 4%), 0px 0px 5px rgba(51, 51, 51, 16%);
        }

        .full-page-sheet {
            width: 100%;
        }

        .telerik-custom-pop {
            max-width: 100% !important;
        }

        .upload-image-outer {
            width: 100%;
        }

        .primary-btn {
            padding: 15px 30px;
            font-size: 14px;
            border-radius: 4px;
        }

        .wlcm-garage {
            font-size: 20px;
        }

        .welcome-top p {
            font-size: 16px;
        }

        .wrkstar {
            font-size: 15px;
        }

        .fixed-bottom {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1030;
            margin: auto;
        }

        .desktop-btn .primary-btn {
            width: auto;
        }
    }

    @media only screen and (min-width: 992px) {
        body {
            width: 40% !important;
            margin: auto;
            height: 100vh;
            z-index: 9999999;
            box-shadow: 0px 4px 4px rgba(1, 1, 1, .4);
        }

        .k-dialog.delete-pop {
            min-width: initial !important;
            max-width: 40% !important;
        }

        .telerik-custom-pop {
            max-width: 40% !important;
        }

        .k-notification-group.demo-notification {
            bottom: auto !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 26 !important;
            margin: 0 auto;
            transform: translateX(0) !important;
        }

        .fixed-bottom {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1030;
            width: 40%;
            margin: auto;
        }
    }

    @media only screen and (max-width: 576px) {
        .welcom-bck {
            font-size: 22px;
        }

        .login-form {
            border-bottom: 0;
            border-radius: 0px;
            box-shadow: none;
            padding: 20px 0;
        }

        .inline-radio .k-radio-list.k-list-horizontal {
            gap: 3px;
        }

        .view-eye-icon i {
            font-size: 14px !important;
        }

        .login-cap {
            width: 100%;
        }
    }

    @media only screen and (min-width:575px) {
        .login-cap {
            margin-right: -20px;
            position: relative;
        }
    }

    @media (min-width: 320px) {
        .page {
            flex-direction: row;
        }

        .form-check-input:checked {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }

        .no-now-button .k-now, .no-now-button .k-button.k-now, .no-now-button .k-header .k-now, .no-now-button .k-footer, .no-now-button .k-time-now, .no-now-button .k-time-header {
            display: none !important;
        }
    }
}