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


.botoes-gradiente .bootstrap-buttons-div:nth-child(1) label {
    max-width: 100% !important;
    background-color: #C21F1F !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}


/* BOTÃO 2 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(2) label {
    max-width: 100% !important;
    background-color: #D43A1F !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}


/* BOTÃO 3 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(3) label {
    max-width: 100% !important;
    background-color: #E35A1F !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}


/* BOTÃO 4 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(4) label {
    max-width: 100% !important;
    background-color: #ED7A24 !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}


/* BOTÃO 5 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(5) label {
    max-width: 100% !important;
    background-color: #F0A030 !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}


/* BOTÃO 6 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(6) label {
    max-width: 100% !important;
    background-color: #D4B63A !important;
    border-color: #9FA19D !important;
    color: white !important;
    margin: 5px 0;
}


/* BOTÃO 7 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(7) label {
    max-width: 100% !important;
    background-color: #A8C44A !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}




/* BOTÃO 8 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(8) label {
    max-width: 100% !important;
    background-color: #79C05B !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}


/* BOTÃO 9 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(9) label {
    max-width: 100% !important;
    background-color: #4FB56A !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}


/* BOTÃO 10 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(10) label {
   max-width: 100% !important;
    background-color: #2E9E5B !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}


/* BOTÃO 11 */
.botoes-gradiente .bootstrap-buttons-div:nth-child(11) label {
    max-width: 100% !important;
    background-color: #0D883E !important;
    border-color: #9FA19D !important;
    color: white !important;
   
}


/* HOVER */


.botoes-gradiente .btn-check:checked + label {
    transform: scale(0.98);
    box-shadow:
        0 0 10px rgba(255,255,255,0.25),
        0 0 20px rgba(0,0,0,0.15);
}




.btn-primary {
    background-color: #3D6176 !important;
    border-color: #9FA19D !important;
    color: #ffffff !important;
}


/* Cor quando o usuário toca, foca ou passa o mouse no botão */
/*.btn-primary:hover, */
/*.btn-primary:focus, */
/*.btn-primary:active {*/
/*    background-color: #COR_MAIS_ESCURA !important;*/
/*    border-color: #COR_BORDA_ESCURA !important;*/
/*    color: #fff !important; */
/*}*/




 /*1. Barra de Progresso do questionário */
.progress-bar {
    background-color: #3D6176 !important;
}




/* 3. Cor dos links gerais e textos de destaque no questionário */
a, .text-primary {
    color: #3D6176;
}
a:hover, a:focus {
    color: #2b4453;
}


/* 4. Cor de fundo genérica para elementos primários */
.bg-primary {
    background-color: #3D6176 !important;
    color: #ffffff !important;
}


/* 5. Cabeçalho (Barra Superior) */
.navbar-default {
    background-color: #3D6176 !important;
    border-color: #2b4453 !important;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text {
    color: #FFFFFF !important;
}


.row.ls-answers.radio-list > div,
.row.ls-answers.radio-list .btn,
.row.ls-answers.radio-list label {
    margin-bottom: 8px !important; /* Adiciona um espaço entre um botão e outro */
    border-radius: 6px !important;  /* Devolve os cantos arredondados que o Bootstrap retira quando agrupa botões */
    white-space: normal !important; /* Garante que textos longos dentro do botão não quebrem o layout */
    font-size: 18px;
    font-weight: 600;
}


.bootstrap-buttons-div.question-item.answer-item input[type="radio"]:checked + label.btn,
.bootstrap-buttons-div.question-item.answer-item input[type="checkbox"]:checked + label.btn,
.bootstrap-buttons-div.question-item.answer-item .btn-check:checked + .btn,
.bootstrap-buttons-div.question-item.answer-item .btn-success,
.bootstrap-buttons-div.question-item.answer-item .btn.active {
    background-color: #DEE9CD !important;
    border-width: 2px;
    font-weight: medium;
    border-color: #9FA19D !important;     /* Borda mais escura */
    color: black !important;            /* Cor do texto (branco) */
}


#ls-button-previous {
    border-color: #3D6176 !important;
    border-width: 2px;
    border-style: solid;
    color: #3D6176 !important;
    font-weight: bold;
}


div.group-title {
    font-size: 32px !important; /* Aumente ou diminua este número conforme necessário */
}


body,
.question-container,
.answer-container,
.ls-answers,
.btn {
    font-size: 20px !important; /* Ajuste este valor (ex: 18px, 22px, 24px) para o tamanho ideal */
}
.form-control
{
    font-size: 16px !important;
}


/* Escala gradiente: uma coluna */
.botoes-gradiente .bootstrap-buttons-div{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}










