/*  -------------------------------------------------------------------------- */
/*  --------------------- Variables ------------------------------------------ */
/*  -------------------------------------------------------------------------- */
:root {
    --primary-color: #18B9D9;
}


/*  -------------------------------------------------------------------------- */
/*  --------------------- Main ----------------------------------------------- */
/*  -------------------------------------------------------------------------- */
.main-content {
    z-index: 1;
    --bs-navbar-vertical-width: 250px;
    margin-left: 250px;
    padding-bottom: 50px;
}
.main-content.sidebar-is-collapsed {
    --bs-navbar-vertical-width: 80px;
    margin-left: 80px;
}

.container-fluid {
    padding-left: 2.25rem; /*!important;*/
    padding-right: 2.25rem; /*!important;*/

}
.main-canvas {
    background-color: #f7f9fb;
}

body {
    display: block;
    /* overflow: hidden;*/
    padding-right: 0px;
}

/*[data-bs-theme=light] body {
    background-color: #f1f5f7;
}*/

#toggleSidebar {
    background-color: rgb(21, 46, 77);
    border: none;
    position: fixed;
    top: 45%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 35px;
}
    #toggleSidebar i{
        height:15px;
        width:15px;
    }

@media (max-width:768px) {
    #toggleSidebar {
        display:none;
    }
}


#toggleSettings {
    background-color: rgb(21, 46, 77);
    border: none;
    position: fixed;
    right: 0px;
    top: 40%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    writing-mode: vertical-rl; /* 🔁 rotates text vertically */
    text-orientation: mixed;
    font-weight: bold;
    font-size: 14px;
    color: var(--primary-color);
    padding-top: 7px;
    padding-bottom: 7px;
}

#floating-bug {
    position: fixed;
    bottom: 60px;
    right: 60px;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50%;
    font-size: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: .5;
}
    #floating-bug:hover {
        opacity: 1;
    }
    #floating-bug i {
        color: #fff;
        opacity: .5;
    }
    #floating-bug:hover i {
        opacity: 1;
    }
.tier-level {
    text-align: center;
    color: #fff;
    font-size: .9rem;
}
    .tier-level.free{

    }

    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Sections ------------------------------------------- */
    /*  -------------------------------------------------------------------------- */
    .section-header {
        /*    margin: 1rem 0 1rem;
        font-size: 2rem;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;*/
        /*color: #0183b3;*/
    }

.section-body {
}

.card > .section-header {
    padding-left: 20px;
}


/*  -------------------------------------------------------------------------- */
/*  --------------------- Cards ---------------------------------------------- */
/*  -------------------------------------------------------------------------- */
.card-header {
   /* background-color: rgba(218,224,236,.7);*/
    /*font-size: 1.5rem;
    font-weight: 500;*/
}

.card {
    /*border: 1px solid #ddd;
    border-radius: 5px;*/
    box-shadow: rgba(18, 38, 63, 0.03) 0px 12px 24px 0px;
    margin-bottom: 0px
}


.card-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

    .card-controls button {
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1rem !important;
        color: #555 !important;
        
    }
        .card-controls button i {
            color: var(--bs-body-color);
            opacity: .5;
        }
        .card-controls button i:hover {
            opacity:1;
        }

.card.fullscreen {
    z-index: 9000;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
}
.card.fullscreen .card-body{
    max-height:90vh;
}
    .card.fullscreen canvas {
        height: unset !important;
        width: 90% !important;
    }

/*  -------------------------------------------------------------------------- */
/*  --------------------- Tables --------------------------------------------- */
/*  -------------------------------------------------------------------------- */
th {
    position: relative; /* Set the relative positioning context for the absolute arrows */
    cursor: pointer; /* Optional: Change the cursor on hover */
    padding-right: 20px; /* Provide space for the arrows */
}

