/*
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
------------------------------------------------------------

Fonts
============================================================
Primary Font:      'Lato', sans-serif
------------------------------------------------------------
Header Font:       'futura-pt', sans-serif
------------------------------------------------------------

Merged from:
  - mainsite-overrides-v2.css
  - l2d-selfservice-overrides.css
  - overrides.css
Loaded AFTER assets/css/l2d-goauto-bootstrap-overrides.css (shared GoAuto framework).
*/


/* ============================================================ */
/* === Base elements ========================================== */
/* ============================================================ */

body {
    overflow-x: hidden;
}

/* NOTE: ".body" (with the leading dot) is a class selector, not an element
   selector. A repo-wide search found no element with class="body" in any
   .aspx, .master, code-behind, or JS file, so this rule is believed to be
   dead and never paints. Preserved verbatim from the original
   l2d-selfservice-overrides.css to avoid any behavior change during the
   merge. Likely a typo of "body" (no dot). */
.body {
    background-color: #f5f5f5;
}

h1,
h2,
h3 {
    font-weight: 700;
}

button,
.button {
    cursor: pointer;
}


/* ============================================================ */
/* === Helper / utility classes =============================== */
/* ============================================================ */

.full-width {
    width: 100%;
}

.extra-padding {
    padding: 42px;
}

@media (max-width: 768px) {
    .extra-padding {
        padding: 24px;
    }
}

.extra-padding-lr {
    padding: 0 42px;
}

@media (max-width: 768px) {
    .extra-padding-lr {
        padding: 0 24px;
    }
}

.no-padding-right {
    padding-right: unset;
}

@media (max-width: 768px) {
    .no-padding-right {
        padding: 0 15px;
    }
}

.no-padding-left {
    padding-left: unset;
}

@media (max-width: 768px) {
    .no-padding-left {
        padding: 0 15px;
    }
}

.left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .left {
        align-items: flex-start;
    }
}

.right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.no-margin {
    margin: unset !important;
    margin-bottom: unset !important;
}

.no-padding {
    padding: unset;
}

.no-padding-lr {
    padding-left: unset;
    padding-right: unset;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-green-default {
    color: #4c9c2e;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button-full-width {
    width: 100%;
}

.italic-label {
    font-style: italic;
}

.span-yellow {
    color: #7cc600;
}

.rbText-uppercase {
    text-transform: uppercase;
}


/* ============================================================ */
/* === Buttons ================================================ */
/* ============================================================ */

.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;
    }

/* Sweet Alert Button */
.sweet-alert-confirm-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 24px;
    box-shadow: none;
    font-weight: 500;
    color: #fff;
    background-color: #4C9C2E;
    min-width: 68px
}

    .sweet-alert-confirm-button:hover {
        background-color: #7CC600;
    }

/* 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;
    }

/* Circle add/remove control */
.circle {
    border: 2px solid #4c9c2e;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: relative;
    margin: 4px;
    display: inline-block;
    vertical-align: middle;
    background: transparent;
}

    .circle:hover {
        background: #cfcfcf;
    }

    .circle:before,
    .circle:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* PLUS */
    .circle.plus:before,
    .circle.plus:after {
        background: #4c9c2e;
        box-shadow: 1px 1px 1px #ffffff9e;
    }

    .circle.plus:before {
        width: 2px;
        margin: 3px auto;
    }

    .circle.plus.remove:before {
        width: 0px;
        margin: 3px auto;
    }

    .circle.plus:after {
        margin: auto 3px;
        height: 2px;
        box-shadow: none;
    }


/* ============================================================ */
/* === Layout containers ====================================== */
/* ============================================================ */

#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-top: 80px;
        padding-bottom: 80px;
    }
}

/* fix for the margin top issue introduced in the other css */
@media (min-width: 768px) {
    #main-content-container .card .row .col-12[class*="col-md"],
    #main-content-container .card .row .col-12[class*="col-lg"] {
        margin-top: 0;
    }
}

#main-content-container .card .card-body .row:not(:only-child):last-child {
    margin-bottom: 0;
}

.hidden-div {
    display: none;
    padding-top: 0;
    margin-top: -32px;
}

@media (min-width: 768px) {
    .hidden-div {
        margin-top: -42px;
    }
}


/* ============================================================ */
/* === Page titles & labels =================================== */
/* ============================================================ */

.page-title {
    display: inline-block;
    font-family: 'futura-pt', sans-serif;
    color: #1a5632;
    font-weight: 700;
    font-size: 1.875rem;
    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;
    }
}

