﻿a:hover {
    color: #393e42;
}

.content-upload-panel {
    max-width: 550px; 
    margin: 0 auto;
}

.hr-padding-wrapper {
    padding: 16px 16px 16px 16px;
}

input#AcceptTerms {
    height: 24px;
    width: 24px;
    margin: 8px 2px 0 0;
}

.terms {
    font-size: 15px;
}

.ds-custom-link-selector > a {
    color: #727476;
    font-weight: var(--weight-m);
}

    .ds-custom-link-selector > a:hover {
        color: var(--text-color);
        text-decoration: underline;
    }

button#Google {
    margin: 0;
}

#socialLoginList .ds-c-target-with-cta:nth-last-child(1) {
    margin-bottom: 0px;
}

.ds-c-target > button#Google {
    background-color: #fff !important;
    border-radius: 100px !important;
    height: 46px !important;
    border: 2px solid #ececec !important;
    color: #14171a;
    font-weight: var(--weight-m) !important;
    width: 100%;
    transition: border ease-in-out .3s;
}

    .ds-c-target > button#Google:hover {
        border: 2px solid #393e42 !important;
    }

    .ds-c-target > button#Google > i {
        padding-right: 0;
    }

        .ds-c-target > button#Google > i::before {
            background-image: url('https://storage.ko-fi.com/cdn/Google__G__Logo.svg');
            height: 24px;
            width: 24px;
            color: transparent;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }

        .ds-c-target > button#Google > i::after {
            content: "";
            font-family: var(--font-primary);
            font-variant-ligatures: no-common-ligatures;
            font-weight: var(--weight-m);
            padding-right: 0;
        }

.ds-c-target > button#Facebook {
    background-color: #fff !important;
    border-radius: 100px !important;
    height: 46px !important;
    border: 2px solid #ececec !important;
    color: #14171a;
    font-weight: var(--weight-m) !important;
    width: 100%;
    transition: border ease-in-out .3s;
}


    .ds-c-target > button#Facebook:hover {
        border: 2px solid #393e42 !important;
    }


    .ds-c-target > button#Facebook > i {
        color: #0078ff;
        padding-right: 0;
    }

        .ds-c-target > button#Facebook > i::after {
            content: "";
            font-family: var(--font-primary);
            font-variant-ligatures: no-common-ligatures;
            font-weight: var(--weight-m);
            color: #14171a;
            padding-right: 0;
        }


/* Twitter without CTA */
.ds-c-target > button#Twitter {
    background-color: #fff !important;
    border-radius: 100px !important;
    height: 46px !important;
    border: 2px solid #ececec !important;
    color: #14171a;
    font-weight: var(--weight-m) !important;
    width: 100%;
    transition: border ease-in-out .3s;
}


    .ds-c-target > button#Twitter:hover {
        border: 2px solid #393e42 !important;
    }


    .ds-c-target > button#Twitter > i {
        color: #1DA1F2;
        padding-right: 0;
    }

        .ds-c-target > button#Twitter > i::after {
            content: "";
            font-family: var(--font-primary);
            font-variant-ligatures: no-common-ligatures;
            font-weight: var(--weight-m);
            color: #14171a;
            padding-right: 0;
        }

.ds-c-target-with-cta > button#Google {
    background-color: #fff !important;
    border-radius: 100px !important;
    height: 46px !important;
    border: 2px solid #ececec !important;
    color: #14171a;
    font-weight: var(--weight-m) !important;
    width: 100%;
    transition: border ease-in-out .3s;
}


    .ds-c-target-with-cta > button#Google:hover {
        border: 2px solid #393e42 !important;
    }


    .ds-c-target-with-cta > button#Google > i {
        color: #0078ff;
        padding-right: 0;
    }

        .ds-c-target-with-cta > button#Google > i::after {
            content: " Continue with ";
            font-family: var(--font-primary);
            font-variant-ligatures: no-common-ligatures;
            font-weight: var(--weight-m);
            color: #14171a;
            padding-right: 0;
        }
        .ds-c-target-with-cta > button#Google > i::before {
            background-image: url('https://storage.ko-fi.com/cdn/Google__G__Logo.svg');
            background-repeat: no-repeat;
            background-size: 100% auto;
            height: 24px;
            width: 24px;
            color: transparent;
        }