.arrow {
    user-select: none;
    margin-left: 5px; /* Space between the caption and the first arrow */
    font-size: 12px; /* Adjust size as needed */
    position: absolute; /* Position arrows absolutely within the table header */
}

    .arrow.up,
    .arrow.down {
        line-height: 1rem;
        font-size: 8px;
        opacity: 0.2;
    }

    .arrow.up {
        top: 10px;
    }

    .arrow.down {
        top: 20px;
    }

    .arrow.active {
        opacity: .6;
    }

    .table.table-borderless td{
        border:none;
    }
/*  -------------------------------------------------------------------------- */
/*  --------------------- Forms ---------------------------------------------- */
/*  -------------------------------------------------------------------------- */
.form-group {
    margin-top: 15px;
    margin-bottom: 15px;
}

.control-label {
    margin-bottom: 7px;
}


/*  -------------------------------------------------------------------------- */
/*  --------------------- Buttons--------------------------------------------- */
/*  -------------------------------------------------------------------------- */
.btn-new {
   /* background-color: #4CAF50;
    border-color: #4CAF50;
    border-radius: 0px;
    color: #fff;*/
}

.edit-button-card {
    position: absolute;
    right: var(--bs-card-spacer-x);
    top: var(--bs-card-spacer-x);
}

.edit-button-subitem {
    margin-left: 5px;
}
.add-button-subitem {
    margin-left: 5px;
}
/*  -------------------------------------------------------------------------- */
/*  --------------------- "No" Classes --------------------------------------- */
/*  -------------------------------------------------------------------------- */
.no-border {
    border: none !important;
}

.no-padding {
    padding: 0px;
}

.no-margin {
    margin: 0px;
}

.no-spaces {
    padding: 0px;
    margin: 0px;
}


/*  -------------------------------------------------------------------------- */
/*  --------------------- Tabs ----------------------------------------------- */
/*  -------------------------------------------------------------------------- */
.nav-item > .nav-link {
   /* border-bottom: 3px solid transparent;
    color: #212837;
    padding: 1rem;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-bottom: -1px;
    display: block;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;*/
}
    .nav-item > .nav-link.active {
      /*  border-bottom-color: #1f6bff;
        color: #212837;*/
    }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    /*color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;*/
}
/*  -------------------------------------------------------------------------- */
/*  --------------------- Custom --------------------------------------------- */
/*  -------------------------------------------------------------------------- */
.d-flex-notimportant {
    display: flex;
}
/*.align-items-center {
    text-align: center;
}*/
.align-items-right{
    text-align:right !important;
}

.align-items-left {
    text-align: left !important;
}
.clickable {
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s, border 0.3s; /* Smooth transition for hover effects */
}

    .clickable:hover {
        opacity: .7;
    }

