/*   ####   CSS NOVO LAYOT ####  */




/* Fundo */
body {
    background: url('../files/bg.png') center center / cover no-repeat fixed;
}
.body-step-1 {
    background: #e6e6e6 !important; /* Substitui pela cor/imagem pretendida */
}
body.body-step-1::before {
    background: #e6e6e6 !important; /* Substitui pela cor/imagem pretendida */
}
.body-step-2 {
    background: #e6e6e6 !important; /* Substitui pela cor/imagem pretendida */
}
body.body-step-2::before {
    background: #e6e6e6 !important; /* Substitui pela cor/imagem pretendida */
}
/* Sobreposição branca */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.72);
    z-index:-1;
}
body .top-container {
    margin-top: 70px;
    display: none;
}
/* Conteúdo */
#main-col{
    max-width:90%;
    margin:0 auto;
}

div#welcome-container\ {
    text-align: center;
}

/* Título vermelho */
.survey-name{
    display: inline-block;
    background: #e53935;
    color: #fff !important;
    padding: 9px 15px;
    margin: 50px auto 25px;
    font-size: 28px;
    box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.4);
    font-weight: 700;
}

/* Subtítulo */
.survey-description center:first-child b{
    display:inline-block;
    background:#fff;
    color:#d32f2f;
    padding:15px 35px;
    font-size:36px;
    font-weight:400;
    box-shadow:-5px -2px 6px rgba(0, 0, 0, 0.4);
}

/* Texto */
.survey-description{
    margin-top:40px;
    font-size:24px;
    line-height:1.8;
    color:#222;
}
.intro-box-wrapper{
    text-align:center;
}
.intro-box{
    display:inline-block;
    background:#fff;
    color:#d32f2f;
    font-size:25px;
    padding:5px 20px;
    box-shadow:-5px -2px 6px rgba(0, 0, 0, 0.4);
    transform: rotate(1.4deg);
}
/* Botão */
#navigator-container{
    text-align:center;
}

#navigator-container .text-left{
    display:none;
}

#navigator-container .text-right{
    width:100%;
    text-align:center;
}
p.custom-step-text {
    font-size: 22px;
    color: #000;
    margin-top:40px;
}
.step-0 #ls-button-submit{
    margin: 15px auto 25px !important;
}
#ls-button-submit{
    background: #e53935;
    color: #fff !important;
    padding: 1px 60px;
    margin: 0px auto 25px;
    font-size: 21px;
    box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.4);
    font-weight: 700;
    border: none !important;
    border-radius: 0px !important;
}

/* ==========================================================================
   1. CARD DA PERGUNTA (Contentor Geral)
   ========================================================================== */
.ls-question-text {
    text-align: center;
    color: #000 !important;
}
#group-1 .question-container{
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.question-container.list-radio {
    position: relative;
    background-color: #e6e6e6; /* Fundo cinza suave */
    border-radius: 20px 0 0 20px; /* Cantos arredondados só à esquerda */
    padding: 35px 30px 25px 40px;
    margin-top: 30px;
    margin-bottom: 30px;
    /* Borda vermelha contínua à esquerda e topo que vai esvanecendo */
    border-left: 2.5px solid #e53935;
    border-top: 2.5px solid rgba(229, 57, 53, 0.3);
    border-bottom: 2.5px solid rgba(229, 57, 53, 0.3); /* Efeito suave no fundo */
    box-shadow: none !important;
}

/* Esconder elementos nativos desnecessários */
.question-container.list-radio .asterisk,
.question-container.list-radio .question-valid-container {
    display: none !important;
}


/* Esconder elementos nativos desnecessários */
.question-container.list-radio .asterisk,
.question-container.list-radio .question-valid-container {
    display: none !important;
}

/* ==========================================================================
   2. CÍRCULO VERMELHO COM O NÚMERO DA PERGUNTA
   ========================================================================== */
