#SearchPageNavWrapper {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}

#main-sidebar {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 300px;
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 200; /* Stay on top */
    top: 0px;
    left: 0;
    background-color: #f8f9fa;
    overflow-x: hidden; /* Disable horizontal scroll */
}

    #main-sidebar button:not(.btn-close) {
        background-color: #e9ecef;
    }

        #main-sidebar button:not(.btn-close):hover {
            background-color: #2c4ea9 !important;
            color: whitesmoke
        }

    #main-sidebar input:hover {
        background-color: #d3d4d5;
    }

#icon-sidebar {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 300px;
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 200; /* Stay on top */
    top: 0px;
    left: 0;
    background-color: #f8f9fa;
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

/*.bi {
    vertical-align: -.125em;
    fill: currentColor;
}*/

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

    .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
    z-index: 1500;
}

.dropdown-menu-sidebar {
    z-index: 3000 !important;
}

.bd-mode-toggle .dropdown-menu-sidebar .active .bi {
    display: block !important;
}


.my_sidebar {
    background-color: #e9ecef !important;
    color: black;
    height: 100%;
    float: left;
    border-radius: 10px;
}

.pagination-container {
    padding: 0px !important;
    margin: 0px !important;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.home-icon{
    font-size: 30px;
    color: #3794d1;
    
}

/* Type ahead search */
/* Style for the ul element inside .result-box */
.search-wrapper {
    width: 250px;
}

.search-bar-wrapper {
    width: 100%;
}

#results-ul {
    padding-left: 0px;
}

.result-box #results-ul {
    position: absolute;
    background-color: white;
    width: 100%;
    list-style: none;
    border-top: 1px solid #999;
    padding-left: 0px !important;
    margin: 4px !important;
    z-index: -1;
    height: fit-content;
}


.active-li {
    background-color: aliceblue !important;
}


/* Hover effect for li elements inside .result-box */
.result-box li:hover {
    background-color: aliceblue;
}

/* Additional styles for specific classes */
.result-box .list-group.active {
    background-color: #3794d1;
    color: #fff;
}



/* End Type Ahead */
.filter-buttons-holder {
    display: flex;
    justify-content: space-between;
    margin-top: 50px
}

.sidebar-btns-color {
    color: white !important;
}

.sidebar-btns-width {
    width: 48% !important;
    padding-left: 16px;
    padding-right: 16px;
}

.icon-sidebar-css {
    font-size: 2.5vh;
    color: #3794d1 !important;
}

#sidebar-optional {
    width: 268px;
}



.center-li {
    text-align: center !important;
}

#sidebar-search-icon {
    color: white !important;
    font-size: 2.5vh;
}



#search-box:active {
    background-color: white;
}



.bootstrap-select .bs-ok-default:after {
    color: #3794d1;
}

.btn-hover:hover {
    background-color: #2c4ea9 !important;
}


.Hidden {
    visibility: hidden !important;
    display: none !important;
}

.visible {
    visibility: visible !important;
    display: block !important;
}


#icon-sidebar {
    background-color: #f8f9fa !important;
    width: 4.5rem;
    float: left;
    height: 100%;
    border-radius: 5px;
    display: block;
}

#icon-sidebar-collapse {
    font-size: 20px;
    display: block;
}

.icon-sidebar-js {
    width: 100%;
    border: none;
    height: 8vh;
    background-color: transparent;
}

.icon-square {
    width: 100% !important;
    height: 4.5rem;
}

.icon-sidebar:hover {
    background-color: #2c4ea9 !important;
    font-size: 3vh;
}

.results-ul {
    padding-left: 0px;
    position: absolute;
    background-color: white;
    top: 100%;
    width: 100%;
    list-style: none;
    padding-left: 0px !important;
    margin: 4px !important;
    z-index: 4000; /* Ensure it covers other elements */
    height: fit-content;
}

.result-box .results-li {
    background-color: white;
    width: 100%;
    list-style: none;
    border-radius: 3px;
    padding: 0.5rem !important;
    margin: 0px !important;
    cursor: pointer;
    z-index: 4000 !important; /* Ensure it covers other elements */
    height: fit-content;
}

.flex-dir {
    flex-direction: row;
}


