/* RESET */
body{background: var(--bg-main-2);}

main.content-site-devmedia {
    background: #f7f7f7;
}

/* TELA SALA */
.task-footer label:first-child{
    padding-right: 10px;
}

.visitor-block-horizontal {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.visitors-block-vertical {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}

.card-buttom-numeros {
    width: auto;
    width: 100%;
    padding-left: 60px;
}

.card-start-numeros{
    padding: 10px 20px;
    display: inline-block;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    border-radius: 20px;
    background: #0AC5D4;
    box-shadow: 12px 15px 20px rgba(177, 177, 177, 0.16);
    transition: background .2s ease;
    cursor: pointer;
}

/* TELA EXERCÍCIO */
.questao-wrapper .pre {
    padding: 5px 0;
    background-color: #f5f5f5;
}

.questao-wrapper .questao-content .questao-buttons-container .questao-button{
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    background-color: transparent;
    cursor: default;
}

.syntaxhighlighter .line.alt2, .syntaxhighlighter .line.alt1{
    background-color: #f5f5f5 !important;
}

.questao-text .syntaxhighlighter .line.alt2, .questao-text .syntaxhighlighter .line.alt1{
    background-color: #fff !important;
}

textarea.textarea_resposta {
    border: none;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 5px;
    color: #454545;
    padding: 20px;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 14px;
    max-height: 400px;
    min-height: 300px;
    min-width: 100%;
    max-width: 100%;
}

.exercicio-complete .syntaxhighlighter{
    padding: 5px 0 !important;
}

.exercicio-complete .syntaxhighlighter table td.gutter .line, .exercicio-complete .syntaxhighlighter table td.code .line{
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}

.exercicio-complete textarea.textarea_resposta{
    display: none;
}

.exercicio-complete .questao-text{
    margin-bottom: 20px;
}

.exercicio-complete .resposta_complete {
    border: none;
    border-bottom: 1px solid #454545;
    width: auto;
    max-width: 120px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.questao-button button{
    position: relative;
    z-index: 2;
}

.message-suggestion{
    width: 100%;
}

.message-suggestion .suggestion-card{
    max-width: 372px;
    flex-wrap: wrap;
    margin: 0 auto;
}

.message-suggestion .suggestion-card .suggestion-card-button{
    flex: 0 0 auto;
    width: 105px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
}

.message-suggestion .suggestion-card .suggestion-card-button a{
    font-size: 12px;
    height: 24px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.message-suggestion .next-step-text{
    font-size: 24px;
    text-align: center;
    color: #414141;
    width: 100%;
}

.message-container.erro .message-suggestion, .message-container.erro .message-content, .message-container.acerto .message-suggestion, .message-container.acerto .message-content, .message-container.medalha .message-suggestion, .message-container.medalha .message-content, .message-container.aguarde .message-suggestion{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.message-container.erro .message-suggestion .suggestion-card, .message-container.acerto .message-suggestion .suggestion-card, .message-container.medalha .message-suggestion .suggestion-card, .message-container.aguarde .message-suggestion .suggestion-card{
    width: calc(100% / 2 - 20px);
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
    border: 1px solid #0bc4d3;
    box-shadow: 3px 6px 9px rgba(0, 0, 0, 0.15);
    padding: 35px 25px;
}

.message-container.erro .message-content, .message-container.acerto .message-content, .message-container.medalha .message-content, .message-container.aguarde .message-content{
    text-align: center;
    line-height: 24px;
}

.medalha .message-title label {
    color: #11B2C4 !important;
}
.medalha .message-title span {
    color: #11B2C4 !important;
}

.label_incentivo{
    font-size: 24px;
    text-transform: uppercase;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 0 50px 0;
    color: #454545;
}

.sala-tarefas .messages-wrapper{
    flex-wrap: wrap;
    flex-direction: column;
    height: initial;
}

.sala-tarefas .message-container{
    max-width: 860px;
}

.sala-tarefas .message-content ul li{
    text-align: left;
    margin: 10px;
}

.sala-tarefas .message-button{
    font-size: 14px;
    font-weight: 600;
}

.sala-tarefas .message-container.erro .suggestion-card .suggestion-card-info, .sala-tarefas .message-container.acerto .suggestion-card .suggestion-card-info, .sala-tarefas .message-container.medalha .suggestion-card .suggestion-card-info, .sala-tarefas .message-container.aguarde .suggestion-card .suggestion-card-info{
    margin-right: 0;
}

.sala-tarefas .message-container.erro .suggestion-card .suggestion-card-info span, .sala-tarefas .message-container.acerto .suggestion-card .suggestion-card-info span, .sala-tarefas .message-container.medalha .suggestion-card .suggestion-card-info span, .sala-tarefas .message-container.aguarde .suggestion-card .suggestion-card-info span{
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.sala-tarefas .message-container.erro .suggestion-card .suggestion-card-info label, .sala-tarefas .message-container.acerto .suggestion-card .suggestion-card-info label, .sala-tarefas .message-container.medalha .suggestion-card .suggestion-card-info label, .sala-tarefas .message-container.aguarde .suggestion-card .suggestion-card-info label{
    width: 100%;
    margin-bottom: 5px;
}

.message-suggestion .suggestion-card .suggestion-card-button{
    width: 100%;
}

.sala-tarefas .message-container.aguarde .message-content{
    text-align: left;
}

.sala-tarefas .message-container.erro .message-suggestion .suggestion-card .suggestion-card-button, .sala-tarefas .message-container.acerto .message-suggestion .suggestion-card .suggestion-card-button, .sala-tarefas .message-container.medalha .message-suggestion .suggestion-card .suggestion-card-button{
    margin-top: 15px;
}

.sala-tarefas .message-container.erro .message-suggestion .suggestion-card .suggestion-card-button a, .sala-tarefas .message-container.acerto .message-suggestion .suggestion-card .suggestion-card-button a, .sala-tarefas .message-container.medalha .message-suggestion .suggestion-card .suggestion-card-button a{
    width: 100%;
    justify-content: center;
}

.exercicio-container > .hits-button {
    display: none;
}

.hits-button{
    text-decoration: none;
    /*margin-top: 10px;*/
    padding: 5px 20px;
    color: #2D5E75;
    font-size: 10px;
    font-weight: 600;
    border-radius: 20px;
    background: #F7F7F7;
    box-shadow: 12px 15px 20px rgba(177, 177, 177, 0.16);
    cursor: pointer;
}

.info-exercicio {
    /*position: fixed;
    bottom: 170px;*/
    width: 270px;
    border-radius: 10px;
    background-color: #008D9B !important;
    padding: 20px 30px 15px;
    box-sizing: border-box;
    margin-top: 15px;
}

.info-exercicio .usuario img {
    height: 32px;
    width: 32px;
    border-radius: 50px;
    object-fit: cover;    
}

.sala-tarefas .info-header img{
    display: none;
}

.info-exercicio .usuarios {
    display: flex;
    width: 100%;
    justify-content: center;
}

.info-exercicio .usuarios .usuario{
    margin: 0 12px;
}

.info-exercicio .usuarios .usuario > a{
    display: flex;
    cursor: pointer;
}

.titulo-info-exercicio p {
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    text-align: center;
    font-weight: 600;
    margin: 0;
}

.titulo-info-exercicio {
    border-bottom: 1px solid #4AA4AC;
    padding-bottom: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.questao-info-container{
    padding-top: 20px !important;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 140px;
    height: calc(100vh - 140px);
}

.questao-info-container .questao-info .total-container .total{
    flex-wrap: wrap;
    justify-content: center;
}

.questao-info-container .questao-info .total-container .total li{
    margin-bottom: 10px;
}

.sala-tarefas .questao-wrapper{
    padding-top: 0;
}

.sala-tarefas .info-header span{
    margin-top: 10px;
}

.porcentagem {
    flex: 0 0 auto;
    width: 40px;
    text-align: right;
    color: #21FB91;
    font-size: 12px;
    font-family: "montserrat", sans-serif;
    font-weight: 600;
}

.info {
    width: 100%;
    display: flex;
    align-items: center;
}

.info .texto-porcentagem {
    flex: 1 1 auto;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    font-size: 12px;
}

.porcentagem {
    flex: 0 0 auto;
    width: 40px;
    text-align: right;
    color: #21FB91;
    font-size: 12px;
    font-family: "montserrat", sans-serif;
    font-weight: 600;
}

.usuarios-exercicio {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.texto-usuarios {
    width: 100%;
    margin: 20px 0;
}

.texto-usuarios p {
    margin: 0;
    font-size: 12px;
    color: #fff;
}

.barra-progresso{
    margin-top: 15px;
}

.barra-progresso progress{
    width: 100%;
    height: 8px;
}

.sala-tarefas .info-header {
	padding: 20px 30px 0;
}

.sala-tarefas .info-header img {
    position: absolute;
    top: -35px;
    margin: 0;
}

.sala-tarefas .questao-rewards{
    padding: 20px 30px 25px 30px;
}

.sala-tarefas .hightlight-content{
    font-weight: 600;
}

.sala-tarefas .respostas-discursivas-usuario {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-top: 40px;
}

.sala-tarefas .resposta-discursiva-usuario {
    width: 100%;
    margin: 10px 0;
    box-sizing: border-box;
    font-size: 12px;
}

.sala-tarefas p.titulo-respostas {
    font-size: 18px;
    text-transform: uppercase;
    color: #8795a2;
    font-weight: 600;
    margin-top: 0;
}

.barra-progresso progress[value]::-webkit-progress-value { background-color: #08F281; border-radius:8px 0 0 8px;}
.barra-progresso progress[value]::-moz-progress-bar { background-color: #08F281; width: auto; border-radius: 4px; border-radius:8px 0 0 8px;}
.barra-progresso progress[value]::-ms-fill { background-color: #08F281; border-radius:8px 0 0 8px; border:none;}
.barra-progresso progress[value]::-ms-progress-bar { background-color: #E9ECF3; border-radius: 4px;}
.barra-progresso progress[value]::-ms-progress-value { background-color: #08F281; border-radius:8px 0 0 8px;}
.barra-progresso progress[value]::-ms-fill { background-color: #08F281; border-radius:8px 0 0 8px;}

.container-resposta-discursiva-usuario {
    display: flex;
}

.resposta-discursiva-usuario.adm .container-resposta-discursiva-usuario{
    flex-direction: row-reverse;
}

.container-resposta-discursiva-usuario .img-usuario img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50px;
}

.container-resposta-discursiva-usuario .info-usuario {
    display: flex;
    flex-wrap: wrap;
    width: 100px;
    justify-content: center;
    flex: 0 0 auto;
}

.container-resposta-discursiva-usuario .img-usuario {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.container-resposta-discursiva-usuario .nome-usuario {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.container-resposta-discursiva-usuario .nome-usuario .usuario {
    margin: 0;
    font-size: 12px;
}

.container-resposta-discursiva-usuario .conteudo-interacao {
    padding: 20px;
    flex: 1 1 auto;
    background-color: #ffff;
    position: relative;
    box-shadow: 0px 3px 6px rgba(0,0,0,.1);
    border-radius: 5px;
}

.resposta-discursiva-usuario.adm .conteudo-interacao {
    background-color: #7ce8f1;
}

.container-resposta-discursiva-usuario .conteudo-interacao .conteudo-resposta {
    margin: 0;
    font-size: 14px;
}

.container-resposta-discursiva-usuario .conteudo-interacao:before{
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #fff;
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.resposta-discursiva-usuario.adm .container-resposta-discursiva-usuario .conteudo-interacao:before{
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid transparent;
    border-left: 15px solid #7ce8f1;
    position: absolute;
    right: -30px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

.sala-tarefas .total-container label{
    text-align: center;
    margin-bottom: 10px;
}

.sala-tarefas .reward-container {
    width: 100%;
    justify-content: flex-start;
}

.sala-tarefas .questao-rewards {
    display: flex;
    flex-wrap: wrap;
}

.sala-tarefas .objetive-rewards {
    width: 100%;
    display: flex;
}

.salas-tarefas .reward-container label{
    font-size: 12px;
    font-weight: 400;
}

.sala-tarefas .objetive-rewards .objective {
    width: 50%;
    display: flex;
    margin: 0;
    flex-wrap: wrap;
}

.sala-tarefas .objetive-rewards .reward {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 5px; 
}

.sala-tarefas .badge svg{
    width: 25px;
}

.sala-tarefas .reward-container label{
    font-size: 12px;
    font-weight: 400px;
}

.sala-tarefas .objective-value label, .sala-tarefas .reward-value label {
    font-size: 12px;
    font-weight: 700;
}

.salas-tarefas .reward-container .badge label{
    font-size: 12px;
}

.sala-tarefas .objective-value, .sala-tarefas .reward-value {
    background-color: #097580;
    width: 100px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-top: 9px;
    position: relative;
}

.sala-tarefas .objective-value .check, .sala-tarefas .reward-value .badge {
    position: absolute;
    top: -10px;
    right: 8px;
    width: 20px;
    height: 20px;
    margin: 0;
}

.sala-tarefas .reward-value .badge {
    top: -15px !important;
    right: 10px !important;
}

.sala-tarefas .reward-value .badge svg{
    width: 24px;
}

.sala-tarefas .objective-label label, .sala-tarefas .reward-label label {
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
}

.sala-tarefas .area-medals {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 20px;
}

.respostas-corretas {
    margin: 40px;
    width: calc(100% - 80px);
    padding: 30px;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,.05);
    display: flex;
    flex-wrap: wrap;
    position: relative;
    border-radius: 10px;
}
.respostas-corretas .top{
    top: 20px;
}

.respostas-corretas .titulo-respostas-corretas {
    width: 100%;
}

.respostas-corretas .titulo-respostas-corretas h1 {
    margin: 0;
    color: #6B6B6B;
    font-weight: 500;
    font-size: 15px;
}

.respostas-corretas .titulo-respostas-corretas h1 span{
    font-weight: 600;
    color: #8795A2;
}

.respostas-corretas .exercicios {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}

.respostas-corretas .exercicios .exercicio {
    width: 100%;
    display: flex;
    font-size: 14px;
    height: auto;
    min-height: 40px;
    align-items: center;
    border-radius: 10px;
}

.respostas-corretas .exercicios .exercicio:nth-child(odd) {
    background-color: #f4f4f4;
}

.respostas-corretas .info-colunas {
    width: 100%;
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #575757;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}
.respostas-corretas .titulo-exercicio {
    flex: 1 1 auto;
    /*padding-left: 10px;*/
}

.respostas-corretas .titulo-exercicio .exercicio-link{
    color: #454545;
}

.respostas-corretas .data-exercicio {
    flex: 0 0 auto;
    width: 200px;
    text-align: center;
}

.respostas-corretas .coluna-titulo {
    flex: 1 1 auto;
    /*padding-left: 10px;*/
}

.respostas-corretas .coluna-data {
    flex: 0 0 auto;
    width: 200px;
    text-align: center;
}

.exercicio-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.exercicio-container .titulo-exercicio {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
}

.pergunta-exercicio {
    width: 100%;
}

.respostas {
    width: 100%;
    display: flex;
    margin-top: 35px;
    flex-wrap: wrap;
}

.resposta {
    width: 100%;
    margin-top: 20px;
    border: 1px solid #f1f1f1;
    padding: 30px;
    box-sizing: border-box;
    font-size: 14px;
}

.resposta.gabarito {
    background-color: #9fecbe;
    border: 1px solid #66bd89;
    position: relative;
}
.feedback-btn.loading {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_load_gabarito {
    width: 15px;
    height: 15px;
    border: 2px solid #bbbbbb;
    border-top-color: white;
    border-right-color: white;
    border-bottom-color: white;
    border-radius: 50%;
    margin-left: 5px;
    animation: loading 1s linear infinite;
}
@keyframes loading {
    to {
        transform: rotate(360deg);
    }
}

.completest .resposta.gabarito {
    background: #fff;
    border: 1px solid #fff;
    border-bottom: 1px solid #6d6d6d;
}

.completest .resposta.gabarito:last-child{
    border: none;
}

.completest.pergunta-exercicio {
    font-size: 16px;
    font-weight: 500;
}

.complete-resultado {
    color: #000;
    background: #9fecbe;
    padding: 2px 9px;
    border: 1px solid #66bd89;
}

.respostas-corretas .area-recomendacao {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bee5ec;
    margin: 40px 0 0 0;
    padding: 15px 0;
    border: 1px solid #90c8d2;
}

.recomendacao-resposta-certa{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bee5ec;
    margin: 0 0 30px 0;
    border: 1px solid #90c8d2;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    line-height: 24px;
    
}

.recomendacao-gabarito {
    margin: 0 0 15px 0;
    color: #454545;
    width: 100%;
    text-align: center;
}

.recomendacao-gabarito a {
    color: #454545;
    font-weight: 600;
}

.respostas-corretas .area-recomendacao p {
    margin: 0;
    text-align: center;
}

.area-recomendacao p a {
    color: #1f4f66;
}

/* .resposta.gabarito:after {
    content: "Sua resposta";
    position: absolute;
    top: -10px;
    right: -1px;
    background-color: #3d9e64;
    font-size: 12px;
    color: #fff;
    width: 130px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
} */

.carreira-admin .link-sala-teste {
    display: flex;
    justify-content: center;
    background-color: #1f4f66;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight:700;
}
.carreira-admin .link-sala-teste:hover{
    color:#1f4f66;
    background-color:white;
    text-decoration: none;
}

.pergunta-exercicio {
    font-size: 14px;
    margin-top: 35px;
}

.texto-acertos {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #EFEFEF;
    width: 100%;
}

.texto-acertos p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #6B6B6B;
}

.link-voltar-exercicio {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.respostas-corretas .link-voltar-exercicio .hits-button {
    background-color: #18bcd4;
    width: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    height: 40px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 0;
    border-radius: 50px;
}

.floating-container.top.right path.img-seta-menu-path {
    stroke: #fff;
    z-index: 1;
    fill: transparent;
}

.floating-container.top.right svg.img-seta-menu {
    z-index: 1;
    height: 10px;
    width: 10px;
    transform: rotate(90deg);
}

.floating-container.top.right.hits-button {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

.status-current span.question, .status-continuity span.question, .status-closed span.question, .status-completed span.question {
    height: 15px;
    width: 15px;
    background-color: #cacaca;
    border-radius: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.status-current span.question.finished, .status-continuity span.question.finished, .status-closed span.question.finished, .status-completed span.question.finished {
    background-color: #5bd07a;
}

.task-infos span{
    margin: 10px 0;
}

.task-infos .objetivo{
    margin-top: 0;
}

.task-button{
    margin-right: 5px;
}

.task--unlocked .task-button, .task--continuity .task-button{
    margin-top: 0;
    margin-bottom: 5px;
}

@-moz-document url-prefix() {
    .container::before, .container::after{
        display: none !important;
    }
}

.alerta-exercicio{
    width: 100%;
    display: flex;
    justify-content: center;
    border: 1px solid orange;
    background-color: #fff6e9;
    border-radius: 15px;
    text-align: center;
    padding: 5px 10px;
    margin-bottom: 40px;
}

.alerta-exercicio > div{
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    padding: 15px 30px;
    box-sizing: border-box;
    margin: 15px 0;
    text-align: center;
    line-height: 24px;
    max-width: 420px;
}

.alerta-exercicio > div > p{
    font-size: 14px;
    margin: 0;
}

.img-load img{
    width: 50px;
    height: 50px;
}

/* OPACIDADE DE EXERCÍCIO COMPLETE */
.exercicio-complete .img-load{
    display: flex;
    height: 50px;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    opacity: 1;
    -webkit-animation-name: load_opacidade;
    -webkit-animation-duration: .4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: .2s;
    animation-name: load_opacidade;
    animation-duration: .4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .2s;
}

.header-container .header-title, .header-container .header-subtitle{cursor: default;}

@supports (-ms-ime-align:auto) {

    .erro .message-title:before, .acerto .message-title:before, .medalha .message-title:before, .aguarde .message-title:before
    {
        display: none !important;
    }

    .erro .message-title{min-width: 400px;}
    .acerto .message-title{min-width: 450px;}
    .medalha .message-title{min-width: 450px;}
    .aguarde .message-title{min-width: 450px;}
}

@-webkit-keyframes load_opacidade {
    0%   { opacity: 1; display: flex;}
    100% { opacity: 0; display: none; content: unset;}
}

@-moz-keyframes load_opacidade {
    0%   { opacity: 1; display: flex;}
    100% { opacity: 0; display: none; content: unset;}
}

@-o-keyframes load_opacidade {
    0%   { opacity: 1; display: flex; }
    100% { opacity: 0; display: none; content: unset;}
}

@keyframes load_opacidade {
    0%   { opacity: 1; display: flex;}
    100% { opacity: 0; display: none; content: unset;}
}

.exercicio-complete .questao-text {
    opacity: 0;
    -webkit-animation-name: codigo_opacidade;
    -webkit-animation-duration: .4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: .2s;
    animation-name: codigo_opacidade;
    animation-duration: .4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .2s;
    -moz-animation-name: codigo_opacidade;
    -moz-animation-duration: .4s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-delay: .2s;
    z-index: 1;
    position: relative;
}

@-webkit-keyframes codigo_opacidade {
    0%   { opacity: 0; }
    90%  { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes codigo_opacidade {
    0%   { opacity: 0; }
    90%  { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes codigo_opacidade {
    0%   { opacity: 0; }
    90%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes codigo_opacidade {
    0%   { opacity: 0; }
    90%  { opacity: 0; }
    100% { opacity: 1; }
} 

.exercicio-complete .questao-content:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("https://www.devmedia.com.br/carreira/image/loading.gif");
    background-color: transparent;
    background-size: 50px;
    background-position: center 20px;
    background-repeat: no-repeat;
    top: 50px;
    left: 0;
    opacity: 1;
    transition: .2s linear;
    animation-name: load_opacidade;
    animation-duration: .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: .05s;
 }
 
 .exercicio-complete .questao-content {
    position: relative;
 }
 
 .exercicio-complete .questao-content.loaded:after {
    opacity: 0;
    pointer-events: none;
 }

path.svg_check_front{
    fill: #0ac5d4; 
}

/* Novo */
.resposta-usuario.questao-feedback-container {
    margin-top: 20px;
    padding: 15px;
    background-color: #253a44;
    border-radius: 10px;
    color: #fff;
}
.resposta-usuario .questao-text.onde-errei {
    margin-bottom: 0;
}
.resposta-usuario .questao-title:not(.sua-resposta){
    font-size: 15px;
}
.resposta-usuario.questao-feedback-container .questao-title {
    color: #fff;
}
.resposta-usuario .questao-text.onde-errei .line-numbers {
    margin-bottom: 0;
}
/* Novo */

/* MEDIA QUERIES */
@media(max-width: 1366px){
    .task-infos {
        /* display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; */
    }
    
    .task-infos label {
        width: 100%;
    }
    
    .task-infos span {
        width: 100%;
    }

    .hits-button{
        margin-left: 0;
        margin-bottom: 5px;
    }
}

@media(max-width: 1200px){

    .message-container.erro .message-suggestion{
        justify-content: center;
        align-items: center;
    }

    .message-container.erro .message-suggestion .suggestion-card{
        width: 100%;
    }

    .sala-tarefas .message-container.erro .message-suggestion .suggestion-card .suggestion-card-button, .sala-tarefas .message-container.acerto .message-suggestion .suggestion-card .suggestion-card-button, .sala-tarefas .message-container.medalha .message-suggestion .suggestion-card .suggestion-card-button{
        max-width: 150px;
    }

    .message-suggestion{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .message-container.erro .message-suggestion .suggestion-card, .message-container.acerto .message-suggestion .suggestion-card, .message-container.medalha .message-suggestion .suggestion-card{
        width: calc(100% / 2 - 20px);
    }

}

@media(min-width: 900px) and (max-width: 1023px){

    .tabs-content{
        flex-wrap: wrap;
    }

    .room-container-left{
        text-align: center;
        width: 100%;
        flex: 1 1 auto;
    }

    .room-container-left .room-header{
        justify-content: center;
    }

    .sala-tarefas .tarefas-wrapper{
        padding-top: 0;
    }

    .room-wrapper.sala-tarefas .content-container{
        padding: 30px 0px 60px 0px;
    } 

    .sala-tarefas .page-content.flex-end{
        justify-content: flex-start;
    }

    .sala-tarefas .content-container{
        width: calc(100% - 320px);
    }
}

@media(max-width: 899px){
    .questao-buttons-container{
        margin-bottom: 30px;
    }
}

@media(max-width: 768px){
    
    .erro .message-title:before, .aguarde .message-title:before, .acerto .message-title:before, .medalha .message-title:before {
        top: -8px !important;
        left: calc(50% - 16px) !important;
        transform: rotate(-45deg) !important;
    }

    .message-header {
        flex-direction: column;
    }
    
    .message-icon {
        margin-bottom: 15px;
    }
    
    .message-title {
        width: 100% !important;
        margin: 0 !important;
        flex-wrap: wrap;
        display: flex;
    }
    
    .message-title span {
        white-space: pre-wrap;
    }
    
    .message-title label {
        white-space: pre-wrap;
    }
    .sala-tarefas .message-container{
        margin-bottom: 30px;
    }

    .messages-wrapper .label_incentivo{
        text-align: center;
        font-size: 22px;
    }

    .pre pre{
        white-space: pre-wrap;
    }

    .resposta{
        padding: 15px;
    }

    .info-colunas{
        display: none !important;
    }

    .respostas-corretas .titulo-exercicio{
        padding-left: 0px;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .respostas-corretas .data-exercicio{
        width: 100%;
    }

    .respostas-corretas .exercicios .exercicio{
        margin: 10px 0;
        padding: 10px 0;
        flex-wrap: wrap;
    }

    .respostas-corretas .titulo-respostas-corretas h1{
        font-size: 18px;
    }

    .respostas-corretas .link-voltar-exercicio .hits-button{
        font-size: 12px;
    }

}

@media(max-width: 540px){
    .message-container.erro .message-suggestion .suggestion-card, .message-container.acerto .message-suggestion .suggestion-card, .message-container.medalha .message-suggestion .suggestion-card{
        width: 100%;
        max-width: 360px;
    }

    .task-button {
        width: 220px;
    }
}

@media(max-width: 480px){
    .visitor-block-horizontal{
      flex-direction: column;
    }

    .robo-sala {
        display: none;
    }

    .technology-banner.banner--unlocked {
        border-radius: 16px !important;
    }
  }

@media(max-width: 500px){

    .task-content-wrapper{
        padding: 25px;
        display: flex;
    }

    .task-infos{
        flex: 1 1 auto;
    }

    .task-badge{
        width: 120px;
        flex: 0 0 auto;
    }

}

@media(max-width: 400px){
    .label_incentivo{
        font-size: 20px;
        text-align: center;
    }

    .texto-acertos{
        margin: 40px 20px;
    }

    .respostas-corretas{
        margin: 40px 20px;
        width: calc(100% - 40px);
        padding: 25px;
    }

    .task-badge{
        width: 75px;
    }

    .questao-wrapper .questao-content .questao-buttons-container .questao-button{
        justify-content: center;
    }
}

/* NUMEROS SALA */

.card-buttom-numeros .room-numeros {
    text-decoration: underline;
    display: block;
    color: #AEAEAE;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 18px;
    cursor:pointer;
}

/* ADM */

.link-adm-numeros {
    font-size: 14px;
    margin-bottom: 30px;
    display: block;
    margin-left: 5px;
}

/* ROBO */

.technology-banner.banner--unlocked {
    padding: 20px 40px;
    flex: 1 1 auto;
    border-radius: 40px 0 40px 40px;
    margin-top: 15px;
}

.technology-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
}

img.robo-sala, svg.robo-sala {
    width: 90px;
    height: 90px;
    flex: 0 0 auto;
}

/* ROBO SALA */

.erro .message-title {
  width: calc(0% - 90px);
  margin-left: 20px;
  background: #B85D5D;
  padding: 0px;
  border-radius: 40px 40px 40px 40px;
  overflow: hidden;
  white-space: nowrap;
}

.acerto .message-title {
    width: calc(0% - 90px);
    margin-left: 20px;
    background: #01CD6A;
    padding: 0px;
    border-radius: 40px 40px 40px 40px;
    overflow: hidden;
    white-space: nowrap;
  }

  .medalha .message-title {
    width: calc(0% - 90px);
    margin-left: 20px;
    background: #008d9b;
    padding: 0px;
    border-radius: 40px 40px 40px 40px;
    overflow: hidden;
    white-space: nowrap;
  }

  .aguarde .message-title {
    width: calc(0% - 90px);
    margin-left: 20px;
    background: #0b54af;
    padding: 0px;
    border-radius: 40px 40px 40px 40px;
    overflow: hidden;
    white-space: nowrap;
  }

.message-title label, .message-title span, .medalha .message-title span, .medalha .message-title label{
  color:#fff !important;
}

.message-icon{
  width: 100px;
  height: 100px;
  background: transparent;
  box-shadow: none;
}

.robo-msg {
  width: 100px;
  height: 100px;
}

/* NOVO GAME */
    body.modal-open {overflow: hidden;}

    .questao-feedback-container  {font-family: "Montserrat",sans-serif;position: relative;}
    .questao-feedback-container.active {display: block !important;}

    .feedback-area {background-color: #253a44;min-height: 300px;display: flex;flex-direction: column;position: relative;box-sizing: border-box;border-radius: 10px;margin: 20px 0 20px;width: 100%;z-index: 0;opacity: 0;}
    .feedback-stage {flex: 1 1 auto;}
    .feedback-icones {flex: 0 0 auto;display: flex;align-items: center;flex-wrap: wrap;justify-content: center;max-width: 100%;width: 700px;margin: auto;padding: 0 20px 20px;box-sizing: border-box;gap: 20px;position: relative;}
    .feedback-result {flex: 0 0 auto;border-bottom: 2px solid #c3c3c3;display: flex;align-items: center;min-height: 100px;position: relative;/* border-radius: 7px; */margin-bottom: 25px;padding: 10px 0px 0;}
    .feedback-mensagem {font-size: 39px;font-weight: 600;display: block;width: 100%;text-align: center;color: #ffc107;/* color: #0ac5d4; */filter: drop-shadow(0px -1px 1px #ffc107) drop-shadow(0px 0px 1px black);box-sizing: border-box;/* margin: 10px auto 30px; */padding: 0 90px;}
    .feedback-area .instant {transition: none;}
    .feedback-mensagem.show {left: 0; opacity: 1;}
    .feedback-mensagem.finished {left: 0; top: 50px;}
    .feedback-mensagem .destaque {color: white;}
    .feedback-icone {height: 100px;background-color: rgb(255 255 255 / 16%);width: 100px;display: flex;align-items: center;justify-content: center;border-radius: 5px;font-size: 12px;font-weight: 500;color: white;flex-direction: column;padding: 2px;box-sizing: border-box;border: 1px ridge rgb(255 255 255 / 16%);cursor: pointer;}
    .feedback-icone span {font-size: 12px;font-weight: 500;margin: 10px 0 5px;}
    .feedback-icone img {height: 100%;width: auto;max-height: 45px;}
    .feedback-icone svg {height: 100%;width: auto;bottom: unset;right: unset;left: unset;top: unset;max-height: 45px;}
    .feedback-icone.foguinho svg {width: auto;max-height: 45px;position: relative;}
    .feedback-icone.devups svg {max-width: 45px;}
    .feedback-icone.nivel .level {border: 3px solid #7b7b7b; color: #ffffff; background: #242424; border-radius: 50%; padding: 10px; font-size: 20px; font-weight: 600; display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; box-sizing: border-box; filter: drop-shadow(0px -2px 2px #0ac5d4) drop-shadow(0px 1px 4px white) drop-shadow(0px -2px 3px white); margin: 0;}
    .feedback-icone.certificado .line {fill: transparent;stroke: white;}
    .feedback-icone.certificado .line.lines-border {stroke: white;}
    .feedback-buttons {display: flex;background-color: #253a44;border-radius: 10px;align-items: center;justify-content: space-between;padding: 15px;/* height: 150px; */position: relative;top: -100px;transition: all 0.4s ease .4s;z-index: 0;opacity: 0;}
    .feedback-btn {padding: 10px 30px;border-radius: 5px 0px 0px 5px;color: white;cursor: pointer;background: linear-gradient(90deg, #253A43 -5%, #1f4f66, #253A43);font-weight: 500;margin: 2px 0;}
    .feedback-btn:hover {background-color: #0f929d;background: linear-gradient(90deg, #253A43 5%, #0f929d, #0f929d, #253A43);}
    .feedback-icone.semanal svg {fill: white; stroke: black; stroke-width: 5px;}
    .feedback-icone.semanal svg .robo-olhos, .feedback-icone.semanal svg .robo-boca{fill: #0ac5d4;}
    .feedback-icone.devups .bg-icon-svg {fill: white; stroke: transparent;}
    .feedback-icone.temporada .missao-temporada-icon-area-svg * {stroke: transparent !important;}
    .feedback-icone.platina .platina-icon {fill: gold; filter: drop-shadow(0px 2px 3px black) drop-shadow(0px -2px 1px white) drop-shadow(0px 1px 0px gold);}

    .feedback-icone.certificado .line-top, .feedback-icone.certificado .line-down {stroke: #0ac5d4;}

    .feedback-area .dev-avatar { height: 130px; position: absolute; bottom: -40px; left: -7px; transform: rotate(15deg);}
    .feedback-area .dev-avatar .background-circle { display: none;}
    .feedback-area .feedback-robot {width: 125px;position: absolute;overflow: hidden;height: 100%;left: 0;bottom: 0;}
    .feedback-area .feedback-robot:before { top: 0; left: 0; height: 100%; width: 75px; position: absolute;}
    .feedback-player { flex: 0 0 auto; height: 120px; width: 120px; border: 2px ridge rgba(255,255,255,0.45); overflow: hidden; border-radius: 10px;}
    .feedback-options { flex: 1 1 auto; display: flex; flex-direction: column; margin-right: 10px; justify-content: space-evenly; height: 100%;}
    .feedback-player img { height: 100%; width: 100%; object-fit: contain;}
    /* .feedback-btn:nth-child(n+5) { display: none;} */
    .feedback-buttons2 { display: flex; margin-top: 30px; background-color: #253a44; border-radius: 10px; align-items: center; justify-content: center; padding: 15px; height: 150px; position: relative; color: white; font-weight: 500;}
    .feedback-back-options { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly; height: 100%; max-width: calc(100% / 2 - 50px); padding-right: 20px; box-sizing: border-box;}
    .feedback-next-options { flex: 1 1  auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-evenly; height: 100%; max-width: calc(100% / 2 - 50px); padding-left: 20px; box-sizing: border-box;}
    .feedback-player2 { overflow: hidden; height: 100px; width: 100px; border-radius: 50%; border: 3px ridge rgba(255,255,255, 0.25); flex: 0 0 auto; box-sizing: border-box;}
    .feedback-player2 img { height: 100%; width: 100%;}
    .feedback-btn2 { border-bottom: 1px solid white;}
    .feedback-progress {width: 100%;margin: auto;height: 100px;padding: 0 30px 20px;box-sizing: border-box;display: flex;align-items: center;}
    .feedback-bar-container { background-color: #456270; width: 100%; height: 20px; border-radius: 5px; position: relative;}
    .feedback-bar {background-image: linear-gradient(20deg, #83290c, #ff9800 ,#ff9800, #f9cc13);height: 100%;position: relative;border-radius: 5px 0 0 5px;width: 0%;transition: all 1s linear .6s;}
    .feedback-bar-reward .level { border: 3px solid #7b7b7b; color: #ffffff; background: #242424; border-radius: 50%; padding: 10px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; box-sizing: border-box; filter: drop-shadow(0px 0px 1px #0AC5D4) drop-shadow(0px 1px 1px white) drop-shadow(0px -2px 0px white); margin: 0;}
    .feedback-bar-reward { margin-left: 10px;}
    .feedback-bar:after {content: "";position: absolute;border-radius: 10px;width: 3px;background-color: rgb(255 255 255 / 50%);z-index: 1;top: -2px;right: -1px;bottom: -2px;filter: drop-shadow(1px 0px 0px white) drop-shadow(0px 0px 2px white) drop-shadow(0px 0px 4px white);}
    .feedback-bar-reward svg { height: 40px; width: 40px;}
    .feedback-progresso-devups { position: absolute; bottom: 100%; padding: 5px; font-size: 12px; font-weight: 500; color: white;}
    .feedback-progress:not(.completo) .feedback-bar-reward svg {filter: grayscale(1) opacity(0.5);}
    .feedback-corpo-mensagem { text-align: center; font-size: 18px; font-weight: 500; color: white; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; margin-bottom: 30px;}
    .questao-feedback-container.erro .feedback-mensagem, .questao-feedback-container.info .feedback-mensagem {color: white;filter: drop-shadow(0px 3px 1px black) drop-shadow(0px 0px 1px black);text-transform: uppercase;font-size: 20px;}
    .questao-feedback-container.erro .feedback-area, .questao-feedback-container.info .feedback-area { min-height: auto; overflow: hidden;}
    .questao-feedback-container.erro .feedback-result, .questao-feedback-container.info .feedback-result { margin-bottom: 0; border-bottom: 0; padding: 20px 30px;}
    .questao-feedback-container.erro .feedback-mensagem .destaque { color: #ff6767;}
    .feedback-area.info .feedback-mensagem .destaque {color: #31d6cc;}
    .modal-feedback { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: rgb(0 0 0 / 40%); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; font-family: "Montserrat", sans-serif; color: white; line-height: 30px; pointer-events: none; transition: all .2s ease; opacity: 0; z-index:30;}
    .modal-feedback-body {background-color: #253a44;padding: 40px;border: 1px solid white;border-radius: 10px;filter: drop-shadow(0px 0px 0px white) drop-shadow(0px -1px 2px white);width: 600px;max-width: 80%;box-sizing: border-box;}
    .modal-feedback-content { margin-bottom: 30px;}
    .modal-feedback-close-btn { background-color: #1f4e65;}
    .modal-feedback-close-btn { padding: 5px 20px; border-radius: 6px; min-width: 120px; text-align: center; max-width: 100%; cursor: pointer;}
    .modal-feedback-buttons { display: flex; justify-content: center;}
    .modal-feedback-close-btn:hover { background-color: #10232c;}
    .modal-feedback.active { pointer-events: auto; opacity: 1;}
    .modal-feedback .icon-moeda-msg { font-weight: 700; padding: 0px 5px; display: inline-flex; align-items: center; position: relative; bottom: -3px;}
    .modal-feedback .icon-moeda-msg img { height: 15px; width: 15px; margin-right: 5px;}

    .questao-feedback-container.active:not(.erro) .feedback-area { animation: flashIn .8s linear forwards;}
    .questao-feedback-container.active.erro .feedback-area { opacity:1; visibility:visible;}
    .feedback-icones .feedback-icone { opacity: 0.1; z-index: auto; position: relative;}
    .questao-feedback-container.active .feedback-icone { opacity:1; background-color: #45545c;}
    .questao-feedback-container.erro .feedback-buttons { transition: none;}

    .questao-feedback-container.active .feedback-icone:nth-child(0) { transition-delay: .2s;}
    .questao-feedback-container.active .feedback-icone:nth-child(1) {transition-delay: .4s;}
    .questao-feedback-container.active .feedback-icone:nth-child(2) { transition-delay: .6s; }
    .questao-feedback-container.active .feedback-icone:nth-child(3) { transition-delay: .8s; }
    .questao-feedback-container.active .feedback-icone:nth-child(4) { transition-delay: 1s; }
    .questao-feedback-container.active .feedback-icone:nth-child(5) { transition-delay: 1.2s; }
    .questao-feedback-container.active .feedback-icone:nth-child(6) { transition-delay: 1.4s; }
    .questao-feedback-container.active .feedback-icone:nth-child(7) { transition-delay: 1.6s; }
    .questao-feedback-container.active .feedback-icone:nth-child(8) { transition-delay: 1.8s; }

    .questao-feedback-container.active .feedback-wrapper{ position:relative; z-index: 1;}
    .questao-feedback-container:not(.erro).active .feedback-wrapper:before{ content:""; height:100%; width:100%; position:absolute; background-color: #5dffb9; border-radius: 10px; visibility: hidden; animation: flashLight .6s linear .2s forwards; z-index: 0;}

    .questao-feedback-container.active .feedback-bar {animation: progress 2s ease-in-out infinite;width: 100%;}
    .questao-feedback-container.active .feedback-buttons { top: 0; opacity: 1;}
    .questao-feedback-container.active .feedback-icone:before { content: ""; height: 100%; width: 100%; position: absolute; border-radius:5px; z-index:-1; animation: iconeAnimPulse 2s linear infinite both;}
    .questao-feedback-container.active .feedback-icone { border: 2px solid rgb(162 206 210 / 0.2);}
    .questao-feedback-container.active .feedback-icone.devups.primeiro:after { content: "1º do dia"; position: absolute; top: -10px; text-align: center; background: linear-gradient(45deg, #d49000, #e85d04); padding: 3px 5px; border-radius: 4px; font-size: smaller;}
    .feedback-particles-wrapper { pointer-events: none; opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; justify-content: space-between; pointer-events: none; transform-origin: center; box-sizing: border-box;}
    .feedback-particles-area { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 15%;}

    .feedback-particles-area:nth-child(even) {flex-wrap: wrap-reverse;}
    .feedback-particle { width: 0; height: 0; position: relative; border: 5px solid white; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid transparent; transform-origin: bottom; animation: particleAnim 0.8s linear infinite; filter: drop-shadow(0px 0px 4px white) drop-shadow(0px 0px 5px white);}
    .feedback-particle:first-child, .feedback-particle:last-child { align-self: flex-end;}
    .feedback-particle:after { content: ""; position: absolute; top: 9px; left: -10px; border: 5px solid white; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 5px solid transparent;}
    .questao-feedback-container.active:not(.erro) .feedback-particles-wrapper { animation: particlesFlash 1s linear .4s both;}
    .complete-resultado.gabarito {
        background: #334337 !important;
        border-color: #66bd89 !important;
    }
    .gabarito.questao-feedback-container.resposta-usuario {
        background-color: #2db126;
        border: 1px solid #66bd89;
    }
    .container-gabarito {
        display: flex;
        flex-direction: column;
        gap: 15px;
        box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
        margin-bottom: 50px;
        border-radius: 5px;
        padding: 30px 20px;
        background-color: #253a44;
        color: #fff;
    }
    .container-gabarito .gabarito-title {
        font-weight: 700;
        font-size: 20px;
    }
    .container-gabarito .icon-moeda {
        width: 18px;
        height: 18px;
        position: relative;
        top: 3px;
    }
    .container-gabarito .feedback-btn {
        width: fit-content;
        border-radius: 5px;
        background: #0ac5d4;
    }

    .container-gabarito .feedback-btn:hover {
        background-color: #575757;
    }
    .container-gabarito .feedback-btn.locked {
        pointer-events: none;
        background: #dddddd;
    }
    .text-gabarito {
        font-size: 18px;
        margin: 0;
    }

    .text-gabarito.uso-disponivel {
        margin-top: 15px;
    }

    @keyframes particleAnim{
        0%{ 
            transform:rotate(0deg) scale(0.7);
        }
        50%{
            transform:rotate(180deg) scale(1);
        }
        100%{
            transform:rotate(360deg) scale(0.7);
        }
    }

    @keyframes particlesFlash{
        0%{
            opacity:0;
            top:0px;
            transform: scale(0.5);
            padding: 10% 10%;
        }
        10%{
            transform: scale(0.9);
        }
        20%, 40%{
            opacity:1;
        }
        30%{
            top: -8px;
            transform: scale(1);
        }
        100%{
            top: 10px;
            opacity:0;
            transform: scale(1.1);
        }
    }

    @keyframes flashIn {
        0% {filter: blur(5px) opacity(0);transform: scale(0.8);}
        20% {filter: blur(5px) opacity(1);transform: scale(1);}
        40%, 100% {filter: blur(0px);opacity: 1;}
    }

    @keyframes flashLight {
        0% {
            visibility:visible;
            opacity: .7;
            box-shadow: 0 0 2px 10px #5dffb9;
        }

        70% {
            opacity: 0;
            box-shadow: 0 0 5px 60px #5dffb9;
        }

        100% {
            visibility:hidden;
            opacity: 0;
            box-shadow: 0 0 2px 0 #5dffb9;
        }
    }

    @keyframes progress {
        0%, 100% {
            opacity:1;
            box-shadow: 0 0 1px 2px rgb(255 239 171 / 10%);
        }    
        50% {
            opacity:1;
            box-shadow: 0 0 6px 6px rgb(255 239 171 / 25%);
        }
    }

    @keyframes iconeAnimPulse{
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgb(202 251 253 / 70%);
        }

        70% {
            transform: scale(1.04);
            box-shadow: 0 0 0 6px rgb(202 251 253 / 0%);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(202 251 253 / 0%);
        }
    }
/* NOVO GAME */

/* Cutscene */
    @font-face { font-family:"Riffic Bold"; src: url("Https://www.devmedia.com.br/tecnologia/cutscene/fontes/RifficFree-Bold.ttf") format("truetype");}

    .cutscene-wrapper {position: relative;width: 100%;   border-radius: 10px;overflow: hidden;display: block;visibility: hidden;}
    .cutscene-wrapper.active {visibility:  visible; padding-top: 56.25%;}
    .cutscene {position: absolute;height: 100%;width: 100%;top: 0;left: 0;display: flex;align-items: center; opacity:0;}
    .cutscene-wrapper.active .cutscene.active {opacity:1;}

    .cutscene-wrapper .close-cutscene-button {transition: all .4s ease; color:white; background-color:#ffffff30; border: 2px solid currentColor;border-radius: 5px;height: 20px;width: 20px;display: flex;position: absolute;right: 10px;top: 10px;z-index: 5;align-items: center;justify-content: center;backdrop-filter: blur(5px); opacity:0;/* background-color: white; *//* color: darkred; */width: auto;padding: 4px 30px 4px 10px;text-transform: uppercase;font-family: montserrat;font-size: 12px;font-weight: 600;}
    .cutscene-wrapper .close-cutscene-button .proximo{display: none;}
    .cutscene-wrapper .close-cutscene-button.next .proximo{display: unset;}
    .cutscene-wrapper .close-cutscene-button.next .fechar{display: none;}
    .cutscene-wrapper .close-cutscene-button:hover{ cursor:pointer; border-radius:20px; background-color:#ffffff; color:darkred;}
    .cutscene-wrapper .close-cutscene-button:after, .cutscene-wrapper .close-cutscene-button:before { content:""; position:absolute; height: 50%; width: 2px; background-color:currentcolor; display: block; transform:rotate(45deg); right: 15px;}
    .cutscene-wrapper .close-cutscene-button:before{ transform:rotate(-45deg);}

    .cutscene-wrapper .cutscene.active .close-cutscene-button {opacity:1;}

    .cutscene .cutscene-textos { position: absolute; z-index: 2; font-family: "Riffic Bold"; text-transform: uppercase; font-size: 45pt; display: flex; flex-direction: column; align-items: center;}
    .cutscene .cutscene-textos .cutscene-texto-wrapper{ display: flex;flex-wrap: wrap;justify-content: center;line-height: 0.9;}
    .cutscene .cutscene-textos .cutscene-texto-wrapper .texto {position: relative; z-index: 0; color: #0e003d; perspective: 500px;perspective-origin: center 85px;transform: scale(0.9, 0.85);}
    .cutscene .cutscene-textos .cutscene-texto-wrapper .texto:before {content: attr(data-text); z-index: 2; position: absolute; filter: drop-shadow(0px -2px 0px white) opacity(0.8); color: black; mix-blend-mode: plus-lighter; transform: translate3d(0px, 1px, 29px);}
    .cutscene .cutscene-textos .cutscene-texto-wrapper .texto:after { content: attr(data-text); position: absolute;  top: 0; left: 0; background-image: linear-gradient(#fec800, #e84502); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: 1; filter: drop-shadow(2px 0px #44038c) drop-shadow(-2px 0px #44038c) drop-shadow(0px 2px #44038c) drop-shadow(0px -2px #44038c) drop-shadow(1px 1px #44038c) drop-shadow(-1px -1px #44038c) drop-shadow(1px -1px #44038c) drop-shadow(-1px 1px #44038c); transform: translate3D(0px, 0px, 30px);}
    .cutscene .cutscene-textos .cutscene-texto-wrapper .texto.texto-g {font-size: 1.76em;}
    .cutscene .cutscene-textos .cutscene-texto-wrapper .texto.texto-gg {font-size: 4em;}
    .cutscene .cutscene-textos .cutscene-texto-wrapper .texto.texto-p {font-size: 0.75em;}

    .cutscene .cutscene-background {background: black;height: 100%;width: 100%;position: absolute;z-index: 0;top: 0;left: 0;}

    /* Semanal */
        .cutscene.semanal .cutscene-background {background: #991717;}
        .cutscene.semanal .cutscene-textos {width: 50%;font-size: clamp(10px, 280%, 7vw);left: clamp(10px, 6%, 25px);}
        .cutscene.semanal .cutscene-devbot {z-index: 1;position: absolute;bottom: 0;right: 0;  width: 40%;padding-top: 40%;}
        .cutscene.semanal .cutscene-background-particles {position: absolute;height: 100%;width: 100%;opacity: 0.6;filter: blur(0px);z-index: 1;object-fit: cover;}
        .cutscene.semanal .cutscene-background-texture {position: absolute; height: 100%; width: 100%;    opacity: 0.2; filter: blur(0px);object-fit: cover;z-index: 0;filter: url(#heat);}
        .cutscene.semanal .cutscene-devbot-body { position: absolute;height: 100%; width: 100%; bottom: 0; right: 0;display: flex;align-items: flex-end;}
        .cutscene.semanal .cutscene-devbot-body-base {width: 100%;}
        .cutscene.semanal .cutscene-devbot-hand {height: 44%; position: absolute;bottom: -50%;left: -32%;}
        .cutscene.semanal .cutscene-devbot-eyes { width: 60%; position: absolute; top: 26%; left: 20%;}
        .cutscene.semanal .cutscene-devbot-mouth { width: 20%;  position: absolute; top: 53%; left: 42%; }

        .cutscene.semanal .cutscene-texto-2 {display: flex;justify-content: center;width: 40%;max-width: 3em;margin: -5px auto 5px;}
        .cutscene.semanal .cutscene-texto-2 svg {width: 100%;}

        .cutscene-wrapper.active .cutscene.semanal .cutscene-background {animation: backgroundShow 1s both;}
        
        .cutscene-wrapper.active .cutscene.semanal .cutscene-texto-1 {animation: textcutsceneShow2 .5s 1s both;}
        .cutscene-wrapper.active .cutscene.semanal .cutscene-texto-2 {animation: textcutsceneShow2 .5s 1.5s both;}
        .cutscene-wrapper.active .cutscene.semanal .cutscene-texto-3 {animation: textcutsceneShow2 .5s 2s both;}
        
        .cutscene-wrapper.active .cutscene.semanal .cutscene-devbot-body {animation: devbotShow .6s .3s both;}
        .cutscene-wrapper.active .cutscene.semanal .cutscene-devbot-hand {animation: devbotHandShow 4s 1.5s infinite; transition: bottom 1s ease .5s; transform-origin: bottom right;bottom: 0;}
        .cutscene-wrapper.active .cutscene.semanal .cutscene-devbot-eyes {animation: devbotEyes 1s infinite;}
        .cutscene-wrapper.active .cutscene.semanal .cutscene-devbot-mouth {animation: devbotBoca 4s infinite;}
    /* Semanal */

    /* Temporada */
        .cutscene.temporada .cutscene-background img {position: absolute;height: 100%;width: 100%;top: 0;left: 0;}
        .cutscene.temporada .cutscene-background .cutscene-background-texture {z-index: 0;}
        .cutscene.temporada .cutscene-background .cutscene-background-particles {z-index: 1;opacity: .6;mix-blend-mode: normal;}
        .cutscene.temporada .cutscene-background .cutscene-background-filter {z-index: 2;opacity: .5;mix-blend-mode: screen;}
        .cutscene.temporada .cutscene-background:after {content: "";position: absolute;height: 100%;width: 100%;left: 0;top: 0; background: black; z-index: 5; opacity:1; transition: opacity 1s linear}
        .cutscene.temporada.active .cutscene-background:after {opacity:0;}

        .cutscene.temporada .cutscene-devbot {z-index: 1;width: var(--aspect-value);padding-top: var(--aspect-value);position: absolute;bottom: -20%;left: 12%;--aspect-value: 45%;opacity: 0;transition: all 0.8s linear .5s;}
        .cutscene.temporada.active .cutscene-devbot {left: 1%;opacity: 1;}
        .cutscene.temporada .cutscene-devbot .cutscene-devbot-wrapper {position: absolute;height: 100%;width: 100%;top: 0;left: 0;image-rendering: -webkit-optimize-contrast;filter: drop-shadow(-5px 5px 10px rgba(0,0,0,.5)); animation: devbotRollTemporada 5s linear both alternate infinite;}
        .cutscene.temporada .cutscene-devbot .cutscene-devbot-wrapper .cutscene-devbot-hand {position: absolute;height: 39%;top: 35%;left: 73%;transform-origin: 21% 88%; animation: devbotRollTemporada 3s linear both alternate infinite;}
        .cutscene.temporada .cutscene-devbot .cutscene-devbot-wrapper .cutscene-devbot-face {position: absolute;height: 15%;top: 20%;left: 18%;image-rendering: auto; animation: devbotGlich 3s linear both infinite;}
        .cutscene.temporada .cutscene-devbot .cutscene-devbot-wrapper .cutscene-devbot-body {position: absolute;height: 100%;width: auto;top: 0;left: 0.8%;}

        .cutscene.temporada .cutscene-textos {width: 50%;bottom: 2.5%;right: 2.5%;z-index: 7;font-size: clamp(35px, 300%, 6.3vw);}
        .cutscene.temporada .cutscene-textos .cutscene-texto-wrapper .texto.texto-g {font-size: 1.09em;}
        .cutscene.temporada .cutscene-textos .cutscene-texto-wrapper .texto.texto-m {font-size: 0.94em;}
        .cutscene.temporada .cutscene-textos .cutscene-texto-wrapper .texto {perspective-origin: center 130px;;filter: drop-shadow(0px 0px 1px #0E003E);}
        .cutscene.temporada .cutscene-textos .cutscene-texto-wrapper .texto:after {filter: drop-shadow(2px 0px #44038c) drop-shadow(-2px 0px #44038c) drop-shadow(0px 2px #44038c) drop-shadow(0px -2px #44038c);background-image: linear-gradient(#fec800 30%, #e84502);}
        .cutscene.temporada.active .cutscene-textos .cutscene-texto-wrapper.cutscene-texto-1{ animation: temporadaTextAnim .5s 1s both;}

        .cutscene.temporada .cutscene-trophie {position: absolute;z-index: 2;padding-top: var(--aspect-value);width: var(--aspect-value);--aspect-value: 40%;left: 35%;top: 10%;transform: scale(0.5);transition: all 1s ease .5s;opacity: 0;}
        .cutscene.temporada.active .cutscene-trophie {left: 45%; top: 10%;opacity: 1;transform: scale(1);animation: trophieAnim 8s ease-in-out infinite alternate .8s backwards;}
        .cutscene.temporada .cutscene-trophie .cutscene-temporada-icon-area-svg {position: absolute;height: 100%;width: 100%;bottom: -4%;filter: drop-shadow(0px 0px 15px rgba(0,0,0,.6));z-index: 0;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine {position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 1;mix-blend-mode: screen;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie {position: absolute;height: 25%;width: auto;filter: contrast(1.1) drop-shadow(0px 0px 5px rgba(255,255,255, 0.2));mix-blend-mode: screen;}

        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(1) {top: -3%; left: 11%;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(2) {top: 1%; left: 86%;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(3) {top: 38%; left: 62.5%;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(4) {top: 48%; left: 18%;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(5) {top: 77%; left: 51%;}

        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(1) {animation-delay:.5s;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(2) {animation-delay:1s;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(3) {animation-delay:2.3s;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(4) {animation-delay:1.2s;}
        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie:nth-child(5) {animation-delay:2s;}

        .cutscene.temporada .cutscene-particles {height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 1;opacity: 0;transition: opacity .3s linear .7s;}
        .cutscene.temporada.active .cutscene-particles {opacity: 1;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle {position: absolute;padding-top: var(--aspect-value); width: var(--aspect-value); animation: starAnim 1.7s ease-in-out infinite both;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(1) {top: var(--top-final); left: var(--left-final);--aspect-value: 8%;--left-final: 35%;--top-final: 10%; animation-delay:0s;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(2) {top: var(--top-final); left: var(--left-final);--aspect-value: 5%;--left-final: 30%;--top-final: 39%; animation-delay:1s;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(3) {top: var(--top-final); left: var(--left-final);--aspect-value: 4%;--left-final: 87%;--top-final: 17%; animation-delay:.2s;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(4) {top: var(--top-final); left: var(--left-final);--aspect-value: 6%;--left-final: 89%;--top-final: 40%; animation-delay:1.3s;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(5) {top: var(--top-final); left: var(--left-final);--aspect-value: 4%;--left-final: 80%;--top-final: 68%; animation-delay:.4;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(6) {top: var(--top-final); left: var(--left-final);--aspect-value: 7%;--left-final: 43%;--top-final: 66%; animation-delay:.8s;}

        .cutscene.temporada .cutscene-particles .cutscene-star-particle .star-particle-wrapper {position: absolute;z-index: 0;width: 100%;height: 100%;top: 0;left: 0;display: flex;align-items: center;justify-content: center; animation: starRollAnim 15s linear infinite both;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle .star-particle-wrapper .star {position: relative;height: 100%;width: 100%;z-index: 1;}

        .cutscene.temporada .cutscene-particles .cutscene-star-particle .star-particle-wrapper .shine-star{position: absolute;z-index: 2;top: calc(12% - 25px);left: calc(41% - 25px);width: 50px;height: 50px;filter: contrast(1.1) drop-shadow(0px 0px 5px rgba(255,255,255, 0.2)); mix-blend-mode: luminosity;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(1) .star-particle-wrapper .shine-star{animation-delay:.5s;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(2) .star-particle-wrapper .shine-star{animation-delay:1s;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(3) .star-particle-wrapper .shine-star{animation-delay:2.3s;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(4) .star-particle-wrapper .shine-star{animation-delay:0s;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(5) .star-particle-wrapper .shine-star{animation-delay:1.2s;}
        .cutscene.temporada .cutscene-particles .cutscene-star-particle:nth-child(6) .star-particle-wrapper .shine-star{animation-delay:2s;}

        .cutscene.temporada .cutscene-trophie .cutscene-trophie-shine .shine-trophie, .cutscene.temporada .cutscene-particles .cutscene-star-particle .star-particle-wrapper .shine-star{animation: brilhoAnim 5s linear infinite both;}
    /* Temporada */

    /* Animations */
        @keyframes backgroundShow{
            0%, 20%{ 
                filter: brightness(0);
            }

            100%{
                filter: brightness(1);
            }
        }

        @keyframes textcutsceneShow{
            0%, 30%{
            filter:contrast(0) brightness(2);
            }
            0%{
            opacity:0;
            }
            50%, 100%{
            opacity:1;
            }
            100%{
            filter:contrast(1) brightness(1);
            }
        }

        @keyframes textcutsceneShow2{
            0%{
            transform: translateY(50%) scale(0.5) ;
            }
            0%{
            opacity:0;
            }
            100%{
            opacity:1;
            }
            100%{
            transform: translateY(0%) scale(1);
            }
        }

        @keyframes devbotShow{
            0%{ 
                top:100%;
            }

            100%{
                top:0%;
            }
        }

        @keyframes devbotHandShow{
            0%, 100%{ 
                transform:rotate(0deg);
            }

            55%{
                transform:rotate(-5deg);
            }
        }

        @keyframes devbotEyes{
            0%, 100%{ 
                transform:scale(1);
                filter:brightness(1);
            }

            55%{
                transform:scale(1.01);
                filter:brightness(1.1) saturate(1.2);
            }
        }

        @keyframes devbotBoca{
            0%, 100%{ 
                transform:scale(0.99);
            }

            55%{
                transform:scale(1.1);
            }
        }

        @keyframes brilhoAnim {
            0%, 50%, 100%{
                opacity:0;
            }
            25%,75% {
                opacity:1;
            }
            100%{
                transform:rotate(15deg);  
            }
        }
        
        @keyframes trophieAnim{
            0%{
                transform: rotate(5deg);
            }
            100%{
                transform: rotate(15deg);
            }
        }
        
        @keyframes starAnim{
            0%{
                left: 62%;
                top: 40%;
                transform:scale(0.8);
            }
        
            50%{
                top: calc(var(--top-final) - 15%);
            }
            80%, 100%{
                top: var(--top-final);
                left: var(--left-final);
            }
            0%,100%{
                opacity:0;
            }
            60%,80%{
                opacity:1;
            }
        
        }
        
        @keyframes starRollAnim{
            100%{
                transform:rotate(-360deg);
            }
        }
        
        @keyframes devbotRollTemporada {
            100%{
                transform:rotate(5deg);
            }
        }
        
        @keyframes devbotGlich {
            80%,85%, 90%{
                opacity:1;
            }
            82%,87%{
                opacity:0;
            }
        }
        
        @keyframes temporadaTextAnim{
            0%{
            transform: translateY(50%) scale(0.5) ;
            }
            0%{
            opacity:0;
            }
            100%{
            opacity:1;
            }
            100%{
            transform: translateY(0%) scale(1);
            }
        }
    /* Animations */
/* Cutscene */

/* CUPOM */
.feedback-cupom-area {background-color: rgb(0 0 0 / 16%); backdrop-filter: blur(2px);position: absolute;height: 100%;width: 100%;top: 0;left: 0;display: flex;align-items: center;border-radius: 20px;pointer-events: none;  animation: outCupomArea .4s linear forwards; animation-delay: 1.5s; }
.cupom-bg {background: linear-gradient(209deg, #e91e63, #d94f7e);min-height: 120px;width: 100%;display: flex;align-items: center;justify-content: center;transform-origin: center; animation: outCupomBG .4s linear both;animation-delay: 1s;}
.cupom-texto {max-width: 100%;text-align: center;padding: 20px;font-size: 28px;color: white;font-weight: 700;filter: drop-shadow(0px -1px 1px white) drop-shadow(0px 1px 2px black); animation: flashCupom 1s linear both;}
.cupom-texto span {color: #ffc107;}
.feedback-cupom-area.active {pointer-events: auto; animation-name: inCupomArea;animation-delay: unset;}
.feedback-cupom-area.active .cupom-bg {animation-name: inCupomBG;animation-delay: .4s;}
.feedback-cupom-area.active .cupom-texto {animation-name: unset;animation-delay: .4s;}

.questao-feedback-container .questao-text.onde-errei .complete-resultado.errado { transition: all .4s ease;}
.questao-feedback-container .questao-text.onde-errei .line-numbers {position: relative;}
.questao-feedback-container .exibir-erros { position: absolute; top: 10px; right: 10px; z-index: 5; background-color: #1f4f66; color: white; font-family: 'Montserrat'; font-weight: 600; border: none; border-radius: 5px; padding: 10px 25px; font-size: 14px; cursor: pointer; transition: all .2s ease;}
.questao-feedback-container .exibir-erros:hover { background-color: #328c93;}
.questao-text.onde-errei .complete-resultado.errado.show { border-color: red; background-color: rgb(255 0 0 / 20%);}

/* PRDUTO */
.questao-feedback-container.produto .feedback-area {min-height: auto;overflow: hidden;}
.questao-feedback-container.produto .feedback-result {margin: 0;border: 0;}
.questao-feedback-container.produto .feedback-mensagem {padding-top: 10px;padding-bottom: 20px;}

@keyframes inCupomArea{
    0% {opacity: 0;}
    100%{opacity: 1;}
}

@keyframes outCupomArea{
    0%{opacity: 1;}
    100% {opacity: 0;}
}

@keyframes inCupomBG{
    0% {transform: scale(1, 0); filter: blur(4px) opacity(0.7);}
    100%{transform: scale(1, 1);filter: blur(0px) opacity(1);}
}

@keyframes outCupomBG{
    0%{transform: scale(1, 1);filter: blur(0px) opacity(1);}
    100% {transform: scale(1, 0);filter: blur(4px) opacity(0.7);}
}

@keyframes flashCupom{
    50%, 80%{filter: drop-shadow(0px -1px 2px white) drop-shadow(0px 1px 2px white) opacity(1);}
    100% {filter: drop-shadow(0px 0px 0px white) drop-shadow(0px 0px 0px white) opacity(0);}
}
/* CUPOM */

@media only screen and (max-width: 768px)
{
    .feedback-result {padding: 0px 0 0px;min-height: 80px;}
    .feedback-area .dev-avatar {height: 70px;bottom: -20px;}
    .feedback-mensagem {font-size: 30px;padding: 0 55px;}
    .feedback-player { display: none;}
    .feedback-btn { text-align: center;}
    .feedback-buttons { height: auto; padding: 5px;}
}

@media screen and (max-width: 579px)
{
    .answer-option .answer-text {height: 100%;}
    .questao-container .answer-text-block code[class*='pre_'],
    .questao-container .answer-text-block pre[class*='pre_']{
        font-size: 15px;
    }
}

@media screen and (max-width:480px)
{
    .message-header { align-items: center;}
    .message-icon { width: 80px; height: 80px;}
    .robo-msg{ width:80px; height:80px;}
    .message-title { padding: 20px 15px !important;}
}

@media screen and (max-width: 425px)
{   
    .feedback-area .dev-avatar { height: 60px; bottom: -17px;}
    .feedback-mensagem {font-size: 22px;padding: 0 55px;}
    .feedback-icone { height: 90px; width: 90px;}
    .feedback-icone span { font-size: 10px;}
    .feedback-bar-reward svg { height: 30px; width: 30px;}
    .modal-feedback-body { max-width: 90%;}

    .feedback-player {display: none;}
    .feedback-btn {text-align: center;background: linear-gradient(90deg, #253A43, #1f4f66, #253A43);}  
    .cutscene-wrapper.active {padding-top: 125%;}
    .cutscene {flex-direction: column;}
    .cutscene.semanal .cutscene-textos {left: unset;top: 20px;font-size: 35px; min-width: 6em;}
    .cutscene.semanal .cutscene-devbot {width: 60%;padding-top: 60%;}

    .cutscene.temporada.active .cutscene-devbot {left: 2%;bottom: -10%;--aspect-value: 60%;}
    .cutscene.temporada .cutscene-textos {width: 80%;bottom: 36.5%;right: unset;}
    .cutscene.temporada.active .cutscene-trophie {left: unset;--aspect-value: 55%;top: 5%;}
}

@media screen and (max-width:375px){
    .cutscene.semanal .cutscene-textos {font-size: 32px;}
    .cutscene.semanal .cutscene-devbot {width: 55%;padding-top: 55%;}
}

@media screen and (max-width: 370px)
{
    .feedback-result {min-height: 60px;}
    .feedback-mensagem {font-size: 18px;padding: 0px 45px;}
    .cutscene.temporada .cutscene-textos {width: 80%;bottom: 36.5%;right: unset;}
}

/* BALAO ANIMATION */

.erro .message-title, .acerto .message-title, .medalha .message-title, .aguarde .message-title{
    position: relative;
    animation-name: ballonShow;
    animation-delay: 0s;
    animation-duration: 0.9s;
    animation-iteration-count:1;
    animation-fill-mode: forwards; 
}

.aguarde .message-title:before{
    content: " ";
    width: 32px;
    background: #0b54af;
    height: 32px;
    position: absolute;
    display: block;
    top: 30px;
    left: -11px;
    transform: rotate(-132deg);
}

.acerto .message-title:before{
    content: " ";
    width: 32px;
    background: #01CD6A;
    height: 32px;
    position: absolute;
    display: block;
    top: 30px;
    left: -11px;
    transform: rotate(-132deg);
}

.medalha .message-title:before {
    content: " ";
    width: 32px;
    background: #008d9b;
    height: 32px;
    position: absolute;
    display: block;
    top: 30px;
    left: -11px;
    transform: rotate(-132deg);
}

.erro .message-title:before {
    content: " ";
    width: 32px;
    background: #B85D5D;
    height: 32px;
    position: absolute;
    display: block;
    top: 30px;
    left: -11px;
    transform: rotate(-132deg);
}

.message-title label{
    margin-bottom: 12px;
}

.message-title span{
    font-size: 14px;
}

@keyframes ballonShow {
    0% {width: calc(0% - 90px); padding: 0;}
    100% {width: calc(100% - 90px); padding: 20px; overflow: unset;}
}