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; 
}
/*
*****************
*****************
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: 33.3%;
    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;
}

.gridCheckbox {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-gap: 0;
}

.fieldSize{
    padding-top: 1.6rem;
    line-height: 54px;
}

.fieldSize .checkbox{
    line-height: 54px;
}

.fieldSize button{
    width: 100%;
    font-size: 0.9rem
}

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

.yellowAlert 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
}

.tituloHeader{
    font-size: 1.5rem;
    color: #FFF;
}


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

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

.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;
    border: 1px solid #555559;
}

.cta-branco:hover {
    color: #666;
    background: #FFF;
    border: 1px solid #555559;
}

/*
*****************
*****************
VALIDATE
*****************
*****************
*/

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  background-color: transparent;
  border-color:  red;
}

.parsley-errors-list {
  margin: 10px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  color: #B94A48;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

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

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

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

#form-etapa-concluida 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;
}

.table-responsive>.table-bordered {
    border: 1px solid rgba(0,0,0,.06);
}

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

/*
*****************
*****************
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;
}

.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;
  }

/*
*****************
*****************
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) {
    .gridCheckbox {
        grid-template-columns: repeat(1, 100%);
        grid-row-gap: 10px;
    }

    .yellowAlert{
        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-passo1 .step2, .template-passo1 .step3{
        display: none;
    }

    .template-passo2 .step1, .template-passo2 .step3{
        display: none !important;
    }

    .template-passo3 .step1, .template-passo3 .step2{
        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{
        line-height: 150%;
        padding: 0.8rem 0.8rem;
    }

    .table-responsive td{
        min-width: 280px !important;
    }

}

@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);
    }
}

/*
*****************
*****************
NIVEIS DE SATISFACAO
*****************
*****************
*/

div#niveis .parsley-required{
    font-size:1rem;
}
  
.nivel{
    display:inline-block;
    width: 42px;
    height: 43px;
    cursor:pointer;    
}

.nivel:not(.n0){
    margin-left:10px;
}

.nivel.n0{
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("../img/emoticons-satisfacao.png");
    background-position-x: -2px;
}
.nivel.n0:hover, .n0.active{
    background-image: url("../img/emoticons-satisfacao.png");
    background-position-x: -2px;
}

.nivel.n1{
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("../img/emoticons-satisfacao.png");
    background-position-x: -67px;
}
.nivel.n1:hover, .n1.active{
    background-image: url("../img/emoticons-satisfacao.png");
    background-position-x: -67px;
}

.nivel.n2{
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("../img/emoticons-satisfacao.png");
    background-position-x: -131px;
}
.nivel.n2:hover, .n2.active{
    background-image: url("../img/emoticons-satisfacao.png");
    background-position-x: -131px;
}

.nivel.n3{
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("../img/emoticons-satisfacao.png");
    background-position-x: -195px;
}
.nivel.n3:hover, .n3.active{
    background-image: url("../img/emoticons-satisfacao.png");
    background-position-x: -195px;
}

.nivel.n4{
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("../img/emoticons-satisfacao.png");
    background-position-x: -260px;
}
.nivel.n4:hover, .n4.active{
    background-image: url("../img/emoticons-satisfacao.png");
    background-position-x: -260px;
}

.nivel.n5{
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("../img/emoticons-satisfacao.png");
    background-position-x: -324px;
}
.nivel.n5:hover, .n5.active{
    background-image: url("../img/emoticons-satisfacao.png");
    background-position-x: -324px;
}

.emoticon{
	display: inline-block;
	width: 22px;
	height: 21px;
	margin-bottom: -5px;
    margin-right: 3px;
}
.emoticon.joia{
	background-image:url("../img/emoticons.png");
    background-position-x: -19px;
}
.emoticon.feliz{
	background-image:url("../img/emoticons.png");
    background-position-x: -61px;
}
.emoticon.triste{
	background-image:url("../img/emoticons.png");
	background-position-x: -40px;
}

.emoticon-hand{
    display:inline-block;
    width: 42px;
    height: 42px; 
}
.emoticon-hand.pare{
	background-image:url("../img/emoticons-conclusao.png");
	background-position-x: -75px;
}
.emoticon-hand.palma{
	background-image:url("../img/emoticons-conclusao.png");
	background-position-x: -36px;
}