.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 and .card-label-sub are defined in the shared
   l2d-goauto-bootstrap-overrides.css (renamed from .card__label and
   .card__label-sub during the BEM->kebab unification). The weaker rules
   previously here have been removed so the shared branded styling owns
   these class names. */

.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;
}


/* ============================================================ */
/* === Card links ============================================= */
/* ============================================================ */

.card-link {
    display: block;
    background-color: #e9e9e9;
    cursor: pointer;
    transition: background-color 0.3 ease;
}

    .card-link:hover {
        background-color: #fff;
    }

.card-link_arrow {
    margin-right: 0;
    transition: margin-right 0.3s ease;
}

.card-link:hover .card-link_arrow {
    margin-right: -4px;
}


/* ============================================================ */
/* === Telerik Rad input overrides ============================ */
/* ============================================================ */

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

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


/* ============================================================ */
/* === Header / Nav =========================================== */
/* ============================================================ */

/* NOTE: the header phone number is styled by header-footer.css through the
   #large-header-contact-number / #mobile-header-contact-number ids, the same
   as the main site. Don't restyle it here. */

#P_QuoteOrPolicyNumber.large-quote-number {
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: 0.0625rem;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;
    text-align: right !important;
    right: 16px;
    top: 0;
}

p.mobile-quote-number {
    font-weight: bold;
    font-family: 'futura-pt-bold', sans-serif;
    font-size: 1.175rem;
    color: #796e70;
    margin-bottom: 0;
    text-align: right;
}

/* NOTE: logged-in nav only. The main nav matches the marketing site with no top
   padding (its "Get a quote" pill gives the gap). This padding isn't animated, so
   the logged-in menu still jumps 20px when it opens and closes. */
.mobile-menu-active .goauto-selfservice-nav {
    padding-top: 20px;
}

/* NOTE: the logged-in nav's first item is an empty <li> so that Dashboard isn't
   styled as the green pill (header-footer.css keys the pill off li:first-of-type).
   Hiding it keeps that, and saves the 40px of desktop margin it was taking.
   With five links (Contact was dropped) every label fits on one line from 992px
   up with the main site's 20px link spacing. Between 768px and 991px the five
   labels need 670px of the 720px nav box, so 20px (or even 6px) spacing wraps
   three of them onto two lines. 4px each side keeps every label on one line
   (701px used) and the links' own 10px padding still keeps them apart. */
.goauto-selfservice-nav li:empty {
    display: none;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .goauto-selfservice-nav li {
        margin-left: 4px;
        margin-right: 4px;
    }
}


/* ============================================================ */
/* === Wave sections ========================================== */
/* ============================================================ */

/* 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(../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(../images/wave-btm-green-dark.svg);
}

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

.wave-bottom::before {
    content: '';
    background-image: url(../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(../images/wave-top-green-dark.svg);
}

.gray-wave-highlight-wrapper.wave-bottom::before {
    background-image: url(../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;
}


/* ============================================================ */
/* === Ordered list with large icons ========================== */
/* ============================================================ */

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;
}

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


/* ============================================================ */
/* === 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(../images/icon-location-address.svg);
    }

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

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

    .location-info-icon .locations-directions-icon {
        background-image: url(../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;
    }


/* ============================================================ */
/* === 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(../images/app-google-play-badge.png);
}

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


/* ============================================================ */
/* === Policy status ========================================== */
/* ============================================================ */

.ss-policy-status_current {
    color: #7cc600;
}

.ss-policy-status_late {
    color: #c60000;
}


/* ============================================================ */
/* === Page - Dashboard ======================================= */
/* ============================================================ */

.ss-intro_wrapper {
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ss-intro_wrapper {
        margin-bottom: 4rem;
    }
}

@media (max-width: 768px) {
    .ss-intro_wrapper {
        margin-bottom: 30px;
    }
}

.ss-intro_welcome .page-title {
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    line-height: 1.25;
}

.ss-intro_customer {
    text-transform: uppercase;
    font-weight: 700;
    color: #231f20;
}

    .ss-intro_customer span {
        color: #796e70;
        font-size: 1.25rem;
        font-weight: bold;
    }

    .ss-intro_customer a {
        display: block;
    }

@media (min-width: 768px) {
    .ss-intro_customer a {
        display: inline-block;
        margin-left: 8px;
    }
}

.ss-intro_policy {
    color: #cfcfcf;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .ss-intro_policy {
        margin-bottom: 0;
    }
}

.ss-intro_summary {
    text-align: right;
    text-transform: uppercase;
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .ss-intro_summary {
        text-align: left;
    }
}

.ss-intro_summary .ss-intro_premium {
    margin-bottom: 0.25rem;
}

.ss-intro_summary .ss-intro_total {
    color: #7cc600;
}

