/*
 * https://www.w3schools.com/cssref/pr_scroll-behavior.asp
 */
html {scroll-behavior:smooth; font-family:arial,helvetica,san-shefif;}
* {outline: none; /* 1px solid red; */}

.p0505 {padding:0 5px 0 5px;}
.dBlock {display:block;}
.dTableCell {display:table-cell;}
.taLeft {text-align:left;}
.taCenter {text-align:center;}
.taRight {text-align:right;}
.cRed {color:red;} .cTeal {color:teal;} .cOrange {color:orange;}
.cToRed {} .cToRed:hover {color:red;}
.bcToRed {} .bcToRed:hover {background-color:red;}
.bcToTeal {} .bcToTeal:hover {background-color:teal;}
.w100 {width:100%;}
.w90 {width:90%;}
.w80 {width:80%;}
.w70 {width:70%;}
.w50 {width:50%;}
.w40 {width:40%;}
.w30 {width:30%;}
.w20 {width:20%;}
.w10 {width:10%;}
.ls6px {letter-spacing:6px;}

a {color:teal; text-decoration:none;}
a:hover {text-decoration:underline;}
body {
 /* margin:auto 1%; */
 background-color:#f5f5f5;
 font-size:90%;
}
div#s {
 background-color:#ffffff; border: 1px solid #ddd;

 display:flex;
 justify-content:center;	/* horizontally center */
 align-items:center;		/* vertically center */
 background-color:#ffffff;
}
div#t {margin-top:10px; margin-bottom:10px; background-color:#ffffff;}
div#r {margin-bottom:5%;}
.fs18 {font-size:18px;}

::-webkit-input-placeholder {color:orange;}
::placeholder {color:orange;}

#s {
 position:-webkit-sticky; position:sticky; top:-1px;
 background-color:#f5f5f5; z-index:10;
}
#s * {margin-right:2%;}
#si {
 background-image: url('../img/searchicon.png');
 background-position: 5px 10px;
 background-repeat: no-repeat;
 display:inline-block;
 width: 58%;
 font-size: 16px;
 padding: 10px 0px 10px 30px;
 border: none;
}
#msg {
 width:9%; display:inline-block;
}
.search, .se {
 background-image: url('../img/search_black.png');
 background-position: center center;
 background-repeat: no-repeat;
 background-size: 16px 16px;
 display:block;
 width: 100%; height:100%;
 border: none;
}
.se:hover{
 background-image: url('../img/search_white.png');
}

.pdf, .pd {
 background-image: url('../img/pdf_black.png');
 background-position: center center;
 background-repeat: no-repeat;
 background-size: 16px 16px;
 display:block;
 width: 100%; height:100%;
 border: none;
}
.pd:hover{
 background-image: url('../img/pdf_white.png');
}

#up {
 background-image: url('../img/upicon.png');
 background-repeat: no-repeat;
 background-position: 5px 10px;
 background-color:white;
 background-size: 21px 21px;
 display: inline-block;
 width: 9%; min-width:26px; height: 40px;
 padding:0px 0px 5px 0px;
 cursor: pointer;
 border: none;
}
#up:hover {
 background-image: url('../img/upicon2.png');
}
/*
#up {
 z-index: 20; position: fixed; right:10px; bottom:10px;
 display: inline-block; width:30px; height:30px;
 background-color:#f5f5f5; color:black;
 text-align:center; font-size:120%;
 border:1px solid orange; border-radius:20px;
 text-decoration:underline;
}
#up:hover {background-color:orange; color:white;}
.b {display:inline-block; width:30px;}
.b:hover{background-color:teal; color:white;}
*/
#dd {
 background-image: url('../img/menuicon.png');
 background-repeat: no-repeat;
 background-position: 5px 10px;
 background-color:white;
 display: inline-block;
 width: 9%; min-width:26px; height: 40px;
 padding:0px 0px 5px 0px;
 cursor: pointer;
 border: none;
}
#dd:hover {
 background-image: url('../img/menuicon2.png');
}
#sc {
 background-image: url('../img/clearicon.png');
 background-repeat: no-repeat;
 background-position: 5px 10px;
 background-color:white;
 display: inline-block;
 width: 9%; min-width:26px; height: 40px;
 padding:0px 0px 5px 0px;
 cursor: pointer;
 border: none;
}
#sc:hover {
 background-image: url('../img/clearicon2.png');
}

.stick {
 position:-webkit-sticky; position:sticky; top:0px;
 background-color:#f5f5f5; z-index:30;
 padding:10px; font-size:105%;
 /* box-shadow: 0 8px 6px -6px black; */
}

.c {cursor:pointer;}
.c:hover {background-color:teal; color:white;}
.close {
 background-image: url('../img/clearicon.png');
 background-repeat: no-repeat;
 background-size: 14px 14px;
 background-position: 9px 11px;
 background-color:#f1f1f1;
 cursor: pointer;
 padding-left:40px;
}
.close:hover {
 background-size: 21px 21px;
 background-position: 5px 10px;
 background-image: url('../img/clearicon2.png');
}
#e {
 z-index:20; position:fixed; top:10%;
 left: 50%; transform: translate(-50%, 0);
 min-width:250px; width:auto;
 min-height:150px; height:auto; max-height:80%;
 overflow-x:hidden; overflow-y:scroll;
 background-color:#f1f1f1;
 box-shadow: 0px 8px 16px 20px rgba(0,0,0,0.2);
 padding:0 10px 10px 10px;
}
#e>span {
 display:block; padding:5px;
}
#e>span:hover {
 cursor:pointer; color:white; background-color:teal;
}
#h {padding:5px;text-align:center;}
/*
#e table {

}
*/
#r * {margin-bottom:2px; margin-right:2px;}
#r>p {display:inline-block; width:100px; text-transform:capitalize;}
#r>span {display:inline; padding:0 5px 0 5px; cursor:pointer; text-decoration:none; color:teal;}
#r>span:hover {text-decoration:underline;}

