.word-spacing{
    word-spacing: .4rem;
}
::placeholder {
    font-size: .9rem;
    font-weight: bold;
    text-align: center;
    color: var(--color-gray);
}
input, .input-box{
    text-align: center;
    color: #a6a6a6;
    font-weight: bold;
    font-size: .9rem;
    height: 2.8rem;
    background: transparent;
    border: none !important;
    background: transparent;
    box-shadow: none !important;
    outline: none !important;
}
.input-group-text{
    border: none;
    border-right: .1rem solid #4a5568;
    background-color: transparent;
}
button[type="submit"], .btn-long {
    height: 2.8rem;
}
.form-check-input {
  background-color: var(--color-dark) !important;
  border: .1rem solid #4a5568 !important;
  box-shadow: none !important;
  box-sizing: border-box;
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: middle;
}
.modal-content {
    margin: 0 4.5rem;
    background: var(--color-dark-light)!important;
}
.btn-sm{
    width: 2.8rem;
    height: 2.8rem;
}
@media screen and (max-width: 992px){
    .modal{
        padding: 2% 2%;
    }
    .modal-content {
        margin: 0 0;
    }
}
.progress {
  height: 6px;
  background-color: var(--color-dark-soft);
}
.progress-bar {
  background: linear-gradient(135deg, #fec62b, #ff9f1c);
}
.cprogress {
  --size: 7.5rem;
  --track: var(--color-dark-soft);
  --fill: var(--color-golden);
  position: relative;
  width: var(--size);
  height: var(--size);
}
.cprogress-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff 78%, transparent 80% 100%),
    conic-gradient(var(--fill) var(--angle), var(--track) var(--angle));
  transition: background 0.1s linear;
}
.cprogress-center {
  position: absolute;
  inset: 0;
  margin: 6px;
  border-radius: 50%;
  background: var(--color-dark-light);
  text-align: center;
}