html:not([dir=rtl]) .menu-toggle::after {
    content: "" !important;
}

@font-face {
    font-family: 'Material Icons Filled';
    src: url('../MaterialFonts/Material_Symbols_Rounded/MaterialSymbolsRounded-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.material-icons {
    font-family: 'Material Icons Filled';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Default size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}

@font-face {
    font-family: 'Avnir';
    src: url('../fonts/Sen/Sen-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

*:not(i) {
    font-family: 'Avnir' !important;
}

.btn-outline-primary {
    border-color: #ccc !important;
    color: #444 !important;
}

.bg-menu-theme .menu-link, .bg-menu-theme .menu-horizontal-prev, .bg-menu-theme .menu-horizontal-next {
    color: #fff !important;
}

.bg-menu-theme .menu-text {
    color: #fff !important;
}

.app-brand .layout-menu-toggle svg path {
    fill: #fff !important;
}

aside.bg-menu-theme {
    background-color: #0A3458 !important;
}

.menu-vertical .menu-item .menu-link:hover {
    background-color: #fff !important;
    color: #000 !important;
}

.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
    background-color: #fff !important;
}

aside.bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle), .bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle)::before {
    color: #000 !important;
}

a.btn-primary:hover {
    color: #fff !important;
    background-color: teal !important;
    border-color: white !important;
}

.btn-primary, button.btn-primary:hover, .modal-footer button.btn-success, .modal-footer button.btn-success:hover {
    background-color: #0A3458 !important;
    border-color: #011947 !important;
    color: #fff !important
}

.btn-label-primary, button.btn-label-primary:hover, #addFinalRecepie .modal-body > .table-responsive > button {
    background-color: #0A3458 !important;
    color: #fff !important;
}

.modal-footer button.btn-secondary, .modal-footer button.btn-secondary:hover {
    background-color: teal !important;
}

.page-item.active .page-link {
    background-color: #0A3458 !important;
    border-color: #0A3458 !important;
}

.page-item .page-link:hover {
    background-color: #0A3458 !important;
    color: #fff !important;
}

#template-customizer .template-customizer-open-btn {
    background: #0A3458 !important;
}

select.form-control:focus, .form-select:focus {
    border-color: #0A3458 !important;
}

.recepieViewDiv > h3 {
    display: flex;
    margin: 2% !important;
}

.recepieViewDiv form {
    margin: 2% !important;
}
/* .recepieViewDiv form,.recepieViewDiv .table-header-row,.recepieViewDiv .table-header-footer{margin-left:3.5% !important;}
.recepieViewDiv table,.table-action{margin-left:4.5%;}*/
.saverecepie {
    margin-right: 1rem !important;
}

.recepieViewDiv div.dataTables_wrapper div.dataTables_length, .recepieViewDiv div.dataTables_wrapper div.dataTables_filter {
    margin-top: unset !important;
}

.recipeModal form [class*="col-md-"], .recepieViewDiv form [class*="col-md-"] {
    padding-right: unset !important;
}

a {
    color: #0A3458 !important;
}

.menu-link .active a {
    color: #fff !important;
}

.recipeModal form .row {
    margin-right: 1% !important;
}

th {
    background-color: #f5f5f7 !important;
    color: #3b4056 !important;
    font-weight: bold !important;
    padding: 1.25rem 1.25rem !important
}

nav {
    max-width: unset !important;
}

.container-xxl {
    max-width: unset !important;
}

.products-categories h5 {
    margin-left: auto !important;
    width: 92% !important;
    display: flex;
}
/*.dropdown-shortcuts a{width:100% !important;border-radius:unset !important;}
.dropdown-shortcuts a:hover{background-color:unset !important;}*/
input, select:not(.dataTables_length .form-select) {
    padding: 8px !important;
}

.table > :not(caption) > * > * {
    padding: 0.3rem 0.3rem !important;
}

.table > th {
    padding: 0.5rem 1.2rem!important;
}

.light-style table.dataTable thead th.sorting:before, .light-style table.dataTable thead th.sorting:after {
    color: #0A3458 !important;
}

tbody tr {
    cursor: pointer;
}