table {border-collapse:collapse; border-spacing:0; width: 100%; border-bottom: 1px solid #ddd;}
thead {background-color: #F1F1F1;}
tfoot {background-color: #F1F1F1;}
/* tr:nth-child(even) {background-color:#f2f2f2;} */
/* tr:hover{background:linear-gradient(to right,teal,#f2f2f2);color:white;} */

th, thead th {
 text-align:center;height:40px;min-width:50px;
 position:-webkit-sticky; position:sticky; top:37px;
 background-color:#f5f5f5; z-index:10;
 box-shadow: 0 8px 6px -6px black;
}
td {text-align:center; height:40px; border-bottom:1px solid #e1e1e1;}
td:hover {background-color:#f1f1f1;}
td.d {white-space: nowrap;}
th.s, td.s {cursor:pointer;}
th.s:hover, td.s:hover {background-color:teal; color:white;}
td a, td a:link {display:block; line-height:40px;}
td a:hover {color:white;background-color:teal;text-decoration:none;}

@media (min-width: 0px) {
 th.v, th.w, th.h, th.h2, th.h3 {display:none; visibility:hidden;}
 td.v, td.w, td.h, td.h2, td.h3 {display:none; visibility:hidden;}
 span.h, span.h2 {display:none; visibility:hidden;}
}

@media (min-width: 450px) {
 th.v {display:table-cell; visibility:visible;}
 td.v {display:table-cell; visibility:visible;}
}

@media (min-width: 600px) {
 th.w {display:table-cell; visibility:visible;}
 td.w {display:table-cell; visibility:visible; cursor:pointer}
 td.w:hover {text-decoration:underline;}
 
 /* TEST */
 th.v {display:none; visibility:hidden}
 td.v {display:none; visibility:hidden}
}

@media (min-width: 700px) {
 th.h {display:table-cell; visibility:visible;}
 td.h {display:table-cell; visibility:visible;}
 span.h {display:inline-block; visibility:visible;}
 /* td.h:hover {text-decoration:underline; cursor:pointer} */
}

@media (min-width: 800px) {
 th.h2 {display:table-cell; visibility:visible;}
 td.h2 {display:table-cell; visibility:visible;}
 span.h2 {display:inline-block; visibility:visible;}
 /* td.h2:hover {text-decoration:underline; cursor:pointer} */
}

@media (min-width: 1000px) {
 th.h3 {display:table-cell; visibility:visible;}
 td.h3 {display:table-cell; visibility:visible; overflow:hidden;}
 span.h3 {display:inline-block; visibility:visible;}
 /* td.h3:hover {text-decoration:underline; cursor:pointer} */
}

/*
[draggable=true] {cursor: move;}
*/

#str {
 position:fixed; z-index:40; 
 width:200px; height:230px;
 min-width:100px; min-height:130px;
 max-width:90%; max-height:90%;
 top:0px; left:-251px;
 transition: all 0.5s ease;

 border:1px solid grey;
 background-color:#ffffff;
 opacity: 1;
 box-shadow: 0px 8px 16px 20px rgba(0,0,0,0.2);

 cursor:zoom-in;
 
 /* make div resizable */
 /* resize:both; overflow: hidden;*/ /* auto; scroll; */
 
 /* make div draggable */
 -webkit-user-drag: element; /* none; auto; */
 
}
#str.a {
 /* transform: scale(1.3); */
 width:300px; height:345px;
 cursor:zoom-out;
 transition: all 0.5s ease;
}
#str.a span {
 background-color:#ffffe6;
}

#str span{
 cursor:pointer;
 font-size:100%;
 display:block;
 height:22px; padding:7px 0 0 0;
 background-color:#f1f1f1;
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

 background-image: url('../img/clearicon.png');
 background-size:14px 14px;
 background-repeat: no-repeat;
 background-position: 5px 50%; /* left center; 2px 5px; */
 padding-left:24px;
}
#str span:hover{
 background-image: url('../img/clearicon2.png');
}
#str img{
 margin: 10px auto auto 10px;
 width:90%; height:80%;
 object-fit: scale-down; /* contain cover fill */
}

#gs {
 height:200px; width:100%; white-space:nowrap; overflow-x:auto; overflow-y:hidden; 
}
#gs>div {
 display:inline-block; vertical-align:top; width:160px;
 height:96%; padding:0; background-color:white;
 border:2px solid #f1f1f1;
}
#gs>div:hover {
 border:2px solid rgba(255, 165, 0, 0.9);
}
#gs>div>span {
 height:12%; display:block; text-align:center;
 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 /* font-size:90%; letter-spacing:0px; */
}
#gs>div>div {
  width:100%; height:88%; vertical-align:middle;
}
#gs>div>div>img{
 width:100%; height:100%; object-fit:contain;
}