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

.table-bordered > thead > tr > th {
  border: 1px solid #dadada;
}
.table-bordered > thead > tr > td {
  border: 1px solid #dadada;
}

:root {
  --nos-rojo-boton: #96282b;
  --nos-rojo-boton-rgb: 150, 40, 34;
  --nos-rojo-medio: #793334;
  --nos-rojo-oscuro: #4f2122;
  --nos-gris-medio: #777777;
  --nos-gris-claro: #e0e0e0;
  --nos-celeste: #c2efeb;
  --nos-negro: #000;
  --nos-blanco: #fff;
}

/* Fondo logo inicial */
.jumbotron {
  background-color: var(--nos-gris-claro);
}

/* Centrado texto selector de grupos de test */
.survey-list-heading {
  text-align: center
}

/* Color botones selección de grupos de test (.survey-list .btn-group .btn-primary) */
.btn-primary {
  color: var(--nos-blanco);
  background-color: var(--nos-rojo-boton);
  border-color: var(--nos-rojo-oscuro);
}
.btn-primary:hover {
  color: var(--nos-blanco);
  background-color: var(--nos-negro);
  border-color: var(--nos-negro);
}
.btn-primary:focus,
.btn-primary.focus {
  color: var(--nos-blanco);
  background-color: var(--nos-negro);
  border-color: var(--nos-negro);
  -webkit-box-shadow:0 0 6px rgba(79,33,34,.6);
  box-shadow:0 0 6px rgba(79,33,34,.6)
}
.btn-primary.active,
.btn-primary:active,
.open>.dropdown-toggle.btn-primary {
  color: var(--nos-blanco);
  background-color: var(--nos-negro);
  border-color: var(--nos-negro)
}
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover {
  color: var(--nos-blanco);
  background-color: var(--nos-negro);
  border-color: var(--nos-negro)
}
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary:active:focus,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus {
  -webkit-box-shadow:0 0 6px rgba(130,130,130,.6);
  box-shadow:0 0 6px rgba(130,130,130,.6)
}
.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled].focus,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary.focus,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:hover {
  background-color: var(--nos-rojo-boton);
  border-color: var(--nos-rojo-medio)
}
.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary[disabled].focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary.focus,
fieldset[disabled] .btn-primary:focus {
  -webkit-box-shadow:0 0 0 rgba(130,130,130,0);
  box-shadow:0 0 0 rgba(130,130,130,0)
}
.btn-check:active + .btn-primary, 
.btn-check:checked + .btn-primary, 
.btn-primary.active, 
.btn-primary:active, 
.show > .btn-primary.dropdown-toggle {
  background-color: var(--nos-negro);
  border-color: var(--nos-negro);
  color: var(--nos-blanco);
  -webkit-box-shadow:0 0 0 rgba(130,130,130,0);
  box-shadow:0 0 0 rgba(130,130,130,0);
}

/* Color texto "extra" para introducir TOKEN, fondo caja, alineado texto etiqueta respuesta y sombreado campo respuesta */
.text-info {
  color: rgba(var(--bs-dark),var(--bs-text-opacity)) !important;
}
.token-page .bg-light {
  background-color: rgb(234, 234, 234) !important;
}
.token-page .form-horizontal .control-label {
  text-align: left;
}
.token-page .checkbox-item input[type="checkbox"]:invalid + label::before, .form-control:invalid, .no-js .input-error .form-control, .no-js .input-error input, .radio-item input[type="radio"]:invalid + label::before {
  border-color: var(--nos-rojo-boton);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px var(--nos-rojo-boton);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px var(--nos-rojo-boton);
}

/* Boton ACEPTAR Token */
.token-page .btn-outline-secondary {
  background-color: var(--nos-rojo-boton);
  border-color: var(--nos-rojo-oscuro);
  color: var(--nos-blanco);
}
.token-page .btn-outline-secondary:hover {
  background-color: var(--nos-negro);
  border-color: var(--nos-negro);
  color: var(--nos-blanco);
}
.token-page .btn-outline-secondary:focus,
.token-page .btn-outline-secondary.focus {
  color: var(--nos-blanco);
  background-color: var(--nos-negro);
  border-color: var(--nos-negro);
  -webkit-box-shadow:0 0 6px rgba(79,33,34,.6);
  box-shadow:0 0 6px rgba(79,33,34,.6)
}
.token-page .btn-outline-secondary.active,
.token-page .btn-outline-secondary:active,
.token-page .open>.dropdown-toggle.btn-outline-secondary {
  color: var(--nos-blanco);
  background-color: var(--nos-negro);
  border-color: var(--nos-negro)
}

/* Boton cambiar de idioma */
.form-change-lang .btn-info {
  background-color: var(--nos-rojo-boton);
  border-color: var(--nos-rojo-oscuro);
  color: var(--nos-blanco);
}
.form-change-lang .btn-info:hover {
  background-color: var(--nos-negro);
  border-color: var(--nos-negro);
  color: var(--nos-blanco);
}
.form-change-lang .btn-info:focus,
.form-change-lang .btn-info.focus {
  color: var(--nos-blanco);
  background-color: var(--nos-negro);
  border-color: var(--nos-negro);
  -webkit-box-shadow:0 0 6px rgba(79,33,34,.6);
  box-shadow:0 0 6px rgba(79,33,34,.6)
}

/* Color del texto de la pregunta */
.list-radio .text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--nos-rojo-boton-rgb),var(--bs-text-opacity)) !important;
}

/* Color marca tipo radio */
.radio-item label::after {
  background: var(--nos-rojo-boton);
  color: var(--nos-rojo-boton);
}