@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');

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

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;
}
/*color Library*/
:root {
    --text-color: #0E1010;
    --text-light-color: #74817C;
    --primary-color: var(--primary-green);
    --primary-hover-color: var(--primary-green-hover);
    --input-border: #D4D4D4;
    --red-color: #E82127;
    --primary-green: #03A57F;
    --primary-green-hover: #04A07B;
    --blue: #0E74D9;
    --bg-light-grey: #F6F7F7;
}

::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;
}

.height-view-port {
    height: 100vh;
}

.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);
    /*color: #C50C0C;*/
}
.text-center input.k-input-inner {
    text-align: center;
}
.text-blue {
    color: var(--blue);
}

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

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

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

.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: 600;
    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;
    /*  text-transform: uppercase;*/
    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);
}

.bg-green {
    background: var(--primary-green) !important;
}

.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-radius: 50px;*/
    /* height: 23px;*/
    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;
}
/*a {
    color: inherit !important;
}*/
.k-listview {
    background: transparent;
}

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

.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;
}

/*.k-checkbox:checked,
.k-checkbox.k-checked,
input[type='checkbox']:checked {
    border-color: #03A57F !important;
    border-width: 2px !important;
    background-color: #03A57F !important;
}*/
/******Login***********/
.bg-blue-screen {
    background: #F2F5FB;
}

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

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

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

.login-top {
    padding-top: 0px !important;
}
/***********Menu***********/
.sidebar {
    height: 100%;
    width: 0;
    position: absolute;
    top: 0;
    overflow-x: hidden;
    transition: 0.5s;
    z-index: 11111;
}

.inner-sidebar {
    /*   padding: 20px 30px;*/
    font-size: 14px;
    height: 100vh;
    background: #0000006e;
}

    .inner-sidebar a {
        color: inherit;
    }

.menu-green {
    background: var(--primary-green);
    border-radius: 4px;
    padding: 10px 15px;
}

    .menu-green > img {
        filter: brightness(0) invert(1);
        display: block;
        margin-bottom: 9px;
    }

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;
        }
/*.menu-list .nav-item a:hover a,
.menu-list .nav-item .active a {
    font-weight: 600;
}*/
.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;
}
/****Super admin**/
.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;
}
/*****************Image upload**********/
.upload-image-outer {
    width: 100%;
    height: 150px;
    border: 1px solid #ddd;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}

.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;
}
/**************************
    Header
****************************/
section.menu-top {
    background: #fff;
    border-bottom: 2px solid #F2F5FB;
    padding: 8px 0 !important;
}
/**************
    Booking detail/ Dashboard
    *****************/
.booking-status-draft {
    background: #D9D5D2;
    padding: 1px 10px;
    width: auto;
    /* display: block;*/
    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;
    /* display: block;*/
    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;
    /* display: block;*/
    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-deli {
    background: #E6FAE2;
    color: #22B08F;
    padding: 2px 7px;
    width: auto;
    text-align: center;
    border-radius: 20px;
    font-weight: 600;
}*/
.booking-status-rejected {
    background: #FAE2E2;
    color: #FF5E5E;
    padding: 1px 10px;
    width: auto;
    /* display: block;*/
    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;
    /* width: auto;
    border: 1px solid var(--primary-green);
    border-radius: 50px;*/
    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****/
.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;
        }

/*******Inspection***********/
.parts {
    border: 1px solid #DFDDDD;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 10px;
}
    /*.part span {
    color: var(--text-light-color);
    font-size: 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;
}

/*****Common Upload Functionaltiy**/
.upload-image-outer {
    border-radius: 4px;
}

.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;
    /*  z-index: -1;*/
}

.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 {
    border-radius: 50px;
    border: 1px solid var(--primary-green);
    color: var(--primary-green);
    padding: 3px 5px;
    line-height: normal;
    max-height: fit-content;
}

    .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%;
    /*    height: 40px;*/
    justify-content: flex-start;
}

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

.input-file-custom.k-upload .k-upload-files .k-file-name {
    text-align: left;
}

.upload-doc .k-upload-button-wrap .k-button-text:before {
    content: "";
    /* background: url("https://bronyadev.blob.core.windows.net/static/gms/gms-new/Image.svg");*/
    width: 22px;
    height: 23px;
    /* font-size: 28px;
    font-family: 'boxicons' !important;*/
    color: rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 999;
    top: 0px;
    margin: 0 10px 0 0;
}

