/*
Colors
============================================================
Green Default:     #4C9C2E
Green Dark:        #1A5632
Green Light:       #7CC600
------------------------------------------------------------
Grey Dark:         #231F20
Grey:              #796e70
Grey Light:        #CFCFCF
Grey Lighter:      #E9E9E9
Grey Lightest:     #F5F5F5
------------------------------------------------------------
White:             #FFFFF
------------------------------------------------------------
*/

body {
    overflow-x: hidden;
}

/* Heder Overrides */
h1,
h2,
h3 {
    font-weight: 700;
}

/* Button Styles */

.btn {
    border-radius: 2em;
    font-weight: 600;
    padding: 0.5em 2em;
    transform: background-color 0.3s ease, color 0.3s ease;
}

.btn-green-light {
    background-color: #4c9c2e;
    color: #ffffff;
}

    .btn-green-light:hover {
        background-color: #1a5632;
        color: #ffffff;
    }

/* Main Content Wrapper */

#main-content-container {
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 768px) {
    #main-content-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media (min-width: 1200px) {
    #main-content-container {
       
        padding-bottom: 80px;
    }
}

/* Page Titles */

.page-title {
    display: inline-block;
    font-family: 'futura-pt', sans-serif;
    color: #1a5632;
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .page-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .page-title {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }
}

.text-center .page-title {
    max-width: 920px;
}

#main-content-container .outer-title {
    font-size: 18px;
}

@media (min-width: 768px) {
    #main-content-container .outer-title {
        font-size: 28px;
    }
}

@media (min-width: 1200px) {
    #main-content-container .outer-title {
        font-size: 32px;
    }
}

#main-content-container .outer-text {
    display: inline-block;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    #main-content-container .outer-text {
        margin-bottom: 1.25rem;
    }
}

/* Labels */

.outer-label {
    display: inline-block;
    font-weight: 800;
    font-size: 1.75rem;
}

