.numbers {
    border-color: #6B6DA8;
    border-style: solid;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #6B6DA8;
    margin-top: 1vmin;
}

.number-single {
    display: flex;
    width: 58vmin;
    justify-content: space-around;
}

.number-single:before,
.number-single:after {
    content: "";
    width: 20vmin;
    background-image: radial-gradient(circle at center,  #ECF6FF .6vmin, #6B6DA8 .6vmin);
    background-size: 100% 100%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
}

.number-single-input {
    position: relative;
    display: inline;
    color: #6B6DA8;
    background-color: #ECF6FF;
    min-width: 9vmin;
    outline: none;
    font-size: 4vmin;
    background-color;
    color: #6B6DA8;
    background-color: #ECF6FF;
    border: none;
    font-family: "Montserrat";
    text-align: center;
    margin: 1vmin;
    text-transform: uppercase;
}

/*  Placeholder text color */
.number-single-input::placeholder{color: #6B6DA8;}
.number-single-input::-webkit-input-placeholder{color: #6B6DA8;}
.number-single-input::-moz-placeholder{color: #6B6DA8;}
.number-single-input::-ms-input-placeholder{color: #6B6DA8;}

.wrong {
    color: #ECF6FF;
    background-color: #6B6DA8;
    transition: .2s;
}

.success {
    color: #C4CCE4;
    border-color: #C4CCE4;
}

.success .number-single:before,
.success .number-single:after {
    background-image: radial-gradient(circle at center,  #ECF6FF 10px, #C4CCE4 10px);
}

.success .numbers {
    border-color: #C4CCE4;
    background-color: #C4CCE4;
}

.success .number-single:before,
.success .number-single:after {
    background-image: radial-gradient(circle at center,  #ECF6FF 10px, #C4CCE4 10px);
}

.success .number-single-input {

}