body{ 
    min-height: 100vh; 
    margin: 0;
    background: #FFF;
    padding-top: 100px;
}
header{ 
    min-height:0px;
}
footer{ 
    min-height:120px; 
}
.center {
    text-align: center;
}
/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}
footer{
  margin-top:auto; 
}
.bt{
    border-top: 1px solid rgba(0,0,0,.06);
}
.bb{
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.bl{
    border-left: 1px solid rgba(0,0,0,.06);
}
.br{
    border-right: 1px solid rgba(0,0,0,.06);
}
.tr > div{
    padding: 10px 5px 10px 5px;
}
.text-td{
    font-size: .95rem;
    font-weight: 500;
    color: rgba(0,0,0,.54);
    border-top-width: 0;
    border-bottom-width: 1px;
}

/*
*****************
*****************
NAVBAR
*****************
*****************
*/

.navbar{
    background: #189443;
    z-index: 999;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    min-height: 100px;
}
.navbar img{
    cursor: pointer;
}

/*
*****************
*****************
STEPS TOPO
*****************
*****************
*/

.steps-indicator {
    padding: 0;
    position: relative;
    display: flex;
    margin-bottom: 30px
}

.steps-indicator>li {
    list-style: none;
    display: inline-block
}

.steps-indicator>.step {
    color: #959595;
    font-family: 'Roboto', sans-serif;
    background-color: #e2e2e2;
    background-image: linear-gradient(to right, #e6e6e6, #dbdbdb);
    position: relative;
    width: 25%;
    text-align: center
}

@media (max-width :768px) {
    .steps-indicator>.step {
        display: none
    }
}

.steps-indicator.-third>.step {
    width: 33.333%
}

.steps-indicator>.step:not(:last-child)::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(50% - 20px);
    right: -18px;
    z-index: 2;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 18px;
    border-color: transparent transparent transparent #dbdbdb
}

@media (max-width :768px) {
    .steps-indicator>.step:not(:last-child)::before {
        display: none
    }
}

.steps-indicator>.step.-done,
.steps-indicator>.step.-active {
    background: #189443;
    background-image: linear-gradient(to right, #21a65b, #189443);
    color: #fff
}

@media (max-width :768px) {
    .steps-indicator>.step.-active {
        display: block;
        width: 100%
    }
}

.steps-indicator>.step.-done::before,
.steps-indicator>.step.-active::before {
    border-color: transparent transparent transparent #189443
}

.steps-indicator>.step>span,
.steps-indicator>.step>a {
    height: 100%;
    padding: 21px 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.steps-indicator>.step>a {
    cursor: pointer
}

/*
*****************
*****************
INPUT STYLE
*****************
*****************
*/

.form-control{
    border-top: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
}

.form-group {
    margin-bottom: 0;
}

.bmd-form-group {
    padding-top: 0rem;
}

.bmd-form-group.bmd-form-group-lg {
    padding-top: 1.6rem;
}

.bmd-form-group.bmd-form-group-lg .custom-file-control, .bmd-form-group.bmd-form-group-lg .form-control, .bmd-form-group.bmd-form-group-lg input::placeholder{
    padding: .5625rem 1rem;
    min-height: 54px;
}

.bmd-form-group.bmd-form-group-lg .custom-file-control, .bmd-form-group.bmd-form-group-lg .form-control, .bmd-form-group.bmd-form-group-lg input::placeholder, .bmd-form-group.bmd-form-group-lg label{
    padding: .5625rem 0.6rem;
}

.checkbox-inline, .checkbox label, .is-focused .checkbox-inline, .is-focused .checkbox label, .is-focused .radio-inline, .is-focused .radio label, .is-focused .switch label, .radio-inline, .radio label, .switch label {
    color: rgba(0,0,0,.90);
}

.custom-file-control, .form-control, .is-focused .custom-file-control, .is-focused .form-control {
    background-image: linear-gradient(0deg,#189443 4px,rgba(0,150,136,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
}

.custom-file-control, .form-control, .is-filled .custom-file-control, .is-filled .form-control {
    background-image: linear-gradient(0deg,#189443 4px,rgba(0,150,136,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
}

.is-focused .bmd-label-floating{
    background: #FFF;
    margin-left: 10px;
    top: 0.3rem !important;
}

.bmd-form-group.bmd-form-group-lg .bmd-label-static, .bmd-form-group.bmd-form-group-lg.is-filled .bmd-label-floating, .bmd-form-group.bmd-form-group-lg .is-filled .bmd-label-floating, .bmd-form-group.bmd-form-group-lg.is-focused .bmd-label-floating, .bmd-form-group.bmd-form-group-lg .is-focused .bmd-label-floating{
    top: 0.3rem !important;
    margin-bottom: 0;
}

.bmd-label-floating{
    background: #FFF;
    margin-left: 10px;
}

.bmd-form-group.is-filled .custom-file-control, .bmd-form-group.is-filled .form-control, .custom-file-control:focus, .form-control:focus{
    background-size: 100% 100%,100% 100%;
}

.bmd-form-group.bmd-form-group-lg .bmd-label-floating, .bmd-form-group.bmd-form-group-lg .bmd-label-placeholder {
    top: 2.1rem;
}

.bmd-form-group.bmd-form-group-lg .checkbox label, .bmd-form-group.bmd-form-group-lg .radio label, .bmd-form-group.bmd-form-group-lg label{
    font-size: 1rem;
}

.checkbox{
    line-height: 40px;
}

.checkbox label .checkbox-decorator .check, label.checkbox-inline .checkbox-decorator .check{
    width: 1.5rem;
    height: 1.5rem;
}

.checkbox label .checkbox-decorator .check:before, label.checkbox-inline .checkbox-decorator .check:before{
    margin-top: -1px;
    margin-left: 8px;
}

.checkbox label .checkbox-decorator .check:before, label.checkbox-inline .checkbox-decorator .check:before{
    margin-top: -1px;
    margin-left: 8px;
}

.checkbox label .checkbox-decorator .check, label.checkbox-inline .checkbox-decorator .check{
    border: .125rem solid rgba(0,0,0,.34);
}

.checkbox label, label.checkbox-inline {
    position: relative;
    padding-left: 2rem;
}

.checkbox label input[type=checkbox]:checked+.checkbox-decorator .check:before, label.checkbox-inline input[type=checkbox]:checked+.checkbox-decorator .check:before {
    color: #189443 !important;
    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
    animation: b .3s forwards;
}

.is-focused .checkbox label .checkbox-decorator .check:before,.is-focused label.checkbox-inline .checkbox-decorator .check:before {
    left: auto;
    top: auto;
}

.yellowAlert{
    background: #ffff01;
    line-height: 54px;
}

.redAlert{
    background: #ff0000;
    line-height: 54px;
    color: #fff;
}

.yellowAlert a, .redAlert a{
    color: #000;
    text-decoration: none;
    border-bottom: 1px dotted #999;
}

/*
*****************
*****************
TYPE STYLE
*****************
*****************
*/

h1.title{
    font-size: 2rem;
    font-weight: 700;
}

h2.title{
    font-size: 1.5rem;
    font-weight: 700;
}

small.sub{
    font-size: 1.3rem;
    color: #189443;
}

.helpHeader{
    font-size: 1.3rem;
    color: #FFF;
}

.helpHeader strong{
    color: #FFF;
    font-weight: 700
}


/*
*****************
*****************
BUTTON
*****************
*****************
*/

.cta-verde {
    color: #FFF;
    background: #189443;
    padding: 0.9rem 2.2rem;
    position: relative;
    font-size: 1.1rem;
}
.cta-verde:disabled::before {
    border: 2px solid #5c5c5c;
}
.cta-verde:hover:disabled{
    color: #c1c1c1;
}
.cta-verde:hover:disabled::before{
    color: #c1c1c1;
    border: 2px solid #5c5c5c;
}
.cta-verde:hover {
    color: #FFF;
    background: #189443;
}

.cta-verde:hover::before {
    content: '';
    border-radius: 4px;
    border: 2px solid #189443;
    display: block;
    position: absolute;
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
    transition: 0.15s ease-out;
    transition-property: top, right, bottom, left;
}

.cta-verde::before {
    content: '';
    border-radius: 4px;
    border: 2px solid #189443;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: 0.15s ease-out;
    transition-property: top, right, bottom, left;
}

.cta-branco {
    color: #333;
    background: #FFF;
    padding: 0.9rem 2.2rem;
    position: relative;
    font-size: 1.1rem;
}

.cta-branco:hover {
    color: #666;
    background: #FFF;
}

.cta-branco:hover::before {
    content: '';
    border-radius: 4px;
    border: 2px solid #555559;
    display: block;
    position: absolute;
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
    transition: 0.15s ease-out;
    transition-property: top, right, bottom, left;
}

.cta-branco::before {
    content: '';
    border-radius: 4px;
    border: 2px solid #555559;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: 0.15s ease-out;
    transition-property: top, right, bottom, left;
}

.titleField{
    color: #8a8a8a;
    font-size: 1rem;
}

.contentField{
    color: #484848;
    font-size: 1.1rem;
    font-style: italic;
}

h1.title small{
    color: #000;
    font-size: 1.1rem;
}

h1.title span{
    color: #189443;
    font-weight: 700;
}

#form-contrato #aceitarContrato{
    color: #FFF
}

#form-debitos h4{
    color: #189443;
    font-weight: 700;
}

#form-debitos .checkbox{
    line-height: 0;
}

#form-debitos .yellowAlert,
#form-debitos .redAlert{
    line-height: 190%;
}

#form-fatura-paga h1.title{
    color: #000;
    font-size: 2.4rem;
}