/***before click upload***/
.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");
}
/***after click upload***/
.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;
}

.btn-position {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 999;
}

.customer-comments {
    padding: 10px 15px;
}
/******HUAU******/
.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****************/
.custom-stepper {
    margin: 10px 0 0px;
    z-index: 0;
    /*   height: 8px;*/
}

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;
}
/*****Chat Launcher *****/
/*#launcher {
    width: 40px !important;
    height: 40px !important;
   
}
.sc-1w3tvxe-0.cfuUOe {
    width: 40px !important;
    height: 40px !important;
    background-color: #03a57f !important;
}*/
/************************
 Delete confirm box UI   
 *************************/
/****Delete Telerik POP UP ****/
.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;
    /*  padding: 6px 0;*/
    font-size: 12px;
    padding-top: 0;
}

.delete-pop .k-dialog-titlebar {
    background: white;
    color: var(--dark-grey);
    /* padding-left: 0;*/
    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 page************/

.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;
}
/*.custom-stepper .k-stepper .k-step-indicator::before,
.custom-stepper .k-stepper .k-step-indicator,
.custom-stepper .span.k-step-indicator-text {
    display: none !important;
}*/
/*.custom-stepper {
    background: #fff;
    height: auto;
    border-radius: 50px;
    border: 1px solid #ddd;
    height: 8px;
    margin: 10px 0;
}
.custom-stepper li.k-step-current.k-step-focus {
    background: var(--primary-green);
}
    .custom-stepper .k-stepper .k-step-indicator
.custom-stepper .span.k-step-indicator-text {
    display: none;
}*/
/*********************************
    Bottom sheet
*/
/* Overlay to dim background */
.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

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

    .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 pop up**********/
.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 TABS***************/
.login-tab .k-tabstrip-items-wrapper {
    border-bottom: 0px;
}

.login-tab ul.k-tabstrip-items {
    /*  padding-bottom: 10px !important;*/
    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: #ffffff !important;*/
    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;
    /* background-color: #eee;*/
    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;
}

/*.input-group > .form-control:focus {
    z-index: 1;
}*/

.login-tab label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}
/********* Site Tour **********/
.btn-express-service-accordian {
    width: 1.5rem;
}

.float-container {
    position: fixed;
    display: flex;
    pointer-events: none;
    flex-direction: row;
}

    .float-container * {
        pointer-events: all;
    }

.float-bottom {
    bottom: 0;
}

.float-container-reverse {
    flex-direction: row-reverse;
}

.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;
}

.max-100 {
    max-width: 100% !important;
}
/*Telerik pop up*/
.pac-container.pac-logo.hdpi {
    left: auto !important;
    margin-left: 15px;
}
/*.pac-container {
    right: auto !important;
    top: auto !important;
    bottom: 106px !important;
}*/
.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;
}
/********Bottom sheet responsive*********/
@media screen and (min-width: 1024px) {
    .full-page-sheet {
        max-width: 40%;
    }

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

    .float-container {
        width: 40%;
        max-width: 40%;
    }

    .bottom-sheet {
        max-width: 40%;
    }
}

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

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

    .float-container {
        width: 60%;
        max-width: 60%;
    }

    .bottom-sheet {
        max-width: 60%;
    }
}


/********Responsive media  query*********/

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

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

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

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

/********Deepak goyal*********/
.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;
}

.green_border {
    border-left: 2px solid var(--primary-green);
}

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

.cursor-pointer {
    cursor: pointer;
}

.font-0 {
    font-size: 0px !important;
}
/* Added for TelerikWindow */
.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;
    /* max-width: 610px;*/
}

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

    .telerik-custom-pop.height-auto {
        height: auto !important;
        /* height:auto leaves the sheet unbounded, so a tall popup (e.g. 8 cleaning photos on a
           100% zoom laptop) grows upward past the top of the viewport with its title bar
           off-screen and nothing able to scroll. Capping it at the viewport restores the bound
           that .k-window-content's own `flex: 1 1 auto; overflow: auto` needs to start
           scrolling, while the title bar and footer stay pinned. Purely additive: popups that
           already fit are unaffected. */
        max-height: 100% !important;
    }

