.setting-container {
  background-color: var(--base-color);
  position: fixed;
  border-radius: 10px;
  top: 60%;
  left: 50%;
  transform: translate(-500%, -50%);
  width: 60%;
  height: 60%;
  overflow-y: scroll;
  z-index: 2;
  opacity: 0;
  transition: top 300ms ease-in-out, opacity 100ms ease-in-out;
  display: flex;
  flex-direction: column;
}

.setting-container.active-setting {
  transform: translate(-50%, -50%);
  top: 50%;
  opacity: 1;
}

.setting {
  margin: 0 10px 10px 10px;
  display: flex;
}

.setting * {
  margin: 0 5px;
}

.setting input {
  width: 60px;
  text-align: center;
  background-color: var(--darker-font-color);
  border-radius: 5px;
  border: none;
}

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

fieldset.font1,
fieldset {
  margin: 0 10px;
  padding: 10px 0;
  margin-bottom: 10px;
}

fieldset.font1 legend,
fieldset legend {
  margin: 0 10px;
}

.default-colors {
  height: 20px;
}

input[type="radio"][name="font-color"] {
  width: fit-content;
}

.setting.color-picker {
  align-items: center;
}

.margin-top-bottom-container label {
  margin-right: 0;
}
.margin-top-bottom-container label:not(:first-child) {
  margin-left: 20px;
}

.setting > .emphesize-gelem {
  width: fit-content;
}

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

.box-setting-container input,
.box-setting-container label {
  display: inline;
}

.box-setting-container tr {
  height: 1.5em;
}

.box-setting-container input::-webkit-outer-spin-button,
.box-setting-container input::-webkit-inner-spin-button {
  -webkit-appearance: auto;
}