* {
    box-sizing:border-box;  
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box;
}

body {
    margin: 0;
    padding: 0;
    background: whitesmoke;
    font-family: "Work Sans", Lato, sans-serif;
}

h1 {
    padding: 8px 25px 8px 15px;
    margin: 0;
    background: #597DAB;
    color: whitesmoke;
    font-weight: 400;
    font-size: 1.5em;
}

h2 {
    margin: 0;
    padding: 8px 25px 8px 15px;
    color: #494f99;
    font-weight: 500;
    font-size: 1.2em;
}

h3 {
    color: rgba(4, 33, 61, 1);
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 64%;
}

#layer-control-text {
    position: absolute;
    top: 2px;
    right: 315px;
    color: rgba(150,150,150,1);
    margin: 0px 0px 0px 0px;
    text-align: right;
    font-size: 80%;
    z-index: 500;
}

/* On hover of home button, show pointer*/
.easy-button-button{
    cursor:pointer;
}

/*  Polygon Search Box */
#poly-search {
    display: block;
    position: relative;
    background: white;
    padding: ;
    z-index: 10;
    padding: 10px 10px 10px 29px;
    margin-top: 5px;
    border-top: 1px solid #597DAB;
    border-bottom: 1px solid #597DAB;
}
#poly-search .fa {
    position: absolute;
    left: 8px;
    top: 11px;
    color: #d5d5d5;
}
.twitter-typeahead {
    display: block !important;
}
#poly-search input {
    width: 100%;
    border: none;
    padding: 0;
}
#poly-search input:focus {
    outline: none;
}
.tt-menu {
    background: white;
    color: #333;
}
.tt-suggestion {
    border-bottom: 1px solid #f6f6f6;
    font-size: 0.9em;
    padding: 3px;
}
.tt-suggestion:hover {
    background: #f6f6f6;
    cursor: pointer;
}


/*  LEFT SIDE PANEL*/

#side-panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 36%;
    background: whitesmoke;
    border-right: 2px solid #494f99;
    overflow-y: scroll;
}

#side-panel h2 {
    background: rgba(220, 220, 220, 1);
}

#side-panel p {
    margin: 8px 0 4px;
    padding: 0 25px 0 15px;
    color: rgba(4, 33, 61, 1);
    text-align: left;
    font-size: 1em;
}

#side-panel li {
    margin: 0;
    padding: 0 25px 0 15px;
    color: rgba(4, 33, 61, 1);
    text-align: left;
    font-size: 1em;
}

#side-panel p:after {
    content: '';
    display: block;
    clear: both;
}

/*  Leaflet Control Mods*/
.leaflet-control-layers {
    position: relative;
    right: 255px
}
.leaflet-tooltip {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  }
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    border: 0px solid transparent;
    }

/*   RIGHT SIDE PANEL*/
/* Looks like Leaflet default z-index for map is 400, and for controls is 800 or 1000*/

#right-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 255px;
    background: rgba(240, 240, 240, .6);
    border-left: 2px solid #597DAB;
    z-index: 500;  
}

.poly-info {
    padding: 6px 8px;
    font-size: 1.1em;
    width: 230px;
    color: rgba(4, 33, 61, 1);
    background: whitesmoke;
}

.poly-info h3 {
    font-weight: 500;
    font-size: 1.2em;
    padding: 0 0 0 0;
    margin: 0;
}

.efh-type {
    margin: 0;
    padding: 8px 25px 8px 15px;
    color: #494f99;
    font-weight: 500;
    font-size: 1.1em;
}

#layer-controls {
    width: 100%;
}

#layer-controls input {
    display: none;
}

#layer-controls label {
    display: block;
    margin: 0 0 1px 0;
    padding: 3px 5px;
    background: rgba(255, 255, 255, 1);
    opacity: .3;
    cursor: pointer;
}

#layer-controls label:hover {
    background: rgba(255, 255, 255, .6);
}

#layer-controls input:checked + label {
    opacity: 1
}
#layer-controls label .fa {
    color: #333;
}

#ui-controls {
    width: 100%;
    margin-top: 10px;
    border-bottom: 1px solid #597DAB;

}

#ui-controls button {
    background: transparent;
    text-align: right;
    font-size: 0.8em;
    border: none;
    color: #666;
    display: block;
    width: 100%;
    margin-bottom: 4px;
    padding: 0 10px;
    opacity: .2;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
#ui-controls button:hover {
    text-decoration: underline;
}

#ui-controls button.available {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    cursor: pointer;
}

/*   TABLES */
.table-wrapper {
    width: 100%;
    overflow-x: scroll;
}