/* #addFinalRecepie table input, #addFinalRecepie table select {
    width: 50% !important;
} */

#addFinalRecepie table th, #addFinalRecepie table td {
    width: 16% !important;
}

.nav-pills .nav-link.active {
    background-color: #0A3458 !important;
}

#final_recepies .icon_div i, #sub_recepies .icon_div i, #prep_recepies .icon_div i, #items .icon_div i, #modifiers .icon_div i, #ckproducts .icon_div i {
    font-size: xx-large;
}

#final_recepies .card-title, #sub_recepies .card-title, #prep_recepies .card-title, #items,#ckproducts, #modifiers .card-title {
    font-weight: bold;
}

#final_recepies {
    background-color: #0A3458 !important;
}
#ckproducts {
    background-color: #1A3E5E !important;
}

#sub_recepies {
    background-color: #2B495F !important;
}

#prep_recepies {
    background-color: #3B5661 !important;
}


#items {
    background-color: #4E6165 !important;
}

#modifiers {
    height: 100%;
    background-color: #5F6C6C !important;
}

    #final_recepies a.text-white, #sub_recepies a.text-white, #prep_recepies a.text-white, #items a.text-white, #modifiers a.text-white, #ckproducts a.text-white {
        display: flex;
        font-weight: lighter;
    }

    #final_recepies h6.text-white, #sub_recepies h6.text-white, #prep_recepies h6.text-white, #items h6.text-white, #modifiers h6.text-white, #ckproducts h6.text-white {
        margin: 0;
        font-weight: bold;
    }

.icon_div {
    text-align: right;
}

#modifiers .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.create-new.btn.btn-primary, .btn.btn-secondary.buttons-collection.dropdown-toggle.ExportBtn.btn-label-primary.me-4, .recepieViewDiv button.btn-secondary {
/*    border-radius: 5px !important;
*/    
}

.data_table_custom_search {
    padding: 0 2% 2% 1% !important;
}

.table th {
    text-transform: capitalize !important;
}

.recepieViewDiv .btn-group.dt-buttons .btn-group > .btn:not([class*=btn-outline-]) {
    border-color: unset !important;
}

html:not([dir=rtl]) .recepieViewDiv .btn-group > .btn-group:first-child > .btn:not([class*=btn-outline-]):first-child {
    border-color: unset !important;
}

.recepieViewDiv > form > .mt-4 {
    margin-top: 0 !important;
}

.add_final_recepie td, .edit_recepie td {
    width: 17% !important;
}

.add_final_recepie .add_item_to_collection, .edit_recepie + .edit_item_to_collection {
    background-color: #008080 !important;
}


/* FrontEnd Styles */

/* @media (min-width: 992px) {
  .MainContainer.container-xxl {
      padding-right: 1.5rem;
      padding-left: 0;
  }
} */

.nav-menu-items button {
    border-radius: 25px !important;
}

.MainSearch input, .MainSearch span {
    background-color: #fff !important;
}

.MainSearch input {
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

.MainSearch span {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}

.item_price {
    background-color: #0A3458 !important;
    color: #fff;
    border-color: transparent !important;
}

.item_calories {
    background-color: #cce8ba;
    color: #008080;
    border: #cce8ba;
    border-radius: 50%;
    padding: 5%;
    width: 25%;
    text-align: center;
    font-size: xx-small;
    margin-top: 5%;
}

.card-item .card-body {
    padding-top: 5% !important;
    padding-bottom: 5% !important;
    border-top-right-radius: 0.625rem;
    border-top-left-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 25vh;
}

.tab-pane .row .col-md-3 {
    margin-top: 3% !important;
}

.cat_menu {
    margin-top: 2% !important;
}

    .cat_menu + hr {
        margin-top: 0 !important;
    }

#navs-justified-food ul + hr {
    margin-top: 0 !important;
}

.card-item-footer {
    justify-content: space-around;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
}

    .card-item-footer button {
        width: 100%;
        border-bottom-left-radius: 0.625rem;
        border-bottom-right-radius: 0.625rem;
    }

