* {
    margin : 0;
    padding: 0;
}

html,
body {
    height  : 100% !important;
    width   : 100% !important;
    overflow: hidden;
}

body {
    position: relative;
}

.tela-bloqueio {
    width           : 100%;
    height          : 100%;
    position        : absolute;
    top             : 0px;
    left            : 0px;
    z-index         : 9999;
    background-color: #fff;
    opacity         : 0;
}

.carregando {
    width           : 100%;
    height          : 100%;
    position        : absolute;
    top             : 0px;
    left            : 0px;
    font-size       : 3vw;
    z-index         : 9998;
    background-color: #fff;
    text-align      : center;
    display         : flex;
    justify-content : center;
}

.carregando .sub {
    position       : absolute;
    width          : 100%;
    height         : 50vh;
    top            : 25vh;
    align-items    : center;
    display        : flex;
    flex-direction : row;
    flex-wrap      : wrap;
    justify-content: center;
    text-align     : center;
}

.carregando .spinner-border {
    position: absolute;
    width   : 100px;
    height  : 100px;
    opacity : .5;
}

.aviso {
    z-index: 9997;
}

.aviso h1 {
    width: 100%;
}

.aviso {
    position        : absolute;
    bottom          : 20%;
    left            : 5%;
    width           : 90%;
    height          : 60%;
    font-size       : 2.5vh;
    z-index         : 9997;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: #fff;
    text-align      : center;
}

.full-height {
    height: 100%;
}

.proportional-width {
    width: calc(100vh * 0.597);
}

.centered-div {
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.tela1,
.tela01,
.tela02,
.tela03,
.tela04,
.carregando,
.aviso,
.titulo2,
.logofinal2 {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition   : all 0.5s ease-in-out;
    transition        : all 0.5s ease-in-out;
}

.tela1 {
    position          : relative;
    width             : 100%;
    height            : 100%;
    display           : flex;
    justify-content   : center;
    /* align-items    : */
}

.logo1 {
    position  : absolute;
    height    : 16.36%;
    margin-top: 5.45%;
}

.logofinal {
    position     : absolute;
    height       : 12.39%;
    bottom       : 0px;
    margin-bottom: 5.45%;
}

.divcentro {
    position       : absolute;
    top            : 21.81%;
    width          : 100% !important;
    height         : 63.35% !important;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.btn-acipa {
    position        : relative;
    color           : #fff;
    background-color: #009035;
    border-color    : #009035;
    font-weight     : bold;
    height          : calc(0.114 * 100vh);
    width           : calc(100vh * 0.200);
    font-size       : 2vh;
}

.btlimpar {
    font-size: 2vh;
}

.btn-acipa:hover {
    color           : #fff;
    background-color: rgb(38, 126, 70);
    border-color    : rgb(38, 126, 70);
}

.btn-voltar {
    font-size: 2vh;
}

.titulo1 {
    position   : absolute;
    font-size  : 3.5vh;
    font-weight: bold;
    top        : 15%;
    color      : #009035
}

.titulo2 {
    font-size  : 3vh;
    margin-top : 1vh;
    font-weight: bold;
    text-align : center;
    color      : #009035 !important;
}

.tela-padrao {
    position           : absolute;
    width              : 100%;
    height             : 77.74%;
    top                : 22.26%;
    /* background-color: red; */
    display            : flex;
    align-items        : flex-start;
    justify-content    : center;
}

.tela04 {
    display        : flex;
    justify-content: flex-start;
    align-items    : center;
    flex-direction : column;
}

.fd-verde {
    background-color: #009035;
    color           : #fff;
}

.instrucoes {
    position   : absolute;
    margin-top : 0px;
    width      : calc(100vh * 0.516);
    position   : relative;
    font-size  : 2vh;
    line-height: 3vh;
    padding    : 1vh;
    font-weight: bold;
    text-align : center;
    overflow   : hidden;
}

.seta {
    width           : 8vh;
    height          : 8vh;
    background-color: #fff;
    position        : absolute;
    transform       : rotate(45deg);
}

.seta1 {
    right: -4.1vh;
    top  : -4.1vh;
}

.seta2 {
    right : -4.1vh;
    bottom: -4.1vh;
}

.seta3 {
    left  : -4vh;
    bottom: calc(50% - 4vh);
}

.botoes-final {
    width     : calc(100vh * 0.397);
    position  : absolute;
    bottom    : 0px;
    min-height: 50px;
}

.botoes-final .btn {
    height       : 5vh;
    clear        : both;
    width        : 100%;
    margin-bottom: 5%;
    font-weight  : bold;
}

.botoes-final .btn:first-of-type {
    height: 7vh;
}

.registro {
    width          : 100%;
    height         : 10%;
    margin-top     : 12vh;
    position       : absolute;
    text-align     : center;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.registro b {
    width         : 5vh;
    height        : 7vh;
    border        : 2px solid #009035;
    border-radius : 5px;
    margin        : 30px 10px;
    font-size     : 4vh !important;
    text-align    : center;
    padding-top   : 3px;
    padding-bottom: 5px;
}

.botoes {
    width     : 100%;
    height    : 30vh;
    margin-top: 24vh;
    position  : absolute;
    text-align: center;
}

.botoes .btn {
    width    : 6vh !important;
    height   : 7vh !important;
    margin   : 1vh;
    font-size: 3vh;
}

.candidatos {
    width              : calc(100vh * 0.950);
    max-width          : 100%;
    height             : 57vh;
    margin-top         : 10vh;
    position           : absolute;
    text-align         : center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* distribui espaços iguais entre itens e nas laterais */
    align-items: flex-start;
}

.candidatos .break {
    flex-basis: 100%;
    /* força quebra de linha */
}

.ftcand {
    position           : relative;
    height             : 13vh;
    width              : 13vh;
    background-size    : cover;
    background-repeat  : no-repeat;
    background-position: 50% 50%;
    border-radius      : 10vh;
    border             : 0.5vh solid #009035;
    margin             : 10px;
    text-align         : left;
    cursor             : pointer;
}

.ftcand span {
    padding         : 0.5vh;
    background-color: rgba(0, 0, 0, .9);
    color           : #fff;
    text-align      : center;
    width           : 100%;
    margin-left     : 0px;
    display         : block;
    font-weight     : bold;
    font-size       : 1.5vh;
}

.ftcand span:first-of-type {
    margin-top: 10vh;
}

.ftcandgd {
    background-size    : cover;
    background-repeat  : no-repeat;
    background-position: 50% 50%;
    border-radius      : 500px;
    border             : 5px solid #009035;

    margin-top: 10vh;
    height    : 30vh;
    width     : 30vh;
    border    : 3nh solid #009035;
}

.ftcandgd span {
    padding         : 0.5vh;
    background-color: rgba(0, 0, 0, .9);
    color           : #fff;
    text-align      : center;
    width           : 30vh;
    margin-left     : -5px;
    display         : block;
    font-weight     : bold;
    font-size       : 2vh;
}

.ftcandgd span:first-of-type {
    margin-top: 25vh;
}

.ocultar {
    opacity: 0;
}