body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important; /* Ensure the body takes at least the height of the viewport */
    display: flex;
    flex-direction: column;
}


.vis_item_title {
    font-weight: bold;
}

/************* OVERRIDE DEFAULT *************/
.swal2-popup {
    border-radius: 0px !important;
}
.swal2-container {
    z-index: 10000 !important;
}
/*.swal2-styled{*/
/*    !*font-size: 12px !important;*!*/
/*    height: 24px;*/
/*}*/
/*.swal2-confirm{*/
/*    font-size: 10px !important;*/
/*    height: 20px;*/
/*}*/

.breadcrumb {
    background-color: white !important;
}

.row {
    margin: 0px !important;
}
.card.maximized-card {
    z-index: 1103 !important;
}
.custom_modal {
    z-index: 10000 !important;
    /*top: 20px;*/
    /*right: 20px;*/
    /*bottom: 20px;*/
    /*left: 20px;*/
    /*width: calc(100% - 40px) !important;*/
    /*height: calc(100% - 40px) !important;*/
}

.form-control  {
    border-radius: unset !important;
}

.card  {
    border-radius: unset !important;
}

.dropdown-menu  {
    border-radius: unset !important;
    min-width: 250px !important;
}
/************* OVERRIDE DEFAULT ENDS *************/

.custom-list-group .list-group-item {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.95rem;
}

.modal {
    z-index: 1060 !important;
}
.accordion-header {
    margin-bottom: 0.25rem !important;
}
.accordion-button {
    /*background: rgba(var(--main-bg-color-rgb), 0.2) !important;*/
    border: rgba(var(--main-bg-color-rgb), 0.9) 1px solid !important;
    font-weight: bold !important;
}
.accordion-button:not(.collapsed) {
    background: rgba(var(--main-bg-color-rgb), 0.08) !important;
    color: #050505 !important;
}
.accordion-button:focus {
    /*border-color: #ffffff !important;*/
    box-shadow: none !important;
}
.accordion-collapse {
    border: 0px solid !important;
}
.accordion-item {
    border: 0px solid !important;
}
.accordion-body {
    padding: 0.25rem 0.25rem 0.25rem 0.25rem !important;
}
.accordion-item:first-of-type .accordion-button {
    border-radius: 0 !important;
}
.accordion-item:last-of-type .accordion-button {
    border-radius: 0 !important;
}

.visResetItemButton {
    margin-top: 1rem;
    color: #050505 !important;
    background-color: rgba(var(--main-bg-color-rgb), 0.18) !important;
    border: rgba(var(--main-bg-color-rgb), 0.9) 1px solid !important;
}

.visAddToBasketBtn {
    /*font-weight: bold;*/
    /*color: #050505 !important;*/
    background-color: rgba(var(--main-bg-color-rgb), 0.18) !important;
    border: rgba(var(--main-bg-color-rgb), 0.9) 1px solid !important;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: rgba(var(--main-bg-color-rgb), 0.5) !important;
}

#EstimatePanel {
    z-index: 1002;
    position: absolute;
    /*height: 50px !important;*/
    width: 90% !important;
    left: 5% !important;
    top: 0px !important;
    color: #050505 !important;
    text-align: center !important;
    /*background-color: #7272b6 !important;*/
}

#MaterialPanel {
    z-index: 1002;
    position: absolute;
    /*height: 50px !important;*/
    width: 97% !important;
    /*left: 5% !important;*/
    bottom: 0px !important;
    color: #050505 !important;
    text-align: center !important;
    background-color: white !important;
}

.visMatPanel-Item-img {
    /*border: rgba(var(--main-bg-color-rgb), 0.2) 1px solid !important;*/
}

.markInput-active{
    background-color:#f1ffcc !important;
    box-shadow: 0 0 3px #CC0000 !important;
}


@font-face {
    font-family: Chambery;
    src: url("/layout/vismode/css/fonts/chamberi-super-display-regular.otf") format("opentype");
}


/************* Fonts *************/
.font-Batang{
    /*font-weight: bold;*/
    /*font-style: italic;*/
    /*letter-spacing: 5px;*/
    font-family: Batang, monospace;
}
.font-Chambery{
    /*font-weight: bold;*/
    /*font-style: italic;*/
    /*letter-spacing: 5px;*/
    font-family: Chambery, serif;
}
.font-Abadi{
    /*font-weight: bold;*/
    /*font-style: italic;*/
    /*letter-spacing: 5px;*/
    font-family: Abadi Extra Light, serif;
}