@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;
    }
}


.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;
}

.h-300 {
    height: 300px;
}

.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;
}

.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;
}
/*vaibhav--GarageType radio btn*/
.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;
}

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

.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;
    /*    margin-right: 5px;*/
}

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

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

.body-detail-scroll {
    max-height: calc(100vh - 25rem);
    overflow-y: auto;
}

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;
}

@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;
    }
}

.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;
}

/* added for popup -vaibhav
Popup Container */
.popup-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Popup Box (Hidden by Default) */
.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;
}

/* Show Popup on Hover */
.popup-container:hover .popup-box {
    opacity: 1;
    visibility: visible;
}

/* Arrow at Bottom of Popup */
.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;
}
@media (max-width:575px) {
    .popup-box {
        left: 50%;
    }
}
/*li.d-flex.align-items-center.mb-4 {
    background: white;
    padding: 8px;
    margin-bottom: 6px !important;
    border-radius: 5px;
    border: 1px solid #efefef !important;
    justify-content: space-between;
}*/
/*.animated-popup.k-window {
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}*/

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

/* RO-6055 invoice "I need help" trigger — full-width bordered clickable row (GMS card/row style) */
.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);
}

/* RO-6055 row 75 — GMS-standard polish of the "Request support" help popup:
   top-right (✕) header close, underlined title, and a taller message field. */
.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;
}

/* Remove Vehicle Lettering summary card accent (requirements §17.5.3, OQ-116 reversed by OQ-134) —
   moved here from app.css, which is not the approved home for new increment CSS (§17.7/§17.10). */
.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;
}
/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LR workshop inspection (Appointment tab)

   Ported from fleet's fleet-new-design.less so the garage's Vehicle cleaning / Check list steps
   look identical to the LR inspection pages the rest of the platform already uses. The LESS colour
   variables are resolved to their hex values here because GMS has no LESS build.

   EVERYTHING is scoped under .lr-inspection-step on purpose. Two of fleet's class names already
   mean something else in GMS — .btn-select is a black radio button used by Tire Storage — so
   dropping these in unscoped would silently restyle unrelated screens. The file-select button is
   also renamed .lr-file-select rather than reusing fleet's .btn-select, for the same reason.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.lr-inspection-step .select-file-section {
    border-radius: 8px;
    border: 1px dashed #A0AEBE;
    background: #ffffff;
}

.lr-inspection-step .select-file-section .select-header {
    background: #EDF2F7;
    border-radius: 8px 8px 0 0;
    padding: 15px;
    border-bottom: 1px dashed #A0AEBE;
    border-top: 1px dashed #A0AEBE;
}

.lr-inspection-step .select-file-section .select-body {
    padding: 15px;
    text-align: center;
}

.lr-inspection-step .lr-file-select {
    border: 0;
}

/* ⚠ FLEX-CENTRED, NOT text-align. Telerik's .k-dropzone is display:flex by default, so text-align
   does nothing to it and the upload button aligns to flex-start — which is why "Select files..."
   rendered hard against the left edge instead of under the "or". Centring has to be expressed in the
   flex axis. */
.lr-inspection-step .lr-file-select .k-dropzone {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #ffffff;
}

.lr-inspection-step .lr-file-select .k-upload-button-wrap {
    display: inline-flex;
    justify-content: center;
}

.lr-inspection-step .lr-file-select .k-dropzone-hint {
    display: none;
}

.lr-inspection-step .lr-file-select .k-button {
    padding: 7px 15px;
    border: 1px solid #D1DBE6;
    color: #02010E !important;
    background: #ffffff !important;
    border-radius: 6px;
    margin-bottom: 20px;
}

.lr-inspection-step .lr-file-select .k-file-validation-message {
    color: red;
    font-style: italic;
    font-size: 11px !important;
}

.lr-inspection-step .section-upload-loading {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    height: 100%;
    width: 100%;
    background: #ffffff;
    padding-top: 40px;
    border-radius: 0 0 8px 8px;
}

.lr-inspection-step .icon-grey-bg {
    background: #F5F7FA;
    border: 1px solid #E1E9F0;
    border-radius: 9999px;
    color: #64748B;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    line-height: normal;
    min-width: 25px;
    height: 25px;
}

