.headline-standard {
    font-size: 3.62rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .3rem;
    font-family: Metric-Bold;
    color: #423e4c;
    max-width: 740px;
    margin: 30px 0 25px 0;
}

@media screen and (max-width: 500px) {
    .headline-standard {
        font-size: 230%;
    }
}



/* Generic Form Styles ------------------------------------------------------ */
label {
    font-family: Metric-Bold;
    text-transform: uppercase;
    letter-spacing: .26rem;
}

select {
    width: 100% !important;
}

    select.select-narrow {
        width: auto !important;
    }

input[type=email] {
    width: 100%;
}

input[type=checkbox] + label:not(.fake-label) {
    text-align: left;
}

hr {
    margin: 3rem 0;
    border: 0;
    border-top: 1px solid #ccc;
}


/* original checkboxes are overriden here ------------------------------------------------------ */
input[type=checkbox],
input[type=radio] {
    display: none;
    display: unset;
}
    /* fake checkboxes */
    input[type=checkbox].status + label:not(.fake-label):before {
        opacity: 0;
    }

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

.hide-radio {
    position: fixed;
}


/* Recurring donation checkbox/toggle ------------------------------------------------------ */
.checkbox-toggle {
    width: 100%;
    height: 65px;
    margin-bottom: 5rem;
}

    .checkbox-toggle input.status {
        position: absolute;
        width: 100%;
        height: 65px;
        display: unset !important;
    }

        .checkbox-toggle input.status:focus::after {
            content: '';
            display: block;
            position: absolute;
            top: -14px;
            bottom: -14px;
            left: -14px;
            right: -14px;
            border-radius: 50px;
            outline: 3px dashed #423e4c;
        }

        .checkbox-toggle input.status + label {
            height: 100%;
            width: 100%;
            padding-left: 0;
        }

            .checkbox-toggle input.status + label > .status-switch {
                position: relative;
                z-index: 1;
                width: 100%;
                height: 100%;
                padding: 3px;
                box-sizing: content-box;
                background-color: white;
                border: 1px solid #423e4c;
                border-radius: 50px;
                font-family: Metric-Bold;
                text-transform: uppercase;
            }

        .checkbox-toggle input.status:checked + label > .status-switch {
            background-color: white;
        }

            .checkbox-toggle input.status:checked + label > .status-switch:after {
                left: 0;
                content: attr(data-unchecked);
            }

            .checkbox-toggle input.status:checked + label > .status-switch:before {
                color: white;
                left: 50%;
                content: attr(data-checked);
            }

        .checkbox-toggle input.status + label > .status-switch:before,
        .checkbox-toggle input.status + label > .status-switch:after {
            border-radius: 50px;
            height: calc(100% - 6px);
            width: calc(50% - 3px);
            display: flex;
            align-items: center;
            position: absolute;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .checkbox-toggle input.status + label > .status-switch:before {
            background-color: #423e4c;
            color: white;
            box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.2);
            left: 3px;
            z-index: 10;
            content: attr(data-unchecked);
        }

        .checkbox-toggle input.status + label > .status-switch:after {
            right: 0;
            content: attr(data-checked);
        }


/* Format amount boxes ------------------------------------------------------ */
.radio-amounts {
    display: flex;
    justify-content: space-between;
}

    .radio-amounts input[type=radio] {
        position: absolute;
        display: unset !important;
        opacity: 0;
    }

.radio-amounts-other {
    display: grid;
    justify-content: center;
}

    .radio-amounts-other input[type=number] {
        font-size: 2em;
        font-weight: 800;
    }

@media screen and (max-width: 825px) {
    .radio-amounts {
        justify-content: start;
        flex-wrap: wrap;
    }

        .radio-amounts label {
            width: 40%;
            margin: 1rem 1rem 0 0;
        }
}


.form-check-inline {
    display: inline-block;
    margin-right: 4rem;
    margin-bottom: 3rem;
}

