.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;
}
@media (max-width:349px) {
    #map {
        width: 330px;
        height: 365px;
        background-color: #8ab4f8;
    }
}
@media (max-width:337px) {
    #map {
        width: 320px;
        height: 365px;
        background-color: #8ab4f8;
    }
}
@media (max-width:332px) {
    #map {
        width: 300px;
        height: 365px;
        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;
        }
    }

.DoulaHeader {
    font-size: 1.375rem;
    letter-spacing: .1px;
    margin-bottom: .5rem;
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    line-height: 1.1;
    padding: 1rem;
    align-items: center;
    color: white;
}


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

    .dividerRight {
        border-right: 4px 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;
    }

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}