@media (max-width: 839px) {
    .container {
        width: 100%;
    }
}

body, p, div, span, ul {
    line-height: 22px;
}

p, ul {
    font-size: 16px;
}

a {
    padding: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    font-weight: bold;
}

h2 {
    font-size: 28px;
    line-height: 33px;
}
h3 {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 8px;
}
h4 {
    font-size: 30px;
}

h5 {
    font-size: 24px;
    line-height: 28px;
}

hr {
    border: 0;
    border-top: 1px solid #707070;
    margin: 32px 0px;
}

i.dialog-open-btn {
    cursor: pointer;
}

.data-last-updated {
    color: #6F6F6F;
    text-align: right;
}


.search-form-container {
    text-align: right;
}
.col-location-search-form {
    padding: 21px;
    background-color: #0D6940;
    width: max-content;
    margin: 0px 0px 0px auto;
}
    .col-location-search-form h5 {
        font-weight: bold;
        font-size: 20px;
        line-height: 24px;
        margin: 0px 0px 16px;
        color: white;
    }
    .col-location-search-form .input-container {
        max-width: 370px;
        margin-bottom: 16px;
    }
    .col-location-search-form .button-container {
        text-align: right;
    }

.page-section {
    border-top: 8px solid #0D6940;
    box-shadow: 0px 3px 6px #00000029;
    padding: 32px;
    margin-bottom: 32px;
}

