:root {
    --sifram-dark-blue: rgba(0, 102, 153, 1);
    --sifram-light-blue: rgba(103, 164, 215, 1);
}

body {
    background-color: white;
}

a {
    text-decoration: none;
}

header {

    background: var(--sifram-dark-blue);
    background: linear-gradient(228deg, var(--sifram-light-blue) 0%, var(--sifram-dark-blue) 100%);
}

.addToBasket {
    width: 100%;
}
.quantityToBasket {
    width: 50%;
}
.minusToBasket, .plusToBasket{
    width:25%;
}

.headerLogo {
    background-image: url("logo_sifram.png");
    background-size: contain;
    text-indent: -3000px;
    background-repeat: no-repeat;
    height: 50px;
    margin-top: 60px;
    display: block;
    background-position: center center;
}

#bigHeader {
    height: 200px;
}

#smallHeader {
    background: var(--sifram-dark-blue);
    background: linear-gradient(228deg, var(--sifram-light-blue) 0%, var(--sifram-dark-blue) 100%);
    height: 50px;
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    display: none;
    transition: all .5s;

}

#smallHeader .headerLogo {
    height: 35px;
    margin-top: 7px;
}

.contactBanner {
    color: white;
    text-align: center;
    background-color: darkslategray;
}

.contactBanner a {
    color: whitesmoke;
}

.searchBanner {
    color: white;
    padding-top: 43px;
}

.searchBanner p {
    font-size: 0.8rem;
    margin-bottom: 2px;
}

#smallHeader .searchBanner {
    padding-top: 5px;
}

.accountHeaderSmall {
    background-color: var(--sifram-dark-blue);
    padding: 5px;
    text-align: center;
    border-radius: 0.25rem;
    margin-top: 4px;
}

.accountHeader {
    background-color: var(--sifram-dark-blue);
    height: 100%;
    margin-top: 1vh;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    padding: 20px;
    color: white;
    margin-left: 30px;
    margin-right: 30px;
}

#searchResultsBox {
    height: 300px;
    position: absolute;
    z-index: 9999;
    overflow: scroll;
}

#searchResultsBox h4 {
    padding: 6px 10px;
    margin: 0px;
    background-color: var(--sifram-light-blue);
    color: white;
    font-size: 0.80rem;
    text-transform: uppercase;
}

#searchResults a {
    display: block;
    padding: 3px 10px;
    text-decoration: none;
    color: var(--sifram-dark-blue);
}

#searchResults a:hover {
    background-color: rgba(0, 0, 0, .03);
}

#searchResults a i {
    float: right;
}

#searchStartLabel {
    text-align: center;
    padding-top: 10px;
}

#searchProgressLabel {
    text-align: center;
    padding-top: 10px;
}

#searchNoResultLabel {
    text-align: center;
    padding-top: 10px;
}

#searchNoResultLink {
    color: var(--sifram-dark-blue);
    text-decoration: none;
    padding-top: 10px;
}

/*
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
 }
*/
nav.nav-container-sticky {
    top: 50px;
    transition: all .5s;
}

.nav-container-sticky #smallHeader {
    display: block !important;
}

footer {
    background-color: darkslategray;
    padding-top: 10vh;
    padding-bottom: 10vh;
    color: white;
}

footer ul {
    list-style-type: none;
}

footer a {
    color: white;
}

footer a:hover {
    color: white;
}

#security {
    text-align: center;
    font-size:0.9rem;
}

#credits {
    text-align: center;
    font-size:0.7rem;
    color:darkgray;
}

#credits a {
    text-decoration: underline;
    color:darkgray;
}

#mainContent {
    padding-top: 3vh;
    padding-bottom: 3vh;
}

#brandContent {
    margin-top: 6vh;
    padding-top: 10vh;
    padding-bottom: 6vh;
    background: var(--sifram-dark-blue);
    background: linear-gradient(228deg, var(--sifram-light-blue) 0%, var(--sifram-dark-blue) 100%);
}

#brandContent h2 {
    color: white;
    padding-bottom: 6vh;
}

#brandContent h3 {
    font-size:1.25rem;
}

.btn-sifram {
    background: var(--sifram-light-blue);
    color: white;
    transition: all 0.5s;
}

.btn-outline-sifram {
    border: 1px solid var(--sifram-light-blue);
    color: var(--sifram-light-blue);
}

.btn-outline-sifram:hover {
    background-color: var(--sifram-light-blue);
    color: white;
}

.btn-check[checked] + .btn-outline-sifram {
    background-color: var(--sifram-light-blue);
    color: white;
}

.btn-sifram:hover {
    background: var(--sifram-dark-blue);
    color: white;

}

