html, body{
    scroll-behavior: auto !important;
}

.compareWrapper {
    margin-top:             10px;
    position:               relative;
    overflow:               hidden;
}
.compareWrapper *{
    box-sizing:             border-box;
    font-family:            "Roboto", sans-serif;
}

#compareDragContainer:focus-visible{
    outline: none;
}

.compareWrapper .compareShadow{
    position:               absolute;
    left:                   0px;
    top:                    0px;
    height:                 calc(100% - 10px);
    width:                  200px;
    z-index:                4;
    box-shadow:             0px -10px 8px 1px rgba(0,0,0,0.1);
    pointer-events:         none;
}

.compareWrapper .table {
    display:                inline-grid;
    grid-template-columns:  var(--columns);
    max-width:              100%;
    max-height:             calc(100dvh - 150px);
    overflow-x:             auto;
    border:                 1px solid var(--colorMediumGray);
}

.compareWrapper .table.allowdrag{
    cursor:                 grab;
}

.compareWrapper .table.dragging.allowdrag {
    cursor:                 grabbing;
    user-select:            none;
}

.compareWrapper .row {
    display:                contents;
}
    .compareWrapper .row.hidden {
        display:            none
    }

.compareWrapper .table .row:nth-child(2n of :not(.hidden)) .cell:not(.sticky-row) {
    background-color:       var(--colorLightGray);
}
.compareWrapper .table .row .cell:not(:last-child) {
    border-right:           1px solid var(--colorMediumGray);
}

.compareWrapper .cell {
    border-bottom:          1px solid var(--colorMediumGray);
    padding:                8px 12px;
}
.compareWrapper .cell.gray {
    color:                  var(--colorGray);   
}

/* Productinfo */
.compareWrapper .cell.product{
    position:               relative;
}

.compareWrapper .prdContainer.grid .prdFooter {
    grid-template-areas: 
                            "prdPricer          prdPricer         prdPricer          prdPricer          prdPricer    prdPricer       prdPricer               prdPricer"
                            "prdEnergielabel    prdEnergielabel   prdEnergielabel    prdEnergielabel    .            .               footerWlheartAmount     footerWlheart";
}
.compareWrapper .prdContainer.grid .prsContainer.prsBuy{
    grid-template-areas:
                            "vanvoor vanvoor vanvoor ."
                            "price price price wishlist"
                            "staffelkorting staffelkorting staffelkorting staffelkorting"
                            "promotekst promotekst promotekst ."
                            "promofooter promofooter promofooter .";
}
.compareWrapper .prdContainer.grid .prsContainer{
    grid-template-columns:  repeat(3, 1fr) 50px;
    column-gap:             5px;
}
.compareWrapper .prdContainer.grid .prsWishlist{
    display:                block;
}


.compareWrapper .cell .prdContainer.grid{
    padding:                0;
    border-bottom:          none;
    border-right:           none;
}

.compareWrapper .cell.product{
    position:               relative;
}
.compareWrapper .cell.product > div:not(.prodOption){
    height:                 100%;
}

    .compareWrapper .cell.product .prodOption{
        position:           absolute;
        width:              30px;
        height:             30px;
        border-radius:      15px;
        border:             1px solid var(--colorLightGray);
        background:        rgba(255,255,255,0.7);
        backdrop-filter:    blur(4px);
        color:              var(--colorBlack);
        z-index:            10;
        text-align:         center;
        line-height:        30px;
        font-weight:        bolder;
    }

    .compareWrapper .cell.product .prodOption.moveProduct.l{
        top:                125px;
        left:               10px;
    }
        .compareWrapper .cell.product.first .prodOption.moveProduct.l{
            display:        none;
        }
    .compareWrapper .cell.product .prodOption.moveProduct.r{
        top:                125px;
        right:              10px;
    }
        .compareWrapper .cell.product.last .prodOption.moveProduct.r{
            display:        none;
        }
        .compareWrapper .cell.product .prodOption.moveProduct:hover{
            background-color:   var(--colorBlue);
            color:              var(--colorWhite);
            cursor:             pointer;
        }

    .compareWrapper .cell.product .prodOption.removeProduct{
        position:           absolute;
        top:                50px;
        right:              10px;
    }
        .compareWrapper .cell.product .prodOption.removeProduct:hover{
            background:     var(--colorRed);
            color:          var(--colorWhite);
            cursor:         pointer;
        }