button.OrderDetails.btn.btn-light:hover {
    background-color: #0A3458 !important;
    color: #fff !important;
}

button.OrderDetails.btn.btn-light {
    background-color: #0A3458 !important;
    color: #fff !important;
}

.customerName button {
    background-color: #fff !important;
}

.customerName span {
    margin-left: auto !important
}

.customerName i {
    margin-left: auto !important;
}

button.btn.btn-light.active {
    background-color: #008080 !important;
    color: #fff !important;
}

.itemsList th {
    background-color: #fff !important;
    color: unset !important;
}

.itemsList {
    margin-top: 2% !important;
}

.qty {
    background-color: #008080 !important;
    color: #fff !important;
    text-align: center !important;
    display: flex;
    justify-content: space-evenly;
    border-radius: 5px;
}

.itemsList td {
    font-size: small;
}
/* .itemsList tr td:nth-child(1){width:55% !important;}
.itemsList tr td:nth-child(2){width:20% !important;}
.itemsList tr td:nth-child(3){width:20% !important;}
.itemsList tr td:nth-child(4){width:5% !important;} */
.itemsList tr td:nth-child(2) {
    padding: 1% 1% !important;
}

.itemsList tr td:nth-child(4) {
    color: #B70F0A;
    padding: 1% 1% !important;
}

.priceSummary {
    background-color: #f6f6f6;
    padding: 3%;
}

strong.text-success {
    color: #008080 !important;
}

.side-panel .card {
    border: 1px solid #f6f6f6;
    padding: 1.25rem !important;
}

.side-panel .card-body {
    border: 1px solid #dfdfdf;
    border-radius: 0.625rem;
    padding: 0 !important;
    position: relative;
}

.OrderDetails, .OrderType, .customerName {
    padding: 0.75rem 0.75rem 0 0.75rem;
}

button.btn-disable {
    background-color: #A8C6FA !important;
    color: #fff !important;
}

button.btn-active {
    background-color: #008080 !important;
    color: #fff !important;
}

button.btn-discount i {
    color: #E93578 !important;
}

button.btn-discount b {
    color: #0A3458 !important;
}

button.btn-refund {
    color: #d6d6d6 !important;
}

button.btn-void {
    color: #d6d6d6 !important;
}

button.btn-print {
    color: #0A3458;
}

button.btn-print, button.btn-void, button.btn-refund, button.btn-discount {
    font-size: x-small;
}

.qtyList {
    height: 45.6vh;
    overflow: auto;
}

.priceSummary {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.nav-pills .nav-item .nav-link:not(.active):hover {
    background-color: #dfdfe3 !important;
    color: #0A3458 !important;
}

[role="tabpanel"] ul li button {
    font-size: x-small;
}

ul.nav-pills {
    white-space: nowrap;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scroll if any */
    flex-wrap: nowrap !important; /* Prevent wrapping of tabs to the next line */
}


.darkbg {
    /* background: linear-gradient(0deg, rgba(0,128,128,1) 0%, rgba(0,34,119,1) 50%, rgba(0,34,119,1) 100%); */
    background-color: #0A3458;
}

.dark {
    color: #ffffff!important;
}

.rounded3button {
    --bs-btn-border-radius: 3rem !important;
}
.custom-datatable-header {
    display:flex !important;
    justify-content:space-between !important;
}

.custom-button-wrapper {
    display: flex;
}

.create-new{ 
    margin: 0 10px;
}

.action_button_link{
    border: none;
    background-color: transparent;
}

.light-style .form-floating .select2-container--default .select2-selection--single .select2-selection__arrow {
    z-index: 2200 !important;
   height: 2.5rem !important;
}


label.select2Label {
    z-index: 999999 !important;
}

.table td {
    font-size: 0.8rem!important;
}

.inner-nav {
    min-width: 10% !important;
}

.modal-simple .modal-content {
    padding: 0.2rem !important;
    display: flex;
   
}

.nav-align-left-user > .tab-content {
    box-shadow: none !important;
}


.modal-body {
    padding-bottom: 0px !important;
}

.modal-title {
    font-size: 1.42rem !important;
    font-weight: 400;
}
    .form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select, .input-group, .input-group > .form-select {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    line-height: 1.375 !important;
}

    .input-group .input-group-text {
        padding: calc(0.5rem - 2px) calc(1rem - 1px) !important;
    }


.form-floating > label:not(.select2Label) {
    font-size: 0.8rem!important;
}


.no-gutter-custom {
    --bs-gutter-x: 0rem!important;
        }

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

::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #0A3458;
}


