/* I do not know what this file does, but if it is deleted, the shop crashes. SO DON'T TOUCH THIS */
/* remove */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800;900&display=swap');


:root {
    --htm24-gray: #fafafa;
    --htm24-gray-dark: #ececec;
    --htm24-gray-darker: #cccccc;
    --font-family-heading: 'M PLUS Rounded 1c', sans-serif;
    --font-family-body: 'Roboto', sans-serif;
    --buderus-primary: #002D59;
}

/*
#####
HELPER CLASSES
#####
 */

#maintenance-mode {
    display:none;
}

.container {
    max-width:1440px;
}

.font-weight-bolder, .h4.font-weight-bold {
    font-weight:800 !important;
}

.niu-card-style--flat {
    background-color:var(--htm24-gray);
}

.htm24-flag-de {
    height:4px;
    width:16px;
    background-color:#FF0000;
    display:block;
    position: relative;

    &::before {
        content:'';
        display:block;
        height:4px;
        width:16px;
        background-color:black;
        border-radius:1px 1px 0 0;
        position:absolute;
        top:-4px;
    }
    &::after {
        content:'';
        display:block;
        height:4px;
        width:16px;
        background-color:#FFCC00;
        border-radius:0 0 1px 1px;
        position:absolute;
        top:4px;
    }

}

.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8,.h9, h1, h2, h3, h4, h5, h6, .productlist-filter-headline, .sidepanel-left .box-normal .box-normal-link {
    text-transform: uppercase;
}

.btn-is-white a {
    color:white !important;

    &:hover {
        color:#f2f2f2 !important;
    }
}


.niu-itembox-option--is-card, .niu-card-style--flat {
    border:1px solid var(--htm24-gray-dark);
}


/*
#####
RESETS
#####
 */

.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active {
    box-shadow: none;
}

/*
#####
HEADER
#####
 */




#search {
    border-radius:4px;
    overflow: hidden;

    .niu-header-search {
        background:var(--htm24-gray) !important;
        border-bottom:none !important;
        border-radius:4px;
    }
}


header {

    border-bottom:none;

    #shop-nav {
        button {
            background-color:var(--htm24-gray);
            border-radius:4px;

            svg {
                height:20px;
                width:20px;
            }
        }
    }
}
    header .navbar-nav>.nav-item>.dropdown-menu {
        border-bottom: 1px solid var(--htm24-gray-dark) !important;
        border-top: 1px solid var(--htm24-gray-dark) !important;
    }

    header .submenu-headline-toplevel {
        border-bottom: 1px solid var(--htm24-gray-dark) !important;
    }

    /* vielleicht mal irgendwann */
    /*button[data-niu-sidebar-categories-target="categories"] {

        flex-direction: row !important;
        background-color:#1b1b1b;
        color:white !important;
        border-radius:4px;
        padding-left:6px;
        padding-right:6px;

        &::after {
            content:'Alle Kategorien';
            white-space: nowrap;
            font-weight: 800;
            font-family: var(--font-family-body);
            text-transform: uppercase;
            color:white;
            font-size:1rem;
        }
    }*/




/*
#####
CATEGORY PAGE
#####
 */

.niu-cat-wrapper {
    border: 1px solid var(--htm24-gray);
}
.niu-cat-wrapper .btn-group {
    background-color:var(--htm24-gray);
    padding:0 8px;
}

@media screen and (max-width: 991px) {
    .niu-cat-wrapper .btn-group {
        background-color:white;
    }
    .productlist-page-nav .productlist-item-info {
        margin-top:1rem;
    }
}



.subcategories-image img {
    padding:1rem;
}

.niu-cat-row div:first-child {
    border-top:1px solid var(--htm24-gray) !important;
}

.breadcrumb-wrapper {
    margin-bottom:2rem;
}

.ribbon {
    font-size:.6rem;
    padding: 0.25rem .45rem;
}

.htm24-extractKW.ribbon {
    background-color:var(--success);
    color:white;
    font-size:.6rem;
    font-weight:400;
}

.productlist-page-nav {
    button[data-niu-sidebar-trigger-content="filter"] {
        background-color:var(--primary);
        color:white;
        padding-left:1rem !important;
    }
}

.subcategories-image img {
    transition: transform 0.3s ease-in-out;
}


/*
#####
PRODUCT PAGE
#####
 */

.shortdesc p {
    margin-bottom:0;
    font-family: 'Roboto', sans-serif !important;
}

.htm24-additional-product-infos-table {
    border-top:1px solid rgba(0, 0, 0, 0.1);
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
    padding-top:16px;
    padding-bottom:16px;
}


.niu-special-price .percent::before {
    content:'-';
    display: inline;
}

