/******************
    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
*/
:root{
    /* Layout*/
    /* Definição do Tamanho rem*/
      font-size:16px;
      
      word-break: auto-phrase !important;
    
    /*- Espaçamentos -*/
        /*Considerando font-size: 16px*/
        --espaco: 0.25rem; /* 4px*/
        --espaco-2x: 0.5rem; /* 8px*/
        --espaco-4x: 1rem; /* 16px*/
        --espaco-6x: 1.5rem; /* 24px*/
        --espaco-8x: 2rem; /* 32px*/
        --espaco-10x: 2.5rem; /* 40px*/
        --espaco-16x: 4rem; /* 64px*/
        --espaco-24x: 6rem; /* 96px*/
        --espaco-32x: 8rem; /* 128px*/
        --espaco-64x: 16rem; /* 256px*/
    /**/
    --arredondamento:var(--espaco-2x);
    --arredondamento-2x:var(--espaco-4x);
    --arredondamento-total: 100%;
    /*- Cores */
    /*Plano de Fundo*/
    --pms-cor-fundo-100: #fafafa;
    --pms-cor-fundo-200: #ffffff;

  /*-- Cores Neutras*/
  --neutro-000: #F2F2F2;
  --neutro-100: #EBEBEB;
  --neutro-200: #E6E6E6;
  --neutro-300: #E0E0E0;
  --neutro-400: #C9C9C9;
  --neutro-500: #A8A8A8;
  --neutro-600: #8F8F8F;
  --neutro-700: #7D7D7D;
  --neutro-800: #666666;
  --neutro-900: #171717;

   

    /*Azul - Principal*/
    --pms-cor-azul-000:#F0F7FF;
    --pms-cor-azul-100:#EBF5FF;
    --pms-cor-azul-200:#E0F0FF;
    --pms-cor-azul-300:#CCE6FF;
    --pms-cor-azul-400:#99CEFF;
    --pms-cor-azul-500:#52AEFF;
    --pms-cor-azul-600:#0072F5;
    --pms-cor-azul-700:#0062D1;
    --pms-cor-azul-800:#0068D6;
    --pms-cor-azul-900:#00254D;

    /*Vermelho*/
    --pms-cor-vermelho-000: #FFF0F0;
    --pms-cor-vermelho-100: #FFF0F0;
    --pms-cor-vermelho-200: #FFE6E6;
    --pms-cor-vermelho-300: #FDD8D8;
    --pms-cor-vermelho-400: #F8B9B9;
    --pms-cor-vermelho-500: #F87275;
    --pms-cor-vermelho-600: #E5484D;
    --pms-cor-vermelho-700: #DA2F35;
    --pms-cor-vermelho-800: #CB2A2F;
    --pms-cor-vermelho-900: #391417;

    /*Amarelo*/
    --pms-cor-amarelo-000: #FFF6E6;
    --pms-cor-amarelo-100: #FFF4D6;
    --pms-cor-amarelo-200: #FEF0CD;
    --pms-cor-amarelo-300: #FFDD8F;
    --pms-cor-amarelo-400: #FFC96B;
    --pms-cor-amarelo-500: #F5B047;
    --pms-cor-amarelo-600: #FFB224;
    --pms-cor-amarelo-700: #FF990A;
    --pms-cor-amarelo-800: #A35200;
    --pms-cor-amarelo-900: #4E2009;

    /*Verde*/
    --pms-cor-verde-000: #EFFBEF;
    --pms-cor-verde-100: #EBFAEB;
    --pms-cor-verde-200: #DAF6DA;
    --pms-cor-verde-300: #C6F1C7;
    --pms-cor-verde-400: #99E69E;
    --pms-cor-verde-500: #6CDA75;
    --pms-cor-verde-600: #45A557;
    --pms-cor-verde-700: #398E4A;
    --pms-cor-verde-800: #297A3A;
    --pms-cor-verde-900: #1B311E;

    /*Roxo*/
    --pms-cor-roxo-000: #F9F0FF;
    --pms-cor-roxo-100: #F9F1FE;
    --pms-cor-roxo-200: #F4E8FC;
    --pms-cor-roxo-300: #EDDCF9;
    --pms-cor-roxo-400: #D5B1F1;
    --pms-cor-roxo-500: #BF89EC;
    --pms-cor-roxo-600: #8E4EC6;
    --pms-cor-roxo-700: #763DA9;
    --pms-cor-roxo-800: #7820BC;
    --pms-cor-roxo-900: #2E004D;

    /*Rosa*/
    --pms-cor-rosa-000: #FFEBF5;
    --pms-cor-rosa-100: #FEECF2;
    --pms-cor-rosa-200: #FCE3EC;
    --pms-cor-rosa-300: #F9D7E2;
    --pms-cor-rosa-400: #F5B8CC;
    --pms-cor-rosa-500: #EE87A7;
    --pms-cor-rosa-600: #EA3E83;
    --pms-cor-rosa-700: #DF2670;
    --pms-cor-rosa-800: #BD2864;
    --pms-cor-rosa-900: #430A23;
    
    /*Marca*/
    --pms-cor-marca-primaria: #0B72F9;
    --pms-cor-marca-primaria-hover: #145BB8;
    --pms-cor-marca-primaria-active: #0F448A;
    
    /*Utilitários*/
     --cor-fundo-pagina: var(--pms-cor-fundo-100);
     --cor-fundo-pagina-destaque: var(--pms-cor-fundo-200);
     --cor-fundo-header: var(--cor-fundo-migracao-header);
     --cor-fundo-footer: var(--neutro-100);
     --cor-fundo-primaria: var(--pms-cor-marca-primaria);
     --cor-fundo-primaria-hover: var(--pms-cor-marca-primaria-hover);
     --cor-fundo-primaria-active: var(--pms-cor-marca-primaria-active);
 
     --cor-fundo: var(--neutro-100);
     --cor-frente: var(--neutro-900);
     --cor-fundo-hover: var(--neutro-300);
     
     /* Tipografia*/
     --pms-texto-tipografia-sem-serifa: "Noto Sans", sans-serif;
     --pms-texto-cabecalho-GG:46px;
     --pms-texto-cabecalho-G:36px;
     --pms-texto-cabecalho-M:29px;
     --pms-texto-cabecalho-P:26px;
     --pms-texto-corpo: 18px;
    
    
}
body, .large-heading{
    font-family: var(--pms-texto-tipografia-sem-serifa) !important;
} 
input, button, select, optgroup, textarea{
    font-family: var(--pms-texto-tipografia-sem-serifa) !important;
}