@media screen and (max-width: 600px) {
    .form-check-inline:first-of-type {
        margin-bottom: 1rem;
    }
}


/* Donation Options Section ------------------------------------------------------ */
.text-center {
    text-align: center;
}

form h3,
p.sub-total {
    margin-bottom: 0.15rem !important;
    font-family: Metric-Bold;
    font-size: 1.54rem;
    color: #423e4c;
    line-height: 1.59;
    letter-spacing: .26rem;
    text-transform: uppercase;
}
/*h3 {
    margin-top: 3rem;
    margin-bottom: 3rem !important;
}*/
p.sub-total {
    margin-bottom: 2rem !important;
    font-size: 3rem;
}

.total-currency {
    font-family: Metric-Regular;
    font-size: 1.5rem;
}

input#recognitionName {
    width: 70% !important;
    margin-bottom: 1rem;
}

.divider {
    margin: 2rem auto;
    padding: 2rem 0;
    border-top: 1px dashed #CCC;
    border-bottom: 1px dashed #CCC;
}

.form-fees {
    width: 70%;
    margin: auto;
    /*    margin-top: -30px;*/
}

@media screen and (max-width: 768px) {
    .form-fees {
        width: 100%;
        margin: unset;
        margin-top: -10px;
    }
}


/* Button Styling */
.btn-check:checked + .btn-outline-dark {
    color: #fff;
    background-color: #423e4c;
    border-color: #423e4c;
    border-radius: 2em;
}

.btn-outline-dark {
    color: #222;
    background-color: #fff;
    border: solid 1px;
    border-radius: .5em !important;
    padding: .75rem;
    margin-right: .25rem;
}

.btn-check:checked + .btn-outline-dark {
    box-shadow: 0 0 0 0.25rem rgb(33 37 41 / 0%) !important;
}

label.btn:before, label.btn:after {
    background-color: transparent !important;
    border: none !important;
}

label.btn {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

@media screen and (min-width: 600px) {
    button {
        width: unset !important;
        padding: 10px 60px 17px !important;
    }
}


/* Focus Rings ------------------------------------------------------ */
input:focus-visible,
select:focus,
textarea:focus,
radio:focus,
button:focus,
.form-check-label:focus-within,
input[type=radio]:focus + label:not(.fake-label),
input[type=checkbox]:focus-within + label:not(.fake-label) {
    outline: 1px auto -webkit-focus-ring-color;
    outline: 3px dashed #423e4c;
    outline-offset: 3px;
    border-radius: 5px;
    transition: .2s;
}

.checkbox-toggle input.status:focus::after {
    content: '';
    display: block;
    position: absolute;
    /*    top: -9px;
bottom: -9px;
left: -9px;
right: -9px;*/
    bottom: -16px;
    outline-offset: -7px;
    border-radius: 50px;
    outline: 3px dashed #423e4c;
    transition: .2s;
}

input[type=checkbox].status:focus-within + label:not(.fake-label),
/*input[type=checkbox].status:focus-visible + label:not(.fake-label),*/
input[type=checkbox].status:focus-visible {
    outline: unset !important;
}


/* Messaging ------------------------------------------------------ */
.footnote {
    margin-top: 1rem;
}

.errorMsg {
    display: block;
    margin-top: 0.5rem;
    color: #980001;
    line-height: unset;
}

#errorsBottom {
    width: 80%;
    margin: 3rem auto;
    padding: 1rem;
    background: aliceblue;
    border: 1px solid #ccc;
    border-radius: 3px;
}

    #errorsBottom p {
        margin-bottom: 0.5rem;
    }

    #errorsBottom ul {
        margin-bottom: 0;
    }

        #errorsBottom ul li {
            width: fit-content;
            margin: auto;
        }

#confirmation {
    margin-top: 2rem;
    padding: 2rem;
    background-color: #9a95a5;
    border-radius: 3px;
    text-align: center;
}

    #confirmation p {
        color: #fff;
    }