.outer-label-sub {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.outer-label + .outer-label-sub {
    margin-top: -0.5rem;
}

.card-label {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.25rem;
}

.card-label-sub {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.inner-card-label {
    text-transform: none;
    font-weight: 800;
    font-size: 1.25rem;
}

.inner-card-sub-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    text-transform: none;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Toggle Checkbox */

button.toggle-checkbox {
    position: absolute;
    top: -2px;
    right: 18px;
}

    button.toggle-checkbox:hover {
        background-color: transparent;
    }

    button.toggle-checkbox .rbToggleCheckbox.p-i-checkbox:before,
    button.toggle-checkbox .rbToggleCheckboxChecked:before {
        font-size: 32px;
        display: block;
        font-family: 'futura-pt';
        font-weight: 700;
        line-height: 2rem;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    button.toggle-checkbox .rbToggleCheckbox.p-i-checkbox:before {
        content: '-';
    }

    button.toggle-checkbox .rbToggleCheckboxChecked:before {
        content: '+' !important;
    }

/* Rad Input Override */

#main-content-container .RadPicker {
    display: block;
    clear: both;
}

#main-content-container .RadInput .riTextBox,
.RadInputMgr {
    border-bottom: none;
}

/* Note: because the highlight wrapper is inside of a container we need to push it back out of the container to span full width */
/* Note: this should probably have its own class instead of using a selector like this */
div[class*='wave-highlight-wrapper'] {
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 567px) {
    div[class*='wave-highlight-wrapper'] {
        margin-right: calc(((100vw - 510px) / 2) * -1);
        margin-left: calc(((100vw - 510px) / 2) * -1);
    }
}

@media (min-width: 768px) {
    div[class*='wave-highlight-wrapper'] {
        margin-right: calc(((100vw - 690px) / 2) * -1);
        margin-left: calc(((100vw - 690px) / 2) * -1);
    }
}

@media (min-width: 992px) {
    div[class*='wave-highlight-wrapper'] {
        margin-right: calc(((100vw - 930px) / 2) * -1);
        margin-left: calc(((100vw - 930px) / 2) * -1);
    }
}

@media (min-width: 1200px) {
    div[class*='wave-highlight-wrapper'] {
        margin-right: calc(((100vw - 1110px) / 2) * -1);
        margin-left: calc(((100vw - 1110px) / 2) * -1);
    }
}

.wave-top,
.wave-bottom {
    position: relative;
}

.wave-top {
    padding-top: 40px;
    padding-bottom: 0;
    margin-bottom: 80px;
}

    .wave-top:first-child {
        margin-top: -20px;
    }

@media (min-width: 768px) {
    .wave-top:first-child {
        margin-top: -40px;
    }
}

@media (min-width: 1200px) {
    .wave-top:first-child {
        margin-top: -80px;
    }
}

@media (min-width: 567px) {
    .wave-top {
        padding-top: 80px;
        padding-bottom: 20px;
    }
}

@media (min-width: 992px) {
    .wave-top {
        padding-top: 120px;
        padding-bottom: 40px;
    }
}

.wave-bottom {
    padding-top: 0;
    padding-bottom: 40px;
    margin-top: 80px;
}

@media (min-width: 567px) {
    .wave-bottom {
        padding-top: 20px;
        padding-bottom: 80px;
    }
}

@media (min-width: 992px) {
    .wave-bottom {
        padding-top: 40px;
        padding-bottom: 120px;
    }
}

.wave-bottom:last-child {
    margin-bottom: -20px;
}

@media (min-width: 768px) {
    .wave-bottom:last-child {
        margin-bottom: -40px;
    }
}

@media (min-width: 1200px) {
    .wave-bottom:last-child {
        margin-bottom: -80px;
    }
}

.green-wave-highlight-wrapper {
    background: #1a5632;
    color: #ffffff;
}

.gray-wave-highlight-wrapper {
    background: #f3f4f5;
    color: #1a5632;
}

.wave-top::before {
    content: '';
    background-image: url(/assets/images/wave-btm-gray.svg);
    background-position: bottom center;
    height: 80px;
    width: 100%;
    bottom: -80px;
    position: absolute;
    left: 0;
    right: 0;
}

.green-wave-highlight-wrapper.wave-top::before {
    background-image: url(/assets/images/wave-btm-green-dark.svg);
}

.gray-wave-highlight-wrapper.wave-top::before {
    background-image: url(/assets/images/wave-btm-gray.svg);
}

.wave-bottom::before {
    content: '';
    background-image: url(/assets/images/wave-top-gray.svg);
    background-position: top center;
    height: 80px;
    width: 100%;
    top: -80px;
    position: absolute;
    left: 0;
    right: 0;
}

.green-wave-highlight-wrapper.wave-bottom::before {
    background-image: url(/assets/images/wave-top-green-dark.svg);
}

.gray-wave-highlight-wrapper.wave-bottom::before {
    background-image: url(/assets/images/wave-top-gray.svg);
}

/* Note: This should probably be abit more generic like wave-content */
.wave-content,
.green-wave,
.gray-wave {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}

@media (min-width: 567px) {
    .wave-content,
    .green-wave,
    .gray-wave {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .wave-content,
    .green-wave,
    .gray-wave {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .wave-content,
    .green-wave,
    .gray-wave {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .wave-content,
    .green-wave,
    .gray-wave {
        max-width: 1140px;
    }
}

.wave-title {
    max-width: 800px;
    display: inline-block;
    font-family: 'lato', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .wave-title {
        font-size: 2.25rem;
        margin-bottom: 1rem;
    }
}

@media (min-width: 1200px) {
    .wave-title {
        font-size: 3rem;
        margin-bottom: 1.125rem;
    }
}

.wave-text {
    margin-bottom: 0.75rem;
}

.icon-report-a-claim-intro {
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(/assets/images/icon-report-claim.png);
    background-size: cover;
}

/* Styled Number List */

ol.ordered-list-with-large-icons {
    list-style-type: none;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

    ol.ordered-list-with-large-icons > li {
        font-size: 1.125rem;
        margin-bottom: 24px;
        padding-left: 52px;
        padding-top: 4px;
        counter-increment: customlistcounter;
        position: relative;
        min-height: 36px;
    }

        ol.ordered-list-with-large-icons > li::before {
            content: counter(customlistcounter) ' ';
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 16px;
            font-family: 'futura-pt', sans-serif;
            font-weight: 800;
            color: #fff;
            text-align: center;
            z-index: 2;
        }

        ol.ordered-list-with-large-icons > li::after {
            content: '';
            display: block;
            width: 36px;
            height: 36px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #4c9c2e;
            border-radius: 18px;
            z-index: 1;
        }

    ol.ordered-list-with-large-icons:first-child {
        counter-reset: customlistcounter;
    }

    ol.ordered-list-with-large-icons li .ordered-list-item-title {
        font-weight: 800;
    }

/* Page - Report a Claim */

.section-claim-intro {
    padding-top: 60px;
    margin-bottom: 40px;
}

    .section-claim-intro .row {
        margin-top: 32px;
    }

        .section-claim-intro .row > .col-6::after {
            content: '';
            display: block;
            clear: both;
        }

.download-app-card,
.call-us-card {
    height: 100%;
    margin-bottom: 32px;
}

.section-claim-intro .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-claim-intro .download-app-button a.btn {
}

.call-us-card .call-us-card-text {
    font-family: 'futura-pt', sans-serif;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .call-us-card .call-us-card-text {
        font-size: 28px;
    }
}

@media (min-width: 1200px) {
    .call-us-card .call-us-card-text {
        font-size: 32px;
    }
}

.call-us-card .call-us-card-tel-link {
    display: inline-block;
    color: #1a5632;
    font-family: 'futura-pt', sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .call-us-card .call-us-card-tel-link {
        font-size: 1.175rem;
    }
}

@media (min-width: 1200px) {
    .call-us-card .call-us-card-tel-link {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
}

.page-nav-buttons {
    padding-bottom: 64px;
}

.download-app-text {
    font-family: 'futura-pt', sans-serif;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .download-app-text {
        font-size: 26px;
    }
}

@media (min-width: 1200px) {
    .download-app-text {
        font-size: 32px;
    }
}

.section-claim-cards .card .card-body .card-label {
    display: block;
    width: 100%;
    padding-right: 40px;
}

/* Page - Locations */

button[value='Search Zipcode'] {
    margin-top: 12px;
}

.location-info-wrapper {
    display: flex;
    justify-content: flex-start;
}

    .location-info-wrapper:not(:last-child) {
        margin-bottom: 16px;
    }

@media (min-width: 768px) {
    .location-info-wrapper:not(:last-child) {
        margin-bottom: 20px;
    }
}

.location-info-icon {
    width: 36px;
    height: 36px;
    margin-right: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .location-info-icon span[class*='icon'] {
        width: 36px;
        height: 36px;
        overflow: hidden;
        text-indent: -9999px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .location-info-icon .locations-main-icon {
        background-image: url(/assets/images/icon-location-address.svg);
    }

    .location-info-icon .locations-time-icon {
        background-image: url(/assets/images/icon-location-hours.svg);
    }

    .location-info-icon .locations-phone-icon {
        background-image: url(/assets/images/icon-location-phone.svg);
    }

    .location-info-icon .locations-directions-icon {
        background-image: url(/assets/images/icon-location-directions.svg);
    }

.location-info-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 1;
    justify-content: center;
    align-items: flex-start;
}

    .location-info-content > div > span:not(:first-child) {
        display: inline-block;
        margin-left: 4px;
    }

    .location-info-content .locations-desc {
        font-weight: bold;
    }

    .location-info-content .locations-map {
        display: inline-block;
        margin-left: 4px;
        font-weight: bold;
        text-transform: uppercase;
        padding: 2px 8px 1px 8px;
        background-color: #4c9c2e;
        border-radius: 12px;
        color: white;
        font-size: 12px;
    }

/* Generic Layout and Styles for the Download app badges */

.download-app-badges {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (min-width: 768px) {
    .download-app-badges {
        flex-direction: row;
    }
}

.download-app-card a {
    display: block;
    width: 100%;
}

.icon-app-store-badge,
.icon-google-play-badge {
    display: block;
    width: 100%;
    height: 100px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.icon-app-store-badge {
    background-image: url(/assets/images/app-google-play-badge.png);
}

.icon-google-play-badge {
    background-image: url(/assets/images/app-ios-app-store-badge.png);
}