body,html{user-select:none;font-family:Arial,Helvetica,sans-serif;font-size:100%;margin:0;background-color:#000;color:lightgray;-webkit-text-size-adjust:none;text-align:center}
#html.pc{height:100%;width:100%;overflow:hidden}
#html.mobile{width:100vw}
#body.pc{display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-ms-flex-flow:column;-webkit-flex-flow:column;flex-flow:column;min-height:0;height:100%;width:100%;overflow:hidden}
#body.mobile{display:block;width:100vw;overflow:auto}
a{text-decoration:none;outline:0}
#body.pc #navbar{flex:0 0 auto;padding-top:.7em; margin-left:2em;margin-right:2em; border-bottom:1px solid gray;font-size:.8rem;}
#body.mobile #navbar{flex:0 0 auto;padding-top:.7em; margin-left:2em;margin-right:2em; border-bottom:1px solid gray;font-size:.9rem;}
#navbar > a{padding-left:4%;padding-right:4%;padding-bottom:.7em;color:lightgray;display:inline-block}
#navbar > a:hover{color:#dc143c}
#header{margin:0 0 auto}
#box{-ms-flex:1 1 auto;-webkit-box-flex:1 1 auto;-webkit-flex:1 1 auto;flex:1 1 auto;display:flex;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;flex-flow:column;-ms-flex-flow:column;-webkit-flex-flow:column;margin:0;overflow:hidden}
#body.mobile > #box{height:100vh;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-ms-flex-flow:column;-webkit-flex-flow:column;flex-flow:column;margin:0;overflow:hidden}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
#body.mobile > #box{height:320px}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
#body.mobile > #box{height:568px}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
#body.mobile > #box{height:320px}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
#body.mobile > #box{height:480px}
}
#title{-webkit-user-select:text;-ms-user-select:text;user-select:text;z-index:100;-ms-flex:0 0 auto;-webkit-box-flex:0 0 auto;-webkit-flex:0 0 auto;flex:0 0 auto;text-align:center;margin:0;padding-top:.5rem;font-family:verdana,sans-serif;font-size:1rem;letter-spacing:.13rem;background:rgba(0,0,0,.3);color:#a9a9a9}
#title.measure{white-space:nowrap;overflow:visible}
#title > a:hover{color:#dc143c}
#title > a{text-decoration:none;display:inline-block;color:inherit}
#statusbar{z-index:100;-ms-flex:0 0 auto;-webkit-box-flex:0 0 auto;-webkit-flex:0 0 auto;flex:0 0 auto;font-size:.7rem;color:gray;background:rgba(0,0,0,.3)}
#status{display:inline-block;padding-top:.4rem;float:left}
#status > span{padding-left:.2rem;padding-right:.2rem}
#icon_tray{display:inline-block;float:right;height:1.1rem}
#icon_tray > div{display:inline-block;position:relative}
#icon_tray > div.hidden{display:none}
#icon_tray > div > div{white-space:nowrap;visibility:hidden;opacity:0;pointer-events:none;width:auto;background-color:#fff;color:#000;text-align:center;border-radius:6px;padding:5px;position:absolute;top:25px;right:10px;transition:opacity 2s ease-in-out;visibility:hidden;border:1px solid red}
body.pc #icon_tray > div.enabled:hover > div{opacity:1;visibility:visible}
#icon_tray > div > svg{cursor:pointer;width:1.1rem;height:1.1rem;padding-left:.5rem;padding-right:.5rem;fill:#dcdcdc}
#icon_tray > div.disabled > svg{opacity:.3}
#icon_tray > div.enabled > svg{opacity:1}
#icon_tray > div.enabled:hover > svg{fill:#dc143c}
#pdficon{display:inline-block}
.pdf:hover{border:2px #dc143c solid;height:18px;cursor:pointer}
.tooltip .tooltiptext{font-size:.7rem;white-space:nowrap;visibility:hidden;opacity:1;pointer-events:none;width:auto;background-color:#fff;color:#000;text-align:center;border-radius:6px;padding:5px;position:relative;top:20px;right:-30px;opacity:0;visibility:hidden;border:1px solid red}
.tooltip:hover .tooltiptext{visibility:visible;opacity:1;transition:opacity 2s ease-in-out}
#buttons {position:absolute ;top:.4rem; right:5px;}		
.button .buttontext {font-size:.7rem;white-space:nowrap;visibility:hidden;opacity:1;pointer-events:none;width:auto;background-color:#fff;color:#000;text-align:center;border-radius:6px;padding:5px;position:fixed;bottom:2px;right:5px;opacity:0;visibility:hidden;border:1px solid pink}
.button:hover .buttontext {visibility: visible; opacity: 1;transition: opacity 2s ease-in-out;}
#content{min-height:0;-ms-flex:1 1 auto;-webkit-box-flex:1 1 auto;-webkit-flex:1 1 auto;flex:1 1 auto;display:flex;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;-ms-flex-flow:row;-webkit-flex-flow:row;flex-flow:row}
#thumbs{padding-left:.5em;-ms-flex:0 1 22%;-webkit-box-flex:0 1 22%;-webkit-flex:0 1 22%;flex:0 1 22%;min-width:90px;max-width:194px;margin-left:1px;margin-right:0;margin-bottom:5px;font-size:0;text-align:left;overflow-x:hidden;overflow-y:auto;}
#body.pc #thumbs {scrollbar-width:none;-ms-overflow-style:none;}
#body.pc #thumbs::-webkit-scrollbar{width:5px;background-color:#a9a9a9;border-radius:6px}
#body.pc #thumbs::-webkit-scrollbar-thumb{background-color:#696969;border-radius:6px}

#body.mobile #thumbs{margin-left:0;margin-right:0;-ms-flex:0 1 100%;-webkit-box-flex:0 1 100%;-webkit-flex:0 1 100%;flex:0 1 100%}

#body.mobile #thumbs::-webkit-scrollbar{display:none}
#thumbs > figure{display:inline-block;padding:0;border:0;margin:0;width:88px;height:88px}
#thumbs > figure > a{padding:0;margin:0}
#thumbs > figure > a > img{border:1px solid #000;max-width:80px;max-height:80px;padding:0;margin:3px}
#picture_frame{position:relative;-ms-flex:1 0 auto;-webkit-box-flex:1 0 auto;-webkit-flex:1 0 auto;flex:1 0 auto;text-align:center;overflow:hidden;margin-top:3px;margin-left:7px;margin-right:7px}
#slider{position:absolute;width:100%;height:100%;-webkit-transition-timing-function:cubic-bezier(0,0.2,0.5,1);transition-timing-function:cubic-bezier(0,0.2,0.5,1)}
#slider > figure{display:block;position:absolute;width:100%;height:100%;margin:0;z-index:10;text-align:center}
#slider > figure > img{display:block;cursor:pointer;position:absolute;transform-origin:0 0;-webkit-transform-origin:0 0;text-align:center;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;z-index:12}
#body.pc #slider > figure > figcaption{-webkit-user-select:text;-ms-user-select:text;user-select:text;display:block;font-size:.8rem;position:absolute;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;text-align:center;background:rgba(0,0,0,.3);cursor:text;z-index:14;padding-top:3px;padding-bottom:3px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
#body.mobile #slider > figure > figcaption{-webkit-user-select:text;-ms-user-select:text;user-select:text;display:block;font-size:.9rem;position:absolute;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;text-align:center;background:rgba(0,0,0,.3);cursor:text;z-index:14;padding-top:3px;padding-bottom:3px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
#slider > figure > figcaption > a{color:inherit;text-decoration:underline}
#right_arrow{right:0;display:block;position:absolute;z-index:50;transform:translate(0px,100px);-webkit-transform:translate(0px,100px);overflow:visible;height:2em;width:2em;opacity:inherit}
#left_arrow{left:0;display:block;position:absolute;z-index:50;transform:translate(0px,100px);-webkit-transform:translate(0px,100px);overflow:visible;height:2em;width:2em;opacity:inherit}
#left_arrow > circle,#right_arrow > circle{opacity:0;fill:#fff;stroke:none}
#left_arrow > g > circle,#right_arrow > g > circle{fill:rgba(255,255,255,.2);transition:fill 1s}
#body.pc #left_arrow:hover > g > circle,#body.pc #right_arrow:hover > g > circle{fill:rgba(255,255,255,.4)}
#body.pc #left_arrow > g:hover > circle,#body.pc #right_arrow > g:hover > circle{fill:rgba(255,255,255,.8)}
#body.pc #left_arrow > g:hover,#body.pc #right_arrow > g:hover{cursor:pointer}
#left_arrow > g > path,#right_arrow > g > path{stroke:rgba(0,0,0,.4);fill:none;stroke-width:2;stroke-linecap:round;transition:stroke .5s;pointer-events:none}
#body.pc #left_arrow:hover > g > path,#body.pc #right_arrow:hover > g > path{stroke:rgba(0,0,0,.5)}
#body.pc #left_arrow > g:hover > path,#body.pc #right_arrow > g:hover > path{stroke:#000}
#s{height:0;display:none;visibility:hidden}