input[readonly] {
    background-color: rgba(0,0,0,0.1) !important;
    cursor: not-allowed;
}

/* Exception: Flatpickr inputs should look enabled */
input.flatpickr-input[readonly],
input.flatpickr-input.form-control[readonly],
#customDateInputs input[readonly] {
    background-color: #fff !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Style for readonly select fields */
select[readonly] {
    background-color: rgba(0,0,0,0.1) !important;
    pointer-events: none; /* Prevent dropdown interaction */
    cursor: not-allowed;
}

/* Alternative for disabled select fields (since select doesn't support readonly) */
select:disabled {
    background-color: rgba(0,0,0,0.1) !important;
    color: #3b4056 !important;
    cursor: not-allowed;
}

div#offCanvasBottom {
  /*height: 80% !important;*/
}

.offcanvas-backdrop {
    z-index: 1119!important;
}

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

.offcanvas.offcanvas-bottom {
        height: auto!important;
       
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animated-logo {
    animation: pulse 2s ease-in-out infinite;
    width: 70%;
    display: block;
    margin: 0 auto;
}

/* Select2 Minified Styles - Only applies to elements with select2-minified class */
.select2-minified + .select2-container--default .select2-selection--single {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    line-height: 1.375 !important;
}

.select2-minified + .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 0.8rem !important;
    line-height: 1.375 !important;
    padding: 0.5rem 0.75rem !important;
}

.select2-minified + .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.5rem !important;
    width: 1.5rem !important;
}

.select2-minified + .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-width: 0.25rem 0.25rem 0 0.25rem !important;
    margin-top: -0.125rem !important;
}

/* Select2 dropdown options for minified version */
.select2-minified + .select2-container--default .select2-dropdown {
    font-size: 0.8rem !important;
}

.select2-minified + .select2-container--default .select2-results__option {
    padding: 0.25rem 0.5rem !important;
    line-height: 1.2 !important;
    min-height: 1.5rem !important;
}

.select2-minified + .select2-container--default .select2-results__option--highlighted[aria-selected] {
    padding: 0.25rem 0.5rem !important;
    line-height: 1.2 !important;
    min-height: 1.5rem !important;
}

/* Search input in dropdown for minified version */
.select2-minified + .select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.5rem !important;
    height: 1.75rem !important;
    line-height: 1.2 !important;
}

/* Placeholder text for minified version */
.select2-minified + .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
}

/* Override Bootstrap's d-flex class when force-hide is applied */
.d-flex.force-hide,
.form-check.force-hide,
div.force-hide {
    display: none !important;
}

.btn { 
    white-space:nowrap!important;
}

input.form-control.form-control-sm:read-only {
    background-color: #e0e0e0 !important;
    color: #656565;
}


/* Select2 - Minified Look with Vertically Centered Text */
.select2-container--default .select2-selection--single {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 0.8rem !important;
        padding: 0 0.75rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100% !important;
        width: 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-width: 0.25rem 0.25rem 0 0.25rem !important;
            margin-top: 0 !important;
        }

.simplebar-track.simplebar-horizontal {
    display: none !important;
}

/* SimpleBar scrollbar track */
.simplebar-track.simplebar-vertical {
    width: 10px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
    border-radius: 8px;
}

/* SimpleBar scrollbar thumb */
.simplebar-scrollbar:before {
    content: '';
    display: block;
    background-color: #0A3458;
    border-radius: 8px;
    height: 100%;
}

.tab-content:not(.doc-example-content) {
   padding: 0.2rem;
        }

@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        --bs-modal-width: 90vw!important;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 90vw !important;
    }
}

/* Dashboard Card Hover Effects */
.dashcard .card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.dashcard:hover .card {
    background-color: #0A3458 !important;
    color: white !important;
}