#form-fatura-paga h1.title small{
    color: #000;
    font-size: 1rem;
}

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

.card-title{
    font-weight: 700 !important;
    font-size: 1.8rem !important;
}

#form-contrato .contratoField{
    width: 100%;
    height: 340px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 1.5rem;
    border: 2px solid #949494;
    color: #444;
}

.card .card-header{
    font-weight: 700;
    font-size: 17px;
    background: #199645;
    color: #FFF !important;
}

.backgroundBlue{
    background: #0ba9f2;
    color: #FFF !important;
}

.backgroundBlue .bmd-help, .backgroundBlue .text-muted{
    color: #FFF !important;
}
 
.tr-parcelas,
.td-metodo-pagamento,
.td-metodo-pagamento p{
    cursor: pointer;
}

.tr-parcelas:hover:not(.backgroundBlue),
.td-metodo-pagamento:hover:not(.backgroundBlue){
    background: #e6f7ff;
}

.backgroundBlue .check:before{
    background: #FFF !important;
}

#paymentRow .checkbox label input[type=checkbox]:checked+.checkbox-decorator .check:before, label.checkbox-inline input[type=checkbox]:checked+.checkbox-decorator .check:before {
    color: #FFF !important;
    box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
    animation: b .3s forwards;
}

#paymentSelectRow, #boletoCondiction, #pagseguroCondiction, #depositoCondiction, #pixCondiction, #carregandoPix, #hashPix{
    display: none;
}

