/* Global Reset & Box-Sizing */
*, *::before, *::after {
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Responsive Root Font Size */
html {
  font-size: 62.5%; /* Sets 1rem to 10px for easier math */
}
/* Base Body Styles */
body {
  font-size: 1.6rem; /* Standard 16px font size */
  line-height: 1.5;
}
body, html {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "width" 100;
  background-color: #f9f9f9;
}
/* responsive Image Defaults */
img, picture {
  max-width: 100%;
  display: block;
}
hr {
    height: 1px;
    border-width: 0px;
    outline: none;
    background : linear-gradient(to right, rgba(0,0,0,.05),rgba(0,0,0,.2),rgba(0,0,0,0.05));
    margin: 1em 0;
}
h1 {
}
h2 {
}
h3 {
}
a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    color: #ffae00;
}
svg {
    display: block;
    margin: 0;
}
textarea {
    display: block;
    position: relative;
    border: 1px solid #DDD;
    border-radius: .5em;
    box-sizing: border-box;
    padding: 1em;
    font-size: 105%;
}
:is(input[type="text"], 
    input[type="password"]) {
    font-size: 100%;
    position: relative;
    padding: .5em;
    border: 1px solid #bababa;
    border-radius: 4px;
}
input[type="checkbox"] {
    width: 1.3em;
    height: 1.3em;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
select {
    font-size: 100%;
    padding: .25em;
    border: 1px solid #bababa;
}
button {
    cursor: pointer;
    outline: 0;
    display: inline-block;
    text-align: center;
    background-color: #000000;
    border: 1px solid #000000;
    margin: 0;
    padding: .35em 1em .25em 1em;
    font-size: 1em;
    border-radius: .25em;
    color: #ffffff;
    /* transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
}
button svg {
    /* transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
}
button:hover {
    color: #000;
    background-color: #ffffff;
    border: 1px solid #b4b4b4;
}
button:focus {
    box-shadow: inset 0 0 3px 3px rgba(0, 255, 251, 35);
}
button:hover svg {
    color: black;
    fill: black;
}
.grey {
    color: rgb(181, 181, 181);
}
.tag {
    cursor: pointer;
    outline: 0;
    display: inline-block;
    text-align: center;
    border: 1px solid #555555;
    background-color: #555555;
    margin: 0;
    border-radius: .25em;
    color: #FFF;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.tag:hover {
    color: #000;
    background-color: #ffffff;
}
.selector {
    background-color: #6b6b6b;
    border: 1px solid #6b6b6b;
    padding: .25em 1em .25em 1em;
    font-size: .9em;
}
.selected {
    background-color: blue !important;
    border: blue;
    color: #FFF;
}
.selected:hover {
    background-color: blue !important;
    border: blue;
    color: #FFF;
}
.trans {
    background-color: transparent !important;
    border-width: 0;
    padding: 0;
}
.spaceBetween {
    display:flex;
    position: relative;
    justify-content: space-between;
    box-sizing: border-box;
}
.justifyLeft {
    display:flex;
    position:relative;
    justify-content:flex-start;
    box-sizing: border-box;
}
.justifyRight {
    display:flex;
    position:relative;
    justify-content:flex-end;
    box-sizing:border-box;
}
.justifyCenter {
    display:flex;
    position:relative;
    justify-content:center;
    box-sizing:border-box;
}
.column {
  flex-direction: column;
}
.flex {
    flex: 1;
}
.wrap {
    flex-wrap: wrap;
}
.center {
    align-items: center;
}
.alignRight {
    text-align: right;
}
.padding {
    padding: 1em;
}
.paddingTop {
    padding-top: 1em;
}
.paddingLeft {
    padding-left: 1em;
}
.paddingRight {
    padding-right: 1em;
}
.orange {
    color: #fab607;
}
.green {
    border: 1px solid #0b8300;
    background-color: #0b8300;
    color: #FFF;
}
.green:hover {
    border: 1px solid #0eaa00;
    background-color: #0eaa00;
    color: #FFF;
}
.blue {
    background-color: #005c83;
    color: #FFF;
}
.blue:hover {
    background-color: #008cc9;
    color: #FFF;
}
.red {
    border: 1px solid #830000;
    background-color: #830000;
    color: #FFF;
}
.red:hover {
    background-color: #de4d4d;
    color: #FFF;
}
.gap {
    gap: 1em;
}
.gapHalf {
    gap: 0.5em;
}
.dsb {
    box-shadow: 0 0 .75em rgba(0,0,0,.1);
}
.marginTop {
    margin-top: 1em;
}
.marginBottom {
    margin-bottom: 1em;
}
.marginLeft {
    margin-left: 1em;
}
.marginRight {
    margin-right: 1em;
}
.marginTB {
    margin-top: .5em;
    margin-bottom: .5em;
}
.borderLeft {
    border-left: 1px solid #DDD;
    padding-left: 1em;
}
.borderRight {
    border-right: 1px solid #DDD;
    padding-right: 1em;
}
.borderBottom {
    border-bottom: 1px solid #DDD;
    padding: 1em 0;
    margin: 1em 0;
}
.hover:hover {
    cursor: pointer;
    background-color: rgba(0,0,0,.05) !important;
    border-radius: 4px;
    fill: #000;
}
.hoverBtn:hover {
    cursor: pointer;
    border-radius: 4px;
    fill: #ff6a00;
}
.bigMessage {
    display: block;
    position: relative;
    padding: 2em;
    border-radius: .5em;
    background-color: #cfdff1;
    font-size: 110%;
    text-align: center;
}
.notification {
    background-color: #d9f4ff;
    color: #000000;
    margin-top: 1em;
    padding: 1em;
    border-radius: .5em;
}
.notice {
    background-color: #3b8300;
    color: #FFF;
    padding: 1em;
    border-radius: .5em;
}
.error {
    background-color: #830000;
    color: #FFF;
    padding: 1em;
    border-radius: .5em;
}
.tight {
    padding: 0;
    margin: 0;
}
.halfTight {
    padding: .5em 0;
    margin: .5em 0;
}
.tightHalf {
    padding: .5em 0;
    margin: .5em 0;
}
.break {
    white-space: normal;
    overflow-wrap: break-word !important;
}
.small {
    font-size: 80%;
}
.smaller {
    font-size: 70%;
}
.bgBody {
    background-color: #f9f9f9 !important;
}
.bgWhite {
    background-color: #FFF !important;
}
.yScroll {
    overflow-y: scroll;
}
.ds {
    box-shadow: 0 0 1em rgba(0,0,0,.2);
}
.card {
    position: relative;
    padding: 1em;
    border: 1px solid #d1d1d1;
    border-radius: .5em;
    background-color: #f2f2f2;
}
.subtleCard {
    position: relative;
    padding: 1em;
    box-shadow: 0 0 .75em rgba(0,0,0,.125);
    border-radius: .5em;
    background-color: #FFF;
    margin-bottom: 1em;
}
.innerCard {
    box-shadow: inset 0 0 .5em rgba(0,0,0,.125);
    padding: 1em;
    background-color: #fafafa;
    border: .25em solid #FFF;
}
.openDownRight {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    padding: 1em;
    background-color: #FFF;
    border-radius: .25em;
    box-shadow: 0 0 .5em rgba(0,0,0,.25);
    z-index: 1001;
}
.sticky {
    position: sticky !important;
    z-index: 1;
}
#header {
    position: sticky !important;
    top: 0;
    z-index: 2;
    background-color: #FFF;
    padding: .5em 2.5% .5em 2.5%;
    box-shadow: 0 0 1em rgba(0,0,0,.2);
}
#content {
    padding: .5em 2.5% .5em 2.5%;
}
#nav {
    position: relative;
    display: block; 
    min-width: 15ch;
    max-width: 20ch;
    padding: 1em 1em 1em 0;
    border-right: 1px solid #DDD;
}
#nav a {
    position: relative;
    display: block;
}
#sub {
    padding: 1em 0;
}
#modal {
    position: fixed;
    display: block;
    z-index: 1000;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0,0,0,.35);
    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px);
}
#modalPop {
    position: absolute;
    display: block;
    top: 5%;
    left: 5%;
    width:90%;
    height: 90vh;
    border-radius: .5em;
    box-shadow: 0 0 .5em rgba(0,0,0,.5);
}
#modalInner {
    overflow-y: scroll;
    max-height: 75vh;
}
.loading {
    display: block;
    position: relative;
    background-image: url("../images/loading.gif");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 25px;
    width: 25px;
}
.loadingSmall {
    display: block;
    position: relative;
    background-image: url("../images/loading.gif");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 16px;
    width: 16px;
}
.odd {
    position: relative;
    box-sizing: border-box;
    padding: .25em 0;
    border-top: 1px solid #ddd;
}
.odd:nth-child(even) {
    background-color: rgba(0,0,0,.035);
}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: rgb(124, 124, 124); }