a, a:link, a:not(btn){
  color:#3366ff;
  text-decoration: underline;
}
a:hover, a:active{
  color:#b433ff;
}
a:visited{
  color:#6e209b;
}

/*
    Utilitarios
*/

.arredondar-tudo{
    border-radius: var(--arredondamento);
}

/*
    Componentes
*/
/*
    Navegação superior
*/
#survey-nav{
    background-color: var(--cor-fundo-primaria) !important;
}
#survey-nav .container-fluid.col-xl-8 {
    width: 60vw;
    margin-inline: auto;
}

/*
    Alert
*/
.alert-danger{
    background-color: var(--pms-cor-vermelhor-300);
    border: 2px solid var(--pms-cor-vermelhor-500);
}
.alert-dismissible .btn-close{
    color: var(--pms-cor-vermlho-);
    
}
/*
    Modal
*/
.modal.show .modal-dialog{
    border-radius: var(--arredondamento);
    color: var(--cor-frente);
    border: 2px solid var(--neutro-200);
    overflow:hidden;
    background-color: var(--cor-fundo-pagina);
    overflow: auto;
    max-height: 90vh;
    /*margin: auto;*/
}
.modal.show .modal-dialog:has(#datasecurity_notice) {
    max-width: 80vw;
    margin: auto;
}
.modal-content{
    background-color: inherit;
    max-height: 100%;
    overflow: auto;
}
.modal-body{
    overflow: inherit;
    max-height: inherit;
}
#datasecurity_notice p, #datasecurity_notice ul li, #datasecurity_notice ol li {
    max-width: 75ch;
    font-size: initial;
    line-height: var(--espaco-6x);
    word-break: auto-phrase;
}
/*
    Checkbox Termo de Uso
*/
.datasecurity-checkbox-label a.show-policy{
    display: block;
    margin-block: var(--espaco-4x);
}
/*
    Botões
*/
.btn{
    padding: var(--espaco-2x) var(--espaco-4x);
    min-width: var(--espaco-32x);
    
}
.btn-primary, #ls-button-submit, a[role=button].btn-primary{
    background-color: var(--cor-fundo-primaria);
    color: white !important;
    border:0px solid;
    border-radius: var(--arredondamento);
}
.btn-primary:hover, .btn-primary:focus{
    background-color: var(--cor-fundo-primaria-hover);
    color: white;
    border:none;
    box-shadow: none !important;
}
.btn-primary:active, .btn-primary:active:focus{
    background-color: var(--cor-fundo-primaria-active);
    color: white;
    box-shadow:none !important;
}
.btn-primary[disabled], #ls-button-submit[disabled]{
    color: #9094A7;
    background-color: #D3D5DA;
    box-shadow: none;
    border-color: #D3D5DA;
}
.ls-move-previous-btn{
    background-color: var(--neutro-200);
    border: none;
    border-radius: var(--arredondamento-2x);
    box-shadow: none !important;
}
.ls-move-previous-btn:hover, .ls-move-previous-btn:focus{
    background-color: var(--neutro-300);
}
.ls-move-previous-btn:active{
    background-color: var(--neutro-400);
}
/*
    Radio Button
*/
.ls-answers label, .answer-item label, .control-label{
    color: var(--cor-frente);
}
.radio-item label::before{
    border-color: var(--cor-frente);
}

