:root, [data-bs-theme=light] {
    --vz-primary: #C4A484;
    --vz-secondary: #422714;
    --vz-success: #0ab39c;
    --vz-info: #299cdb;
    --vz-warning: #f7b84b;
    --vz-danger: #f06548;
    --vz-light: #f3f6f9;
    --vz-dark: #000200;
    --vz-primary-rgb: 66,39,20;
    --vz-secondary-rgb: 196,164,132;
    --vz-success-rgb: 10,179,156;
    --vz-info-rgb: 41,156,219;
    --vz-warning-rgb: 247,184,75;
    --vz-danger-rgb: 240,101,72;
    --vz-light-rgb: 243,246,249;
    --vz-dark-rgb: 33,37,41;
    --vz-border-radius: 0.65rem;
    --vz-primary-light: #F8F2ED;
    --vz-topbar-search-bg: #F4EEE8;
    --vz-body-bg: #FBF6F2;
}
[data-theme=default][data-sidebar=dark] {
    --vz-vertical-menu-title-color: #9E9E9E;
    --vz-vertical-menu-item-color: #f3f6f9;
    --vz-vertical-menu-sub-item-color: #F8F2ED;
}
[data-theme=default]{
    --vz-header-item-sub-color: #000200;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>a.menu-link:after,
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-sm .nav-link,
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>a.menu-link{
    color: #171617;
}
.table-light {
    --vz-table-bg: #F7F3EE;
}
.btn-primary{
    background: #422714;
    /*background: linear-gradient(180deg, rgba(226, 164, 40, 1) 0%, rgba(247, 227, 158, 1) 23%, rgba(234, 188, 85, 1) 63%, rgba(226, 164, 40, 1) 84%);*/
    color: #FFF;
    border-color: #422714;
}
.navbar-menu {
    background: #3E2B1C;
}
.dashboadr-map-live-view .gmaps{
    height: 400px;
}
.btn-danger {
    --vz-btn-bg: var(--vz-primary);
    --vz-btn-border-color: var(--vz-primary);
    --vz-btn-disabled-bg: var(--vz-primary);
    --vz-btn-disabled-border-color: var(--vz-primary);
}
.card {
    --vz-card-border-radius: var(--vz-border-radius);
    --vz-card-inner-border-radius: var(--vz-border-radius);
    --vz-card-group-margin: calc(var(--vz-grid-gutter-width) * 0.5);
    border-radius: var(--vz-card-border-radius);
}
#page-topbar,
.header-main{
    background-color: var(--vz-white);
}
.hamburger-icon span {
    background-color: var(--vz-header-item-sub-color);
}
.header-profile-user{
    border:1px solid var(--vz-border-color);
}
@media (min-width: 768px){
    .topbar-user {
        background-color: #fff;
    }
}
.app-search .form-control {
    color: var(--vz-topbar-search-color);
}
.navbar-header .user-name-sub-text {
    color: #727272;
}
.btn-soft-primary {
    --vz-btn-color: var(--vz-dark);
    --vz-btn-bg: var(--vz-primary);
}
.custom-kynex-icon{
    background: url(../images/kynex-sidebar-icon.png);
    width: 28px;
    height: 28px;
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: -2px center;
}
.auth-one-bg .bg-overlay {
    background: -webkit-gradient(linear,left top,right top,from(var(--vz-primary-text-emphasis)),to(var(--vz-primary)));
    background: linear-gradient(to right, #ffe25c, var(--vz-primary));
    opacity: .9;
}
.shape>svg {
    fill: #FFFFFF;
}
.full-screen-view{
    min-height: 700px;
}
.image-upload-area .avatar-custom{
    width: 100%;
    height: 6rem;
}
.image-upload-area{

}
.iti{
    width: 100%;
}


.error {
    display: block;
    color: #dc3545;
    font-size: 0.670rem;
    margin-top: 5px;
}

#vehicleMakesTable .table .form-check {
    text-align: center;
}
#vehicleMakesTable,#vehicleTypesTable, .form-check.form-switch {
    text-align: center;
}



