body, html {
    background-color: black !important;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin:0;
}

.container-main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 5% 70% 150px 150px 150px 200px auto;
    grid-template-areas:
        "sect-top"
        "map"
        "total-pop"
        "pop-by-sex"
        "pop-by-sex-by-age"
        "pop-by-sex-by-eth"
        "table-dataset"
}

@media only screen and (min-width: 768px) {

    .container-main {
        display: grid;
        grid-template-columns: 10% 30% 50% 10% ;
        grid-template-rows: 8% 4% 150px 150px 150px 150px 150px 150px 200px auto 150px;
        grid-template-areas:
            "sect-left header            header           sect-right"
            "sect-left sect-top          map              sect-right"
            "sect-left total-pop         map              sect-right"
            "sect-left pop-by-sex        map              sect-right"
            "sect-left pop-by-sex        map              sect-right"
            "sect-left pop-by-sex-by-age map              sect-right"
            "sect-left pop-by-sex-by-age map              sect-right"
            "sect-left pop-by-sex-by-eth map              sect-right"
            "sect-left pop-by-sex-by-eth map              sect-right"
            "sect-left table-dataset     table-dataset    sect-right"
            "footer    footer            footer           footer"
    }

}


header {
    background-color:  rgb(25,27,30);
    grid-area: header;
}

footer {
    background-color: rgb(73, 209, 31);
    grid-area: footer;
    margin-top: 100px;
}

#sect-top {
    grid-area: sect-top;
}

#sect-left {
    grid-area: sect-left;
}

#sect-right {
    grid-area: sect-right;
}

#total-pop {
    grid-area: total-pop;
}

#map {
    grid-area: map;
}

#select-location {
    grid-area: select-location;
}

#pop-by-sex {
    grid-area: pop-by-sex;
}

#pop-by-eth {
    grid-area: pop-by-eth;
}

#pop-by-sex-by-age {
    grid-area: pop-by-sex-by-age;
}

#pop-by-sex-by-eth {
    grid-area: pop-by-sex-by-eth;
}

#table-dataset {
    grid-area: table-dataset;
}

.panel-dark {
    background-color: rgb(25,27,30);    
    color: white;
}

.panel-green  {
    background-color: rgb(73, 209, 31);
}

.panel-white  {
    background-color:white;
}

.panel-dark, .panel-green, .panel-white {
    margin-top: 10px;
    margin-right: 10px;
    padding: 5px;
}

.header-row {
    background-color: rgb(51, 51, 51);
  }
  
  .top-header-row {
    background-color: rgb(51, 51, 51);
  }
  
  .top-header-cell { 
    text-align: center;
    font-weight: normal;
    font-size: 12px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(84, 213, 41);
    border: none !important;
  }
  
  
  .header-cell { 
    text-align: center;
    font-weight: normal;
    font-size: 12px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(25, 27, 30);
    border: none !important;
   border-bottom: 1px solid black !important;
  }
  
  .table-row {
    background-color:rgb(51, 51, 51);
  }
  
  .odd-table-row {
    background-color:rgb(51, 51, 51)
  }
  
  .table-cell {
    border: none !important;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color:white;
  }
  
  .hover-table-row {
    background-color: rgb(84, 213, 41);
  }
  
  .selected-table-row {
    background-color: rgb(84, 213, 41);
    color: black;
  }

.text-center {
    text-align: center;
}

.text-white {
    columns: white;
}

.form-element {
    appearance: auto;
    background-color: black;
    color: white;
    font-size: 12px;
    width: 100%;
    height: 30px;
    border: 0px;
    outline: none;
}

.button {
    appearance: auto;
    background-color: rgb(84, 213, 41);
    outline: none;
    border: 0px;;
    height: 30px;
    width: 80px;
    margin: 10px;
}

.button:hover {
    cursor: pointer;
    background-color: rgb(20, 118, 255)
}

p {
    padding: 5px;
    font-weight: lighter;
    line-height: 1.5em;
}

.chart-title {
    text-align: center;
}