/* I do not know what this file does, but if it is deleted, the shop crashes. SO DON'T TOUCH THIS */

/* ##### */
/* region BASE */
/*#####*/

:root {
    --primary: #218ac6;
    --secondary:#272425;
    --gray-lighter: #e5e5e5;
    --border-radius-xl:8px;
    --border-radius-lg:4px;
    --border-radius-sm:2px;
}

/* endregion */

/* ##### */
/* region TEMP */
/*#####*/


#maintenance-mode {
    display: none;
}

/* endregion */

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


.container {
    max-width:1320px;
}

.font-weight-bold, .font-weight-bolder, strong {
    font-weight:700 !important;
}

.btn-light, .niu-input-group, .niu-form-group input, .niu-form-group select {
    border-color:#d8e1e7;
    box-shadow: none;
}

.btn.dropdown-toggle {
    font-weight:400;
}

a {
    color: #264b5f;

    &not:()
}

.card, .card-body, .card-header {
    background-color:transparent;
}

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

/* endregion */

/*#####*/
/* region HELPER */
/*#####*/

.mix-blend-darken, .mix-blend-darken img {
    mix-blend-mode: darken;
}

.dzm_itb_wide--image-container img {
    mix-blend-mode: darken !important;
}

.helite-review-slider .splide__slide {
    background-color: #fff;
    padding: 12px 0;
    border-radius: 16px;
    height: 100% !important;
    margin-bottom: 0 !important;
}

.helite-outer-full-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

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

.w-10 {
    width: 10%;
}

/* endregion */

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

header {
    border-bottom:none;

    .niu-inputgroup-bordered, .niu-input-group.niu-header-search {
        border-top: 1px solid var(--gray-lighter) !important;
        border-bottom: 1px solid var(--gray-lighter) !important;
        border-right: 1px solid var(--gray-lighter) !important;
        border-left: 1px solid var(--gray-lighter) !important;
        border-radius:var(--border-radius-lg) !important;
    }

    .video-consulting {
        border-radius: 50px !important;
        background-color: #41BC75;
        color: #fff;
    }

    .video-consulting:hover {
        color: #fff;
        scale: 0.98;
        transition: scale 0.1s;
    }

    .niu-categories-color-wrap {
        border-top:1px solid var(--gray-lighter);
        border-bottom:1px solid var(--gray-lighter);
    }

}

#mainNavigation {
    .nav-link-has-icon {

        display: flex;

        svg {
            margin-right: .25rem;
        }
    }

    .nav-link-fahrrad {
    svg {
            transform: translateY(-2px);
        }
    }
}

#sidepanel_left {
    .nav-link-has-icon {
        svg {
            display:none;
        }

    }
}

/* endregion */


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

.niu-productbox-caption {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin-top:1rem;

    .delivery-status {
        font-weight:400;
    }
}

.dzm-ps-item-wrapper > * {
    height: 100%;
}


    /* endregion */

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

/* endregion */
#footer .niu-footer-main-wrapper hr {
    border-color:#d6e7ec;
}


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

.product-videos-container-agreed {

    .main-player iframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 16/9;

    }

    .youtube-videos-controls {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }

    .youtube-thumbnail-container {
        position: relative;
        cursor: pointer;
        aspect-ratio: 16/9;
        overflow: hidden;
        border: 4px solid transparent;
        transition: border-color 0.2s ease-in-out;
    }

    .youtube-thumbnail-container:hover {
        border-color: #218ac6;
    }

    .youtube-thumbnail-container.active-video {
        border-color: #218ac6;
    }

    .youtube-thumbnail-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .play-icon-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .play-icon-overlay::before {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 16px;
        border-color: transparent transparent transparent #fff;
    }

    .youtube-thumbnail-container:hover .play-icon-overlay {
        background: rgba(0, 0, 0, 0.6);
    }
}

.product-info-inner {


    > div.row {
        margin-bottom:0;
    }

    > div.row .col:nth-child(1) {
        order:2;
        justify-content: start;
    }

    > div.row .col:nth-child(2) {
        order:1;
        justify-content: start !important;
    }

    .shortdesc {
        padding-bottom: 0 !important;
        padding-top:.5rem !important;

        p:last-child {
            margin-bottom: 0 !important;
        }
    }

    .row.variations.switch-variations {
        margin-bottom: 0 !important;
    }

    div.d-flex.gap-2 i {
        color:#3CAB6A;
    }

}

