@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
@import url('/css/leaflet.css');
@import url('/css/modules/layer_filter.css');
@import url('/css/modules/modal.css');
@import url('/css/modules/region_buttons.css');

body {
    font-family: 'Lato', sans-serif;
    background: #fafafa;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    position: relative;
}

.row {
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;
}

.column {
    flex-direction: column;
}

.flex-item {
    flex: 1 1 auto;
    box-sizing: border-box;
    border-radius: 0.5rem;
    color: #363636;
    font-weight: 400;
    font-size: calc((13/16)*1rem);
}

.top_container {
    max-height: calc(100vh - 1.6rem - 1.6rem);
    max-width: 35%;
    margin: 1.6rem;
    overflow: hidden;
}

.bottom-container {
    position: fixed;
    max-width: 35%;
    margin: 1.6rem;
    bottom: 0;
}

.left-container {
    left: 0;
}

.right-container {
    right: 0;
}

#map {
    position: fixed;
    top: 0;
    left: 0;
    max-height: 100%;
    flex-shrink: 0;
}

body>.container {
    height: 100%;
}

.map_active_area {
    width: calc(65% - (1.6rem*3));
    height: calc(100% - (1.6rem*2));
    position: absolute;
    top: 0;
    right: 0;
    margin: 1.6rem;
    pointer-events: none;
}

.address_panel {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 35%;
    z-index: 100;
}

.address_detail {
    width: 100%;
}

form label {
    display: block;
    color: #363636;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
}

input[name=address] {
    width: 100%;
    padding: 0.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    font-weight: 300;
    font-size: calc((16 / 16) * 1rem);
    border: none;
    border-radius: 6px;
    box-shadow: 0px 1px 3px 0px rgba(65, 65, 65, 0.2);
    box-sizing: border-box;
    height: 3.5rem;
    line-height: 3.5rem;
    color: #4E4A4A;
}

input[name=address]:focus {
    outline: none;
}

label[for=address] {
    position: relative;
    background: #FFF;
    border-radius: 6px;
}

label[for=address]:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3rem;
    mask-image: url('/img/icon_magnifier.svg');
    -webkit-mask-image: url('/img/icon_magnifier.svg');
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background: #82B541;
}

label[for=address][class^="restriction-"]:before {
    mask-image: url('/img/icons/ambulance.svg');
    -webkit-mask-image: url('/img/icons/ambulance.svg');
}

label[for=address].restriction-info>input {
    background: #64C7FF25;
}

label[for=address].restriction-decline>input {
    background: #FF806425;
}

label[for=address].restriction-refer>input {
    background: #647CFF25;
}

label[for=address].restriction-conditional>input {
    background: #ffbf2625;
}

label[for=address].restriction-info:before {
    background: #64C7FF;
}

label[for=address].restriction-decline:before {
    background: #FF8064;
}

label[for=address].restriction-refer:before {
    background: #647CFF;
}

label[for=address].restriction-conditional:before {
    background: #ffbf26;
}

label[for=address].tsunami:before,
label[for=address].flood:before {
    mask-image: url('/img/icons/water.svg');
    -webkit-mask-image: url('/img/icons/water.svg');
}

label[for=address].earthquake:before,
label[for=address].slope:before {
    mask-image: url('/img/icons/land.svg');
    -webkit-mask-image: url('/img/icons/land.svg');
}

#address_lookup .clear {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 3rem;
    mask-image: url('/img/icons/cross.svg');
    -webkit-mask-image: url('/img/icons/cross.svg');
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 13px 13px;
    -webkit-mask-size: 13px 13px;
    background: #000;
    cursor: pointer;
}

#address_lookup .clear:hover {
    background: #82B541;
}

.address_list {
    position: absolute;
    padding: 0.5rem 0;
    background: #FFFFFF;
    box-shadow: 0px 1px 3px 0px rgba(65, 65, 65, 0.2);
    border-radius: 6px;
    top: calc(100% - 1rem);
    left: 0;
    z-index: 100;
    width: 100%;
}

