BODY
{
overflow-y:scroll;
}


/* MISC */

.mono
{
font-family:monospace !important;
}

.text-left
{
text-align:left;
}

.text-center
{
text-align:center;
}

.text-right
{
text-align:right;
}

.break-flex
{
display:initial !important;
}

.box
{
border:1px solid #BBB;
margin:5px;
border-radius:3px;
}

.form.box,
.form .box
{
background-color:#d3d3d3;
}

#progress
{
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
}

#progress DIV
{
height: 4px;
background-color: gold;
width:0%;
}

HEADER
{
width: auto;
overflow: hidden;
background-color: rgba(0,0,0,0.3);
margin-top: -10px;
margin-left: -10px;
box-sizing: border-box;
padding: 5px;
font-size: 14px;
height: 53px;
line-height: 38px;
border-bottom: 4px solid #444;
margin-right:-10px;
}

HEADER NAV.nav-left
{
width:33%;
float:left;
clear:right;
}

HEADER NAV.nav-left.no-mid
{
width:66%;
}

HEADER NAV.nav-right 
{
color:#FFF;
}

HEADER NAV.nav-right A
{
color: #154a7e;
text-decoration: underline;
}

HEADER NAV.nav-left IMG:first-child
{
position: relative;
top: -3px;
}

HEADER NAV.nav-left SPAN
{
font-weight: bold;
color: #FFF;
font-size: 20px;
margin-left: 5px;
text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
}

HEADER NAV.nav-mid
{
width:33%;
float:left;
clear:right;
}

HEADER NAV.nav-right
{
width:34%;
float:right;
text-align:right;
}

ARTICLE
{
padding-top:10px;
padding-right:5px;
}

#denote
{
visibility:hidden;
background-color: #3b4a59;
color: #EEE;
padding: 20px;
position: absolute;
top: 100px;
right: 50px;
border-radius: 5px;
z-index: 9999;
width: 300px;
text-align: center;
overflow: hidden;
opacity:0;
transition:opacity 0.6s ease-in-out;
}

/* BUTTONS */

.buttons
{
padding-top:5px;
padding-left: 5px;
}

.btn
{
background-color: #FFF;
border-radius: 5px;
border: 1px outset rgba(0,0,0,0.2);
box-shadow: inset -1px -1px 3px 0px rgb(0 0 0 / 7%);
font-size:15px;
text-align:center;
height: 2em;
display: inline-block;
vertical-align: middle;
line-height: 22px;
padding-left:5px;
padding-right:5px;
user-select:none;
}

