:root {
    --lightgrey-border-color: #b3b3b3;
}


.linkBoxesWrapper {
    display: flex;
    margin-top: 3rem;
    flex-wrap: wrap;
}
.linkBox {
    border: 1px solid #000;
    padding: 10px;
    color: #000;
    width: 400px;
    margin: 0.5rem;
}
.linkBox .linkBox__title {
    font-weight: bold;
}
.linkBox .linkBox__title {
    color: #115d82;
}

.landingPageFigure {
    padding: 7px;
    border: 1px solid #717171;
    border-radius: 5px;
    display: table;
    text-align: left;
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.landingPageFigure img {
    max-height: 400px;
    max-width: 100%;
}

.landingPageFigure figcaption {
    display: table-caption;
    caption-side: bottom;
    font-style: italic;
    border: 1px solid #717171;
    border-top: 0;
    text-align: left;
    padding: 10px;
}
.linkBox:hover {
    text-decoration: none;
    color: #000;
    border: 1px solid #946000;
}

.linkBox:hover .linkBox__title {
    color: orange;
}

.htfHeadingIcon {
    width: 37px;
    padding-bottom: 0.5rem;
}
.htfHeadingH2 {
    vertical-align: middle;
    margin-left: 10px;
    margin-bottom: 0px;
    font-weight: bold;
}
.htfHeadingWrapper {
    display: flex;
    align-items: flex-end;
}

.regionStationInfo {
    min-width: 370px;
}


.container-fluid.custom-padding.htfContentContainer {
/*     background-color: blue; */
}

.legend {
    font-size: .7rem;
}

#calendars-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.calendarLegend {
    display: flex;
    align-items: baseline;
    margin-top: 1rem;
    justify-content: center;
}

ul.calendarLegend__itemsWrapper li {
    margin-left: 1rem;
}

.calendarLegend h4 {
    vertical-align: middle;
    color: #464343;
    font-size: 15px;
}
.calendar-container {
     margin: 5px;
     /*flex: 1 0 auto;*/
     padding: 5px;
     min-width: 200px;
     border: 1px solid #d7d7d7;
     border-radius: 5px;
}

.ch-domain-text {
    font-size: 1rem !important;
    font-weight: bold;
}

.mapLinksRow img {
    width: 100%;
    max-height: 600px;
}

.boxLinksRow {
    margin-top: 1rem;
    border-top: 1px solid #afafaf;
    padding-top: 1rem;
}

.box {
    border: 7px solid #787878; 
    width: 250px;
    height: 250px;
    padding: 2rem;
}

.box p {
    color: #000;
    font-size: .95rem;
}

.box:hover {
    text-decoration: none;
    border: 7px solid #0093bf;
}

.regionStationInfo .nav-link{
    color: #000 !important;
}

.mapcontrols-select select {
    border: 0;
    border-bottom: 1px solid #000;
    padding-bottom: 0px;
    padding-left: 0px;
    border-radius: 0;
    padding-top: 0;
    height: 30px;
}

.questionAnswer {
    margin-top: 1rem;
}

.regionFigure img {
    width: 100%;
}

figure.regionFigure figcaption p {
    margin: 0;
    margin-top: .5rem;
    padding-left: 1rem
}

.aboutTab__textContainer {
    max-width: 700px;
}

.tab-pane {
    padding-left: 10px;
    padding-right: 10px;
}

.regionFigure {
    border: 1px solid #d4d6e5;
    padding-bottom: 0.5rem;
    background-color: #f5f5f5;
    border-radius: 5px;
    max-width: 700px;
}

.loading img {
    width: 472px;
}

#map {
    width: 100%;
    height: 30vw;
    min-width: 470px;
}

.mapwrapper {
    border:  1px solid var(--lightgrey-border-color);
    padding: 7px;
    transition: width 2s;
}
.map {
    margin-bottom: .5rem;
}

.mapcontainer p {
    margin-bottom: .3rem;
}
.regionStationInfo {
    border:  1px solid var(--lightgrey-border-color);
    padding: 7px;
}

.mapcontrols-select label {
    font-weight: bold;
}

