/*///////*/
/* FORMS */
/*///////*/

.form-container {
    display: inline-block;
    border-radius: 0px 38px 38px 38px;
    text-align: left;
}

.confirm-subscription .form-container {
    max-width: calc(300px + 3vw);
}

.form-container .field-group {
    display: flex;
    flex-direction: column;
    /* margin-bottom: 20px; */
    margin-bottom: 10px;
    width: calc(260px + 3vw);
    max-width: 90vw;
}

.form-container label {
    margin-left: 4px;
    margin-bottom: 0.2rem;
}

.form-container .btn-grokkoli-primary {
    font-size: 20px;
    float: right;
    margin-right: 2px;
}
.confirm-subscription .form-container p {
    font-size: 0.92rem;
}

.form-container .invalid-feedback {
    margin-left: 2px;
    font-size: 0.8rem;
    color: var(--main-orange);
}

.form-container .text-muted {
    margin-left: 2px;
}

.form-container .form-control {
    height: calc(1.75em + .75rem + 2px);
    padding: 0.4rem 1rem;
    font-size: 1rem;
    border-radius: 20px 20px 20px 20px;
    border: none;
}

.form-control.is-invalid {
    border: 1px solid var(--main-orange);
    background-image: none;
}
.form-control .error {
    color: var(--main-orange);
}

/* Guardian-consent attestation above "Add Learner" (educators/paraprofessionals).
   display:block has to out-specify `.form-container .field-group`'s flex above (it
   keeps that rule's width/margin) so the box can float: as a float it only shortens
   the first line of the label, letting the rest of the sentence run the full column
   width instead of sitting in a narrow second column. The display:block on
   .invalid-feedback is the same bootstrap override documented at the
   #cancellation-form rules further down this file. */
.form-container .field-group.consent-check {
    display: block;
}
.consent-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    float: left;
    margin: 2px 8px 0 0;
}
.consent-check input[type="checkbox"].is-invalid {
    outline: 2px solid var(--main-orange);
    outline-offset: 2px;
}
/* Overrides the 10px margin-top .add-learner-profile .field-group > label gives every
   other field's label, which here would drop the text below the box it labels. */
.add-learner-profile .field-group.consent-check > label {
    display: block;
    font-weight: normal;
    font-size: 0.85rem;
    margin-top: 0;
    margin-bottom: 0;
}
.consent-check .invalid-feedback {
    display: block;
    clear: both;
    margin-top: 8px;
}
/* Heliomath's caption grey (see --text-caption in heliomath_tokens.css); Grokkoli has
   no --gray-500, so it falls back to the grey its PIN subtext already uses. The
   bootstrap .text-muted utility is !important, so this element does not carry it. */
.consent-check__note {
    clear: both;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--gray-500, var(--main-dark-grey));
}

.slider-selector {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-left: 2px;
    height: 40px;
}
input[type=range] {
    position: relative;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    background-color: var(--main-medium-steel-grey);
	height: 4px;
	border-radius: 2px;
	width: calc(205px + 3vw);
	margin-right: 15px;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 38px;
	color: white;
    background: linear-gradient(to bottom, #4060d8, #0020b0);
    border-radius: 7px;
}
output {
    font-weight: 900;
    font-size: 20px;
}

#id_learning_goal label, #id_learning_disabilities label, #id_accommodations label {
    align-items: flex-start;
}

#id_learning_goal, #id_learning_disabilities, #id_accommodations {
    flex-direction: column;
}

#id_learning_goal input, #id_learning_disabilities input, #id_accommodations input {
    margin-right: 10px;
    margin-top: 5px;
}
@media screen and (min-width: 830px) {
    #id_learning_goal label, #id_learning_disabilities label, #id_accommodations label {
        margin-bottom: 0;
    }
}

.single-option-select-field {
    clear: both;
    list-style: none;
    margin: 0 4px 0 10px;
    padding: 0;
}
.pilot-inquiry-area .single-option-select-field {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 7px 4px 7px 10px;
    border-radius: 20px;
    min-width: 100px;
    background-color: rgb(255, 255, 255, 0.4);
    border: none;
}
.single-option-select-field label {
    display: flex;
    float: left;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: -5px;
    /* font-weight: 900; */
}

.single-option-select-field li {
    margin-left: 0px;
    margin-right: 10px;
}
.single-option-select-field li label {
    font-weight: normal;
    font-size: 13px;
}
.single-option-select-field li input {
    margin: 4px 10px;
    float: left;
}

