/* Minification failed. Returning unminified contents.
(6,17): run-time error CSS1039: Token not allowed after unary operator: '-ads-cool-grey-900'
(32,28): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(33,24): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(37,24): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(38,17): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(71,17): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(76,21): run-time error CSS1039: Token not allowed after unary operator: '-dark'
(81,17): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(85,20): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(89,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary'
(93,17): run-time error CSS1039: Token not allowed after unary operator: '-danger'
(97,20): run-time error CSS1039: Token not allowed after unary operator: '-danger'
(101,17): run-time error CSS1039: Token not allowed after unary operator: '-ads-cool-grey-900'
(106,28): run-time error CSS1039: Token not allowed after unary operator: '-ads-green-700'
(110,28): run-time error CSS1039: Token not allowed after unary operator: '-ads-electric-blue-50'
(111,17): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(135,28): run-time error CSS1039: Token not allowed after unary operator: '-ads-cool-grey-50'
(136,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(137,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(146,17): run-time error CSS1039: Token not allowed after unary operator: '-ads-cool-grey-900'
(169,17): run-time error CSS1039: Token not allowed after unary operator: '-danger'
(173,17): run-time error CSS1039: Token not allowed after unary operator: '-ads-cool-grey-900'
(194,28): run-time error CSS1039: Token not allowed after unary operator: '-ads-cool-grey-50'
(208,17): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(273,33): run-time error CSS1039: Token not allowed after unary operator: '-bs-success'
(278,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(285,28): run-time error CSS1039: Token not allowed after unary operator: '-addon-banner-border-color'
(310,22): run-time error CSS1039: Token not allowed after unary operator: '-addon-banner-border-color'
(329,28): run-time error CSS1039: Token not allowed after unary operator: '-addon-banner-border-color'
(353,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-success'
(355,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-success'
(375,22): run-time error CSS1039: Token not allowed after unary operator: '-bs-success'
(377,24): run-time error CSS1039: Token not allowed after unary operator: '-bs-success'
(385,22): run-time error CSS1039: Token not allowed after unary operator: '-bs-danger'
(386,24): run-time error CSS1039: Token not allowed after unary operator: '-bs-danger'
 */
html {
    font-size: 14px;
}

body {
    color: var(--ads-cool-grey-900);
}

h1, h2, h3, h4, h5 {
    color: #000;
}

.form-control {
    border-radius: 2px;
}

.input-group .form-control {
    border-left: none;
    border-radius: 2px;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-radius: 2px;
}

.input-group-text {
    background-color: #fff;
    border-radius: 2px;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
}

.form-control {
    font-size: 16px;
}

.display-none {
    display: none !important;
}

.form-check-input {
    height: 18px;
    width: 18px;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

.smaller {
    font-size: .75em;
}

.rounded-2 {
    border-radius: 0.66rem !important;
}

a.no-href {
    color: var(--dark);
    text-decoration: none;
}

    a.no-href:hover, a.no-href:focus {
        color: var(--dark);
    }

/* Bootstrap text colour overrides - note !important needed to override boostrap css for these */
.text-primary {
    color: var(--primary) !important;
}

    .text-primary svg {
        fill: var(--primary);
    }

.text-secondary {
    color: var(--secondary) !important;
}

.text-danger {
    color: var(--danger) !important;
}

    .text-danger svg {
        fill: var(--danger);
    }

.text-dark {
    color: var(--ads-cool-grey-900) !important;
}

/* Bootstrap background colour overrides - note !important needed to override boostrap css for these */
.bg-success {
    background-color: var(--ads-green-700) !important;
}

.text-bg-primary-light {
    background-color: var(--ads-electric-blue-50);
    color: var(--primary);
    border-radius: 3px;
}

/* Media query to target < sm screen sizes */
@media (max-width: 575.98px) {
    .px-xs-0 {
        padding-left: 0;
        padding-right: 0;
    }
}

.realex {
    width: 100%;
    height: 650px;
}

.worldnet {
    width: 100%;
    height: 700px;
}

/* Bootstrap Tooltip override */
.tooltip-inner {
    background-color: var(--ads-cool-grey-50);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

body {
    font-family: "Open Sans", sans-serif;
    background-color: #e5e5e5;
}

h1, h2, h3, h4, h5 {
    color: var(--ads-cool-grey-900);
}

@media (min-width: 575.98px) {
    #SelfServiceLogin .container {
        width: 442px;
    }
}

.card {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

#SelfServiceLogin .card .card-body {
    padding: 2rem;
}

span.LV_validation_message.LV_invalid {
    width: 100%;
    left: 0;
    position: relative;
    margin-top: 5px;
    color: var(--danger);
}

small {
    color: var(--ads-cool-grey-900);
}

#UpdateContactDetailsCard, div[id$="UpdateDetailsFooter_FooterCard"] {
    max-width: 794px;
}

dt {
    font-weight: normal;
}

dd {
    font-weight: bold;
    font-size: 16px;
}

#ConfirmRenewalModal .modal-footer {
    display: block;
}

div[id$="RenewalDiv"] .card {
    border: 2px solid var(--ads-cool-grey-50);
    box-shadow: none;
}

.breadcrumb .aspNetDisabled {
    cursor: not-allowed;
}

    .breadcrumb .aspNetDisabled:hover {
        text-decoration: none;
    }

.breadcrumb-item a {
    text-decoration: none;
    color: var(--primary) !important;
}

a.btn {
    color: #fff !important;
    text-decoration: none !important;
}

.insurer-logo-name {
    height: 30px;
}

.tooltip-inner {
    text-align: left;
}

/* Price-change fade — fades to 0, JS swaps text mid-fade, then fades back in.
   Opacity isn't motion, so no prefers-reduced-motion gate is needed. */