#qr-icon {
    color: white !important;
    font-size: 2.5vh;
}

/*
    Date and info 
    --------------------------------------------------------------------------------
     Date    */
/*.order-date-picker {
    visibility: hidden;
    opacity: 1;
    z-index: 500 !important;
    border-radius: 4px;
    transition: all 0.4s;
    cursor: pointer;
}

    .order-date-picker.active {
        visibility: visible;
        opacity: 1;
    }*/

.order-date-picker-DT {
    background: #3794d1 !important;
    transition: all 0.4s !important;
    cursor: pointer !important;
    font-size: large !important;
    color: #0d6efd !important;
}

/* Info Parameters */
.order-params {
    visibility: hidden;
    opacity: 1;
    z-index: 996;
    border-radius: 4px;
    transition: all 0.4s;
    cursor: pointer;
}

    .order-params i {
        font-size: 28px;
        color: #fff;
        line-height: 0;
    }

    .order-params.active {
        visibility: visible;
        opacity: 1;
    }

.icon-info {
    color: #3794D1 !important;
}

.datepicker {
    z-index: 1000 !important;
}
@media ( min-width: 550px ) {
    .home-icon {
        display: none;
    }

    .client-company {
        display: inline-block;
    }
}
@media ( max-width: 550px ) {
    .home-icon {
        display: inline-block;
    }

    .client-company {
        display: none;
    }
}
/* ============================================================================================
    X-small screen size
    Extra small screen will hide some visual element (image toggle button, image, company image
    ============================================================================================
*/
@media ( max-width: 250px ) {


    .item-desc {
        width: 100%;
    }

    .toggleButton {
        display: none;
        visibility: hidden;
    }

    .card_image {
        display: none;
        visibility: hidden;
    }

    .w-50 {
        width: 100% !important;
    }

    .info-adj {
        flex-direction: column !important;
        width: 100% !important;
    }

    .flex-dir {
        flex-direction: column;
    }

    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }

    col-md-6 {
        width: 100% !important;
    }

    .Not-Hidden {
        display: block !important;
        visibility: visible !important;
    }

    #btn-sidebar-collapse {
        display: block !important;
        visibility: visible !important;
    }
/*
    #icon-sidebar {
        margin-top: 300px !important;
    }*/

    #main-sidebar {
        margin-left: -300px;
    }

        #main-sidebar.active {
            margin-left: 0;
        }

    /*    #card-wrapper {
        margin: 0px 10% 10px 70px !important; 
    }*/

/*    #icon-sidebar {
        width: 60px;
    }*/

    .jts_card {
        width: 100% !important;
    }

    #card-wrapper {
        margin-left: 60px !important;
        padding: 0px !important;
        width: calc(100% - 70px) !important;
        margin-right: 60px !important;
    }
}

@media ( max-width: 768px ) {
    .info-adj {
        flex-direction: column !important;
        width: 100% !important;
    }

    .flex-dir {
        flex-direction: column;
    }

    .w-50 {
        width: 100% !important;
    }

    .jts_card {
        width: 100%;
    }

    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }

    .Not-Hidden {
        display: block !important;
        visibility: visible !important;
    }

    #btn-sidebar-collapse {
        display: block !important;
        visibility: visible !important;
    }

    #main-sidebar {
        margin-left: -300px;
    }

        #main-sidebar.active {
            margin-left: 0;
        }

    /*#card-wrapper {  
       margin: 0px 10% 10px 65px !important;*/ /* Adjusted margin to provide a little buffer */
    /*}*/
    .card {
        margin-right: 2px;
    }

/*    #icon-sidebar {
        width: 60px;
    }
*/
    #card-wrapper {
        margin-left: 60px !important;
        width: calc(100% - 120px) !important;
        margin-right: 60px !important;
        padding: 0px !important;
    }
}


@media (min-width: 769px) {
/*    #icon-sidebar {
        display: none !important;
        visibility: visible !important;
    }*/

    .showPRO-Mobile-btn-container {
        display: none !important;
        visibility: visible !important;
    }

    #btn-sidebar-collapse {
        display: none !important;
        visibility: hidden !important;
    }

    .body-content {
        width: 100%
    }

    #card-wrapper {
        margin-left: 310px !important;
    }
}