body {    
  margin: 0 !important;
  padding: 0 !important;
}
.filterbutton {background-color: #5c9c5e;}
.filterbuttonselected { background-color:#22db22; }
.filterbutton:hover, .filterbuttonselected:hover { background-color:#826AAF;box-shadow: 0 4px 8px 0 #826AAF; transition: 0.3s;}
.filterbutton:active, .filterbuttonselected:active {box-shadow: 0 4px 8px 0 rgb(0, 247, 255);}
.filterbutton, .filterbuttonselected {border: none; color: white; cursor: pointer;vertical-align:middle; border-radius: 6px; min-height: 20px; min-width:140px; text-align:center; margin:6px; padding: 6px; font-size:18px;box-shadow: 0 4px 8px 0 #707080; transition: 0.3s;}
.topdrop {display:flex; flex-wrap:wrap; margin-top:15px; margin-left:auto; margin-right: 10px; }

.UsrReply {background-color: #f6f691;}
.EditPics {background-color: #FFFFFF;}
.PendType {background-color: #5bceea;}
.PendGrp  {background-color: #53aef9;}
.RdyAppr  {background-color: #c5f1c5;}
.RdyGrp   {background-color: #c5f1c5;}
.Approved {background-color: #20FF20;}
.ReqRjct  {background-color: #FFC0C0;}
.RdyRjct  {background-color: #FF8080;}
.RjctPics, .RjctNoMU, .RjctNoRsp, .RjctTest, .RjctOther {background-color: #b9b8b4;}
.PendUpd  {background-color: #cbdcf9;  }
.colpropcmt {width:300px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

table.fill th, table.topsel th,table.list th,.header1,.catcontainer,.catcard,.grpcard,.grpimage {font-family:"Arial"; font-weight:bold; color:#206911; background-color:#e7fde7;}

input.person , select.person { background-color: #ffffe0; font-family:Verdana; font-size:1.1em; padding: 4px 4px;margin: 1px 1px;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}

table.fill { border-spacing:0px 0px; border:0px; width:100%}
table.fill th { padding:8px; font-size:14px; text-align:left; line-height:120%}
table.fill tbody { font-size:10px; font-family:"Verdana"; color:#000000; font-weight:bold; line-height:14px; }
table.fill td {padding:4px; vertical-align:top;}

table.topsel { border-spacing:1px 1px; border:0px; }
table.topsel th { padding:10px; font-size:14px; text-align:left; }
table.topsel tr { vertical-align:top; padding:10px; font-size:10px; font-family:"Verdana"; color:#000000; background-color:#e7e7e7; font-weight:bold; }
table.topsel td { vertical-align:top; padding:4px; }

table.list { border-spacing:0px 0px; border:0px;}
table.list th { padding:2px; font-size:12px; text-align:left; }
table.list tbody { font-size:12px; font-family:"Verdana"; color:#000000; background-color:#f5f5f5; font-weight:normal;}
table.list tr:hover { background-color:#D0D0F0; }
table.list td { padding:1px; line-height:120%; }
table.list tfoot {padding:1px; color:#FFFFFF; background-color:#009EDB; font-size:12px; font-family:"Verdana"; font-weight:bold;}

input.login[type=text] {width: 90%;padding: 1px 1px;margin: 1px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}
input.login[type=password] {width: 90%;padding: 1px 1px;margin: 1px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}
input.login[type=submit] {width: 100px; background-color: #4CAF50;color: white;padding: 14px 12px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}
input.login[type=submit]:hover {background-color: #45a049;}
input.toolbarbutton[type=submit], button.toolbarbutton, .toolbarbutton { background-color: #4CAF50;color: white;padding: 4px 12px;margin-right: 2px;border: none;border-radius: 4px;cursor: pointer;white-space:nowrap;}
input.toolbarbutton[type=submit]:hover, button.toolbarbutton:hover, .toolbarbutton:hover {background-color: #826AAF;box-shadow: 0 4px 8px 0 #826AAF; transition: 0.3s;white-space:nowrap;}
input.toolbarbutton[type=submit]:active, button.toolbarbutton:active, .toolbarbutton:active {box-shadow: 0 4px 8px 0 rgb(0, 247, 255);white-space:nowrap;}
.hiddenfileinput {display: none;}

input.filterbutton[type=submit] {width: 100%; background-color: #707080;color: white;padding: 4px 12px;margin: 0px 0;border: none;border-radius: 4px;cursor: pointer;}
input.filterbuttonselected[type=submit] {width: 100%; background-color: #804040;color: white;padding: 4px 12px;margin: 0px 0;border: none;border-radius: 4px;cursor: pointer;}

.wrap {display:flex; flex-wrap:wrap;}
.thumb {border-radius: 10px;}
.catcard {width:200px; height: 300px; overflow:hidden; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 10px;margin: 30px;}
.catcard:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
.catimage {position: relative; width:200px; height:200px; text-align:center; background-color:#E3E7A5;  padding: 0px 0px;}
.catcontainer {text-align:center; margin-top:20px; padding: 2px 15px;}
.grpcard {display:flex; max-width:700px; height:100px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 10px; margin: 20px;padding: 5px 5px;}
.grpcard:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
.grpimage {vertical-align:top; height: 100%; width: 100px; text-align:center; overflow:hidden; padding: 0px 0px;}
.grpcontainer {font-family: Arial, Helvetica, sans-serif; font-size:0.8em; float:right; overflow:auto; width:calc(100% - 110px); padding: 5px 5px;}

.boble {background-color:#f4f5de; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 7px;margin: 5px; padding:5px;}
.bobleinni {background-color:#9ddcf0;padding: 0px 0px;text-align: center;border-radius: 3px}

.bobledoc {display:flex; max-width:400px; background-color:#E3E7A5; overflow:hidden; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 10px; margin: 5px; padding: 0px 0px;}
.bobledocimage {width: 40px; text-align:center; overflow:hidden; color:WHITE; background-color:#4d47fa; padding: 10px 0px;}
.bobledoctxt {font-family: Arial, Helvetica, sans-serif; font-size:1em; overflow:auto; width:calc(100% - 50px); padding: 5px 5px;}

.boblecat { position:absolute; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 7px;margin: 5px; padding:5px;}
.boblecat:hover { box-shadow: 0 4px 8px 0 rgb(0, 247, 255); border-style:solid; border-width:2px; border-color:rgb(0, 247, 255);}



@media screen and (max-width: 1024px){
  .catcard {width:100px; height: 150px;margin: 10px;}
  .catimage {width:100px; height:100px;}
  .catcontainer { font-family: Arial, Helvetica, sans-serif; font-size:0.8em; text-align:center; margin-top:5px; padding: 0px 2px;}
  .grpcard {max-width:350px; height:200px; margin: 10px; padding: 2px 2px;}
  .grpimage {vertical-align:top; height: 50%; width: 100px;}
  .grpcontainer {font-family: Arial, Helvetica, sans-serif; font-size:0.8em;  width:calc(100% - 110px); padding: 2px 2px;}
}

.pageheadercell {display:table-cell; vertical-align: middle; white-space:normal; margin:0px; padding: 0px 0px; font-family:Arial;font-size:0.6em;}
.header1 { text-align:center;font-size:1.5em;padding:12px;}
.xright{display:table-cell;  width:300px; text-align:right; white-space: nowrap;}
.hideme {display: none;}

.wraponnarrow {white-space:nowrap; }
@media screen and (max-width: 1024px){
.hideonnarrow {display: none;}  
.wraponnarrow {display:flex; flex-wrap:wrap;}
}
.pageheader {display:inline; white-space:nowrap; }
@media screen and (max-width: 1024px){
.pageheader {display:flex; flex-wrap:wrap;}
}
.tableFixedHead {overflow: auto; max-height: calc(100vh - 190px)}
.tableFixedHead thead th {position: sticky; top: 0;}
.zoomimg, .selectimg, .addimg, .redcrossimg, .downimg { width:18px; height:18px; cursor: pointer;}
.zoomimg:hover, .selectimg:hover, .addimg:hover, .redcrossimg:hover, .downimg:hover { width:16px; height:16px; border: 1px solid #72f8f8; cursor: pointer;}
.zoomimgbar {
  padding: 0px;
  transition: transform 0s;
  transition-delay: 0s;
  margin: 0 auto;  
  border:0;
}
.zoomimgbar:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */   
  z-index: 2;
  transition: transform 0.2s;
  transition-delay: 0.6s;
}
.bardiagram {position: relative;  font-size: 0.8em; font-family: arial;}
.baritem { position: absolute; text-align: center; }
.hoverulred {white-space:nowrap; color:RED; text-decoration: none;}
.hoverul {white-space:nowrap; color:BLACK; text-decoration: none;}
.hoverul:hover {white-space:nowrap; text-decoration: underline;}
.hoverulred:hover {white-space:nowrap; color:RED; text-decoration: underline;}

.footer{
  background-color: rgb(209, 209, 209);
  color: black;
  width: 100%;
  text-align:center;
  font-family: Arial, Helvetica, sans-serif;
  font-size:0.4em;
  position: absolute;
  bottom:0px;
}
#drop-area.drag-over { background-color: #caf072;}