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

/* -------------------------------
   Importação de fontes
-------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;700&display=swap');

/* -------------------------------
   Reset de estilo e configuração base
-------------------------------- */
body {
    background-color: #f1f2f5; /* Cor de fundo padrão */
    font-family: 'Figtree', sans-serif; /* Fonte padrão */
}

/* -------------------------------
   Estilos de texto e título
-------------------------------- */
h1, h2, h3, .question-title-container, .navbar {
    font-family: 'Figtree', sans-serif;
    font-weight: bold; /* Títulos em negrito */
}

/* -------------------------------
   Barra de navegação
-------------------------------- */
.navbar {
    background-color: #f1f2f5 !important; /* Cor de fundo */
    box-shadow: 0 1px 20px 0 rgb(196, 196, 196); /* Sombra sutil */
}

/* -------------------------------
   Links
-------------------------------- */
a {
    color: #3B82F6;
    text-decoration: none;
}

a:hover {
    color: #2563EB;
    text-decoration: underline; /* Sublinhado ao passar o mouse */
}

a:focus {
    color: #1D4ED8;
    outline: 2px dashed #2563EB; /* Destaque em foco */
    outline-offset: 2px;
}

a:active {
    color: #60A5FA;
}

/* -------------------------------
   Botão primário
-------------------------------- */
.btn-primary {
    background-color: #3B82F6;
    border-color: #3B82F6;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #2563EB;
    border-color: #2563EB;
    color: #ffffff;
    box-shadow: 0px 0px 0px 3px rgba(59, 130, 246, 0.4); /* Sombra azul ao passar o mouse */
}

.btn-primary:focus {
    background-color: #1D4ED8;
    border-color: #1D4ED8;
    color: #ffffff;
    outline: 3px solid rgba(59, 130, 246, 0.5); /* Destaque em foco */
    outline-offset: 2px;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.btn-primary.dropdown-toggle.show,
.btn-primary.dropdown-toggle.show:focus {
    background-color: #60A5FA;
    border-color: #60A5FA;
    color: #ffffff;
    box-shadow: 0px 2px 5px rgba(59, 130, 246, 0.3); /* Sombra leve azul ao clicar */
    transform: translateY(1px); /* Efeito de clique */
}

/* -------------------------------
   Botão Outline (remover sombra)
-------------------------------- */
.btn-outline {
    box-shadow: none; /* Sem sombra */
    outline: none; /* Sem contorno */
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
    box-shadow: none;
    outline: none;
}

/* -------------------------------
   Barra de progresso e alertas
-------------------------------- */
.progress-bar, .alert-info, .alert-info .alert-link {
    background-color: #3B82F6;
    border-color: #3B82F6;
}

/* Alertas de perigo */
.alert-danger {
    border: 1.33px solid #FFFFFF;
    background-color: #EC407A;
    color: #FFFFFF;
}

.text-danger {
    --bs-text-opacity: 1;
    color: #EC407A;
}

/* -------------------------------
   Dropdown
-------------------------------- */
.dropdown-menu > li > a:hover {
    color: #ffffff;
    background-color: #3B82F6 !important; /* Cor ao passar o mouse */
}

/* -------------------------------
   Checkbox customizado
-------------------------------- */
.checkbox-item input[type=checkbox]:checked + label {
    color: #3B82F6; /* Cor do label ao selecionar */
}

.privacy .checkbox-item label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #3B82F6;
    border-width: 3px; /* Borda azul personalizada */
}

.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: transparent;
    color: #3B82F6;
}

/* -------------------------------
   Radio customizado
-------------------------------- */

/* Estilos de cor para o label do botão de rádio quando está selecionado */
.radio-item input[type=radio]:checked + label,
.radio-item input[type=radio]:checked:focus + label,
.radio-item input[type=radio]:checked:active + label,
.radio-item input[type=radio]:checked + label:hover {
    color: #3B82F6;
}

/* Transição suave para o label do botão de rádio */
.radio-item input[type=radio] + label {
    transition: color 0.2s ease-in-out;
}

/* Estilos de background-color para o pseudo-elemento ::after nos estados selecionados e padrões */
.radio-item input[type=radio]:checked + label::after,
.radio-item input[type=radio] + label::after,
body .answer-item label::after,
.radio-item label::after {
    background-color: #3B82F6;
}

/* Transformação do elemento ::after ao estar selecionado */
.radio-item input[type=radio]:checked + label::after {
    transform: scale(1, 1);
}

/* Ajustes de margens específicas no label do botão de rádio */
.radio-item label.ls-label-xs-visibility::after {
    margin-left: 2px;
    padding-left: 0;
}

.radio-item input[type=radio]:checked + label::before {
    border-color: #3B82F6;
    box-shadow: 0 0 0 0.1px #3B82F6; /* Sombra mínima no círculo */
}

/* -------------------------------
   Foco em campos de texto
-------------------------------- */
input[type="text"]:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 8px 3px rgba(59, 130, 246, 0.3); /* Sombra azul suave */
    border-color: #3B82F6; /* Cor da borda ao focar */
}

.form-change-lang #language-changer-select {
    color: #3B82F6;
    background-color: transparent;
}

.form-change-lang #lang-select::after {
    color: #3B82F6;
}

.form-change-lang #lang-select {
    background-color: #f1f2f3;
}

.success-border {
    border-color: #3B82F6;
}

.btn-check + .btn-primary:hover {
    color: #ffffff;
    background-color: #3B82F6;
    border-color: #3B82F6;
    box-shadow: none;
}

.btn-check:checked + .btn-primary, .btn-check:checked + .btn-primary:focus, .btn-check:focus:checked + .btn-primary {
    color: #ffffff;
    background-color: #3B82F6;
    border-color: #3B82F6;
    box-shadow: none;
}

.dropdown-menu > li > a:focus {
    background-color: #3B82F6 !important;
}


#outerframeContainer {
      min-height: 100%;
      word-wrap: break-word;
      -webkit-hyphens: none;
      -o-hyphens: none;
      hyphens: none;
}