html, body { min-height: 100vh; background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); }

/* header section */
.header {

}
.header-image {
    min-width: 200px;
    width: 200px;
}
.header-title {

}
@media screen and (min-width: 768px) {
    .header-image { width: 220px; }
    .header-title { font-size: calc(1.475rem + 2.7vw); }
}

/* accordion styling */
.accordion {
    --bs-accordion-btn-bg: #eee;
    --bs-accordion-active-bg: #fff;
}
.accordion-item {
    background: none;
    border-bottom: none !important;
}
.accordion-button {
    border: 3px solid #999;
    border-radius: 2px !important;
    transition: all 0.2s ease-in-out;
}
.accordion-button:not(.collapsed) {
    border-width: 2px;
    border-color: #000;
}
.accordion-button .h3 { font-weight: normal; }
.accordion-button:not(.collapsed) .h3 { font-weight: bold; }
.accordion-form, .accordion-bg {
    background-color: #fff;
    padding-bottom: 1rem;
    box-shadow: 1px 4px 6px rgba(0,0,0,0.3);
}
.accordion-invalid > .accordion-button { border-color: var(--red); }
.accordion-valid > .accordion-button { border-color: var(--green); }

#autosave-prompt { cursor: pointer; }

/* autocomplete tweaks */
.bootstrap-autocomplete a.dropdown-item { font-size: 1.25rem; cursor: pointer; }

/* align reCAPTCHA with bootstrap layout */
.g-recaptcha > div { margin-left: auto; margin-right: auto; }
@media screen and (min-width: 768px) {
    .g-recaptcha > div { margin-right: unset; }
}
@media screen and (min-width: 992px) {
    .g-recaptcha > div { margin-left: auto; }
}

.card-header, .card-footer {
    border: none;
    background: none;
}

.form-floating > label {
    padding-top: 0.75rem !important;
}

.form-floating > input:placeholder-shown + label {
    padding-top: 0.8rem !important;
    padding-left: 1.2rem !important;
    font-size: 1.25rem !important;
}
.form-floating > input:not(:placeholder-shown) + label,
.form-floating > input:focus + label {
    padding-top: 0.75rem !important;
    padding-left: 1rem !important;
    font-size: 1rem !important;
}

.form-floating > input:not(:placeholder-shown) + label > i.bi,
.form-floating > input:focus + label > i.bi,
.form-floating > div.bootstrap-autocomplete + label > i.bi { display: none; }

