/*#region _ProductDetailsPictures Css*/
.main-site-body-container {
    overflow: hidden;
}

.tns-outer {
    margin-bottom: 20px;
}

#mobileDetailImagesSlider-iw {
    margin-right: 10px;
}

.images-item {
    padding-left: 9px;
    padding-right: 9px;
    margin-bottom: 18px !important;
    float: left;
}

.tns-nav {
    top: 5px !important;
    left: 10px;
    position: absolute;
    z-index: 2;
}

    .tns-nav > [aria-controls] {
        width: 9px;
        height: 9px;
        padding: 0;
        margin: 0 5px;
        border-radius: 50%;
        background: #ddd;
        border: 0;
    }

    .tns-nav > .tns-nav-active {
        background: #999;
    }

@@media only screen and (max-width: 767px) {
    .images-item {
        padding-left: 0px;
        padding-right: 0px;
        float: none;
    }

    #mobileDetailImagesSlider-iw {
        margin-right: 5px;
        margin-left: 5px;
    }
}
/*#endregion*/




section.quick-atc {
    position: fixed;
    bottom: 0px;
    transform: translateY(24px);
    opacity: 0;
    transition: opacity .25s cubic-bezier(.25,.46,.45,.94),transform .25s cubic-bezier(.25,.46,.45,.94);
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    border-radius: 2px;
    height: 72px;
    width: 92% !important;
    margin-left: 4%;
    display: flex;
    align-items: center;
    background-color: #fff;
    z-index: -1
}



section.quick-atc.js-active {
    z-index: 401;
    transform: translateY(0);
    opacity: 1
}


section.quick-atc > div {
    height: 100%;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: .02em;
}
  

.overflow-long-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selectric .arrow img {
    transition: transform 0.3s ease; 
}

    
    .selectric .arrow img.rotate {
        transform: rotate(180deg); 
    }

/*#region Size Area*/
.selectric-wrapper {
    position: relative;
    cursor: pointer
}

section.quick-atc > div.size {
    border-right: 1px solid #f3f3f3;
    padding: 0 24px
}

.selectric-boxes .selectric {
    border: 1px solid transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .selectric-boxes .selectric .label {
        color: #000;
        line-height: 1;
        height: auto;
        border: none;
        outline: 0;
        margin: 0
    }

        .selectric-boxes .selectric .label .lhead-1 {
            font-size: 14px;
            line-height: 20px;
            font-weight: 700;
            color: #000;
        }

        .selectric-boxes .selectric .label strong {
            font-size: 12px;
            line-height: 16px;
            font-weight: 700;
            padding-right: 4px
        }

        .selectric-boxes .selectric .label + .arrow {
            margin-left: 24px;
            justify-content: center;
            align-items: center;
            text-align: center;
            transition: transform .25s cubic-bezier(.25,.46,.45,.94)
        }

.selectric-items {
    position: absolute;
    top: 100%;
    left: 0;
    background: #f8f8f8;
    border: 1px solid #c4c4c4;
    z-index: -1;
    box-shadow: 0 0 10px -6px;
    cursor: default;
}

.selected-zoom-size {
    font-size: 14px;
}

.selectric-boxes .selectric-items {
    margin: 0;
    position: absolute;
    background-color: #fff;
    border-color: transparent;
    box-shadow: 0 5px 20px rgba(0,0,0,.1);
    border-radius: 2px;
    padding: 24px;
    transition: opacity .25s cubic-bezier(.25,.46,.45,.94);
    width: 280px !important;
}

section.quick-atc > div .selectric-boxes .selectric-items {
    left: auto;
    top: auto;
}

.selectric-boxes .selectric-items label {
    font-size: 12px;
    line-height: 16px;
    color: #757575;
    display: block;
    margin-bottom: 24px;
    padding-left: 8px;
}

.selectric-scroll ul {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    .selectric-scroll ul li {
        padding: 0;
        width: auto;
        background-color: transparent;
        margin-bottom: 5px;
        line-height: 1;
        font-size: 12px;
        line-height: 45px;
        color: #000;
        padding: 0 5px;
        cursor: pointer;
        text-align: center;
        border: 1px solid #fff;
        transition: background-color .4s cubic-bezier(.25,.46,.45,.94);
        white-space: nowrap;
        width: 50px;
        height: 45px;
        margin-right: 5px;
        border: 1px solid #d1d0ce;
    }

        .selectric-scroll ul li:last-of-type {
            margin-bottom: 0
        }

        .selectric-scroll ul li.selected {
            border-color: #000 !important
        }




/*#endregion Size Area End*/

section.quick-atc > div .btn-add-basket {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-width: 10vw
}

section.quick-atc > div.color {
    border-right: 1px solid #f3f3f3;
    padding: 0 24px
}

section.quick-atc > div.price {
    padding-left: 24px
}

section.quick-atc > div.button {
    max-width: 35vw;
    margin-left: auto
}

@media (min-width: 768px) {
    .selectric-boxes .selectric-items {
        width: 292px !important;
    }

    section.quick-atc > div .selectric-boxes .selectric-items {
        bottom: 60px;
        right: -25px;
    }
    section.quick-atc > div.product-name {
        width: 40%;
        padding-left: 56px;
    }
}

@media (max-width: 768px) {
    section.quick-atc > div.color {
        display: none !important;
        padding-left: 0
    }

    section.quick-atc > div.size {
        padding: 0 10px
    }

    section.quick-atc > div.product-name {
        width: 40%;
        padding-left: 56px
    }
}

@media (max-width: 767px) {
    section.quick-atc > div .selectric-boxes {
        position: static
    }

        section.quick-atc > div .selectric-boxes .selectric-items {
            right: 0;
            bottom: 84px
        }
}