.radio-item input[type=radio] + label{
    color: var(--cor-frente);
    font-weight: 400;

}
.radio-item input[type=radio] +label:before{
    border: 1px solid var(--cor-frente);
}
.radio-item input[type=radio]:checked + label{
    color: var(--cor-frente);
    font-weight: 700;
}

.radio-item input[type=radio]:checked + label::before{
    border: 2px solid var(--cor-frente);
}
.radio-item input[type=radio]:checked + label::after{
    background-color: var(--cor-frente);
}
/*
    Checkbox
*/
.checkbox-item input[type=checkbox] + label{
    color: var(--cor-frente);
    font-weight: 400;
}
.checkbox-item input[type=checkbox]:checked + label{
    color: var(--cor-frente);
    font-weight: 600;
}

.checkbox-item input[type=checkbox] + label::before{
    background-color: var(--pms-cor-fundo-200);
    border: 1px solid var(--neutro-700);
    
}
.checkbox-item input[type=checkbox]:checked + label::before{
    border: 2px solid var(--neutro-700);
    
}
.checkbox-item input[type=checkbox]:checked + label::after{
    color: var(--neutro-700);
}

.btn-check + .btn-primary {
    border: 1px solid black;
    padding: 1rem;
}
.btn-check:hover + .btn-primary, .btn-check + .btn-primary:hover{
    background-color: var(--cor-fundo-hover);
    border: 1px solid var(--neutro-700);
}

.btn-check:checked + .btn-primary, .btn-check + .btn-primary:active, .btn-check:active + .btn-primary {
    background-color: var(--cor-fundo-primaria);
    border: 2px solid var(--neutro-700);
}

.privacy .checkbox-item label::before{
    border: var(--neutro-900);
}
.question-container .checkbox-item label::before{
    border: var(--neutro-900);
    background-color: var(--pms-cor-fundo-200);
}

/*
    Text Info
*/
.question-container .text-info{
    color: var(--pms-cor-roxo-600) !important;
    padding: var(--espaco-2x);
    margin-block: var(--espaco-2x) var(--espaco-4x);
    background-color: var(--pms-cor-roxo-100);
    border-radius: var(--arredondamento);
    display: none;
}
.question-container .question-title-container i{
    margin-bottom: var(--espaco-4x);
    border-radius: 12px;
    padding: var(--espaco) var(--espaco-2x);
    display: block;
    width: fit-content;
    margin-left: -12px;
}
.question-container .question-title-container i::after {
    content: "Pergunta Obrigatória";
    font-family: "Noto Sans";
    margin-left: var(--espaco-2x);
    font-weight: 700;
    font-size: var(--espaco-4x);
}


/*
    TextArea
*/
textarea.form-control, input.form-control[type=text]{
    border: 1px solid var(--neutro-500);
    border-radius: var(--arredondamento);
}
textarea.form-control:focus, textarea.form-control:active, input.form-control[type=text]:focus, input.form-control[type=text]:active{
    border-color: var(--neutro-800);
    box-shadow: none;
}
/*
    Lista de Números
*/
.ls-even{
    background-color: inherit;
}
.ls-answers .ls-heading th, .ls-answers th{
    color: inherit;
}

/*
    Navigation Container
*/

.navigator-container{
    flex-direction: column;
    align-content: space-between;
}
/*
    Paginas

*/
/*
    Página de Boas Vindas
*/
div#dynamicReloadContainer{
    width: 80vw;
    margin-inline: auto;
}
#welcomeContainer{
    word-break: auto-phrase;
}

/*
    Página de Pergunta
*/
.question-container{
    border: 1px solid var(--neutro-200);
    background-color: var(--neutro-000);
    margin: var(--espaco-4x) var(--espaco-2x);
    padding: var(--espaco-2x);
    border-radius: var(--arredondamento);
}
.question-valid-container, .question-help-container, .question-title-container, .answer-container, .answers-list>.list-unstyled{
    margin: 0px;
}
/*
    Página de Cota
*/
.quotamessage{
    
}
.quotamessage h1{
    font-size: var(--pms-texto-cabecalho-G);
    line-height: 120%;
}
.quotamessage p{
    font-size: var(--pms-texto-corpo);
    line-height: 110%;
    
}

@media screen and (max-width: 480px){
    #navigator-container{
        flex-direction: column;
        align-content: space-between;
}
    #navigator-container .text-start, #navigator-container #ls-button-previous, #navigator-container .text-end, #navigator-container #ls-button-submit{
        width: 100%
}
#navigator-container #ls-button-previous,#navigator-container #ls-button-submit{
    margin-block: 8px
}
    
}