#vehicleMakesTable,#vehicleTypesTable,.list-inline {
    padding-left: revert;
}


#vehicleMakesTable, .hstack{
    display: inline-table;
}

.btn.btn-primary:hover {
    color: #FFF;
    background: #C4A484;
    /*background: linear-gradient(0deg, rgba(226, 164, 40, 1) 0%, rgba(247, 227, 158, 1) 23%, rgba(234, 188, 85, 1) 63%, rgba(226, 164, 40, 1) 84%);*/
    border-color: #C4A484;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgb(196 164 132 / 45%);
    filter: brightness(1.08);
}

/*********************** file preview ***********************/
/* Styling for the file input container */
.file-upload-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Styling for the file input */
#file-upload {
    position: relative;
    z-index: 1;
    background-color: transparent;
}

/* Styling for the preview container */
.preview-container {
    position: relative;
    /* position: absolute;
    top: 28px;
    right: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 2;
    border-radius: 0px 12px 12px 0px; */
}

.preview-container .delete-icon{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FCC35D;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.preview-container img{
    width: 105px;
    height: 105px;
    object-fit: contain;
    /* object-fit: cover; */
    max-width: 100%;
    /* background-color: #fff2bc; */
    border: 2px solid #FCC35D;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; */
    border-radius: 10px;
    margin-top: 5px;
    background: #fff;
}

/* Styling for the image preview */
.preview-image {
    /* max-width: 65px; */
    /* max-height: 100px; */
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: inherit;
    border-radius: 5px;
}

/* Hover zoom effect for the image preview */
/* .preview-image:hover {
    transform: scale(1.15);
    border-radius: 0;
    border-radius: 5px;
} */

/* Styling for the PDF button */
.view-pdf-button {
    margin-top: 5px;
}
/********** end of file preview **************************************/
.swal2-confirm.custom-ok-button-class {
    background-color: #FCC35D; /* Red background */
    color: #ffffff;           /* White text */
    border-color: #FCC35D;
    border: 0;
    border-radius:0.65rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
    box-shadow: none !important;
    outline: 0 !important;
    /*--vz-btn-bg: var(--vz-primary);
    --vz-btn-border-color: var(--vz-primary);
    --vz-btn-hover-bg: var(--vz-primary-text-emphasis);
    --vz-btn-hover-border-color: var(--vz-primary-text-emphasis);
    --vz-btn-focus-shadow-rgb: var(--vz-primary-rgb);
    --vz-btn-active-bg: var(--vz-primary-text-emphasis);
    --vz-btn-active-border-color: var(--vz-primary-text-emphasis);
    --vz-btn-disabled-bg: var(--vz-primary);
    --vz-btn-disabled-border-color: var(--vz-primary);*/
}

/* Add hover styles */
.swal2-confirm.custom-ok-button-class:hover {
    background-color: #000000; /* Darker red on hover */
}


.overlay-link{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.card-body .table-responsive.table-card{
    margin: 0 !important;
}


.navbar-menu .navbar-nav .nav-sm .nav-link.active, .navbar-menu .navbar-nav .nav-link.active {
    color: #FFF ;
    background: #896541;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
    background-color: #000000;
}

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



#previewModal #modal-content img{
    max-width: 200px !important;
    /* max-width: 500px !important; */
    /* height: 500px !important; */
    width: 100%;
    /* object-fit: cover; */
    object-fit: cover;
    /* aspect-ratio: 3 / 2;

}

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


div:where(.swal2-container).swal2-center>.swal2-popup{
    max-width: 320px;
    border-radius: 0.65rem;
    padding-bottom: 15px;
    /* height: 400px; */
}

div:where(.swal2-container).swal2-center>.swal2-popup{
    max-width: 340px;
    border-radius: 0.65rem;
    padding-bottom: 15px;
}

.swal2-icon{
    margin-top: -20px;
    height: auto;
    line-height: normal;
    font-size: inherit;
    border: 0 !important;
}

.swal2-icon-content img{
    width: 40px;
    height: 40px;
}

div:where(.swal2-container) div:where(.swal2-actions){
    margin-top: 5px !important;

}

div:where(.swal2-container) .swal2-html-container, .swal2-html-container{
    font-size: 1em;
    margin-top: 0;
}



.swal2-cancel.custom-cancel-button-class {
    background-color: #000000; /* Red background */
    color: #ffffff;           /* White text */
    border-color: #000000;
    border: 0;
    border-radius:0.65rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
    box-shadow: none !important;
    outline: 0 !important;
    /*--vz-btn-bg: var(--vz-primary);
    --vz-btn-border-color: var(--vz-primary);
    --vz-btn-hover-bg: var(--vz-primary-text-emphasis);
    --vz-btn-hover-border-color: var(--vz-primary-text-emphasis);
    --vz-btn-focus-shadow-rgb: var(--vz-primary-rgb);
    --vz-btn-active-bg: var(--vz-primary-text-emphasis);
    --vz-btn-active-border-color: var(--vz-primary-text-emphasis);
    --vz-btn-disabled-bg: var(--vz-primary);
    --vz-btn-disabled-border-color: var(--vz-primary);*/
}

/* Add hover styles */
.swal2-cancel.custom-cancel-button-class:hover {
    background-color: #FCC35D; /* Darker red on hover */
}

div.dt-container .dt-input{
    background-color: var(--vz-input-bg-custom) !important;
    background-clip: padding-box;
    border: var(--vz-border-width) solid var(--vz-input-border-custom) !important;
    border-radius: 10px !important;
    margin-right: 10px;
    padding-right: 10px !important;
    padding-left: 5px !important;
    outline: 0 !important;
    height: 37.5px !important;
}

.swal2-timer-progress-bar {
    background-color: #FCC35D;
}



.line-limit-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
            line-clamp: 1;
    -webkit-box-orient: vertical;
 }


 #previewModal .modal-dialog .modal-content{
    border-radius: 10px;
    overflow: hidden;
    max-width: 280px !important;
 }