.icon
{
font-family: 'Material Icons Round';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

.icon
{
position: relative;
bottom: -3px;
left: -1px;
font-size: 1.1em !important;
}

.btn:hover,
.btn:focus
{
border-color:rgba(0,0,0,0.5);
filter: brightness(110%);
}

.btn:active
{
border-color:rgba(0,0,0,0.2);
filter: brightness(80%);
}

.btn-sm
{
font-size:13px;
}

.btn-lg
{
font-size:18px;
padding-bottom:2px;
}

.btn-uniform
{
width:180px;
}

.btn-sm.btn-uniform
{
width:150px;
}

.btn-lg.btn-uniform
{
width:200px;
}

.btn.lt-teal
{
background-color:#11d0a9;
}

.btn.teal
{
background-color:#07a687;
color:#FFF;
}

.btn.lt-green
{
background-color:#2ECC71;
}

.btn.green
{
background-color:#27AE60;
color:#FFF;
}

.btn.lt-blue
{
background-color:#5da5d5;
}

.btn.blue
{
background-color:#2980B9;
color:#FFF;
}

.btn.lt-purple
{
background-color:#b583c9;
}

.btn.purple
{
background-color:#8E44AD;
color:#FFF;
}

.btn.lt-black
{
background-color:#3b4a59;
color:#FFF;
}

.btn.black
{
background-color:#212e3b;
color:#FFF;
}

.btn.lt-black:hover,
.btn.lt-black:focus,
.btn.black:hover,
.btn.black:focus
{
filter: brightness(120%);
}

.btn.lt-black:active,
.btn.black:active
{
color:#EEE !important;
filter: brightness(90%) !important;
}

.btn.lt-orange
{
background-color:#f8b954;
}

.btn.orange
{
background-color:#f09400;
color:#FFF;
}

.btn.lt-yellow
{
background-color:#ffe680;
}

.btn.yellow
{
background-color:#ffca0a;
}

.btn.lt-red
{
background-color:#e99090;
}

.btn.red
{
background-color:#C00;
color:#FFF;
}

.btn.lt-grey
{
background-color:#b4c0c0;
}

.btn.grey
{
background-color:#7F8C8D;
color:#FFF;
}

.btn[disabled]
{
pointer-events:none;
opacity: 0.5;
}

/* FIELDS */

.form
{
padding:10px;
}

.form LABEL
{
display:block;
margin-top:10px;
margin-bottom:1px;
color:#3e4452;
}

.form LABEL:first-child
{
margin-top:0;
}

.form INPUT[type="text"],
.form INPUT[type="password"],
.form INPUT[type="search"],
.form INPUT[type="date"],
.form INPUT[type="email"],
.form INPUT[type="tel"],
.form SELECT
{
display:block;
background-color:#FFF;
outline:none;
padding:5px;
border:1px inset rgba(0,0,0,0.3);
border-radius:3px;
font-family:Arial,sans-serif;
font-size:14px;
box-shadow: inset -2px -2px 7px 0px rgb(0 0 0 / 7%);
width: 100%;
max-width: 300px;
}

.form SELECT
{
appearance:auto;
box-shadow:initial;
}

.form INPUT[type="text"]:focus,
.form INPUT[type="password"]:focus,
.form INPUT[type="search"]:focus,
.form INPUT[type="date"]:focus,
.form INPUT[type="email"]:focus,
.form INPUT[type="tel"]:focus,
.form SELECT:focus
{
border:1px inset rgba(0,0,0,0.5);
}

.form INPUT[type="text"][readonly],
.form TEXTAREA[readonly],
.form SELECT[readonly]
{
background-color:#e0e0e0;
}



.form TEXTAREA
{
display:block;
background-color:#FFF;
outline:none;
padding:5px;
border:1px inset rgba(0,0,0,0.3);
border-radius:3px;
font-size:14px;
box-shadow: inset -2px -2px 7px 0px rgb(0 0 0 / 7%);
width: 100%;
max-width: 300px;
resize:vertical;
min-height:150px;
}

.form INPUT[type="search"]
{
background:#FFF 5px center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAQAAAATBS3iAAAAAmJLR0QANxIwhj0AAAAJcEhZcwAADsQAAA7EAZUrDhsAAAExSURBVChTddFBS1QBFIbh51xGIWfQjVEGulAaCIRWumkxizYtBfsl/ZH+SEKbcFNhi9ooroTEmpCMKVooxJA66pwWyr13qnmXH+85B74TCQb2s+tEmrGovd1aNUIkevnGaS2c9Mj9+Evr5aar0WGho10TG+e2XKFpxV2Npz9e7DqWPriTM6VYfMw+pq09b8d0TG0sxlrcxsBebXtxCB5qPisPWBXoyUrrozCnzmxMoO90vdT8l0ChsVFqLQz9HJGO8wJTJsqkWAC7zsro0o4h7qkaKR7MNfHLy/ySZ859y1f5Hbcsq4h0mK8N/cu8xzFZaRzl1sizCikx70lEpTHwKQ+cSC0Llm37fLPxWoyqwjqX3mW3Jo7praETS+DI2xxbb1386vf6mKPXXHifXUs68QdiU2Qx8WkwnwAAAABJRU5ErkJggg==');
padding-left:30px;
border-radius:10px;
}

.form TEXTAREA:focus
{
border:1px inset rgba(0,0,0,0.5);
}

.err
{
border-color:#F00 !important;
}

#err
{
color: #C00;
font-size: 12px;
margin-top: 3px;
}

#err A
{
color: blue !important;
border-bottom: 1px dotted blue !important;
}

/* SIMPLE COLS */

.row
{
width:100%;
overflow:hidden;
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
}

.col
{
overflow:hidden;
box-sizing:border-box;
padding:5px;
padding-left:0;
float:left;
clear:right;
display:flex;
flex-wrap:wrap;
}

.row > .col:last-child
{
padding-right:0;
}

.row > .col:last-child .box
{
margin-right:0;
}

.col .sameheight
{
align-self:stretch;
width:100%;
}

.col.cols2
{
width:50%;
}

.col.cols3
{
width:33.3%;
}

.col.cols3i
{
width:66.7%;
}

.col.cols4
{
width:25%;
}

.col.cols4i
{
width:75%;
}

.col.cols5
{
width:20%;
}

.col.cols5i
{
width:80%;
}

.col.cols6
{
width:16.6%;
}

.col.cols6i
{
width:83.4%;
}

.col.cols7
{
width:14.2%;
}

.col.cols7i
{
width:85.8%;
}

.col.cols8
{
width:12.5%;
}

.col.cols8i
{
width:87.5%;
}

/* CHECKS INTO TOGGLES */

LABEL:has(> INPUT[type=checkbox])
{
zoom:86%;
}

LABEL:has(> INPUT[type=checkbox]:hover)
{
cursor:pointer;
user-select: none;
}

INPUT[type=checkbox]:focus
{
outline: 1px solid rgba(0, 0, 0, 0.2);
}

INPUT[type=checkbox]
{
border:1px inset rgba(0,0,0,0.3);
border-radius: 8px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 40px;
height: 18px;
cursor: pointer;
position: relative;
top: -2px;
background: #BBB left center no-repeat url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAASCAMAAACKJ8VmAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABEVBMVEXl5eXn5+fo6Ojr6+vs7Ozl5eXi4uLY2NjZ2dnb29vd3d3S0tLY2Njb29vX19fa2trNzc3X19fNzc3Q0NDPz8/Q0NDR0dHS0tLIyMjPz8/Hx8fMzMzOzs7Hx8fJycnMzMzJycnKysrR0dHGxsbJycnFxcXKysrQ0NDb29vFxcXGxsbNzc3V1dXFxcXS0tIAQYXFxcXHx8fJycnLy8vNzc3Pz8/S0tLT09PU1NTV1dXW1tbZ2dna2trb29vd3d3e3t7f39/g4ODj4+Pk5OTl5eXo6Ojp6enq6urr6+vu7u7v7+/w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7///8BW9yyAAAAL3RSTlMAAAAAAAEOUVFRUVpaWltbbm5wcKampqa6usXFxdLS0t3d3ezs8fHx8fPz8/P6+ln+Ga0AAAABYktHRC8j1CARAAAA0ElEQVQY02XQy27CMBSE4Rmf4xCIG6kF0S77/i/VVZFAqgKFmCR2fLqgF6T+u/mWQwXAUDfh3A+xAKDCQrtdOEUu711PKOan53ZVVx5jqg+7ThT1erNsFYDYJDlmKduXZi0kSbqK41HCa/soAAAQUO1cvagU35F+2bggFf6iD+5B/Z1Ag4PxDszBXVKy3202XVycR7MfKJbPGqeUlbzBnK5RMmpWgJlZmcvn24dI8qvoYVZKmU77HcVlA4aSLQ/X03Hfu9sbGyFhdjj2BP899gU0WGkYwjQvggAAAABJRU5ErkJggg==');
box-shadow: inset 1px 1px 4px 0px rgb(0 0 0 / 24%);
}

INPUT[type=checkbox]:checked
{
background-color:#27AE60;
background-position:right center;
}

/* TABLES */

TABLE
{
margin:5px;
margin-right:0;
border:1px solid #BBB;
width:99.5%;
box-sizing:border-box;
}

TABLE.small
{
font-size:13px;
}

TABLE.rowselect
{
cursor:pointer;
}

TABLE TH,
TABLE TD
{
padding:3px;
padding-bottom:2px;
user-select:none;
}

TABLE TH
{
border: 1px solid rgb(0 0 0 / 14%);
border-top: 1px solid rgba(0,0,0,0.1);
border-left: 1px solid rgba(0,0,0,0.1);
}

TABLE TH:hover
{
background-color:#DDD;
}

TABLE TH:active
{
background-color:#CCC;
}

TABLE TBODY TR:first-child TD
{
border-top: 4px solid rgb(0 0 0 / 8%);
}

TABLE.striped TBODY TR
{
background-color:#F7F7F7;
}

TABLE.striped TBODY TR:nth-child(even)
{
background-color:#DDD;
}

TABLE.rowselect TBODY TR:hover
{
background-color:#AAA;
}

TABLE.rowselect TBODY TR:hover TD
{
border-right:1px solid #888 !important;
}

TABLE.rowselect TBODY TR.selected
{
background-color:#999;
}

TABLE.bordered TBODY TR TD
{
box-sizing:border-box;
border-right:1px solid #CCC;
}

TABLE.striped.bordered TBODY TR.selected TD
{
border-right:1px solid #888;
}

TABLE THEAD TH.sorted
{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAABmJLR0QAAABBAIUVySsnAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAX0lEQVQIW2XJMQ5AQBBA0T8yDeEmConaKt3IIZxoW+sIDjIrhHIVFBKv+skXixudc5zXhYiMACmlqchzlhCQpm3Z9wNgBhyPAPRVVZKZRQD/mbztzSKqqitQ8zeo6noDWvIcKL8SXUQAAAAASUVORK5CYII=');
background-position:calc(100% - 2px) center;
background-repeat:no-repeat;
}

TABLE THEAD TH.sorted.desc
{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAABmJLR0QAAABBAIUVySsnAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAWElEQVQIW23JoRGAIBSA4f/ZMMEM3mmRESQzkUO4ERVH0D3UIuXdYTXw1U+GcTqAmbazU1UPpEYmVfWdcxYgAvmXGYjOWeS6H5YQeEtBRFaAWuvWG8OeMx/ixxlGdCBSEgAAAABJRU5ErkJggg==');

}

TABLE THEAD TH.tabular
{
background-position:2px center;
text-align:right;
}

TABLE TBODY TD.tabular
{
text-align:right;
font-variant-numeric: tabular-nums;
}

/* DIALOGS */

DIALOG
{
padding:0;
margin-top:0;
top: 100px;
box-shadow: 4px 4px 10px 0px rgb(0 0 0 / 25%);
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.3);
z-index:9999;
position:fixed;
}

DIALOG H3
{
background: #212e3b;
color: #FFF;
font-weight: bold;
padding: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-bottom: 20px;
text-align: center;
}

DIALOG H3 SPAN.close
{
float: right;
font-size: 20px;
line-height: 20px;
margin-top: -2px;
display: inline-block;
padding: 1px;
padding-right: 4px;
padding-left: 3px;
border-radius: 6px;
cursor: pointer;
font-family: monospace,sans-serif;
padding-top: 0px;
user-select:none;
opacity:0.8;
}

DIALOG H3 SPAN.close:hover,
DIALOG H3 SPAN.close:focus
{
opacity:1;
}

DIALOG H3 SPAN.close:active
{
opacity:0.8;
}

DIALOG.ays H3
{
background:#C00;
}

DIALOG DIV.content
{
text-align:center;
padding-left:10px;
padding-right:10px;
}

DIALOG .buttons
{
padding-top:20px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}

DIALOG .confirm
{
margin-top: 20px;
margin-bottom: 10px;
}

DIALOG .confirm LABEL
{
}

DIALOG .confirm LABEL INPUT
{
}

DIALOG .confirm LABEL INPUT[type=checkbox]:checked
{
background-color: #cc0000;
}