:root {
  --vid-close-button-size: 38px;
  --vid-color-green-1: #07b859;
  --vid-color-green-2: #e6f4e3;
  --vid-color-grey: #828282;
  --vid-color-grey-2: #dfe0e1;
  --vid-fields-height: clamp(40px, 3vw, 46px);
  --vid-title-size: clamp(16px, 2vw, 20px);
  --vid-desc-size: clamp(12px, 1.5vw, 16px);
  --vid-modal-padding: clamp(20px, 1vw, 32px);
  --vid-modal-width: clamp(300px, 35vw, 400px);
}

.vid-modal {
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: var(--vid-modal-width);
  border-radius: 12px;
  background-color: #fff;
  z-index: 99999;

  .vid-modal-inner-wrapper {
    padding: var(--vid-modal-padding);
    position: relative;
  }

  .vid-modal-close-button {
    width: var(--vid-close-button-size);
    height: var(--vid-close-button-size);
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: -19px;
    top: -19px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;

    &:before {
      display: block;
      content: "";
      width: var(--vid-close-button-size);
      height: var(--vid-close-button-size);
      background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L13 13M13 1L1 13' stroke='%23828282' stroke-width='2'/%3E%3C/svg%3E%0A");
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  .vid-modal-title {
    font-weight: 400;
    font-size: var(--vid-desc-size);
    text-align: center;
  }

  .qform-field__block_box__field-box,
  .qform-field__block_box__field,
  .qform-field__submit__input,
  .message_from_server {
    border-radius: 12px !important;
  }

  .qform-field__submit_agree-box {
    margin: 10px 0;

    label::before {
      border-radius: 4px !important;
    }
  }
}

.close-modal {
  display: none;
}

.vid-modal-backdrop {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1010;
  background: rgba(72, 72, 72, 0.44);
  left: 0;
  top: 0;
}

.qform-field__textblock_label:has(+ .vid-modal-title) {
  font-weight: 600;
  font-size: var(--vid-title-size);
  text-align: center;
  margin-bottom: clamp(16px, 2.5vw, 24px);
}

.submit-box,
.submit-button {
  width: 100%;
}

.submit-button {
  font-weight: 400 !important;
}

.qform-row:last-child .qform-field {
  margin-bottom: 0 !important;
}

.no-scroll {
  overflow: hidden;
}

.is_qform .qform__error-send-msg .message_from_server {
  color: var(--vid-color-green-1);
  border-radius: 12px;
}

form {
  &.qform {
    padding: 0;

    /*&:not(:first-child) {
      display: none !important;
    }*/

    &.qform-size-sm {
      .qform-row {
        .qform-field {
          margin-bottom: 8px;
        }

        .qform-field__block_box__field-box,
        .qform-field__submit__input {
          height: var(--vid-fields-height) !important;
        }

        .qform-field.textarea .qform-field__block_box__field-box_input {
          min-height: 46px;
        }

        .qform-field.textarea .qform-field__block_box__field-box {
          height: auto !important;
        }
      }
    }

    &.qform-background .qform-row .qform-field__block_box__field {
      background: #f4f4f4;
    }
  }
}

@media (max-width: 576px) {
  .vid-modal-close-button {
    transform: scale(0.8);
    transform-origin: center;
  }
}