/* GENERAL */
body{
 font-family: 'Heebo','Verdana','Helvetica','Arial',sans-serif !important;
}
.bg-primary{ background: #054C84 !important; }
.text-primary{ color: #054C84 !important; }
.btn-primary{ background-color:#054C84 !important; border-color: #054C84 !important; }
  .btn-primary:hover{ background-color:#289de0 !important; border-color:289de0 !important; }

  .btn-light{ background-color: #eee !important; border-color: #eee !important; }

.text-dark{ color: #222 !important; }
.text-light{ color: #ccc !important; }

.zi-2{ z-index: 2; }
.zi-full{ z-index: 10; }

.h-title{ font-size:3.5rem !important; line-height:90%; }
.big-plan{ font-size:7.5rem; line-height:90%; }
.lead-lg{ font-size:1.8rem; line-height:100%; }

.btn-fit{ width: 150px !important; float:right !important;}

.btn-hover:hover{
  background: #054C84 !important;
  color:#fff;
}

.bg-rznt{
  background: #054C84;
}


.custom-padding-sides{
  padding-left:3rem;
  padding-right:3rem;
}

.custom-col-wrap{
  flex:0 0 auto;
  width:auto;
}
  .custom-list-group{
    justify-content: flex-start;
    display:flex;
    flex-wrap:wrap;
    flex-direction: row;
    list-style:none;
    padding:0px;
  } 
    .custom-col-wrap li{
      width:10%;
      padding:4px;
    }

    .custom-list-group .rounded-circle{
      display:block !important;
      width:46px;
      height:46px;
    }
    .custom-list-group .rounded-circle:focus{
      background:#054C84 !important;
      color:#fff !important;
      border-color:#7ed0ff !important;
    }

    @media screen and (max-width:576px){
      .custom-list-group{ margin:0 auto; margin-bottom:16px; }
      .custom-list-group .rounded-circle{
        margin:0 auto;
        width:100%;
        padding:0px;
        border-radius:6px !important;
      }
    }

    @media screen and (max-width:372px){
      .custom-list-group li{
        width:20%;
        padding:4px;
      }
    }


@media screen and (max-width:1200px){
  .custom-col-wrap{
    width:100%;
  }
}


.custom-container-padding{
  padding:4rem 3rem 3rem 3rem;
}
  @media screen and (max-width:768px){
    .custom-container-padding{
      max-width:auto !important;
      width:auto !important;
      padding:3rem 1.5rem 3rem 1.5rem;
    }
  }


/* START PAGE */
.responsive-alignments{
  align-items:center;
  justify-content: end;
}
.text-alignments{
  text-align:right;
  justify-items: end;
}
.bg-image-woman{
  position:relative;
  overflow: hidden;
}
  .bg-image-woman:after{
    content:'';
    width:950px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:0px;
    right:0;
    display:block;
    background:url(../purchase/purchase_woman.png) no-repeat center top;
    background-size:940px;
  }

  .box-content{
    position:relative;
    background-color:#fff;
    padding:3rem 3rem 3rem 0;
  }
    .box-content:before,
    .box-content:after{
      content:'';
      position:absolute;
      top:0;
      bottom:0;
      height:100%;

      display:block;
      background:#fff;
    }
    .box-content:before{
      border-top-left-radius:150px;
      border-bottom-left-radius:150px;
      width:300px;
      left:-300px;
    }
    .box-content:after{
      width:100%;
      right:-100%;
    }

    .h-big{
      color:#054C84;
      font-size:3.5rem;
      font-weight:bold;
      line-height:90%;
    }
    .btn-start{
      background:#054C84;
      border-color:#054C84;
      color:#fff;
      font-weight:bold;
    }
      .btn-start:hover{ background:#289de0;border-color:#289de0;color:#fff; }

@media screen and (max-width:1400px){
  .h-big{ font-size:3rem; }
  .lead-lg{ font-size:1.5rem; }

  .bg-image-woman:after{
    left:-100px;
    background-size:800px;
  }

  .box-content:before{
    width:150px;
    left:-150px;
  }
}

@media screen and (max-width:1200px){
  .h-big{ font-size:2.3rem; }
  .lead-lg{ font-size:1.3rem; }
  .bg-image-woman:after{
    left:-200px;
    background-position:bottom;
    background-size:704px;
  }
}

@media screen and (max-width:991px){
  .responsive-alignments{ align-items:flex-start; }
  .text-alignments{ text-align:center; justify-items:center; }

    .bg-image-woman:before{
      content:'';
      bottom:0px;
      height:50%;
      width:400px;
      position:absolute;
      left:50%;
      margin-left:-200px;
      display:block;
      border-top-left-radius:225px;
      border-top-right-radius:225px;
      background:#fff;
    }
    .bg-image-woman:after{
      width:100%;
      top:40%;
      right:0;
      left:0;
      background-position:center;
      background-size:600px;
    }

    .box-content{
      padding:3rem 0;
      background-color:transparent;
    }
    .box-content:after,
    .box-content:before{ display:none; }
    .h-big{ font-size:2rem; color: #fff; }
    .lead-lg{ font-size:1rem; }
    .btn-start{ background:#fff; color: #054C84; }
    .bnt-start:hove{ background:#eee; color:#289de0; }
    
    
  }
  
  @media screen and (max-width:424px){
    header img{ width: 140px; }
    header span.h5{ font-size:0.8rem !important; }

    .h-big{ font-size: 1.5rem; }
    .h-big > br{ display:none; }
    .lead-lg > br{ display:none; }
    .bg-image-woman:before{ width:290px; margin-left:-145px; } 
    .bg-image-woman:after{ left:0; top:45%; background-size:138%;}

    .caption-user-company h1.h4{ font-size: 1.2rem !important; }

    .without-data h1.h-title{ font-size: 2rem !important; }
    .without-data span.h4 { font-size: 1.1rem !important; }

    .mobile-text-center{ text-align:center; }
    
    .custom-container-padding{ padding:1rem 0rem !important; }
    .show-plan span.h3{ font-size: 1.3rem !important; }
    .show-plan span.h5{ font-size: 1rem; }
  }




/* PROGRESS STEP */
.progress_step { counter-reset: step; padding:0; width:100%; }
.progress_step li {
    list-style-type: none;
    width: 33.33%;
    float: left;
    font-size: 18px;
    position: relative;
    text-align: center;
    color: #7d7d7d;
}
.progress_step li:before {
    width: 48px;
    height: 48px;
    content: counter(step);
    counter-increment: step;
    color:#ccc;
    font-size:20px;
    line-height: 46px;
    font-weight:bold;
    border: 3px solid #ccc;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
    position:relative;
    z-index:2;
}
.progress_step li:after {
    width: 100%;
    height: 4px;
    content: '';
    position: absolute;
    background-color: #ddd;
    top: 24px;
    left: -50%;
    z-index:1;
}

.progress_step li:first-child:after { content: none; }

.progress_step.start_step li:nth-of-type(1),
.progress_step.second_step li:nth-of-type(1),
.progress_step.second_step li:nth-of-type(2),
.progress_step.complete_step li:nth-of-type(1),
.progress_step.complete_step li:nth-of-type(2),
.progress_step.complete_step li:nth-of-type(3){ color: #054C84; }

.progress_step.start_step li:nth-of-type(1):before,
.progress_step.second_step li:nth-of-type(1):before,
.progress_step.second_step li:nth-of-type(2):before,
.progress_step.complete_step li:nth-of-type(1):before,
.progress_step.complete_step li:nth-of-type(2):before,
.progress_step.complete_step li:nth-of-type(3):before{
  border-color: #054C84;
  color: #fff;
  background:#054C84;
}

.progress_step.second_step li:nth-child(2):after,
.progress_step.complete_step li:nth-child(2):after,
.progress_step.complete_step li:nth-child(3):after{ background:#054C84; }


@media screen and (max-width:576px){
  header span{ font-size:1rem !important; }
  .custom-container-padding{
    padding:1rem !important;
  }
  .progress_step li{ font-size:13px; }
  .progress_step li:before {
    width: 40px;
    height: 40px;
    font-size:16px;
    line-height: 36px;
  }
  .progress_step li::after{
    top:17px;
    height:3px;
  }
  
  .h-title{ font-size:2.5rem !important; }
}


/* INPUTS FORMS */
.input-undercover-focus{
  border:0px;
  outline:none;
  font-size:20px;
  border-bottom:3px solid #ddd;

  transition-duration:0.2s;
}
  .input-undercover-focus:focus {
    border-color:#054C84;
  }

.select-custom{
  background:none;
  padding-left:0px;
  padding-right:0;
}

  .select-custom .vs__dropdown-toggle{ padding:0; border:0;}
  .select-custom #vs1__listbox,
  .select-custom #vs2__listbox{
    box-shadow:0px 0px 10px #ddd;
    border-radius:4px;
    background:#fff;
    border:0;
  }

  .select-custom .vs__search{
    font-size:20px;
    margin:0;
    padding:0;
  }
  .select-custom .vs__selected-options,
  .select-custom .vs__selected{
    margin:0;
    padding:0;
  }

.size-radio{ width: 22px; height: 22px; }

.wrap-box-questions{ height:100%; }

.box-questions{ position:relative; overflow: hidden; }
.box-questions .btn:hover{ background:#054C84 !important; color:#fff !important; }


@media screen and (max-width:768px){
  .custom-padding-sides,
  .caption-user-company,
  .box-questions{ padding-left:0rem !important; padding-right:0rem !important; }
  .btn-back{ margin-left:0px !important; }
}

@media screen and (max-width:576px){
  .box-questions span,
  .box-questions input{ text-align:center; }
  .box-questions label span{ text-align:left; }
  .box-questions .group-buttons{ margin:0 auto; }

  .box-questions .btn{ display:inherit; margin:0 auto; }

  .btn-back{ margin:0 auto !important; }

  .caption-user-company{ text-align:center; }
}


/* LOADING ICON */
.loading-rocket{
  width:250px;
  height:205px;
  display:flex;
  
  background:url(../purchase/rocket-base.svg) no-repeat left center;
  position:relative;
}
  .loading-rocket:before{
    content:'';
    height:205px;
    display:flex;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    width:100%;

    background:url(../purchase/rocket-loading.svg) no-repeat left center;
    background-size:236px;

    animation: right-animate 9.5s ease-in-out;
  }

  @keyframes right-animate {
    0% {
        width:0%;
    }
    100% {
        width:250px;
    }
  }
    .currency_symbol{ width:auto; display:flex; margin:0 auto; position:relative; padding-left:36px;}
      .currency_symbol:before{
        content: 'R$';
        font-size:26px;
        top:-10px;
        position:absolute;
        left:0px;
      }

@media screen and (max-width:790px){
  .payment-methods fieldset{
    flex-direction:column;
    justify-content: center;
  }
    .payment-methods fieldset label{ margin-bottom:16px; }
  .payment-methods .btn{ font-size:1rem !important; width:100% !important; }
  .big-plan{ font-size: 4rem; }
}

@media screen and (max-width:400px){
  .big-plan{ font-size:2.2rem;}
  .currency_symbol{ font-size:1.8rem !important; }
    .currency_symbol:before{ font-size:18px; left:12px; }
}


header span{ text-align:right; display:block; }
  @media screen and (max-width:768px){
    header img{ margin:0 auto; display:block; margin-bottom:12px; }
    header span{ margin:0 auto;text-align:center; }
  }


.start-vh-calc{
  height: calc(100vh - 200px);
  min-height:350px;
}
  @media screen and (max-width:992px){
    .header-start{
      padding:2rem 0rem !important;
      justify-content: center;
    }
    .start-vh-calc{
      height:auto;
      min-height:auto;
      padding:0rem !important;
    }
      .start-vh-calc .col-12{
        padding:0rem !important;
      }
      .start-vh-calc .lead-lg > br,
      .start-vh-calc .h-big > br{ display: none; }
  }

.custom-vh-calc{
  height: calc(100vh - 288px);
  min-height:350px;
}

.btn-back{
  margin-left:3rem;
  border: 1px solid #ddd;
  background: none;
  color: #999;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  width:100%;
  max-width:119px;
  display:flex;
  justify-content: center;

  transition-duration:0.2s;
}
  .btn-back:hover{
    border-color:#054C84;
    color:#054C84;
  }

.btn-restart{
  border:0;
  background:none;
  color: #999;
  font-weight: bold;
  padding: 0.5rem 1rem;
  display:flex;
  margin:0 auto;
}
  .btn-restart:hover{
    color:#054C84;
  }

  @media screen and (max-width:576px){
    .btn-back{ margin:0 auto; }
  }

#without_cnpj .btn-back{
  margin:0 auto;
  color:#fff;
}

#address .btn-back{ margin: 0 auto; }
 

/* FADE */
.fade-enter-active,
.fade-leave-active{
  transition: opacity .4s ease-in-out;
}

.fade-enter,
.fade-leave-to{ opacity: 0; }

.fade-leave,
.fade-enter-to{ opacity: 1; }


/* ALERT */
.alert-slide-enter-active,
.alert-slide-leave-active{
  transition: all .2s ease-in-out;
}

.alert-slide-enter,
.alert-slide-leave-to{
  top:-40px;
  opacity:0;
}
.alert-slide-leave,
.alert-slide-enter-to{
  top:0px;
  opacity:1;
}

.slide-fade-enter-active {
  transform: translateY(0%);
  transition: all 0.2s ease;
  animation-fill-mode: both;
}
.slide-fade-leave-active {
  transform: translate3d(0,0%,0);
  transition: all 0.2s ease;
  position:absolute;
}
.slide-fade-enter, .slide-fade-leave-to{
  opacity: 0;
  transform: translate3d(0,75%,0);
}

/* loading sign_up */
.lds-dual-ring {
  margin:0 auto;
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #289de0;
  border-color: #289de0 transparent #289de0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.loading-display:before{
  transition-duration:0.2s;

  content:'Aguarde, carregando...';
  font-size:1.6rem;
  text-align:center;
  color:#054C84;
  justify-content: center;
  align-items:center;

  display:flex;
  padding-bottom:180px;
  width:100%;
  height:100vh;
  background:#000;

  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:4;

  background:#fff url(../purchase/loading-icon.gif) no-repeat center center;
}



.card_whats_doubts {
  position: fixed;
  right: 22px;
  bottom: 24px;
  background-size: 46px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 0.8rem 2rem 0.8rem 2.4rem;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 1;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 120%;
  width:350px;
  background:#fff;
  line-height:90%;
  transform: translatey(0px);

  animation: floating 2.0s ease-in-out infinite;

}

@keyframes floating {
  0%{
    transform: translatey(0px);
  }
  50%{
    transform: translatey(-20px);
  }
  100%{
    transform: translatey(0px);
  }
  
}
  .icon-whats-chat{
    background:#25D366;
    width:54px;
    height:54px;
    border-radius:50%;
    text-align:center;
    justify-content: center;
    display:flex;
    top:22px;
    left:-28px;
    color:#fff;
    font-weight:bold;
    font-size:28px;
    padding:12px;
    position:absolute;
  }

@media screen and (max-width:599px){
  .card_whats_doubts{
    width:100%;
    right:0px;
    left:px;
    bottom:0px;
    border-radius:0px;
    animation:none;
    padding: 0.8rem 2rem 0.8rem 5.6rem;
  }
  .icon-whats-chat{
    top:50%;
    margin-top:-27px;
    left:14px;
  }
}

.custom-carency-plan{
  max-width:800px;
  margin:0 auto;
  margin-top:-90px;
}
@media screen and (max-width:575px){
  .custom-carency-plan{
    margin-top:-50px;
  }
}

.list-razonet-apps{
  width:fit-content;
}
@media screen and (max-width:577px){
  .list-razonet-apps{ width: 100%; }
}


.rounded-custom-10{
  border-radius:10px;
}


/* popup */
#mainApp{
  padding:0px !important;
}


#dialog{
  background:rgba(0 0 0 /.8);
  width: 100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;

  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;

  pointer-events: none;
  visibility: hidden;
  opacity:0;

  transition-duration:0.2s;
  -webkit-transition-duration:0.2s;
  -moz-transition-duration:0.2s;
  
  z-index:200;
  transform: scale3d(0);
  animation: ease-in-out;
}
#dialog.open{
  pointer-events: visible;
  visibility: visible;
  opacity:1;
  transform: scale3d(1);
}
.dialog-pop{
  max-width:90%;
  width:550px;
  padding:32px;
  z-index: 200;
  border-radius:8px;
  box-shadow:0px 0px 10px #333;
  background:#fff;
  border:0px;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.size-icon-dialog{
  font-size:82px;
}

@media screen and (max-width:599px){
  #dialog{
    padding:24px;
  }
  .size-icon-dialog{ font-size:54px; }

  .dialog-pop{
    padding:22px
  }
  .dialog-pop .lead{
    font-size:1rem !important;
  }
}