.section-header {
    text-align: center;
}
    .section-header h2 {
        margin-bottom: 16px;
    }
    .section-header h3 {
        color: #006940;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

.comparison-container.state-comparison .comparison-container-header {
    margin-top: 64px;
}
.comparison-container-header {
    margin-bottom: 12px;
}

.comparison-container p {
    text-align: right;
    font-style: italic;
    font-family: 'Roboto-Light', "Helvetica", "Arial", sans-serif;
    color: #333333;
}

.comparison-label {
    font-size: 40px;
    line-height: 47px;
    font-weight: bold;
    margin-bottom: 28px;
}
span.comparison-data-label {
    font-size: inherit;
    line-height: inherit;
}
.comparison-data-label {
    color: #4FAC50;
}
    .comparison-data-label.lower {
        color: #C30F1D;
    }
 
    .cta-section, .area-detail, .notes-detail {
        padding: 28px 24px;
        background-color: #F5F5F5;
        margin-bottom: 28px;
    }


.comparison-detail {
    margin-bottom: 11px;
    padding: 28px 24px;
    background-color: #F5F5F5;
}
    .comparison-detail h5 {
        margin-bottom: 16px;
    }

.cta-section .description {
    margin-bottom: 8px;
}



.affordability-labor-cost-section .page-section {
    min-height: 555px;
}
.affordability-labor-cost-section h3:not(.mgn-btm-0) {
    margin-bottom: 18px;
}

.affordability-section .comparison-chart-container .chart-area {
    height: 54px;
    padding: 6px 0px 16px 0px;
}
    .affordability-section .comparison-chart-container .chart-area div {
        height: 100%;
    }

.cost-of-labor-section .arrow-image-container {
    text-align: center;
    margin: 62px auto 16px auto;
}
    .cost-of-labor-section .arrow-image-container img.lower {
        transform:rotate(180deg);
    }
.cost-of-labor-section .arrow-label {
    text-align: center;
    font-size: 34px;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 66px;
}
.cost-of-labor-section .metro-rank-label {
    font-size: 32px;
    line-height: 38px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.area-information-section h3 {
    margin-bottom: 16px;
}
.area-information-section .annual-container {
    font-size: inherit;
    padding-right: 48px;
    line-height: inherit;
}
.area-information-section .hourly-container, .area-information-section .currency-symbol {
    font-size: inherit;
    line-height: inherit;
}

.area-detail {
    min-height: 200px;
    margin-bottom: 0px;
}
    .area-detail .data-label {
        font-size: 49px;
        line-height: 57px;
        font-weight: bold;
        color: #4FAC50;
    }
    .area-detail h5:first-of-type, .area-detail .description {
        margin-bottom: 8px;
        white-space: nowrap;
    }
    .area-detail.state-taxes h3 {
        margin-bottom: 8px;
    }

.walk-score-section, .employment-levels-section {
    min-height: 456px;
}

.employment-levels-section .row:first-of-type {
    margin-bottom: 42px;
}
.employment-levels-section h3.comparison-data-label {
    margin-bottom: 0px;
}
.employment-levels-section h5, .employment-levels-section .description {
    margin-bottom: 8px;
}


.national-crime-note {
    font-size: 14px;
    line-height: 18px;
    margin-top: 18px;
    font-style: italic;
}
.notes-section h5 {
    margin-bottom: 8px;
}
.notes-section .notes-detail {
    margin-bottom: 0px;
    min-height: 340px;
}
.wikipedia-section {
    margin-bottom: 16px;
}
.whitepapers-section h2, .blogposts-section h2, .faqs-section h2 {
    margin-bottom: 16px;
}
.faqs-section .faq:not(:last-of-type) {
    margin-bottom: 32px;
}
.popular-areas-section .page-section {
    min-height: 485px;
}
.popular-areas-section h5 {
    white-space: nowrap;
    margin-bottom: 8px;
}
.popular-areas-section ul, .browse-cities-section ul {
    list-style-type: none;
    padding-inline-start: 0px;
}
    .popular-areas-section ul li:not(:last-child), .browse-cities-section ul li:not(:last-child):not(.header-label) {
        margin-bottom: 16px;
    }

.browse-cities-section.is-collapsible .row.collapsed {
    height: 180px;
    overflow-y: hidden;
}

.cta-btn-container {
    text-align: center;
    margin-top: 32px;
}
.browse-cities-section, .full-width-sa-cta-container {
    margin-bottom: 48px;
}
    .browse-cities-section .cta-btn-container {
        margin-top: 32px;
        text-align: center;
    }
    .browse-cities-section h2 {
        margin-bottom: 5px;
    }

@media (min-width: 577px) {
    .comparison-detail h5 {
        height: 56px;
    }
    .comparison-detail h5.national {
        max-width: 400px;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0px 15px;
    }
    div, p, span {
        font-size: 16px;
    }
    h3, .section-header h2 {
        font-size: 24px;
        line-height: 28px;
    }
    .section-header h3 {
        font-size: 32px;
        line-height: 38px;
        margin-bottom: 8px;
    }
    hr {
        margin: 8px 0px;
    }
    .page-section {
        margin-left: -15px;
        margin-right: -15px;
        padding: 24px 16px 32px;
    }
    .section-header h2.mobile {
        font-size: 28px;
        line-height: 33px;
    }
    .data-last-updated {
        text-align: left;
        margin-top: 8px;
    }
    .search-form-container {
        padding: 0px;
    }
    .col-location-search-form {
        width: 100%;
    }
        .col-location-search-form h5 {
            text-align: center;
        }
    .comparison-container.state-comparison .comparison-container-header {
        margin-top: 0px;
    }
    .comparison-container.state-comparison .comparison-detail h5 {
        font-size: 18px;
        line-height: 21px;
        margin-bottom: 16px;
    }
    .comparison-label {
        font-size: 28px;
        line-height: 30px;
        margin-bottom: 8px;
    }
        .comparison-label.mobile, .comparison-container.state-comparison .comparison-label {
            margin-bottom: 24px;
        }
    .comparison-detail {
        margin-bottom: 0px;
    }
    .comparison-detail, .cta-section {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .affordability-labor-cost-section .page-section {
        min-height: unset;
    }
    .cost-of-labor-section .arrow-section-container {
        display: table;
        margin: 8px 0px;
    }
    .cost-of-labor-section .arrow-image-container, .cost-of-labor-section .arrow-label {
        display: table-cell;
        font-size: 24px;
        line-height: 28px;
    }
    .cost-of-labor-section .arrow-image-container {
        padding: 0px 16px;
    }
    .area-information-section hr {
        margin: 24px 0px;
    }
    .area-information-section .average-salaries-container h3 {
        font-size: 32px;
        line-height: 38px;
    }
    .area-information-section .annual-container {
        display: block;
        margin-bottom: 16px;
    }
    .area-detail {
        min-height: unset;
        padding: 24px 16px;
    }
        .area-detail:not(.state-taxes) {
            margin-bottom: 24px;
        }
        .area-detail.state-taxes h3 {
            font-size: 32px;
            line-height: 38px;
        }
    .walk-score-section, .employment-levels-section {
        min-height: unset;
    }
    .employment-levels-section .row:first-of-type {
        margin-bottom: 0px;
    }
    .employment-levels-section h3 {
        margin-bottom: 0px;
    }
        .employment-levels-section h3.comparison-data-label {
            font-size: 32px;
            line-height: 38px;
        }
    .employment-levels-section h5 {
        margin-top: 24px;
    }
    .crime-report-container:not(:last-of-type) {
        margin-bottom: 24px;
    }
    .national-crime-note {
        margin-bottom: 0px;
        transform: unset;
        padding: 16px 16px 0px 16px;
    }
    .notes-section .notes-detail {
        min-height: unset;
    }
    .popular-areas-section a {
        font-weight: bold;
    }
    .page-section.browse-cities-section, .popular-areas-section .page-section {
        padding-left: 32px;
        padding-right: 32px;
    }
    .full-width-sa-cta-container {
        margin-left: -15px;
        margin-right: -15px;
    }
    .whitepapers-section .left-col, .blogposts-section .left-col {
        padding-right: 8px;
    }
    .whitepapers-section .right-col, .blogposts-section .right-col {
        padding-left: 8px;
    }
}