/* own styles */
:root {
  /* valores de colores en un valor 100 (64 en HEX, de entre 0 a 255) portados y adaptados desde style.bundle.css*/
  --bs-primary-100:#1B84FF64;
  --bs-secondary-100:#F9F9F964;
  --bs-success-100:#17C65364;
  --bs-info-100:#7239EA64;
  --bs-warning-100:#F6C00064;
  --bs-danger-100:#F8285A64;

  --bs-text-primary-100:#006AE664;
  --bs-text-secondary-100:#36384364;
  --bs-text-light-100:#1B1C2264;
  --bs-text-success-100:#00A26164;
  --bs-text-info-100:#883FFF64;
  --bs-text-warning-100:#C59A0064;
  --bs-text-danger-100:#E4285564;
}

/* to override d-flex display property */
.hidden {
  display: none !important
}

.val_ok::placeholder {
  color: green;
  opacity: 1;
}

.val_error::placeholder {
  color: red;
  opacity: 1;
}

div.status_info {
  display: table;
}

div.status_info .student_row {
  display: table-row;
}

div.status_info .student_row:last-child .cell {
  border-bottom: none;
}

div.status_info .cell {
  min-width: 65px;
  display: table-cell;
  padding: 2px 5px;
  border-bottom: 1px dotted var(--bs-gray-300) !important;
}

.tooltip-no-wrap .tooltip-inner {
  white-space: nowrap;
  min-width: fit-content;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

table.student_responses thead tr,
table.student_responses thead th {
  border: none;
}

table.student_responses tr td {
  vertical-align: middle;
}

div.correct_incorrect {
  padding: 0px 6px;
  border-radius: 5px;
  background-color: rgba(250, 250, 250, .95);
  font-weight: bold;
  width: fit-content;
  margin: auto;
}

div.correct_incorrect span.correct {
  color: var(--bs-text-success);
}
div.correct_incorrect span.incorrect {
  color: var(--bs-text-danger);
}

.card.card_activity, .card.card_my_resources {
  border: 2px solid var(--bs-primary);
}

.card.card_exam {
  border: 2px solid var(--bs-success);
}

.card.card_learning_situation {
  border: 2px solid var(--bs-info);
}

.card.card_teacher_notebook {
  border: 2px solid var(--bs-danger);
}

.card.card_my_students {
  border: 2px solid var(--bs-warning);
}

.card.card_my_groups {
  border: 2px solid var(--bs-dark);
}

.form-select.form-select-solid.form-select-solid-bg, .form-select.form-select-solid-bg {
  background-color: var(--bs-gray-100);
  border-color: var(--bs-gray-300);
}

td .hover_actions_container {
  opacity: 0.2;
}

td:hover .hover_actions_container {
  opacity: 1;
}

.noUi-connect:nth-child(1)  { background-color: var(--bs-primary); }
.noUi-connect:nth-child(2)  { background-color: var(--bs-success); }
.noUi-connect:nth-child(3)  { background-color: var(--bs-info);    }
.noUi-connect:nth-child(4)  { background-color: var(--bs-warning); }
.noUi-connect:nth-child(5)  { background-color: var(--bs-danger);  }

.noUi-connect:nth-child(6)  { background-color: color-mix(in srgb, var(--bs-primary), orange 50%); }
.noUi-connect:nth-child(7)  { background-color: color-mix(in srgb, var(--bs-success), orange 50%); }
.noUi-connect:nth-child(8)  { background-color: color-mix(in srgb, var(--bs-info),    orange 50%); }
.noUi-connect:nth-child(9)  { background-color: color-mix(in srgb, var(--bs-warning), orange 50%); }
.noUi-connect:nth-child(10) { background-color: color-mix(in srgb, var(--bs-danger),  orange 50%); }


.question_percentage_container_input_1 .input-group-text  { background-color: var(--bs-primary); color: var(--bs-primary-inverse); }
.question_percentage_container_input_2 .input-group-text  { background-color: var(--bs-success); color: var(--bs-success-inverse); }
.question_percentage_container_input_3 .input-group-text  { background-color: var(--bs-info);    color: var(--bs-info-inverse);    }
.question_percentage_container_input_4 .input-group-text  { background-color: var(--bs-warning); color: var(--bs-warning-inverse); }
.question_percentage_container_input_5 .input-group-text  { background-color: var(--bs-danger);  color: var(--bs-danger-inverse);  }

.question_percentage_container_input_6 .input-group-text  { background-color: color-mix(in srgb, var(--bs-primary), orange 50%); color: var(--bs-primary-inverse); }
.question_percentage_container_input_7 .input-group-text  { background-color: color-mix(in srgb, var(--bs-success), orange 50%); color: var(--bs-success-inverse); }
.question_percentage_container_input_8 .input-group-text  { background-color: color-mix(in srgb, var(--bs-info),    orange 50%); color: var(--bs-info-inverse);    }
.question_percentage_container_input_9 .input-group-text  { background-color: color-mix(in srgb, var(--bs-warning), orange 50%); color: var(--bs-warning-inverse); }
.question_percentage_container_input_10 .input-group-text { background-color: color-mix(in srgb, var(--bs-danger),  orange 50%); color: var(--bs-danger-inverse);  }


#speech_to_text_container {
  z-index: 1075; /* show over modal controls */
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 250px;
  height: 50px;
  transition: width 0.25s ease-in-out, bottom 0.25s ease-in-out;
  /*bottom: 10px;*/
  bottom: -50px;
  /*left: 50%;
  transform: translateX(-50%);*/
  right: 50px;
  overflow: hidden;
}