.address_list:before {
    content: "";
    background: #FFF;
    display: block;
    width: 100%;
    height: 0.5rem;
    position: absolute;
    top: -4px;
    left: 0;
}

.address_list:empty {
    background: none;
    box-shadow: none;
    padding: 0;
}

.address_list:empty:before {
    content: none;
}

.address_list a {
    color: #4a4a4a;
    padding: 0.5rem 0;
    display: inline-block;
    font-weight: 400;
    text-decoration: none;
    font-size: calc((13 / 16) * 1rem);
    cursor: pointer;
}

.address_list a:hover {
    color: #3273dc;
}

.address_list .region {
    padding-left: 3rem;
    position: relative;
}

.address_list .region:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3rem;
    mask-image: url('/img/icon_region.svg');
    -webkit-mask-image: url('/img/icon_region.svg');
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background: #82B541;
}

.address_list .address {
    padding-left: 3rem;
    position: relative;
}

.address_list .address:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3rem;
    mask-image: url('/img/icon_address.svg');
    -webkit-mask-image: url('/img/icon_address.svg');
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background: #82B541;
}

#map {
    height: 100%;
    width: 100%;
}

.spinner,
.spinner:after {
    border-radius: 50%;
    width: 2em;
    height: 2em;
    display: none;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border: 0.5rem solid transparent;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    line-height: normal;
    vertical-align: middle;
    margin-top: -0.5rem;
    margin-left: 1rem;
}

.spinner.active {
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border: 0.5rem solid #DDD;
    border-left: 0.5rem solid #7bac3e;
    border-left: 0.5rem solid #3273dc;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.info-panel {
    position: relative;
    margin-top: 5.1rem;
    max-height: calc(100vh - 5.1rem - 3.5rem - 1.6rem - 1.6rem - 1.6rem);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 6px;
}

.info-panel.no-scroll {
    overflow: unset;
}

.info-panel>div {
    padding: 1.25rem;
    background: #FFF;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0px 1px 3px 0px rgba(65, 65, 65, 0.2);
    pointer-events: all;
}

.info-panel a {
    color: #363636;
    text-decoration: none;
}

.info-panel .tooltip {
    position: relative;
    margin: 0 0.5rem;
    vertical-align: middle;
    display: inline-block;
    height: 1rem;
}

.info-panel .tooltip>.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    mask-image: url('/img/icon_tooltip.svg');
    -webkit-mask-image: url('/img/icon_tooltip.svg');
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 24px;
    -webkit-mask-size: 24px;
    background: #00A7FF;
    margin-top: -4px;
}

.info-panel .tooltip::after, .tooltip-content {
    transition: all 0.5s ease-in-out;
    content: attr(data-tooltip);
    background: #FFF;
    padding: 0.5rem 1rem;
    line-height: 1.5;
    box-shadow: 0px 1px 3px 0px rgba(65, 65, 65, 0.2);
    border-radius: 6px;
    width: 250px;
    height: auto;
    position: fixed;
    opacity: 0;
    display: none;
    margin-left: 0;
}

.info-panel .tooltip:hover::after, .tooltip-content {
    opacity: 1;
    display: block;
    transition: all 0.5s ease-in-out;
    z-index:300;
}

.info-panel .coverage-severity > div.icon {
    margin:0;
    width:20px;
    height:20px;
    mask-image: url('/img/icons/layer-component.svg');
    -webkit-mask-image: url('/img/icons/layer-component.svg');
    position:relative;
    margin-bottom:-20px;
    pointer-events: none;
}

.info-panel .coverage-severity > div.severity-tooltip {
    margin:0;
    width:20px;
    height:20px;
}

.info-panel .coverage-severity > div.severity-tooltip > .icon {
    /* do not display tooltip icon */
    display: none;
    pointer-events: none;
    height:0;
    width:0;
}

.tooltip-content {
    content:""; /* not required */
    font-weight:300;
    z-index:300;
    width:auto;
    min-width:6rem;
    max-width:250px;
}

.severity-breakdown {
    display:grid;
    grid-template-columns: 20px 1fr;
    gap: 1rem;
    padding: 1.25rem;
}
.severity-breakdown .fullwidth {
    grid-column: 1/-1;
    margin-bottom:-0.5rem;
}