.ds-c-target-with-cta > button#Twitter {
    background-color: #fff !important;
    border-radius: 100px !important;
    height: 46px !important;
    border: 2px solid #ececec !important;
    color: #14171a;
    font-weight: var(--weight-m) !important;
    width: 100%;
    transition: border ease-in-out .3s;
}


    .ds-c-target-with-cta > button#Twitter:hover {
        border: 2px solid #393e42 !important;
    }


    .ds-c-target-with-cta > button#Twitter > i {
        color: #1DA1F2;
        padding-right: 0;
    }

        .ds-c-target-with-cta > button#Twitter > i::after {
            content: " Continue with ";
            font-family: var(--font-primary);
            font-variant-ligatures: no-common-ligatures;
            font-weight: var(--weight-m);
            color: #14171a;
            padding-right: 0;
        }


.ds-c-target-with-cta > button#Facebook {
    background-color: #fff !important;
    border-radius: 100px !important;
    height: 46px !important;
    border: 2px solid #ececec !important;
    color: #14171a;
    font-weight: var(--weight-m) !important;
    width: 100%;
    transition: border ease-in-out .3s;
}


    .ds-c-target-with-cta > button#Facebook:hover {
        border: 2px solid #393e42 !important;
    }


    .ds-c-target-with-cta > button#Facebook > i {
        color: #0078ff;
        padding-right: 0;
    }

        .ds-c-target-with-cta > button#Facebook > i::after {
            content: " Continue with ";
            font-family: var(--font-primary);
            font-variant-ligatures: no-common-ligatures;
            font-weight: var(--weight-m);
            color: #14171a;
            padding-right: 0;
        }


.ds-c-target-with-cta > button#Twitch {
    background-color: #fff !important;
    border-radius: 100px !important;
    height: 46px !important;
    border: 2px solid #ececec !important;
    color: #14171a;
    font-weight: var(--weight-m) !important;
    width: 100%;
    transition: border ease-in-out .3s;
}


    .ds-c-target-with-cta > button#Twitch:hover {
        border: 2px solid #393e42 !important;
    }


    .ds-c-target-with-cta > button#Twitch > i {
        color: #9146FF;
        padding-right: 0;
    }

        .ds-c-target-with-cta > button#Twitch > i::after {
            content: " Continue with ";
            font-family: var(--font-primary);
            font-variant-ligatures: no-common-ligatures;
            font-weight: var(--weight-m);
            color: #14171a;
            padding-right: 0;
        }

.ds-c-email-form {
    position: relative;
    width: 100%;
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height .5s ease;
    transition: max-height .5s ease;
}

.ds-c-email-form-wrapper {
    position: relative;
    padding: 0 16px;
}


.ds-c-show, .ds-c-hide {
    position: relative !important;
    z-index: 100;
    bottom: 0px !important;
    text-align: center;
}

.ds-c-hide {
    display: none;
}


.ds-c-show:target {
    display: none;
}

    .ds-c-show:target ~ .ds-c-hide {
        display: block;
    }

    .ds-c-show:target ~ .ds-c-email-form {
        max-height: 1000px;
        opacity: 1;
    }


.digit-group input {
    width: 52px;
    height: 64px;
    border: 1px solid #434b57;
    line-height: 50px;
    text-align: center;
    font-size: 32px;
    font-family: var(--font-primary);
    font-variant-ligatures: no-common-ligatures;
    font-weight: 500;
    margin: 0 2px;
    border-radius: 8px;
}

.digit-group .splitter {
    padding: 0 5px;
    color: white;
    font-size: 32px;
}