/*///////////*/
/* KEY FORMS */
/*///////////*/

.login-area, .signup-area, .start-free-trial-area, .payment-details-area, .pilot-inquiry-area, .onboarding-survey-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(96vh - 6.25rem);
    width: 100vw;
    margin: 0;
    padding-top: calc(25px + 2vh);
    padding-bottom: calc(25px + 2vh);
}
.signup-content-area {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    padding-top: 3.5vh;
    max-width: 800px;
    width: 80vw;
}
/* @media screen and (min-width: 0px) {
    .login-area, .signup-area, .start-free-trial-area, .payment-details-area, .pilot-inquiry-area {
        min-height: calc(96vh - 6.25rem);
    }
}
@media screen and (min-width: 400px) {
    .login-area, .signup-area, .start-free-trial-area, .payment-details-area, .pilot-inquiry-area {
        min-height: calc(96vh - 6.25rem);
    }
} */

.login-area h2, .signup-area h2, .payment-details-area h2, .start-free-trial-area h2, .pilot-inquiry-area h2,
.login-area h3, .signup-area h3, .payment-details-area h3, .start-free-trial-area h3, .pilot-inquiry-area h3,
.login-area p, .signup-area p, .payment-details-area p, .start-free-trial-area p, .pilot-inquiry-area p, .signup-area li {
    color: white;
}
.login-area a, .login-area p, .login-area p a {
    margin-top: 8px;
    color: white;
    opacity: 0.5;
}
.login-area a:hover {
    opacity: 0.65;
}
.login-area p, .signup-area p, .payment-details-area p {
    max-width: 300px;
    margin-left: 4px;
    margin-bottom: 30px;
}

.signup-area .benefits-area {
    text-align: left;
    max-width: 380px;
    margin-right: calc(20px + 3vw);
    margin-bottom: calc(15px + 2vw);
}
@media screen and (max-width: 740px) {
    .signup-content-area {
        flex-direction: column;
        width: unset;
    }
    .signup-area .benefits-area {
        max-width: 320px;
        margin: 0;
    }
    .signup-area .benefits-area ul {
        display: none;
    }
}
.signup-area .benefits-area h2, .signup-area .benefits-area li, .login-area h2, .onboarding-survey-area h2 {
    color: var(--main-mint-green);
    text-shadow: 3px 2px 20px #004090;
    max-width: 450px;
}
.signup-area .benefits-area h2 {
    opacity: 0.9;
    font-size: calc(1.55rem + 0.95vw);
}
.signup-area .benefits-area li {
    font-size: calc(0.8rem + 0.6vw);
    margin-top: 50px;
    opacity: 0.8;
    text-shadow: 3px 2px 20px #001050;
}
.signup-area .benefits-area li::marker {
    content: "✓ ";
    content: "★ ";
    color: var(--main-gold);
}
.signup-area .form-container .btn-grokkoli-primary {
    font-size: 23px;
}
.signup-area .form-selection {
    display: flex;
    margin-bottom: 15px;
}
.signup-area .form-tab {
    padding: 0.4em 1em;
    margin-right: 10px;
    border-radius: 30px;
    /* background-color: #304050; */
    background-color: rgba(255, 255, 255, 0.4);
    color: var(--main-blue-hover);
    opacity: 0.85;
    font-size: 80%;
    font-weight: 900;
}
.signup-area .form-tab:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}
.signup-area .form-tab.active {
    /* background-color: var(--main-winter-green); */
    background-color: var(--main-blue-hover);
    color: white;
    cursor: default;
    opacity: 0.85;
}
.hidden {
    display: none;
}
.login-area h2 {
    margin-bottom: 30px;
    max-width: 730px;
}
.pilot-inquiry-area {
    padding-bottom: 100px;
}
.pilot-inquiry-area h1 {
    font-size: 42px;
    margin-top: 45px;
    color: var(--main-lemon);
}
.pilot-inquiry-area .single-option-select-field .single-option-select-field {
    margin-left: 20px;
    margin-right: 5px;
}
.pilot-inquiry-area h2 {
    color: var(--main-gold);
    font-size: 28px;
    max-width: 700px;
    width: 85vw;
    padding: 20px;
    text-align: center;
}
.pilot-inquiry-area h3 {
    font-size: 36px;
    width: calc(400px + 30vw);
    max-width: 90vw;
    margin-bottom: 85px;
}
.pilot-inquiry-area .account-access-form {
    max-width: 86vw;
}
.form-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
@media screen and (max-width: 755px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }
    .pilot-inquiry-area .form-row .terms-accepted-text {
        margin-bottom: 20px;
        margin-left: 10px;
    }
    .pilot-inquiry-area .btn-grokkoli-primary {
        margin-left: 10px;
    }
}
.form-row .field-group {
    margin-right: 10px;
    margin-left:  10px;
    max-width: calc(300px + 3vw);
    width: 40vw;
    min-width: 260px;
}
.product-selection-label {
    font-size: 130%;
    opacity: 0.6;
}
#product-selection {
    margin: 0 4px 0 0;
}
#product-selection label {
    font-size: 90%;
    line-height: 110%;
    margin-top: 10px;
    align-items: flex-start;
}
#product-selection label input {
    margin-top: 3px;
    margin-right: 10px;
}
#product-selection .product-info span {
    opacity: 0.8;
    font-size: 80%;
    color: var(--main-lemon);
}
#product-selection .product-info span strong {
    font-size: 125%;
}
.form-row .radio-select-field-group {
    margin-right: 10px;
    margin-left:  10px;
}
.form-row .terms-accepted-text {
    margin-bottom: 0;
}
.pilot-inquiry-area .btn-grokkoli-primary {
    color: white;
    margin-right: 10px;
}
.pilot-inquiry-area p {
    margin-bottom: 0;
    opacity: 0.7;
}

