.form {
    display: inline-block;
    padding: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .form__field { margin-bottom: 10px; }

  .form__error {
    color: red;
    text-align: left;
    font-size: 12px;
    display: block;
    margin-top: 3px;
    display: none;
  }

  .form input {
    outline: none;
    display: block;
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
  }

  .form textarea {
        border: 1px solid #ccc;
        border-radius: 3px;
        color: #555;
        display: block;
        padding: 5px;
        width: 100%;
  }

  input:valid:not(:placeholder-shown) { border-color: green; }
  input:invalid:not(:placeholder-shown) { border-color: red; }
  input:invalid:not(:placeholder-shown) + .form__error { display: block; }


  label,.custom-checkbox{
      display: inline-block;
      vertical-align: middle;
  }
  .chexbox_text { font-size: 11px; }
  /* для элемента input c type="checkbox" */
      .custom-checkbox {
        /* position: absolute; */
        z-index: -1;
        opacity: 0;
      }

      /* для элемента label, связанного с .custom-checkbox */
      .custom-checkbox+label {
        display: inline-flex !important;
        align-items: center;
        user-select: none;
      }

      /* создание в label псевдоэлемента before со следующими стилями */
      .custom-checkbox+label::before {
        content: '';
        display: inline-block;
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        flex-grow: 0;
        border: 1px solid #adb5bd;
        border-radius: 0.25em;
        margin-right: 0.5em;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 50% 50%;
      }

      /* стили при наведении курсора на checkbox */
      .custom-checkbox:not(:disabled):not(:checked)+label:hover::before {
        border-color: #b3d7ff;
      }

      /* стили для активного чекбокса (при нажатии на него) */
      .custom-checkbox:not(:disabled):active+label::before {
        background-color: #b3d7ff;
        border-color: #b3d7ff;
      }

      /* стили для чекбокса, находящегося в фокусе */
      .custom-checkbox:focus+label::before {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
      }

      /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
      .custom-checkbox:focus:not(:checked)+label::before {
        border-color: #80bdff;
      }

      /* стили для чекбокса, находящегося в состоянии checked */
      .custom-checkbox:checked+label::before {
        border-color: #0b76ef;
        background-color: #0b76ef;
        background-image: url("/dizzz/checkmark.png"); background-size: 10px 10px;
        background-repeat:no-repeat;
        background-position: center center;
      }

      /* стили для чекбокса, находящегося в состоянии disabled */
      .custom-checkbox:disabled+label::before {
        background-color: #e9ecef;
      }


      .checkbox {
        margin-bottom: 1em; width: 370px;
      }