.card {
  display flex;
  flex-direction row;
  flex-wrap wrap;
  background-color bg-secondary;
  padding: 30px 10px;
  margin 0 auto;
  margin-top 28px;
  max-width 983px;

  .card-detail {
    width 45%;
  }
  .card-input {
    width 55%;
  }
  .card-checkbox {
    text-align left;
    margin-left 10%;
    width 45%;
  }
  @media (max-width: 800px) {
    .card-detail, .card-input, .card-checkbox {
      width 100%;
      margin 0;
    }
  }
}

.card-header {
  background-color bg-primary;
  margin-top 28px !important;
}

.disabled {
  margin 0 auto;
  .card-detail h3 {
    display none;
  }
  .card-input, .card-checkbox {
    margin-left 0;
    width 55%;
    text-align left;
    h3, .h3 {
      text-align left;
    }
    @media (max-width: 800px) {
      text-align center;
      width 100%;
      h3, .h3 {
        text-align center;
      }
    }
  }
  .input, textarea {
    &:focus, &:hover {
      border none;
    }
  }
}