:root {
  --font-family: "TTNormsPro", sans-serif;
  --font-family-bold: "Druk Text Wide Cyr", sans-serif;
  --clr-dark: #1d252d;
  --clr-light: #fff;
  --clr-primary: #5f45ba;
  --clr-primary-100: #493492;
  --clr-secondary: #f6e200;
  --clr-secondary-100: #f7b738;
  --clr-danger: #ff1a1a;

  --clr-neutral-50: #f3f3f4;
  --clr-neutral-60: #f5f5f5;
  --clr-neutral-75: #e5e5e5;
  --clr-neutral-90: #f9f9f9;
  --clr-neutral-100: #d6d6d6;
  --clr-neutral-600: #a1a5a7;
  --clr-neutral-1000: #606567;
  --clr-neutral-2000: #2a3a46;

  --theme-clr-text: var(--clr-dark);
  --theme-clr-danger: var(--clr-danger);
  --theme-bg: var(--clr-light);
  --theme-text: 16px;
  --theme-leading: 140%;

  --primary: var(--clr-dark);
  --primary-s: var(--clr-neutral-2000);
  --primary-g: rgba(14, 30, 51, 0.5);
  --secondary: var(--clr-secondary);
  --secondary-p: var(--clr-primary);
  --secondary-s: var(--clr-secondary-100);
  --secondary-text: var(--clr-neutral-2000);
  --bg: var(--theme-bg);
  --border: rgba(14, 30, 51, 0.22);
  --surface: #ffffff;
  --red: var(--clr-danger);
}
:root {
  --size: 1.6rem;
  --size-s: 1.4rem;

  --left: .8rem;
  --bottom: .6rem;

  --border-color: var(--border);
  --hover-border-color: var(--primary);
}
.b-check {
  display: block;
  position: relative;

/*  &--radio {
    display: inline-block;

    .b-check {

      &__label {
        align-items: center;

        &:hover .b-check__input:not(:checked) + .b-check__box,
        &:focus .b-check__input:not(:checked) + .b-check__box {
          border-color: var(--active-bgc-color);
          background-color: #fff;
          cursor: pointer;

          & + .b-check__text {
            cursor: pointer;
          }
        }
      }

      &__input {

        &:checked:not(.disabled) + .b-check__box {
          background-color: #fff;
          border-width: 1px;

          &:after {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
          }
        }
      }

      &__box {
        min-width: 24px;
        max-width: 24px;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        border: 1px solid var(--border-color);
        background-color: #fff;
        transition: border-color .3s;

        &:after {
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background-color: var(--active-bgc-color);
          transform: translateX(-50%) translateY(-50%) scale(0);
          transition: transform .3s;
        }
      }
    }
  }*/
}
.b-check__input {
    display: none;
  }
.b-check__input:checked:not(.disabled):not(:disabled) + .b-check__box {
      border-color: var(--hover-border-color);
    }
.b-check__input:checked:not(.disabled):not(:disabled) + .b-check__box:after {
        content: "";
        position: absolute;
        top: .7rem;
        left: .2rem;
        border-right: .1rem solid transparent;
        border-bottom: .1rem solid transparent;
        transform: rotate(
            45deg
        );
        transform-origin: 0% 100%;
        animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;
      }
.b-check__input.disabled + .b-check__box, .b-check__input:disabled + .b-check__box {
        cursor: default;
      }
.b-check__input.disabled + .b-check__box, .b-check__input.disabled + .b-check__box + .b-check__text, .b-check__input:disabled + .b-check__box, .b-check__input:disabled + .b-check__box + .b-check__text {
        cursor: default;
        opacity: 0.5;
      }
.b-check__num {
    display: none;
  }
.b-check__label {
    display: flex !important;
    align-items: flex-start;
    cursor: pointer;
  }
.b-check__label:hover .b-check__box, .b-check__label:focus .b-check__box {
      border-color: var(--hover-border-color);
    }
.b-check__label.disabled {
      cursor: default;
      opacity: .4;
      pointer-events: none;
    }
.b-check__box {
    display: block;
    min-width: var(--size);
    max-width: var(--size);
    height: var(--size);
    margin-right: 1rem;
    position: relative;
    border: .1rem solid var(--border-color);
    transition: border-color .3s ease;
    cursor: pointer;
  }
.b-check__text {
    line-height: calc(var(--size) + .2rem);
    font-size: 1.2rem;
    word-break: break-word;
  }
@keyframes checkbox-check{
  0%{
    width: 0;
    height: 0;
    border-color: var(--primary);
    transform: translate3d(0,0,0) rotate(45deg);
  }
  33%{
    width: .2em;
    height: 0;
    transform: translate3d(0,0,0) rotate(45deg);
  }
  100%{
    width: .2em;
    height: .5em;
    border-color: var(--primary);
    transform: translate3d(0,-.5em,0) rotate(45deg);
  }
}