/* HOME CONTROLLER*/
.category .card-header {
    height: 180px;
    background-size: cover;
    padding: 0;
    overflow: hidden;
}

.category .card-header div {
    transition: all .5s;
    background-size: cover;
    background-position: center center;
}

.category:hover .card-header div,
.category:focus .card-header div {
    transform: scale(1.2);
}

.category h3 {
    font-size:1.25rem;
}

.category a {
    text-decoration: none;
    color: var(--sifram-dark-blue);
    border-radius: 0.25rem;
}

.category a:hover {
    color: white;
    background: linear-gradient(228deg, var(--sifram-light-blue) 0%, var(--sifram-dark-blue) 100%);
    -webkit-box-shadow: 0px 0px 10px -3px var(--sifram-light-blue);
    box-shadow: 0px 0px 10px -3px var(--sifram-light-blue);
}

.category .card-title {
    text-align: center;
}

.provider .card-header {
    height: 120px;
    padding: 0;
    overflow: hidden;
}

.provider .card-header div {
    transition: all .5s;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.provider:hover .card-header div,
.provider:focus .card-header div {
    transform: scale(1.2);
}

.provider a {
    text-decoration: none;
    color: var(--sifram-dark-blue);
    border-radius: 0.25rem;
}

.provider a:hover {
    color: darkslategray;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 80%, rgba(0, 0, 0, .05) 100%);
    -webkit-box-shadow: 0px 0px 10px -3px var(--sifram-light-blue);
    box-shadow: 0px 0px 10px -3px var(--sifram-light-blue);
}

.provider .card-title {
    text-align: center;
}

/* CATEGORY CONTROLLER */
.subCategory .card-header {
    height: 100%;
    background-size: cover;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: calc(.25rem - 1px);
}

.subCategory .card-header div {
    transition: all .5s;
    background-size: cover;
    background-position: center center;
}

.subCategory:hover .card-header div,
.subCategory:focus .card-header div {
    transform: scale(1.2);
}

.subCategory a {
    text-decoration: none;
    color: var(--sifram-dark-blue);
    border-radius: 0.25rem;
}

.subCategory a:hover {
    color: white;
    background: linear-gradient(228deg, var(--sifram-light-blue) 0%, var(--sifram-dark-blue) 100%);
    -webkit-box-shadow: 0px 0px 10px -3px var(--sifram-light-blue);
    box-shadow: 0px 0px 10px -3px var(--sifram-light-blue);
}

.subCategory .card-footer {
    background-color: inherit;
    border: none;
    color: var(--sifram-light-blue);
}

.filterRangeTextValue {
    width: 100%;
    text-align: right;
}

/* PRODUCT CONTROLLER */
.product .card-header {
    height: 100%;
    background-size: cover;
    padding: 0;
    overflow: hidden;
}

.product .card-header div {
    transition: all .5s;
    background-size: cover;
    background-position: center center;
}

.product:hover .card-header div,
.product:focus .card-header div {
    transform: scale(1.2);
}

.product a {
    text-decoration: none;
    color: var(--sifram-dark-blue);
    border-radius: 0.25rem;
}

.product a:hover {
    background: rgb(251, 251, 251);
}

.product .card-header {
    border: none;
}

.product .card-footer {
    background-color: inherit;
    border: none;
    color: var(--sifram-light-blue);
}

.product-card-container .card {
    border-radius: 0;
    border-top: none;
}

.product-card-container .card:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-top: 1px solid rgba(0, 0, 0, .125);
}

.product-card-container .card:last-child {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.productRef{
    white-space: nowrap;
}

.requiredInputError {
    border: 1px solid red;
}

.basketOrderSummaryDivAddresses, .basketOrderSummaryDivPayment, .basketOrderSummaryDivProducts {
    border: 1px solid gainsboro;
}

.shippingAddressBackButton {
    margin-right: 15px;
}

#userProfilMenu li {
    list-style-type: none;
}

#userProfilMenu li a {
    display: block;
    border: 1px solid lightgray;
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 3px;
    color: var(--sifram-dark-blue);
    text-decoration: none;
}

#userProfilMenu li a:hover {
    background: linear-gradient(228deg, var(--sifram-light-blue) 0%, var(--sifram-dark-blue) 100%);
    color: white;
}
#menuLogout {
    background-color: rgb(211, 31, 31);
    color: white !important;
}

#displayBasketOrderInvoiceAddress, .displayBasketOrderShippingAddress {
    border: 3px solid lightgray;
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 3px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.displayBasketOrderShippingAddress:has(.shippingAddressSelector:checked) {
    border: 3px solid rgb(6, 102, 6);
}

.modalLink {
    cursor: pointer;
}

