@import url('https://fonts.googleapis.com/css?family=Oswald:700');


@font-face {
    font-family: "ESRI Weather";
    src: url("http://www.weather.gov/source/wrh/hazards/css/ESRIWeather.eot");
    src: url("http://www.weather.gov/source/wrh/hazards/css/ESRIWeather.eot?") format("embedded-opentype"),
         url("http://www.weather.gov/source/wrh/hazards/css/ESRIWeather.woff") format("woff"),
         url("http://www.weather.gov/source/wrh/hazards/css/ESRIWeather.ttf") format("truetype"),
         url("http://www.weather.gov/source/wrh/hazards/css/ESRIWeather.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* @font-face {
    font-family: "ESRI Weather";
    src: url("ESRIWeather.eot?") format("eot"), url("ESRIWeather.woff") format("woff"), url("ESRIWeather.ttf") format("truetype"), url("ESRIWeather.svg#ESRIWeather") format("svg");
    font-weight: normal;
    font-style: normal;
} */


html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.calcite-nav-bottom .calcite-map .leaflet-control-zoom {
    margin-top: 28px;
}

.calcite-navbar-search {
    margin-top: 0;
    margin-right: 5px;
    padding: 5px 0;
}

.calcite-nav-bottom .panel-body .geocoder-control-suggestions.leaflet-bar {
    top: 25px;
    bottom: auto;
}

.calcite-maps .esri-truncated-attribution {
    max-width: 100% !important;
    width: 100%;
}

.leaflet-touch .leaflet-bar {
    border: none;
}

#map {
    cursor: crosshair;
}

.loader {
    border: 5px solid #fff;
    border-radius: 50%;
    border-top: 5px solid #196fa6;
    border-bottom: 5px solid #196fa6;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

.loading-indicator {
    height: 80px;
    width: 80px;
    background: url('../images/loading.gif');
    background-repeat: no-repeat;
    background-position: center center;
}

.loading-indicator-overlay {
    background-color: #FFFFFF;
    opacity: 0.6;
    filter: alpha(opacity=60);
}

span.input-group-addon {
    background-color: #fff;
    color: black;
    border: 1px solid #959595;
}

.text-marker {
    font-family: "Oswald", sans-serif;
    /* font-size: 18px; */
    font-weight: 700;
    -webkit-font-smoothing: antialiased !important;
}

.leaflet-popup-content-wrapper {
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
}

/* Datepicker overrides */
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0px;
}
.ui-widget-header {
    background: #F5F5F5 !important;
}
.ui-state-default {
    background: #F5F5F5 !important;
}
.ui-state-active {
    background: #196fa6 !important;
    color: white;
}
.ui-state-highlight {
    background: #196fa6 !important;
    color: white !important;
}

.leaflet-control-layers-base {
    font-family: "Avenir Next W00", "Avenir Next", Avenir !important;
    /* font-size: 18px; */
    font-size: 13px;
    font-weight: 200 !important;
}
.leaflet-control-zoom {
    margin-top:15px !important;
}

/** station plot **/

.windbarb {
    /* position: absolute; */
    position: relative;
    font-family: "ESRI Weather" !important;
    /* font-size: 55px;
    line-height: 55px; */
    padding: 0px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.windbarb-container {
    position: absolute;
    top: 50%;
    left: 50%; 
    margin:auto;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 900;
}

.wx-icon {
    background: transparent;
    border: 0px;
    font-size: 0.8em;
}

.wx-center {
    position: absolute;
    font-family: sans-serif;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* font-size: 20px; */
}

.temp {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    /* font-size: 12px; */
    color: black;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    z-index: 910;
}

.dew {
    position: absolute;
    bottom: 0;
    left: 0;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    color: blue;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    z-index: 910;
}

.rh {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    color: green;
    /* font-size: 12px; */
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    z-index: 910;
}

.gust {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    color: red;
    /* font-size: 12px; */
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    z-index: 910;
}

.slp {
    position: absolute;
    top: -15px;
    left: 0px;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    color: blue;
    /* font-size: 12px; */
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    z-index: 910;
}

.fire-right, .fire-left {
    display: inline-block;
    height: 30px;
    width: 15px;
    padding:8px 2px;
    font-weight:bold;
    border:1px solid black;
}

.fire-right {
    border-bottom-right-radius: 30px !important;
    border-top-right-radius: 30px !important;
}

.fire-left {
    border-bottom-left-radius: 30px !important;
    border-top-left-radius: 30px !important;
}


/* *************checkbox stuff************** */

.checkbox label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr {
    position: relative;
    border: 1px solid #fff;
    /* border-radius: .25em; */
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
    margin-top: 5px;
}

.checkbox .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.checkbox label input[type="checkbox"] {
    display: none;
}

.checkbox label input[type="checkbox"]+.cr>.cr-icon {
    opacity: 0;
}

.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled+.cr {
    opacity: .5;
}


/*** slider stuff ***/

.slider-handle {
    /* background: #fff; */
    background: #fff;
    border: 1px solid rgb(149, 149, 149);
    top: 2px;
    width: 15px;
    height: 15px;
}

.slider-track {
    background: #fff;
    border: 1px solid rgb(149, 149, 149);
    border-radius: 0px;
}

.slider-selection {
    /* background: #dcdcdc; */
    background: #fff;
}

.slider-handle.round {
    border-radius: 0;
}

.calcite-maps .tooltip-inner {
    color: #fff;
    background-color: #196fa6;
}