@font-face {
  font-family: 'fa-regular';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/_resources/themes/trc/fonts/fa-regular-400.woff2") format("woff2"), url("/_resources/themes/trc/fonts/fa-regular-400.ttf") format("truetype"); }
  @font-face {
    font-family: 'fa-solid';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("/_resources/themes/trc/fonts/fa-solid-900.woff2") format("woff2"), url("/_resources/themes/trc/fonts/fa-solid-900.ttf") format("truetype"); }

.toggle,
.togglable {
    display:none;
}
.toggle:checked + .togglable {
    display:block;
}



.welcome-message-content-wrapper {
    position: relative;
    z-index: 450;
    width: 100%;
}

.welcome-message-content {
    margin: 3%;
}

.toggle-button {
    position:absolute;
    top:0;
    width:1em;
    height:3em;
    text-indent:-999em;
    background:rgba(255,255,255,.75);
    color:rgba(0,0,0,.75);
}
.toggle-button:after {
    text-indent:0;
    position:absolute;
    top:.75em;
    left:0;
    width:1em;
    text-align:center;
}
.toggle-button.left {
    left:0;
}
.toggle-button.right {
    right:0;
}
.toggle-button.left:after {
    content:"<";
    font-family:'fa-solid';
    content:"\f054";
}
.toggle-button.right:after {
    content:">";
    font-family:'fa-solid';
    content:"\f053";
}
.toggle.left:checked ~ #map-wrap .toggle-button.left:after{
    content:">";
    font-family:'fa-solid';
    content:"\f053";
}
.toggle.right:checked ~ #map-wrap .toggle-button.right:after{
    content:"<";
    font-family:'fa-solid';
    content:"\f054";
}
label.nICE {
    display:inline-block !important;
}
label.nICE input {
    position:absolute;
    width:1em;
    height:1em;
    opacity:0;
    cursor: pointer;
}
label.nICE span:after {
    content:'?';
    cursor: pointer;
    font-size:1.25em;
    font-weight:bold;
    vertical-align:top;
}
label.nICE input[type='checkbox'] + span:after {
    content:'☐';
    font-family:'fa-regular';
    content:"\f0c8";
}
label.nICE input[type='checkbox']:checked + span:after {
    content:'🗹';
    font-family:'fa-regular';
    content:"\f14a";
}
label.nICE input[type='radio'] + span:after {
    content:'◯';
    font-family:'fa-regular';
    content:"\f111";
}
label.nICE input[type='radio']:checked + span:after {
    content:'◉';
    font-family:'fa-regular';
    content:"\f058";
}
label.nICE.ios {
    position:relative;
    width:1.75em;
    height:1em;
    border-radius:1em;
    border:2px solid white;
    box-sizing:border-box;
}
label.nICE.ios span {
    width:1em;
    height:1em;
    position:absolute;
    top:-2px;
    left:-2px;
    display:block;
    background:white;
    border-radius:50%;
}
label.nICE.ios input:checked + span {
    right:-1px;
    left:auto;
}
label.nICE.ios span:after {
    content:'' !important;
}

/* Using Flex to make equal height columns */
#map-container {
    display: -webkit-flex; /* Safari */
    display: flex; /* Standard syntax */
    width:100%;
}
#map-container:before,
#map-container:after {
    content: " ";
    display: table;
}
#map-container:after {
    clear: both;
}


#map-container label {
    cursor:pointer;
    z-index:500;
}
#map-container .map-layer-group-label {
    position:relative;
    display:block;
    vertical-align:middle;
    line-height:25px;
    background:#243646;
    border-bottom:2px solid #2a4257;
    padding:.4em 1em;
}
#map-container .map-layer-group-label .open:after,
#map-container .map-layer-group-label .close:after{
    content:'🢓';
    font-family:'fa-solid';
    content:"\f078";
    position:absolute;
    top:0.7em;
    right:3.5em;
    display:block;
    z-index:600;
}
#map-container .map-layer-group-label .close:after{
    content:'🢐';
    font-family:'fa-solid';
    content:"\f053";
    top:0.7em;
}
#map-container .map-layer-group-label > label.ios{
    margin-top:.7em;
}