/* fleet's .desc — the muted sub-label under a question. */
.lr-inspection-step .desc {
    color: var(--text-light-color);
}

/* ── Perspective photo tiles ──────────────────────────────────────────────────────────────────
   .upload-image-outer is a FIXED 150px-tall flex column (85px on small screens) and .upload-image
   fills it, but neither constrains a child <img>: Bootstrap's .img-fluid only caps WIDTH, so a
   tall guide image overflowed the tile and painted over the label of the row beneath it. Capping
   the height and using object-fit keeps the whole guide visible inside its own box, whatever
   aspect ratio the artwork happens to have. */

.lr-photo-tile .upload-image,
.lr-photo-tile .upload-image-outer {
    overflow: hidden;
}

.lr-photo-tile .upload-image img,
.lr-photo-tile .upload-image-outer img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The tile label must never be covered by a neighbouring tile's artwork. */
.lr-photo-tile .lr-photo-tile__label {
    position: relative;
    z-index: 1;
}

/* ── Tile alignment: the guide boxes line up however long the label is ────────────────────────
   The label sits ABOVE the fixed-height box, so a label that wraps to two lines pushed its own
   box down while its single-line neighbours stayed up — the row of boxes came out ragged. It
   shows up in German first ("Heck-Dreiviertelansicht · rechte Seite" wraps where "Innenraum"
   does not) and gets worse as the browser's text size goes up, since more labels wrap.

   The tile is a flex COLUMN and the label takes the slack. Bootstrap already stretches the
   columns of one row to equal height, so letting the label absorb the difference puts every box
   at the same distance from the tile's bottom - and therefore at the same top. That holds for a
   label of ANY number of lines, which a fixed min-height on the label would not: it would only
   buy the two-line case and come apart again at the next text size up.

   ⚠ flex: 0 0 auto on the box is not decoration. Flex items shrink by default, so without it a
   three-line label would be paid for by squashing the 150px guide box instead. */
.lr-photo-tile {
    display: flex;
    flex-direction: column;
}

.lr-photo-tile .lr-photo-tile__label {
    flex: 1 1 auto;
}

.lr-photo-tile .upload-image-outer {
    flex: 0 0 auto;
    /* ⚠ Zeroed BECAUSE of the flex above, not as a tidy-up. .upload-image-outer carries
       margin-bottom: 20px globally, which used to collapse with the tile's own mb-3 as the last child
       of a block container. Flex containers do not collapse margins, so leaving it would have ADDED
       20px to every row gap — the grid would have spread out as a side effect of fixing its alignment.
       Row spacing now comes from the tile's mb-3 alone, which is the one place to change it. */
    margin-bottom: 0;
}

/* Editor preview: the picked or stored photo above the comment box. Height-capped and letterboxed —
   a full-size camera photo at its natural size pushes the comment field off the window. */
.lr-inspection-step .lr-photo-preview {
    width: 100%;
    max-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background: var(--bg-light-grey);
}

.lr-inspection-step .lr-photo-preview img {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Walk-around video guide thumbnail on the Capture images step. */
.lr-inspection-step .lr-video-thumb {
    width: 64px;
    height: 48px;
    object-fit: cover;
    flex: 0 0 auto;
}

.lr-inspection-step .lr-photo-preview video {
    max-width: 100%;
    max-height: 300px;
}

/* ── Walk-around video recorder (ported from b.lrbooking.cl component.css) ────────────────────
   Unscoped on purpose: every selector here is an lr-rec* / lr-visually-hidden name that exists
   nowhere else in GMS, and the modal renders outside the .lr-inspection-step wrapper. */

.lr-rec {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.lr-rec__video {
    width: 100%;
    height: 100%;
    /* cover, not contain: the viewfinder should fill the frame like a camera app. The recorded file
       is unaffected — this is preview framing only. */
    object-fit: cover;
    display: block;
}

/* Camera not live yet: keep the black frame but hide whatever the element is showing. */
.lr-rec--pending .lr-rec__video {
    visibility: hidden;
}

.lr-rec__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
}

.lr-rec__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Paused: amber and no pulsing dot, so a held recording can never be mistaken for a live one. */
.lr-rec__badge--paused {
    background: rgba(0, 0, 0, 0.55);
    color: #FFD166;
}

.lr-rec__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ea4747;
    /* CSS animation, so the pulse costs no Blazor re-renders. */
    animation: lr-rec-pulse 1.2s ease-in-out infinite;
}