.credential-entry-container {
    background-color: rgb(255, 255, 255, 0.1);
    padding: 20px;
    display: inline-block;
    border-radius: 0px 38px 38px 38px;
    text-align: left;
    max-width: min(430px, 96vw);
}
.signup-area .credential-entry-container {
    margin-bottom: 20px;
}

.credential-entry-container label {
    color: white;
    font-size: calc(0.95rem + 0.15vw);
}
.credential-entry-container label.product-selection-label {
    font-size: 14px;
}
.credential-entry-container .invalid-feedback {
    color: var(--main-gold);
}
.credential-entry-container .text-muted {
    color: rgb(255, 255, 255, 0.4)!important;
}
.credential-entry-container .form-control {
    background-color: rgb(255, 255, 255, 0.4);
}

.credential-entry-container input {
    color: #001020;
}
.credential-entry-container #account-access-button,
.credential-entry-container #account-access-button-family,
.credential-entry-container #account-access-button-educator {
    color: white;
}
.credential-entry-container #account-access-button.disabled {
    opacity: 0.6;
}
.credential-entry-container.is-invalid {
    border: 1px solid var(--main-gold);
}
.credential-entry-container .error {
    color: var(--main-gold);
}
.credential-entry-container .form-control.is-invalid, .was-validated .form-control:invalid {
    border: 1px solid var(--main-gold);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.credential-entry-container #single-button {
    color: white;
}

.add-learner-profile .form-container .field-group {
    width: calc(240px + 3vw);
}

.terms-accepted-text {
    color: rgb(255, 255, 255, 0.4);
    margin-bottom: 20px;
    width: calc(260px + 3vw);
    font-size: 13px;
    padding-left: 2px
}

.legal-copy {
    max-width: 800px;
}
.terms-accepted-text a {
    color: var(--main-lemon);
}

/*//////////*/
/* PAYMENTS */
/*//////////*/

.gov-reimbursement h2 {
    width: 900px;
    max-width: 85vw;
}
.gov-reimbursement h4 {
    color: var(--main-lemon);
    margin-top: 40px;
    margin-top: calc(15px + 2vw);
}
.gov-reimbursement p {
    opacity: 0.7;
    font-size: calc(0.8rem + 0.3vw);
}
.state-programs-area {
    display: flex;
    justify-content: center;
    width: 70vw;
    max-width: 800px;
    text-align: left;
    margin-bottom: 50px;
}
.flexible-columns {
    display: flex;
    flex-direction: column;
    margin-right: 5vw;
    width: 30vw;
    max-width: 400px;
}
.flexible-columns:last-child {
    margin-right: 0;
}
@media screen and (max-width: 560px) {
    .state-programs-area {
        flex-direction: column;
        align-items: flex-start;
        max-width: 380px;
    }
    .flexible-columns {
        margin-right: none;
        width: 400px;
        max-width: 70vw;
    }
}
@media screen and (min-width: 1200px) {
    .flexible-columns {
        margin-right: 60;
    }
}