.btn-dark:hover {
    background-color: #FCC35D;
    color: #ffffff;
    border-color: #FCC35D;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px; /* border thickness */
  border-radius: inherit;
  /*background: linear-gradient(135deg, #C4A484, #422714);*/
  background: #EBE6E0;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.state-wrap .card-body{
    position: relative;
}
.state-wrap .card-body::after{
    position: absolute;
    content: '';
    width: 34px;
    height: 3px;
    background: #3E2B1C;
    bottom: 8px;
    left: 8px;
    border-radius: 8px;
}

#bookingsChart{
    width:100%;
}

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

.apexcharts-xaxis-label{
    font-size:8px !important;
    font-weight:500 !important;
}

.apexcharts-yaxis-label{
    font-size:11px !important;
}
.text-secondary {
    color: var(--vz-primary) !important;
}


#bookingRatioChart{
    max-width:300px;
    margin:auto;
}

.booking-legend .item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
    font-size:12px;
}

.booking-legend .left{
    display:flex;
    align-items:center;
}

.booking-legend .dot{
    width:9px;
    height:9px;
    border-radius:50%;
    margin-right:9px;
    flex-shrink:0;
}

.booking-legend .percent{
    font-weight:600;
    color:#212529;
}

.donut-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
    pointer-events:none;
    z-index:5;
}

.donut-center .title{
    font-size:13px;
    font-weight:500;
    color:#444;
    line-height:1.2;
}

.donut-center .count{
    margin-top:4px;
    font-size:32px;
    font-weight:600;
    color:#212529;
    line-height:1;
}

.recent-bookings-card{
    border-radius:18px;
    border:1px solid #E9E3DB!important;
}

.recent-bookings-table{
    margin-bottom:0;
}

.recent-bookings-table thead th{
    background:#F7F3EE;
    color:#2F2F2F;
    font-size:13px;
    font-weight:700;
    padding:16px 22px;
    border-bottom:1px solid #E8E1D8;
    white-space:nowrap;
}

.recent-bookings-table thead th:first-child{
    /*border-top-left-radius:12px;*/
}