#map-container #map-layer-group .map-layer-group-list > label {
    display:block;
    font-size:.75em;
    font-weight:normal;
    padding:.4em 1.1em;
}
#map-container #map-layer-group .map-layer-group-list > label:before,
#map-container #map-layer-group .map-layer-group-list > label:after {
    content: " ";
    display: table;
}
#map-container #map-layer-group .map-layer-group-list > label:after {
    clear: both;
}
#map-container #map-layer-group {
    -webkit-flex: 0.4;  /* Safari */
    -ms-flex: 0.4;      /* IE 10 */
    flex:0.4;           /* Standard syntax */
    min-width:19em;
    background:#2a4257;
    color:white;
    font-size:.9em;
    min-height:1000px;
    height: auto;
}
#map-container #map-layer-group:before,
#map-container #map-layer-group:after {
    content: " ";
    display: table;
}
#map-container #map-layer-group:after {
    clear: both;
}

#map-container #map-layer-detail {
    -webkit-flex: 0.4;  /* Safari */
	-ms-flex: 0.4;      /* IE 10 */
    flex:0.4;           /* Standard syntax */
    margin-left: auto;  /* Make the flex item float right */
    order: 2;           /* Make the flex item float right */
    width:200px;
    background:#f1f1f1;
    z-index:998;
    position:relative;
    min-height:1000px;
    height:auto;
    padding:0 1em;
    font-size:0.75em;
    overflow-x: scroll;
    overflow-y: scroll;
}
#map-layer-detail-content {
    overflow-x: hide;
    overflow-y: auto;
    position:absolute;
}
#map-container #map-layer-detail h1 {
    font-size:1.5em;
}
#map-container #map-wrap {
    flex:1.2;
    position:relative;
    overflow: hidden;
}
#map-container #map-wrap #map {
    width:100%;
    min-height:1000px;
    height:100%;
}
#map-container label.nICE {
    float:right;
}

#map-container span.map-icon {
    width:2.5em;
    height:2.5em;
    padding:.3em;
    border-radius:50%;
    margin: 0 .5em 0 0;
    display:inline-block;
    vertical-align:middle;
    background-repeat: no-repeat;
    background-size: auto 70%;
    background-position: center center;
}

#map-container .map-layer-group-list span.map-icon {
    width:2em;
    height:2em;
    border-radius:50%;
    margin: 0 .5em 0 0;
    display:inline-block;
    vertical-align:middle;
}

.custom-marker {
    width:0;
    height:0;
}
.custom-marker > div {
    width:4em;
    height:4em;
    border:3px solid white;
    border-radius: 50%;
    position:relative;
    background-repeat: no-repeat;
    background-size: auto 90%;
    background-position: center center;
    text-align:center;
}
.custom-marker.custom-marker-labelled > div {
    background-size: auto 50%;
    background-position: top center;
}
.custom-marker.custom-marker-labelled > div > span {
    position: absolute;
    left:10%;
    top: 52%;
    margin:.1em auto;
    color:white;
    font-size:.75em;
    font-weight:bold;
    text-align:center;
    width:80%;
    line-height:1em;
}
.custom-marker div:after {
    position:absolute;
    content:' ';
    display:block;
    overflow:hidden;
    width:0;
    height:0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 7px solid white;
    left:calc(50% - 4px);
    bottom:-8px;
}

.marker-selected {
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,.75));
}

/* Fix the map pane overlapping other modals when opening some tabs on navbar */
.leaflet-pane {
    z-index: 3;
}

@media only screen and (min-width: 200px) and (max-width: 767px) {
    div#map-layer-group {
        font-size: .75rem !important;
    }
}