.free-trial-explainer-container {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 80vw;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.free-trial-explainer {
    display: flex;
    justify-content: center;
    max-width: 300px;
}
.free-trial-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--main-super-light-green);
    background-image: linear-gradient(var(--main-lemon), var(--main-lemon), var(--main-lemon), #285d83);
    width: 8px;
    height: 330px;
    border-radius: 10px;
    margin: 20px 35px 20px 30px;
}
.free-trial-timeline-notch {
    background-color: #408090;
    border: 4px solid var(--main-lemon);
    width: 22px;
    height: 22px;
    border-radius: 11px;
    margin-bottom: 88px;
}
.free-trial-text-area {
    margin-top: 18px;
    text-align: left;
    width: 50vw;
    max-width: 260px;
}
.free-trial-text-block {
    height: 110px;
}
.free-trial-explainer-container .free-trial-text-block p {
    max-width: 200px;
}
.free-trial-explainer-container h4 {
    color: var(--main-lemon);
    font-weight: 900;
    font-size: 1.3rem;
}
.free-trial-explainer-container p {
    font-size: calc(12px + 0.3vw);
    max-width: 260px;
}
@media screen and (min-width: 1300px) {
    .free-trial-explainer-container p {
        font-size: 16px;
    }
}

.payment-details-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px;
}
#payment-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 360px;
    max-width: fit-content;
    min-width: 300px;
    color: white;
}
#card-element {
    min-width: 300px;
    max-width: 420px;
    width: 80vw;
    padding: 18px 15px;
    border: 1px solid var(--main-steel-grey);
    background-color: white;
    border-radius: 25px;
    margin-bottom: 10px;
}
#payment-form .btn {
    align-self: center;
    min-width: 240px;
    max-width: 300px;
    width: calc(125px + 30vw);
    margin-top: 16px;
    margin-right: 0;
}

#payment-form .Tab--selected {
    border-color: var(--main-lemon);
    color: var(--main-lemon);
}
#payment-form .u-color-primary {
    color: var(--main-lemon);
}
#payment-form .error-message {
    max-width: 290px;
    color: var(--main-lemon);
}
.subscriptions-area {
    max-width: 750px;
}
.subscriptions-area .btn-grokkoli-secondary {
    font-size: 18px;
}
.subscriptions-area p {
    margin: 0 20px;
    min-width: 85px;
}
.settings-box {
    background-color: #fff;
}
.settings-box h6 {
    font-size: 15px;
    color: var(--main-dark-grey);
    font-weight: 300;
}
.product-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.6rem 1rem 2rem;
    border-top: 1px solid var(--main-light-grey);
    background-color: white;
}
@media screen and (max-width: 560px) {
    .product-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .product-cancel-pair {
        width: 100%;
        margin-top: 10px;
    }
    .subscriptions-area p {
        margin: 0;
    }
}
.product-card h5 {
    margin: 0;
    width: calc(125px + 40vw);
    max-width: 450px;
    font-size: 1.1rem;
    text-align: left;
}
.product-card.free-trial {
    background-color: var(--main-green);
    color: white;
}
.product-card.free-trial h4 {
    margin-bottom: 0;
}
.classwallet-msg {
    padding: 1.6rem 1.6rem 1.6rem 2rem;
    color: white;
    background-color: #0056ce;
}
.classwallet-msg a {
    color: #CCF6FF;
    opacity: 0.9;
    text-decoration: underline;
}
.classwallet-msg a:hover, .classwallet-msg a:active {
    opacity: 1;
}
.product-cancel-pair {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.confirm-cancellation-container, .confirm-reenabling-container {
    display: none;
    position: relative;
    background-color: var(--main-dark-blue);
    padding-right: 1.6rem;
    color: white;
}
.confirm-cancellation-container p, .confirm-reenabling-container p {
    margin-top: 20px;
    margin-bottom: 20px;
}
.confirm-cancellation, .confirm-reenabling {
    display: flex;
    align-items: flex-end;
}
@media screen and (max-width: 660px) {
    .confirm-cancellation, .confirm-reenabling {
        flex-direction: column;
    }
}
.confirmation-form-notch {
    position: absolute;
    top: -40px;
    right: 66px;
    height: 0px;
    width: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid var(--main-dark-blue);
    border-top: 20px solid transparent;
}
.confirm-cancellation p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: unset;
    margin: 1.4rem 1.6rem 1.4rem 2rem;
}
.confirm-cancellation .btn-grokkoli-small, .confirm-reenabling .btn-grokkoli-small {
    color: var(--main-dark-blue);
    border: none;
    margin-bottom: 1.6rem;
}
.confirm-cancellation .btn-grokkoli-small {
    background-color: var(--main-gold);
}
.confirm-cancellation .btn-grokkoli-small:hover {
    background-color: var(--main-lemon);
}
.confirm-reenabling .btn-grokkoli-small {
    background-color: var(--main-mint-green);
    color: var(--main-dark-blue) !important;
}
.confirm-reenabling .btn-grokkoli-small:hover {
    background-color: var(--main-light-green);
}