/* radio card styles */
input.card-input-element + .card {
    border: none;
    outline: 1px solid #666;
    box-shadow: 3px 5px 5px #ccc;
    box-shadow: 3px 5px 5px rgba(0,0,0,0.2);
    user-select: none;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
input.card-input-element:hover + .card {
    outline-width: 2px;
    outline-color: #6dd22c;
    box-shadow: 1px 3px 12px #777;
    box-shadow: 1px 3px 12px rgba(0,0,0,0.6);
    transform: scale(1.01);
}
input.card-input-element:checked + .card {
    outline-width: 4px;
    outline-color: #53bd10;
    box-shadow: 1px 3px 12px #333;
    box-shadow: 1px 3px 12px 2px rgba(0,0,0,0.8);
    transform: scale(1.02);
}

.radio-card-status {
    width: 24px;
    height: 24px;
    background: transparent;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #092a6e;
    transition: all 0.1s ease-in-out;
}
.radio-card-status.active { background: #092a6e; }

.ugps-addon-tc .radio-card-status {
    display: block !important;
    opacity: 1 !important;
}
.ugps-addon-tc .radio-card-status.active {
    background: var(--wire3-green);
    box-shadow: 0 0 0 3px var(--wire3-green);
}
.ugps-addon-price p {
    margin-top: 4px !important;
}

.check-card-status {
    position: relative;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px #092a6e;
    margin-bottom: -3px;
    transition: all 0.1s ease-in-out;
}
.check-card-status .check {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(4);
    color: #092a6e;
    opacity: 0;
    transition: all 0.1s ease-in-out;
}
.check-card-status.active .check { opacity: 1; }

/* Offer styles */
.plan-image { width: 100%; height: 80px; }
.addon-image { width: 50px; height: 50px; }

/* offer banner */
.banner-wrapper {
    position: relative;
    margin-left: calc(-1rem - 10px) !important;
    margin-right: calc(-1rem - 10px) !important;
    z-index: 100;
    overflow: visible;
}
.banner-green { background: #3fab0e !important; }
.banner-wrapper::before, .banner-wrapper::after {
    position: absolute;
    content: '';
    top: 10px;
    z-index: -1;
    width: 20px;
    height: 100%;
    background: #2e8c03;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);
}
.banner-wrapper::before { left: -20px; }
.banner-wrapper::after { right: -20px; transform: scaleX(-1); }
.banner-text {
    text-shadow: 0 0 15px #333;
    text-shadow: 0 0 15px rgba(0,0,0,0.7);
    letter-spacing: 1px;
}
.banner-green > .banner-text { color: white !important; }

/* offer ribbon */
.ribbon-wrapper-green {
    width: 125px;
    height: 128px;
    overflow: hidden;
    position: absolute;
    top: -8px;
    right: -4px;
}

.ribbon-green {
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    color: white !important;
    text-align: center;
    text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: 1px;
    top: 29px;
    width: 160px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8dc63f), to(#a0de4c));
    background-image: -webkit-linear-gradient(top, #8dc63f, #a0de4c);
    background-image:    -moz-linear-gradient(top, #8dc63f, #a0de4c);
    background-image:     -ms-linear-gradient(top, #8dc63f, #a0de4c);
    background-image:      -o-linear-gradient(top, #8dc63f, #a0de4c);
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
    box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
    -webkit-backface-visibility: hidden; /* http://stackoverflow.com/a/6898097 */
}

.ribbon-green:before, .ribbon-green:after {
    content: "";
    border-top:   3px solid #6e8900;
    border-left:  3px solid transparent;
    border-right: 3px solid transparent;
    position:absolute;
    bottom: -3px;
}

.ribbon-green:before {
    left: 0;
}
.ribbon-green:after {
    right: 0;
}

.contact-info-field { width: 100%; }
@media screen and (min-width: 992px) {
    .contact-info-field { width: 50%; }
}
#edit-contact-info, #save-contact-info, #cancel-contact-info { cursor: pointer; }

.confirmation-display { margin: 0 !important; }
.charge-amount, .discount-amount { font-weight: bold; }
.discount { font-weight: normal; text-decoration: line-through; }

.spinner-border-md {
    --bs-spinner-width: 1.5rem;
    --bs-spinner-height: 1.5rem;
    margin-bottom: -2px;
}

/* Checkout */
/* fix CB hosted page being weird @ viewports < 629px wide */
@media screen and (min-width: 629px) {
    #embed {
        max-height: 520px;
    }
    #embed > iframe.finishedLoading {
        min-height: 701px;
    }
}

#embed > iframe {
    position: relative;
    min-height: 520px;
    overflow-y: hidden;
}

/* Loader */
.loader {
    border: 16px solid #646869; /* loader circle */
    border-top: 16px solid #111; /* loader circle filled */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    box-shadow: 0px 0px 15px 2px #222;
    box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.4);
}
.loading-hidden { display: none !important; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-animate-right { padding-left: 0.5rem; }
.btn-success .icon-animate-right { animation: bounce-right 1.75s infinite; }

@keyframes bounce-right {
    0%, 20%, 50%, 80%, 100% { padding-left: 0.5rem; }
    40% { padding-left: 1.2rem; }
    60% { padding-left: 0.8rem; }
}

/* first month div margin */
.order-confirm-first-month { margin-top: 20px; }
.order-confirm-first-month + .order-confirm-subtotal { margin-top: 0 !important; }

/* tos acknowledge + invalid */
.tos-link {
    text-decoration: none;
    transition: 0.2s all ease-in-out;
}
.tos-link:hover {
    font-weight: bold;
    text-decoration: underline;
}
#tos-acknowledge, #tos-acknowledge + label { transition: 0.2s all ease-in-out; }
#tos-acknowledge.is-invalid {transform: scale(1.3);}
#tos-acknowledge.is-invalid + label { transform: scale(1.04); margin-left: 30px; color: #e74c3c !important; }


/* Fix scrolling on autocomplete dropdown */
.bootstrap-autocomplete { max-height: 250px; overflow-y: auto; }

/* fcc compliance */
#fcc-compliance-modal object { min-height: 680px !important; }
#fcc-compliance-wrapper object { min-height: 495px !important; }

/* promos */
.ugps-addon.promo div.card.card-body {
    border-top-color: #feb813 !important;
}
.ugps-addon.promo input.card-input-element:checked + .card {
    border-top-color: #53bd10 !important;
}
.ugps-addon.promo img.addon-image {
    width: 74px !important;
    height: 52px !important;
}