#product-offer {

    .product-info {
        div[data-niu-floating-wrapper], .product-info-inner {
            height:100%;
        }
    }

    .product-offer {
        background-color: #f9fcfd;
        padding:2rem;
        padding-top:.5rem;
        margin-top:1rem;
        border-radius: var(--border-radius-lg);
        position: sticky;
        top:66px;
        border: 1px solid #d6e7ec;
    }


    h1.product-title {
        font-size:2.5rem;
    }

    .price_wrapper .price.h4 {
        font-size: 2rem;
    }

    .niu-card-style--flat {
        border: 1px solid #d6e7ec;
    }

    .product-offer .niu-card-style--flat {
        padding:0;
        background-color: #f9fcfd !important;
        border: 1px solid #d6e7ec;
    }

    .niu-productdetails-paymethods-box {
        justify-content: space-between;
    }

    .niu-productdetails-paymethods-text {
        display: none;
    }
}

#product-offer {
    @media screen and (max-width: 767px) {
        .product-offer .niu-card-style--flat {
            padding: 0;
        }
    }
}

.niu-card-style--flat, .niu-itembox-option--is-card::before {
    background-color: #f9fcfd !important;

}

.niu-itembox-option--is-card.productbox-inner {
    border:1px solid rgb(214, 231, 236);
}

/* endregion */



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

.helite-banner-gradient-blue {
    .dzm-itb-bgi-content-container::before, .dzm-opcis-content-wrapper::before {
        content: '';
        height: 50%;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #228ac6;
        background: linear-gradient(to top, #30586f 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
        z-index: -1;
    }
}

.dzm-psc-wrapper {
    .nav-tabs .nav-link {
        padding:8px 16px;
        border-radius: var(--border-radius-lg) !important;
        border: 1px solid #d6e7ec;
        background-color: #fafcfd;
        transition: background-color .2s ease;

        &.active {
            background-color: var(--primary) !important;
            color: #fff !important;
        }

        &:hover {
            background-color: var(--primary) !important;
            color: #fff !important;
            transition: background-color .2s ease;
        }
    }
    .tab-navigation .nav-link.active::after {
        display:none;
    }
}

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

.dzm-qlb-list-container {
    padding:0;
    gap:8px;
}

.dzm_itb_wide--container::before, .dzm_itb_wide--content-container, .dzm_itb_wide--image-container::before {
    background-color:#f9fcfd !important;
}

#slider-xs, #slider-xs .splide__track {
    padding:0 !important;
}

#slider-xs {
    height:unset !important;
}

.headline-xs {
    p, .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-bottom: 0 !important;
    }

    hr {
        margin: 0 !important;
        display: none;
    }
}

#tabAccordion, .tab-navigation {
    margin-bottom:0;
}

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

.he-slider-stripped .niu-productbox-caption {
    .niu-productbox-price-label, .niu-productbox-stock, .base-price {
        display:none;
    }
}

.he-nav-tabs {
    .nav.nav-pills {
        gap:2rem;
    }
}

@media (max-width:991px) {
    .he-nav-tabs {
        .position-sticky {
            position: relative !important;
            top:0 !important;

        }
    }
}

.slider-overflow-visible {
    margin-right:-1rem;
}

/* endregion */

/* region styles von David */
 .et-widget.et-widget-categorycta.bg-fullsize .container .categorycta-ctas .btn.btn-secondary .fal{
     text-align: center;
 }
.custom-padding {
    padding: 20px;
}
@media (max-width: 767.98px) {
    .et-widget-standardcheckout .checkout-steps {
        display: none;
    }
}
@media (max-width: 1231.98px){
    .et-widget-headermain .et-header-main-search {
        background-color: white;
    }
    .et-header-main-search-close{
        color:black !important;
    }
    #search-header, .et-widget-headermain .et-header-main-search .search-wrapper .btn{
        border-color: lightgrey;
    }
}
#consent-banner-btn-all {
    background-color: #3F862F;
    color: #fff;
}
#consent-accept-banner-btn-close {
    background-color: #04D06C;
}
#consent-settings-btn {
    display: none !important;
}
.payment-methods-image-title {
    max-width: 50px;
}
.videoberatung-btn {
    background-color: #41BC75 !important;
    border-color: #41BC75 !important;
}
.sizetable {
    font-weight: 400;
    max-width: 95%;
    float: left;
    table-layout: fixed;
}
.sizetable td {
    text-align:center !important;
}
.sizetable th.rotate {
    height: 160px;
    white-space: nowrap;
    vertical-align: middle !important;
}
.sizetable th.rotate > div {
    transform:
            translate(5px, 70px)
            rotate(315deg);
    width: 0px;
}
.sizetable th.rotate > div > span {
    padding: 5px 10px;
}
#image_wrapper.fullscreen.et-sticky{
    width: -moz-available !important;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available !important;  /* Mozilla-based browsers will ignore this. */
    width: fill-available !important;
}
.table-striped tbody tr:nth-of-type(2n) {
    background-color: #eee;
    color: #000;
}
.img_grayscale {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 70%;
}

/* endregion */