.ls-button-label {
    min-height: 80px !important;
    min-width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
}




@media only screen and (max-width: 763px) {
    .ls-button-label {
        min-height: 80px !important;
        min-width: 100%;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}


body {
    padding-top: 10px !important;
}


div.group-title.space-col {
    margin-top: 0 !important;
}


div.group-outer-container.space-col {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


div.group-container.space-col {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}




/* estilo da pergunta de 5 estelas */


.stars-list .star-rating i {
    font-size: 2.5rem !important; /* Padrão costuma ser ~1.5rem. Ajuste para mais ou para menos */
    transition: transform 0.2s ease; /* Efeito visual suave ao interagir */
}


.stars-list .star-rating {
    margin: 0 4px !important;
    display: inline-block;
}


/* Efeito opcional: aumenta levemente a estrela selecionada ou sob o cursor */
.stars-list .star-rating:hover i,
.stars-list .star-rating.active i {
    transform: scale(1.15);
}






@media (min-width: 1025px) {
/* Aumenta o tamanho do ícone da estrela */
.stars-list .star-rating i {
    font-size: 3rem !important; /* Padrão costuma ser ~1.5rem. Ajuste para mais ou para menos */
    transition: transform 0.2s ease; /* Efeito visual suave ao interagir */
}


/* Ajusta o espaçamento horizontal entre as estrelas para não ficarem grudadas */
.stars-list .star-rating {
    margin: 0 8px !important;
    display: inline-block;
}


/* Efeito opcional: aumenta levemente a estrela selecionada ou sob o cursor */
.stars-list .star-rating:hover i,
.stars-list .star-rating.active i {
    transform: scale(1.15);
}


/* 1. Ajusta o container principal das estrelas */
.stars-list {
    height: auto !important;          /* Permite que o container cresça com as estrelas */
    min-height: 40px !important;      /* Define uma altura mínima segura */
    line-height: normal !important;   /* Reseta a altura de linha rígida */
    overflow: visible !important;     /* Garante que nada seja cortado nas bordas */
    display: flex !important;         /* Alinha as estrelas perfeitamente na horizontal */
    align-items: center !important;   /* Centraliza verticalmente */
    padding-bottom: 0.5em !important;       /* Dá um espaçamento confortável acima e abaixo */
}


/* 2. Ajusta cada estrela individualmente */
.stars-list .star-rating {
    height: auto !important;
    width: auto !important;
    overflow: visible !important;     /* Evita cortes na área de clique de cada estrela */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* 3. Ajusta o ícone interno da estrela */
.stars-list .star-rating i {
    line-height: 1 !important;        /* Força o ícone a respeitar o próprio tamanho */
    display: block !important;
}


div.question-title-container.col-12 {
    padding-bottom: 0.5em !important;
}


/* 1. Transforma o container pai em um flexbox que aceita quebra de linha */
.group-container {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    padding-bottom: 3em !important;
}




/* 2. Força o Título, Descrição e perguntas de outros tipos (como a Boilerplate 18) a ocuparem 100% da largura */
.group-container > .group-title,
.group-container > .group-description,
.group-container > .question-container:not(.choice-5-pt-radio) {
    width: 100% !important;
    flex: 0 0 100% !important;
}


/* 3. Configura as perguntas de 5 estrelas para ocuparem metade da largura (2 por linha) com espaçamento elegante */
.group-container > .choice-5-pt-radio:not(.d-none):not(.hide) {
    width: 48% !important;             /* Largura de cada container */
    flex: 0 0 48% !important;           /* Garante que o flex respeite os 48% */
    margin: 1% !important;           /* Margem de 1% nas laterais e topo/fundo para totalizar 100% da linha */
    box-sizing: border-box !important;  /* Garante que paddings não quebrem a conta de tamanho */
}


.bootstrap-buttons-div {
  width: 33.33% !important;
  margin-bottom: 10px !important;
}


}



.form-check {
    padding-left: 0px !important;
    padding-right: 1.5rem !important;
  }
  

.list-unstyled.form-inline.btn-toolbar {
    padding: 0 1rem !important;
   
}


@media only screen and (max-width: 756px) {
.bootstrap-buttons-div {
  width: 100% !important;
  margin-bottom: 10px !important;
  
}


.question-item {
    padding-top: 5px !important;
}


.list-unstyled.form-inline.btn-toolbar {
    padding-right: 3rem !important;
   
}


.form-check {
    padding-left: 1rem !important;
    padding-right: 1.5rem !important;
  }
  
.navbar-brand {
    height: 2rem;
}

.navbar .logo {
    max-height: 5rem !important;
    width: auto !important;
}
 
}