/* PANEL */

.title {
  margin: 0 auto;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.kirara {
  width: 4rem;
}

.title h1 {
  margin: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.section-panel {
  /* width: fit-content; */
  margin: 0 auto;
  background-color: var(--color-1);
  padding: 1rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
  position: relative;
}

.progress-value-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.progress-value-container ion-icon {
  width: 2.4rem;
  height: 2.4rem;
}

.progress-value {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-8);
}

.progress-container {
  width: 50%;
  background-color: #fff;
  margin: 0.5rem auto 2rem;
  border-radius: 100rem;
  border: 0.1rem solid var(--color-6);
  box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.4);
}

.progress-bar {
  width: var(--progress);
  height: 0.5rem;
  background-color: var(--color-6);
  border-radius: 100rem;
}

.material-panels {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.material-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.img-container {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0.4rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.img-container img {
  width: 8rem;
  transition: all 0.3s;
}

.img-container img:hover {
  transform: scale(1.1);
}

.material-name {
  font-size: 1rem;
  font-weight: 600;
}

.material-input {
  text-align: center;
  width: 8rem;
  padding: 0.2rem;
  border-radius: 100rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-9);
  border: none;
}

.material-input:focus {
  outline: none;
  box-shadow: 0 0 0.2rem var(--color-9);
}

.material-input::-webkit-outer-spin-button,
.material-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.add-remove-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 8rem;
}

.add-remove-btns ion-icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-9);
  border-radius: 50%;
}

.last-material,
.next-material {
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: 45%;
  /* transform: translateY(-50%); */
}

.last-material {
  left: 0rem;
}

.next-material {
  right: 0rem;
}

.unlock-init-numbers,
.lock-init-numbers {
  width: 1.8rem;
  height: 1.8rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.init-number {
  font-size: 1rem;
}