@import url(../Widgets/widgets.css);
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Roboto');
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border:0;
    font-family: "Open Sans", Verdana, sans-serif, 'Roboto';
    font-size: 0.9em;
}
body{
    margin: 0 auto;
    overflow: hidden;
  }


.container {
    display:inline-block;
    height:100%;
    max-height: 100%;
    width:100%;
    overflow: hidden;
}

.container > div {
    /* height:100%; */
    height: 100vh;
}
.subtext
{
    font-size: 0.8em;
}
.content {
width: 75%;
height: 100%;
float: right;
font-family: "Roboto"
}

/* .sidebar{
width: 25%;
height: 100%;
background-color: #003C61;
float: left;
max-width: 300px;
min-width: 280px;
position: relative;
} */
.sidebar{width: 25%;height: 100%;/* background-color: #003C61; */float: left;max-width: 300px;box-sizing: border-box;min-width: 280px;position: relative;}


#cesiumContainer {
    min-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding:0;
    margin: 0;
    font-family: "Roboto"
}

.cesium-credit-text {
    display: none !important;
}

#tools {
    padding: 1em;
    background-color: #333;
    z-index: 9999;
    height: 87vh;
    color: White;
    box-sizing: border-box;
    overflow: auto;
}
#partners
{
    position: absolute;
    bottom: 0;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    line-height: 1em;
    padding: 23px 20px;
    font-family: "Open Sans";
    background-color: #1565c0;
    height: 13vh;
    /* margin-bottom: 3em; */

    
}

/* accordian mods */
.ui-accordion-content
{
    line-height: 1.6em !important;
}
.ui-accordion .ui-accordion-header {
    margin: 2px 0 0 0;
    padding: .7em .5em .7em .7em;
    font-size: 0.95em;
    font-weight: bold;
    color: #003C61;
    font-family: "Open Sans";
}
.ui-accordion-header-active
{
    color: White !important;
}
.ui-state-active
{
    /* background: none !important;
    background-image: linear-gradient(to right, rgba(255,255,255,1) 80%, rgba(0, 0, 0, 0.76)) !important;
    color:red; */
}
.ui-accordion .ui-accordion-header:after { content: ''; display: table; clear: both; }



.aqi_verygood{
    background-image: linear-gradient(to left, rgba(255,255,255,0) 92%, rgba(0, 112, 192,1)) !important;
}
.aqi_good{
    background-image: linear-gradient(to left, rgba(255,255,255,0) 92%, rgba(0, 176, 80, 1)) !important;
}
.aqi_fair{
    background-image: linear-gradient(to left, rgba(255,255,255,0) 92%, rgba(255, 255, 0, 1)) !important;
}
.aqi_poor{
    background-image: linear-gradient(to left, rgba(255,255,255,0) 92%, rgba(255, 0, 0, 1)) !important;
}
.aqi_verypoor{
    background-image: linear-gradient(to left, rgba(255,255,255,0) 92%, rgba(0, 0, 0, 1)) !important;
}

.aqi_error{
    background-image: linear-gradient(to left, rgba(255,255,255,0) 92%, rgba(0, 0, 0, 0.76)) !important;
}

/*
#
#ec783a
#772d49
#d04630 */

#heatmapcontrol
{
    position: absolute;
    top: 0em;
    right: 0em;
    padding: 1.5em;
    background-color: #333;
    z-index: 9999;
    color: White;
    text-align: center;
}

.swatch
{
      
  color: #fff;
  font-size: 1.1em;
  text-align: center;
  padding:11px;;
  border:1px solid White;
  margin: auto auto 0.2em auto;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}
#colorpanel h2{
    font-size: 1.2em;
    font-family: "Open Sans";
    margin-bottom: 1em;
}


