/* -------------------------------------------------------- */
 #inner-container {
  margin: 20px auto;
  background-color: #c5f5fc;
  border-radius: 5px;
}
#outer_container {
  overflow: hidden; /*Hide overflow */
}

#inner_container {
  overflow: auto;
}

.form-control {
  border-color: #333;
}
.centered {
  align-items: center;
  text-align: center;
}
hr {
  height: 2px; /* Set height as desired */
  background-color: #333; /* Optional: Change background color */
  border: none; /* Remove default border */
  margin: 10px 0; /* Optional: Add margin for spacing */
}

  /* Style the div */
  .result-text {
    display: none; /* Initially hide the div */
  }
  /* Show the div if it's not empty */
  .result-text:not(:empty) {
    display: flex;  
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    padding: 20px;
    font-size: 22px;
    background-color: rgb(252, 223, 186);
    border-width: 1px;
    border-color: #333;
    border-radius: 10px;
    border-style: solid;
    width: 60%;
  }
/* Buttons style */
/* .btn {
    margin-left: 30px;
    margin-right: 30px;
} */
.btn-dark {
    border-radius: 30px;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.txt {
    margin: 30px;
}

/* Info style */
#boxBack {
  /* (A1) FULLSCREEN + CENTERED */
  position: fixed; z-index: 999;
  top: 0; left: 0;
  width: 100vw; 
  height: 100vh;
  align-items: center; justify-content: center;
  /* (A2) TRANSPARENT BACKGROUND + HIDDEN */
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
 /* (A3) ADD THIS CSS CLASS TO SHOW */
#boxBack.show {
  display: flex;
}
 /* (B) DIALOG BOX */
#boxWrap {
  /* min-width: 300px; 
  max-width: 600px; */
  padding: 10px;
  background: #fff;
}
/* .float-end{
  padding: 10px;
} */
a {
  color: rgb(67, 67, 67);
}
a on-hover {
  color: rgb(67, 67, 67);
}
.top {
  display: flex;
  padding: 20px 0px  0px 0px;
}
.image {
  margin-left: 20px;
}
.levels {
  margin: 5px;
}
.icons {
  color: #0300b8;
}