.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

    .active, .collapsible:hover {
        background-color: #555;
    }

.mycontent {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}

.downbutton {
    background: url(/Images/down26.png) no-repeat;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border: none;
}

.upbutton {
    background: url(/Images/up26.png) no-repeat;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border: none;
}

.wrappedlabel {
    width: 100px;
    display: block;
    word-wrap: break-word;
}

.transparent66 {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.66);
}

.transparent50 {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
}

.transparent25 {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.25);
}

html {
    height: 100%;
    /*line-height: .5;*/
    /* background-image: linear-gradient(red, yellow); */
    /*height: auto;*/
    /*background: rgb(2,0,36);*/
    /*background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,80,121,1) 35%, rgba(0,212,255,1) 100%);*/
}

* {
    margin: 0px;
    /* padding: 0;  this was causing all sorts of problems */
    /* Set some basic padding to keep content from hitting the edges */
    padding-left: 0px;
    padding-right: 0px;
}

body {
    height: 100%;
    background-color: #FFFFFF;
    /* background: linear-gradient(90deg, #FFFFFF, #CCCCCC 100%) repeat; */
    font-size: 11pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: black; /* so unstyled text is obvious */
    /* Move down content because we have a fixed navbar that is 50px tall */
    /*padding-top: 50px;*/
    padding-bottom: 0px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

div {
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.whitediv {
    background: linear-gradient(90deg, #FFFFFF, #808080 100%) no-repeat;
    box-shadow: 10px 5px 8px #666666;
    height: 40px;
    vertical-align: middle;
    overflow: hidden;
}

.reddiv {
    background: linear-gradient(90deg, #FF0000, #800000 100%) no-repeat;
    box-shadow: 10px 5px 8px #666666;
    height: 40px;
    vertical-align: middle;
    overflow: hidden;
}

.divblue {
    background: linear-gradient(90deg, #0000FF, #000080 100%) no-repeat;
    box-shadow: 10px 5px 8px #666666;
}

span.nobr {
    white-space: nowrap;
}

::placeholder {
    color: gray;
    font-size: 13pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    opacity: 0.5;
}

input::placeholder {
    color: gray;
    font-size: 13pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    opacity: 0.5;
}

.fileupload {
    height: 40px;
    font-size: 11pt;
    color: #000000;
    display: inline-block;
    padding: 3px 3px; /* first is top/bottom, then left/right  */
    border-radius: 8px;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.center {
    margin-left: auto;
    margin-right: auto;
}


.justified {
    text-align: justify;
}


/* TABLES */
table.paneltable {
    vertical-align: top;
    background-color: #C0C0C0;
    border: 10px solid #C0C0C0;
    padding: 0px;
    table-layout: auto;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

.tablelines {
    border-bottom: 1px solid #000000;
    border-right: 0px solid #00c000;
}

.tableshadow {
    -webkit-box-shadow: 7px 7px 10px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 7px 7px 10px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 7px 7px 10px 0px rgba(50, 50, 50, 0.5);
    background-color: #ccffcc;
}

.table1 {
    border-spacing: 0;
    border-collapse: collapse;
}




.table2 {
    border-collapse: collapse;
    width: 100%;
}

/* TEXT */
.outline {
    text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black, -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black, 0.05em 0.05em black;
}

.shadowoutline {
    text-shadow: 1px 1px 1px #000000;
}

.label {
    font-size: 11pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}

.tip {
    font-size: 10pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: #8000FF;
    font-weight: bold;
    font-style: italic;
}

.note {
    font-size: 10pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: #444444;
}

.tiny {
    font-size: 9pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
}

.text {
    font-size: 11pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
}

.boldtext {
    font-size: 11pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    font-weight: bold;
}

.small {
    font-size: 10pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
}

.smallheading {
    font-size: 12pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}

.mediumheading {
    font-size: 14pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}

.largeheading {
    font-size: 16pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}

.pagetitle {
    font-size: 20pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.footer {
    font-size: 10pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
}



/* INPUT */
input:focus, textarea:focus {
    outline: none;
}




 input[type="checkbox"] {
    appearance: none;
    width: 32px;
    height: 32px;
    border: 2px solid #000;
    border-radius: 4px;
    margin-left: 3px;
    background-color: #ffffff;
    /*  margin-right: 10px; */
    position: relative;
    cursor: pointer;
    /* Smooth animations */
    /* transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; */
}

    /* Hover effect */
 input[type="checkbox"]:hover {
        /*   border-color: #ffffff; */
    }

    /* Focus outline */
input[type="checkbox"]:focus {
        /*   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); */
    }

    /* Checked state */
input[type="checkbox"]:checked {
        /*  background-color: #00ff00;  */
        /*  border-color: #00ff00;  */
    }

        /* Checkmark */
input[type="checkbox"]:checked::after {
            content: "✔";
            color: black;
            font-size: 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -57%);
            /*  transition: opacity 0.25s ease; */
        }















.checkbox1 input[type="checkbox"] {
    appearance: none;
    width: 32px;
    height: 32px;
    border: 2px solid #000;
    border-radius: 4px;
    margin-left: 3px;
    background: rgba(255,255,255,.66);
    /*  margin-right: 10px; */
    position: relative;
    cursor: pointer;
    /* Smooth animations */
    /* transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; */
}

    /* Hover effect */
    .checkbox1 input[type="checkbox"]:hover {
        /*   border-color: #ffffff; */
    }

    /* Focus outline */
        .checkbox1 input[type="checkbox"]:focus {
        /*   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); */
    }

    /* Checked state */
    .checkbox1 input[type="checkbox"]:checked {
        /*  background-color: #00ff00;  */
        /*  border-color: #00ff00;  */
    }

        /* Checkmark */
        .checkbox1 input[type="checkbox"]:checked::after {
            content: "✔";
            color: black;
            font-size: 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -57%);
            /*  transition: opacity 0.25s ease; */
        }


.checkbox2 input[type="checkbox"] {
    appearance: none;
    width: 32px;
    height: 32px;
    border: 2px solid #000;
    border-radius: 4px;
    margin-left: 3px;
    background-color: yellow;
    /*  margin-right: 10px; */
    position: relative;
    cursor: pointer;
    /* Smooth animations */
    /* transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; */
}

    /* Hover effect */
    .checkbox2 input[type="checkbox"]:hover {
        /*   border-color: #ffffff; */
    }

    /* Focus outline */
    .checkbox2 input[type="checkbox"]:focus {
        /*   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); */
    }

    /* Checked state */
    .checkbox2 input[type="checkbox"]:checked {
        /*  background-color: #00ff00;  */
        /*  border-color: #00ff00;  */
    }

        /* Checkmark */
        .checkbox2 input[type="checkbox"]:checked::after {
            content: "✔";
            color: black;
            font-size: 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -57%);
            /*  transition: opacity 0.25s ease; */
        }




.textinput {
    height: 40px;
    font-size: 13pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: black;
    border: 1px solid #000000;
    border-radius: 8px;
}

.textinputbig {
    height: 40px;
    font-size: 16pt;
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: black;
    border: 1px solid #000000;
}



/* BUTTONS */
.button {
    /*
    width: auto;
    min-width: 30px;
    height: 40px;
    font-size: 11pt;
    display: inline-block;
    padding: 3px 3px;
    border-radius: 8px;
    box-sizing: content-box;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20);
    text-align: center;
    transition: all 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-transform: uppercase;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
    margin-right: 4px;
    margin-bottom: 4px;
    */

    background: #00B0F0 !important;
    color: #fff !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    appearance: none;
    /*background: #fff; */
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    padding: 9px 12px;
    border-radius: 12px;
    /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20);*/
    box-shadow: 0px 3px 3px rgba(0, 0, 0, .25);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-transform: uppercase;
}


.buttonsmall {
    width: auto;
    min-width: 40px;
    height: 20px;
    font-size: 10pt;
    display: inline-block;
    padding: 3px 3px;
    border-radius: 8px;
    box-sizing: content-box;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20);
    text-align: center;
    transition: all 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-transform: uppercase;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.20);
    margin-right: 4px;
    margin-bottom: 4px;
}


/* LINKS */
    .underline {
    text-decoration: underline;
}

.link, .link:visited {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

    .link:hover {
        color: red;
    }

    .link:active {
        color: red;
    }

.linkunderline, .linkunderline:visited {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    font-weight: bold;
    text-decoration: underline;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

    .linkunderline:hover {
        color: red;
    }

    .linkunderline:active {
        color: red;
    }

.linkblue1 {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: #00B0F0;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

    .linkblue1:hover {
        color: red;
    }

    .linkblue1:active {
        color: red;
    }

    .linkblue1:visited {
        color: #00B0F0;
    }

.linkblue {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: #0000FF;
    font-weight: bold;
    text-decoration: none;
}

    .linkblue:hover {
        color: red;
    }

    .linkblue:active {
        color: red;
    }

    .linkblue:visited {
        color: #0000FF;
    }

.linkgreen {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: #00AA00;
    font-weight: bold;
    text-decoration: none;
}

    .linkgreen:hover {
        color: red;
    }

    .linkgreen:active {
        color: red;
    }

    .linkgreen:visited {
        color: #00AA00;
    }

.linkwhite {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

    .linkwhite:hover {
        color: black;
    }

    .linkwhite:active {
        color: black;
    }

    .linkwhite:visited {
        color: white;
    }

.linkblack {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: black;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(2, 2, 2, 0.2);
}

    .linkblack:hover {
        color: white;
    }

    .linkblack:active {
        color: white;
    }

    .linkblack:visited {
        color: black;
    }

.linkgray {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: #808080;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(2, 2, 2, 0.2);
}

    .linkgray:hover {
        color: red;
    }

    .linkgray:active {
        color: red;
    }

    .linkgray:visited {
        color: #808080;
    }

.linkred {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: red;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(2, 2, 2, 0.2);
}

    .linkred:hover {
        color: black;
    }

    .linkred:active {
        color: black;
    }

    .linkred:visited {
        color: red;
    }

.linkwhiteunderline {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: white;
}

.linkyellowunderline {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: yellow;
}

.linkblueunderline {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: blue;
    text-shadow: 1px 1px 1px rgba(2, 2, 2, 0.2);
}

.linkblackunderline {
    font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
    color: black;
    text-shadow: 1px 1px 1px rgba(2, 2, 2, 0.2);
}


/* HR */
hr {
    border-top: 1px solid black;
}

    hr.hr1 {
        border: 1px solid #808080;
        border-radius: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    hr.hr2 {
        height: 12px;
        border: 0;
        box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
    }

.hr2 {
    border: 1px solid darkgray;
    margin-top: 0px;
    margin-bottom: 0px;
}

hr.hrwhite {
    border-top: 1px solid white;
}

hr.hrblack {
    border-top: 1px solid black;
}




/* SHADOW */
.shadow1 {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.shadow2 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.shadow3 {
    text-shadow: 3px 3px 6px rgba(0,0,0,0.2);
}

.box-shadow {
    box-shadow: 7px 7px 10px 0px rgba(50, 50, 50, 0.5);
    /* box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 20px 20px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); */
}

.box-shadow2 {
    box-shadow: 8px 8px 8px rgba(0,0,0,0.2), 16px 16px 16px rgba(0,0,0,0.2), 32px 32px 32px rgba(0,0,0,0.2);
}



/* COLORS */
.blue1background {
    background-color: #00B0F0;
    color: white;
    border: 1px solid #00B0F0;
}

.lime {
    background-color: #00ff00;
    color: black;
    border: 1px solid #00ff00;
}

    .lime:hover {
        background-color: black;
        color: #00ff00;
        border: 1px solid #000000;
    }

    .lime:active {
        background-color: black;
        color: #00ff00;
        border: 1px solid #000000;
    }

.limeonblack {
    background-color: black;
    color: #00ff00;
    border: 1px solid black;
}

    .limeonblack:hover {
        background-color: #00ff00;
        color: black;
        border: 1px solid #00ff00;
    }

    .limeonblack:active {
        background-color: #00ff00;
        color: black;
        border: 1px solid #00ff00;
    }


.green {
    background-color: #00AA00;
    color: white;
    border: 1px solid #00AA00;
}

    .green:hover {
        background-color: white;
        color: #00AA00;
        border: 1px solid white;
    }

    .green:active {
        background-color: white;
        color: #00AA00;
        border: 1px solid white;
    }

.greenonblack {
    background-color: black;
    color: #00AA00;
    border: 1px solid black;
}

    .greenonblack:hover {
        background-color: #00AA00;
        color: black;
        border: 1px solid #00AA00;
    }

    .greenonblack:active {
        background-color: #00AA00;
        color: black;
        border: 1px solid #00AA00;
    }

.blue {
    background-color: #0000FF;
    color: white;
    border: 1px solid #0000FF;
}

    .blue:hover {
        background-color: white;
        color: #0000FF;
        border: 1px solid white;
    }

    .blue:active {
        background-color: white;
        color: #0000FF;
        border: 1px solid white;
    }

.blueonblack {
    background-color: black;
    color: #0000FF;
    border: 1px solid black;
}

    .blueonblack:hover {
        background-color: #0000FF;
        color: black;
        border: 1px solid #0000FF;
    }

    .blueonblack:active {
        background-color: #0000FF;
        color: black;
        border: 1px solid #0000FF;
    }

.main {
    background-color: #00B0F0;
    color: white;
    border: 1px solid #00B0F0;
}

    .main:hover {
        background-color: white;
        color: #00B0F0;
        border: 1px solid white;
    }

    .main:active {
        background-color: white;
        color: #00B0F0;
        border: 1px solid white;
    }

.gray {
    background-color: #808080;
    color: white;
    border: 1px solid #808080;
}

    .gray:hover {
        background-color: white;
        color: #808080;
        border: 1px solid white;
    }

    .gray:active {
        background-color: white;
        color: #808080;
        border: 1px solid white;
    }

.grayonblack {
    background-color: black;
    color: #808080;
    border: 1px solid black;
}

    .grayonblack:hover {
        background-color: #808080;
        color: black;
        border: 1px solid #808080;
    }

    .grayonblack:active {
        background-color: #808080;
        color: black;
        border: 1px solid #808080;
    }

.red {
    background-color: #FF0000;
    color: white;
    border: 1px solid #FF0000;
}

    .red:hover {
        background-color: white;
        color: #FF0000;
        border: 1px solid white;
    }

    .red:active {
        background-color: white;
        color: #FF0000;
        border: 1px solid white;
    }

.redonblack {
    background-color: black;
    color: #FF0000;
    border: 1px solid black;
}

    .redonblack:hover {
        background-color: #FF0000;
        color: black;
        border: 1px solid #FF0000;
    }

    .redonblack:active {
        background-color: #FF0000;
        color: black;
        border: 1px solid #FF0000;
    }

.black {
    background-color: #000000;
    color: white;
    border: 1px solid black;
}

    .black:hover {
        background-color: white;
        color: #000000;
        border: 1px solid white;
    }

    .black:active {
        background-color: white;
        color: #000000;
        border: 1px solid white;
    }

.pink {
    background-color: #FFC0CB;
    color: black;
    border: 1px solid #FFC0CB;
}

    .pink:hover {
        background-color: black;
        color: #FFC0CB;
        border: 1px solid black;
    }

    .pink:active {
        background-color: black;
        color: #FFC0CB;
        border: 1px solid black;
    }

.pinkonblack {
    background-color: black;
    color: #FFC0CB;
    border: 1px solid black;
}

    .pinkonblack:hover {
        background-color: #FFC0CB;
        color: black;
        border: 1px solid #FFC0CB;
    }

    .pinkonblack:active {
        background-color: #FFC0CB;
        color: black;
        border: 1px solid #FFC0CB;
    }

.cyan {
    background-color: #00FFFF;
    color: black;
    border: 1px solid #00FFFF;
}

    .cyan:hover {
        background-color: black;
        color: #00FFFF;
        border: 1px solid #000000;
    }

    .cyan:active {
        background-color: black;
        color: #00FFFF;
        border: 1px solid #000000;
    }

.cyan_border {
    background-color: #00FFFF;
    color: black;
    border: 1px solid #000000;
}

    .cyan_border:hover {
        background-color: black;
        color: #00FFFF;
        border: 1px solid #000000;
    }

    .cyan_border:active {
        background-color: black;
        color: #00FFFF;
        border: 1px solid #000000;
    }

.cyanonblack {
    background-color: black;
    color: #00FFFF;
    border: 1px solid black;
}

    .cyanonblack:hover {
        background-color: #00FFFF;
        color: black;
        border: 1px solid #00FFFF;
    }

    .cyanonblack:active {
        background-color: #00FFFF;
        color: black;
        border: 1px solid #00FFFF;
    }

.yellow {
    background-color: #FFFF00;
    color: black;
    border: 1px solid #FFFF00;
}

    .yellow:hover {
        background-color: black;
        color: #FFFF00;
        border: 1px solid black;
    }

    .yellow:active {
        background-color: black;
        color: #FFFF00;
        border: 1px solid black;
    }

.yellow_border {
    background-color: #FFFF00;
    color: black;
    border: 1px solid #000000;
}

    .yellow_border:hover {
        background-color: black;
        color: #FFFF00;
        border: 1px solid black;
    }

    .yellow_border:active {
        background-color: black;
        color: #FFFF00;
        border: 1px solid black;
    }

.yellowonblack {
    background-color: black;
    color: #FFFF00;
    border: 1px solid black;
}

    .yellowonblack:hover {
        background-color: #FFFF00;
        color: black;
        border: 1px solid #FFFF00;
    }

    .yellowonblack:active {
        background-color: #FFFF00;
        color: black;
        border: 1px solid #FFFF00;
    }

.magenta {
    background-color: #FF00FF;
    color: white;
    border: 1px solid #FF00FF;
}

    .magenta:hover {
        background-color: white;
        color: #FF00FF;
        border: 1px solid white;
    }

    .magenta:active {
        background-color: white;
        color: #FF00FF;
        border: 1px solid white;
    }

.magentaonblack {
    background-color: black;
    color: #FF00FF;
    border: 1px solid black;
}

    .magentaonblack:hover {
        background-color: #FF00FF;
        color: black;
        border: 1px solid #FF00FF;
    }

    .magentaonblack:active {
        background-color: #FF00FF;
        color: black;
        border: 1px solid #FF00FF;
    }

.orange {
    background-color: #FF8C00;
    color: white;
    border: 1px solid #FF8C00;
}

    .orange:hover {
        background-color: white;
        color: #FF8C00;
        border: 1px solid white;
    }

    .orange:active {
        background-color: white;
        color: #FF8C00;
        border: 1px solid white;
    }

.orangeonblack {
    background-color: black;
    color: #FF8C00;
    border: 1px solid black;
}

    .orangeonblack:hover {
        background-color: #FF8C00;
        color: black;
        border: 1px solid #FF8C00;
    }

    .orangeonblack:active {
        background-color: #FF8C00;
        color: black;
        border: 1px solid #FF8C00;
    }

.darkorange {
    background-color: #FF8C00;
    color: black;
    border: 1px solid #FF8C00;
}

    .darkorange:hover {
        background-color: black;
        color: #FF8C00;
        border: 1px solid black;
    }

    .darkorange:active {
        background-color: black;
        color: #FF8C00;
        border: 1px solid black;
    }

.darkorangeonblack {
    background-color: black;
    color: #FF8C00;
    border: 1px solid black;
}

    .darkorangeonblack:hover {
        background-color: #FF8C00;
        color: black;
        border: 1px solid #FF8C00;
    }

    .darkorangeonblack:active {
        background-color: #FF8C00;
        color: black;
        border: 1px solid #FF8C00;
    }

.darkorangeonwhite {
    background-color: white;
    color: #FF8C00;
    border: 1px solid white;
}

.darkorangeonblack:hover {
    background-color: #FF8C00;
    color: white;
    border: 1px solid #FF8C00;
}

.darkorangeonblack:active {
    background-color: #FF8C00;
    color: white;
    border: 1px solid #FF8C00;
}

.purple {
    background-color: #5D3FD3;
    color: white;
    border: 1px solid #5D3FD3;
}

    .purple:hover {
        background-color: white;
        color: #5D3FD3;
        border: 1px solid black;
    }

    .purple:active {
        background-color: white;
        color: #5D3FD3;
        border: 1px solid black;
    }

.purpleonblack {
    background-color: black;
    color: #5D3FD3;
    border: 1px solid black;
}

    .purpleonblack:hover {
        background-color: #5D3FD3;
        color: black;
        border: 1px solid #5D3FD3;
    }

    .purpleonblack:active {
        background-color: #5D3FD3;
        color: black;
        border: 1px solid #5D3FD3;
    }

.white {
    background-color: #ffffff;
    color: black;
    border: 1px solid #ffffff;
}

    .white:hover {
        background-color: black;
        color: #ffffff;
        border: 1px solid black;
    }

    .white:active {
        background-color: black;
        color: #ffffff;
        border: 1px solid black;
    }

.whiteonblack {
    background-color: black;
    color: #ffffff;
    border: 1px solid black;
}

    .whiteonblack:hover {
        background-color: #ffffff;
        color: black;
        border: 1px solid #ffffff;
    }

    .whiteonblack:active {
        background-color: #ffffff;
        color: black;
        border: 1px solid #ffffff;
    }



.whitetext {
    color: #ffffff;
}

.blacktext {
    color: #000000;
}

.graytext {
    color: #808080;
}

.blue1text {
    color: #00B0F0;
}










/* Navbar container */
.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
}

    /* Links inside the navbar */
    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
}

    /* Dropdown button */
    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit; /* Important for vertical align on mobile phones */
        margin: 0; /* Important for vertical align on mobile phones */
    }

    /* Add a red background color to navbar links on hover */
/*  .navbar a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }
    */
/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        /* Add a grey background color to dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #ddd;
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.sideways {
    writing-mode: vertical-rl;
    -webkit-transform: rotate(180deg);
    text-align: left;
    vertical-align: bottom;
}

.chart-container {
    width: 100%; /* Container spans full screen width */
    max-width: 100%; /* Prevent overflow */
    height: auto; /* Let image define height */
    overflow-x: auto; /* Horizontal scroll if needed */
}

    .chart-container img {
        width: 100% !important; /* Scale chart image to container width */
        height: auto !important; /* Maintain aspect ratio */
        display: block;
    }
/* =========================================================================================
   DASHBOARD / TO DO (modern "cards" layout)
   These styles support Dashboard.aspx and ToDo.aspx which share markup classes like:
   .dash-wrap, .cards, .card-head, .metrics, .todo-row, .pill, etc.
   ========================================================================================= */

.qfit-page .dash-wrap {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
}

/* small utilities used by Dashboard/ToDo markup */
.u-w-100 { width: 100%; }
.u-mt-8 { margin-top: 8px; }

.qfit-page .dash-wrap .dash-header {
    display: flex;
    align-targets: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 2px 0 8px 0;
}

.qfit-page .dash-wrap .dash-sub {
    font-size: 10pt;
    color: #666666;
}

/* grid of cards */
.qfit-page .dash-wrap .cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 900px) {
    .qfit-page .dash-wrap .cards { grid-template-columns: 1fr 1fr; }
}

/* Scope "card" styling to dashboard pages so it does not impact Bootstrap cards elsewhere */
.qfit-page .dash-wrap .card {
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    padding: 10px;
}

/* Remove the global div padding inside these cards so spacing is predictable */
.qfit-page .dash-wrap .card div { padding-left: 0px; padding-right: 0px; }

.qfit-page .dash-wrap .card-head {
    display: flex;
    align-targets: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.qfit-page .dash-wrap .card-title {
    margin: 0px;
    font-size: 14pt;
    font-weight: bold;
}

.qfit-page .dash-wrap .card-range {
    margin: 0px;
    font-size: 10pt;
    color: #666666;
    white-space: nowrap;
}

/* two-column content inside summary cards */
.qfit-page .dash-wrap .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 520px) {
    .qfit-page .dash-wrap .two-col { grid-template-columns: 1fr; }
}

.qfit-page .dash-wrap .metrics {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qfit-page .dash-wrap .metric {
    display: flex;
    align-targets: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.qfit-page .dash-wrap .metric:last-child { border-bottom: none; }

.qfit-page .dash-wrap .value {
    font-weight: bold;
    white-space: nowrap;
}

.qfit-page .dash-wrap .priority-label {
    margin-top: 6px;
    font-size: 10pt;
    color: #666666;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Prioritized To-Do controls + rows */
.qfit-page .dash-wrap .todo-options {
    display: flex;
    flex-wrap: wrap;
    align-targets: center;
    gap: 6px;
    margin-bottom: 8px;
}

.qfit-page .dash-wrap .todo-ddl {
    min-width: 190px;
}

@media (max-width: 520px) {
    .qfit-page .dash-wrap .todo-ddl {
        min-width: 150px;
        flex: 1 1 150px;
    }
}

.qfit-page .dash-wrap .todo-refresh {
    min-width: 120px;
}

.qfit-page .dash-wrap .todo-empty {
    padding: 10px 0px;
    color: #555555;
    font-style: italic;
}

.qfit-page .dash-wrap .todo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qfit-page .dash-wrap .todo-row {
    display: flex;
    align-targets: center;
    justify-content: space-between;
    gap: 10px;
    text-decoration: none;
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 12px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.02);
}

/* undo global div padding inside row */
.qfit-page .dash-wrap .todo-row div { padding-left: 0px; padding-right: 0px; }

.qfit-page .dash-wrap .todo-row:hover {
    background-color: rgba(0, 176, 240, 0.12);
}

.qfit-page .dash-wrap .todo-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0px;
    flex: 1 1 auto;
}

.qfit-page .dash-wrap .todo-name {
    font-size: 12pt;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qfit-page .dash-wrap .todo-meta {
    display: flex;
    flex-wrap: wrap;
    align-targets: center;
    gap: 6px;
    font-size: 10pt;
    color: #444444;
}

.qfit-page .dash-wrap .todo-progress {
    font-weight: bold;
    color: #000000;
    white-space: nowrap;
}

.qfit-page .dash-wrap .todo-chevron {
    font-size: 18pt;
    line-height: 1;
    color: #00B0F0;
    margin-left: 10px;
}

/* Pills */
.qfit-page .dash-wrap .pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border: 1px solid rgba(0, 0, 0, 0.18);
}

.qfit-page .dash-wrap .pill-type { background-color: #e5e7eb; color: #111111; }
.qfit-page .dash-wrap .pill-type-g { background-color: rgba(0, 176, 240, 0.15); border-color: rgba(0, 176, 240, 0.45); }
.qfit-page .dash-wrap .pill-type-i { background-color: rgba(0, 170, 0, 0.15); border-color: rgba(0, 170, 0, 0.45); }
.qfit-page .dash-wrap .pill-type-e { background-color: rgba(255, 140, 0, 0.18); border-color: rgba(255, 140, 0, 0.55); }

.qfit-page .dash-wrap .pill-hi {
    background-color: rgba(255, 0, 255, 0.18);
    border-color: rgba(255, 0, 255, 0.55);
    color: #000000;
}

/* error block at bottom of dashboard pages */
.qfit-page .dash-wrap .error {
    margin-top: 10px;
    color: #b00020;
    font-weight: bold;
}

.qfit-page .dash-wrap .error {
    margin-top: 10px;
    color: #b00020;
    font-weight: bold;
}

/* =========================================================
   RESTORED CONSOLIDATED STYLES (auto)
   ========================================================= */
/*
    This section restores CSS classes that are referenced throughout the site
    but were not present in the consolidated stylesheet.

    Notes:
    - Scope rules to the smallest practical containers to avoid affecting Bootstrap.
    - Keep values conservative to avoid layout regressions.
*/

/* ---------- Page wrappers / layout ---------- */
.page-shell {
    min-height: 100vh;
}

.qfit-modern {
    background-color: #ffffff;
}

.qfit-page {
    padding: 6px 4px;
}

@media (min-width: 768px) {
    .qfit-page {
        padding: 10px 8px;
    }
}

.navbar-title {
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.2;
}

/* ---------- Auth / onboarding pages ---------- */
.auth-card {
    max-width: 520px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 16px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

.logo {
    display: inline-block;
    font-size: 42pt;
    font-weight: 700;
    line-height: 1;
}

/* ---------- Search boxes (Checklist-style clear button) ---------- */
.search-inputwrap {
    position: relative;
    width: 98%;
    max-width: 520px;
}

.search-inputwrap .textinput,
.search-inputwrap input[type="text"],
.search-inputwrap input[type="search"],
.search-inputwrap textarea {
    width: 100%;
    box-sizing: border-box;
    padding-right: 42px;
}

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    padding: 0;
    line-height: 1;
    font-size: 18pt;
    cursor: pointer;
    opacity: 0.85;
}

.search-clear:hover {
    opacity: 1;
}

.qe-search {
    max-width: 98%;
}

/* ---------- Larger checkboxes / radios (BulkEdit + dynamic controls) ---------- */
.bigcheckbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

.bigcheckbox label {
    margin-left: 6px;
    vertical-align: middle;
}

.rbl input[type="radio"] {
    transform: scale(1.2);
    margin-right: 6px;
}

.rbl label {
    margin-right: 14px;
}

/* ---------- qFIT detail/edit pages ---------- */
.qfit-card {
    border: 1px solid #e5e7eb;
    background: rgba(255,255,255,0.85);
    border-radius: 10px;
    padding: 10px 10px;
    margin: 8px 0;
}

.qfit-card--subtle {
    background: rgba(0,0,0,0.03);
}

.qfit-daynav {
    display: flex;
    align-targets: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.qfit-actionbar {
    margin: 12px auto;
    max-width: 900px;
}

.qfit-actions {
    display: flex;
    align-targets: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    background: rgba(255,255,255,0.9);
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}

/* Buttons: legacy "blue1" helper used in older walkthrough pages */
.button.blue1,
.blue1.button {
    background-color: #00B0F0;
    border-color: #00B0F0;
    color: #ffffff;
}

/* ---------- Charts page layout helpers ---------- */
.dash {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 4px;
}

.dash .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
}

.dash .control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
}

.dash .control label {
    font-weight: bold;
}

.dash .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.dash .summary-meta {
    padding: 8px 12px;
    font-size: 10pt;
    opacity: 0.85;
}

.dash .summary-table {
    width: 100%;
    border-collapse: collapse;
}

.dash .summary-table th,
.dash .summary-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
}

.dash .summary-table th {
    font-weight: bold;
    text-align: left;
    background: rgba(0,0,0,0.03);
}

/* ---------- Cookie/Test helper classes ---------- */
.ct-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
}

.ct-card {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 12px;
    padding: 14px;
    margin: 10px 0;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}

.ct-title {
    font-size: 16pt;
    font-weight: bold;
    margin-bottom: 8px;
}

.ct-small {
    font-size: 10pt;
    opacity: 0.85;
}

.ct-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    white-space: pre-wrap;
}

.ct-btn {
    margin-right: 8px;
}

/* ---------- Utility classes referenced across Join/Help pages ---------- */
.u-bg-white-50 { background-color: rgba(255,255,255,0.5); }

.u-h-25 { height: 25px; }
.u-h-32 { height: 32px; }

.u-ml-80 { margin-left: 80px; }
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-p-1 { padding: 1px; }

.u-pos-rel-top-6 { position: relative; top: 6px; }

.u-text-left { text-align: left; }
.u-text-left-h-18 { text-align: left; height: 18px; }
.u-text-left-va-top { text-align: left; vertical-align: top; }

.u-w-150 { width: 150px; }
.u-w-97 { width: 97%; }
.u-w-99 { width: 99%; }

.u-spacer-32-1 { width: 32px; height: 1px; }
.u-spacer-32-10 { width: 32px; height: 10px; }

/* ---------- Recreated missing one-off inline-style classes (inl-*) ---------- */
/* DashboardOld: narrow numeric cells */
.inl-79a56a10,
.inl-a9efa544 {
    text-align: right;
    white-space: nowrap;
    width: 70px;
}

/* Join: 10px spacer TD */
.inl-93e2d771 {
    padding: 0;
}

/* Login: label TD (keeps left column from wrapping) */
.inl-7006b2a9 {
    white-space: nowrap;
    vertical-align: top;
    padding-right: 12px;
}

/* BulkEdit: bottom action buttons row */
.inl-61e1dd05 {
    display: flex;
    justify-content: center;
    align-targets: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
}

/* Test: button row */
.inl-9374e842 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Tutorial: emphasize the word "some" */
.inl-b305c5e0 {
    font-weight: bold;
    text-decoration: underline;
}

/* Invite: keep Copy button comfortably wide on mobile but not huge on desktop */
.inl-fd386784 {
    width: 98%;
    max-width: 360px;
}

/* HeartRateZones: consistent table cell styling */
.inl-3ae88286,
.inl-ae0fbc9f,
.inl-3392bdcc,
.inl-18eb75df,
.inl-5feeda1d,
.inl-4568b5b2 {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    text-align: center;
    white-space: nowrap;
    min-width: 120px;
}

.inl-0483a0a6,
.inl-1b969693,
.inl-74463b68,
.inl-95e066b8,
.inl-8fdc107c,
.inl-956d9d1e {
    width: 10px;
}

/* HeartRateZones: color bands (label + spacer) */
.inl-79b1dc55, .inl-0483a0a6 { background: linear-gradient(90deg, #404040, #808080 100%); }
.inl-bd40b033, .inl-1b969693 { background: linear-gradient(90deg, #800000, #ff0000 100%); }
.inl-fb5adf2f, .inl-74463b68 { background: linear-gradient(90deg, #8b4000, #ffa500 100%); }
.inl-33b65a98, .inl-95e066b8 { background: linear-gradient(90deg, #AAAA00, #dddd00 100%); }
.inl-158a73c9, .inl-8fdc107c { background: linear-gradient(90deg, #008000, #00cc00 100%); }
.inl-d7cd746b, .inl-956d9d1e { background: linear-gradient(90deg, #000080, #0000ff 100%); }