.legend {
    align-items: center;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0 0 15px;
    padding: 4px 8px
}

    .legend ul {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        list-style: none;
        justify-content: center;
        margin: 15px -15px 0 0;
        padding: 0;
        width: 100%;
    }

    .legend li {
        align-items: center;
        display: inline-flex;
        font-weight: 600;
        line-height: 1;
        list-style: none;
        padding: 25px 0 0;
        position: relative;
        width: 50px
    }

    .legend .colorBlock {
        display: block;
        height: 15px;
        position: absolute;
        top: 0;
        width: 50px
    }

    .legend .label {
        align-items: center;
        color: var(--gray-70);
        display: inline-flex;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        position: absolute;
        text-align: center;
        top: 100%;
        width: 100%
    }

    .legend .phase-1 .colorBlock {
        background-color: #7e0607
    }

    .legend .phase-2 .colorBlock {
        background-color: #f51515;
    }

    .legend .phase-3 .colorBlock {
        background-color: #f58805;
    }

    .legend .phase-4 .colorBlock {
        background-color: #f7d305;
    }

    .legend .phase-5 .colorBlock {
        background-color: #1045f3;
    }

    .legend .phase-6 .colorBlock {
        background-color: #0a1281;
    }

    .legend .risk-low .colorBlock {
        background-color: #BED4E6;
    }

    .legend .risk-a .colorBlock {
        background-color: #A0BDDC;
    }

    .legend .risk-b .colorBlock {
        background-color: #8B96C9;
    }

    .legend .risk-c .colorBlock {
        background-color: #8D6CB0;
    }

    .legend .risk-d .colorBlock {
        background-color: #8A419E;
    }

    .legend .risk-e .colorBlock {
        background-color: #6B1568;
    }

    .legend .risk-f .colorBlock {
        background-color: #3E0C3F;
    }

html, body {
    height: 100%;
    margin: 0;
    font-size: 14px;
}

#map {
    width: 360px;
    height: 390px;
    background-color: #8ab4f8;
}

p {
    padding-left: 10px;
}

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    min-width: 200px;
}

    .info h4 {
        margin: 0 0 5px;
        color: #777;
    }

.leaflet-container {
    background-color: #ffffff;
}

#divLandingPanel {
    height: 400px;
    display: table;
    padding-left: 70px;
    padding-right: 70px;
    padding-top: 60px;
}

    #divLandingPanel > span {
        vertical-align: middle;
        display: table-cell;
    }

.form-control-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
    outline-offset: unset;
}

.general-icon {
    width: 75px;
}

.custom-icon {
    width: 45px;
}

@media (max-width:768px) {

    .overallIcon {
        padding-left: 0px;
    }

    .general-icon {
        width: 50px;
    }

    .svg-inline--fa.fa-w-20, .svg-inline--fa.fa-w-18, .svg-inline--fa.fa-w-16, .svg-inline--fa.fa-w-10 {
        width: 30px !important;
    }

}

@media (max-width:365px) {
    .btn {
        font-size: 12px;
    }
}


.dividerBottom > div {
    border-bottom: 1px solid #CCC;
}

.dividerRight:nth-child(odd) {
    border-right: 1px solid #ccc;
}

.alignVH {
    /* height:200px; */
    /* width:400px; */
    //border: 1px solid #000;
    text-align: center;
}

    .alignVH span {
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-noninteractive:hover, .btn.btn-noninteractive:active, .btn.btn-noninteractive:focus, .btn.btn-noninteractive {
    cursor: auto;
    /* background-color: #28807c; */
    background-color: rgb(0, 63, 119);
    border-color: #28807c;
}

.HealthHeader {
    background-color: rgb(0, 63, 119);
    border-color: #28807c;
    color: white;
    border-radius: 3px;
}

.normal-weight, .h5.normal-weight {
    font-weight: 400;
}

label {
    font-weight: bold;
}

som-card-header .card-header {
    padding: 0.5rem;
}

som-card-body .card-body {
    padding: 0.5rem;
}

hr {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}