﻿/* jvectorMap */

.map-wrapper .global-jurisdictions { text-align: right; min-height: 28px; }

.map-wrapper .global-jurisdictions a { display: inline-block; font-family: var(--hlc-gt-ultra); font-size: 13px; text-decoration: none; background-color: #354546; color: white; white-space: nowrap; margin: 0 0 5px 10px; padding: 5px 8px; text-transform: uppercase; border: 0; }

.map-wrapper .global-jurisdictions a:hover { opacity: 0.85; border: 0; }

.main-map { padding: 0px 10px; }

.main-map .inner { padding: 20px; background-color: #d2d3d5; }

.main-vector-map { width: 100%; height: 560px; }

.map-options { display: block; margin: 0; width: 100%; padding: 1px 10px 10px 10px; background-color: #ffffff; }

.map-options .map-options-topic { display: inline-block; width: 20%; padding: 0px 20px 0px 0px; vertical-align: middle; }

.map-options .map-options-show { display: inline-block; vertical-align: middle; padding: 0; }

.map-options .map-options-topic select { width: 100%; }

.map-options .col-3 { padding-top: 0; padding-bottom: 0; }

/*.map-options-show label { font-size: 13px; font-weight: bold; font-family: inherit; padding-right: 8px; }

.map-options-show div.radio-button { display: inline-block; }*/

.map-instructions { margin: 0 0 20px 0; font-family: 'GT Ultra Regular', sans-serif; color: #4b2942; font-size: 22px; 
    line-height: 1.2em; font-weight: normal; text-align: center;}

.map-lp-options { border-top: 1px dotted #cccccc; padding-top: 10px; margin-top: 10px; }

.map-options-show .radio-button { display: inline-block; margin-right: 14px; }

.map-options-row { margin: 10px 0 0 0; text-align: center; }

.map-options-row .view { display : inline-block; }

.map-options .view-group { display: inline-block; border-left: 1px dotted #cccccc; margin-left: 20px; padding: 10px 0 10px 20px; }

.map-options .view-group ul { list-style-type: none; margin: 0; display: inline-block; }

.map-options .view-group ul li { display: inline-block; margin-left: 10px;  }

.map-options .view-group ul li input[type="radio"],
.map-otpions-show input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.map-options .view-group ul li input[type="radio"] + label,
.map-options-show input[type="radio"] + label { position: relative; padding-left: 30px; cursor: pointer; display: inline-block; 
    height: 25px; line-height: 25px; font-size: 14px; color: #4e5357; font-family: var(--hlc-gt-ultra); user-select: none; }

.map-options .view-group ul li input[type="radio"] + label:before,
.map-options .view-group ul li input[type="radio"] + label:after,
.map-options-show input[type="radio"] + label:before,
.map-options-show input[type="radio"] + label:after { content: ''; position: absolute; left: 0; top: 0; margin: 4px 4px; width: 18px; height: 18px; z-index: 0; transition: .15s ease; border-radius: 50%; box-sizing: border-box; }

.map-options .view-group ul li input[type="radio"]:not(:checked) + label:before,
.map-options .view-group ul li input[type="radio"]:not(:checked) + label:after,
.map-options-show input[type="radio"]:not(:checked) + label:before,
.map-options-show input[type="radio"]:not(:checked) + label:after { border: 2px solid var(--hlc-midnight-blue); }

.map-options .view-group ul li input[type="radio"]:not(:checked) + label:after,
.map-options-show input[type="radio"]:not(:checked) + label:after { transform: scale(0); }

.map-options .view-group ul li input[type="radio"]:checked + label:before,
.map-options-show input[type="radio"]:checked + label:before { border: 2px solid transparent; }

.map-options .view-group ul li input[type="radio"]:checked + label:after,
.map-options-show input[type="radio"]:checked + label:after  { background-color: var(--hlc-midnight-blue); border: 2px solid #4a2841; transform: scale(1.02); }

.map-options .switch label,
.map-options .view-group .group-label,
.map-options-show label.label,
.provision-types-key label { display: inline-block; font-size: 14px; font-family: var(--hlc-gt-ultra); font-weight: normal; }

.map-options .view-group .group-label,
.map-options-show label.label { height: 25px; color: #000000;}

.provision-types-key label { color: #4e5357; }

.map-wrapper,
.jr-list-wrapper { position: relative; }

.map-wrapper .map-loading {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgb(220,220,220);
   z-index: 10000;
}

.map-wrapper .map-loading:after {
   content: "Loading ...";
   position: absolute;
   top: min(40px, 50%);
   left: 0;
   right: 0;
   bottom: auto;
   margin-top: -8px;
   font-family: 'GT Ultra Bold', sans-serif;
   font-weight: bold;
   font-size: 16px;
   line-height: 1em;
   color: var(--hlc-midnight-blue);
   text-align: center;
}

.map-wrapper .info-popup,
.jr-list-wrapper .info-popup { position: absolute; left: 0; top: 0; max-height: 35vh;  border: 1px solid #000000; background-color: #ffffff; display: flex; flex-direction: column; }

.map-wrapper .info-popup { width: 20vw; min-width: 300px; }
.jr-list-wrapper .info-popup { width: 100%; }
.jr-list-wrapper .info-popup.list { max-height: 25vh; }

.map-wrapper .info-popup .header,
.jr-list-wrapper .info-popup .header { padding: 10px 60px 10px 20px; background-color: #5482ab; position: relative; }

.map-wrapper .info-popup .header h3,
.jr-list-wrapper .info-popup .header h3 { color: #ffffff; margin: 0 }

.map-wrapper .info-popup .header .close-popup,
.jr-list-wrapper .info-popup .header .close-popup { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; background-color: transparent; background-image: url("/_assets/icon-close-white.png"); background-size: cover; background-position: center; background-repeat: no-repeat; }

.map-wrapper .info-popup .content-container,
.jr-list-wrapper .info-popup .content-container { flex-basis: 100%; overflow-y: auto; }

.map-wrapper .info-popup .content,
.jr-list-wrapper .info-popup .content { padding: 20px }

.map-wrapper .info-popup .buttons,
.jr-list-wrapper .info-popup .buttons { padding: 10px 20px; border-top: 1px solid #707070; text-align: center; }

.jvectormap-tip { padding: 4px 8px; font-size: 13px; }

@media (max-width: 900px) {
   .main-vector-map {
      height: 58vw;/* 500px*/
   }
}

/*@media (max-width: 850px) {
   .main-vector-map { height: 440px; }
}*/

@media (max-width: 650px) {
   .main-map { padding: 0px 0px; }
   .main-map .inner { padding: 20px 25px;}
}
