.chat-image-modal .arrow {
    cursor: pointer;
    display: block;
    height: 64px;
    margin-top: -35px;
    outline: medium none;
    position: absolute;
    top: 50%;
    width: 64px;
    z-index: 5;
}
.chat-image-modal .arrow.prev {
    background-image: url("../images/preview-prev.jpg");
    left: 20px;
    opacity: 0.2;
    background-repeat: no-repeat;
    transition: all 0.2s linear 0s;
}
.chat-image-modal .arrow.next {
    background-image: url("../images/preview-next.jpg");
    opacity: 0.2;
    right: 20px;
    background-repeat: no-repeat;
    transition: all 0.2s linear 0s;
}
.chat-image-modal .arrow.prev:hover{
    opacity:1;
}
.chat-image-modal .arrow.next:hover{
    opacity:1;
}
.chat-image-modal .chat-slider-thumnail {
    bottom: 0;
    display: flex;
    /*height: 48px;*/
    left: 0;
    margin: 0 auto;
    /*padding: 1em 0 0.8em;*/
    position: absolute;
    right: 0;
    text-align: center;
    width: 100%;
    z-index: 5;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
}
.chat-image-modal .chat-slider-thumnail ul{
display: inline-flex;
width: 100%;
overflow-x: auto;

}
.chat-image-modal .chat-slider-thumnail ul::-webkit-scrollbar{
    width: 6px;
    background-color: #F5F5F5;
 
}
.chat-image-modal  li {
    /*border: 5px solid #AAAAAA;*/
    /*border-radius: 5px;*/
    cursor: pointer;
    display: inline-block;
    height: 50px;
    margin: 0 8px;
    position: relative;
    width: 50px;
    margin-right: 40px;
    margin-bottom: 8px;
}
.chat-image-modal  li.active {
    /*border: 5px solid #FFFFFF;*/
}
.chat-image-modal  li img {
    /*width: 100%;*/
    max-height: 50px;
    max-width: 90px;
}
.chat-image-modal .slider {
    /*border: 15px solid #FFFFFF;*/
    border-radius: 5px;
    height: 100%;
    margin: 20px auto;
    position: relative;
    max-width: 100%;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.chat-image-modal.slider {
    position: relative;
    top: 0;
    left: 0;
}
.chat-image-moda .slide.ng-hide-add {
    opacity:1;
    -webkit-transition:1s linear all;
    -moz-transition:1s linear all;
    -o-transition:1s linear all;
    transition:1s linear all;
    -webkit-transform: rotateX(50deg) rotateY(30deg);
    -moz-transform: rotateX(50deg) rotateY(30deg);
    -ms-transform: rotateX(50deg) rotateY(30deg);
    -o-transform: rotateX(50deg) rotateY(30deg);
    transform: rotateX(50deg) rotateY(30deg);
    -webkit-transform-origin: right top 0;
    -moz-transform-origin: right top 0;
    -ms-transform-origin: right top 0;
    -o-transform-origin: right top 0;
    transform-origin: right top 0;
}
.chat-image-modal-.slide.ng-hide-add.ng-hide-add-active {
    opacity:0;
}
.chat-image-modal .slide.ng-hide-remove {
    -webkit-transition:1s linear all;
    -moz-transition:1s linear all;
    -o-transition:1s linear all;
    transition:1s linear all;
    display:block!important;
    opacity:0;
}
.chat-image-modal .slide,.chat-image-modal .slide.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}
.chat-image-modal.chat-media-preview
{
    background: rgba(0,0,0,0.9);
}

 @media(max-width: 1300px){
   .chat-image-modal .slider 
   {
        /*border: 15px solid #FFFFFF;*/
     
        height:800px !important;
        max-width: 100% !important;
       
    }
   }