xdiv {
    
    border: 1px dotted lightcoral; 
    }

xbutton {
   border: 1px dotted red; 
   
}


.slideviewer_hide {
    display: none;
}



       

.slideview-modal {
            user-select: none;
            
            margin-left: 0px !important;
            margin-right: 0px !important;
            margin-top: 0px !important;
            
            margin-bottom: 0px !important;
            padding: 0px !important;
            
            
            
            position: fixed;
            z-index: 1050;
            left: 50%;
            right: 0;
            top: 50%;
            width: 0;
            height: 0;
            background: rgba(0,0,0,1);
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition-property: width, height, top, left;
            transition-duration: 0.3s;  
            transition-timing-function: ease-in-out;
          
}
        

.slideview-img {

    user-select: none;

    
    max-width: 85%;
    max-height: 85%;
    
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    

    
    

    
    padding: 0px !important;
    border-radius: 5px;
    
   
    object-fit: contain;

    overflow: hidden;
    /* cursor: pointer; */
    transition: transform 0.3s ease;
        
}

.slideview-img-expanded {
    /*

    max-width: 100% !important; 
    max-height: 100% !important;
    */
}   

   
.close-button {
    
    position: absolute;
    display: flex;
    margin-top: 0px !important;
    padding: 0px !important;
    top: 5px;
    right: 5px;

    height: 48px;
    width: 48px;
    align-items: center;
    justify-content: center;

    font-size: 3rem;
    color: #cfcfcf;
    text-align: end;
    
    
    background-color: rgba(0,0,0,0.3); 
    border: none;

    border-radius: 24px;
    z-index: 1100;
    cursor: pointer;
}

.close-button:hover {
    color: #fff;
    background-color: rgba(46, 116, 156, 0.6); 
}

.close-button-svg {
 display: flex; 
 justify-content:  center; 
 align-items: center; 
 height: 100%; 
 width: 100%;
 margin: 0px !important;
 padding: 0px !important;    

}

.wholescreen-button {
    position: absolute;
    display: flex;

    padding: 0px !important;
    margin-top: 0px !important;
    margin-left: 0px !important;    
    margin-right: 0px !important;
    padding: 0px !important;
    height: 48px;
    width: 48px;
    justify-content: center;
    align-items: center;

    margin-top: 0px !important;
    padding: 0px !important;
    bottom: 5px;
    right: 5px;
    color: #cfcfcf;
    
    
    
    background-color: rgba(0,0,0,0.3); 
    border: none;

    border-radius: 24px;
    z-index: 1100;
    cursor: pointer;
    
}   

.wholescreen-button:hover {   
    color: #fff;
    background-color: rgba(46, 116, 156, 0.6); 
}   
.previmage-button {
    position: absolute;

    padding: 0px !important;
    margin-top: 0px !important;
    margin-left: 0px !important;    
    margin-right: 0px !important;
    padding: 0px !important;
    height: 60px;
    width: 30px;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    top: calc(50% - 30px);
    left: 0px;
    font-size: 30px;
    color: #cfcfcf;
    
    background-color: rgba(0,0,0,0.3); 
    /* background: transparent; */
   
    border: none;

    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    z-index: 1100;
    cursor: pointer;

    /* transform:scale(1,2) translate(0, -7px);*/

    @media screen and (max-width: 600px)  {
        left: 0px;
        
    }
}   

.previmage-button-svg {
 display: flex; 
 justify-content:  flex-start; 
 align-items: center; 
 height: 100%; width: 100%;
 margin: 0px !important;
 padding: 0px !important;    
 
}

.previmage-button:hover {   
    color: #fff;
    background-color: rgba(46, 116, 156, 0.6); 
    /*     background-image: linear-gradient(to right, rgba(178, 173, 245, 0.8), rgba(0,0,0,0.2)); */
}

.nextimage-button {
    position: absolute;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;    
    padding: 0px !important;
    height: 60px;
    width: 30px;
    justify-content: right;
    align-items: center;
    display: flex;
    top: calc(50% - 30px);
    right: 0px;
    font-size: 30px;
    color: #cfcfcf;
    
    background-color: rgba(0,0,0,0.3); 
    
   
    border: none;
    z-index: 1100;
    cursor: pointer;

    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;

    /* transform:scale(1,2) translate(0, -7px);*/


     @media screen and (max-width: 600px)  {
        right: 0px;
        
    }
}  

.nextimage-button-svg {
 display: flex; 
 justify-content:  flex-end; 
 align-items: center; 
 height: 100%; 
 width: 100%;
 margin: 0px !important;
 padding: 0px !important;    


}

.nextimage-button:hover {   
    color: #fff;
    background-color: rgba(46, 116, 156, 0.6); 
    /* background-image: linear-gradient(to left, rgba(178, 173, 245, 0.8), rgba(0,0,0,0.2)); */
}


.wholescreen-button-svg {
 display: flex; 
 justify-content:  center; 
 align-items: center; 
 height: 100%; 
 width: 100%;
 margin: 0px !important;
 padding: 0px !important;    

}



button.btn-close:hover {
    background-color: lightblue;

}

.image-counter {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 15px;
    color: #cfcfcf;
    background: transparent;
    padding: 5px 10px;
    
    z-index: 1100;
}

.caption {
    position: absolute;
    bottom: 5px;
    margin-top: 0.5rem;
    color: white;
    font-size: 1rem;
    text-align: center;
    width: 100%;
    max-width: 85vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #cfcfcf;
    width: 100%;
    z-index: 1000;
    @media screen and (max-height: 600px)  {
        font-size: 0.8rem;
        bottom: 5px;
    }
}

.nocaption .caption {
    display: none; 
}

.imgdiv {
    /* position: absolute; ??? */
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    
    height: 100%;
    width: 100%;
    overflow: visible;
    background: transparent;
}   

.nocaption {
    /* margin-bottom: 0px !important;  <--- leads to bump when browsing images with and without caption */
    
}   


/* Slide animations */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Animation classes */
.slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.slide-out-left {
    animation: slideOutLeft 0.3s ease-in forwards;
}

.slide-out-right {
    animation: slideOutRight 0.3s ease-in forwards;
}

.slide_none {
    animation: none;
}