.dashcard:hover .card * {
    color: white !important;
}

.dashcard:hover .card h5,
.dashcard:hover .card h3,
.dashcard:hover .card h6 {
    color: white !important;
}

 .dashcard:hover .card i {
     color: white !important;
 }
 
 /* Revenue Display Styling */
 .revenue-whole {
     font-size: 1.2em;
     font-weight: 700;
     color: #0A3458;
 }
 
 .revenue-decimal {
     font-size: 0.6em;
     font-weight: 400;
     color: #6c757d;
     vertical-align: baseline;
     margin-left: 2px;
 }
 
 .dashcard:hover .revenue-whole,
 .dashcard:hover .revenue-decimal {
     color: white !important;
 }

/* Metrics Slider/Carousel */
.row.metrics-scroll {
    position: relative;
    overflow: hidden !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 60px; /* Space for navigation arrows */
}

.row.metrics-scroll > [class^="col-"],
.row.metrics-scroll > [class*=" col-"] {
    flex: 0 0 auto !important;
    transition: transform 0.3s ease;
}

/* Card sizing - flexible when space allows, fixed when navigation needed */
.row.metrics-scroll .dashcard {
    width: 280px !important;
    min-width: 280px !important;
    margin-right: 1rem;
    flex: 1 1 auto !important;
}

/* When no navigation needed, distribute space evenly */
.row.metrics-scroll.no-navigation .dashcard {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Navigation arrows */
.metrics-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(10, 52, 88, 0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    color: white !important;
    font-size: 18px !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.metrics-nav-btn:hover {
    background: rgba(10, 52, 88, 1);
    transform: translateY(-50%) scale(1.1);
}

.metrics-nav-prev {
    left: 10px;
}

.metrics-nav-next {
    right: 10px;
}

/* Disable arrows when not needed */
.metrics-nav-btn.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Debug: Ensure buttons are visible */
.metrics-nav-btn {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure the container has proper positioning context */
.row.metrics-scroll {
    position: relative !important;
}

/* Date Range Picker Styles */
.date-range-picker-input {
    background-color: #fff !important;
    cursor: pointer !important;
}

.date-range-picker-input:focus {
    background-color: #fff !important;
}

/* Flatpickr inputs - override the global readonly grey background and add border radius */
input.flatpickr-input {
    background-color: #fff !important;
    cursor: pointer !important;
    border-radius: 0.375rem !important;
}

input.flatpickr-input:focus {
    background-color: #fff !important;
}

input.flatpickr-input[readonly] {
    background-color: #fff !important;
    cursor: pointer !important;
    border-radius: 0.375rem !important;
}

input.flatpickr-input[readonly]:focus {
    background-color: #fff !important;
}

/* More specific override for the date range picker container */
#customDateInputs input.flatpickr-input,
#customDateInputs input.flatpickr-input[readonly] {
    background-color: #fff !important;
    cursor: pointer !important;
    border-radius: 0.375rem !important;
}

/* Input group with flatpickr - adjust border radius for proper appearance */
#customDateInputs .input-group input.flatpickr-input,
#customDateInputs .input-group input.form-control,
#customDateInputs .input-group input {
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#customDateInputs .input-group .input-group-text {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* General flatpickr input group styling - for date-range-picker-input class */
.input-group input.date-range-picker-input,
.input-group input.flatpickr-input {
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Flatpickr custom styling */
.flatpickr-calendar {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
    background: #0A3458 !important;
    border-color: #0A3458 !important;
}

.flatpickr-day.inRange {
    background: rgba(10, 52, 88, 0.1) !important;
    border-color: transparent !important;
}

/* Authentication Footer Styles */
.auth-footer {
    text-align: center;
    padding: 1rem;
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: auto;
}

.auth-footer p {
    margin: 0;
}

/* Login Page Specific Styles */
/* Login form username and password controls */
#account input#Input_Email,
#account input#password {
    min-height: 56px !important;
    font-size: 1.1rem !important;
    padding: 1rem 1.25rem !important;
}

/* Login form labels */
#account label[for="Input_Email"],
#account label[for="Input_Password"] {
    font-size: 1rem !important;
}

/* Remember Me Checkbox Styles */
#account #remember-me.form-check-input {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-top: 0.125rem !important;
    cursor: pointer !important;
}

