﻿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 0.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 0.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 0.3s;
}

.ds-c-target > button#Twitter:hover {
  border: 2px solid #393e42 !important;
}

.ds-c-target > button#Twitter > i {
  color: #000000;
  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 0.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 0.3s;
}

.ds-c-target-with-cta > button#Twitter:hover {
  border: 2px solid #393e42 !important;
}

.ds-c-target-with-cta > button#Twitter > i {
  color: #202020;
  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 0.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 0.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 0.5s ease;
  transition: max-height 0.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;
}
