.modern-checkbox {
    --background: #fff;
    --border: #D1D6EE;
    --border-hover: #BBC1E1;
    --border-active: #4e6fc1;
    --tick: #fff;
    position: relative;
    margin-bottom: -5px;
}

.modern-checkbox input,
.modern-checkbox svg {
    width: 25px;
    height: 25px;
    display: block;
}

.modern-checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    outline: none;
    background: var(--background);
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
    -webkit-transition: -webkit-box-shadow .3s;
    transition: -webkit-box-shadow .3s;
    transition: box-shadow .3s;
    transition: box-shadow .3s, -webkit-box-shadow .3s;
    -webkit-box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));
    box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));
}

.modern-checkbox input:hover {
    --s: 2px;
    --b: var(--border-hover);
}

.modern-checkbox input:checked {
    --b: var(--border-active);
}

.modern-checkbox svg {
    pointer-events: none;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--stroke, var(--border-active));
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    -webkit-transform: scale(var(--scale, 1)) translateZ(0);
    transform: scale(var(--scale, 1)) translateZ(0);
}

.modern-checkbox.path input:checked {
    --s: 2px;
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}

.modern-checkbox.path input:checked + svg {
    --a: 16.1 86.12;
    --o: 102.22;
}

.modern-checkbox.path svg {
    stroke-dasharray: var(--a, 86.12);
    stroke-dashoffset: var(--o, 86.12);
    -webkit-transition: stroke-dasharray .6s, stroke-dashoffset .6s;
    transition: stroke-dasharray .6s, stroke-dashoffset .6s;
}

.modern-checkbox.bounce {
    --stroke: var(--tick);
}

.modern-checkbox.bounce input:checked {
    --s: 11px;
}

.modern-checkbox.bounce input:checked + svg {
    -webkit-animation: bounce .4s linear forwards .2s;
    animation: bounce .4s linear forwards .2s;
}

.modern-checkbox.bounce svg {
    --scale: 0;
}

@-webkit-keyframes bounce {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bounce {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


.aggrementBox{
    width: 400px;
    margin: 25px auto 10px auto;
}

.aggrementBox .agree_label{
    position: absolute;
    top: 0;
    width: 200px;
    left: 30px;
}

#notAgree{
    position: relative;
    top: -25px;
    left: 255px;
}