#account label[for="Input_RememberMe"] {
    font-size: 1rem !important;
    cursor: pointer !important;
    margin-left: 0.5rem !important;
}

#account .form-check.mt-2 {
    margin-top: 0.5rem !important;
}

/* Login Button Styles */
#login-submit.btn.btn-primary,
#next-button.btn.btn-primary {
    min-height: 56px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 1rem 2rem !important;
    border-radius: 0.375rem !important;
}

#login-submit.btn.btn-primary .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
}

/* 2-Step Login Flow Styles */
.login-step {
    transition: opacity 0.3s ease-in-out;
}

/* Display email with change button */
#step-password #display-email {
    font-weight: 500;
    color: #0A3458;
}

#step-password #change-email {
    color: #0A3458;
    text-decoration: none;
    font-size: 0.875rem;
}

#step-password #change-email:hover {
    text-decoration: underline;
}

/* Brand/Location Selector Styling - Shared across dashboards and reports */
.all-option {
    font-weight: 700;
    color: #007bff;
    background-color: #e7f3ff;
    padding: 10px 12px;
    border-bottom: 2px solid #007bff;
    font-size: 1.1em;
}

.brand-option {
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
}

.location-option {
    font-weight: normal;
    color: #6c757d;
    padding: 6px 12px 6px 24px;
    border-left: 2px solid #e9ecef;
    margin-left: 8px;
}

/* Add visual separation between brand groups */
.brand-option + .brand-option {
    border-top: 2px solid #dee2e6;
    margin-top: 4px;
}

/* Desktop styles for authentication pages */
@media (min-width: 769px) {
    /* Ensure proper alignment on desktop */
    .no-gutter-custom.row {
        align-items: stretch;
        min-height: 100vh;
    }
    
    /* Make col-8 a flex container to push footer to bottom */
    .no-gutter-custom .col-8 {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }
    
    .no-gutter-custom .authentication-wrapper {
        padding: 0 !important;
        flex: 1 !important;
        min-height: calc(100vh - 60px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .no-gutter-custom .authentication-inner {
        padding: 0 !important;
        width: 100%;
    }
    
    /* Footer at bottom on desktop */
    .no-gutter-custom .col-8 .auth-footer {
        flex: 0 0 auto !important;
        padding: 0.5rem !important;
        height: 60px !important;
    }
}

/* Mobile Responsive Layout for Login/Auth Pages */
@media (max-width: 768px) {
    
    /* Ensure body and html don't cause overflow */
    html {
        overflow-x: hidden !important;
        height: 100%;
    }
    
    body {
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 100vh !important;
        height: 100vh !important;
        max-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Position-relative container fills body */
    body > .position-relative {
        flex: 1 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Row fills container perfectly */
    .no-gutter-custom.row {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        height: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    
    /* Logo column - compact, takes only needed space */
    .no-gutter-custom .col-4 {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    
    .no-gutter-custom .col-4.darkbg {
        text-align: center;
        padding: 1.5rem 1rem !important;
    }
    
    /* Content column - fills ALL remaining space */
    .no-gutter-custom .col-8 {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Wrapper scrolls if content is large */
    .no-gutter-custom .col-8 .authentication-wrapper {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem 30px !important;
        overflow-y: auto !important;
    }
    
    /* Footer stays at bottom on mobile */
    .no-gutter-custom .col-8 .auth-footer {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 0.5rem 1.5rem !important;
    }
    
    /* FIX: Override page-auth.css min-height: 100vh that causes scrollbar */
    .authentication-wrapper.authentication-basic {
        min-height: auto !important;
        height: auto !important;
        flex-basis: auto !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Authentication inner - no padding */
    .no-gutter-custom .authentication-inner {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Smaller logo on mobile */
    .no-gutter-custom .animated-logo {
        max-width: 140px !important;
        width: 50% !important;
        margin: 0 auto !important;
        display: block !important;
    }
}