:root{
  --form-min-width: 600px;
  --form-width: min-content;
  --customer-info-width-wide: 1100px;
  --form-section-width: 50%;
  --wrap: nowrap;
  --w-49: 49%;
  --w-50: 50%;
  --billing-details-height: 550px;
  --payment-form-max-height: 830px;
}

@media (max-width: 1200px){
  :root{
    --customer-info-width-wide: 90vw
  }
}

@media (max-width: 991px){
  :root{
    --form-section-width: 100%;
    --wrap: wrap;
  }
}

@media (max-width: 700px){
  :root{
    --form-min-width: 90vw;
    --form-width: 100%;
    --customer-info-width-wide: 0px;
    --w-49: 100%;
    --w-50: 100%;
    --billing-details-height: 100%;
    --payment-form-max-height: auto;
  }
}

html,body{
  width:100%;
  height:100%;
  background-color: var(--color-greys-5);
}

h5, p.h5, p.h5 *{
  font-size: var(--text-md)!important;
}

.w-49-custom{
  width: var(--w-49)
}

.w-50-custom{
  width: var(--w-50)
}

#full-loading{
  display: block;
  margin-top: 40vh;
}

#unavailable{
  display: none;
  padding: 50px;
  max-height: 900px;
  max-width: 90%;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: var(--color-whites-1);
}

#unavailable img{
  max-height: 100px
}

.customer-balance{
  display: none;
}

label{
  font-size: var(--text-sm)!important;
}

label[for="plan-select"]{
  opacity: 0;
}

.StripeElement {
  box-sizing: border-box;
  height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--color-blacks-alpha-000);
  border-radius: 4px;
  background-color: var(--color-whites-1);
  box-shadow: 0 1px 3px 0 var(--color-greys-alpha-050);
  -webkit-transition: box-shadow 150ms ease, border 0.15s  ease;
  transition: box-shadow 150ms ease, border 0.15s ease;
  font-size: var(--text-md);
  outline-color: var(--color-whites-alpha-000);
}

.StripeElement:focus, .StripeElement:focus-within, .StripeElement:active{
  outline-color: var(--color-whites-alpha-000);
  box-shadow: 0 1px 5px 0 var(--color-blacks-2);
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 var(--color-greys-3);
}

.StripeElement--invalid {
  border-color: var(--color-accents-reds-4);
}

.StripeElement--webkit-autofill {
  background-color: var(--color-whites-2) !important;

}

.delay-second{
  animation-delay: 0.3s
}
.delay-third{
  animation-delay: 0.6s
}

#powered-by-stripe{
  opacity: 0.5;
}

#payment-form{
  display: none;
  margin: auto;
  background-color: var(--color-whites-1);
  width: var(--form-width);
  height: var(--payment-form-max-height);
  min-width: var(--form-min-width);
  max-height: var(--payment-form-max-height);
  overflow: hidden;
  border-radius: 4px;
}
.head{
  max-width: 500px;
  width: 100%;
  margin: auto
}
#customer-details{
  margin: auto;
  width: 100%;
  flex-wrap: var(--wrap);
}
#customer-details.wide{
  min-width: var(--customer-info-width-wide);
}
.billing-details{
  width:100%;
  padding: 10px 20px;
  max-height: var(--billing-details-height);
}
.trial .billing-details{
  max-height: 150px
}
.wide .billing-details{
  width: var(--form-section-width)
}
.your-plan-wrapper, .your-tokens-wrapper{  
  width: 100%;
  max-width: var(--form-section-width);
  transition: min-width .2s ease, max-width .2s ease;
  overflow: hidden;
  box-shadow: inset 18px 0px 14px -18px var(--color-greys-3);
  padding: 10px 20px
}
.your-plan-wrapper.hidden, .your-tokens-wrapper.hidden{
  min-width: 0px;
  max-width: 0px;
  padding: 0px;
  box-shadow: unset;
}

.package-plan li:last-child{
  border-bottom: none;
}

.plan-wrapper{
  display: none;
}

.plan-wrapper .price, .tokens-wrapper .price{
  font-size: var(--text-lg);
  
}
.plan-wrapper h4 b, .plan-wrapper .price, .tokens-wrapper h4 b, .tokens-wrapper .price{
  color: var(--color-primary-1);
}

.package-plan{
  border-radius: 5px;
  padding: 20px 12px;
  max-width: 450px;
}

.plan-wrapper small{
  font-size: .8em!important
}


label{
  font-size: var(--text-sm);
  margin-bottom: 0px!important;
}
.state-item, #alert, #alert span{
  display: none;
}
.error{
  border: 1px solid var(--color-accents-reds-2);
}

#overlay{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: -webkit-fill-available;
  z-index:1111;
  background:  linear-gradient(to top, var(--color-accents-blues-3) 0%,var(--color-greys-5) 66%);
}
#confirmation-tab{
  margin: 80px auto;
  width: 500px;
  height: fit-content;
  background-color: var(--color-whites-1);
  border-radius: 8px;
  box-shadow: 0px 5px 5px 0px var(--color-blacks-alpha-025);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}
#confirmation-tab p{
  width: 90%;
  text-align: center;
}

#actions div{
  margin: auto;
  font-size: var(--text-xs);
  text-align: center;
}
#actions p{
  margin: 0px auto;
}
#actions div div{
  cursor: pointer;
  text-align: center;
  color: var(--color-primary-1);
  height: 100px;
  width: 100px;
  margin: 25px 25px 0 25px;
  font-size: var(--text-gl);
}

#actions a i{
  color:var(--color-primary-1);
  font-size: var(--text-gl)
}

#actions p{
  font-size: var(--text-sm)
}



.title{
  float: left;
}
.value{
  float: right;
}

.customer-own-plan, .plan-specific-price{
  display: none;
}


#login-container, #login-container > div, #login-container  .auth0-lock-widget{
  width: 100%!important;
}
#login-container .auth0-lock-submit{
  width: calc( 100% - 40px )!important;
  background-color: var(--color-primary-1)!important;
  border-radius: 0px!important;
}

#login-container .auth0-lock-submit svg{
  display: none;
}

#login-container div[role='navigation']{
  display: none;
}

#login-container .auth0-lock-alternative{
  display: none!important;
}

#login-container .auth0-lock {
  z-index: 1000
}


@media (max-width: 414px){

  #payment-form, #confirmation-tab{
    margin:20px 10px;
    width:calc(100% - 20px);
    height: auto;
  }

}