#paymentSelectRow .checkbox label{
    margin-bottom: 0;
}

#qrcodePix{
    width: 256px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 200px;
}

/*
*****************
*****************
404
*****************
*****************
*/
.error-page {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url(../img/error-bg.jpg);
    background-color: #189443;
    position: relative;
    padding: 225px 0 280px 0
}

@media (max-width :768px) {
    .error-page {
        padding: 65px 0 230px 0
    }
}

.error-page.-wait {
    padding: 140px 0 280px 0
}

@media (max-width :768px) {
    .error-page.-wait {
        padding: 65px 0 230px 0
    }
}

.error-page>.container {
    max-width: 730px;
    position: relative;
    text-align: center
}

.error-page.-wait>.container {
    max-width: 916px
}

.error-page>.container>.big {
    color: #1c8847;
    font-family: 'Open Sans', sans-serif;
    font-size: 19rem;
    font-weight: 900;
    position: absolute;
    top: -255px;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto
}

@media (max-width :768px) {
    .error-page>.container>.big {
        font-size: 8rem;
        top: -85px;
        padding: 2rem;
    }
}

.error-page>.container>.title {
    color: #fff;
    position: relative;
    z-index: 5;
    margin-bottom: 55px
}

@media (max-width :768px) {
    .error-page>.container>.title {
        font-size: 2rem;
        width: 80%;
        padding-top: 2rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.error-page>.container>.title::before {
    background-image: url(../img/rabisco-title-404.svg) !important;
    left: 0;
    right: 0;
    margin: 0 auto
}

.error-page>.container>.text {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.55em;
    position: relative;
    z-index: 5
}

.error-page>.container>.footer {
    text-align: center;
    margin: 45px 0
}

.error-page h2{
    font-size: 2.8rem;
}

.error-page .title::before{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(../img/rabisco-title-404.svg);
    content: '';
    width: 36px;
    height: 36px;
    position: absolute;
    bottom: -25px;
    left: 0;
}

/*
*****************
*****************
FOOTER
*****************
*****************
*/

footer .metaFooter {
    background-color: #e8e8e8;
    padding: 13px 0;
    border-bottom: 2px solid #e2e2e2;
}

footer strong{
    color:#090;
}

footer a {
    color: #111;
}

footer a:hover {
    color: #919191;
}

/*
*****************
*****************
TABLET
*****************
*****************
*/

@media only screen and (max-width: 768px) {
    .yellowAlert, .redAlert{
        line-height: 150%;
        padding: 0.8rem 0.8rem;
    }
    h5.card-title{
        font-size: 1.5rem !important;
    }
}

/*
*****************
*****************
MOBILE
*****************
*****************
*/

@media only screen and (max-width: 600px) {

    .template-contrato .step5, .template-contrato .step7{
        display: none !important;
    }   

    .helpHeader{
        display: none;
    }
    h1.title{
        line-height: 120%;
    }

    h1.title small{
        line-height: 150%;
    }

    small.sub{
        font-size: 1rem;
        line-height: 100%;
        display: inline-block;
    }

    .cta-verde, .cta-branco{
        font-size: 0.8rem;
    }

    .yellowAlert, .redAlert{
        line-height: 150%;
        padding: 0.8rem 0.8rem;
    }
}
@media (max-width: 767px) {
    .b-sm{
      border-top: 1px solid rgba(0,0,0,.06) !important;
      border-left: 1px solid rgba(0,0,0,.06) !important;
      border-right: 1px solid rgba(0,0,0,.06) !important;
    }
  }

/*
*****************
*****************
SPINNER
*****************
*****************
*/

.lds-ring {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 44px;
    height: 44px;
    margin: 8px;
    border: 3px solid #189443;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #189443 transparent transparent transparent;
  }
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}