/*******************************************************
  Zoom Style
********************************************************/


#product-modal .modal-content .modal-body .mask {
    position: relative;
    overflow: visible;
    margin-top: 70px;
    z-index: 1;
}
#product-modal .modal-content .modal-body .arrows .arrow-up,
#product-modal .modal-content .modal-body .arrows .arrow-down{left:50px;}
#product-modal .modal-content .modal-body .popup-image {
    margin-left: 25px;
    .lang-rtl &{
        margin: 0 25px 0 0;
    }
}

#product-modal .modal-content .modal-body .product-cover-modal, #product-modal .modal-content .modal-body .image-caption{
    width: 100%;
    max-width: 600px;
}

.popup-image > li.thumb-container{    margin: 0 0 10px 0;}
#product-modal .modal-content .modal-body .popup-image {
    width: 100px !important;
    li{
        width: 100px !important;
        padding: 5px 0px;
        outline: none;
        &.slick-active:last-child{
            margin-bottom: 0;
        }
    }
    img{
        width: 100%;
        background: #fff;
    }
}

#product-modal .modal-content .modal-body .thumbnails {text-align: left !important;}
#product-modal .modal-dialog {max-width: 766px;}

#product-modal .modal-content{
    .slick-list{
        height: 440px !important;
    }
    
    .slick-prev, .slick-next{
        left: 35%;
        font-size: 0;
        height: 30px;
        width: 30px;
        position: relative;
        &:after {
              font-size: 16px;
              font-family: Fontawesome;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              color: #fff;
              text-align: center;
              line-height: 30px;
              color: #222;
         }
         &:hover{
            &:after{
                color: #fff;
            }
         }
    }
    .slick-prev {
        bottom: auto;
        top: 5px;
        &:after {content: "\f106";}
    }
    .slick-next {
        bottom: 5px;
        top: auto;
        &:after {content: "\f107";}
    }
}