.question-container.list-radio::before {
    content: attr(data-number); /* Lê o número gerado pelo JS */
    position: absolute;
    top: -18px;
    left: 20px;
    width: 36px;
    height: 36px;
    background-color: #e53935;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
/* ==========================================================================
   3. TEXTO DA PERGUNTA
   ========================================================================== */
.ls-label-question {
    text-align: left;
}
.question-container.list-radio .question-text {
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    margin-bottom: 0;
}
/* ==========================================================================
   4. ESTILIZAÇÃO DOS RADIO BUTTONS (Vermelho Personalizado)
   ========================================================================== */
.question-container.list-radio .radio-item {
    position: relative;
    margin-bottom: 12px;
    text-align: left;
}

/* Esconde a bolinha nativa do browser */
.question-container.list-radio input[type="radio"] {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

/* Texto da opção de resposta */
.question-container.list-radio .radio-label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-weight: normal;
    color: #222222;
    font-size: 15px;
}

/* Circulo exterior não selecionado */
.question-container.list-radio .radio-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border: 1.5px solid #e53935;
    border-radius: 50%;
    background-color: transparent;
}

/* Estado SELECIONADO: Circulo preenchido a vermelho */
.question-container.list-radio input[type="radio"]:checked + .radio-label::before {
    background-color: #e53935;
    border-color: #e53935;
}
.answer-item label::after {
    background-color: #e53935 !important;
}

/* ==========================================================================
   GRUPO DE PERGUNTAS DO RESULTADO
   ========================================================================== */
#group-1 .group-title{
    display:none;
}
.titulo_nivel{
    text-align:center;
    background: #e53935;
  color: #fff !important;
  padding: 1px 60px;
  margin: 0px auto 25px;
  font-size: 21px;
  box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.4);
  font-weight: 700;
  border: none !important;
  border-radius: 0px !important;
  width: fit-content;
}
.titulo_resultado{
    text-align:center;
    background: #e53935;
  color: #fff !important;
  padding: 1px 60px;
  margin: 0px auto 25px;
  font-size: 21px;
  box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.4);
  font-weight: 700;
  border: none !important;
  border-radius: 0px !important;
  width: fit-content;
}

.header-tabela{
    background: #fff;
  color: #d32f2f;
  box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.4);
}

td.bg-red{
    background: #e53935;
    color: #fff;
    font-weight: 700;
    padding: 1px !important;
    box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.4);
}
.bg-orange{
    background: #ff921e;
    color: #fff;
    font-weight: 700;
    padding: 1px !important;
    box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.4);
}
.bg-yellow{
    background: #d9df20;
    color: #fff;
    font-weight: 700;
    padding: 1px !important;
    box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.4);
}
.bg-green{
    background: #39b549;
    color: #fff;
    font-weight: 700;
    padding: 1px !important;
    box-shadow: -5px -2px 6px rgba(0, 0, 0, 0.4);
}

.box-resultado-pergunta-errada {
    position: relative;
    background-color: #e6e6e6; /* Fundo cinza suave */
    border-radius: 20px 0 0 20px; /* Cantos arredondados só à esquerda */
    padding: 35px 30px 25px 40px;
    margin-top: 30px;
    margin-bottom: 30px;
    /* Borda vermelha contínua à esquerda e topo que vai esvanecendo */
    border-left: 2.5px solid #e53935;
    border-top: 2.5px solid rgba(229, 57, 53, 0.3);
    border-bottom: 2.5px solid rgba(229, 57, 53, 0.3); /* Efeito suave no fundo */
    box-shadow: none !important;
    text-align: left;
    background-image: linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,0.2));
}
.box-resultado-pergunta-certa {
    position: relative;
    background-color: #e6e6e6; /* Fundo cinza suave */
    border-radius: 20px 0 0 20px; /* Cantos arredondados só à esquerda */
    padding: 35px 30px 25px 40px;
    margin-top: 30px;
    margin-bottom: 30px;
    /* Borda verde contínua à esquerda e topo/fundo suave */
    border-left: 2.5px solid #4caf50;
    border-top: 2.5px solid rgba(76, 175, 80, 0.3);
    border-bottom: 2.5px solid rgba(76, 175, 80, 0.3); /* Efeito suave no fundo */
    box-shadow: none !important;
    text-align: left;
    background-image: linear-gradient(to left, rgba(76, 175, 80, 0), rgba(76, 175, 80, 0.2));
}

