html { overflow-x: hidden; }
body { overflow-x: hidden; line-height: 1.45; font-family: sans-serif; background-color: var(--body-back); color: (--body-font); margin: 0px; }

.nav-menu { display: flex; flex: 1 1 auto; align-items: flex-end; gap: 0.125rem; min-width: 0; }
.nav-toggle { display: none; }

/*STATIC ACROSS BOTH COLOR THEMES*/
.tab { display: flex; align-items: stretch; gap: 0.25rem; min-height: 100px; height: auto; width:100%; overflow: visible; position: relative; border: 0px solid #ccc; background-color: #475f57; }
.tab .logo { width:100px; margin-right:50px; display: block; flex: 0 0 auto; float: none; }
.tab button {
    float: none; min-height: 44px; margin-top: 0; align-self: flex-end; white-space: nowrap; 
    font-size: 16px; color: #ffffff; background-color: inherit; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; 
}
.tab button:hover { color: #000000; background-color: #ddd; }
.tab button.active { color: #000000; background-color: #ccc; }

.tab .symbolbox { 
    font-size: 12px; color:white;
    position: static; flex-wrap: wrap; align-content: center; align-items: center; justify-content: flex-end; gap: 0.25rem 0.4rem;
    margin-left: auto; padding: 0.7rem 0.75rem; max-width: 18rem; float: none;
}
.tab .symbolbox input[type="text"] { width: min(8rem, 100%); min-height: 38px; font-size: 1rem; }
.tab .symbolbox input[type="button"] { margin-left: 5px; padding: 0.45rem 0.7rem; font-size: 0.8rem; }
.tab .symbolbox a { font-size: 12px; color: yellow }

.tabcontent { border-bottom: 1px solid #475f57; padding-right: 20px; padding-left: 20px; padding-bottom: 30px; margin-bottom: 20px; }

.outer { width: 100%; vertical-align: top; }
.inner { color: var(--body-font); font-size: var(--body-font-size); vertical-align: top; display: inline-block; }
/********************************/

.styled-table { width: 98%; max-width: 98%; margin:15px; border: 1px solid var(--table-border); background-color: var(--table-back); border-collapse: collapse; font-size: var(--body-font-size); color: var(--table-font); width: 100%; box-shadow: 0 0 12px var(--table-shadow); }
.styled-table thead tr th { overflow-wrap: anywhere; background-color: var(--table-head); color: var(--table-head-font); font-weight:bold; text-align: left; padding: 5px 7px; }
.styled-table td { overflow-wrap: anywhere; text-align: left; padding: 5px 7px; }
.styled-table tbody tr { border-bottom: 1px solid var(--table-border); }
.styled-table tbody tr:nth-of-type(odd) { background-color: var(--table-alt-row) }
.styled-table tbody tr:hover { background-color: var(--table-hover-row); }
.styled-table input { font-size: var(--input-font-size); background-color: var(--input-back); color:var(--input-font); border: var(--input-border) 2px solid; padding:3px; border-radius: 5px; min-width:60px; }
.styled-table a { font-weight: bold; color:var(--table-link); }

.xxx_styled-table tbody tr:last-of-type { border-bottom: 2px solid #009879; }
.xxx_styled-table tbody tr.active-row { font-weight: bold; color: #009879; }


.snip-table { width: 98%; max-width: 98%; margin:15px; border: 1px solid var(--table-border); background-color: var(--table-back); border-collapse: collapse; font-size: var(--body-font-size); color: var(--table-font); width: 100%; box-shadow: 0 0 12px var(--table-shadow); }
.snip-table thead tr th { overflow-wrap: anywhere; background-color: var(--table-head); color: var(--table-head-font); font-weight:bold; text-align: left; padding: 5px 7px; }
.snip-table td { overflow-wrap: anywhere; text-align: left; padding: 5px 7px; }
.snip-table tbody tr { border-bottom: 1px solid var(--table-border); }
.snip-table input { font-size: var(--input-font-size); background-color: var(--input-back); color:var(--input-font); border: var(--input-border) 2px solid; padding:3px; border-radius: 5px; min-width: 60px; }
.snip-table a { font-weight: bold; color:var(--table-link); }

/*STATIC ACROSS BOTH COLOR THEMES*/
.redrow { color: black; background-color: rgb(250, 194, 194); }
.redrow a { color: black;; font-weight:bold; }
.redrowhard { color: black; background-color: rgb(255, 128, 128); }
.redrowhard a { color: black; font-weight:bold; }
.greenrow { color: rgb(22, 22, 22); background-color: rgb(191, 223, 191); }
.greenrow a { color: black; font-weight:bold; }
.greenrowhard { color: black; background-color: rgb(127, 183, 127); }
.greenrowhard a { color: black; font-weight:bold; }
.donothing { color: var(--table-font); }
.donothing a { color: var(--table-link); font-weight:bold; }

.xxx_detailsframe { height: min(750px, 75dvh); }
.xxx_detailstopbar { display: flex; width: 100%; }
.xxx_detailstopbar div { width: auto !important; min-height: 32px; height: auto; padding: 0.35rem 0.6rem; }

.detailsframe { width: 100%; height: min(750px, 75dvh); background-color: var(--body-back); top: 0px; left: 0px; margin: 0px; padding: 0px; }
.detailstopbar div { display: inline-block; margin: 0px; width: 100%; height: 20px; background-color: var(--table-head); color: var(--table-head-font); padding: 4px 0px 0px 10px; font-size: var(--body-font); font-weight: bold; text-decoration: none; }
/********************************/

#helpmodal {
    z-index:9999; display: none; position: fixed; top: calc(20vh); background-color: var(--help-back); border: 2px solid var(--help-border); border-radius: 15px; 
    width: min(900px, calc(100vw - 2rem)); max-height: calc(90vh - 5rem); overflow: auto; padding: 1rem;
    }
.helpcontent { width:100%; overflow-y: auto; max-height: calc(75vh - 5rem); }

h1 { font-size: 1.9em; font-weight: 400; color: var(--headers); } 
h2 { font-size: 1.7em; font-weight: 400; color: var(--headers); } 
h3 { font-size: 1.5em; font-weight: 400; color: var(--headers); } 
h4 { font-size: 1.3em; font-weight: 400; color: var(--headers); } 

a { font-size: var(--body-font-size); font-weight: bold; text-decoration: none; color: var(--link-font); }
a:hover { text-decoration: underline }
img, video, iframe, canvas, embed, object { max-width: 100%; }
img, video { height: auto; }
div, span, P, ul, li { color: var(--body-font); font-size: var(--body-font-size); }
select, input[type=text], input[type=email], input[type=number], textarea { font-size: var(--input-font-size); background-color: var(--input-back); border: var(--input-border) 2px solid; padding:5px; border-radius: 5px; }
input[type=button], input[type=submit], input[type=reset] {
    background-image: linear-gradient(#108938, #035d2b);
    border: 1 solid var(--button-border);
    border-radius: 4px;
    box-shadow: var(--button-shadow) 0 5px 5px;
    box-sizing: border-box;
    color: var(--button-font);
    cursor: pointer;
    font-size: var(--input-font-size);
    margin: 15px;
    padding: 7px 14px;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation; 
}
input[type=radio], input[type=checkbox] { min-width: 10px; min-height: 10px; }

.tabset { max-width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

.tabset > input[type="radio"] { position: absolute; left: -200vw; }
.tabset .tab-panel { display: none; }

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6), 
.tabset > input:nth-child(13):checked ~ .tab-panels > .tab-panel:nth-child(7) { display: block; }

.tabset > label { min-height: 44px; padding: 0.55rem 0.9rem 1rem; position: relative; display: inline-block; border: 1px solid transparent; border-bottom: 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.tabset > label::after { content: ""; position: absolute; left: 15px; bottom: 10px; width: 22px; height: 4px; background: var(--tabset-bottom); }
input:focus-visible + label { outline: 2px solid var(--tabset-line); border-radius: 3px; }
.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label { color: var(--tabset-link); }
.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after { background: #19c659; }
.tabset > input:checked + label { border-color: var(--tabset-line); border-bottom: 1px solid var(--tabset-bottom); margin-bottom: -1px; }
.tab-panel { padding: 0px 0; border-top: 1px solid var(--tabset-line); }
.tab-panels, .tab-panel { min-width: 100%; }

.chartjs { background-color: var(--chartjs-bgcolor); }

/*STATIC ACROSS BOTH COLOR THEMES*/
.greendot1 { width: 12px;height: 12px;background-color: rgb(196, 249, 208);border-radius: 50%;display: inline-block; }                        
.greendot2 { width: 12px;height: 12px;background-color: rgb(58, 245, 105);border-radius: 50%;display: inline-block; }                        
.greendot3 { width: 12px;height: 12px;background-color: rgb(1, 127, 33);border-radius: 50%;display: inline-block; }                        
/********************************************************************************************************************************/
/********************************************************************************************************************************/
/********************************************************************************************************************************/

*,
*::before,
*::after { box-sizing: border-box; }

@media (max-width: 1024px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.55rem; }
    h3 { font-size: 1.35rem; }
    h4 { font-size: 1.15rem; }

    .tab {
        min-height: 80px;
    }

    .tab .logo {
        width: 80px;
    }

    .tab button {
        padding: 0.7rem 0.75rem;
        font-size: 0.95rem;
    }

    .inner[style*="width:600px"],
    .inner[style*="width:675px"] {
        width: min(100%, 42rem) !important;
    }

    .inner[style*="width:325px"],
    .inner[style*="width:320px"] {
        width: min(100%, 22rem) !important;
    }
}

@media (max-width: 768px) {

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        align-self: center;
        min-width: 44px;
        padding: 0.5rem 0.7rem;
        color: #ffffff;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 4px;
        font-size: 1.35rem;
    }

    .nav-menu {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding-top: 0.4rem;
    }

    .nav-menu.is-open {
        display: flex;
    }

    .tab button,

    .tab .symbolbox {
        width: 100%;
        max-width: none;
        margin-left: 0;
        justify-content: flex-start;
        padding: 0.6rem 0;
    }

    .tabset > label {
        font-size: 0.9rem;
        padding-inline: 0.75rem;
    }

    select, 
    input[type=text], 
    input[type=email], 
    input[type=number], 
    input[type=date], 
    textarea {
        min-width:60px;
        font-size: 12px;
        min-height: 20px;
        margin: 0.35rem 0;
    }

    input[type=button],
    input[type=submit],
    input[type=reset] {
        content-visibility:auto;
        font-size: 12px;
    }

    input[type=radio],
    input[type=checkbox] {
        min-width: 20px;
        min-height: 20px;
    }

    .outer {
        text-align: left !important;
    }

    .inner,
    .inner[style] {
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .inner[style*="padding:40px"] {
        padding: 1rem !important;
    }

    iframe {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .detailsframe {
        aspect-ratio: auto;
        height: 70dvh;
    }

    .styled-table,
    .snip-table {
        max-width: 95%; width: 95%; box-shadow: 0 0 10px var(--table-shadow); 

    }

    .helpcontent p,
    .helpcontent ul,
    .helpcontent li {
        font-size: 1rem;
    }

    #helpmodal {
        width: calc(100vw - 1rem);
        padding: 0.75rem;
    }


}