.compareWrapper .cell .prdContainer.grid .wlheart{
    z-index:                3;
}
.compareWrapper .cell .prdContainer.grid .prdVergelijk{
    display:                none;
}
.compareWrapper .cell .prdContainer.grid .prdHeader a:hover{
    color:                  var(--colorBlue);
}
.compareWrapper .cell .prdContainer.grid .prdImg{
    pointer-events:         none;
}


/* Sticky eerste kolom */
.compareWrapper .sticky-col {
    position:               sticky;
    left:                   0;
    z-index:                11;
    font-weight:            500;
    background:             var(--colorWhite);
}

/* Sticky eerste rij */
.compareWrapper .table .row .cell.sticky-row {
    position:               sticky;
    top:                    0;
    z-index:                2;
    font-weight:            500;
    background:             rgba(255,255,255,0.7);
    backdrop-filter:        blur(4px);
    box-shadow:             0px 8px 8px -5px rgba(0,0,0,0);
}

.compareWrapper .table .row .cell.sticky-row.sticky {
    box-shadow:             0px 8px 8px -5px rgba(0,0,0,0.2);
}

/* Linkerbovenhoek ("Eigenschap") */
.compareWrapper .table .row .cell.sticky-col.sticky-row {
    z-index:                14 !important;
    background-color:       var(--colorWhite) !important;
    align-content:          center;
}
    .compareWrapper .row .cell.hideEqual{
        text-align:         left;
    }
    .compareWrapper .row .cell.hideEqual input[type="checkbox"]{
        position:           relative;
        top:                1px;
        transform:          scale(1.4);
        pointer-events:     none;
    }
    .compareWrapper .row .cell.hideEqual label{
        position:           relative;
        top:                0px;
        left:               6px;
        color:              var(--colorBlack);
        user-select:        none;
        pointer-events:     none;
        font-size:          14px;
    }
        .compareWrapper .row .cell.hideEqual:hover, .compareWrapper .row .cell.hideEqual:hover *{
            color:          var(--colorBlue);
            cursor:         pointer !important;
        }
    .compareWrapper .table .row .cell .compareDef{
        display:            none;
    }

    .compareWrapper .table .row .cell.spacer{
        border-bottom:      2px solid var(--colorGray);
    }

    .compareWrapper .table .row .cell img.award{
        max-width:          80px;
        max-height:         80px;
        padding-right:      10px;
    }
        .compareWrapper .table .row .cell img.award:last-child{
            padding-right:   0px;
        }

    .compareWrapper .table .row .cell .gratis{
        display:            inline-block;
        margin-right:       5px;
    }
    .compareWrapper .table .row .cell .gratis *{
        user-select:        none;
    }
    .compareWrapper .table .row .cell .gratis img{
        max-width:          80px;
        max-height:         80px;
        background-color:   var(--colorWhite);
        border:             1px solid var(--colorMediumGray);
        padding:            10px;
    }

    .compareWrapper .table .row a.cell:hover{
        color:              var(--colorBlue);
    }

    .compareWrapper .table .row.header a.cell{
        display:                grid;
        grid-template-columns:  max-content auto;
    }

    .compareWrapper .table .row.header img{
        display:            inline-block;
        max-width:          0px;
        max-height:         50px;
        margin-right:       0px;
        border:             0px solid var(--colorMediumGray);
        transition:         all 0.15s ease-in-out;
    }
    .compareWrapper .table .row.header .cell.sticky img{
        max-width:          50px;
        margin-right:       5px;
        border:             1px solid var(--colorMediumGray);
    }



#compare_breadcrumbs{
    border-bottom:          1px solid var(--colorGray);
}
#compare_breadcrumbs > ol{
    display:                block;
    padding:                0px;
}
    #compare_breadcrumbs > ol > li{
        display:            inline-block;
    }

    #compare_breadcrumbs li{
        text-decoration:    none;
        color:              var(--colorDarkGray);
        font-size:          12px;
        font-weight:        500;
        font-family:        'Roboto', sans-serif;
    }

    #compare_breadcrumbs li > a{
        line-height:        30px;
    }

    #compare_breadcrumbs li > a:hover{
        color:              var(--colorBlue) !important;
    }

    #compare_breadcrumbs li:last-child{
        color:          var(--colorGray);
    }

    #compare_breadcrumbs li:not(:last-child)::after{
        content:        "\27A4";
        padding-left:   6px;
        padding-right:  5px;
        font-size:      5px;
        font-weight:    bolder;
        vertical-align: top;
        color:          var(--colorGray);
        line-height:    30px;
    }


