body {
    margin: 0;
    padding: 0;
    background-color: #191919
    }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#fly {
    display: block;
    position: relative;
    margin: 5px auto;
    width: 20%;
    height: auto;
    padding: 0px;
    border-radius: 7px;
    font-size: 20px;
    text-align: center;
    color: #F0FFFF;
    border: 2px solid #38C5C6;
    background-color: transparent;
    }
#header{
    border-radius: 25px 25px 0px 0px;
    background: var(--bg-panel);
    }
.modal-content{
    border-radius: 25px 25px 0px 0px;
    background: var(--bg-panel);
}
#bwss{
    font-family: Arial, Verdana, sans-serif;
    font-size: 13px;
    margin: 1px;
    padding: 1px;
    color: yellow;
    }
#body{
    background: var(--bg);
    }
.encId{
    font-size: 25px;
    color: var(--color-text);
    display : flex;
    flex-wrap: wrap;
    quotes: none;
    flex-direction: row;
    padding: 1px
    }
.syncId{
    font-size: 25px;
    color: var(--color-text);
    display : flex;
    flex-direction: row;
    padding: 1px
    }
.desId{
    font-size: 16px;
    color: var(--color-text);
    display : flex;
    flex-wrap: wrap;
    quotes: none;
    flex-direction: row;
    padding: 1px
    }
#measure{
    font-size: 16px;
    color: var(--color-text);
    }
#measure h6{
    font-size: 16px;
    color: var(--color-text);
    }
#map1{
    margin: 15px;
    padding: 150px;
    border-radius: 15px;
    border-style: solid;
    border-color: var(--color-headings);
    border-width: 3px;
    }
#menu{
    position: relative;
    top: -315px;
    left: 20px;
    border-radius: 15px;
    font-size: 10px;
    width: 200px;
    background: var(--color-headings);
    font-family: 'Open Sans', sans-serif;
    }
#SenPhoto, #SenSetPhoto{
    position: relative;
    margin: 0px;
    padding: 12px;
    }
#switching{
    position: relative;
    margin: 1px;
    padding: 2px;
    }
#Notes{
    font-size: 16px;
    float:right;
    width: 480px;
    }
#closeButton{
    border-radius: 12px;
    border-color: grey;
    font-size: 14px;
    color: var(--color-text);
    background: var(--bg-panel);
    width: 30px;
    height: 32.5px;
    margin: 10px;
    padding: 1px;
    }
#logoName{
    font-family: Verdana, sans-serif;
    font-size: 19px;
    color: var(--color-text);
    }
#navButt{
    border-radius: 5px;
    color: var(--color-text);
    border-color: grey;
    margin: 9px;
    padding: 6px;
    }
#navbarScroll{
    text-align: right;
    margin: 6px;
    padding: 6px;
    }
hr{
    width: 100%;
    height: 1px;
    color: var(--color-text) !important;
    opacity: .8;
}
/* start switches */
html {
    /*background and navbar*/
    --bg: #FEFCF3;
    --bg-panel: #6A9C78;
    /*map and switch*/
    --color-headings: #91C788;
    /*text*/
    --color-text: black;
    --background-color: #6A9C78;
	--text-color: #292b2c;
	--hilight-color: #0275d8;
}
/* dark theme colors */
html[data-theme='dark'] {
    --bg: #232931;
    --bg-panel: #393E46;
    --color-headings: #DCD7C9;
    --color-text: white;
    --background-color: #1F2227;
    --text-color: #c0c0c0;
    --hilight-color: #8db4d6;
}

.switchTheme{
    font-size: 14px;
    color: var(--color-text);
    quotes: none;
    padding: 1px
    }

/* transition */
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}
.bullets{
    color: var(--color-text);
}
.bullets{
    color: var(--color-text);
}
#copyrightLogo {
    color: var(--color-text);
    font-size: 12px;
}
#dropdownMenuButton1{
    padding: 7px;
    margin: 12px;
    color: var(--color-text);
    background: var(--bg);
    border: 1px solid black;
}
#metricCheckbox, #checkbox, #showChart{
    padding: 1px;
    margin: 7px;
    background-color: #A4A4A4;
    border-color: black;
    transition: 0.5s;
    box-shadow: 0 2px 15px #aaa;
}
#spinner, #themeToggle, #unitToggle, #chartToggle,
#projectInfo, #aboutPlug, #aboutPhoto, #developInfo,
#smartPlug, #gtechPlug, #seaLevelPlug, #cemaPlug,
#savannahPlug {
    color: var(--color-text);
}
#copyright, #disclaimer,
#dataPlug, #copyright2,
#copyright3, #dataPlug2,
#disclaimer2, #work1, #work11{
    font-size: 12px;
    color: var(--color-text);
}
#logoText {
    font-size: 12px;
    color: var(--color-text);
}
#aboutTitle, #projectTitle {
    font-size: 18px;
    color: var(--color-text);
}
#aboutProject, #development, #contact {
    font-size: 16px;
    color: #DEFF13;
    margin: 1px;
    padding: 1px;
}