.mapcontrols-select input {
    border: none;
    border-bottom: 1px solid #000;
    background-image: url(../images/downarrow.svg);
    background-repeat: no-repeat;
    background-position: 97% 6px;
    vertical-align: middle;
    background-size: 10%;
}
.mapcontrols-select {
    margin-right: 2rem;
    flex: 1;
    min-width: 100px;
}
.htfContentHeader {
    text-align: left;
}
.mapDisplayToggle label {
    font-weight: bold;
    display: block;
    padding-left: 8px;
}
.fileDownloapMenu{
    font-weight: bold;
    display: block;
    padding-left: 8px;
    margin-right: 2rem;
    flex: 1;
    min-width: 50px;
}



.legend {
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #a9a9a9;
}

.legend_item {
    margin-right: 0.3rem;
    margin-top: 0.3rem;
}
.legend_item:last-child {
    margin-bottom: 0.3rem;
}

.legend_head {
    font-weight: bold;
    text-decoration: underline;
    color: #484848;
}

.questionAnswer .question {
    font-style: italic;
}

.questionAnswer .answer {
    margin-left: 15px;
}

.cannedTextTab-link{
    display:block;
    margin-top: 10px;
    margin-bottom: 1rem;
}

.cannedTextContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cannedText {
    max-width: 800px;
}

.aboutTab ul {
    margin-left: 2rem;
}

.aboutTab ol {
    margin-left: 2rem;
}

.aboutTab li {
    padding: .2rem;
}

.stationInfo {
    /*font-weight: bold;*/
    margin-bottom: 0;
    font-size: 1.5em;
    padding: 5px;
}
.stationName {
    font-weight: bold;
}

.stationHeader .btn {
    border: 1px solid #c0c0c0;
}

ul.calendarLegend__itemsWrapper {
    list-style-type: none;
}

ul.calendarLegend__itemsWrapper {
    display: flex;
}

.calendarLegend__colorSquare{
    border: .5px solid #000;
    width: 2rem;
    height: 2rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.calendarLegend__colorSquare--red{
    background-color: #A8281E;
}

.calendarLegend__colorSquare--grey{
    background-color: #DDDDDD;
}

.calendarLegend__colorSquare--lightred{
    background-color: #FBB1A8;
}

.calendarLegend__colorSquare--dark{
    background-color:#787878
}

.calendarToggle {
    background: #efefef;
    /* margin: 10px 0px 10px 0; */
    margin-left: 10%;
    /* display: flex;
    float: left; */
    background-color: transparent;
    text-align: center;
    padding: 5px;
}

.calendarToggle label {
    font-weight: bold;
    vertical-align: text-bottom;
}

.question-mark-icon {
  text-decoration: underline;
  cursor: pointer;
  color: blue;
}

/*.stationId-span {*/
/*    font-weight:normal;*/
/*    color: #141414;*/
/*}*/
.tab-pane {
    padding-top: 1.3em;
}

.stationId {
    color: #303030;
    font-weight: normal;
}


.singleCalendar {
    display: none;
}

.singleCalendar.active {
    /*display: block;*/
}
#single-calendar-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.single-calendar-btn img {
    width: 40px;
}

/* Map Button Styles */
.mapDisplayToggle {
    position: relative;
}

.toggle-button-cover {
  display: table-cell;
  position: relative;
  width: 200px;
  height: 140px;
  box-sizing: border-box;
}

.button-cover {
  height: 100px;
  margin: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px -8px #c5d6d6;
  border-radius: 4px;
}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

/*test*/

.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  /*top: 50%;*/
  width: 74px;
  height: 36px;
  /*margin: -20px auto 0 auto;*/
  display:inline-block;
  overflow: hidden;
  border: 0.3px solid #959595;
}
.button.r,
.button.r .layer {
  border-radius: 100px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}

/* Button 1 */
.button-1 .knobs:before {
  content: "ON";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

.button-1 .checkbox:checked + .knobs:before {
  content: "OFF";
  left: 42px;
  background-color: #f44336;
}

.button-1 .checkbox:checked ~ .layer {
  background-color: #fcebeb;
}

.button-1 .knobs,
.button-1 .knobs:before,
.button-1 .layer {
  transition: 0.3s ease all;
}
/* End Map Button Styles */


@media (max-width: 790px) {
    .htfContentContainer {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    #map {
        height: 60vw;
        min-width: 330px;
    }
    .htfContentHeader {
        text-align: center !important;
    }
    
    .single-calendar-btn img {
        width: 20px;
    }
}

.textLink{
    text-decoration:underline;
    color:#5F9EA0;
}