html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif
}



.header, .footer {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background-color: #616161;
    color:#fff;
}
.header {
    grid-area: header;
}
.footer {
    grid-area: footer;
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Side nav is hidden on mobile */
    grid-template-rows: 50px 1fr 0px 50px;
    grid-template-areas:
      'header'
      'main'
      'config'
      'footer';
  /*  height: 100vh;*/
  }
  
 


  /* Non-mobile styles, 750px breakpoint */
  /*
  @media only screen and (min-width: 46.875em) {
    .grid-container {
      grid-template-columns: 1fr; 
      grid-template-areas:
        "header"
        "config"
        "main"
        "footer";
    }

  }
*/

    .config {
        grid-area: config;
        height:0px;
        overflow: hidden;
    }
    .config.enabled {
        height: auto;;
    }
    .config .content {
        display: flex;
        flex-direction: column;
        padding:50px;
        background-color: #c9c9c9;
    }

    .main {
        grid-area: main;
        background-color: #c9c9c9;
    }
    .main-header {
        margin: 20px;
        padding: 20px;
        background-color: #e3e4e6;
        color: slategray;
    }

    .main-kpi {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Where the magic happens */
        grid-auto-rows: 130px;
        grid-gap: 15px;
        margin: 20px;
    }
    .kpicard {
        display: flex;
        align-items: center;
        background-color: #fff;
        flex-direction: row;
        padding: 10px;
        justify-content: space-evenly;

    }
    .kpicard-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        flex: 1;
        padding:5px 10px;
    }
    .kpicard-title {
        font-size: 1.2em;
        color: #4e4d4d;
       
    }
    .kpicard-icon {
        background-color: rgb(75, 75, 75);
        color: white;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
    }
    .kpicard-value {
        font-size: 1.6em;
        font-weight: bold;
    }
    .kpicard-time {
        font-size: 1.0em;
    }

    .kpicard-normals {
        padding-top:5px;
        font-size: 0.8em;
        color: #4e4d4d;
    }
    .kpicard-normals svg {
        
    }

    .kpicard-normals .low {
        fill:#8585f7;
    }
    .kpicard-normals .high {
        fill:#f59292;
    }

    .kpicard-normals text {
        font-size: 10px;
        text-anchor: middle;
        alignment-baseline:hanging;
    }

  .main-cards {
    column-count: 1;
    column-gap: 20px;
    margin: 20px;
  }
    /* Medium-sized screen breakpoint (tablet, 1050px) */
    @media only screen and (min-width: 65.625em) {
        /* Break out main cards into two columns */
        .main-cards {
          column-count: 1;
        }
    }

    .card {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 450px;
        background-color: #82bef6;
        margin-bottom: 20px;
        -webkit-column-break-inside: avoid;
        box-sizing: border-box;
    }
    .card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        background-color: #616161;
        color: #FFF;
        padding:0px 15px;
    }
    .card__main {
        display: flex;
        background-color: #fff;
        flex: 1;
        flex-direction: column;
        padding: 3px 3px;
        overflow: auto;
    }


    .card.events {
        height: 600px;
    }

    .card.wxchart {
        height: 600px;
    }
    .card.wxchart .card__main svg {
        width:100%;
        height:100%;
        cursor: pointer;
    }
    .card.wxchart svg path {
        stroke-width: 1;
    }

    .card.wxchart .lastDayLine {
        fill:none;
        stroke:#d5202a;
        stroke-width: 2;
    }


    .card.wxchart .templine {
        fill:none;
        stroke:#d5202a;
        stroke-width: 2;
    }
    .card.wxchart .tempbar {
        fill:#6b6767;
        stroke:#6b6767;
    }
    .card.wxchart .tempmax {
        fill:#ef8a62;
        stroke:#ef8a62;
    }
    .card.wxchart .tempnormal {
        fill:#a1d76a;
        stroke:#a1d76a;
    }
    .card.wxchart .tempmin {
        fill:#67a9cf;
        stroke:#67a9cf;
    }
    

    .card.wxchart .feelslikeline {
        fill:none;
        stroke:#ac54a0;
        stroke-width: 2;
    }
    .card.wxchart .dewpointline {
        fill:none;
        stroke:#5b9f49;
        stroke-width: 2;
    }
    .card.wxchart .cloudcoverline {
        fill:none;
        stroke:#8b8b8b;
        
    }
    .card.wxchart .cloudcoverarea {
        stroke:none;
        fill-opacity: 0.1;
        fill:#8b8b8b;
        
    }
    .card.wxchart .precipline {
        fill:none;
        stroke:#15aadc;
    }
    .card.wxchart .preciparea {
        fill:#15aadc;
        stroke:#15aadc;

        fill-opacity: 0.1;
    }
    .card.wxchart .snowline {
        stroke:#ac54a0;
    }
    .card.wxchart .snowarea {
        fill:#ac54a0;
        stroke:#ac54a0;

        fill-opacity: 0.1;
    }
    
    .card.wxchart .humidityline {
        fill:none;
        stroke:#87c404;
        stroke-width: 1;
    }

    .card.wxchart .windline {
        fill:none;
        stroke:brown;
        
    }
    .card.wxchart .windarea {
        fill:brown;
        stroke:brown;
        fill-opacity: 0.9;
    }
    .card.wxchart .windgust {
        stroke:rgb(226, 223, 25);
        fill:rgb(226, 223, 25);
        fill-opacity: 0.9;
    }
    .card.wxchart .pressureline {
        fill:none;
        stroke:#1e2023;
    }
    
    .card.wxchart .event {
        stroke:#e96c19;
        fill: #e96c19;
        fill-opacity: 0.1;
    }
    
    .card.wxchart .sunrise {
        stroke:none;
        fill: #f3f3f3;
    }
    
    .card.wxchart .sunset {
        stroke:none;
        fill: #f3f3f3;
    }

    .card.wxchart .hi-lite .background {
        stroke:#7e7e7e;
        fill: #7e7e7e;
        opacity: 0.4
    }
    .card.wxchart .filterhilite .background {
        stroke:#7e7e7e;
        fill: #efefef;
    }
    
    .card.wxchart .hi-lite text {
        text-anchor: middle;
        alignment-baseline:hanging;
        font-size:0.6em;
    }
    .card.wxchart .hi-lite .datetime {
        font-size:0.9em;
        font-weight: bold;
    }
    

    .card__main .astrolabel {
        font-size: 10px;
        text-anchor: middle;
        alignment-baseline:hanging;
    }
    .card__main svg {
        flex:1;
    }


    .time-axis .tick line {
        fill:none;
        stroke:#e0e0e0;
    }
    .time-axis path.domain, .y-axis path.domain {
        fill:none;
        stroke:none;
    }
    .time-axis path.domain {
        fill:none;
        stroke:none;
    }

    .eventsTable {
        height: 50%;
    }

    .eventsTable tbody{
        display:block;
        height:100%;
        overflow:auto;
    }
    .eventsTable .event {
        cursor:pointer
    }
    .eventsTable .event:hover {
        background-color:rgb(230, 230, 230);
    }

    .stationsTable {
        height: 50%;
    }
    .stationsTable tbody{
        display:block;
        height:100%;
        overflow:auto;
    }
    .stationsTable .station {
        cursor:pointer
    }
    .stationsTable .station:hover {
        background-color:rgb(230, 230, 230);
    }

    .map {
        /*flex: 1;*/
        height:50%;
    }

    .link {
       cursor:pointer;
       color:rgb(100, 100, 100);
       border-bottom: 1px dotted darkgrey;
    }
    .link:hover {
        color:darkgray;
        border-bottom: 1px dotted darkgrey;
    }

    .filter .close {
        color: rgba(41, 109, 138, 0.6);
        font-size: 18px;
        font-weight: bold;
        z-index: 10;
        overflow: visible;
        padding:2px;
        height:10px;
        cursor:pointer
    }
    .filter .close:hover {
        color: rgba(1, 98, 138,0.6);
        text-decoration: none;
    }

    .wxstation {
        text-transform: capitalize;
    }

    .header .link {
        color: #ffffff;
        cursor: pointer;
       
        border: 0px none #ffffff;
        border-bottom: 1px dotted #ffffff;
        padding: 5px 5px 1px 5px;
        margin: 0px 10px 0px 10px;
    }
    .link, a {
        cursor: pointer;
        color: rgba(1, 98, 138,1);
        text-decoration: none;
    }

    @media (max-width: 800px) {
        .hideless800 {
            display: none;
        }
    }

    .adcontainer {
        margin: 25px;
       text-align: center;
    }

    .probdistro .kpicard-value {
        flex:1;
        width:100%;
        max-width: 800px;
    }

    .probdistro rect {
       fill:lightblue;
       stroke:0;
       cursor: pointer;
    }
    .probdistro .label {
        fill:#fff;
        font-size: 14px;
        text-anchor:middle;
        
    }

    .probdistro .yearlabel {
        fill:rgb(75 75 75);
        font-size: 14px;
        text-anchor:middle;
        
    }