.carousel-control-next, .carousel-control-prev
{
    width: auto !important;
}

.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23CCC' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")}
.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23CCC' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")}

.navbar-light .navbar-nav .nav-link{
    color: rgba(0,0,0,.7) !important;
}

.navbar-light .navbar-nav .nav-link:hover{
    color: rgba(0,0,0,.9) !important;
}

.product-picture{
    max-width: 100%;
}

/*
.dropdown-item{
    width:250px;
}*/


#submenubar{
    background-color:#dedede;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom:-8px;
    width: 100%;
}


#submenubar .nav-link {
    border: 1px solid #818181;
    margin: 5px;
    border-radius: 5px;
    padding: 6px;
    background-color: #f8f9fa;
}


#submenubar .nav-link.title {
    border:none;
    background-color: transparent;
}

#submenubar .nav-link.clear {
    border:none;
    padding-top:10px;
    background-color: transparent;
}

#submenubar .dropdown-menu{
    padding:10px;
    width:220px;
}

.filterRange{
    padding:5px;
}

#submenubar .dropdown-menu:has(.filterRange){
    padding:10px;
    width:270px;
}

#submenubar .row{
    padding-top:3px;
    padding-bottom:3px;
}

#submenubar .row:hover{
    background-color:#f8f9fa;
    border-radius: 5px;
}

.icones img {
    max-width:100%;
}

#productCard{
    margin-bottom:1rem;
}

#productCard > .card-header{
    background: var(--sifram-dark-blue);
    background: linear-gradient(228deg, var(--sifram-light-blue) 0%, var(--sifram-dark-blue) 100%);
    color:white;
}

#productCard > .card-body{
    background-color:#e6e6e6;
}

#productDetails ul{
    margin-left:20px;
}

.backgroundLightGrey{
    background-color:#e6e6e6;
}

#productTitleReference{
    float:right;
}

#crossProductModal .modal-dialog{
    max-width: 750px;
    max-height: 80vh;
    
}
#crossProductModal .modal-body{
    max-height: 60vh;
    overflow: scroll;
}

#siframOrderComment{
    width: 100%;
    border: 1px solid #ced4da;
}

#userMobileMenu
{
    display: none;
}

.basketQuantity button, .basketQuantity input{
    min-width:44px;
}

.filterList, .filterNumeric {
            max-height: 254px;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .product-overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            padding: 50px;
            display: none;
            z-index: 100;
            backdrop-filter: blur(6px);
            background: rgb(255, 255, 255);
            background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        }

        .category-filter-sticky {

        }

        #categoryFilters .card {
            position: -webkit-sticky;
            position: sticky;
            top: 120px;
        }

        #categoryFilters {

        }

        .category-description {
            font-size: 0.9rem;
        }

        .filterClose .notSelected {
            display: none;
        }

        .filterHeader::before {
            content: '▲ ';
            color: rgba(0, 0, 0, .3);
        }

        .filterClose .filterHeader::before {
            content: '▼ ';
            color: rgba(0, 0, 0, .3);
        }

        .selectedValues {
            list-style-type: none;
            padding-left: 5px;
        }

        .selectedValues li {
            margin-bottom: 2px;
        }

        .selectedValues span {
            background-color: darkgray;
            border-radius: 5px;
            padding: 3px;
            cursor: pointer;
        }

        .selectedValues span:hover {
            background-color: #b7b7b7;
        }

        .selectedValues span:after {
            content: "x";
            color: lightgray;
            border-left: 1px solid lightgray;
            margin-left: 3px;
            padding-left: 3px;
        }

    .product .card-header div{
        background-size: contain;
        background-repeat: no-repeat;
        height:100%;
    }

    #bar-progress {
        width: 100%;
        display: inline-flex;
        justify-content: center;
        margin-bottom:20px;
    }

    #bar-progress .step {
        display: inline-block;
    }

    #bar-progress .step .number-container, #bar-progress .step .filled-container  {
        display: inline-block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
    }

    #bar-progress .step .number-container {
        border: solid 1px #000;
    }

    #bar-progress .step .filled-container {
        border: solid 1px green;
        background-color: green;
        color: white
    }

    #bar-progress .step.step-active .number-container {
        background-color: #000;
    }

    #bar-progress .step .number-container .number, #bar-progress .step .filled-container .check{
        font-weight: 700;
        font-size: .8em;
        line-height: 1.75em;
        display: block;
        text-align: center;
    }

    #bar-progress .step.step-active .number-container .number {
        color: white;
    }

    #bar-progress .step h5 {
        display: inline;
        font-weight: 100;
        font-size: .8em;
        margin-left: 10px;
        text-transform: uppercase;
    }

    #bar-progress .seperator {
        display: block;
        width: 20px;
        height: 1px;
        background-color: rgba(0, 0, 0, .2);
        margin: auto 20px;
    }

    .mobileShow{
        display: none;
    }