/************* BLINKERS *************/
@keyframes blinker {
    30% {
        opacity: 0.7;
        color: white;
        /*font-weight: bold;*/
    }
    /*60% {*/
    /*    !*opacity: 0.5;*!*/
    /*    color: red;*/
    /*}*/
    /*90% {*/
    /*    !*opacity: 0.5;*!*/
    /*    color: green;*/
    /*}*/
}

@keyframes blinker_green {
    30% {
        /*opacity: 0.5;*/
        color: #06c706;
    }
}

.blink_me {
    animation: blinker 2.5s step-start infinite !important;
    color: white;
}

.blink_me_green {
    animation: blinker_green 2.5s step-start infinite !important;
    color: black;
}
/************* BLINKERS END *************/




/************* BASKET BADGE *************/
.my-basket-badge {
    font-size: .7rem;
    font-weight: bold;
    /*padding-top: -10px !important;*/
    position: relative;
    right: 10px !important;
    top: -8px !important;
    animation: blinker_green 1s step-start infinite !important;
}
/************* BASKET BADGE END *************/




:root {
    --vis-nav-bar-height: 80px;

    /*VISMODE*/
    /*https://rgbcolorcode.com/color/burgundy*/
    /*--main-bg-color: #800020;!* vismode= #800020 vibalt= #88C23F *!*/
/* 23, 66, 92   80, 114, 123   0, 49, 51 */
/*    --main-bg-color-rgb: 128, 0, 32;!* vismode= 128, 0, 32   vibalt= 136, 194, 63   orange= 255, 133, 27 *!*/

    /*VIBALT*/
    /*--main-bg-color: #88C23F;!* vismode= #800020 vibalt= #88C23F *!*/
    /*--main-bg-color-rgb: 136, 194, 63;!* vismode= 128, 0, 32 vibalt= 136, 194, 63 *!*/

    --body-bg-color: #ffffff;
    --container-bg-color: #ffffff;

    --main-bg-color-rgb: 128, 0, 32;/* vismode= 128, 0, 32   vibalt= 136, 194, 63   orange= 255, 133, 27 */
    --main-color: white;
    --main-color-active: #eed4d4;
    --nav-bar-background: #b9acac;

    /*Light*/
    /*--main-bg-color-rgb: 226, 226, 226;*/
    /*--main-color: black;*/
    /*--main-color-active: #4b4a4a;*/
    /*--nav-bar-background: #ffffff;*/
}


.footer-text {
    color: #dadada !important;
}
.footer-link {
    color: #dadada !important;
    text-decoration: unset;
}
.footer-link:hover {
    color: #ffffff !important;
    text-decoration: underline;
}


.action-icon {
    color: #676767 !important;
}

.action-icon:hover {
    color: #afafaf !important;
}

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

.modal-backdrop {
    z-index: 1103 !important;
 }

.modal {
    z-index: 1104 !important;
 }

#scrollToTop {
    z-index: 1101;
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 30px;
    cursor: pointer;
    background: rgba(var(--main-bg-color-rgb), .2);
    color: var(--main-color);
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 52px;
    border-radius: 50%;
    display: none; /* Initially hidden */
}

.navbar_top {
    /*background-color: var(--main-bg-color);*/
    background: rgba(var(--main-bg-color-rgb), 0.7);
    color: var(--main-color);
    overflow: hidden;
    width: 100%;
    height: 36px;
    font-size: 14px;
}

.navbar_top a {
    color: var(--main-color);
    text-decoration: none;
}

.navbar_top a:hover {
    color: var(--main-color);
    text-decoration: none;
}

.navbar_login {
    padding-right: 20px !important;
    color: var(--main-color);
    /*text-transform: uppercase;*/
}



.vis-footer-invert{
    border-top: 1px solid rgba(var(--main-bg-color-rgb), 1) !important;
    color: rgba(var(--main-bg-color-rgb), 1) !important;
    background: var(--main-color) !important;
}

.vis-footer{
    background: rgba(var(--main-bg-color-rgb), 1) !important;
    color: var(--main-color) !important;
}