/* NOTE: ".next-payment-due" appeared twice in l2d-selfservice-overrides.css
   with identical declarations; collapsed to a single rule here. */
.next-payment-due {
    font-family: "futura-pt", sans-serif;
    color: #1a5632;
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
}

/* NOTE: ".date-day" base appeared twice with identical declarations;
   collapsed. The @media (max-width: 320px) variant is preserved. */
.date-day {
    display: flex;
    font-family: "Lato", sans-serif;
    color: #1a5632;
    font-size: 1.1rem;
    text-transform: uppercase;
}

@media (max-width: 320px) {
    .date-day {
        flex-direction: column;
    }
}

/* NOTE: ".ss-content_day" had two declarations in the source file. The later
   one (padding-right: 12px, no media query) overrode the earlier
   (padding-right: 6px with a 768px-breakpoint override to 12px), so the net
   effective value was always 12px. Reduced to the effective rule. */
.ss-content_day {
    border-right: #1a5632 solid 1px;
    padding-right: 12px;
}

/* NOTE: ".ss-content_date" had two declarations plus two media queries in the
   source file; the later declaration (padding-left: 12px; padding-right: 6px)
   overrode all earlier values, so those media queries had no net effect.
   Reduced to the effective rule. */
.ss-content_date {
    padding-left: 12px;
    padding-right: 6px;
}

.ss-content_end-date {
    text-transform: none;
    text-decoration: underline;
    color: #1a5632 !important;
}

/* NOTE: ".amount-due" appeared twice with identical declarations; collapsed. */
.amount-due {
    font-family: "futura-pt", sans-serif;
    color: #1a5632;
    font-weight: 700;
    font-size: 2rem;
}

.ss-payment-options_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.go-paperless {
    color: #7cc600;
    text-decoration: underline;
    width: 100%;
}

@media (min-width: 768px) {
    .go-paperless {
        width: auto;
    }
}

.pay-bills-button {
    width: 100%;
}

@media (min-width: 768px) {
    .pay-bills-button {
        width: auto;
    }
}