.compareWrapper .scoreTile{
    display:                grid;
    margin-bottom:          5px;
    grid-template-columns:  25px auto max-content;
    column-gap:             5px;
    vertical-align:         middle;
}
    .compareWrapper .scoreTile:last-child{
        margin-bottom:          0px;
    }
    .compareWrapper .scoreTile>div:nth-child(1){
        background-image:       var(--scoreicon);
        background-position:    center -1px;
        background-size:        contain;
        background-repeat:      no-repeat;
        line-height:            unset;
    }

    .compareWrapper .scoreTile.nvt *{
        color:                  var(--colorGray);
        filter:                 grayscale(1);
    }


#compareSwipeContainer{
    display:        none;
    position:       fixed;
    width:          200px;
    height:         200px;
    left:           calc(50% - 100px);
    top:            50%;
    pointer-events: none;
    z-index:        100;
}
    #compareSwipeContainer.showSwipe{
        display: inline-block;
    }

    .swipeAnimationContainer{
        display:        block;
        width:          100%;
        height:         100%;
        position:       relative;
        border-radius:  3px;
    }
        .swipeAnimationContainer .swipeArLeft{
            display:    inline-block;
            position:   absolute;
            opacity:    0;
            left:       25px;
            top:        25px;
            width:      50px;
            height:     50px;
            background-image: url('/templates/basic/images/swipe/arleft.svg');
        }
        .swipeAnimationContainer .swipeArRight{
            display:    inline-block;
            position:   absolute;
            opacity:    0;
            right:      25px;
            top:        25px;
            width:      50px;
            height:     50px;
            background-image: url('/templates/basic/images/swipe/arright.svg');
        }
        .swipeAnimationContainer .swipeHand{
            display:                    inline-block;
            position:                   absolute;
            opacity:                    0;
            left:                       80px;
            top:                        70px;
            width:                      100px;
            height:                     100px;
            background-image:           url('/templates/basic/images/swipe/hand.svg');
            background-size:            contain;
        }
        #compareSwipeContainer.showSwipe .swipeAnimationContainer .swipeHand{
            animation-name:             c_swipe;
            animation-duration:         1.2s;
            animation-iteration-count:  99;
            animation-timing-function:  ease-out;
            animation-fill-mode:        forwards;
        }
        #compareSwipeContainer.showSwipe .swipeAnimationContainer .swipeArLeft, #compareSwipeContainer.showSwipe .swipeAnimationContainer .swipeArRight{
            animation-name:             c_swipearrow;
            animation-duration:         2.5s;
            animation-iteration-count:  1;
            animation-timing-function:  ease-in-out;
            animation-fill-mode:        forwards;
        }

        @keyframes c_swipe {
            0%   {left: 80px;   opacity: 0;}
            10%  {left: 80px;   opacity: 0;}
            30%  {left: 80px;   opacity: 1;}
            45%  {left: 80px;   opacity: 1;}
            80%  {left: 0px;    opacity: 1;}
            95%  {left: 0px;    opacity: 0;}
            100% {left: 0px;    opacity: 0;}
        }
        @keyframes c_swipearrow {
            0%   {opacity: 0;}
            25%  {opacity: 1;}
            75%  {opacity: 1;}
            100% {opacity: 0;}
        }


@media screen and (max-width: 1200px) {
    .compareWrapper .table {
        display:                inline-grid;
        grid-template-columns:  var(--columnsMobile) !important;
    }
    .compareWrapper .compareShadow{
        display:                none;
    }

    .compareWrapper .table .sticky-col{
        display:                none;
    }

    .compareWrapper .table .row .cell .compareDef{
        display:                block;
        font-weight:            600;
        color:                  var(--colorGray);
        margin-bottom:          6px;
    }

    .compareWrapper .row .cell.sticky-col.sticky-row.hideEqual {
        display:                inline-block;
        position:               fixed;
        top:                    calc(100dvh - 70px);
        left:                   50%;
        transform:              translateX(-50%);
        background-color:       var(--colorBlue) !important;
        border:                 1px solid var(--colorGray);
        z-index:                10;
        height:                 40px;
    }
        .compareWrapper .row .cell.sticky-col.sticky-row.hideEqual *{
            color:                  var(--colorWhite) !important;
        }

}