.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, #AAAAAA 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;
}




/* 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"] {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    accent-color: #000000;
    position: relative;
    margin-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
}

input[type='checkbox']:checked {
    background: #000000;
}

input[type='radio'] {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    accent-color: #000000;
    position: relative;
    margin-left: 0px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.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;
}




/* 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;
}

.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: red;
    }

    .linkwhite:active {
        color: red;
    }

    .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: red;
    }

    .linkblack:active {
        color: red;
    }

    .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); */
}




/* 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;
}