.id-card-container {
    display: flex;
    align-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .id-card-container {
        display: flex;
        padding-bottom: 20px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .id-card-container img {
        display: none;
    }
}

.id-card-text {
    font-family: "futura-pt", sans-serif;
    color: #1a5632;
    font-weight: 700;
    font-size: 1.25rem;
    padding-left: 8px;
    text-transform: uppercase;
}

.id-card-options {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

button[value="Email"]::before {
    content: url("data:image/svg+xml,%3Csvg width='22' height='14' viewBox='0 0 22 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1426_3168)'%3E%3Cpath d='M20.6898 0H1.01984C0.749844 0 0.519844 0.1 0.339844 0.27L10.1298 8.35C10.5298 8.68 11.1698 8.68 11.5698 8.35L21.3698 0.27C21.1898 0.11 20.9498 0 20.6898 0Z' fill='white'/%3E%3Cpath d='M11.62 9.64984C11.19 9.99984 10.51 9.99984 10.08 9.64984L0 1.33984V12.5598C0 13.1198 0.46 13.5798 1.02 13.5798H20.69C21.25 13.5798 21.71 13.1198 21.71 12.5598V1.33984L11.62 9.64984ZM6.26 8.17984L1.51 12.6998C1.43 12.7798 1.32 12.8198 1.22 12.8198C1.11 12.8198 0.99 12.7798 0.91 12.6898C0.75 12.5198 0.76 12.2498 0.93 12.0898L5.67 7.55984C5.84 7.39984 6.11 7.39984 6.28 7.57984C6.44 7.74984 6.44 8.01984 6.26 8.18984V8.17984ZM20.8 12.6898C20.72 12.7798 20.6 12.8198 20.49 12.8198C20.38 12.8198 20.28 12.7798 20.2 12.6998L15.45 8.17984C15.28 8.01984 15.27 7.74984 15.43 7.56984C15.59 7.39984 15.87 7.38984 16.04 7.54984L20.79 12.0698C20.96 12.2298 20.97 12.4998 20.8 12.6698V12.6898Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1426_3168'%3E%3Crect width='21.71' height='13.57' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    display: block;
    margin-right: 8px;
    line-height: 1;
}

button[value="View / Print"]::before {
    content: url("data:image/svg+xml,%3Csvg width='20' height='18' viewBox='0 0 20 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1426_3171)'%3E%3Cpath d='M18.61 5.84H17.15V4.31C17.15 3.95 16.86 3.66 16.5 3.66H16.32V0.58C16.32 0.26 16.06 0 15.74 0H3.45C3.13 0 2.87 0.26 2.87 0.58V3.66H2.69C2.33 3.66 2.04 3.95 2.04 4.31V5.84H0.58C0.26 5.84 0 6.1 0 6.42V13.4C0 13.72 0.26 13.98 0.58 13.98H2.12L1.44 17.29C1.44 17.61 1.7 17.87 2.02 17.87H17.09C17.41 17.87 17.67 17.61 17.67 17.29L17.03 13.98H18.62C18.94 13.98 19.2 13.72 19.2 13.4V6.42C19.2 6.1 18.94 5.84 18.62 5.84H18.61ZM3.65 0.82H15.54V5.84H3.65V0.82ZM2.26 17.03L3.83 10.98H15.37L16.83 17.03H2.26ZM17.76 10.75H16.41L16.32 10.3C16.32 9.98 16.06 9.72 15.74 9.72H3.45C3.13 9.72 2.87 9.98 2.87 10.3L2.78 10.75H1.44V7.22H17.75V10.75H17.76Z' fill='white'/%3E%3Cpath d='M16.4602 8.97023C16.7302 8.97023 16.9502 8.75023 16.9502 8.48023C16.9502 8.21023 16.7302 7.99023 16.4602 7.99023C16.1902 7.99023 15.9702 8.21023 15.9702 8.48023C15.9702 8.75023 16.1902 8.97023 16.4602 8.97023Z' fill='white'/%3E%3Cpath d='M14.6502 8.97023C14.9202 8.97023 15.1402 8.75023 15.1402 8.48023C15.1402 8.21023 14.9202 7.99023 14.6502 7.99023C14.3802 7.99023 14.1602 8.21023 14.1602 8.48023C14.1602 8.75023 14.3802 8.97023 14.6502 8.97023Z' fill='white'/%3E%3Cpath d='M13.7501 2.95996H5.31006V3.26996H13.7501V2.95996Z' fill='white'/%3E%3Cpath d='M13.7501 4.31006H5.31006V4.62006H13.7501V4.31006Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1426_3171'%3E%3Crect width='19.19' height='17.86' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    display: block;
    margin-right: 8px;
    line-height: 1;
}

.email-button {
    margin-right: 4px;
}

.button-icon {
    padding-right: 8px;
}

.view-print-button {
    margin-left: 4px;
}

@media (max-width: 768px) {
    .view-print-button {
        padding: 20px 0;
    }
}


/* ============================================================ */
/* === Direct Links =========================================== */
/* ============================================================ */

.direct-links-card {
    height: calc(100% - 14px);
    margin: unset !important;
}

/* NOTE: ".direct-links-background" appeared twice with identical
   declarations; collapsed. */
.direct-links-background {
    background: #1a5632;
    color: white;
    margin-top: -20px;
    margin-left: -20px;
    padding: 16px 12px;
    width: calc(100% + 45px) !important;
}

/* NOTE: ".direct-links-list" appeared twice with identical declarations;
   collapsed. */
.direct-links-list {
    text-decoration: underline;
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}

/* NOTE: ".direct-links-list-item::before" appeared twice with identical
   declarations; collapsed. */
.direct-links-list-item::before {
    content: "";
    border-color: transparent #7cc600;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 1.1em;
    position: relative;
}

@media (max-width: 768px) {
    .desktop-direct-link-container {
        display: none;
    }
}

@media (min-width: 768px) {
    .mobile-direct-link-container {
        display: none;
    }
}


/* ============================================================ */
/* === Vehicles =============================================== */
/* ============================================================ */

.vehicle-insured-text {
    font-family: "futura-pt", sans-serif;
    color: #1a5632;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 16px 42px 8px 42px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .vehicle-insured-text {
        padding: 16px 24px 8px 24px;
    }
}

.vehicle-container {
    display: flex;
    flex-direction: column;
}

.vehicle-item {
    flex-direction: column;
    padding-top: 0px;
}

.vehicle-count {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 12px 0;
    font-family: "futura-pt", sans-serif;
    color: #1a5632;
    padding-left: 8px;
    font-size: 1.25rem;
}

.vehicle-make-model-container {
    width: calc(100% + 40px);
    padding: 8px 20px;
    background: #e9e9e9;
}

.vehicle-make-model {
    color: #231f20;
    padding-left: 36px;
}

.vehicle-logo-driver-vin {
    display: grid;
    width: 100%;
    grid-template-columns: 1.5fr 1.5fr 2fr;
    padding: 32px 0;
}

@media (min-width: 768px) {
    .vehicle-logo-driver-vin {
        grid-template-columns: 1.5fr 1.5fr 3fr;
    }
}

.vehicle-logo {
    display: flex;
    justify-content: center;
}

.vehicle-driver {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #231f20;
}

.vehicle-vin-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700;
    color: #231f20;
}

.vehicle-vin {
    font-weight: 500;
    word-break: break-word;
}


/* ============================================================ */
/* === Page - Documents ======================================= */
/* ============================================================ */

/* The Documents page renders an empty <span> alongside each label, one per
   document type:
     <span class="icon-document-application"></span>
     <span class="icon-document-declaration-pages"></span>
     <span class="icon-document-id-cards"></span>
     <span class="icon-document-policy-packet"></span>
     <span class="icon-document-policy-booklet"></span>
   These rules paint the same dark icon for all variants and lay the icon out
   inline with the document description. All selectors are scoped under
   .document-item so nothing leaks to other pages. */

/* Lay out the icon + label column as a flex row so the icon and the
   "card-label-sub" text sit on the same baseline instead of stacking. */
.document-item .col-sm-5 {
    display: flex;
    align-items: center;
}

/* Paint the icon background on the empty <span>. flex-shrink: 0 keeps the
   icon at full size if the label text grows. */
.document-item [class^="icon-document-"],
.document-item [class*=" icon-document-"] {
    display: inline-block;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    background-image: url(../images/icon-documents-dark.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Remove the default bottom margin so the label aligns vertically centered
   with the icon when both are flex children. */
.document-item .card-label-sub {
    margin-bottom: 0;
}


/* ============================================================ */
/* === Page - Account Summary ================================= */
/* ============================================================ */

.ss-content_wrapper {
    display: flex;
    flex-wrap: wrap;
}

.ss-late-fee_wrapper {
    display: flex;
    justify-content: space-between;
    font-family: "Lato", sans-serif;
    color: #1a5632;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 400;
}

.ss-cancel-fee_wrapper {
    display: flex;
    justify-content: space-between;
    font-family: "Lato", sans-serif;
    color: #1a5632;
    font-size: 1.1rem;
    text-transform: uppercase;
    font-weight: 400;
}

.ss-pay-bill_wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 32px;
}

@media (min-width: 768px) {
    .ss-pay-bill_wrapper button {
        max-width: 260px;
    }
}

.upcoming-payment-padding {
    padding: 6px;
}

.upcoming-payment-list {
    padding-top: 16px;
}

    .upcoming-payment-list .outer-row:nth-child(2n + 2) {
        background-color: #e9e9e9;
        margin-left: -40px;
        padding-left: 45px;
        margin-right: -40px;
        padding-right: 45px;
    }

.ss-payment-schedule-header_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .ss-payment-schedule-header_wrapper {
        flex-direction: row;
    }
}

.ss-payment-schedule-header_wrapper .card-label,
.ss-payment-schedule-header_wrapper .ss-schedule-button {
    width: 100%;
}

.lowest-down-wrapper {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
}

/* ============================================================ */
/* === Contact Us card (SelfService.Master) =================== */
/* ============================================================ */

/* NOTE: DIV_ContactCard sits under the page content on logged-in pages. Its three
   tiles use the marketing site Contact page's labels (Click, Call, Come by): one
   row from 768px up, stacked full-width tiles on phones. The stacking and the 8px
   gap between stacked tiles come from the existing card grid rules
   (.col-12 + .col-12 in l2d-goauto-bootstrap-overrides.css). */
#main-content-container .ss-contact-card {
    margin-top: 24px;
}

.ss-contact-way {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid #dfe9da;
    border-radius: 10px;
    background-color: #f6faf4;
    color: #1a5632;
    text-decoration: none;
}

    .ss-contact-way:hover,
    .ss-contact-way:focus {
        border-color: #4c9c2e;
        background-color: #eaf4e6;
        color: #1a5632;
        text-decoration: none;
    }

.ss-contact-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #4c9c2e;
    color: #ffffff;
}

    .ss-contact-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.ss-contact-kind {
    display: block;
    font-family: 'futura-pt', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #5f7d66;
}

.ss-contact-value {
    display: block;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.4;
    color: #4c9c2e;
}

/* NOTE: between 768px and 991px each tile is only 196px wide, so the full size
   tile wraps every value, splitting the phone number at a hyphen. The smaller
   padding, icon and text keep the phone number and "Find a location" on one line;
   "Send a secure message" takes two. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ss-contact-way {
        gap: 10px;
        padding: 12px;
    }

    .ss-contact-icon {
        width: 36px;
        height: 36px;
    }

        .ss-contact-icon svg {
            width: 18px;
            height: 18px;
        }

    .ss-contact-value {
        font-size: 15px;
    }
}