.brxe-afk {
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 1.5rem;
  .brxe-form {
    display: flex;
    gap: 60px;
    height: 100%;

    .submit-button-wrapper,
    .apklausa-button-next {
      align-self: end;
      &:not(.active) {
        display: none;
      }
    }

    .submit-button-wrapper {
      padding: 0 !important;
    }

    .form-group {
      display: none;
      gap: 60px;

      .label,
      label {
        font-size: 32px;
        line-height: 40px;
        text-transform: none !important;
        margin: 0;
      }

      &.active {
        display: flex;
      }
    }

    .options-wrapper {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .options-wrapper li {
      display: flex;
      align-items: center;
    }

    .options-wrapper input[type="radio"],
    .options-wrapper input[type="checkbox"] {
      display: none;
    }

    .options-wrapper input[type="radio"] + label,
    .options-wrapper input[type="checkbox"] + label {
      position: relative;
      padding-left: 48px;
      cursor: pointer;
      font-size: 22px;
      line-height: 28px;
    }

    .options-wrapper input[type="radio"] + label:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 25px;
      height: 25px;
      border: 2px solid #00535c;
      border-radius: 50%;
      background: white;
    }

    .options-wrapper input[type="radio"]:checked + label:before {
      background: #00535c;
      border-color: #00535c;
    }

    .options-wrapper input[type="checkbox"] + label:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 25px;
      height: 25px;
      border: 2px solid #00535c;
      border-radius: 6px;
      background: white;
    }

    .options-wrapper input[type="checkbox"]:checked + label:before {
      background: #00535c;
      border-color: #00535c;
    }

    .options-wrapper input[type="checkbox"]:checked + label:after {
      content: "✔";
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: white;
    }

    .message.success {
      background-color: #ffffff;
      font-size: 20px;
      font-weight: bold;
    }

    textarea {
      width: 100%;
      min-height: 120px;
      padding: 16px;
      line-height: 28px;
      border: 1px solid #00535c;
      border-radius: 22px;
      resize: vertical;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    textarea::placeholder,
    text:placeholder {
      color: #7a7a7a;
      font-style: italic;
    }

    textarea:focus,
    text:focus {
      border-color: #003f47;
      box-shadow: 0 0 0 3px rgba(0, 83, 92, 0.2);
    }

    input[type="text"] {
      height: 48px;
      min-height: 48px;
      padding: 12px 0 !important;
      border: none;
      border-bottom: 1px solid;
      border-color: var(--bricks-color-askxdb);
      overflow: hidden;
      &:focus,
      &:active {
        outline: 0;
      }
    }
  }
}

.brxe-afk.brx-draggable {
  width: 100%;
  .brxe-form {
    width: 100%;
    min-height: 200px;
  }
}