.recent-bookings-table thead th:last-child{
    /*border-top-right-radius:12px;*/
}

.recent-bookings-table tbody td{
    padding:14px 22px;
    vertical-align:middle;
    border-color:#EFEAE3;
    color:#353535;
    font-size:12px;
}

.user-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;
}

.booking-badge{
    padding: 5px 8px;
    border-radius:4px;
    font-size:10px;
    font-weight:600;
}

.badge-session{
    background:#EEE2D4;
    color:#4D3423;
}

.badge-training{
    background:#EADCCF;
    color:#4D3423;
}

.badge-vet{
    background:#8C5A2D;
    color:#fff;
}

.badge-product{
    background:#EFE2D3;
    color:#4D3423;
}

.badge-stabling{
    background:#A7774A;
    color:#fff;
}

.badge-breeding{
    background:#E8D4BC;
    color:#4D3423;
}

.status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:88px;
    padding:5px 8px;
    border-radius:4px;
    font-size:10px;
    font-weight:600;
}

.status-confirmed{
    background:#EAF6E4;
    color:#3E6B33;
}

.status-completed{
    background:#F2E6D9;
    color:#6D4C2F;
}

.status-shipped{
    background:#FFF3D7;
    color:#8B6514;
}

.status-pending{
    background:#FFE6C8;
    color:#B56A17;
}

.status-cancelled{
    background:#FBE3E3;
    color:#A33A3A;
}

.status-noshow{
    background:#E7E4E0;
    color:#4A4640;
}

.action-btn{
    color:#5B4635;
    font-size:20px;
    transition:.25s;
}

.action-btn:hover{
    color:#8C5A2D;
}

.btn-booking{
    background:#6D421D;
    color:#fff;
    border-radius:10px;
    padding:10px 22px;
    font-weight:600;
}

.btn-booking:hover{
    background:#8C5A2D;
    color:#fff;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
    background: #C4A484;
    border-color: #C4A484;
}

.date-range-picker{
    position:relative;
    /*width:420px;*/
    min-width: 240px;
}

.date-range-picker .form-control{
    height:40px;
    padding-left:36px;
    padding-right:26px;
    border:1px solid #DDD2C4;
    border-radius:8px;
    font-size:12px;
    font-weight:400;
    color:#422714;
    cursor:pointer;
    background:#fff;
    box-shadow:none;
}

.date-range-picker .form-control:focus{
    border-color:#9A6A3A;
    box-shadow:none;
}

.date-range-picker i:first-child{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:#A9773E;
    font-size:20px;
    pointer-events:none;
}

.date-range-picker .arrow{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    color:#4B3B2C;
    font-size:18px;
    pointer-events:none;
}


div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: #FCC35D !important;
    color: #000 !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #FCC35D !important;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long] {
    top: 1.5em !important;
    right: 1.5em !important;
    width: 1.9375em !important;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
    top: 1.875em !important;
    left: 1.1em !important;
    width: 0.98em !important;
}
div:where(.swal2-icon).swal2-success .swal2-success-ring {
    top: -0.35em !important;
    left: 0.3em !important;
    width: 50px !important;
    height: 50px !important;
    border-color: #FCC35D !important;
    background: #F8F2ED !important;
    z-index: 1 !important;
}
div:where(.swal2-icon).swal2-success .swal2-success-fix,
div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line],
div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right]{
    display: none !important;
}
.swal2-container .swal2-title {
    padding: 50px 24px 0 !important;
}
div:where(.swal2-container) .swal2-html-container, .swal2-html-container {
    font-size: 14px !important;
}

div:where(.swal2-icon).swal2-warning.swal2-icon-show {
    padding-top: 25px;
}

div:where(.swal2-icon).swal2-error.swal2-icon-show {
    padding-top: 25px;
    padding-bottom: 15px;
}

.dt-button.buttons-excel {
    background: #28a745 !important;
    color: white !important;
    border: 1px solid #28a745 !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.dt-button.buttons-excel:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.dt-button.buttons-excel i {
    margin-right: 6px;
}