@keyframes lr-rec-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

.lr-rec__timer {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lr-rec__timer--warn {
    color: #FFD166;
}

.lr-rec__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
}

.lr-rec__fill {
    height: 100%;
    background: var(--primary-green);
    transition: width 0.2s linear;
}

.lr-rec__fill--warn {
    background: #F97D34;
}

/* Telerik centres the window; on a phone the default padding wastes most of the width. */
.lr-rec-window .k-window-content {
    padding: 12px;
}

/* Hidden <input type=file> driven by a <label for>. It must stay in the DOM — the recorder's
   failure screen points at it — so it is clipped rather than display:none. */
.lr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Fleet-style Yes/No answer toggle ──────────────────────────────────────────────────────────
   Ported from fleet's ChecklistAnswerToggle. The 60px floor is what makes the two halves render at
   EQUAL widths: without it they measure Yes ~54px / No ~49px in English and Ja ~46px / Nein ~58px in
   German — a gap with the relationship INVERTED, so sizing to one language leaves the other unequal
   the other way round. min-width rather than width, so a longer translation grows instead of clipping.
   GMS's own green is used, not fleet's #067E5E, so the control matches the app it lives in. */

.lr-answer-toggle-half {
    min-width: 60px;
}

.lr-inspection-step .k-group-start,
.lr-inspection-step .k-group-end {
    border-radius: 6px;
    padding: 4px;
    background: transparent;
}

.lr-inspection-step .k-group-start.k-selected,
.lr-inspection-step .k-group-end.k-selected,
.lr-inspection-step .k-button-group .k-selected {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: #fff;
}

/* ── Drop-zone stacking ────────────────────────────────────────────────────────────────────────
   ⚠ DONE HERE RATHER THAN WITH BOOTSTRAP UTILITIES, AND THAT IS THE WHOLE POINT. Fleet writes
   `z-3` on the file select and `z-0 top-0 left-0 w-100 h-100` on the drop zone, but GMS bundles an
   older Bootstrap that ships NONE of .z-0 / .z-3 / .left-0. Those classes resolved to nothing, so the
   drop zone's absolute overlay sat ON TOP of the Select-file button and swallowed every click — the
   "popup opens but nothing is clickable" report. Positioning and z-index are explicit here. */

.lr-inspection-step .lr-file-drop-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
}

.lr-inspection-step .lr-file-select {
    position: relative;
    z-index: 3;
    display: block;
    text-align: center;
}

/* ── Photo annotation editor ───────────────────────────────────────────────────────────────────
   Ported from fleet's stylesheet. ⚠ These rules do NOT ship with the RCL component — every
   .annotate-*, .swatch and .thumb rule lives in fleet's own CSS, which is why the component only ever
   looked right inside fleet. */

.annotation-editor-window .annotate-toolbar .btn {
    font-size: 12px;
}

.annotation-editor-window .annotate-canvas-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: #EDF2F7;
    min-height: 320px;
}

/* Background lives on the Fabric-created wrapper, NOT on the canvas elements. Fabric stacks two
   canvases inside .canvas-container; a background on the canvas itself would let the upper one
   obscure the lower, where the image and committed strokes are drawn. */
.annotation-editor-window .annotate-canvas-wrap .canvas-container {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    max-height: 50vh;
    touch-action: none;
}

.annotation-editor-window .annotate-canvas-wrap canvas {
    max-width: 100%;
    max-height: 50vh;
    background: transparent;
    /* Stops the browser reading finger drags on the canvas as page scroll / pinch-zoom. Without it,
       dragging near the edges on mobile scrolls the modal instead of drawing. */
    touch-action: none;
}

.annotation-editor-window .color-swatches,
.annotation-editor-window .stroke-sizes {
    display: inline-flex;
    gap: 6px;
    padding-left: 8px;
    border-left: 1px solid #e9ecef;
    margin-left: 4px;
}

.annotation-editor-window .color-swatches .swatch {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    border: 2px solid #e9ecef;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s, border-color 0.15s;
}

.annotation-editor-window .color-swatches .swatch:hover {
    transform: scale(1.1);
}