#image_wrapper {
    #niu-product-splide::after {
        content:'Bilddarstellungen können vom Lieferumfang, als auch vom Original abweichen.';
        font-size:0.75rem;
        display:inline-block;
        text-align:center;
        width:100%;
        position:absolute;
        bottom:1rem;
        opacity:0.6;
        pointer-events:none;
        left:0;
        z-index:1;
    }
}
#niu-modal-product-splide {
    #niu-modal-product-splide-track::after {
        content:'Bilddarstellungen können vom Lieferumfang, als auch vom Original abweichen.';
        font-size:0.75rem;
        display:inline-block;
        text-align:center;
        width:100%;
        position:absolute;
        bottom:1rem;
        opacity:0.6;
        pointer-events:none;
        left:0;
        z-index:1;
    }
}


/* custom box - pdf */

.htm-pdf-item {
    display:flex;
    flex-direction:column;
    background-color:var(--htm24-gray);
    border-radius:8px;
    padding:16px 24px;
    margin-bottom:1rem;
    transition: background-color 0.3s ease-in-out;

    i {
        font-size:1.5rem;
        color:var(--primary);
    }

    &:hover {
        background-color: var(--htm24-gray-dark);
        transition: background-color 0.3s ease-in-out;
    }

}

#add-to-cart .btn .btn-basket-check span {
    display: inline-block;
}

/*
#####
STARTPAGE
#####
 */

body[data-page="18"] {
    #sidepanel_left {
        padding-right:1rem;
    }
}

/*
#####
OPC PLUS
#####
 */

.no-padding .dzm-ps-track {
    padding:0;
}

/* Buderus Partner Portlet */

.buderus-trusted-portlet {
    background-image:url(https://htm.niuplus.de/media/image/storage/opc/random/buderust-trusted-bg-01.jpg);
    background-size:cover;
}

.dzm-itb-bgi-wrapper:hover .dzm-itb-overlay {
    opacity:1 !important;
}
.dzm-itb-bgi-wrapper.hover-zoom:hover img {
    filter:none !important;
}

.dzm-ls-slider .dzm-opcis-track .splide__slide {
    border: 1px solid var(--htm24-gray-dark);
    padding:16px 32px;
    border-radius:8px;
}

/*
#####
OPC CONVERSION-BOOSTER
#####
 */

.dzm-notice-clean {
    padding: 4px 0;
}

/*
.dzm-con-lvw-wrapper {
    position:absolute;
    top:16px;
    left:0;
}
*/


/*
#####
EEK LABEL
#####
 */

.htm24-eek-label {
    display: inline-block;
    color: white;
    padding: 2px 18px 2px 12px;
    font-size:0.75rem;
    text-transform: uppercase;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);


    &.label-a {
        background-color:#028737;
    }
    &.label-b {
        background-color:#4EAC27;
    }
    &.label-c {
        background-color:#B3DB12;
    }
    &.label-d {
        background-color:#FFFF05;
        color: #4b4b1d;
    }
    &.label-e {
        background-color:#FFB301;
    }
    &.label-f {
        background-color:#FF4D02;
    }
    &.label-g {
        background-color:#FF0002;
    }
}


/*
#####
FOOTER
#####
 */

.htm-footer-badge {
    background-color: var(--htm24-gray);
    border-radius: 8px;
    /*gap:1rem;*/
    font-size:0.85rem;
    padding:.5rem 1rem;
}

.box-normal-hr {
    border-color:var(--htm24-gray-dark) !important;
}

@media screen and (max-width: 991px) {
    .footer-social-media, .niu_subfooter {
        gap:1rem;
        margin-bottom:1rem !important;
    }

    .footer-additional-wrapper, .niu_subfooter_rating, .niu_subfooter_paymethods, .niu_subfooter_shippingmethods {
        /*padding-top:16px;*/
        padding-bottom: 16px;
        border-bottom:1px solid var(--htm24-gray-dark);
    }

}

/*
#####
HEIZKÖRPERKONFIGURATOR
#####
 */

.hk-navi-item label {
    background-color:var(--htm24-gray);
    border-color: var(--htm24-gray);
    transition: border-color 0.3s ease, transform 0.3s ease;

    &:hover {
        background-color:var(--htm24-gray);
        border-color: var(--htm24-gray-dark);
        transition: border-color 0.3s ease, transform 0.3s ease;
        cursor: pointer;
        transform:scale(1.02);
    }
}

.hk-navi-item input[type="radio"] + label {
    border-color: var(--htm24-gray-dark);
    position: relative;
    border: 1px solid var(--htm24-gray-dark);

    &::after {
        content: '\F28A';
        position: absolute;
        top: .25rem;
        right: .45rem;
        display: block;
        font-size: 1.25rem;
        color:var(--htm24-gray-dark);
        font-family: 'bootstrap-icons';
    }
}

.hk-navi-item input[type="radio"]:checked + label {
    border-color: var(--success);
    position: relative;
    border: 1px solid var(--success);

    &::after {
        content: '\F26A';
        position: absolute;
        top: .25rem;
        right: .45rem;
        display: block;
        font-size: 1.25rem;
        color:var(--success);
        font-family: 'bootstrap-icons';
    }
}

#btn_weiter {
    background-color: var(--success);
}