:root {
    --main-font-family: 'Helvetica Neue', sans-serif;
    --fivestars-purple: rgba(106, 32, 206, 1);
    --fivestars-blue: rgba(75, 165, 221, 1);
    --page-header-title-color: rgba(0, 0, 0, 1);
    --logo-width: 58px;
    --logo-height: 64px;
    --color-gray: rgba(157, 157, 155, 1);
    --color-red: rgb(241, 71, 71);
    --text-label-color: #5F6377;
    --form-field-background-color: #FCFCFD;
    --form-field-border-color: #CFD0D7;
    --form-field-border-color-hover: rgba(94, 94, 94, 1);
    --form-field-border-color-focus: var(--fivestars-purple);
    --form-label-font-family: 'Inter', sans-serif;
    --button-font-family: 'Inter', sans-serif;
    --button-border-color: var(--fivestars-purple);
    --button-text-color: var(--fivestars-purple);
    --internal-link-font-family: 'Inter', sans-serif;
    --internal-link-text-color: var(--fivestars-purple);
    --checkbox-background-color: white;
    --checkbox-border-color: rgba(157, 157, 155, 1);
    --checkbox-background-color-hover: rgba(106, 32, 206, .5);
    --checkbox-background-color-checked: var(--fivestars-purple);
    --checkmark-color: white;
    --select-arrow-color: #777;
    --donation-type-text-color: rgba(13, 12, 34, 0.6);
    --donation-type-border-color: #CCCCCC;
    --dollar-sign-mark-color: rgba(26, 32, 61, 0.3);
    --external-link-font-family: 'Inter', sans-serif;
    --external-link-text-color: var(--fivestars-blue);
    --plus-icon-background-color: var(--fivestars-purple);
    --dashboard-record-border-color: rgba(204, 204, 204, 1);
    --dashboard-record-text-color: rgba(26, 26, 26, 1);
    --dashboard-header-text-color: rgba(153, 153, 153, 1);
    --donation-record-link-border-color: var(--fivestars-purple);
    --donation-record-link-background-color: none;
    --donation-record-link-pdf-icon-color: var(--fivestars-purple);
    --donation-record-arrow-color-hover: var(--fivestars-purple);
    --donation-record-arrow-shadow-color-hover: rgba(0, 0, 0, 0.2);
    --have-account-text-color: #7d7d7d;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: var(--main-font-family);
}

a {
    text-decoration: none;
    outline: none;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

a:hover {
    text-decoration: underline;
}

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.app-container {
    margin-top: 20px;
    max-width: 283px;
    width: 100%;
}

.page-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    font-weight: 500;
    font-size: 22px;
    line-height: 25px;
    color: var(--page-header-title-color);
}

.page-header-title {
    width: 100%;
    text-align: center;
}

.page-header-img {
    height: var(--logo-height);
    width: var(--logo-width);
}

.details-text {
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 15px;
    color: var(--color-gray);
}

.internal-link-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 50px;
}

.button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    outline: none;
    border: none;
    background: none;
    border: 1px solid var(--button-border-color);
    border-radius: 8px;
    width: 100%;
    height: 50px;
    color: var(--button-text-color);
    font-family: var(--button-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.button-with-hover {
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.button-with-hover::after {
    position: absolute;
    content: "";
    width: 45px;
    height: 120px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: -o-linear-gradient(45deg, var(--fivestars-purple), white);
    background: linear-gradient(45deg, var(--fivestars-purple), white);
    z-index: -1;
    top: -35px;
    left: -65px;
    -webkit-transition: left .3s linear;
    -o-transition: left .3s linear;
    transition: left .3s linear;
    opacity: .15;
}

.button:hover {
    text-decoration: none;
    color: var(--button-text-color)
}

.button-with-hover:hover:after {
    left: 315px;
}

.internal-link {
    text-align: center;
    font-family: var(--internal-link-font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--internal-link-text-color);
}

.internal-link:hover {
    text-decoration: underline;
    color: var(--internal-link-text-color);
}

.external-link {
    font-family: var(--external-link-font-family);
    color: var(--external-link-text-color);
}

.external-link:hover {
    text-decoration: underline;
    color: var(--external-link-text-color);
}

.footer-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 25px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 10px;
}

.footer-link-container {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    position: relative;
}

.footer-link-container:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    width: 1px;
    height: 12px;
    background-color: var(--color-gray);
}

.info-text-wrapper {
    margin-top: 25px;
    font-size: 18px;
    font-weight: 300;
    position: relative;
}

.info-text-wrapper::after {
    content: "";
    height: 3px;
    width: 100px;
    background-color: var(--fivestars-purple);
    position: absolute;
    bottom: -15px;
    left: 0;
    border-radius: 8px;
}

.form-wrapper {
    margin-top: 40px;
}

.footer-link-container {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
}

.footer-link-img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.footer-link {
    font-size: 12px;
    line-height: 14px;
}

.continue-as-guest-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    margin-top: 15px;
}

.important-text {
    font-size: 12px;
    color: var(--color-gray);
    margin-top: 15px;
    text-align: justify;
    text-decoration: underline;
}

.info-block {
    margin-top: 50px;
    font-size: 14px;
    line-height: 17px;
}

@media screen and (min-width: 481px) {
    .app-container {
        max-width: 482px;
    }

    .page-header-title {
        margin-right: var(--logo-width);
    }

    .button {
        max-width: 320px;
        margin: 0 auto;
    }

    .important-text {
        max-width: 320px;
    }

    .button-with-hover:hover:after {
        left: 420px;
    }

    .form-field-amount-note {
        max-width: 100%;
    }
}