@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');
/* }8·) => ################################################################################## */
/* }8·) => ##################### SPINNER #################################################### */
/* }8·) => ################################################################################## */
 #spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Add animation to "page content" */
  .animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
  }
  
  @-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 }
  }
  
  @keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
  }
  
  #windowSpinner
  {
      position:fixed;
      top:0px;
      left:0px;
      z-index:3200;
      filter:alpha(opacity=65);
      -moz-opacity:65;
      opacity:0.65;
      background:#999;
  }



 /* Toaster Notifications*/

 .alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}
.alert-primary .alert-link {
  color: #06357a;
}

.alert-secondary {
  color: #41464b;
  background-color: #e2e3e5;
  border-color: #d3d6d8;
}
.alert-secondary .alert-link {
  color: #34383c;
}

.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}
.alert-success .alert-link {
  color: #0c4128;
}

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}
.alert-info .alert-link {
  color: #04414d;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}
.alert-warning .alert-link {
  color: #523e02;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.alert-danger .alert-link {
  color: #6a1a21;
}

.alert-light {
  color: #636464;
  background-color: #fefefe;
  border-color: #fdfdfe;
}
.alert-light .alert-link {
  color: #4f5050;
}

.alert-dark {
  color: #141619;
  background-color: #d3d3d4;
  border-color: #bcbebf;
}
.alert-dark .alert-link {
  color: #101214;
}



  /* }8·) => ################################################################################## */
  /* }8·) => ################################################################################## */



/* MODIFICACIONES CSS RESPONSIVE*/
img {max-width: 100%;}
header .navbar-nav .nav-link{
  padding: 8px 8px 2px;
}
.btn-group-vertical > .btn{
  width: 40px;
}
main.mt-4 {
  margin-top: 0 !important;
  
}
main > .container{
  /*padding: 120px 15px 40px !important;*/
  max-width: 1320px !important;
  
}
main > .container > .bg-body{
  margin-top: 10px !important;
  
}

label.form-check-label {
  cursor: pointer;
}
#menu > .has-megamenu > .megamenu {
  height: auto !important;
  max-height: none !important;
  margin: 0;
  border: 0;
  overflow-y: hidden;
}
button#deleteBusquedaSimple {
  border-radius: 0 !important;
}
div.able-modal-dialog{
  padding: 10px;
  overflow: auto;
  bottom: 0;
  height: auto !important;
  margin-bottom: 0;
  z-index: 10;
}
.able-prefs-form .modalCloseButton{
  position: absolute;
  top: 10px;
  right: 10px;
}
.able-prefs-form > h1 {
  padding-left: 35px;
  padding-right: 35px;
}
.able-prefs-form .modal-button {
  margin-right: 4px;
}
.able-prefs-form input[type="checkbox"] {
  margin-right: 4px;
}
.row.align-items-center > .row {
  margin: 10px 0 !important;
}
.row.play-screen {
  width: auto !important;
  margin: auto !important;
  max-width: 880px;
}
.row.play-screen video {
  padding: 0 !important;
}
.row > .card.card-item-radiobutton {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
fieldset > legend + .row {
  margin-left: auto !important;
  margin-right: auto !important;
}
.rounded-pill.d-inline-block {
  margin-right: 2px;
}
@media (max-width: 991px) {
  header > .navbar > .container-fluid > div.col-12{
    width: calc(100% - 70px);
  }
  header > .navbar > .container-fluid > div.col-12 > a.border-focus-apricot.outline-0{
    max-width: 360px;
    width: 70% !important;
    padding-right: 20px;
  }
  .logo-min {
    width: 80% !important;
    
  }
  .logo-simula {
    width: 95px;
    height: 33px;
    margin-top: 0.7rem;
    margin-right: 5rem !important;
  }
  button.navbar-toggler {
    margin: 0 10px !important;
  }
  #navbarCollapse ul.navbar-nav.mx-auto{
    width: 100%;
  }
  main > .container > .bg-body > .row{
    margin: 0;
  }
  main > .container > .bg-body .card.col-8.mt-4.translateY-less-1{
    width: 100% !important;
    margin: 0 !important;
    transform: none;
  }
  main > .container > .bg-body > .row > .card.col-10 {
    width: auto;
    margin-top: 20px;
  }
  /*Fases*/
  #menu > .has-megamenu > .megamenu {
    height: auto !important;
    min-height: unset;
  }
  #btnGroupSectores {
    overflow-x: auto;
    white-space: nowrap;
  }
  #btnGroupSectores .btn-check {
    position: static;
    clip: rect(0, 0, 0, 0);
    width: 0;
    height: 0;

  }
  #carousel_instrucciones > .row > .col-2 {
    position: fixed;
    z-index: 10;
    bottom: 65px;
    left: 10px;
  }
  #carousel_instrucciones > .row > .col-2:last-child {
    left: auto;
    right: 10px;
  }
  .carousel-control-prev, .carousel-control-next {
    width: 50px;
    height: 50px;
  }
  #carousel_instrucciones > .row > .col-8 {
    width: 100%;
    padding: 0;
  }
  #carousel_instrucciones > .row > .col-8 .carousel-inner .bg-gray-creme.px-5 {
    padding: 10px !important;
  }
  .carousel-indicators {
    position: static;
    margin-bottom: 0;
    width: 100% !important;
    border-radius: 0.3rem 0.3rem 0 0 !important;
    margin-left: 0 !important;
  } 
  .carousel-item > br {
    display: none;
  }
  .carousel-caption {
    position: static;
    padding: 0;
  }
  .row.play-screen {
    max-width: 600px;
  }
  .test-bool-val .input-group > .card-item-radiobutton{
    margin: 0 -1px !important;
    max-width: 50% !important;
  }
}
@media (max-width: 576px){
  header > .navbar{
    /*min-height: 50px;
    padding: 5px 0;*/
  }
  header > .navbar > .container-fluid {
    padding: 0 5px;
    justify-content: normal;
  }
  header > .navbar > .container-fluid > div.col-12 > a.border-focus-apricot.outline-0 {
    padding-right: 10px;
  }
  header > .navbar > .container-fluid > div.col-12 {
    width: calc(100% - 65px);
  }
  main > .container{
    /*padding-top: 70px !important;*/
    padding-bottom: 20px;
  }
  main > .container > div.bg-body > .container-fluid.px-4{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .card-body .table-responsive .table thead tr {
    display: block;
    width: 100%;
    border-bottom: 1px solid #000;
  }
  .card-body .table-responsive .table thead th {
    display: inline-block;
    padding: 4px;
    border: 0;
  }
  .card-body .table-responsive .table thead th::after{
    content: " / ";
    display: inline-block;
    padding-left: 10px;
  }
  .card-body .table-responsive .table thead th:last-child::after{
    display: none;
  }
  .card-body .table-responsive .table tbody tr {
    display: block;
    width: 100%;
  }
  .card-body .table-responsive .table tbody th {
    display: block;
    width: 100% !important;
  }
  .card-body .table-responsive .table tbody td {
    display: block;
    width: 100% !important;
  }
  .card-body div.mb-3.text-center button.col-4 {
    width: auto;
  }
  .card-body li.row {
    padding-left: 10px !important;
    padding-right: 10px !important;
    flex-wrap: nowrap;
  }
  .card-body li.row > div.col-6 {
    flex-grow: 1;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .card-body li.row > div.col-6 + div.col-6 {
    max-width: fit-content !important;
    padding-left: 6px !important;
    padding-right: 0 !important;
  }
  .megamenu .phase-progress {
    margin-top: 30px !important;
  }
  .btn-continuar, .btn-reiniciar, .btn-iniciar {
    padding: 6px 12px !important;
    margin: 0 !important;
  }
  #tabla_comentarios .table thead tr {
    display: block;
  }
  #tabla_comentarios .table thead tr th {
    display: inline-block;
    width: auto !important;
    border: 0;
  }
  #tabla_comentarios .table thead th::after{
    content: " / ";
    display: inline-block;
    padding-left: 10px;
  }
  #tabla_comentarios .table tbody tr {
    display: block;
  }
  #tabla_comentarios .table tbody tr th {
    display: block;
    margin-top: 10px;
  }
  #tabla_comentarios .table tbody tr td {
    display: block;
  }
  #formBuscador_Est_Conocimiento .input-group {
      display: flex;
      justify-content: center;
  }
  span#inputGroupPrepend {
    padding-right: 0px;
    width: 37px;
  }
  input#BusquedaSimple {
    width: calc(100% - 37px) !important;
    border-radius: 0 4px 4px 0;
  }
  #formBuscador_Est_Conocimiento .input-group button {
      margin: 10px 0;
  }
  button#deleteBusquedaSimple {
    border-radius: 4px 0 0 4px !important;
  }
  button#deleteBusquedaSimple.d-none + button#BotonBusquedaSimple {
      border-radius: 4px;
  }
  .row.droptarget li.drag-item{
    width: 100% !important;
  }
  .input-group.w-50 {
    width: 100% !important;
  }
  .test-bool-val .input-group > .card-item-radiobutton .form-check{
    margin-left:  0 !important;
    padding-left:  0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .test-bool-val .input-group > .card-item-radiobutton {
    padding: 0 !important;
  }
  .test-bool-val .input-group > .card-item-radiobutton .form-check .form-check-input {
    margin: 0 !important;
  }
  .card.card-item-radiobutton.border-color-purple.form-check.radiochecked {
    z-index: 1;
  }
  .test-bool-val .input-group > .card-item-radiobutton .form-check .form-check-label{
    margin-left: 0 !important;
    white-space: nowrap;
    font-size: 0.8rem !important;
  }
  .test-bool-val .input-group > .card-item-radiobutton .form-check .form-check-label .me-2 {
    margin: 0 !important;
  }
  .nav.nav-pills[role="tablist"]{
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

@media (min-width: 412px) and (max-width: 550px) {
  .logo-min {
      margin-top: 5px !important;
  }
}

@media (max-width: 992px) {
  .button-info{
    width: auto;
  }
  #contenedor-header {
    display: flex !important;
  }
}

@media (min-width: 400px) and (max-width: 992px) {
  .navbar-dark .navbar-toggler {
    top: -56px;
    right: 0px;
    margin-right: 6rem;
  }
  .logo-simula{
    width: 134px;
    height: 45px;
    margin-top: 0.1rem;
  }
}

.opinion {
  cursor: pointer;
  color: #912E6B;
  text-decoration-color: #912e6b62;
}

.opinion:hover {
  cursor: pointer;
  color: #912E6B;
  font-weight: 900;
  text-decoration-color: #912E6B;
}
.solution {
  background-color: #f2e6ff;
  border-left: 5px solid #912E6B;
  /* padding: 15px; */
  margin: 20px;
  border-radius: 8px;
  text-align: center; /* Centra el contenido dentro de la sección */
  /*max-width: 800px;  Limita el ancho máximo para que no se expanda demasiado en pantallas grandes */
  margin-left: auto; /* Centra la sección en el contenedor */
  margin-right: auto; /* Centra la sección en el contenedor */
}

.solution p {
  text-align: justify; /* Justifica el texto dentro de los párrafos */
}