.settings-box h4 {
    font-size: calc(1.1rem + 0.5vw);
}

.plan-type {
    padding: 1.6rem 1.6rem 1.6rem 2rem;
}
.plan-type .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}
.plan-type .spacer {
    width: 2rem;
}
.plan-type h4, .plan-type h6 {
    margin-bottom: 0;
    min-width: 38px;
}
.plan-type .btn-grokkoli-small {
    background-color: white;
    border-color: white;
    margin-top: 0.4rem;
    margin-bottom: 1.4rem;
}
#alternate-plans {
    display: none;
    position: relative;
    padding-right: 1.6rem;
}
#alternate-plans #product-selection .product-info span {
    color: var(--main-dark-grey);
    font-size: 15px;
}
#alternate-plans .btn-grokkoli-small {
    color: white;
    background-color: var(--main-blue);
    border-color: var(--main-blue);
}
#alternate-plans-error,
.subscription-change-error {
    color: var(--main-orange);
    margin-bottom: 1rem;
}

/* Cancellation reason */

/* The popup is revealed by payments.js setting display:block; this holds it invisible
   for half a second first, so the checkmark on the Confirm button is seen before the
   popup takes over the screen. `both` fill is what makes the delay show the from-state
   rather than the finished one. */
@keyframes cancellation-popup-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#cancellation-form {
    animation: cancellation-popup-in 0.25s ease-out 0.5s both;
    filter: drop-shadow(10px 75px 150px #000);
    font-family: Arial, Helvetica, sans-serif;
}
#cancellation-form h3 {
    color: var(--main-winter-green);
    font-weight: 600;
}
#cancellation-form .btn-grokkoli-small {
    font-size: 1rem;
}
/* display:block overrides bootstrap's `.invalid-feedback{display:none}`, which otherwise
   hides these entirely. The container here is .hidden-feedback-form-container, so the
   .feedback-form-container rules in grokkoli_system.css never reach this form. */
#cancellation-form .invalid-feedback {
    display: block;
    font-size: 0.8rem;
    color: var(--main-orange);
    margin-bottom: 10px;
}
/* Hides the second step until the first one has saved, and the conditional "which
   program?" field until it is relevant. Plain display toggling driven by a JS class
   rather than :has(), which is above the supported browser floor. Both steps live in one
   form so all the fields serialise together; only the visible ones are being answered,
   and a hidden conditional field is cleared when it is hidden so it cannot submit a
   value against a choice it no longer belongs to. */
.cancellation-hidden {
    display: none;
}
/* Actions sit bottom-right of whichever step is showing. text-align rather than flex:
   both children are inline-block, so nothing here needs a new layout model. */
#cancellation-form .cancellation-step-actions {
    text-align: right;
    margin-top: 20px;
}
#cancellation-form .cancellation-skip-step {
    display: inline-block;
    margin-right: 20px;
    vertical-align: middle;
    color: var(--main-blue);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
}

.hidden-user-feedback-widget {
    z-index: 10;
    display: none;
    /* Absolute, with `top` set by payments.js to the current scroll position when the
       popup opens -- so it appears over the part of the page being looked at (the bug
       this replaced: a plain absolute popup opened at the top of the DOCUMENT, off screen
       for anyone cancelling the second or third learner on a phone).
       Deliberately NOT fixed with max-height + overflow: that gave the popup its own
       scrollbar, and on a short viewport the second step's Submit button ended up below
       the fold of that inner scroll. Absolute lets the popup be as tall as it likes and
       lets the ordinary page scroll reach the bottom of it -- one scrollbar, not two. */
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    width: 80vw;
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid var(--main-light-grey);
}

.hidden-feedback-form-container {
    padding: 25px;
}
.hidden-feedback-form-container h3 {
    font-size: calc(18px + 1vw);
}
.hidden-feedback-form-container textarea.form-control {
    height: 40px;
    margin-bottom: 20px;
}
.hidden-feedback-form-container label {
    font-weight: 900;
    margin-top: 10px;
    font-size: 1.1rem;
}
.multi-option-select-field label {
    font-weight: 300;
    margin-top: 0;
    font-size: 1rem;
}