table {
    font-family: 'Open Sans', Lato, sans-serif;
    width: 100%;
    padding: 15px;
    text-align: left;
    border-collapse: collapse;
    color: rgba(4, 33, 61, 1);
}

tr {
    margin-bottom: 20px;
}

td, th {
    border: 1px solid #ddd; 
    padding: 3px;
    background: white;
    min-width: 70px;
}

td { 
    font-family: monospace;
    font-size: 1.1em;
    text-align: right;
}

td:first-child { 
    font-family: 'Open Sans', Lato, sans-serif;
    font-size: 0.9em;
    text-align: left;
}

td:first-child,
th:first-child {
    max-width: 260px;
}

th {
    font-weight: 900;
}

.table-row-header td,
.table-row-header th {
    background: transparent;
    height: 50px;
    vertical-align: bottom;
    border: none;
    text-align: center;
}
.table-row-header th {
    font-size: 0.9em;
}
.table-row-header th:first-child {
    font-size: 1.3em;
    font-weight: 100;
    text-align: left;
}

tr:hover td,
tr:hover th {
    background: #ffffcc;
}
.table-row-header:hover td, 
.table-row-header:hover th {
    background: transparent;
}

             
/*        This does not work */
/*        table#summary-metrics tr:nth-child(even){background-color: "green"}*/


/*  Left Side Tabs and Panels     */
#panel-tabs {
    background: rgba(220, 220, 220, 1);
}

#panel-tabs button {
    display: inline-block;
    width: 24%;
    background: white;
    color: rgba(200, 200, 200, 1);
    font-size: 1.1em;
    border: 1px solid #597DAB;
    border: none;
    cursor: pointer;
    padding: 7px 0;
    outline: none;
}
#panel-tabs button:active {
    outline: none;
}

#panel-tabs button:first-child {
    margin-left: 0;
}

#panel-tabs button.selected {
    color: #333;
    background: whitesmoke;
}

.side-panel {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    max-width: 100%;
    padding: 1em;
}

#summary-panel,
#polygons-panel,
#info-panel,
#help-panel{
    position: absolute;
}

#polygons-panel,
#info-panel,
#help-panel{
    display: none;
}

#download-csv {
    background: #597DAB;
    color: white;
    display: none;
    visibility: none;
    margin-top: 10px;
}
#download-csv.show {
    display: block;
    visibility: visible;
}

.layer-unselect-all,
.layer-select-all {
    background: transparent;
    border: none;
    outline: none;
    float: right;
    cursor: pointer;
    background: #e5e5e5;
    color: #333;
    font-size: 0.6em;
    padding: 3px 5px;
    border-radius: 2px;
    margin-left: 3px;
}
.layer-unselect-all:hover,
.layer-select-all:hover {
    background: #d5d5d5;
}
.layer-unselect-all:active,
.layer-select-all:active {
    background-color: #999;
}
.layer-unselect-all:after,
.layer-select-all:after {
    font-size: 1.2em !important;
}

.layer-counter {
    color: #999;
    font-size: 0.8em;
}
.layer-counter-current {
    font-weight: 900;
}

.layer-ui-button {
    padding: 5px;
    background: #597DAB;
    color: white;
    position: relative;
}

/** tooltips **/

.tooltip {
    position: relative;
}
.tooltip:after {
    position: absolute;
    content: attr(data-tooltip);
    white-space: nowrap;
    right: 0;
    bottom: 0;
    margin-bottom: 120%;
    display: none;
    visibility: hidden;
    background: #333;
    color: white;
    padding: 3px 7px;
    font-size: 0.73em;
    font-weight: 100;
    border-radius: 3px;
}
.tooltip:before {
    content: " ";
    display: none;
    visibility: hidden;
    position:absolute;
    border-left: 5px solid transparent;
    border-top: 5px solid #333;
    border-right: 5px solid transparent;
    top: 0;
    right: 0;
    margin-top: -23%;
    margin-right: 3px;
}
.tooltip:hover:after {
    display: block;
    visibility: visible;
}
.tooltip:hover:before {
    display: block;
    visibility: visible;
}

/** loader icon **/
html.loading {
    /*opacity: 0.5;*/
}
html.loading:after {
    font-family: "FontAwesome";
    content:"\f110";
    color: black;
    position: absolute;
    top: 52px;
    right: 15px;
    z-index: 1000;
    -webkit-animation: rotating 0.5s linear infinite;
    -moz-animation: rotating 0.5s linear infinite;
    -ms-animation: rotating 0.5s linear infinite;
    -o-animation: rotating 0.5s linear infinite;
    animation: rotating 0.5s linear infinite;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}