.clear {
    clear: left;
}

* {
    font-family: 'Poppins', sans-serif;
}

body {
    background: url('../../images/fluxo-compra/background.png');
    background-position: 0 -300px;
    background-repeat: repeat-x;
    background-color: #f5f5f5;
}

.loader {
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
  
    display: flex;
    align-items: center;
    color: #FF714B;
  }

.navbar {
    box-shadow:  none;
}

.footer {
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: #f5f5f5;
    width: 100%;
    font-size: 0.7em;
    text-align: center;
    float: left;
}

#messageError {
    float: left;
    margin-top: -10px;
    color: #FF714B;
    font-size: 0.90em;
}

.shadow {
    box-shadow: 0 0 1rem rgba(0,0,0,.15)!important;
}

.rounded-5 {
    border-radius: 5px;
}

.bg-base {
    background-color: #FF714B;
}

.hide {
    display: none;
}

u.dotted {
    border-bottom: 1px dotted;
    text-decoration: none;
}

.step-circle {
    width: 2rem!important;
    min-width: 2rem!important;
    height: 2rem!important; 
    font-size:13px!important; 
    cursor:auto!important
}

.btn-secondary.step-circle {
    background-color: #e0e0e0!important;
}

.btn-continuar {
    background-color: #064780;
    transition: 0.3s;
    color: #FFFFFF;
}

.btn-continuar:hover, .btn-continuar:focus, .btn-continuar:active {
    background-color: #064780;
    opacity: 0.8;
    transition: 0.3s;
    color: #FFFFFF;
}

.opacity {
    opacity: 0.4;
}

.card-login {
    max-width: 420px;
    min-height: 400px;
}

.card-login h4 {
    font-weight: 500; line-height: 30px;
}

.btn {
    cursor:pointer!important
}

button[disabled] {
    cursor:no-drop!important
}



/*  Ripple */
.ripple {position: absolute;display: inline-block;background: rgb(221, 221, 221);border-radius: 50%;width: 5px;height: 5px;animation: rippleEffect .88s 1;opacity: 0;}
    @keyframes rippleEffect {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    100% {
        transform: scale(50);
        opacity: 0;
    }
}

.ps-brand-x30 {background-image: url(https://assets.pagseguro.com.br/ps-website-assets/v14.1.0/ps-brands-assets/img/ps-brands-x30.png);display: none;width: 45px;height: 30px;background-size: 435px 330px}
.ps-brand-x30--alelo {background-position: -65px 0;display: inline-block}
.ps-brand-x30--amex {background-position: -260px -50px;display: inline-block}
.ps-brand-x30--aura {background-position: 0 -50px;display: inline-block}
.ps-brand-x30--avista {background-position: -65px -50px;display: inline-block}
.ps-brand-x30--balance {background-position: -130px 0;display: inline-block}
.ps-brand-x30--banesecard {background-position: -130px -50px;display: inline-block}
.ps-brand-x30--banri-compras {background-position: 0 -100px;display: inline-block}
.ps-brand-x30--banrisul {background-position: -65px -100px;display: inline-block}
.ps-brand-x30--bb {background-position: -130px -100px;display: inline-block}
.ps-brand-x30--ben {background-position: -195px 0;display: inline-block}
.ps-brand-x30--boleto {background-position: -195px -50px;display: inline-block}
.ps-brand-x30--bradesco {background-position: -195px -100px;display: inline-block}
.ps-brand-x30--brasilcard {background-position: 0 -150px;display: inline-block}
.ps-brand-x30--cabal-debito {background-position: -65px -150px;display: inline-block}
.ps-brand-x30--cabal {background-position: -130px -150px;display: inline-block}
.ps-brand-x30--caixa {background-position: -195px -150px;display: inline-block}
.ps-brand-x30--default {background-position: 0 -200px;display: inline-block}
.ps-brand-x30--diners {background-position: -65px -200px;display: inline-block}
.ps-brand-x30--elo {background-position: -130px -200px;display: inline-block}
.ps-brand-x30--fortbrasil {background-position: -195px -200px;display: inline-block}
.ps-brand-x30--grandcard {background-position: -260px 0;display: inline-block}
.ps-brand-x30--hiper {background-position: 0 0;display: inline-block}
.ps-brand-x30--hipercard {background-position: -260px -100px;display: inline-block}
.ps-brand-x30--itau {background-position: -260px -150px;display: inline-block}
.ps-brand-x30--maestro {background-position: -260px -200px;display: inline-block}
.ps-brand-x30--mais {background-position: 0 -250px;display: inline-block}
.ps-brand-x30--mastercard {background-position: -65px -250px;display: inline-block}
.ps-brand-x30--pagbank {background-position: -130px -250px;display: inline-block}
.ps-brand-x30--personalcard {background-position: -195px -250px;display: inline-block}
.ps-brand-x30--pix {background-position: -260px -250px;display: inline-block}
.ps-brand-x30--prepaid-card {background-position: -325px 0;display: inline-block}
.ps-brand-x30--redeshop {background-position: -325px -50px;display: inline-block}
.ps-brand-x30--safra {background-position: -325px -100px;display: inline-block}
.ps-brand-x30--santander {background-position: -325px -150px;display: inline-block}
.ps-brand-x30--sodexo {background-position: -325px -200px;display: inline-block}
.ps-brand-x30--sorocred {background-position: -325px -250px;display: inline-block}
.ps-brand-x30--ticket {background-position: 0 -300px;display: inline-block}
.ps-brand-x30--upbrasil {background-position: -65px -300px;display: inline-block}
.ps-brand-x30--valecard {background-position: -130px -300px;display: inline-block}
.ps-brand-x30--visa-electron {background-position: -195px -300px;display: inline-block}
.ps-brand-x30--visa {background-position: -260px -300px;display: inline-block}
.ps-brand-x30--vr {background-position: -325px -300px;display: inline-block}
.ps-brand-x30--policard {background-position: -390px 0;display: inline-block}