.account_settings_password_button_container {
    font-size: 1em;
    margin-left: 2em;
}
.account_settings_password_button {
    border-radius: 3em;
    width: 6em;
    border: none;
    color: var(--main-purple);
    font-weight: 600;
}
.account_settings_password_input_container {
    justify-content: flex-end;
}
.account_settings_password_input {
    min-width: 8em !important;
    max-width: 8em !important;
}

.account_settings_description {
    font-size: 0.8em;
    padding: calc(0.5rem + 1vw) calc(1rem + 1.5vw);
    padding-bottom: 0;
    padding-top: 0;
}

.account_settings_message {
    color: var(--main-green);
    font-size: 0.7em;
}

.account_settings_message_error {
    color: var(--main-orange);
}

.button_disabled {
    visibility: hidden;
}

.pronunciation-controls {
    text-align: right;
}
.pronunciation-input-group {
    justify-content: flex-end;
    gap: 0.5em;
}
.pronunciation-input {
    min-width: 8em !important;
    max-width: 10em !important;
    border-radius: 0.25rem !important;
}
.pronunciation-alphabet {
    min-width: 6em !important;
    max-width: 7em !important;
    flex: 0 0 auto;
    border-radius: 0.25rem !important;
}
.pronunciation-button-container {
    font-size: 1em;
    display: flex;
    gap: 0.5em;
}
.pronunciation-preview-btn {
    background-color: var(--main-medium-steel-grey);
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 5px;
}
.pronunciation-volume-icon {
    width: 1.2em;
    height: 1.2em;
    color: var(--main-blue);
}
.pronunciation-preview-btn:hover .pronunciation-volume-icon {
    color: var(--main-blue-hover);
}
.pronunciation-preview-btn:disabled .pronunciation-volume-icon {
    opacity: 0.5;
}
.pronunciation-save-btn {
    border-radius: 3em;
    width: 5em;
    border: none;
    background-color: var(--main-green);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25em 0.5em;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}
.pronunciation-save-btn:not(.pronunciation-save-disabled):hover {
    filter: brightness(0.93);
}
.pronunciation-save-disabled {
    background-color: var(--main-medium-light-grey);
    color: var(--main-dark-grey);
    opacity: 0.6;
    cursor: default;
}
.setting-set p.pronunciation-help-text {
    font-size: 0.7em;
    color: #888;
    margin-top: 0;
    margin-bottom: 0;
}
.pronunciation-error {
    font-size: 0.75em;
    color: #c0392b;
    margin-top: 4px;
    margin-bottom: 0;
}
.setting-set .setting-option.pronunciation-setting {
    flex-direction: column;
    align-items: stretch !important;
}
.pronunciation-setting .pronunciation-controls {
    text-align: right;
    margin-top: 0.5em;
}
.pronunciation-setting .pronunciation-input-group {
    justify-content: flex-end;
}

.icon_eye {
    background-image: url("../img/eye-white.f0d480a05a97.svg");
    background-position: center;
    background-size: contain;
    background-size: 80%;
    background-repeat: no-repeat;
}

.icon_eye_slash {
    background-image: url("../img/eye-slash-white.7c4c4e1498a6.svg");
    background-position: center;
    background-size: contain;
    background-size: 80%;
    background-repeat: no-repeat;
}

.password-field-container {
    position: relative;
}
.password-toggle-icon {
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
    position: absolute;
    right: 0.5em;
    top: 40px;
}

.login-password-label {
    display: flex;
    justify-content: space-between;
}

.invisible-feedback {
    visibility: hidden;
    margin-left: 2px;
    font-size: 0.8rem;
    color: var(--main-orange);
    margin-top: 0.25em;
}
/* Confirmation feedback on the Confirm button itself. Added by payments.js only once the
   request has come back, not on the press: in production that call goes to Stripe and can
   take a moment, and a checkmark shown on click would be claiming something we don't yet
   know. Absolutely positioned so appearing doesn't shove the button's label sideways. */
.confirm-cancellation-btn {
    position: relative;
}
.confirm-cancellation-btn.confirmed::before {
    content: "\2713";
    position: absolute;
    left: -1.4em;
    top: 50%;
    margin-top: -0.7em;
    font-size: 1.2em;
    font-weight: 900;
    color: var(--main-winter-green);
}