.js-amount, .js-payment-plan {
    transition: opacity .25s ease;
}
.js-amount.is-changing, .js-payment-plan.is-changing {
    opacity: 0;
}

/* On mobile, lay out the policy card header as a two-column grid so the product
   icon sits to the left across both rows and the renewal/due date stacks
   directly below the policy number rather than dropping under the icon. */
@media (max-width: 575.98px) {
    .policy-header-row {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: .5rem;
        row-gap: .15rem;
        align-items: center;
    }
    .policy-header-row .product-icon-header {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }
    .policy-header-row > h2 { grid-column: 2; }
    .policy-header-row .policy-header-date {
        grid-column: 2;
        margin-left: 0 !important;
        width: auto;
    }
}

/* Product-line icon in the policy card header */
.product-icon-header {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-icon-header svg {
    width: 100%;
    height: 100%;
}

/* Already-renewed policy — green left bar marks "completed/renewed" status. */
.renewed-policy-strip {
    border-left: 4px solid var(--bs-success);
}

/* Promotional banner addon */
:root {
    --addon-banner-border-color: #b08600; /* WCAG 1.4.11: 4.0:1 against white card body */
}
.addon-banner {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem 1.1rem;
    border: 1px solid var(--addon-banner-border-color);
    border-radius: 8px;
    position: relative;
    margin-top: 12px;
}
.addon-banner-icon,
.addon-banner-body,
.addon-banner-toggle { align-self: center; }
@media (max-width: 575.98px) {
    .addon-banner {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: .9rem;
        row-gap: .5rem;
        align-items: center;
    }
    .addon-banner-icon { grid-row: 1 / span 2; }
    .addon-banner-body,
    .addon-banner-toggle { grid-column: 2; }
    .addon-banner-toggle { justify-content: space-between; }
}
.addon-banner-recommended {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--addon-banner-border-color);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 999px;
    letter-spacing: .04em;
}
.addon-banner-icon {
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b67400;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid var(--addon-banner-border-color);
}
/* translateY nudges the text block down to compensate for the bold name's
   visual weight dominating the line-box centre. Using transform (not margin
   or padding) keeps the row height unchanged, so the icon and toggle — which
   are already aligned correctly — stay put. */
.addon-banner-body { flex: 1; min-width: 0; transform: translateY(4px); }
.addon-banner-name { font-weight: 700; }
.addon-banner-description { color: #6c757d; font-size: .85rem; margin-top: .15rem; }
.addon-banner-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}
.addon-banner-cost { font-weight: 700; }
.addon-banner .add-btn {
    /* Stack the three swap labels in the same grid cell so the button always
       sizes to the widest one. Prevents the cost label from being pushed when
       the label changes between Add / Added / Remove. */
    display: inline-grid;
    grid-template-areas: "label";
    align-items: center;
    justify-items: center;
    border: 1px solid var(--bs-success);
    background: #fff;
    color: var(--bs-success);
    padding: .4rem .9rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.addon-banner .add-btn:hover {
    background: #d1e7dd;
    border-color: #146c43;
    color: #146c43;
}
.addon-banner .add-btn .swap-default,
.addon-banner .add-btn .swap-added,
.addon-banner .add-btn .swap-hover { grid-area: label; }
.addon-banner .add-btn .swap-added,
.addon-banner .add-btn .swap-hover { visibility: hidden; }
.addon-banner.added .add-btn {
    background: var(--bs-success);
    color: #fff;
    border-color: var(--bs-success);
}
.addon-banner.added .add-btn .swap-default { visibility: hidden; }
.addon-banner.added .add-btn .swap-added   { visibility: visible; }
/* Hover-to-remove on the added state. Mirrored on :focus-visible so a keyboard
   user landing on the "Added" button sees the Remove affordance (WCAG SC 2.4.7). */
.addon-banner.added .add-btn:hover,
.addon-banner.added .add-btn:focus-visible {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
}
.addon-banner.added .add-btn:hover .swap-added,
.addon-banner.added .add-btn:focus-visible .swap-added { visibility: hidden; }
.addon-banner.added .add-btn:hover .swap-hover,
.addon-banner.added .add-btn:focus-visible .swap-hover { visibility: visible; }
/* Keyboard focus ring (WCAG 2.4.7) */
.addon-banner .add-btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}
/* Skip to Main Content Link Styles */
#skipToMainContent {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 15px;
    z-index: 9999;
    text-decoration: none;
    font-size: 14px;
    transition: top 0.3s ease;
    text-decoration: none;
}

    #skipToMainContent:focus {
        top: 5px;
        outline: 2px solid #fff;
    }

/* Fieldset and Legend Styles for Multiple Input Groups */
.input-group-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.input-group-legend {
    display: block;
    padding: 0;
    margin-bottom: 5px;
    font-size: inherit;
    line-height: inherit;
    border: 0;
    font-weight: normal;
    background-color: transparent !important;
    color: inherit !important;
    text-shadow: none !important;
}

legend h2 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: none;
}

#ajax-status-alert {
    display: none !important;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
}

.ajax-status-alert__text + .ajax-status-alert__icon {
    display: inline-block;
    margin-left: 5px;
}

.LV_validation_message {
    margin-top: 20px;
    position: absolute;
    left: 290px;
}

.LV_valid {
    bord: #00CC00;
}

.LV_invalid {
    color: #CC0000;
}

.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
    border: 1px solid #409C40 !important;
}

.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
    border: 1px solid red !important;
}

.Image {
    margin-bottom: -3px;
    height: 15px;
    width: 20px;
}

.ImageDDL {
    margin-bottom: -2px;
    height: 15px;
    width: 20px;
}