/* FONTES */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* GERAL */
html, body { height: auto; width: 100%; border: none; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 10px; color: #000000; background: #f7f7f7; }
a:hover, a:active, a:focus, button:hover, button:active, button:focus,  input:hover, input:active, input:focus,  textarea:hover, textarea:active, textarea:focus { outline: 0; border: none; text-decoration: none; }
a { text-decoration: none; }
::-moz-selection { background: #000000; color: #FFFFFF; }
::selection { background: #000000; color: #FFFFFF; }

main { display: flex; flex-wrap: wrap; }

/* SIDEBAR */
.sidebar { width: 310px; height: 100vh; padding-left: 80px; background: #FFFFFF; position: fixed; z-index: 2; }
.sidebar .logo { position: absolute; left: 0; top: 0; }
.sidebar .titulo { margin-top: 11vh; padding-top: 110px; position: relative; line-height: 1.5; }
.sidebar .titulo h1 { font-size: 2.3em; margin: 0; letter-spacing: 0.5px; }
.sidebar .titulo p { font-size: 2.3em; color: #c3002f; letter-spacing: 0.5px; }
.sidebar .titulo:after { content: ''; position: absolute; left: 0; bottom: -35px; width: 45px; height: 3px; background: #c3002f; }
.sidebar .usuario { margin-top: 11vh; }
.sidebar .usuario h2 { font-size: 1.5em; font-weight: bold; line-height: 1.5; letter-spacing: 0.5px; }
.sidebar .usuario p { font-size: 1.3em; line-height: 1.5; letter-spacing: 0.5px; }
.sidebar .sair { margin-top: 22vh; }
.sidebar .sair a { display: flex; align-items: center; text-transform: uppercase; color: #000000; line-height: 30px; letter-spacing: 0.5px; }
.sidebar .sair a:hover { color: #c3002f; }
.sidebar .sair a img { margin-right: 5px; width: 24px; height: 8px; }

.tab-menu { margin-top: 50px; width: 100%; display: flex; justify-content: space-between; }
.tab-menu a { font-size: 1.6em; font-weight: bold; margin: 0; letter-spacing: 0.5px; flex: 1; border-bottom: solid 2px #949494; color: #949494; }
.tab-menu a.selected { color: #c3002f; border-color: #c3002f; pointer-events: none; }

.tab-content .form { display: none; }
.tab-content .form.aprovar { display: block; }

/* CONTEUDO */
.conteudo { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding-left: 310px; min-height: 100vh; overflow: hidden; }
.conteudo .formulario { width: 50%; min-width: 520px; background: #FFFFFF; border-radius: 5px; }
.conteudo .formulario .titulo { text-align: center; font-size: 1.8em; letter-spacing: 0.5px; margin: 35px 0 65px 0; position: relative; width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; }
.conteudo .formulario .titulo .cor { color: #c3002f; }
.conteudo .formulario .titulo:after { content: ''; position: absolute; left: 50%; bottom: -25px; width: 45px; height: 3px; background: #c3002f; margin-left: -22px; }
.conteudo .formulario .form { margin: 50px auto 50px auto; width: 270px; }
.conteudo .formulario .form input[type="text"], .conteudo .formulario .form input[type="password"] { width: 100%; line-height: 43px; border: solid 1px #c9c9c9; text-align: center; border-radius: 3px; margin-bottom: 10px; font-size: 1.3em; }
.conteudo .formulario .submit { background: #f2f2f2; text-align: center; padding: 30px 0; }
.conteudo .formulario .submit input[type="submit"] { line-height: 61px; border: solid 1px #c3002f; background: #c3002f; padding: 0 50px; border-radius: 3px; font-size: 1.6em; font-weight: bold; color: #FFFFFF; text-transform: uppercase; transition: all 0.3s ease; }
.conteudo .formulario .submit input[type="submit"]:hover { background: #f2f2f2; color: #c3002f; }
.conteudo .formulario .submit.disabled input[type="submit"] { opacity: 0.5; pointer-events: none; }
.conteudo .formulario .msg-new-pass { font-size: 1.6em; letter-spacing: 0.5px; display: flex; justify-content: center; margin-bottom: 4vh; }
.conteudo .formulario .msg-info { font-size: 1.2em; letter-spacing: 0.5px; display: flex; justify-content: center; }
.conteudo .formulario .msg-info span { padding-left: 30px; }

.conteudo .questionario { position: relative; width: 750px; text-align: center; padding: 150px 0; }
.conteudo .questionario .status { width: 100%; height: 2px; background: #e4e4e4; position: relative; margin-bottom: 80px; }
.conteudo .questionario .status .barra { width: 33.333%; height: 2px; background: #c3002f; position: absolute; left: 0; top: 0; transition: all 0.3s ease; }
.conteudo .questionario .status .barra.etapa2 { width: 66.666%; transition: all 0.3s ease; }
.conteudo .questionario .status .barra.etapa3 { width: 100%; transition: all 0.3s ease; }
.conteudo .questionario .andamento { font-size: 1.3em; text-transform: uppercase; color: #949494; margin-bottom: 40px; }
.conteudo .questionario .introducao p { font-size: 1.3em; color: #949494; text-align: left; margin-bottom: 30px; }
.conteudo .questionario .introducao h2 { font-size: 3em; font-weight: bold; margin-bottom: 15px; }
.conteudo .questionario .introducao a { color: #949494; text-decoration: underline; }
.conteudo .questionario .introducao a:hover { color: #c3002f; }
.conteudo .questionario .introducao img{ width: 20px; }
.conteudo .questionario .holder { position: relative;  overflow: hidden; }
.conteudo .questionario .holder.transition { transition: all 1s ease; overflow: hidden; max-height: 2500px; }
.conteudo .questionario .holder h2 { font-size: 3em; font-weight: bold; letter-spacing: 0.5px; }
.conteudo .questionario .holder h3 { font-size: 2.5em; font-weight: 700; text-align: left; padding-left: 15px; position: relative; z-index: 2; }
.conteudo .questionario .holder h4 { font-size: 1.5em; text-align: left; padding-left: 15px; position: relative; z-index: 2; }
.conteudo .questionario .holder .inputs { width: 100%; position: relative; z-index: 2; margin-bottom: 50px; }
.conteudo .questionario .holder .inputs.large { flex-direction: column; align-items: flex-start; }
.conteudo .questionario .holder .inputs:after { content: ''; position: absolute; left: 50%; bottom: -25px; width: 45px; height: 3px; background: #c3002f; margin-left: -22px; }
.conteudo .questionario .holder p { font-size: 1.8em; letter-spacing: 0.5px; }
.conteudo .questionario .holder .form { margin: 50px auto 0 auto; background: #FFFFFF; }
.conteudo .questionario .holder .form .hld-input { padding: 30px; position: relative; }
.conteudo .questionario .holder .form input[type="text"], .conteudo .formulario .form input[type="password"] { width: 100%; line-height: 43px; border: solid 1px #c9c9c9; text-align: center; border-radius: 3px; margin-bottom: 10px; font-size: 1.3em; position: relative; }
.conteudo .questionario .holder .form textarea { width: 100%; border: solid 1px #c9c9c9; text-align: left; border-radius: 3px; margin-bottom: 10px; margin-top: 15px; font-size: 1.3em; resize: none; padding: 15px; position: relative; }
.conteudo .questionario .holder .form input[type="file"] { width: 100%; height: 50px; font-size: 200px; cursor: pointer; opacity: 0; position: relative; }
.conteudo .questionario .holder .form .hld-file { position: relative; height: 50px; }
.conteudo .questionario .holder .form .hld-file:before { content: 'Você também pode enviar um arquivo junto com os seus comentários.'; position: absolute; left: 0; top: 0; width: 100%; height: 50px; padding-top: 10px; display: flex; justify-content: center; align-items: flex-start; border: dashed 1px #c9c9c9; font-size: 14px; color: #6e6e6e; background: #FFFFFF; pointer-events: none; }
.conteudo .questionario .holder .form .hld-file:after { content: 'Tipos de arquivos permitidos: jpg, png, gif, doc, docx, pdf, ppt, pptx'; position: absolute; left: 0; bottom: 10px; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 10px; color: #6e6e6e; pointer-events: none; }
.conteudo .questionario .holder .form .hld-file .loading { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; pointer-events: none; z-index: 2; }
.conteudo .questionario .holder .form .hld-file.load .loading { display: flex; }
.conteudo .questionario .holder .form .hld-file.load:before { content: ''; }
.conteudo .questionario .holder .form .hld-file.load:after { content: ''; }
.conteudo .questionario .holder .form .hld-file.selecionado:before { content: ''; }
.conteudo .questionario .holder .form .hld-file.selecionado:after { content: ''; }
.conteudo .questionario .holder .form .hld-file .nome-arquivo { display: none; width: 100%; text-align: center; font-size: 14px; color: #6e6e6e; pointer-events: none; }
.conteudo .questionario .holder .form .hld-file.selecionado .nome-arquivo { display: block; position: absolute; top: 15px; }
.conteudo .questionario .holder .form .hld-file.selecionado .nome-arquivo i { margin-right: 10px; }

.conteudo .questionario .holder .form .checkbox.disabled { opacity: 0.05; pointer-events: none; }
.conteudo .questionario .holder .form .checkbox, .conteudo .questionario .holder .form .radio { position: relative; display: block; margin: 15px; padding: 0; }
.conteudo .questionario .holder .form .checkbox label, .conteudo .questionario .holder .form .radio label { display: inline-block; cursor: pointer; position: relative; padding-left: 30px; left: 0; font-size: 1.6em; color: #000000; text-align: left; }
.conteudo .questionario .holder .form .checkbox input[type=checkbox], .conteudo .questionario .holder .form .radio input[type=radio] { display: none; }
.conteudo .questionario .holder .form .checkbox label:before { content: ''; display: inline-block; width: 20px; height: 20px; position: absolute; left: 0; top: 2px; background: #FFFFFF; border-radius: 3px; border: solid 1px #c9c9c9; }
.conteudo .questionario .holder .form .radio label:before { content: ''; display: inline-block; width: 20px; height: 20px; position: absolute; left: 0; top: 2px; background: #FFFFFF; border-radius: 20px; border: solid 1px #c9c9c9; }
.conteudo .questionario .holder .form .checkbox.error label, .conteudo .questionario .holder .form .radio.error label { color: var(--red); }
.conteudo .questionario .holder .form .checkbox.error label:before, .conteudo .questionario .holder .form .radio.error label:before { border-color: var(--red); }
.conteudo .questionario .holder .form .checkbox input[type=checkbox]:checked + label:before, .conteudo .questionario .holder .form .radio input[type=radio]:checked + label:before { border-color: var(--green); }
.conteudo .questionario .holder .form .checkbox input[type=checkbox]:checked + label:after { content: ''; position: absolute; left: 3px; top: 5px; width: 14px; height: 14px; border-radius: 3px; background: var(--green); border: solid 2px #FFFFFF; }
.conteudo .questionario .holder .form .radio input[type=radio]:checked + label:after { content: ''; position: absolute; left: 3px; top: 5px; width: 14px; height: 14px; border-radius: 14px; background: var(--green); border: solid 2px #FFFFFF; }

.conteudo .questionario .holder .inputs.fotos { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; }
.conteudo .questionario .holder .inputs.fotos .foto { position: relative; }
.conteudo .questionario .holder .inputs.fotos .foto input[type=checkbox] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; opacity: 0; z-index: 2; cursor: pointer; }
.conteudo .questionario .holder .inputs.fotos .foto .bt-view { position: absolute; right: 5px; bottom: 5px; z-index: 3; }
.conteudo .questionario .holder .inputs.fotos .foto .bt-view a { display: block; padding: 5px 10px; font-size: 2em; color: #c3002f; background: rgba(255,255,255,0.5); border-radius: 3px;  }
.conteudo .questionario .holder .inputs.fotos .foto.selected .bt-view a { border-bottom-right-radius: 0px; }
.conteudo .questionario .holder .inputs.fotos .foto .img { width: 100%; }
.conteudo .questionario .holder .inputs.fotos .foto.selected:after { content: ''; width: 100%; height: 100%; left: 0; top: 0; position: absolute; border: solid 5px var(--green); pointer-events: none; }
.conteudo .questionario .holder .inputs.fotos .foto .img img { width: 100%; }

.conteudo .questionario .holder .inputs.campanhas { margin-top: 30px; }
.conteudo .questionario .holder .inputs.campanhas .coment-peca { font-size: 1.5em; color: #949494; font-weight: 700; text-align: left; padding: 30px 15px; position: relative; z-index: 2; }

.conteudo .questionario .holder .inputs.campanhas .foto { width: 100%; position: relative; }
.conteudo .questionario .holder .inputs.campanhas .foto .bt-view { position: absolute; right: 5px; bottom: 5px; z-index: 3; }
.conteudo .questionario .holder .inputs.campanhas .foto .bt-view a { display: block; padding: 5px 10px; font-size: 2em; color: #c3002f; background: rgba(255,255,255,0.5); border-radius: 3px;  }
.conteudo .questionario .holder .inputs.campanhas .foto.selected .bt-view a { border-bottom-right-radius: 0px; }
.conteudo .questionario .holder .inputs.campanhas .foto .img { width: 100%; }
.conteudo .questionario .holder .inputs.campanhas .foto .img img { width: 100%; }
.conteudo .questionario .holder .inputs.campanhas .aprovada { position: absolute; right: 15px; top: -75px; background: var(--green); width: 56px; height: 56px;  line-height: 56px; border-radius: 50%; color: #FFFFFF; font-size: 30px; }

.conteudo .questionario .holder .inputs.campanhas .texto { font-size: 2.5em; font-weight: 700; color: #c3002f; }
.conteudo .questionario .holder .inputs.campanhas .pdf a { font-size: 2em; font-weight: 700; background: #c3002f; color: #FFFFFF; border: solid 3px #c3002f; display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; padding: 15px; border-radius: 15px; }
.conteudo .questionario .holder .inputs.campanhas .pdf a i { font-size: 2em; margin-right: 15px; }
.conteudo .questionario .holder .inputs.campanhas .pdf a:hover { color: #c3002f; background: #FFFFFF; }

.conteudo .questionario .holder .inputs.campanhas .video video { width: 100%; }
.conteudo .questionario .holder .inputs.campanhas .audio audio { width: 100%; }

.conteudo .questionario .holder .mensagem { text-align: center; padding: 30px 0; background: #f2f2f2; font-size: 1.6em; color: #c3002f; font-weight: bold; margin-top: 30px; }
.conteudo .questionario .holder .msg-sucesso { text-align: center; padding: 30px 0; background: var(--green); font-size: 1.6em; color: #FFFFFF; margin-top: 30px; display: none; }
.conteudo .questionario .holder .msg-aprovada { text-align: center; padding: 30px 0; background: var(--green); font-size: 1.6em; color: #FFFFFF; margin-top: 30px; display: none; }

.conteudo .questionario .acoes .hld-bts { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.conteudo .questionario .acoes .comentarios { margin-top: 30px; }
.conteudo .questionario .acoes .bt a { display: block; width: 56px; height: 56px; background: #c3002f; border-radius: 50%; text-align: center; line-height: 56px; color: #FFFFFF; font-size: 3em; transition: all 0.5s ease; }
.conteudo .questionario .acoes .bt a:hover { background: var(--green); }
.conteudo .questionario .acoes .bt.open a { background: var(--green); }
.conteudo .questionario .acoes .bt.disabled { pointer-events: none; }
.conteudo .questionario .acoes .bt.disabled a { pointer-events: none; opacity: 0.6; }
.conteudo .questionario .acoes .bt-aprovar { margin-right: 15px; }
.conteudo .questionario .acoes .bt-comentar { margin-right: 15px; }

.conteudo .questionario .acoes .comentarios {  flex: 1; background: #f2f2f2; display: none; position: relative; }
.conteudo .questionario .acoes .comentarios .anteriores { padding: 30px 30px 15px 30px; }
.conteudo .questionario .acoes .comentarios .comente { padding: 0 30px; }
.conteudo .questionario .acoes .comentarios .anteriores .hld { display: flex; margin-bottom: 30px; }
.conteudo .questionario .acoes .comentarios .anteriores .img { width: 250px; opacity: 0.7; }
.conteudo .questionario .acoes .comentarios .anteriores .img a { display: block; }
.conteudo .questionario .acoes .comentarios .anteriores .img a img { width: 100%; }

.conteudo .questionario .acoes .comentarios .anteriores .texto { width: 250px; color: #c3002f; font-weight: 700; font-size: 1.2em; }

.conteudo .questionario .acoes .comentarios .anteriores .pdf .hld-link { width: 250px; display: flex; justify-content: center; }
.conteudo .questionario .acoes .comentarios .anteriores .pdf a { font-size: 2em; font-weight: 700; background: #c3002f; color: #FFFFFF; border: solid 3px #c3002f; display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; padding: 15px; border-radius: 15px; width: 56px; }
.conteudo .questionario .acoes .comentarios .anteriores .pdf a:hover { color: #c3002f; background: none; }

.conteudo .questionario .acoes .comentarios .anteriores .video { width: 250px; }
.conteudo .questionario .acoes .comentarios .anteriores .video video { width: 100%; }
.conteudo .questionario .acoes .comentarios .anteriores .audio { width: 250px; }
.conteudo .questionario .acoes .comentarios .anteriores .audio audio { width: 100%; }

.conteudo .questionario .acoes .comentarios .anteriores .comments { margin-left: 30px; width: calc(100% - 250px) }
.conteudo .questionario .acoes .comentarios .anteriores .comments .hld-cmt { display: flex; margin-bottom: 15px; }
.conteudo .questionario .acoes .comentarios .anteriores .comments .hld-cmt .txt { font-size: 1.3em; line-height: 1.3; font-weight: bold; color: #6e6e6e; text-align: left; }
.conteudo .questionario .acoes .comentarios .anteriores .comments .hld-cmt .txt span { font-size: 0.8em; font-weight: normal; }
.conteudo .questionario .acoes .comentarios .anteriores .comments .hld-cmt .ico { margin-right: 15px; }

.conteudo .questionario .acoes .comentarios .bt-fechar { position: absolute; right: 15px; top: 15px; }
.conteudo .questionario .acoes .comentarios .bt-fechar a { font-size: 2em; color: #c3002f; width: 30px; height: 30px; max-width: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: solid 1px #f2f2f2; }
.conteudo .questionario .acoes .comentarios .bt-fechar a:hover { border-color: #c3002f; }
.conteudo .questionario .acoes .comentarios .submit { text-align: center; padding: 30px 0; position: relative; }
.conteudo .questionario .acoes .comentarios .submit input[type="submit"] { line-height: 41px; border: solid 1px #c3002f; background: #c3002f; padding: 0 50px; border-radius: 3px; font-size: 1.3em; font-weight: bold; color: #FFFFFF; text-transform: uppercase; transition: all 0.3s ease; }
.conteudo .questionario .acoes .comentarios .submit input[type="submit"]:hover { background: #f2f2f2; color: #c3002f; }
.conteudo .questionario .acoes .comentarios .submit input[type="submit"].disabled { opacity: 0.5; pointer-events: none; }
.conteudo .questionario .acoes .comentarios .msg-erro { position: absolute; top: -10px; width: 100%; text-align: center; font-size: 1.3em; color: #c3002f; display: none; }
.conteudo .questionario .acoes .comentarios .msg-preencha { position: absolute; top: 0px; width: 100%; text-align: center; font-size: 1.3em; color: #c3002f; display: none; }

.conteudo .questionario .acoes .comentarios .error .msg-erro { display: block; }
.conteudo .questionario .acoes .comentarios .preencha .msg-preencha { display: block; }

.conteudo .questionario .peca { background: #f2f2f2; text-align: center; padding: 30px 0; }
.conteudo .questionario .peca a { display: inline-block; line-height: 61px; border: solid 1px #c3002f; background: #c3002f; padding: 0 50px; border-radius: 3px; font-size: 1.6em; font-weight: bold; color: #FFFFFF; text-transform: uppercase; transition: all 0.3s ease; }
.conteudo .questionario .peca a:hover { background: #f2f2f2; color: #c3002f; }
.conteudo .questionario .peca a.disabled { opacity: 0.5; pointer-events: none; }

.conteudo .questionario .holder .submit { background: #f2f2f2; text-align: center; padding: 30px 0; }
.conteudo .questionario .holder .submit a { line-height: 61px; border: solid 1px #c3002f; background: #c3002f; padding: 15px 50px; border-radius: 3px; font-size: 1.6em; font-weight: bold; color: #FFFFFF; text-transform: uppercase; transition: all 0.3s ease; }
.conteudo .questionario .holder .submit a:hover { background: #f2f2f2; color: #c3002f; }
.conteudo .questionario .holder .submit a.disabled { opacity: 0.5; pointer-events: none; }

.conteudo .questionario .resposta { position: absolute; width: 100%; left: 0; top: 0; background: #f7f7f7; height: auto; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 10; }
.conteudo .questionario .resposta .hld { width: 100%; }
.conteudo .questionario .resposta.red .aux { background: #c3002f; width: 100%; padding: 30px; }
.conteudo .questionario .resposta.green .aux { background: #68b844; width: 100%; padding: 30px; }
.conteudo .questionario .resposta h2 { font-size: 3em; color: #FFFFFF; font-weight: bold; letter-spacing: 0.5px; margin-bottom: 60px; text-align: center; }
.conteudo .questionario .resposta.green h2 { margin-top: 50px; }
.conteudo .questionario .resposta h3 { font-size: 3em; color: #FFFFFF; letter-spacing: 0.5px; margin-bottom: 60px; text-align: center; }
.conteudo .questionario .resposta h4 { font-size: 4.8em; color: #FFFFFF; font-weight: bold; letter-spacing: 0.5px; text-align: center; }
.conteudo .questionario .resposta p { font-size: 2.2em; color: #000000; letter-spacing: 0.5px; margin-top: 30px; text-align: center; }
.conteudo .questionario .resposta .bt { margin-bottom: 30px; }
.conteudo .questionario .resposta .bt a { border: solid 2px #FFFFFF; border-radius: 5px; font-size: 2.2em; color: #FFFFFF; letter-spacing: 0.5px; padding: 15px 45px; }
.conteudo .questionario .resposta .bt a:hover { background: #FFFFFF; color: #68b844; }

.conteudo .questionario.respondido .holder { max-height: 0; transition: all 1s ease; }
.conteudo .questionario.respondido.ok .resposta.green { pointer-events: all; opacity: 1; position: relative; transition: all 0.5s ease; transition-delay: 1000ms; }
.conteudo .questionario.respondido.nok .resposta.red { pointer-events: all; opacity: 1; position: relative; transition: all 0.5s ease; transition-delay: 1000ms; }

/* ICONES */
.icon .f-modal-icon { border-radius: 50%; border: 4px solid gray; box-sizing: content-box; height: 80px; margin: 20px auto; padding: 0; position: relative; width: 80px; }
.icon .f-modal-icon.f-modal-success, .icon .f-modal-icon.f-modal-error { border-color: #FFFFFF; }
.icon .f-modal-icon.f-modal-success:after, .icon .f-modal-icon.f-modal-success:before { background: #68b844; content: ''; height: 120px; position: absolute; transform: rotate(45deg); width: 60px; }
.icon .f-modal-icon.f-modal-error:after, .icon .f-modal-icon.f-modal-error:before { background: #c3002f; content: ''; height: 120px; position: absolute; transform: rotate(45deg); width: 60px; }
.icon .f-modal-icon.f-modal-success:before, .icon .f-modal-icon.f-modal-error:before { border-radius: 120px 0 0 120px; left: -32px; top: -8px; transform-origin: 60px 60px; transform: rotate(-45deg); }
.icon .f-modal-icon.f-modal-success:after, .icon .f-modal-icon.f-modal-error:after { border-radius: 0 120px 120px 0; left: 30px; top: -11px; transform-origin: 0 60px; transform: rotate(-45deg); }
.icon .f-modal-icon.f-modal-success .f-modal-placeholder, .icon .f-modal-icon.f-modal-error .f-modal-placeholder { border-radius: 50%; border: 4px solid rgba(255, 255, 255, .7); box-sizing: content-box; height: 80px; left: -4px; position: absolute; top: -4px; width: 80px; z-index: 2; }
.icon .f-modal-icon.f-modal-success .f-modal-fix { background-color: #68b844; height: 90px; left: 28px; position: absolute; top: 8px; transform: rotate(-45deg); width: 5px; z-index: 1; }
.icon .f-modal-icon.f-modal-error .f-modal-fix { background-color: #c3002f; height: 90px; left: 28px; position: absolute; top: 8px; transform: rotate(-45deg); width: 5px; z-index: 1; }
.icon .f-modal-icon.f-modal-success .f-modal-line, .icon .f-modal-icon.f-modal-error .f-modal-line { background-color: #FFFFFF; border-radius: 2px; display: block; height: 5px; position: absolute; z-index: 2; }
.icon .f-modal-icon.f-modal-success .f-modal-line.f-modal-tip, .icon .f-modal-icon.f-modal-error .f-modal-line.f-modal-tip { left: 14px; top: 46px; transform: rotate(45deg); width: 25px; }
.icon .f-modal-icon.f-modal-success .f-modal-line.f-modal-long, .icon .f-modal-icon.f-modal-error .f-modal-line.f-modal-long { right: 8px; top: 38px; transform: rotate(-45deg); width: 47px; }
.icon .f-modal-icon.f-modal-error { border-color: #FFFFFF; }
.icon .f-modal-icon.f-modal-error .f-modal-x-mark { display: block; position: relative; z-index: 2; }
.icon .f-modal-icon.f-modal-error .f-modal-placeholder { border: 4px solid rgba(255, 255, 255, .7); }
.icon .f-modal-icon.f-modal-error .f-modal-line { background-color: #FFFFFF; top: 37px; width: 47px; }
.icon .f-modal-icon.f-modal-error .f-modal-line.f-modal-left { left: 17px; transform: rotate(45deg); }
.icon .f-modal-icon.f-modal-error .f-modal-line.f-modal-right { right: 16px; transform: rotate(-45deg); }
.icon .f-modal-icon + .f-modal-icon { margin-top: 50px; }

.animate .animateSuccessTip { animation: animateSuccessTip 0.75s; }
.animate .animateSuccessLong { animation: animateSuccessLong 0.75s; }
.f-modal-icon.f-modal-success.animate:after { animation: rotatePlaceholder 4.25s ease-in; }
.f-modal-icon.f-modal-error.animate:after { animation: rotatePlaceholder 4.25s ease-in; }
.animate .animateErrorIcon { animation: animateErrorIcon 0.5s; }
.animate .animateXLeft { animation: animateXLeft 0.75s; }
.animate .animateXRight { animation: animateXRight 0.75s; }

@keyframes animateSuccessTip {
    0%, 54% { width: 0; left: 1px; top: 19px; }
    70% { width: 50px; left: -8px; top: 37px; }
    84% { width: 17px; left: 21px; top: 48px; } 
    100% { width: 25px; left: 14px; top: 45px; }
}

@keyframes animateSuccessLong {
    0%, 65% { width: 0; right: 46px; top: 54px; }
    84% { width: 55px; right: 0; top: 35px; } 
    100% { width: 47px; right: 8px; top: 38px; }
}

@keyframes rotatePlaceholder {
    0%, 5% { transform: rotate(-45deg); }
    100%, 12% { transform: rotate(-405deg); }
}

@keyframes animateErrorIcon {
    0% { transform: rotateX(100deg); opacity: 0; }
    100% { transform: rotateX(0deg); opacity: 1; }
}

@keyframes animateXLeft {
    0%, 65% { left: 82px; top: 95px; width: 0; }
    84% { left: 14px; top: 33px; width: 47px; }
    100% { left: 17px; top: 37px; width: 47px; }
}

@keyframes animateXRight {
    0%, 65% { right: 82px; top: 95px; width: 0; }
    84% { right: 14px; top: 33px; width: 47px; }
    100% { right: 16px; top: 37px; width: 47px; }
}

/* FOOTER */
.footer { position: absolute; right: 0; bottom: 0; margin: 0 30px 30px 0; }
.footer a { display: inline-block; font-size: 1em; color: #6e6e6e; text-transform: uppercase; letter-spacing: 1px; }
.footer a:hover { color: #333333; }

.nicescroll-rails-vr { left: 100%; }
.nicescroll-rails-vr:after { content: ''; display: block; position: absolute; left: -30px; top: 1%; width: 6px; height: 98%; border-radius: 6px; background: #f6f6f6; z-index: 998; }
.nicescroll-rails-vr .nicescroll-cursors:after { content: ''; display: block; width: 6px; height: 98%; border-radius: 6px; background: #c3002f; position: absolute; z-index: 999; left: -30px; top: 1%; }


/* MEDIA QUERY */
@media (min-width: 1400.02px) {
	/* XXL */
}

@media (max-width: 1500px) {
	/* XL */
}

@media (max-width: 1400px) {
	/* XL */
}

@media (max-width: 1060px) {
	/* LG */
	.conteudo .questionario { width: 510px; }
}

@media (max-width: 992px) {
	/* MD */
	main { display: block; }
	.sidebar { position: relative; height: auto; width: 100%; padding-left: 0; display: flex; align-items: center; justify-content: space-between; }
	.sidebar .logo { position: relative; }
	.sidebar .titulo { margin-top: 0; padding-top: 0; margin-left: 30px; text-align: left; flex: 1; }
	.sidebar .titulo h1 { font-size: 2em; }
	.sidebar .titulo p { font-size: 2em; }
	.sidebar .titulo:after { bottom: 0px; }
	.sidebar .usuario { margin-top: 0; }
	.sidebar .sair { margin-top: 30px; position: absolute; right: 30px; }
	.sidebar .aux { margin-right: 30px; }
	.footer { display: none; }

	.conteudo { min-height: auto }
	.conteudo .questionario .status { margin: 40px 0; }

	.conteudo { padding: 0 30px; }
	.conteudo .questionario { width: 100%; padding: 30px 0; }
	.conteudo .questionario .holder .pergunta h2 { font-size: 2.3em; letter-spacing: 0.3px; }
	.conteudo .questionario .holder .pergunta p { font-size: 1.5em; letter-spacing: 0.3px; }
	.conteudo .questionario .holder .resposta { height: 183px; }
	.conteudo .questionario .holder .resposta.green { height: 171px; }
	.conteudo .questionario .holder .resposta h2 { font-size: 2.3em; letter-spacing: 0.3px; margin-bottom: 15px; }
	.conteudo .questionario .holder .resposta h3 { font-size: 2.3em; letter-spacing: 0.3px; margin-bottom: 15px; }
	.conteudo .questionario .holder .resposta h4 { font-size: 3.6em; }
	.conteudo .questionario .holder .resposta p { font-size: 1.5em; letter-spacing: 0.3px; }
}

@media (max-width: 768px) {
	/* XS */
	/*.sidebar .logo img { width: 80px; }

	.sidebar { min-height: 700px; width: 210px; }
	.sidebar .titulo { margin-top: 0; padding-top: 90px; }
	.sidebar .titulo:after { bottom: -15px; }
	.sidebar .aux { width: 210px; }

	.conteudo .questionario .status { margin-bottom: 30px; }
	.conteudo .questionario .andamento { margin-bottom: 20px; font-size: 1.2em; }


	.conteudo { margin-top: 200px; height: calc(100vh - 500px); min-height: 500px; }
	.conteudo .questionario { width: 355px; }
	.conteudo .questionario .holder .pergunta { margin-bottom: 0px; }
	.conteudo .questionario .holder .pergunta .aux { height: 130px; }
	.conteudo .questionario .holder .pergunta h2 { font-size: 1.8em; letter-spacing: 0.3px; }
	.conteudo .questionario .holder .pergunta p { font-size: 1.2em; letter-spacing: 0.3px; }
	.conteudo .questionario .holder .resposta { height: 161px; }
	.conteudo .questionario .holder .resposta.green { height: 152px; }
	.conteudo .questionario .holder .resposta h2 { font-size: 1.8em; letter-spacing: 0.3px; margin-bottom: 15px; }
	.conteudo .questionario .holder .resposta h3 { font-size: 1.8em; letter-spacing: 0.3px; margin-bottom: 15px; }
	.conteudo .questionario .holder .resposta p { font-size: 1.2em; letter-spacing: 0.3px; margin-top: 15px; }

	.conteudo .questionario .holder .resposta.red .aux { padding: 15px 0; }
	.conteudo .questionario .holder .resposta.green .aux { padding: 15px 0; }

	.conteudo .formulario { width: 80%; min-width: 325px; }*/
}

@media (max-width: 576px) {
	/* XXS */
	.sidebar .usuario p { font-size: 1.1em; }
}