math-field {
  opacity: 1;
}

math-field.correct_field {
  background-color: #e9ecef;
}

.correct_field {
  background-color: #e9ecef;
  color: green;
  box-shadow: 0px 0px 2px green;
}

.incorrect_field {
  box-shadow: 0px 0px 10px red;
  color: red;
}

.hint_field {
  box-shadow: 0px 0px 10px yellow !important;
}

input.incorrect_field {
  box-shadow: 0px 0px 10px red;
}

#preview-tutor  .btn-column{
  background: none !important;
  border: none !important;
}

#preview-tutor  .btn-row-item{
  background: none !important ;
  border: none !important;
}
.flash {
  width: 500px;
  margin: 5px auto 5px auto;
}

/* Used in factor_xbox */
.wrapper_small {
  display: grid;
  grid-template-columns: auto auto;
}

.wrapper_large {
  display: grid;
  grid-template-columns: auto auto auto;
}

#container-consent {
  margin: 5%;
  margin-left: 20%;
  margin-right: 20%;
}

.areabox input {
  text-align: center;
  width: 100%;
  height: 90px;
}

.areabox div {
  padding: 1px;
}

/* Drag and Drop */
.draggable {
  /*    width: 25%;*/
  /*    min-height: 6.5em;*/
  /*    margin: 1rem 0 0 1rem;*/
  /*    background-color: #29e;*/
  /*    color: white;*/
  /*    border-radius: 0.75em;*/
  /*    padding: 4%;*/
  /*    touch-action: none;*/
  /*    user-select: none;*/
}

#tutor-title {
  width: 100%;
  height: 150px;
  background-color: #ffcd29;
  border-radius: 8px;
}

#title-font {
  font-size: 70px;
  text-align: center;
}

div {
  text-align: center;
}

.tutor-button-group {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
  border-radius: 15px !important;
  background-color: black !important;
}

.btn_group {
  color: white !important;
  font-size: 30px !important;
}

h5 {
  color: white !important;
  font-size: 20px !important;
}

.rounded-button {
  border-radius: 20px !important;
}

.row {
  --bs-gutter-x: -0 !important;
}

#btn_hint {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  background-color: #b3b3b3 !important;
  color: black !important;
  border: none !important;
}

.btn-tutor-title {
  background-color: #ffa629 !important;
  border: solid;
  border-color: #b3b3b3 !important;
  color: black !important;
}

.btn-initial-problem {
  background-color: #aff4c6 !important;
  border: solid;
  border-color: #b3b3b3 !important;
  color: black !important;
}

.btn-label {
  background-color: #b3b3b3 !important;
  border: solid;
  border-color: #b3b3b3 !important;
  color: black !important;
}

.btn-input-box-v {
  background-color: #bde3ff !important;
  border: solid;
  border-color: #b3b3b3 !important;
  color: black !important;
}

.btn-row {
  background-color: #ffc7c2 !important;
  border: solid;
  border-color: #b3b3b3 !important;
  color: black !important;
}

.btn-column {
  background-color: #bde3ff !important;
  border: solid;
  border-color: #b3b3b3 !important;
  color: black !important;
}

.btn-input-box-t {
  background-color: white !important;
  border: solid;
  border-color: #b3b3b3 !important;
  color: black !important;
}

.btn-spacer {
  background-color: #bde3ff !important;
  border: solid;
  border-color: #b3b3b3 !important;
  color: black !important;
}

.btn-details {
  background-color: black !important;
  /*    border: solid;
    border-color: #b3b3b3!important;
    color: black!important;*/
}

#page .btn-tutor-title {
  width: 60%;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 45px;
}

#page .btn-row {
  width: 100% !important;
  /*    margin-top: 20px;*/
  /*     height: 100%; */
  /* height: fit-content; */
  /* overflow: unset; */
}

.btn-row {
  height: auto;
  min-height: 14% !important;
}

#page #page-item-ul-top .btn-input-box-t {
}

#page #page-item-ul-bottom .btn-input-box-t {
}

#page .btn-initial-problem {
  margin-right: 5px;
  margin-left: 5px;
  /* width: 15%;
    height: 45px; */
  display: flex !important;
  align-items: center !important; /* Vertical center alignment */
  justify-content: center;
}

#page .btn-label {
  margin-right: 5px;
  margin-left: 5px;
  /* width: 15%;
    height: 45px; */
  display: flex !important;
  align-items: center !important; /* Vertical center alignment */
  justify-content: center;
}

#page .btn-input-box-t {
  margin-right: 5px;
  margin-left: 5px;
  /* width: 15%;
    height: 45px; */
  display: flex !important;
  align-items: center !important; /* Vertical center alignment */
  justify-content: center;
}

#page .btn-input-box-v {
  margin-right: 5px;
  margin-left: 5px;
  /* width: 15%;
    height: 45px; */
  display: flex !important;
  align-items: center !important; /* Vertical center alignment */
  justify-content: center;
}

