/******************
    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 {
  --bs-blue: #228BE6;
  --bs-indigo: #4C6EF5;
  --bs-purple: #5919B3;
  --bs-pink: #E64980;
  --bs-red: #FA5252;
  --bs-orange: #FD7E14;
  --bs-yellow: #FAB005;
  --bs-green: #198754;
  --bs-teal: #12B886;
  --bs-cyan: #15AABF;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #5919B3;
  --bs-secondary: #9094A7;
  --bs-success: rgba(18, 184, 134, 0.10); /* Cambiado*/
  --bs-danger: rgba(250, 82, 82, 0.10); /* Cambiado*/
  --bs-warning: rgba(250, 176, 5, 0.10); /* Cambiado*/
  --bs-info: rgba(76, 110, 245, 0.10); /* Cambiado*/
  --bs-light: #EEEFF7;
  --bs-dark: #1E1E1E;
  --bs-black60: #666666;
  --bs-cancel: #9094A7;
  --bs-primary-rgb: 89, 25, 179;
  --bs-secondary-rgb: 144, 148, 167;
  --bs-success-rgb: 18, 184, 134;
  --bs-danger-rgb: 250, 82, 82;
  --bs-warning-rgb: 250, 176, 5;
  --bs-info-rgb: 76, 110, 245;
  --bs-light-rgb: 238, 239, 247;
  --bs-dark-rgb: 30, 30, 30;
  --bs-black60-rgb: 102, 102, 102;
  --bs-cancel-rgb: 144, 148, 167;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1.14rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

body .top-container {
    margin-top: 0px !important;
}

@media (min-width: 1200px) {
    .col-xl-8 {
        width: 50%;
    }
}

.top-content {
    padding-top: 0;
}

.alert {
  margin-bottom: 1rem;
}

.top-container .progress {
    height: 20px;
    margin-bottom: 0;
}

.progress .progress-bar {
    line-height: 18px;
}

.survey-name, .survey-description, .survey-welcome {
    margin-top: 1em !important;
    margin-bottom: 1em;
}

#survey-nav.navbar {
    box-shadow: 0 1px 4px 0 rgb(196, 196, 196); 
}

.group-outer-container .space-col {
    margin-bottom: 1em;
}

.group-container .group-title {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1em;
}

.group-container .group-description {
    font-size: 16px;
    line-height: 120%;
}

.question-container {
    margin-bottom: 1em;
}

.answer-container {
    margin-bottom: 1em;
}

.answer-container {
    margin-bottom: 1em;
}

.list-unstyled {
    margin-bottom: 0;
}


li:last-child {
  margin-bottom: 0;
}

.question-container .asterisk {
     float: left !important;
     color: red;
     font-size: .75em;
     font-weight: bold;
}

.question-container .ls-label-question {
    font-size: 1em;
    font-weight: normal;
    line-height: 120%;
}

.question-container .question-valid-container {
    margin: 0;
}

.question-container .question-valid-container > .text-danger {
    margin-bottom: 10px;
    font-size: 1rem;
}


.alert {
    padding-top: 16px;
    padding-bottom: 16px;
}

.alert-success {
    border: 1px solid #12B886;
}

.alert-danger {
    border: 1px solid #FA5252;
}

.alert-warning {
    border: 1px solid #FAB005;
}

.alert-info {
    border: 1px solid #4C6EF5;
}

.has-error .form-control, .input-error .form-control {
    box-shadow: none;
    border: 2px solid #FF515F;
}

.alert-dismissible .btn-close {
    padding: 1.2rem 1rem;
}


.form-heading {
    font-weight: normal;
    font-size: 1.1rem;
    line-height: 120%;
}

.ls-answers label, .answer-item label, .control-label {
    color: #333;
    font-weight: normal;
}

.question-container .ls-question-message {
    color: #68676F;
    font-style: normal;
    font-size: 0.9975rem;
    font-weight: 100;
    margin-bottom: 0;
}

.ls-questionhelp  {
    color: #68676F;
    font-style: normal;
    font-size: 0.9975rem;
    font-weight: 100;
    margin-bottom: 0;
}

.logo-container > img {
    padding: 8px;
}

.navbar-brand {
    display: block !important;
}

/* Igualar anchura de los desplegables (List Dropdown) a los inputs de texto */
.answer-container .row.g-1.ls-answers.answer-item > .col-auto {
    flex: 1 1 100%;
    max-width: 100%;
}

/* Quitar el margen extra que aporta Bootstrap (mb-3) en la fila del desplegable,
   para que el espaciado entre preguntas coincida con el de los campos de texto */
.answer-container .mb-3 {
    margin-bottom: 0 !important;
}

/* Igualar la altura de los desplegables (List Dropdown) a los inputs de texto (40px) */
.answer-container .form-select.list-question-select {
    height: 40px;
}

@media (max-width: 768px) {
    .navbar {
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .logo-container > img {
    max-height: 64px;
    }
    
}