.region_panel {
    background: #FFF;
    border-radius: 6px;
}

.info-panel>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    grid-auto-rows: auto;
    column-gap: 1.25em;
    row-gap: 1rem;
}

.legend {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: none;
    column-gap: 1.75em;
    row-gap: 1rem;
    grid-column: 2/2;
    text-align: left;
}

.legend>div:before {
    position: relative;
    float: left;
    content: '';
    left: 0;
    top: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #FFF;
    margin-right: 0.5rem;
}

.legend .legend-info:before {
    /* info */
    background: #64C7FF;
}

.legend .legend-decline:before {
    /* decline */
    background: #FF8064;
}

.legend .legend-refer:before {
    /* review */
    background: #647CFF;
}
.legend .legend-conditional:before {
    /* conditional */
    background: #ffbf26;
}

.region_panel>div:before {
    font-weight: 300;
    display: block;
    font-size: calc((11/16)*1rem);
    color: #717F86;
}

.info-panel .risk:before {
    content: "Risk";
}

.info-panel .action:before {
    content: "Action";
}

.info-panel .notes {
    grid-column: 1/-1;
}

.info-panel .notes>span {
    white-space: pre-line;
}

.info-panel .notes>.empty {
    font-weight: 300;
    color: #717F86;
}

.info-panel .notes:before {
    content: "Layer Notes";
}

.info-panel>div>.title {
    grid-column: 1/-1;
    width: 100%;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #EFF1F3;
    position: relative;
    left: -1.25rem;
    top: -1.25rem;
    margin-bottom: -1rem;
    display: grid;
    grid-template-columns: 1fr auto;
}

.info-panel>div>.title a {
    display: block;
    grid-column: 1/1;
}

.info-panel .id:before {
    content: "LINZ Street ID";
}

.info-panel .building-outline:before {
    content: "Building Outline";
}

.info-panel .building-outline {
    cursor: pointer;
    color: #00A7FF;
}

.info-panel>div .layer-response {
    grid-column: 2/2;
    text-align: right;
}

.info-panel .layer-response span,
.info-panel .layer-response {
    color: #717F86;
    font-size: calc((11/16)*1rem);
    font-weight: 300;
}

.info-panel .layer-response span:after {
    content: "ms";
    display: inline;
}

.info-panel .region-initio:before {
    content: "Initio Region";
}

.info-panel .region-initio-vehicle:before {
    content: "Initio Vehicle Region";
}

.info-panel .address:before {
    content: "Address";
}

.info-panel .region:before {
    content: "Region";
}

.info-panel .ta:before {
    content: "Council";
}

.info-panel .titles:before {
    content: "Certificate of Title";
}

.info-panel .titles span {
    cursor: pointer;
    color: #00A7FF;
}

.info-panel .exclusions {
    background: #C00;
    color: #FFF;
}

.info-panel .exclusions:before {
    content: "Exclusions";
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="checkbox"]:checked+label,
[type="checkbox"]:not(:checked)+label {
    position: relative;
    cursor: pointer;
    color: #303030;
}

[type="checkbox"]:checked+label:before,
[type="checkbox"]:not(:checked)+label:before {
    content: '';
    width: 18px;
    height: 18px;
    border: 1px solid rgba(223, 227, 232, 1);
    background: #fff;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="checkbox"]:checked+label:before {
    background: #82B541;
}