.box-resultado-pergunta::before {
    content: attr(data-number); /* Lê o número gerado pelo JS */
    position: absolute;
    top: -18px;
    left: 20px;
    width: 36px;
    height: 36px;
    background-color: #e53935;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}


/*   ####  END  CSS NOVO LAYOT ####  */


hr.separador {
  border: 2px solid #666;
}
.certa {
  color: #000;
  font-weight: 700;
  margin-left: 20px;
  margin-bottom: 17px;
}
.errada {
  color: #000;
  font-weight: 700;
  margin-left: 20px;
  margin-bottom: 17px;
}
.tabela_nivel_resultados{
    min-width: 325px;
}
.tabela_nivel_resultados th, td {

    text-align: center;
}
.tabela_nivel_resultados {
  border-collapse: separate;
  border-spacing: 15px 12px; /* 15px na horizontal (entre colunas), 0 na vertical */
}

.survey-name{
    color:#E4002B;
}
#group-0 .group-title{
    display:none;
}
.asterisk{
    display:none;
}


.fruity a {
  color: #E4002B;
  text-decoration: underline;
}
.navbar-right{
    display:none;
    visibility: hidden;
}

/*
#outerframeContainer {
  background: rgb(255,255,255, 0.8);
  padding: 35px;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}*/

.table > tbody > tr > td {
  font-size: 19px;
}
.assessment-heading{
    display:none;
} 
.completed-text > p{
    display:none;
}
.table > tbody > tr > th {
  vertical-align: middle;
  text-align: center;
  font-size: 24px;
}


.ls-answers {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0;
}


.question-valid-container{
    display:none;
}

.radio-item {
  padding-left: 20px;
  padding-top: 8px;
}
.list-unstyled li:hover {
  background: #f1f1f1;
  cursor: pointer;
}

.question-text {
  font-size: 17px;
}

.survey-description {
  font-size: 18px;
    margin-top: 25px;
    color: #000 !important;
    text-align: justify;
}

.ls-answers thead tr:not(:first-child) {
  display: none;
}
/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
.em_regex_validation{
    display:none;
}
.logo-ers-lista-inqueritos{
      width: 250px;
      margin-bottom: 55px;
}
#surveyListFooter {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 80px;
  padding-top: 10px;
  margin-top: 0px;
  bottom: 0px;
  height: 60px;
  position:static;
}
.surveys-list .surveytitle{
    box-shadow: 4px 6px 3px #898989;
}
#surveys-list-container {
  margin-top: 15px;
  min-height: 668px;
}
.extends_fruity .navbar-default{
    box-shadow: inset -10px -4px 8px -4px #cacaca !important;
    border-radius: 0px 0px 300px 0px !important;
    margin-right: 5px;
}
.navbar-action-link {
  padding-right: 10em;
}
.nav-logo-ers{
    padding:10px;
}
.logo-container > img {
  max-height: 106px;
  padding: 15px;
  width: auto;
}
.survey-list-heading{
    text-align:center;
}
/*
body{
    background-image: url('https://eventos.ers.pt/upload/themes/survey/extends_vanilla_ers/files/bg_eventos.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}*/

.survey-welcome {
  color: #000 !important;
}


@media (min-width: 1200px) {
    .container {
        width: 100%;
    }
}
@media (max-width: 430px) {
    .errada {
      color: #000;
      font-weight: 700;
      margin-left: 5px;
      margin-bottom: 17px;
    }
    .certa {
      color: #000;
      font-weight: 700;
      margin-left: 5px;
      margin-bottom: 17px;
    }
    
    .box-resultado-pergunta-errada {
      padding: 10px;
    }
    
    .box-resultado-pergunta-certa {
      padding: 10px;
    }
    
    #main-col {
      max-width: 100%;
      margin: 0 auto;
    }
    
}