/* Bootstrap mediaqueries */

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
    
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
    .mobileShow{
        display: block;
    }
    
    #nav-container{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1020;
        max-height: 100vh;
        overflow-y: scroll;
        min-height:56px;
    }

    #nav-container .container>div{
        width:100%;
        margin-left:5px;
        margin-right:5px;
    }

    .headerLogo{
        margin-top:80px;
        
    }
    .searchBanner
    {
        margin-bottom:60px;
    }

    .contactBanner{
        padding-top:60px;
        font-size:0.9rem;
    }
    .contactBanner span{
        display: block;
    }
    .accountHeader{
        display: none;
    }
    #bigHeader {
        height:auto;
        margin-left:0;
        margin-right:0;
    }
    .mobileHide
    {
        display: none !important;
    }
    .isHomePage #bigHeader {
        display:block !important;
    }

    .isHomePage #smallHeader {
        height:auto;
        top:56px;
    }

    #smallHeader .searchBanner{
        margin-bottom:5px;
    }

    .isInnerPage #bigHeader {
        display:none !important;
    }

    .isInnerPage #smallHeader {
        display:block !important;
        top:56px;
        height:auto;
    }

    #userMobileMenu
    {
        float:right;
        display: block;
    }

    #searchResults .searchLink{
        border-bottom:#818181 solid 1px;
        padding-top:12px;
        padding-bottom:12px;
    }

    .searchLink a i
    {
        height:100%
    }

    #productTitleReference
    {
        float:none;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #tableVariant{
        width: 100%;
        overflow: scroll;
    }

    .basketQuantity input{
        padding-left:6px;
        padding-right:6px;
    }

    #slideForMoreInfos
    {
        display:block !important;
        background: var(--sifram-dark-blue);
        background: linear-gradient(228deg, var(--sifram-light-blue) 0%, var(--sifram-dark-blue) 100%);
        color:white;
        padding: 10px;
        font-size: 0.9rem;
    }

    #submenubar
    {
        margin-top:10px;
    }

    #submenubar .dropdown{
        display: none;
    }

    #submenubar.open .dropdown{
        display: block;
    }

    .indicatorContainer
    {
        float:right;
        margin-right: 10px;
        margin-top: 10px;

    }

    #submenubar .indicatorClose
    {
        display:none !important;
    }
    #submenubar .indicatorOpen
    {
        display:inline !important;
    }

    #submenubar.open .indicatorOpen{
        display:none !important;
    }

    #submenubar.open .indicatorClose{
        display:inline !important;
    }

    #submenubar .indicatorList{
        display:none;
    }

    #submenubar .dropdown-menu{
        width:auto;
        margin-left:5px;
        margin-right:5px;
    }

    .filterSearchInput
    {
        width:100%
    }

    .selectedValues span:after {
        margin-left: 5px;
        padding-left: 3px;
        width: 20px;
        display: inline-block;
        text-align: center;
    }

    .selectedValues li {
        margin-bottom: 5px;
    }

    .selectedValues span {
        border-radius: 5px;
        padding: 5px;
    }

    .product.card
    {
        margin-bottom:5px;
    }

    .product .card-header div{
        height:200px;
    }

    .product .icones img, #productCard .icones img{
        width: 40px;
    }

    .product .icones .col-1, #productCard .icones .col-1{
        width: 60px;
    }

    .modal-dialog{
        max-width:95% !important;
    }
    #bar-progress
    {
        margin-top:0 !important;
    }

    #bar-progress .seperator
    {
        display: none;
    }
    #bar-progress .step
    {
        text-align:center;
        margin-left:1rem;
        margin-right:1rem;
    }
    #bar-progress .step h5{
        display: block;
        margin-left:0;
        margin-top:5px;
        
    }

    #basketTableContainer{
        width:100%;
        overflow:scroll;
        margin-left:-1rem;
        margin-right:-1rem;
    }

    #userProfilMenu{
        padding:0;
    }
    #userProfilMenu li:not(:last-child)
    {
        float:left;
        width:25%;
    }

    #userProfilMenu li:last-child
    {
        clear:both;
        width:100%;
    }

    #userProfilMenu li:not(:last-child) i
    {
        display:block;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
    }
    #userProfilMenu li a
    {
        text-align: center;
    }
    #userProfilMenu li .text
    {
        text-align: center;
        font-size:0.7rem;
    }

    #customerOrdersTableContainer
    {
        width:100%;
        overflow:scroll;
    }
}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) { 

}

/* X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) { 

}