#page .btn-column {
  /*    margin-top: 20px;*/
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

#page .btn-row::-webkit-scrollbar-thumb {
  background-color: grey;
  border: 6px solid transparent;
  border-radius: 20px;
  background-clip: padding-box;
}

#page .btn-row::-webkit-scrollbar {
  width: 20px;
}

#page .btn-column::-webkit-scrollbar-thumb {
  background-color: grey;
  border: 6px solid transparent;
  border-radius: 20px;
  background-clip: padding-box;
}

#page .btn-column::-webkit-scrollbar {
  width: 20px;
}

#page_parent {
  height: 60%;
  overflow: auto;
}

#page {
  height: 100%;
}

#page::-webkit-scrollbar-thumb {
  background-color: grey;
  border: 6px solid transparent;
  border-radius: 20px;
  background-clip: padding-box;
}

#page::-webkit-scrollbar {
  width: 20px;
}

#page .removeFromDom {
  display: none !important;
  visibility: hidden !important;
}

.containe-fruits {
  width: 150px;
  height: 300px;
  margin: 20px;
  padding: 20px;
  background: #f0f2f5;
  border-radius: 5px;
  box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
  color: #f5f5f5;
  background: #c2185b;
}

.containe-electronics {
  width: 150px;
  height: 300px;
  margin: 20px;
  padding: 20px;
  background: #f0f2f5;
  border-radius: 5px;
  box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
  color: #f5f5f5;
  background: #607d8b;
}

.containe-bucket {
  width: 150px;
  height: 300px;
  margin: 20px;
  padding: 20px;
  background: #f0f2f5;
  border-radius: 5px;
  box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
  color: #f5f5f5;
  background: #0288d1;
}

.list {
  list-style: none;
  height: 75% !important;
  /* min-height: 18vh; */
}

UL .btn-row .list {
  height: 100% !important;
  /*    height: 100%;*/
  min-height: 3vh;
  padding: 10px;
}

.list li {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #d2d2d2;
  border-radius: 5px;
}

.dummy {
  border: 5px dashed #d1d1d1;
  border-color: #ffcd29;
}

.active {
  background: #6a1b9a;
}

.clicked {
  border-color: yellow !important;
}

.text-area {
  width: 100%;
  border: solid;
  border-color: #f0f2f5 !important;
  border-radius: 8px;
  padding: 20px;
  background-color: #b3b3b3;
}

#page-container #page-item-ul-top {
  min-width: 50px;
  min-height: 50px;
  border: 1px dotted #607d8b;
  border-radius: 5%;
  margin-bottom: 4px;
}

#page-container #line {
  display: flex !important;
  width: 10 0% !important;
  border: none;
  background-color: gray;
  height: 2px;
  /* margin-left: -9px !important; */
}

#page-container #page-item-ul-bottom {
  min-width: 50px;
  min-height: 50px;
  border-radius: 5%;
  border: 1px dotted #607d8b;
  margin-top: 4px;
}

#page-container #row-item {
  min-height: 50px;
}

#line {
  display: none;
}

.fractions-div {
  display: block;
  background-color: white !important;
  border: solid;
  border-color: #b3b3b3 !important;

  /* justify-content: center; */
}

#page .page-item {
  min-height: 25px;
  padding-left: 10px;
  padding-right: 10px;
}

/* #page input {
min-height: 25px;
padding-left: 10px;
padding-right: 10px;
} */

#page > .fractions-div .page-item {
  min-height: 25px;
  padding-left: 10px;
  padding-right: 10px;
}

#tutor_body {
  margin-top: 60px !important;
}

#page .page-item-ul {
  /*    padding-top: 10px;
    padding-bottom: 10px;*/
  height: 100% !important;
}

#page {
  padding: 10px;
}

#page .btn-fractions {
  background-color: none !important;
  border: none !important;
}

.btn-fractions {
  background-color: #b3b3b3;
  border: solid;
  border-color: #b3b3b3;
  color: black;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#playground {
  /* min-height: 1000px; */
  height: 1500px;
}

#modal-width {
  width: 600px !important;
}

#content #tutor-list {
  /* padding-right: 180px !important;
  padding-left: 180px !important; */
}

#header_style {
  /* padding-right: 180px !important;
  padding-left: 180px !important; */
}

.black_color {
  background-color: black !important;
  width: 100%;
}

table {
  width: 100%;
}
table td {
  padding: 5px;
}
table thead th {
  background-color: #54585d;
  color: #ffffff;
  font-weight: bold;
  font-size: 20px;
  border-bottom: 1px solid #54585d;
}
table tbody td {
  color: #636363;
  border-bottom: 3px solid #dee2e6;
  font-weight: bold;
  font-size: 20px;
}