a, a:visited, a:active{
    color: aliceblue;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

a.zoomlink, a.zoomlink:visited, a.zoomlink:active{
    color:#003C61;
    text-decoration: underline;
}
a.zoomlink:hover{
    color:#336699;
}



h1{
    font-size: 1.6em;
    color: #fff;
    margin: 0.5em 0 0.2em 0;
    padding: 0;
    text-align: center;
    font-family: "Open Sans";
    display: block;
    width: 100%;
}
span.highlight
{
  display:inline;
  font-weight: bold;
  color: #90caf9;
}




h2{
    margin: 0px;
}

#loading
{
    background-color: white;
    border-radius: 2em;
    padding: 3em;
    color:#333;
    text-align: center;
}

.svg-inline--fa {
    padding-right: 1em !important;
}



.sidebartoggle
{
    display: none;
}
.refresher
{
    display: none;
}
#mapcontrol
{
    margin-top: 1em;
    border-top: 1px solid #222;
    padding-top: 1em;
    padding-left: 5px;
    z-index: 9998;
    text-align: left;
    line-height: 2em;
    
    
}
#mapcontrol a:visited, #mapcontrol a:active
{
    text-decoration: underline;
    color:rgb(202, 202, 202);
}
#mapcontrol a:hover, #mapcontrol a i:hover, .fa-map-marker-alt:hover
{
    color: #6fddff;
}
p {
    font-family: "Open Sans";
    font-size: 12px;
}

h3#ui-id-7:after {
    content: '';
    clear: both;
    display: table;
}

.ui-accordion .ui-accordion-content
{
    font-family: "Open Sans" !important;
}
.ui-button.ui-state-active:hover {
    border: 1px solid #1565c0 !important;
    background: #1565c0 !important;
}


/* MOBILE CSS */

@media screen and (max-width: 780px) {
	.sidebar {
        overflow-y: scroll !important;
        width:100% !important;
        position: absolute;
        left:0;
        top:0;
        z-index: 9999;
        max-width: 780px !important;

    }
    .content{
        width:100%;
    }
    #partners
    {
        display: block;
        position: relative;
        padding-top:20px;
    }
    #mapcontrol
{
    padding: 0.7em;
    background-color: #333;
    z-index: 9998;
    color: White;
    text-align: center;
}

    #heatmapcontrol
    {
        display: none;
        z-index: 100;
        top:3.6em;
        padding: 0.5em !important;
    }
    .refresh-tools
    {
        margin-top:2em;
    }
    
    .sidebartoggle
    {
        position: absolute;
        top:0;
        height:2.6em;
        text-align: center;
        width:100%;
        background-color: #003C61;
        z-index: 99999;
        display: block;
        color: white;
        font-weight: bold;
        border-bottom: 1px solid black;
        vertical-align:middle;
        padding-top: 1em;
        box-shadow: rgba(0, 0, 0, 0.12) 0px -3px 5px inset; 

        animation: pan 9s linear infinite;

    }
    .togglelink img
    {
        vertical-align:middle;
        margin-right: 0.2em;
    }
    #accordion, #explainer{
        margin: 0 20px 0 20px;
    }

    .refresher
    {
        
        color:white;
        min-height: 0px; 
        box-shadow: rgba(0, 0, 0, 0.12) 0px -3px 5px inset; 
        pointer-events: none; 
        
        
        top: 0px; 
        height: 0px; 
        transition: height 0.3s, min-height 0.3s; 
        width: 100%; 
        overflow: hidden; 
        display: flex; 
        align-items: flex-end; 
        align-content: stretch; 
        text-align: center;
        
        vertical-align: middle;
        background-color: #22955b;
        
        font-size: 1.5em;
        padding-bottom:0.4em;
    }


    /* slim down the legend */
    #colorpanel h2{
        font-size: 0.8em;

    }
    .swatch
    {
        font-size: 0.8em;
    }
    .sensorlink
    {
        display: none;
    }
    

    /* Animations for pulse of header */

    @-webkit-keyframes pan {
        0%, 15%       { background-color:#003C61; }
        15%, 20%       { background-color:rgb(6, 62, 97); }
        20%, 40%       { background-color:rgb(13, 44, 63); }
        40%, 100%     { background-color:#003C61; }
     }

     
}