[type="checkbox"]:checked+label:after,
[type="checkbox"]:not(:checked)+label:after {
    content: '';
    width: 10px;
    height: 10px;
    background: #FFF;
    position: absolute;
    top: calc(1.25rem + 5px);
    left: calc(1.25rem + 5px);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    mask-image: url('/img/icons/tick.svg');
    -webkit-mask-image: url('/img/icons/tick.svg');
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

[type="checkbox"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="checkbox"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.info-panel .layers.layers__address,
.info-panel .house {
    margin-top: 1.6rem;
}

.info-panel .layers a,
.info-panel .house a {
    color: #00A7FF;
}

.info-panel .layers input[type=checkbox],
.info-panel .house input[type=checkbox] {
    margin: 0;
    margin-right: 0.6rem;
}

.info-panel .layers {
    grid-template-columns: 1fr;
}

.info-panel .layers.layers__region .layers__wrapper {
    grid-template-columns: 1fr 1fr;
    display: grid;
    grid-auto-rows: auto;
    max-height: calc(100vh - 1.6rem - 3.5rem - 1.6rem - 1.6rem - 2.5rem - 1.6rem - 1.6rem - 1.6rem - 3.5rem);
    padding: 0.75rem 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.info-panel .layers__wrapper .layer_selector {
    padding: 1.25rem;
}

.info-panel .layers__wrapper .layer_selector:hover,
.modal .layer_selector:hover {
    background: #363636;
}

.info-panel .layers__region .layer_selector {
    padding: 0.5rem 1.25rem;
}

.info-panel .layers.layers__region .layers__wrapper>div {
    display: grid;
    grid-template-columns: 1fr auto;
}

.info-panel .layers.layers__address .layers__wrapper {
    margin: -1.25rem;
    display: grid;
    grid-template-columns: 1fr;
}

.info-panel .layers.layers__address .layers__wrapper>div {
    display: grid;
    grid-template-columns: 1fr auto;
}

.info-panel .layers.layers__region {
    padding: 0;
}

.info-panel .layers.layers__region .title {
    left: 0;
    top: 0;
    width: auto;
    /*position: initial;
    display: block;*/
}

.info-panel .layers .layer-response {
    display: none;
}

.info-panel .layers>div[class^="restriction"] {
    margin: -1rem -1.25rem 0 -1.25rem;
    border-bottom: 1px solid #EFF1F3;
    cursor: pointer;
}

/* layer ordering in panels */

.restriction-info {
    order: 4;
}

.restriction-decline {
    order: 1;
}

.restriction-refer {
    order: 2;
}

.restriction-conditional {
    order: 3;
}

.info-panel .layers .restriction-info:hover {
    background: rgba(100, 199, 255, 0.1);
}

.info-panel .layers .restriction-decline:hover {
    background: rgba(255, 128, 100, 0.1);
}

.info-panel .layers .restriction-refer:hover {
    background: rgba(100, 124, 255, 0.1);
}

.info-panel .layers .restriction-conditional:hover {
    background: #ffbf2619;
}

.info-panel .layers.layers__region>div:last-child {
    margin-bottom: 0;
}

.info-panel .layers .none {
    padding: 1.25rem;
}

.info-panel .layers>div span.coverage > div {
    line-height:23px;
}

.info-panel .layers>div span.coverage .title:after {
    display: inline-block;
    content: "%";
}

.info-panel .layers>div span.coverage .building:after {
    display: inline-block;
    content: "%";
}


.layers .layer_icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: #000;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-image: url('/img/icons/ambulance.svg');
    -webkit-mask-image: url('/img/icons/ambulance.svg');
}

.layers>div label {
    display: grid;
    grid-template-columns: auto auto 1fr 5rem 20px 3rem 20px;
    gap: 1rem;
    padding: 1.25rem 0 1.25rem 1.25rem;
}

.layers.layers__region>div label {
    grid-template-columns: auto auto 1fr;
}

.layers .layer_group,
.layers .layer_name {
    display: block;
}

.layers .layer_name {
    font-weight: 300;
    font-size: calc((11/16)*1rem);
    color: #717F86;
    margin-top: 0.5rem;
}

.layers.layers__region>div label {
    padding: 0.5rem 1.25rem;
}

.layers.layers__region .layer_selector,
.layers.layers__address .layer_selector,
.modal .layer_selector {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    mask-image: url('/img/icon_arrow_right.svg');
    -webkit-mask-image: url('/img/icon_arrow_right.svg');
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background: #97aab3;
}

.layers.layers__region .layer_name {
    margin-top: 0.2rem;
}

.layers.layers__region [type="checkbox"]:checked+label:after,
.layers.layers__region [type="checkbox"]:not(:checked)+label:after {
    top: calc(0.5rem + 5px);
    left: calc(1.25rem + 5px);
}

.layers .restriction-info .layer_icon, .layers .restriction-info .coverage-icon > div, .layers .restriction-info .coverage-severity > .icon {
    background: #64C7FF;
}

.layers .restriction-decline .layer_icon, .layers .restriction-decline .coverage-icon > div, .layers .restriction-decline .coverage-severity > .icon {
    background: #FF8064;
}

.layers .restriction-refer .layer_icon, .layers .restriction-refer .coverage-icon > div, .layers .restriction-refer .coverage-severity > .icon {
    background: #647CFF;
}

.layers .restriction-conditional .layer_icon, .layers .restriction-conditional .coverage-icon > div, .layers .restriction-conditional .coverage-severity > .icon {
    background: #ffbf26;
}


.layers .layer_icon.tsunami,
.layers .layer_icon.flood {
    mask-image: url('/img/icons/water.svg');
    -webkit-mask-image: url('/img/icons/water.svg');
}

.layers .layer_icon.earthquake,
.layers .layer_icon.slope {
    mask-image: url('/img/icons/land.svg');
    -webkit-mask-image: url('/img/icons/land.svg');
}

.layers .layer_icon.remote {
    mask-image: url('/img/icons/map.svg');
    -webkit-mask-image: url('/img/icons/map.svg');
}

.layers .coverage-icon > div {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background: #97aab3;
}

.layers .coverage-icon > .title {
    mask-image: url('/img/icons/title.svg');
    -webkit-mask-image: url('/img/icons/title.svg');
}

.layers .coverage-icon > .building {
    mask-image: url('/img/icons/building.svg');
    -webkit-mask-image: url('/img/icons/building.svg');
}

.layers .bar {
    height: 8px;
    width: 100%;
    border-radius: 4px;
    margin-top: calc(0.5rem - 4px);
    overflow: hidden;
    position: relative;
}

.layers .bar:before {
    width: 100%;
    height: 100%;
    display: block;
    content: "";
}

.layers .bar:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: block;
    content: "";
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.layers .restriction-info .bar:before {
    background: #64C7FF4D;
}

.layers .restriction-decline .bar:before {
    background: #FF80644D;
}

.layers .restriction-refer .bar:before {
    background: #647CFF4D;
}

.layers .restriction-conditional .bar:before {
    background: #ffbf264D;
}

.layers .restriction-info .bar:after {
    background: #64C7FF;
}

.layers .restriction-decline .bar:after {
    background: #FF8064;
}

.layers .restriction-refer .bar:after {
    background: #647CFF;
}

.layers .restriction-conditional .bar:after {
    background: #ffbf26;
}

.bar-1:after {
    width: 1%;
}

.bar-2:after {
    width: 2%;
}

.bar-3:after {
    width: 3%;
}

.bar-4:after {
    width: 4%;
}

.bar-5:after {
    width: 5%;
}

.bar-6:after {
    width: 6%;
}

.bar-7:after {
    width: 7%;
}

.bar-8:after {
    width: 8%;
}

.bar-9:after {
    width: 9%;
}

.bar-10:after {
    width: 10%;
}

.bar-11:after {
    width: 11%;
}

.bar-12:after {
    width: 12%;
}

.bar-13:after {
    width: 13%;
}

.bar-14:after {
    width: 14%;
}

.bar-15:after {
    width: 15%;
}

.bar-16:after {
    width: 16%;
}

.bar-17:after {
    width: 17%;
}

.bar-18:after {
    width: 18%;
}

.bar-19:after {
    width: 19%;
}

.bar-20:after {
    width: 20%;
}

.bar-21:after {
    width: 21%;
}

.bar-22:after {
    width: 22%;
}

.bar-23:after {
    width: 23%;
}

.bar-24:after {
    width: 24%;
}

.bar-25:after {
    width: 25%;
}

.bar-26:after {
    width: 26%;
}

.bar-27:after {
    width: 27%;
}

.bar-28:after {
    width: 28%;
}

.bar-29:after {
    width: 29%;
}

.bar-30:after {
    width: 30%;
}

.bar-31:after {
    width: 31%;
}

.bar-32:after {
    width: 32%;
}

.bar-33:after {
    width: 33%;
}

.bar-34:after {
    width: 34%;
}

.bar-35:after {
    width: 35%;
}

.bar-36:after {
    width: 36%;
}

.bar-37:after {
    width: 37%;
}

.bar-38:after {
    width: 38%;
}

.bar-39:after {
    width: 39%;
}

.bar-40:after {
    width: 40%;
}

.bar-41:after {
    width: 41%;
}

.bar-42:after {
    width: 42%;
}

.bar-43:after {
    width: 43%;
}

.bar-44:after {
    width: 44%;
}

.bar-45:after {
    width: 45%;
}

.bar-46:after {
    width: 46%;
}

.bar-47:after {
    width: 47%;
}

.bar-48:after {
    width: 48%;
}

.bar-49:after {
    width: 49%;
}

.bar-50:after {
    width: 50%;
}

.bar-51:after {
    width: 51%;
}

.bar-52:after {
    width: 52%;
}

.bar-53:after {
    width: 53%;
}

.bar-54:after {
    width: 54%;
}

.bar-55:after {
    width: 55%;
}

.bar-56:after {
    width: 56%;
}

.bar-57:after {
    width: 57%;
}

.bar-58:after {
    width: 58%;
}

.bar-59:after {
    width: 59%;
}

.bar-60:after {
    width: 60%;
}

.bar-61:after {
    width: 61%;
}

.bar-62:after {
    width: 62%;
}

.bar-63:after {
    width: 63%;
}

.bar-64:after {
    width: 64%;
}

.bar-65:after {
    width: 65%;
}

.bar-66:after {
    width: 66%;
}

.bar-67:after {
    width: 67%;
}

.bar-68:after {
    width: 68%;
}

.bar-69:after {
    width: 69%;
}

.bar-70:after {
    width: 70%;
}

.bar-71:after {
    width: 71%;
}

.bar-72:after {
    width: 72%;
}

.bar-73:after {
    width: 73%;
}

.bar-74:after {
    width: 74%;
}

.bar-75:after {
    width: 75%;
}

.bar-76:after {
    width: 76%;
}

.bar-77:after {
    width: 77%;
}

.bar-78:after {
    width: 78%;
}

.bar-79:after {
    width: 79%;
}

.bar-80:after {
    width: 80%;
}

.bar-81:after {
    width: 81%;
}

.bar-82:after {
    width: 82%;
}

.bar-83:after {
    width: 83%;
}

.bar-84:after {
    width: 84%;
}

.bar-85:after {
    width: 85%;
}

.bar-86:after {
    width: 86%;
}

.bar-87:after {
    width: 87%;
}

.bar-88:after {
    width: 88%;
}

.bar-89:after {
    width: 89%;
}

.bar-90:after {
    width: 90%;
}

.bar-91:after {
    width: 91%;
}

.bar-92:after {
    width: 92%;
}

.bar-93:after {
    width: 93%;
}

.bar-94:after {
    width: 94%;
}

.bar-95:after {
    width: 95%;
}

.bar-96:after {
    width: 96%;
}

.bar-97:after {
    width: 97%;
}

.bar-98:after {
    width: 98%;
}

.bar-99:after {
    width: 99%;
}

.bar-100:after {
    width: 100%;
}

.layers .bar.empty:after, .layers .bar.empty:before {
    background:#EDEDED;
}

.layers .coverage-icon > .building.empty {
    background:#EDEDED;
}

.layers .coverage > .building.empty {
    color:#CCC;
}

.info-panel .layers .coverage > .building.empty:after {
    content:'N/A';
}

.layers .coverage {
    color: #717F86;
    font-weight: 300;
    text-align: right;
}

.info-panel .layers.active,
.info-panel .house.active {
    opacity: 0.3;
}

.info-panel .layer-response {
    margin-left: 1rem;
}

.house__address .house-info {
    margin-top: 0.25rem;
}

.house__address .house-info .key {
    font-weight: 300;
    color: #717F86;
    display: block;
    font-size: calc((11 / 16) * 1rem);
}

#infobox {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    max-width: 20%;
    max-height: 50%;
    overflow: hidden;
    z-index: 1100;

    border: 0.5rem solid #00a7ff;

    border-radius: 0.5rem;
    background: #FFF;
    color: #363636;
    font-weight: 400;
    padding: 2rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(10, 10, 10, .1)
}

#infobox:empty {
    display: none;
}

