/* Variables */
* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100vh;
  width: 100vw;
}

form {
  width: 100%;
  align-self: center;
  box-shadow: none;
  border-radius: 7px;
}

#payment-form {
  margin-top:16px !important;
  margin-bottom: 24px !important;
}

#use-credit {
  margin-top:16px;
  height:48px;
}

#download-button {
  margin-top:16px;
  height:48px;
}

.login-button {
  height:48px;
}

#product-original-amount { 
  white-space: nowrap
}

#success-wrapper {
  display:flex;
  margin-top:100px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.thankyou-message {
  color: white;
  margin-top:100px;
  overflow: hidden;
  font-size: 24px;
  margin-bottom:70px;
  opacity:0;
  animation: appear 0.3s linear forwards 0.5s;
}

.thankyou-message p {
  margin:auto;
  width:70%;
  margin-top:40px;
  font-size: 16px;
}

.checkmark-wrapper {
  position:relative;
  width:8em;
  height:8em;
}

.success-circle {
  position:absolute;
  width:0em;
  height:0em;
  margin:auto;
  border-radius:8em;
  background: #7ac142;
  animation: grow 0.3s ease-out forwards;
}

@keyframes appear {
  to {
    opacity: 100%;
  }
}

@keyframes grow {
  0% {
    left:4em;
    top:4em;
    width:0em;
    height:0em;
  }
  50% {
    left:-1em;
    top:-1em;
    width:10em;
    height:10em;
  }
  100% {
    left:0em;
    top:0em;
    width:8em;
    height:8em;
  }
}

.animated-check {
  position:relative;
  z-index:1;
  top:1.2em;
  height:6em;
  width:6em
}

.animated-check path {
  fill: none;
  stroke: white;
  stroke-width: 4;
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  animation: draw 0.3s ease forwards 0.2s;
  stroke-linecap: round;
  stroke-linejoin: round
}

.buybutton:disabled {
  opacity: 0.7 !important;
  cursor: default;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0
  }
}

.account-link {
  margin-left:8px;
  margin-top:10px;
}

.login-error {
  margin:0 !important;
}

#require-account {
  width:100%;
  margin-top:16px;
}

#login-app input {
  background-color:#262a2e;
  border:1.5px solid #3e4245;
  transition: border 0.15s ease, color 0.15s ease;
  color:#fff;
  border-radius:6px;
  padding:12px;
  margin-top:0;
  margin-bottom:0;
  font-size:16px;
  height:44px;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

#email {
  margin-bottom:6px !important;
}

#login-app input:focus {
  border:1.5px solid #aa88ff;
}

.hidden {
  display: none !important;
}

.button-divider {
  padding-top:24px;
  padding-bottom:48px;
  width: 100%;
}

.button-divider-line {
  margin:auto;
  width: 70%;
  height:1px;
  background-color:#fff8;
}

.skeleton-loading {
  display: inline-flex;
  min-height:350px;
  background: linear-gradient(90deg, #fff0, #fff0, #fff3, #fff0, #fff0);
  background-color: #fff2;
  border-radius: 10px;
  background-size:1000px 660px;
  background-repeat: no-repeat;
  background-position:250%;
  margin-top:16px;
  animation: skeleton 2s infinite ease 0s;
}

@keyframes skeleton {
  0%{background-position:250% 0%}
  100%{background-position:-100% 0%}
}

#loader-wrapper {
  width: 100%;
}

#payment-wrapper {
  opacity: 100%;
  width:100%;
  transition: opacity 0.2s ease;
}

#payment {
  display:flex;
  max-width:initial;
}

.purchase-container {
  width:600px;
  padding:30px;
}

.product-image img {
  width:initial !important;
  height:100px;
  margin-top:20px;
  background-color:transparent;
}

.product-info {
  max-width:initial;
}

#storeApp {
  margin-top:0px;
}

.transparent {
  pointer-events: none;
  opacity: 0% !important;
  height: 0px !important;
  width: 0px !important;
  transition: opacity 0.2s ease;
}

#payment-message {
  color: rgb(213, 213, 225);
  font-size: 16px;
  line-height: 20px;
  margin-top: 12px;
  text-align: center;
}

#payment-element {
  margin-bottom: 24px;
}

/* Buttons and links */
#submit {
  height:48px;
}

button {
  background: linear-gradient(0deg, #5664df 0%, #8864df 100%);
  font-family: Arial, sans-serif;
  color: #ffffff;
  border-radius: 4px !important;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  transition: all 0.2s ease;
  box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
  width: 100%;
}
button:hover {
  filter: contrast(120%);
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}
.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #5469d4;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #5469d4;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

.payment-loader {
  height:28px;
  animation: 1.9s linear infinite loading;
}

.payment-loader svg {
  height:100%;
}

circle {
  fill: transparent;
  stroke: white;
  stroke-width: 14;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  stroke-dasharray: 283;
  stroke-dashoffset: 100;
  animation: 3.7s ease-in-out infinite both spinning;
}

@-webkit-keyframes spinning {
  0% {
    stroke-dashoffset: 100;
  }
  50% {
    stroke-dashoffset: 240;
  }
}
@keyframes spinning {
  0% {
    stroke-dashoffset: 100;
  }
  50% {
    stroke-dashoffset: 240;
  }
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 670px) {
  .purchase-container {
    width: 92vw;
    min-width: initial;
  }
}