/* Highcharts */
/* Some data colors. Light mode uses defaults */
.highcharts-title {
    fill: black;
    letter-spacing: 0.1em;
    font-size: 3em;
}
.highcharts-figure,
.highcharts-data-table table {
    border-radius: 25px;
    min-width: 310px;
    max-width: 1000px;
    margin: 1em auto;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 1000px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #343436;
}

.highcharts-data-table tr:hover {
    background: #343436;
}
.highcharts-color-0 {
    fill: white;
    stroke: white;
}
.highcharts-color-1 {
    fill: #9696ab;
    stroke: #9696ab;
}
.highcharts-background {
    fill: var(--background-color);
}
.highcharts-container text {
    fill: var(--text-color);
}
.highcharts-subtitle,
.highcharts-credits,
.highcharts-axis-title {
    fill-opacity: 0.7;
}
.highcharts-grid-line {
    stroke: var(--text-color);
    stroke-opacity: 0.2;
}
.highcharts-column-series rect.highcharts-point {
    stroke: var(--background-color);
}
#hide {
  display: none;
}
#Meter, #Hectopascal, #Voltage, #Percent, .DegreeCelsius, .InchofWater {
    border-radius: 15px;
    height: 400px;
    border-style: solid;
    border-color: #313131;
    border-width: 2px;
}
/* Main Map Layers */
#menuMain {
    background: #C0C0CC;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 45px;
    border-radius: 3px 3px;
    width: 70;
    border: 1px solid rgba(0, 0, 0, 0.4);
    font-family: 'Open Sans', sans-serif;
}
#menuMain a {
    font-size: 9px;
    color: #404040;
    display: block;
    margin: 10;
    padding: 0;
    padding: 7px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    text-align: center;
}
#menuMain a:last-child {
    border: none;
}
#menuMain a:hover {
    background-color: #f8f8f8;
    color: #404040;
}
#menuMain a.active {
    background-color: #f8f8f8;
    color: black;
    border-radius: 4px;
}
#menuMain a.active:hover {
    background: #86868e;
}
#menuLegendAS a{
    background: #4A51FF;
    color: #4A51FF;
    position: absolute;
    display: block;
    font-size: 10px;
    margin: 5;
    padding: 0;
    z-index: 1;
    top: 14px;
    right: 195px;
    border-radius: 55px;
    width: 70;

    border-style: solid;
    border-color: #080F43;
    border-width: 2px;
}
#menuLegendRD a{
    background: #7FFF00;
    color: #7FFF00;
    position: absolute;
    display: block;
    font-size: 10px;
    margin: 5;
    padding: 0;
    z-index: 1;
    top: 44px;
    right: 195px;
    border-radius: 55px;
    width: 70;
    border-style: solid;
    border-color: #080F43;
    border-width: 2px;
}
#menuLegendND a{
    background: #39497A;
    color: #39497A;
    position: absolute;
    display: block;
    font-size: 10px;
    margin: 5;
    padding: 0;
    z-index: 1;
    top: 74px;
    right: 195px;
    border-radius: 55px;
    width: 60;
    border-style: solid;
    border-color: #080F43;
    border-width: 2px;
}
#logoContainer{
    position: absolute;
    z-index: 100;
    bottom: 7px;
    left: 100px;
    width: 100%;
    max-width: 45px;
    height: 50%;
    max-height: 50px;
}
#dataSupply {
    position: absolute;
    font-size: 11px;
    color: white;
    z-index: 100;
    bottom: 7px;
    left: 280px;
    width: 100%;
    height:auto;
    max-width:280px;
    font-family: 'Open Sans', sans-serif;
}
#builder {
    position: absolute;
    font-size: 11px;
    color: white;
    z-index: 100;
    bottom: 7px;
    left: 150px;
    width: 100%;
    height:auto;
    max-width:280px;
    font-family: 'Gill Sans', sans-serif;
}
#introText {
    display: block;
    position: relative;
    font-size: 18px;
    font-weight: bold;
    color: white;
    z-index: 100;
    margin: 105px auto;
    width: 100%;
    height:auto;
    max-width:600px;
    font-family: 'Open Sans', sans-serif;
}
.switch {
    display: block;
    position: relative;
    z-index: 100;
    margin: 5px auto;
    width: 100%;
    height:auto;
    max-width:170px;
}
/* introText delay */
@keyframes foo{
  0%,3%{opacity:0;}
  5%,100%{opacity:1;}
}
#aboutButton, #developButton, #contactButton, #contactReturnButton {
    background: var(--bg-panel);
    color: var(--text-color);
}
@media only screen and (max-width: 600px) {
    #menuMain {width: 100px; left: 15px;}
    #tempEnc {width: 300px; left: 0px;}
    #youtube {width: 300px; left: 15px;}
    #navButt {width: 110px; right: 0px;}
    #menuLegendAS a, #menuLegendRD a, #menuLegendND a{width: 20px; left: 120px;}
    #fly, #introText {
    font-size: 15px;
  }
    #menuMain a{
    font-size: 7px;
  }
    #SenSetPhoto, #SenPhoto{
    display: none;
  }
    #logoName{
    font-size: 14px;
  }
}