.full-width {
    width: 100% !important;
}
.ml-4 {
    margin-left: 4px;
}
.ml-5 {
    margin-left: 5px;
}
.ml-10 {
    margin-left: 10px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mr-10 {
    margin-right: 10px;
}
.no-border{
    border:none !important;
}
.px-10{
    padding-left:10px;
    padding-right:10px;
}
.p20 {
    padding: 20px;
}
.w-100 {
    width: 100%
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

@media (max-width: 768px) {
    .w-30, .w-40, .w-60, .w-70 {
        width: 50%
    }
}

.lawfabric-heading {
    margin-top: 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid #fff;
}
/*.company-logo {
    height: 30px;
    width: 30px;
    margin-right: 10px;
}
*/

.center-column {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
    height: 100%;
}

/*.center-within {
    position: relative;
    height: 100vh;
    width: 100%;
}
*/
.center-elements > div {
    position: absolute;
    margin: auto;
    width: 100px; /* Set a fixed width */
    text-align: center;
}
.no-wrap {
    white-space: nowrap;
}
.dropdown-submenu {
    position: relative;
}

    /* Position the submenu to the right of its parent */
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        right: 102%;
        margin-top: -1px;
    }

.lawfabric-box-shadow {
    box-shadow: rgba(18, 38, 63, 0.03) 0px 12px 24px 0px;
}
/*.toc-navigator{
    background-color:#fff;
}*/

.report-tabs > .nav-link {
    border: 1px solid rgb(21, 46, 77);
    color: rgb(21, 46, 77);
    margin-right: 15px;
}

    .report-tabs > .nav-link.active {
        background-color: rgb(21, 46, 77);
        color: #fff;
    }

    .underline{
        text-decoration:underline;
    }

.content-box-half {
    width: 50%;
    margin-left: 25%;
}

@media (max-width: 768px) {
    .content-box-half {
        width: 100%;
        margin-left: 0%;
    }
}
.mobile-only{
    display:none;
}
@media (max-width: 768px) {
    .mobile-only {
        display:block
    }
}

.inactive-row{
    background-color:#ddd;
}
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Modals --------------------------------------------- */
    /*  -------------------------------------------------------------------------- */
    .modal-title {
        font-size: 1.5rem;
    }
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Toggle Buttons ------------------------------------- */
    /*  -------------------------------------------------------------------------- */
    .lawfabric-toggle-group {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
    }
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Maps ---------------------------------------------- */
    /*  -------------------------------------------------------------------------- */
    .map_format {
        min-height: 300px;
        min-width: 200px;
        width: 100%;
    }

    .pac-container {
        z-index: 10000 !important;
    }

    .gm-style {
        color: black;
    }
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Actions -------------------------------------------- */
    /*  -------------------------------------------------------------------------- */
    .shrink-me {
        width: 50%;
    }

    .dont-show {
        display: none;
    }

    .opacity-0 {
        opacity: 0;
        pointer-events: none;
    }

    .opacity-1 {
        opacity: 1;
    }

    .hide {
        display: none !important;
    }

    .hidden {
        display: none !important;
    }

    .button-disable, .row-disable {
        pointer-events: none;
        opacity: .5;
    }

    .button-hide {
        pointer-events: none;
        opacity: 0;
    }


    .no-click {
        color: inherit;
        pointer-events: none;
    }

    .disable-checkbox {
        pointer-events: none; /* Prevent interaction */
        opacity: 0.5; /* Dim the checkbox to indicate it's disabled */
        cursor: not-allowed; /* Show a "not-allowed" cursor when hovering */
    }
.disable-selectlist {
    pointer-events: none; /* Prevents clicking */
    background-color: #e9ecef; /* Bootstrap's disabled bg color */
    color: #6c757d; /* Bootstrap's disabled text color */
}



/*  -------------------------------------------------------------------------- */
/*  --------------------- Bootbox ----------------------------------------------- */
/*  -------------------------------------------------------------------------- */
.bootbox.modal{
    z-index:9000;
}
.modal-backdrop{
    z-index:8999;
}
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Misc ----------------------------------------------- */
    /*  -------------------------------------------------------------------------- */
    .editButton {
        /*font-size: .5em;
    vertical-align: middle;*/
    }

    .lawfabric-anchor-text {
        color: inherit;
        /* margin-top: 0;
    margin-bottom: 0 !important;
    font-weight: 600;
    line-height: 1.2;
    font-size: 1rem;
    text-decoration: none;*/
        /*color: #1e2022;*/
    }

        .lawfabric-anchor-text:hover {
            /*color: #0183b3*/
        }

    .error {
        color: rgb(230, 55, 87);
        border-color: rgb(230, 55, 87);
    }

    .card-instructions {
        padding-top: 20px;
        font-size: 15px;
    }

    .grey-circle {
        background-color: #ddd;
        border-radius: 50%;
        display: inline-block;
        height: 2rem;
        width: 2rem;
    }

    .gray-top-border {
        border-top: 1px solid #aaa;
        padding-top: 10px;
        margin-top: 10px;
    }

    .indicator {
        font-size: 18px;
    }

    .indicator-xs {
        font-size: 8px;
    }

    .indicator-sm {
        font-size: 12px;
    }

    .indicator-lg {
        font-size: 30px;
    }

    .font-sm {
        font-size: 14px;
    }

    .dropdown-item {
        cursor: pointer;
    }

    .btnChangeMode > i {
        color: transparent !important;
    }

    .btnChangeMode.active > i {
        color: var(--primary-color) !important;
    }

    [data-bs-theme="dark"] .btnChangeMode.active > i {
        color: #fff !important;
    }

    .btnChangeMode.active:hover > i {
        color: var(--primary-color) !important;
    }
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Charts --------------------------------------------- */
    /*  -------------------------------------------------------------------------- */
    .legend span {
        color: white;
    }
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Icons ---------------------------------------------- */
    /*  -------------------------------------------------------------------------- */
    i.status-icon {
        color: #aaa;
    }

        i.status-icon.active {
            color: rgb(0, 217, 126);
            opacity: 1;
        }

        i.status-icon.inprocess {
            color: rgb(255, 193, 7);
            opacity: 1;
        }

        i.status-icon.disable {
            pointer-events: none;
            opacity: .5;
        }
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- To fix the light theme  ---------------------------- */
    /*  -------------------------------------------------------------------------- */

    .table-hover > tbody > tr > td > a {
        color: unset;
    }
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Colors ---------------- ---------------------------- */
    /*  -------------------------------------------------------------------------- */
    .white {
        color: #fff !important;
    }
    /*  -------------------------------------------------------------------------- */
    /*  --------------------- Images --------------------------------------------- */
    /*  -------------------------------------------------------------------------- */
    .image-logo {
        width: 30px;
        /*height: 25px;*/
    }

    .image-xsmall {
        height: 25px;
    }

    .image-small {
        height: 50px;
    }
.user-photo .image-small {
    width: 50px;
}

    .image-medium {
        /*height: 80px;*/
        max-width: 100px;
        max-height: 100px;
        padding: 10px;
        width: 100%;
    }

    .image-large {
        height: 300px;
    }

    .image-xlarge {
        height: 500px;
    }

    .image-default {
        height: 500px;
    }

    .company-logo {
        width: 30px;
        /*    height: 25px;*/
    }

    .company-logo-parent {
        /* width: 40px;*/
        background-color: #12263f;
        /*    border: 1px solid #ddd;*/
        border-radius: 5px;
        padding: 5px;
    }
    /*  *****************************************************************************************  */
    /*  **************************************[ TOC (Table of Contents ]*************************  */
    /*  *****************************************************************************************  */

    .toc-navigator {
        .list-group-item.active
    {
        border-color: var(--primary-color);
    }

.list-group-item {
    cursor: pointer;
    background-color: #fff;
}

    .slide-deck-toc-item.active {
        background-color: rgb(21, 46, 77);
        color: #fff;
    }

    .subsection {
        padding-left: 40px !important;
    }

    .toc-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .toc-title {
        flex-grow: 1;
    }

    .subsection > .toc-title {
        padding-left: 40px; /* Adjust as needed */
    }
}



/*  -------------------------------------------------------------------------- */
/*  --------------------- Calendar ------------------------------------------- */
/*  -------------------------------------------------------------------------- */

.scheduler {
    justify-content: center;
}

.scheduler-slide {
    display: none;
}

.scheduler-prev, .scheduler-next {
    border: 1px solid #ccc;
}

.scheduler-subtitle {
    display: flex;
    justify-content: space-between; /* Distributes items evenly, with space between them */
    align-items: center; /* Aligns items vertically center */
    width: 50%; /* Adjust as needed */
    padding: 10px; /* Optional: for spacing around the items */
    margin-left: 25%;
}
@media (max-width: 768px) {

    .scheduler-subtitle {
        width: 100%;
        margin-left: 0px;
    }
}
.scheduler-subtitle-item {
    text-align: center;
}
@media (max-width: 768px) {
    .btn.scheduler-subtitle-item {
        width: 80px !important;
    }
}
.scheduler-dates {
    width: 70%;
    margin-left: 15%;
    font-size: 0px;
}
@media (max-width: 768px) {
    .scheduler-dates {
        width:100%;
        margin-left:0px;
    }
}
.scheduler-caption {
    font-size: 17px;
}
@media (max-width: 768px) {
    .scheduler-caption {
        font-size: 14px;
    }
}
.appt-button-wrapper {
    display: inline-block;
    width: 25%;
    padding: 5px;
    box-sizing: border-box;
    font-size: initial;
}

.appt-button {
    width: 100%;
    opacity: .8;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .btn.appt-button {
        width: 100% !important;
        font-size: 14px;
        padding-left: 0px;
        padding-right: 0px;
    }
}
    .appt-button.selected, .appt-button:hover {
        opacity: 1;
    }

.appt-existing {
    background-color: #fdb700;
    pointer-events: none;
}

.appt-inactive {
    background-color: #ddd;
    color: #999;
    pointer-events: none;
}


/*  -------------------------------------------------------------------------- */
/*  --------------------- "No" Classes --------------------------------------- */
/*  -------------------------------------------------------------------------- */

/*  *****************************************************************************************  */
/*  **************************************[ Light Mode ]*************************************  */
/*  *****************************************************************************************  */
/*[data-bs-theme="light"] .btn-close {
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23152e4d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
}
*/
.modal-header .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
}

.btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2312263F'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
}

    /*  *****************************************************************************************  */
    /*  **************************************[ Dark Mode ]**************************************  */
    /*  *****************************************************************************************  */
    [data-bs-theme="dark"] {
    --bs-heading-color: #fff;
}

        [data-bs-theme="dark"] .toc-navigator .list-group-item {
            background-color: rgb(21, 46, 77);
            color: #fff;
        }

    [data-bs-theme="dark"] .btn-close {
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
    }

    [data-bs-theme="dark"] .main-canvas {
        background-color: unset;
    }

    [data-bs-theme="dark"] .toc-navigator {
        background-color:transparent;
    }

    [data-bs-theme="dark"] .report-tabs > .nav-link {
        border: 1px solid rgb(110, 132, 163);
        color: rgb(110, 132, 163);
        margin-right: 15px;
    }

    [data-bs-theme="dark"] .report-tabs > .nav-link.active {
        color: white;
        border-color: white;
        background-color: transparent;
    }

    [data-bs-theme="dark"] .card-controls button i {
        color: #fff !important;
    }

    [data-bs-theme="dark"] #modal-wizard-body {
        background-color: rgb(36, 65, 102);
    }

    [data-bs-theme="dark"] td .fa-regular {
        color: #fff;
    }

    [data-bs-theme="dark"] td .fa-solid {
        color: #fff;
    }

    [data-bs-theme="dark"] td .fa-sharp {
        color: #fff;
    }

    [data-bs-theme="dark"] .header {
        background-color: transparent;
    }

    [data-bs-theme="dark"] .offcanvas-body {
        border: 1px solid #fff;
    }

        [data-bs-theme="dark"] .modal-body {
            background-color: rgb(36, 65, 102);
            color: #fff;
        }

    [data-bs-theme="dark"] .dropdown-item:hover, .dropdown-item:hover i {
        background-color: #fff;
        color: var(--primary-color);
    }

    [data-bs-theme="dark"] .dropdown-menu {
        color: #fff;
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    [data-bs-theme="dark"] .dropdown-item {
        color: #fff;
    }

    [data-bs-theme="dark"] .dropdown-divider {
        color: #fff;
        border-color: #fff;
    }

    [data-bs-theme="dark"] .badge-square.badge-sm {
        background-color: transparent !important;
    }

    [data-bs-theme="dark"] .badge-square.badge-md {
        background-color: transparent !important;
    }

    [data-bs-theme="dark"] .badge-square.badge-lg {
        background-color: transparent !important;
    }
    [data-bs-theme="dark"] .badge-square.badge-danger {
        color: #e63757;
    }
    [data-bs-theme="dark"] .badge-square.badge-warning {
        color: rgb(255, 149, 0);
    }
    [data-bs-theme="dark"] .badge-square.badge-success {
        color: rgb(0, 217, 126);
    }
    [data-bs-theme="dark"] .badge-square.badge-inprocess {
        color: #FFD43B;
    }

    [data-bs-theme="dark"] .badge-square.badge-tag {
        color: var(--primary-color);
    }
    [data-bs-theme="dark"] .badge-square.badge-secondary {
        color: #fff;
    }


    [data-bs-theme="dark"] select option {
        background-color: var(--bs-input-placeholder-color);
        color: #212529;
    }

        [data-bs-theme="dark"] select option:hover {
            background-color: #e9ecef;
        }

/*  *****************************************************************************************  */
/*  **************************************[ Summer Note ]************************************  */
/*  *****************************************************************************************  */
/*.note-editor.note-airframe {
    border: 1px solid #ccc;
    height: 200px;
    padding: 20px;
}*/

.note-editor .note-editing-area {
    border: 1px solid #ccc !important;
    border-radius: 5px;
    min-height: 200px;
    padding: 15px;
}

/*  *****************************************************************************************  */
/*  **************************************[ Blades ]************************************  */
/*  *****************************************************************************************  */
/* Make the offcanvas fill and create a column context */
#offcanvasBladePrintout.offcanvas {
    display: flex;
    flex-direction: column;
    /* offcanvas already spans the viewport, but this makes things explicit */
    /*    inset: 0 auto 0 auto;*/ /* keep Bootstrap's fixed positioning behavior */
}

