@media print{.noprint{display: none}
   table, tr, th, td  {
        border: none #000 !important;
    }
   html, body, div {
        height: 100%;
    }
}
a,a:active,a:link,a:visited,a:hover{color:#010101}
a.a1,a.a1:active,a.a1:link,a.a1:visited,a.a1:hover{padding-top: 5pt; font-weight: lighter}
a.a2,a.a2:active,a.a2:link,a.a2:visited,a.a2:hover{color:#FFF}
body{font-family: Arial; background-image: url('/i/bg.gif'); font-size: 10pt }
table,tr,th,td{font-size: 10pt; border-width: 0px;border-radius:10px}

table.alertdisplay{background-color:#00CC99;border-style:none;border-color:#fff;color:#FFF;font-size:20px;z-index:10;width:300px;height:150px;border-color:#444;border-radius:10px}
table.notificationdisplay{background-color:#FF3333;border-style:none;border-color:#fff;color:#FFF;font-size:20px;z-index:10;width:300px;height:150px;border-color:#444;border-radius:10px}
table.t0{font-size: 10pt; border-width: 0px; border-color: #ffe9b6; border-style: solid;padding:0px;border-radius:20px}
table.t0 .header{background-color:#00CC99;color:#FFF}
table.t0 tr, table.t0 th, table.t0 td{font-size: 10pt; border-width: 1px; border-color: #fff; border-style: solid;background-color:#CCDDCC;padding:8px;}
table.t1{border-width: 0px; padding:0px;width:100%}
table.t1 tr, table.t1 th, table.t1 td{font-size: 10pt; border-width: 1px; border-color: #ccddbb; border-style: solid;padding:8px;border-top:none;border-right:none}
table.t2, table.t2 tr, table.t2 th, table.t2 td{font-size: 10pt; border-width: 0px; border-style: none;}
table.h1{ border-width: 0px; border-color: #000; background-color:#FFF; border-style: solid; font-weight:bolder;border-radius:0px; cursor: hand;}
table.h1 tr, table.h1 th, table.h1 td{ font-size: medium; border-width: 1px; border-color: #FFF; background-color:#00CC99;color:#FFF; border-style: none; padding:5px}
table.m1{ padding:5px; border-width: 1px; border-color: #FFF; background-color:#cdc; border-style: solid; font-weight:bolder; cursor: hand;position:absolute;width:250px}
table.m1 tr, table.m1 th, table.m1 td{ font-size: large; border-width: 1px; border-color: #FFF; background-color:#00CC99;color:#FFF; border-style: solid;border-left-width:0px;border-right-width:0px; padding:5px}
table.m2{ padding:5px; opacity:0.95;border-width: 0px; border-color: #FFF; background-color:#BCB; border-style: solid; font-weight:700; cursor: hand;margin-top:10px;width:250px}
table.m2 tr, table.m2 th, table.m2 td{ font-size: medium; border-width: 1px;border-left-width:0px;border-right-width:0px; border-color: #FFF;color:#FFF; background-color:#33cc99; border-style: solid; font-weight:700;padding:10px}
table.m3{margin-top:-20px;margin-left:80px;position:absolute;z-index:10}
thead.thead1{position: sticky}
tbody.tbody1{height:800px;overflow:auto;width:100%}

tr.edit{background-color:#e9ffb6}
tr.row:hover,tr.edit:hover{background-color:#c1c1c1}
tr.tr1{background-color:#FFCCCC}
tr.tr5{background-color:#FF6666}
tr.tr3{background-color:#CCFCFC}
tr.tr4{background-color:#CCFCCC}
th.th0{font-size:medium;background-color:#00CC99;color:#FFF;padding:5px;margin:5px}
th.th1{background-color:#AACCAA;color:#555;height:40px;border-radius:10px;padding:5px}
th.th2, tr.tr2{background:url(/i/y1.gif)}
td.td1{background-color:#ffe9b6}
td.number,td.date{text-align:right;vertical-align:middle}
tr.line{background-color:#000000}
td, th{vertical-align:top;}
hr.hr1{height:1px;border-width:0;color:gray;background-color:gray}
input.w20{ font-size: 12pt; border-width: 1pt; width:20px; border-style: solid}
input[type=text].xsmall,input[type=number].xsmall{font-size: x-small; border-style: solid;border-radius:10px;height:20px;max-width:100%;min-width:100%;width:50px;color:#000;border-color:#ddd;border-width:thin;border-collapse:collapse;padding-left:5px;}
input[type=text].smaller{font-size: smaller; border-style: solid;border-radius:10px;height:25px;max-width:100%;color:#000;border-color:#ddd;border-width:thin;border-collapse:collapse;padding-left:5px;min-width:100%}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=date],input[type=month],input[type=datetime],input[type=datetime-local],select{transition: box-shadow 0.3s, border 0.3s; font-size: medium; border-style: solid;border-radius:10px;height:40px;color:#000;border-color:#ddd;border-width:thin;border-collapse:collapse;padding-left:5px;min-width:250px;max-width:250px}
textarea{transition: box-shadow 0.3s, border 0.3s; font-size: medium; border-style: solid;border-radius:10px;height:80px;color:#000;border-color:#ddd;border-width:thin;border-collapse:collapse;padding-left:5px;min-width:250px}
input[type='submit'],input[type='button'],input[type='reset']{ font-size: medium; border-style: solid;border-radius:10px;height:40px;color:#000;border-color:#ddd;border-width:thin;border-collapse:collapse;padding-left:5px;}
input[type='checkbox']{width:16px;height:16px}
input[type=number]{text-align:right}
input[type=number].s,input[type=date].s{border-style: solid;border-radius:10px;color:#000;border-color:#ddd;border-width:thin;border-collapse:collapse;min-width:100%;max-width:100%;width:125px;font-weight:500;font-size:small;height:auto}
input[type=text]:focus {
  border: dashed 1px #707070;box-shadow: 0 0 5px 1px #9F9;
}
input.i2, a.i2{ font-size: 16pt; font-weight:bolder; border-style: solid; border-width: 3pt; width:100%; border-color: #99CC00; background:url(/i/y1.gif) repeat bottom}
input.i12, select.i12, textarea.i12{ font-size: 12pt; border-style: solid; border-width: 1pt; width:160px; font-weight:bolder}

datalist{display: none;}
div.checklist{background-color:#fff;font-size: smaller;overflow-x:no-display; border-style: solid;border-radius:10px;height:150px;color:#000;border-color:#ddd;border-width:thin;border-collapse:collapse;padding-left:5px;min-width:240px}
div.autoselect{background-color:#fff;overflow-x:no-display; border-style: solid;border-radius:10px;height:auto;color:#000;border-color:#ddd;border-width:thin;border-collapse:collapse;padding-left:5px;min-width:240px;width:160px; text-align:left; }
div.bubble{background-color:#fff;overflow-x:no-display; border-style: solid;border-radius:10px;height:auto;color:#000;border-color:#ddd;border-width:thin;border-collapse:collapse;padding:10px;width:100%,auto; text-align:left; }
div.cl1{background-color:#99CC00}
div.m0{background-color:#ffffff; background:url(/i/y0.gif);border-width:10px}
div.m1{padding-top:2pt; cursor: hand}
div.m2{padding-top:2pt; cursor: hand}
div.m3{padding-top:0pt;margin-left:20px;display:list-item; cursor: hand}
div.h3{background-color:#99CC00;color:#fff;padding:5px;border-radius:5px;font-size:medium}
div.subtable{max-height:590px;overflow:auto}
div.info,span.info,td.info{font-size:smaller;font-weight:400}
div.h{font-size:medium;text-align:center;background-color:#33cc99!important}
div.ok0{background-color:#FFCCCC}
div.ok1{background-color:#CCFFCC}
div.ok2{background-color:#CCCCFF}
td.m1{background-color:#FFFFFF}
td.m2{background-color:#FFFFFF}

.link{cursor: hand}
.none{font-size: 12pt; border-style: none; width:16px; height:16px ; padding : 0em 0em}
.checklist{border-width: 1px; border-color: #000000; border-style: solid; overflow: auto; height: 80px; width:160px; text-align:left; font-weight:lighter; font-size:10px; padding : 0em 0em}
.center{text-align:center}
.middle{vertical-align: middle}
.selected{background-color :#99CC00}
.hand{cursor: hand;}

tr.err{ font-size: 12pt; color: red}
div.menu{ padding-top:2pt; background-color:#ffe9b6; cursor: hand}
img{border:0}
font.err,span.err,div.err{color: red}

.g1{background-color:#CCFCCC}
.r1{background-color:#FFCCCC}
.b1{background-color:#CCFCFC}

td.l1{background-color:#FFB200}
tr.l1{background-color:#FFB200}
td.l2{background-color:#99CC00}

caption      { font-style: normal; font-size: 14pt}
               border-style: solid; border-width: 1pt }
legend       { width:100% }
fieldset{ width:100% }
.h1,h1       { font-size: 24pt }
.h2,h2       { font-size: 18pt }
.h3,h3       { font-size: 14pt }
.h4,h4       { font-size: 12pt }
.h5,h5       { font-size: 8pt }
.h6,h6       { font-size: 8pt }
label        { font-size: 8pt }

marquee      { font-size: 14pt }
select       { font-size: 12pt; border-style: solid;  }
select8       { font-size: 8pt; border-style: solid;  }
th           { font-style: normal }
.number{text-align:right}

p.pagebreakafter {page-break-after: always}
p.pagebreakbefore {page-break-before: always}
button{font-size:medium;border-radius:5px;border-width:1px;border-color:#AAA;border-style:solid}
button.b1{font-size:medium}
button.b2{font-size:large;border-radius:5px}
button.b3{font-size:large;border-radius:5px;background-color:red;color:white}
button.b4{font-size:50px;min-width:200px;margin-right:30px;margin-left:30px;cursor:hand}
button.b5{font-size:40px;min-width:300px;margin-right:30px;margin-left:30px;cursor:hand}
.h100{height:100px;overflow:auto}
.h200{height:200px;overflow:auto}
.h300{height:300px;overflow:auto}
.h400{height:400px;overflow:auto}
.h500{height:500px;overflow:auto}
.h600{height:600px;overflow:auto}
div.row{display: flex;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  margin: 0 auto;
  flex-wrap: wrap;
  padding:0px;
}
div.col3{width:33.33%;}
div.col2{width:49.99%;}
div.content {margin:5px;padding:6px;border-radius:5px;border-style:solid;border-width:1px;border-color:#CCC;background-color:#EEFFEE;}
.contentBox {
    vertical-align: middle;
    margin: 0px;
    padding: 30px;
    border-bottom-style: solid;
    border-bottom-color: #DDD;
    box-shadow: 0px 0px 8px #DDD;
    border-radius: 15px;
    background-color: #FFF;
}

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.container .box {
    min-width: 50%;
    max-width: 100%;
    flex-basis: auto;
}
.modal {
    display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 120%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    animation-name: animatetop;
}
/* Add Animation */
@-webkit-keyframes animatetop {from {top: -300px; opacity: 0} to {top: 0; opacity: 1}}
@keyframes animatetop {from {top: -300px; opacity: 0} to {top: 0; opacity: 1}}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 4% auto; /* 15% from the top and centered */
    padding: 2px;
    border: 1px solid #888;
    width: 90%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}
.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 50%;
    margin:auto;
    border: none;
    outline: none;
    transition: 1s;
}
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .accordion:hover {
        background-color: #ccc;
    }

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}