.vis-bg{
    background: rgba(var(--main-bg-color-rgb), .7) !important;
    color: var(--main-color) !important;
}

.vis-bg-invert{
    color: rgba(var(--main-bg-color-rgb), 1) !important;
    background: var(--main-color) !important;
}

.main-bg{
    background: rgba(var(--main-bg-color-rgb), 1) !important;
}

.main-color{
    color: var(--main-color) !important;
}

.main-bg-color{
    color: rgba(var(--main-bg-color-rgb), 1) !important;
}

.vis-button{
    background: rgba(var(--main-bg-color-rgb), .7) !important;
    color: var(--main-color) !important;
    border: 1px solid rgba(var(--main-bg-color-rgb), 1) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
}

.vis-border-top{
    border-top: 1px solid rgba(var(--main-bg-color-rgb), 1) !important;
}

.vis-border-bottom{
    border-bottom: 1px solid rgba(var(--main-bg-color-rgb), 1) !important;
}

.vis-shadow-bottom{
    /* Your other styles */
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 0px 0px rgba(0, 0, 0, 0.16) !important;
}


/************* NAV BARR *************/
.vis-nav {
    background-color: var(--nav-bar-background);
    /*position: fixed;*/
    margin: auto;
    width: 100%;
    z-index: 1102;
}
.vis-nav-bar {
    position: sticky;
    top: 0px;
    z-index: 1101;
    background: rgba(var(--main-bg-color-rgb), 0.7);
    backdrop-filter: blur(5px); /* Adjust blur strength */
    color: var(--main-color);
    width: 100% !important;
    min-height: var(--vis-nav-bar-height) !important;
    font-size: 14px;
    /*margin: auto;*/
    /*font-weight: bold !important;*/
    /*background-image: linear-gradient(rgba(var(--main-bg-color-rgb), 0.9), rgba(var(--main-bg-color-rgb), 0));*/
 }
.vis-nav-bar a {
    color: var(--main-color) !important;
    text-decoration: none;
}
.vis-nav-bar :hover, .vis-nav-bar :hover .vis-nav-bar-link a{
    background-color: white !important;
    color: black !important;
}
.vis-nav-bar-link a:hover {
    font-weight: bold;
}



.vis-nav-bar .vis-nav-link-drop, .vis-nav-link-drop a {
    display: block;
    padding: 0.5rem 1rem;
    color: black !important;
}

.vis-nav-link-drop:hover {
    text-decoration: none;
    color: #575757 !important;
}

/*.nav-link .vis-nav-bar-small-screen a{*/
/*    color: black !important;*/
/*    text-decoration: none;*/
/*}*/
/*.nav-link .vis-nav-bar-small-screen :hover{*/
/*    !*background-color: white !important;*!*/
/*    color: black !important;*/
/*}*/


.vis-nav-bar-left {
    height: var(--vis-nav-bar-height) !important;
    width: calc((100% - 295px)/2);
}
.vis-nav-bar-left-content {
    padding-left: 20px;
    height: var(--vis-nav-bar-height) !important;
}
.vis-nav-bar-center {
    height: var(--vis-nav-bar-height) !important;
    width: 295px;
}
.vis-nav-bar-right {
    width: calc((100% - 295px)/2);
}
.vis-nav-bar-right-content {
    /*padding-bottom: 7px;*/
    padding-right: 20px !important;
    height: var(--vis-nav-bar-height) !important;
}

.vis-nav-bar-center-logo-top{
    width: 100%;
    /*margin-top: -7px !important;*/
    font-size:30px;
    letter-spacing: 5px;
    font-family: Batang, monospace;
}
.vis-nav-bar-center-logo-bottom{
    width: 100%;
    margin-top: -1px !important;
    font-size:18px;
    letter-spacing: 6px;
    /*font-style: italic;*/
    /*font-family: Chambery, serif;*/
}
/************* NAV BARR END *************/




/************* CONTENT *************/
.vis-content {
    background-color: var(--body-bg-color) !important;
    /*background-color: grey !important;*/
    position: absolute;
    /*margin-top: 36px !important;*/
    /*height: calc(100% - 36px);*/
     /*margin: auto;*/
     width: 100% !important;
 }
.container {
    background-color: var(--container-bg-color) !important;
 }
.content-header {
    background-color: var(--container-bg-color) !important;
 }
.container-fluid {
    background-color: var(--container-bg-color) !important;
 }