#offcanvasBladePrintout .offcanvas-body {
    position: relative;
}
/* Column layout inside the body; stop the body itself from scrolling */
    #offcanvasBladePrintout .offcanvas-body.no-overflow {
        display: flex;
        flex-direction: column;
        overflow: hidden !important; /* critical: inner child will handle scroll */
        flex: 1 1 auto; /* fill the offcanvas */
        min-height: 0; /* allow shrinking so children can scroll */
    }

    #offcanvasBladePrintout .offcanvas-body > .btn-close[data-bs-dismiss="offcanvas"] {
        position: absolute;
        top: 1.75rem;
        right: 2.75rem;
        z-index: 10; /* above your sticky header (which you set to 1) */
    }
@media (max-width: 768px) {
    #offcanvasBladePrintout .offcanvas-body > .btn-close[data-bs-dismiss="offcanvas"] {
        right: 2.75rem;
    }
}
    /* Your content wrapper must also be a flex column and allowed to shrink */
#offcanvasBladePrintout .blade-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* <-- without this, the inner panel won't scroll */
}

    /* Header stays fixed/visible above the scroller */
#offcanvasBladePrintout .panel-header {
    flex: 0 0 auto;
    position: sticky; /* or just leave it static if you don't want sticky */
    top: 0;
    z-index: 1;
}

    /* The scrollable area */
#offcanvasBladePrintout .panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#offcanvasBladePrintout .panel-header,
#offcanvasBladePrintout .header .header-body {
    padding-right: 2.5rem; /* ~space for the close button */
}


/*  *****************************************************************************************  */
/*  **************************************[ AutoComplete ]************************************  */
/*  *****************************************************************************************  */
.autocomplete {
    position: relative;
}
/*    .autocomplete .dropdown-menu {
        position: absolute;
        display: none;
    }

        .autocomplete .dropdown-menu.show {
            display: block;
        }*/

    .autocomplete .dropdown-menu {
        max-height: 400px;
        overflow-y: auto;
        z-index:999999;
    }

    /* .autocomplete .highlight {
            background: rgba(255, 230, 150, .5);
        } */

    .autocomplete .dropdown-item.active {
        color: #fff;
        --bs-dropdown-link-active-bg: #39afd1;
    }

        .autocomplete .dropdown-item:hover .text-muted, .autocomplete .dropdown-item.active .text-muted {
            color: #fff !important;
        }

    .autocomplete .dropdown-header {
        border-bottom: 2px solid #fff;
        margin-bottom: 10px;
        font-size: 1.5rem !important;
    }