#map {
height: 100%;
} .map-header {
display: flex;
flex-wrap: nowrap;
gap: 2rem;
justify-content: space-between;
padding: 45px 42px; }
.map-header form {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px 30px;
}
.map-header form {
max-width: 650px;
}
.map-header fieldset {
border: none;
}
.map-header fieldset input {
display: none;
}
.map-header fieldset label {
display: flex;
gap: 10px;
align-items: center;
position: relative;
}
.map-header .custom_input {
min-width: 14px;
height: 14px;
border: 1px solid #707070;
position: relative;
}
.map-header fieldset input:checked + label .custom_input::before {
position: absolute;
left: 0;
top: 50%;
height: 70%;
width: 3px;
background-color: #707070;
content: "";
transform: translate(7px, -3px) rotate(-45deg);
transform-origin: left bottom;
}
.map-header fieldset input + label {
opacity: 0.3;
transition: 0.5s all;
}
.map-header fieldset input:checked + label {
opacity: 1;
}
.map-header fieldset.mark-all input + label {
opacity: 1;
}
.map-header fieldset input:checked + label .custom_input::after {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background-color: #707070;
content: "";
transform: translate(9px, -2px) rotate(-45deg);
transform-origin: left bottom;
} .popup-container {
cursor: auto;
height: 0;
position: absolute;
width: 200px;
} #content {
padding: 84px 27px 18px;
width: 100%;
max-height: inherit;
overflow: hidden;
box-sizing: border-box;
position: relative;
max-height: 414px;
margin-bottom: 20px;
min-width: 480px;
}
#info_head {
margin: -84px -27px 0;
padding: 18px 27px;
background-color: #27156e;
color: white;
font-size: 18px;
font-weight: 500;
position: sticky;
top: -84px;
height: 84px;
}
#info_head p {
margin: 0;
line-height: 24px;
}
.content_box {
color: #707070;
font-size: 16px;
line-height: 21px;
margin-top: 20px;
overflow-y: scroll;
overflow-x: hidden;
}
.content_header {
font-weight: bold;
margin: 8px 0 0;
}
.content_sub_header {
text-decoration: underline;
cursor: pointer;
}
.content_sub_header.active {
text-decoration: none;
}
.content_separator {
margin-top: 13px;
margin-bottom: 13px;
}
.content_sub {
display: none;
}
.content_sub.visible {
display: block;
}
.content_value {
margin: 0;
} .loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 80px;
height: 80px;
margin: -76px 0 0 -76px;
border: 12px solid #f3f3f3;
border-radius: 50%;
border-top: 12px solid #bb001e;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}                   .content_box {
scrollbar-width: thin; scrollbar-color: #d1d1d1 #f3f3f3;
} .content_box::-webkit-scrollbar {
width: 12px; } .content_box::-ms-scrollbar {
width: 12px;
}
.content_box::-webkit-scrollbar-track {
background: #f3f3f3;
}
.content_box::-webkit-scrollbar-thumb {
background-color: #d1d1d1;
border-radius: 6px; border: 3px solid #ffffff; }
.content_box::-ms-scrollbar-thumb {
background-color: #d1d1d1;
border-radius: 6px;
border: 3px solid #ffffff;
} @media only screen and (max-width: 767px) {
.content_box::-webkit-scrollbar {
width: 12px;
}
.content_box::-webkit-scrollbar-track {
background: #f3f3f3;
}
.content_box::-webkit-scrollbar-thumb {
background-color: #d1d1d1;
border-radius: 6px;
border: 3px solid #ffffff;
}
} #info_popup {
position: absolute;
}
.popup-bubble { position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -100%); background-color: white;
padding: 5px;
border-radius: 5px;
font-family: sans-serif;
overflow-y: auto;
max-height: 60px;
box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
}
.popup-bubble-anchor {
position: absolute;
width: 100%;
bottom: 8px;
left: 0;
}
.gm-style-iw-d {
overflow: initial !important;
}
.gm-style-iw-d div:first-of-type {
max-height: inherit;
}
.gm-style .gm-style-iw-c {
padding: 0 !important;
max-height: 414px !important;
border-radius: 0;
}
.gm-ui-hover-effect {
width: 30px;
height: 30px;
opacity: 1;
right: 24px !important;
top: 25px !important;
}
.gm-ui-hover-effect > span {
background-color: white !important;
width: 30px !important;
height: 30px !important;
background-repeat: no-repeat;
margin: 0 !important;
}
.gm-style .gm-style-iw-tc::after {
height: 20px !important;
width: 40px !important;
transform: translateX(-8px);
}
@media screen and (max-width: 1024px) {
.map-header {
flex-direction: column;
gap: 22px;
padding: 25px 15px;
}
.map-header form {
max-width: 100%;
}
.logo {
max-width: 122px;
margin: 0 auto;
}
.map-header form {
gap: 15px 30px;
justify-content: space-around;
}
.map-header fieldset { }
.map-header fieldset label {
max-width: 90px;
}
.map-header fieldset img {
max-width: inherit;
width: calc(100% - 24px); }
#content {
min-width: 70vw;
max-width: 90vw;
}
} .map-search {
flex-shrink: 0;
min-width: 20rem;
align-self: center;
padding: 0.75rem 1rem;
border: 1px solid #707070;
font-size: 14px;
padding: 10px;
position: relative;
}
@media (max-width: 1200px) {
.map-search {
min-width: 18rem;
}
.logo {
width: 200px;
height: auto;
}
} .map-wrapper {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
.map-wrapper #map {
height: 535px;
width: 100%;
}
.map-wrapper .map-header form {
max-width: 100%;
}