/* Additional classes to get BS4 look from BS3 */
.html{
  font-size: 12px !important;
}
.badge{
  background-color: white !important;
  color: black !important;
}
.badge-danger {
  color: #fff !important;
  background-color: #dc3545 !important;
}
.badge-dark{
  background-color: var(--dark) !important;
  color: white !important;
}
.collapse:not(.in):not(.navbar-collapse){
  display: none !important;
}
.collapse.in:not(.navbar-collapse){
  display: flex !important;
}
/* CSS for Bootstrap 3 */
.w-100{
  width: 100%;
}
.h-100{
  height: 100%;
}
.text-white{
	color: var(--white) !important;
}
.text-red{
	color: var(--red) !important;
}
.text-orange{
	color: var(--orange) !important;
}
#cc_info{
  margin: 0;
}
#cc_time{
  font-size: 2rem;
}
#cc_refresh{
  font-size: 1.6rem;
}
.cc-var > div.h2{
  margin: 0;
}
.cc-var > div.h5{
  font-size: 2rem !important;
  margin-top: 0;
  margin-bottom: 8px;
}
.border{
  border: 1px solid #dee2e6 !important
}
.small, small {
  font-size: .875em;
  font-weight: 400;
}
.alert > div.small{
  color: black !important;
}
.alert-info {
 color:#0c5460;
 background-color:#d1ecf1;
 border-color:#bee5eb
}
.alert-info hr {
 border-top-color:#abdde5
}
.alert-info .alert-link {
 color:#062c33
}
.alert-warning {
 color:#856404;
 background-color:#fff3cd;
 border-color:#ffeeba
}
.alert-warning hr {
 border-top-color:#ffe8a1
}
.alert-warning .alert-link {
 color:#533f03
}
.alert-danger {
 color:#721c24;
 background-color:#f8d7da;
 border-color:#f5c6cb
}
.alert-danger hr {
 border-top-color:#f1b0b7
}
.alert-danger .alert-link {
 color:#491217
}
.d-none{
  display: none;
}
.float-left{
  float: left !important;
}
.float-right{
  float: right !important;
}
.container{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.btn-default{
  background-color: var(--light) !important;
  color: black !important;
  border-color: black !important;
  text-transform: none !important;
}
.fade{
  transition: opacity .15s linear;
}
.overflow-auto {
  overflow: auto !important;
}
.ml-auto,.mx-auto{
  margin-left: auto !important;
}
.mr-auto,.mx-auto{
  margin-right: auto !important;
}
.w-75 {
  width: 75% !important;
}
.h4,.h5{ text-transform: none }
.font-weight-bold{ font-weight: 700 !important; }
.font-weight-bolder{ font-weight: bolder !important; }
.btn {
 display:inline-block;
 font-weight:400 !important;
 color:#212529;
 text-align:center;
 vertical-align:middle;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 background-color:transparent;
 border:1px solid transparent;
 padding:.375rem .75rem;
 line-height:1.5;
 border-radius:.25rem;
 transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.btn-light {
 color:#212529;
 background-color:#f8f9fa;
 border-color:#f8f9fa
}
.btn-light:hover {
 color:#212529;
 background-color:#e2e6ea;
 border-color:#dae0e5
}
.btn-light.focus,
.btn-light:focus {
 color:#212529;
 background-color:#e2e6ea;
 border-color:#dae0e5;
 box-shadow:0 0 0 .2rem rgba(216,217,219,.5)
}
.btn-light.disabled,
.btn-light:disabled {
 color:#212529;
 background-color:#f8f9fa;
 border-color:#f8f9fa
}
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show>.btn-light.dropdown-toggle {
 color:#212529;
 background-color:#dae0e5;
 border-color:#d3d9df
}
.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.show>.btn-light.dropdown-toggle:focus {
 box-shadow:0 0 0 .2rem rgba(216,217,219,.5)
}
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-secondary:focus,
.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}
.text-wrap {
  white-space: normal !important;
}
.text-left{
 text-align: left !important;
}
.btn-outline-success {
 color:#28a745;
 border-color:#28a745
}
.btn-outline-success:hover {
 color:#fff;
 background-color:#28a745;
 border-color:#28a745
}
.btn-outline-success.focus,
.btn-outline-success:focus {
 box-shadow:0 0 0 .2rem rgba(40,167,69,.5)
}
.btn-outline-success.disabled,
.btn-outline-success:disabled {
 color:#28a745;
 background-color:transparent
}
.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled):active,
.show>.btn-outline-success.dropdown-toggle {
 color:#fff;
 background-color:#28a745;
 border-color:#28a745
}
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-success.dropdown-toggle:focus {
 box-shadow:0 0 0 .2rem rgba(40,167,69,.5)
}
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-primary {
  color:#fff;
  background-color:#007bff;
  border-color:#007bff
}
.btn-primary:hover {
  color:#fff;
  background-color:#0069d9;
  border-color:#0062cc
}
.btn-primary.focus,
.btn-primary:focus {
  color:#fff;
  background-color:#0069d9;
  border-color:#0062cc;
  box-shadow:0 0 0 .2rem rgba(38,143,255,.5)
}
.btn-primary.disabled,
.btn-primary:disabled {
  color:#fff;
  background-color:#007bff;
  border-color:#007bff
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
  color:#fff;
  background-color:#0062cc;
  border-color:#005cbf
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow:0 0 0 .2rem rgba(38,143,255,.5)
}

.btn-outline-danger {
  color:#dc3545;
  border-color:#dc3545
}
.btn-outline-danger:hover {
  color:#fff;
  background-color:#dc3545;
  border-color:#dc3545
}
.btn-outline-danger.focus,
.btn-outline-danger:focus {
  box-shadow:0 0 0 .2rem rgba(220,53,69,.5)
}

.btn-dark {
  color:#fff !important;
  background-color:#343a40;
  border-color:#343a40
}
.btn-dark:hover {
  color:#fff !important;
  background-color:#23272b;
  border-color:#1d2124
}
.btn-dark.focus,
.btn-dark:focus {
  color:#fff !important;
  background-color:#23272b;
  border-color:#1d2124;
  box-shadow:0 0 0 .2rem rgba(82,88,93,.5)
}





.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}
button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
}
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}
.progress{
  margin-bottom: 0 !important;
}

/* Page specific querks - Menu */
.navbar-light .navbar-toggler {
  color: rgba(0,0,0,.5);
  border-color: rgba(0,0,0,.1);
}
#site-navigation > ul.navbar,
#site-navigation.navbar{
  width:100%;
}
.site-branding,
#navbar-collapse-main{
  margin: 0 auto !important;
}
#station_list{
  border: 1px solid black;
}
#station_list > .dropdown-item{
  text-align: left;
  font-size: 1.5rem;
  width: 100%;
  text-decoration: none;
}
#filter_status{
  color: #6c757d;
}
.dropdown-item:hover {
  color: #16181b;
  text-decoration: none;
  background-color: #e9ecef;
  curson: pointer;
  width: 100%;
}
#tabnav{
  border: none;
}
#station_container{
  min-width: 20em;
  max-width: 100%;
}
/* Page specific querks - Alerts */
.alert > .small, .alert > .alert-heading{
  font-size: 1.5rem;
}
.alert > .close{
  color: black;
}
#forecast{
  padding-right: 12px !important;
  padding-left: 12px !important; 
}

/* Element specific querks - Leaflet */
.leaflet-control,
.leaflet-control-layers-list{
  font-size: 1rem;
}