.container {
    width: 100%;
}

.narrow-copy {
    max-width: 760px;
    margin: auto;
}

.mt-5 {
    margin-top: 5rem;
}

.narrow-copy.tighter {
    width: 100%;
    max-width: 375px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

.intro {
    font-size: 20px;
}

.mb-2 {
    margin-bottom: 2rem;
}

/* form styles */
.form-wrap {
    margin: 2rem auto;
}

.form-control, .form-input {
    background: white;
    position: relative;
    /*border-bottom: 2px solid var(--lime);*/
    transition: 0.3s;
    margin-bottom: 20px;
}

    .form-control:hover, .form-control.active,
    .form-input:hover, .form-input:active {
        background: var(--lightest-gray);
    }

    .form-control label, .form-input label {
        position: absolute;
        color: var(--med-gray);
        left: 4px;
        top: 14px;
        transition: .3s;
        z-index: 0; /* to make input clickable, not label (any accessibility concerns?) */
    }

    .form-control.active label, .form-control.has-value label,
    .form-control.fixed-label label,
    .form-input.active label, .form-input.has-value label,
    .form-input.fixed-label label {
        top: 0;
        font-size: .8rem;
    }

    .form-control input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=submit]),
    .form-control select, .form-control textarea,
    .form-input input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=submit]),
    .form-input select, .form-input textarea {
        border: none;
        background: none;
        width: 100%;
        height: 50px;
        font-size: 1rem;
        padding: 15px 4px 0;
        position: relative;
        z-index: 1;
        border-bottom: 2px solid var(--lime);
    }
        .form-control input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill,
        .form-input input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=submit]):-webkit-autofill {
            font-size: 1rem;
        }

    .form-control textarea,
    .form-input textarea {
        height: unset;
        font-family: var(--main-font);
    }

    .form-control .error,
    .form-input .error {
        color: red;
        font-size: .9rem;
        display: none;
        padding: 2px;
    }

    .form-control.invalid .error,
    .form-input.invalid .error {
        display: block;
    }

    .viva-form .form-control .error,
    .viva-form .form-input .error {
        display: block;
    }

.form > .error {
    color: red;
    font-size: .9rem;
    margin-bottom: 1rem;
    display: block;
}

.checkbox-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    margin-top: 10px;
}

    .checkbox-wrap > table {
        margin-bottom: 0;
    }
        .checkbox-wrap > table tr > td {
            padding: 8px;
        }

    .checkbox-wrap input {
        margin-right: 5px;
        margin-top: 0;
    }

    .checkbox-wrap > label {
        margin-bottom: 0;
        position: relative;
        top: unset;
        font-size: 14px;
    }

.form-action, .form-actions {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

    .form-action.flex-start {
        justify-content: flex-start;
    }

    .form-action .btn, .form-actions .btn, .form-action input.btn, .form-actions input.btn {
        min-width: 90px;
        font-weight: 700;
        margin-right: 0;
    }
    .form-action > * + *,
    .form-actions > * + * {
        margin-left: 16px !important;
    }


.extra-space,
.viva-form .form-input.extra-space {
    margin-bottom: 40px;
}
.form-actions.extra-space {
    margin-bottom: 60px;
}


#other-com {
    display: none;
}

.link, a.link, input.link, input[type=submit].link, input[type=button], button.link {
    background: none;
    color: var(--green);
    text-decoration: underline;
    border: none;
    padding: 0;
    text-align: left;
    display: inline;
    width: auto;
    width: fit-content;
    margin: 0;
    transition: .3s;
}

    .link:hover, a.link:hover, input.link:hover, button.link:hover,
    input[type=submit].link:hover, input[type=button]:hover {
        color: var(--purple);
        background: var(--palest-green);
    }

.icon-question {
    display: flex;
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.icon svg {
    color: var(--font-color);
    fill: var(--font-color);
    width: 20px;
    cursor: help;
}

.icon .icon-msg {
    display: none;
    position: absolute;
    border-radius: var(--border-radius-default);
    min-width: 150px;
    background: #2a2a2c;
    color: white;
    right: 0;
    top: 100%;
    max-width: 225px;
    padding: 8px 15px;
    text-align: center;
    line-height: 1.4;
    z-index: 99;
}

.icon:hover .icon-msg, .icon:active .icon-msg {
    display: block;
}


.form-input table tr td label, .form-input table tr th label {
    position: relative;
    top: unset;
    left: unset;
}

.auth-success {
    margin-bottom: 2rem;
    background: rgba(102,195,160,0.3);
    border-radius: 7px;
    padding: 7px 15px;
    font-size: 16px;
    text-align: center;
}
.auth-error {
    margin-bottom: 2rem;
    background: rgba(250,31,38,0.3);
    border-radius: 7px;
    padding: 7px 15px;
    font-size: 16px;
    text-align: center;
}