/************* CONTENT END *************/


.sticky-div {
    position: sticky;
    top: var(--vis-nav-bar-height); /* Distance from the top where it sticks */
    /*background-color: #fff; !* Background color for visibility *!*/
    /*border: 1px solid #ccc;*/
    z-index: 1048;
}

.vis-border-bottom {
    border-bottom: 1px solid rgba(var(--main-bg-color-rgb), 1);
}

.vis-bar {
    background-color: white;
    z-index: 1050;
    /*margin: 0px -7.5px 0px -7.5px;*/
    /*background-color: var(--main-bg-color);*/
    /*background: rgba(var(--main-bg-color-rgb), 0.5);*/
    /*color: var(--main-color);*/
    /*overflow: hidden;*/
    width: 100%;
    /*height: 45px;*/
    /*font-size: 18px;*/
    /*position: absolute;*/
}


.library-filter-bar {
    /*background-color: var(--main-bg-color);*/
    background: rgba(var(--main-bg-color-rgb), 0.5);
    color: var(--main-color);
    overflow: hidden;
    width: 100%;
    height: 46px;
    font-size: 24px;
}

.user_navbar_link_btn a {
    /*float: right;*/
    /*display: block !important;*/
    margin-left: 12px;
    color: var(--main-bg-color-rgb);
    text-decoration: none;
    font-size: 16px;
    /*font-weight: bold;*/
    font-family: "3DS Fonticon";
    /*text-transform: uppercase;*/
}

.user_navbar_link_btn a:hover {
    color: var(--main-bg-color-rgb);
    font-weight: bold;
    /*border-bottom: #0b2e13 2px solid;*/
}

.nav-item .active {
    font-weight: bold !important;
    border-bottom: var(--main-bg-color-rgb) 1px solid;
    /*opacity: 0.3;*/
}

.dropdown-menu .active {
    font-weight: bold !important;
    border-bottom: var(--main-bg-color-rgb) 1px solid !important;
    color: var(--main-bg-color-rgb);
    background-color: white !important;
    /*opacity: 0.3;*/
}



.fill {
    background-size: cover;
    background-position: center;
    width: 100% !important;
    height: 100% !important;
}

.dropdown-menu {
    z-index: 10000 !important; /* Adjust the value as needed */
}

.vis-nav-bar-link-dropdown {
    height: 55px !important;
    margin-top: 19px !important;
}
#vis-nav-bar-link-dropdown-div {
    position: absolute;
    top: calc(var(--vis-nav-bar-height) - 5px); /* Distance from the top where it sticks */
    /*position: absolute;*/
    /*top: 105px;*/
    left: 0px;
    width: 100% !important;
    min-height: 200px;
    border-top: var(--main-bg-color-rgb) 1px solid;
    background: white;
    color: black !important;
    /*overflow: hidden;*/
    overflow-y: auto;
    z-index: 1101;
    display: none;
    padding: 10px 20px 20px 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
    font-size: 1.1rem !important;
}

.vis-nav-bar-link-dropdown:hover #vis-nav-bar-link-dropdown-div {
    display: inline-block;
}


.navbar_help {
    display: none !important;
}
.small-screen-item {
    display: none !important;
}
.big-screen-item {
    display: inline-block !important;
}

/************* IF LESS THAN (SMALL SCREEN) *************/
@media all and (max-width: 400px) {
    /*.vis-content {*/
    /*    margin-top: 116px !important;*/
    /*}*/
    .extra-small-screen-item {
        display: none !important;
    }
    .navbar_help {
        /*display: inline-block !important;*/
        display: block !important;
    }
    .navbar_login {
        /*display: inline-block !important;*/
        display: none !important;
    }
    .vis-nav-bar-left {
        width: 30%;
    }
    .vis-nav-bar-center {
        display: none !important;
    }
    .vis-nav-bar-right {
        width: 70%;
    }

    .vis-nav-bar-center-logo-top {
        display: none !important;
    }
    .vis-nav-bar-center-logo-bottom {
        display: none !important;
    }
}

@media all and (max-width: 900px) {
    .small-screen-item {
        display: inline-block !important;
    }
    .big-screen-item {
        display: none !important;
    }
}


/************* IF MORE THAN (BIG SCREEN) *************/
@media all and (min-width: 900px) {

}