/* Endast markerad variant får border */
.slider-nav .slick-active .variants.selected {
    border: 5px solid #575657;
    border-radius: 5px;
}
.slider-nav .slick-current .variants {
    border: none;
}
.fa-circle-plus {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #DAD4CE;
    font-size: 22px;
    cursor: pointer
}
.slider-for {
    overflow: hidden;
}
.slider-for .slick-slide {
    background-color: #fff
}

.variant {
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 32px;
    background-origin: content-box;
}

.slider-nav .variants {
    height: 75px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #fff;
    padding: 6px;
    background-origin: content-box;
}
.slider-nav .slick-slide {
    margin:10px 5px!important
}


.slider-for-nav .variants {
    height: 75px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #fff;
}
.slider-for-nav{
    margin-top:10px
}

.slick-prev {
    left: 10px;
    z-index: 999;
}

.slick-next {
    right: 10px;
    z-index: 999;
}
h1 {
    font-size:30px
}

.lightbox-carousel.carousel {
    padding: 4rem;
    background: #fff !important;
}

.lightbox-carousel.carousel .ratio {
background: #fff !important;
}

.article_sub_image, .variants {
cursor: pointer;
}
.custom-alert {
    position: fixed;
    top: 145px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f5eecb;
    color: #8a6d3b;
    padding: 15px 25px;
    border: 1px solid #f5eecb;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    z-index: 1030;
    opacity: 0;
    animation: slideDown 0.3s ease-out forwards;
}
.custom-alert.hidden {
    display: none;
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
}

.custom-alert.visible {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.custom-alert i {
    margin-right: 10px;
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

#custom-alert.hiding {
    animation: slideUp 0.3s ease-out forwards;
}