.annotation-editor-window .color-swatches .swatch.active {
    border-color: var(--primary-green);
    transform: scale(1.15);
}

.annotation-editor-window .stroke-sizes .stroke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #e9ecef;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.annotation-editor-window .stroke-sizes .stroke.active {
    border-color: var(--primary-green);
}

.annotation-editor-window .stroke-sizes .stroke .stroke-dot {
    display: block;
    background: #0F172A;
    border-radius: 9999px;
}

.annotation-editor-window .annotate-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    border-top: 1px solid #e9ecef;
    background: #EDF2F7;
}

.annotation-editor-window .annotate-thumbs .thumb {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    background: #fff;
}

.annotation-editor-window .annotate-thumbs .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.annotation-editor-window .annotate-thumbs .thumb.active {
    border-color: #1E293B;
    box-shadow: 0 0 0 2px rgba(3, 165, 127, 0.25);
}

/* A slight tint so an edited thumb is spottable at a glance. */
.annotation-editor-window .annotate-thumbs .thumb.edited::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(3, 165, 127, 0.08);
    pointer-events: none;
}

.annotation-editor-window .annotate-empty {
    padding: 24px;
    text-align: center;
    color: #64748B;
}

@media (max-width: 768px) {
    .annotation-editor-window .annotate-canvas-wrap {
        min-height: 240px;
        padding: 8px;
    }

    .annotation-editor-window .annotate-canvas-wrap .canvas-container {
        max-height: 40vh;
    }

    .annotation-editor-window .annotate-canvas-wrap canvas {
        max-height: 45vh;
    }

    .annotation-editor-window .color-swatches .swatch {
        width: 22px;
        height: 22px;
    }

    .annotation-editor-window .annotate-thumbs .thumb {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }
}

/* The save overlay inside the annotation editor. ⚠ Needed as its own rule because the editor renders
   in its own TelerikWindow, OUTSIDE the .lr-inspection-step wrapper that scopes the other
   .section-upload-loading rule — so that one does not reach it. Semi-transparent so the canvas stays
   visible behind it: the element must remain mounted while the export runs. */
.annotation-editor-window .section-upload-loading {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
}

/* ── Step loader ───────────────────────────────────────────────────────────────────────────────
   SmallLoading's own .section-loading carries min-height:250px, which inside a step window pushed
   the spinner down against the footer instead of leaving it in the middle of the body. The wrapper
   sets a smaller box and resets that floor so a SMALL loader sits centred. */

.lr-inspection-step .lr-step-loading {
    min-height: 200px;
}

.lr-inspection-step .lr-step-loading .section-loading {
    min-height: 0;
}

/* ── Perspective tile: add badge and thumbnail ─────────────────────────────────────────────────── */

.lr-photo-tile .upload-image {
    position: relative;
}

/* The guide artwork alone reads as an example, not as an upload target. */
.lr-photo-tile .lr-photo-tile__add {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #D1DBE6;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.lr-photo-tile .lr-photo-tile__add i {
    font-size: 18px !important;
    line-height: 1;
    color: var(--text-color);
}

/* ⚠ pointer-events:none is LOAD-BEARING. The shared <Image> component has its own built-in
   click-to-zoom preview (see the cursor:zoom-in in DamageDetails), which swallowed the tile click and
   opened ITS lightbox instead of the viewer modal — leaving the photo's comment unreachable. Disabling
   pointer events lets the click reach the wrapper's own handler; the preview then happens inside the
   modal, which is where it belongs. */
.lr-photo-tile .lr-photo-tile__thumb {
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ── Yes/No toggle outline ─────────────────────────────────────────────────────────────────────
   The unselected half needs a visible border. Setting background:transparent on .k-group-start /
   .k-group-end (to stop the theme's grey fill) also left them looking like bare text with no edge,
   which is what made the pair read as "weird" against fleet's outlined control. */

.lr-inspection-step .k-button-group .k-button,
.lr-inspection-step .k-group-start,
.lr-inspection-step .k-group-end {
    border: 1px solid #D1DBE6;
    color: var(--text-color);
}

.lr-inspection-step .k-button-group .k-button.k-selected,
.lr-inspection-step .k-group-start.k-selected,
.lr-inspection-step .k-group-end.k-selected {
    border-color: var(--primary-green);
    color: #fff;
}