#infobox .group {
    padding: 0.5rem 0;
}

#infobox .group:first-child {
    padding-top: 0;
}

#infobox .group:last-child {
    padding-bottom: 0;
}

#infobox .group h3 {
    padding: 0;
    margin: 0;
    font-weight: 300;
    font-size: 0.8rem;
}

#infobox .group[data-group_exclusions],
#infobox .group[data-group_flood],
#infobox .group[data-group_landslip] {
    background: #C33;
    color: #FFF;
    padding: 0.2rem 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

#infobox .group span {
    display: block;
    font-size: 1rem;
    font-weight: 400;
}

.leaflet-pane>svg path {
    stroke-width: 1.5px;
}

.leaflet-pane>svg path.leaflet-interactive {
    fill-opacity: 0.05;
    stroke-opacity: 0.5;
}

.leaflet-pane>svg path.regional_council {
    fill: #33C;
    stroke: #33C;
}

.leaflet-pane>svg path.initio_region {
    fill: #3C3;
    stroke: #3C3;
}

.leaflet-pane>svg path.exclusions,
.leaflet-pane>svg path.flood,
.leaflet-pane>svg path.landslip {
    fill: #C33;
    stroke: #C33;
}

.leaflet-pane>svg path.major_urban,
.leaflet-pane>svg path.large_urban,
.leaflet-pane>svg path.medium_urban,
.leaflet-pane>svg path.small_urban,
.leaflet-pane>svg path.rural_settlement {
    fill: #C3C;
    stroke: #C3C;
}

