.image_table_wrap{position:fixed; top:0; left:0; right:0;  background:#323232; z-index:1000; overflow:hidden; transition-duration:0.2s ease;height:0;}
.image_table_wrap.on{bottom:0; height:auto;}
.image_table_progress_wrap{background:#1a1a1a; height:72px;}
.image_table_progress{flex: 0 0 272px; box-sizing:border-box; border-right:1px solid #a3a3a3; }
.image_table_progress > .dp_flex_wauto{gap:15px;}
.table_top_title{color:#fff; font-weight:700; font-size:15px; padding:25px 25px; flex-grow: 1;}

.image_table_progress button{border:0; width:24px; height:24px; font-size:0; cursor:pointer;}
.btn-secondary{background:url('https://www.m2-pi.com/images/viewer/zoom_in_icon.png') center center no-repeat;}
.btn-primary{background:url('https://www.m2-pi.com/images/viewer/zoom_out_icon.png') center center no-repeat;}
.table_content{box-sizing:border-box; background:#fff; color:#666;  width:380px;}
.table_content > div{padding:30px 25px; height:100%; box-sizing:border-box; overflow-y:auto;}

.table_content button.info{display:none;}

.table_arrow button{position:absolute; border:0; background:rgba(0,0,0,0.3) url('https://www.m2-pi.com/images/viewer/figure_arrow.png') center center no-repeat; width:54px; height:54px; top:50%; margin-top:-27px; cursor:pointer;}
.table_arrow button.prev{left:0;}
.table_arrow button.next{right:0; transform: rotate(180deg);}
.table_bottom_gallery{background:#fff; border-top:3px solid #0075ff; box-sizing:border-box; position:relative; transition-duration:0.3s; position:absolute; bottom:0; left:0; right:0;}
.table_bottom_gallery .table_gallery_wrap{padding:16px 35px; display:block; overflow-x:scroll;}

.table_bottom_gallery .table_gallery_wrap::-webkit-scrollbar {
    height: 8px;
}
.table_bottom_gallery .table_gallery_wrap::-webkit-scrollbar-track {
    background-color: #ccc;
}
.table_bottom_gallery .table_gallery_wrap::-webkit-scrollbar-thumb { 
    background-color: #0075ff;
}
.table_bottom_gallery .table_gallery_wrap::-webkit-scrollbar-button {
    display:none;}

.table_toggle_btn{position:absolute; border:0; background:#0075ff; color:#fff; font-weight:700; text-align:center; height:35px; width:150px; border-radius:8px 8px 0 0; left:50%; margin-left:-75px; top:-38px; cursor:pointer;}
.table_toggle_btn:before{content:''; display:inline-block; width:15px; height:10px; background:url('https://www.m2-pi.com/images/viewer/figure_gallery_arrow.png') center center no-repeat; margin-right:6px;}
.table_toggle_btn:hover{background:#252525;}

.table_bottom_gallery.active{}
/*.table_bottom_gallery.active .table_gallery_wrap{display:none;}*/
/*.table_bottom_gallery.active{padding:0; height:0;}*/
.table_bottom_gallery.active .table_toggle_btn:before{transform: rotate(180deg);}
/*.table_bottom_gallery.active > .table_gallery_wrap > .dp_flex{height:0; overflow:hidden;}*/

.table_gallery_wrap > div{gap:10px;}
.table_gallery_wrap h3{color:#484848; font-size:14px; font-weight:500; margin:0; line-height:1; margin-bottom:9px;}
.table_gallery_button{display:block; border:0; position:relative; padding:0; cursor:pointer;}
.table_gallery_button:hover{opacity:0.7;}
.table_gallery_button:before{content:''; position:absolute; top:0px; left:0; right:0; bottom:0; border:1px solid #e1e1e1;}
.table_gallery_button.active:before{border:3px solid #0075ff; top:-1px; left:-1px; right:-1px; bottom:-1px;}
.table_gallery_wrap img{display:block; width:122px;}


.h100p{height:100%;}
.image_table_wrap .h100p{height:calc(100% - 208px); transition: height 0.2s ease-in;}
.image_table_wrap.active .h100p{height:calc(100% - 75px);}

.table_close_btn button.close{border:0; background:rgba(0,117,255) url('https://www.m2-pi.com/images/viewer/figure_close.png') center center no-repeat; width:72px; height:72px; cursor:pointer;}

.table-image-container-wrap{height:100%; width:calc(100% - 380px); position:relative;}

#table-image-container {position: relative; height:100%; flex-grow: 1;}
#table-image-container > div{height:100%; padding:60px 0; box-sizing:border-box; overflow:auto; width:100%;}
#table-image-container > div::-webkit-scrollbar {width: 8px; height:8px;}
#table-image-container > div::-webkit-scrollbar-track {background-color: #ccc;}
#table-image-container > div::-webkit-scrollbar-thumb {background-color: #0075ff;}
#table-image-container > div::-webkit-scrollbar-button {display:none;}

#table-image-container table{margin:0 auto;}
#table-image-container table td{padding:6px; border-bottom:1px solid #ddd;}

#table-image-container table thead tr {background:#E6E7E9;}
#table-image-container table tbody tr {background:#ffffff;}
#table-image-container table th,table table td { padding:5px; word-break:keep-all; }

@media (min-width: 1360px) {
	#table-image-container img {
		transition: transform 0.1s linear; max-width:720px; position: absolute; cursor: grab;
	}
}

@media (min-width:959px) and (max-width:1360px) { div.wrapper {} 
	#table-image-container img {
		transition: transform 0.1s linear; max-width:560px; position: absolute; cursor: grab;
	}
}

@media (max-width: 960px) {
	#table-image-container img {
		transition: transform 0.1s linear; max-width:480px; position: absolute; cursor: grab;
	}
}

.progress { overflow:hidden;
	height:6px; cursor:pointer; border-radius:6px;
	width:109px;
	background-color: #ddd;
	position: relative;
}

.progress-bar {
	height: 100%;
	background-color: #4caf50;
	width: 0;
	transition: width 0.3s ease;
}

.button-container {
	text-align: center;
	margin-top: 20px;
}

.button-container button {
	margin: 0 5px;
}


@media screen and (max-width:960px){
.table_arrow{display:none;}
.table_top_title{display:none;}
.table-image-container-wrap{width:100%;}
.image_table_wrap .h100p{position:relative; height: calc(100% - 181px);}
.image_table_wrap.active .h100p{height: calc(100% - 59px);}
.table_content{position:absolute; right:-380px; bottom:0; top:0; transition-duration:0.3s; z-index:10;}
.table_content.active{right:0;}
.table_content button.info{display:block; position:absolute; left:-60px; top:20px; border:2px solid #fff; background:transparent; font-size:18px; color:#fff; text-align:center; width:40px; height:40px; border-radius:50%; font-weight:600;}
.table_content button.info{background:url('https://www.m2-pi.com/images/viewer/info_open_mark.svg') center center no-repeat;}
.table_content.active button.info{background:url('https://www.m2-pi.com/images/viewer/info_close_mark.svg') center center no-repeat;}
.table_content.active button{background:#000;}

.image_table_progress_wrap{height:56px;}
.table_close_btn button.close{width:56px; height:56px;}
.image_table_progress{flex: 0 0 230px;}

/*.table_bottom_gallery{height:125px;}*/

.table_bottom_gallery .table_gallery_wrap{padding:16px;}


}

@media screen and (max-width:460px){
.table_content{width:70%; right:-70%;}
.table_bottom_gallery .table_gallery_wrap{overflow-x: auto;}

}