.form-agreement {
    margin-bottom: 30px;
}

.form-agreement input[type="checkbox"] {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

.form-agreement .checkbox-label {
    display: inline-flex;
    margin: 0;
    font-size: .9em;
    font-weight: normal;
    padding-left: 2.5rem;
    position: relative;
    cursor: pointer;
    line-height: 1.2;
    text-transform: none;
}

.form-agreement .checkbox-label::before{
    content: '';
    position: absolute;
    width: 2em;
    height: 2em;
    border-radius: .2rem;
    background: #fff;
    border: 1px solid #efefef;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.form-agreement .checkbox-label::after{
    content: '';
    position: absolute;
    width: 1.5em;
    height: 0.8em;
    border: 3px solid #838383;
    border-top: 0;
    border-right: 0;
    top: 45%;
    transform-origin: 50% 50%;
    transform: translateY(-50%) rotate(-45deg);
    left: .3em;
    opacity: 0;
    transition: opacity .5s ease;
}

.form-agreement input[type="checkbox"]:checked + label.checkbox-label::after {
    opacity: 1;
}

.form-agreement__link {
    color: currentColor;
    text-decoration: underline;
    transition: color .5s ease;
    margin-left: 0;
}

.form-agreement__link:hover {
    color: #000;
    text-decoration: underline;
}