.leaflet-pane>svg path.title-boundary {
    fill: #3CC;
    stroke: #3CC;
    fill-opacity: 0.4;
    stroke-opacity: 0.8;
}

.leaflet-control-layers-overlays .initio_region:after {
    margin-left: 0.5rem;
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #3C3;
    background: rgba(10, 230, 10, 0.1);
}

.leaflet-control-layers-overlays .regional_council:after {
    margin-left: 0.5rem;
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #33C;
    background: rgba(10, 10, 230, 0.1);
}

.leaflet-control-layers-overlays .exclusions:after {
    margin-left: 0.5rem;
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #C33;
    background: rgba(230, 10, 10, 0.1);
}

.leaflet-control-layers-overlays .flood:after {
    margin-left: 0.5rem;
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #C33;
    background: rgba(230, 10, 10, 0.1);
}

.leaflet-control-layers-overlays .landslip:after {
    margin-left: 0.5rem;
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #C33;
    background: rgba(230, 10, 10, 0.1);
}

.leaflet-control-layers-overlays .major_urban:after,
.leaflet-control-layers-overlays .large_urban:after,
.leaflet-control-layers-overlays .medium_urban:after,
.leaflet-control-layers-overlays .small_urban:after,
.leaflet-control-layers-overlays .rural_settlement:after {
    margin-left: 0.5rem;
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #C3C;
    background: rgba(230, 10, 230, 0.1);
}

.leaflet-control-layers *[class^='restriction-'],
.leaflet-control-layers *[class*=' restriction-'] {
    padding: 0.2rem 0.5rem;
    display: inline-block;
    margin-top: 1px;
}

.address_panel>form,
.address_panel>.address_list {
    pointer-events: all;
}

.leaflet-top .leaflet-control {
    margin-top: 2rem;
}

.leaflet-bottom .leaflet-control {
    margin-bottom: 2rem;
}

.leaflet-left .leaflet-control {
    margin-left: 2rem;
}

.leaflet-right .leaflet-control {
    margin-right: 2rem;
}