.area-overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 199;
    pointer-events: none;
}
.text-element{
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
}
.text-button{
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
}
.debug-modal{
    background-color: red;
    position: absolute;
    left: 16%;
    top: 150px;
    z-index: 9999;
}

.circle-progress{
    .circle-1{
        fill: none;
        stroke-width: 10px;
        stroke-dasharray: 283;
        stroke-dashoffset: 113;
        transition: 0.25s;
        transform: rotate(-90deg);
        transform-origin: center;
    }
}

.text-progress{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7em;
}

.dragger{
  background-color: #FFFFFF;
  border-radius: 19px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border 0.25s, color 0.25s;
  cursor: pointer;
  word-wrap: anywhere;
  font-weight: 600;
  font-size: 1.05em;
  border: none;
  box-sizing: border-box;
  border: 2px solid transparent;
}

.dragger[data-inserted="true"]{
    border: 2px solid #E1DAFF;
}

.dragger.incorrect{
    border: 2px solid #FF1313;
}

.dragger.correct{
    border: 2px solid #44DC6F;
}

.dragger-area{
    background-color: #F3F3F3;
    border-radius: 19px;
    box-shadow: 0px 0px 15px 2px rgba(239,235,255,1);
	-webkit-box-shadow: 0px 0px 15px 2px rgba(239,235,255,1);
	-moz-box-shadow: 0px 0px 15px 2px rgba(239,235,255,1);
}

.dragger.disabled{
  background-color: #d5dbde;
  cursor: default;
}
.dragger:not(.disabled):not(.correct):not(.incorrect):hover{
border: 2px solid #AD9AFF;
  /* color: white; */
}
.text-button{
    transition: background 0.25s;
}