.neu-checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    width: fit-content;
}

.neu-checkbox-box {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    margin-right: 15px;
    background-color: transparent;
    background-image: linear-gradient(135deg, #E5E6EC -50%, #F2F3F6 120%);
    position: relative;
    box-shadow: 1px 1px 8px rgba(88, 108, 138, 0.5) inset;
    flex-grow: 2;
}

.neu-checkbox span {
    flex-grow: 1;
}

.neu-checkbox-box:hover {
    background-image: linear-gradient(135deg, hsl(231, 16%, 89%) -50%, hsl(225, 18%, 94%) 120%);
}

.neu-checkbox-box:active {
    background-image: linear-gradient(135deg, hsl(231, 16%, 87%) -50%, hsl(225, 18%, 92%) 120%);
}

.neu-checkbox-box::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 5px;
    z-index: 2;
    box-shadow: -3px -3px 8px #FFF inset;
}

.neu-checkbox.active .neu-checkbox-box {
    box-shadow: -3px -3px 8px #FFF;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(135deg, #8B278F -50%, #BD34C2 120%);
}

.neu-checkbox.active .neu-checkbox-box::before {
    box-shadow: 3px 3px 20px rgba(36, 65, 93, 0.3);
}

.neu-checkbox .neu-checkbox-box-check {
    visibility: hidden;
    width: 14px;
    height: 14px;
    fill: #F8F8FC;
}

.neu-checkbox.active .neu-checkbox-box-check {
    visibility: visible;
}

.neu-checkbox.active .neu-checkbox-box::after {
    position: absolute;
    width: 40%;
    height: 40%;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    background-image: linear-gradient(135deg, #8B278F -50%, #BD34C2 120%);
    z-index: 2;
    top: 50%;
    left: 50%;
}