.popup_wrapper {
overflow: hidden;
display: block;
z-index: inherit;
}
.popup_mask {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background: #000;
background: rgba(150,50,0,0.4);
}
.brown_border {
border: 5px solid #b5510e !important;
border-radius: 10px;
box-shadow: 0 0 20px #f8ffb2;
padding:4px;
background-color: #f0f0f0 !important;
}
.popup_window {
display: block;
position: fixed;
left: 1%;
top: 1%;
right:1%;
bottom: 1%;
overflow: hidden;
padding: 0px 0px; z-index: 2000;
}
.imgNormal {
margin: 0 auto;
display: block;
cursor:zoom-in; 
object-fit: cover;
max-height: 100%;
overflow: scroll;
}
.imgcenter {
display: block;
margin:auto;
vertical-align: middle;
max-width: 98% !important;
min-height: 98% !important;
object-fit: contain;
}
.imgfull {
display: block;
margin:auto;
vertical-align: middle;
box-shadow: 0 0 20px rgba(150,50,0,1);
object-fit: contain;
}
.imgUnzoomed {
display: block;
margin:auto;
border: 5px solid #b5510e;
border-radius: 10px;
box-shadow: 0 0 20px rgba(150,50,0,1); min-height: 98% !important;
max-height: 98% !important;
object-fit: contain;
cursor: zoom-in;
z-index: 9999;
}
.imgZoomed {
display: block;
margin:auto;
border: 5px solid #b5510e;
border-radius: 10px;
box-shadow: 0 0 20px rgba(150,50,0,1);
max-width: 3000px !important;
min-height: 3000px !important;
cursor: move;
}
.square {
width:100%; height: 0;
padding-bottom:100%;
position: relative;
}
.inner {
width:100%; height: 100%;
position: absolute;
display: inline-block;
}input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.05px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 7.9px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: rgba(255, 229, 204, 0.5);
border-radius: 3.3px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1.8px 1.8px 1.1px #000000, 0px 0px 1.8px #0d0d0d;
border: 0.8px solid #43023b;
height: 20px;
width: 20px;
border-radius: 7px;
background: rgba(181, 81, 14, 0.79);
cursor: pointer;
-webkit-appearance: none;
margin-top: -6.05px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: rgba(255, 242, 230, 0.5);
}
input[type=range]::-moz-range-track {
width: 100%;
height: 7.9px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: rgba(255, 229, 204, 0.5);
border-radius: 3.3px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-moz-range-thumb {
box-shadow: 1.8px 1.8px 1.1px #000000, 0px 0px 1.8px #0d0d0d;
border: 0.8px solid #43023b;
height: 20px;
width: 20px;
border-radius: 7px;
background: rgba(181, 81, 14, 0.79);
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 7.9px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: rgba(255, 216, 179, 0.5);
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 6.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: rgba(255, 229, 204, 0.5);
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 6.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1.8px 1.8px 1.1px #000000, 0px 0px 1.8px #0d0d0d;
border: 0.8px solid #43023b;
height: 20px;
width: 20px;
border-radius: 7px;
background: rgba(181, 81, 14, 0.79);
cursor: pointer;
height: 7.9px;
}
input[type=range]:focus::-ms-fill-lower {
background: rgba(255, 229, 204, 0.5);
}
input[type=range]:focus::-ms-fill-upper {
background: rgba(255, 242, 230, 0.5);
}#modal_wrapper.overlay::before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background: #000;
background: rgba(0,0,0,0.7);
}
#modal_window {
display: none;
z-index: 15000;
position: fixed;
left: 50%;
top: 50%;
width: 970px;
height: 480px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
overflow-y:hidden; 
}
#modal_wrapper.overlay #modal_window {
display: block;
}