/*
#speech_to_text_container_language {
  min-width: 250px;
}
*/

#speech_to_text_container > #speech_to_text_info {
  display: none;
}

#speech_to_text_container:hover {
  border: 2px solid var(--bs-primary) !important;
}

#speech_to_text_container.active {
  width: 350px;
}

#speech_to_text_container.active > #speech_to_text_info {
  display: block;
}

#speech_to_text_animation video {
  object-fit: cover;
}



#send_improvement_error_container {
  z-index: 1075; /* show over modal controls */
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 50px;
  height: 50px;
  transition: width 0.25s ease-in-out, bottom 0.25s ease-in-out;
  bottom: 10px;
  left: 50px;
  overflow: hidden;
  cursor: pointer;
}

#improvement_error_screenshot {
  height: 800px;
  max-height: 40vh;
  overflow-y: scroll;
}

#send_improvement_error_icon {
  margin-left: -5px;
  margin-top: 5px;
}

#kt_drawer_improvement_error_permanent {
  z-index: 1080; /* show over modal controls and over toggle button */
}

#kt_drawer_linked_resources {
  z-index: 1070; /* show over modal controls but under improvement_error toggle button AND OVER SWAL alerts (1060 by default) need to change swal alerts */
}

.swal2-container {
  z-index: 1075 !important;
}

.swal-wide {
  max-width: 800px !important;   /* más ancho */
  width: 90% !important;
  max-height: 90vh !important;   /* más alto */
}
.swal2-html-container {
  max-height: none !important;   /* elimina el scroll interno */
  overflow: visible !important;
}



/* duallistbox start */
.bootstrap-duallistbox-container button.move,
.bootstrap-duallistbox-container button.remove,
.bootstrap-duallistbox-container button.moveall,
.bootstrap-duallistbox-container button.removeall {
  border: 1px solid #ccc !important;

  &:hover {
    background: #efefef;
  }
}

/* Only included because button labels aren't showing */

/*
.move::after {
  content: attr(title);
}
.moveall::after {
  content: attr(title);
}
.remove::after {
  content: attr(title);
}
.removeall::after {
  content: attr(title);
}
*/

.bootstrap-duallistbox-container select[multiple=multiple] {
  min-height: 15em;
}
/* Custom styling form */
.bootstrap-duallistbox-container option {
  padding: 5px 3px !important;
  border-bottom: 1px solid #efefef !important;
}
/* duallistbox end */

.student_picture, .teacher_picture {
  aspect-ratio: 1;
}

.pointer {
  cursor: pointer;
}


/* Customize Selects https://developer.chrome.com/blog/a-customizable-select?hl=es-419 */
/* no funciona
.custom-select,
select[data-multiselectsplitter-firstselect-selector],
select[data-multiselectsplitter-secondselect-selector] {
  &, &::picker(select) {
    appearance: base-select;
  }
}
*/

/* DataTables */
.dt-length > select {
  margin-right: 10px;
}

.dt-length > label {
  color: var(--text-muted);
}

.min-w-fit-content {
  min-width: fit-content;
}

.only-bottom-border {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}