.user-profile {
  background: var(--gray-10);
}

.user-form-wrapper {
  background: var(--background);
  padding: 24px;
}

.user-form-wrapper,
.user-form-wrapper--editor {
  margin-bottom: 2rem;
}

.user-profile .acf-fields .acf-field {
  padding: 0;
}

.user-profile .acf-fields > .acf-field {
  border: none;
}

/**
INPUT AND SELECT ELEMENTS
*/
.user-profile form .acf-field input,
.user-profile form .acf-field select,
.user-profile form .acf-field-image .hide-if-value {
  width: 100%;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--gray-10);
  padding: 7px 8px 13px;
  margin: 0;
  margin-bottom: 16px;
  font-size: 17px;
  box-shadow: 0 0 0 transparent;
}

.user-profile form .acf-field-image .hide-if-value {
  width: unset;
}

.user-profile form .acf-field select {
  appearance: none;
  font-family: "WorkSans", Helvetica, Arial, sans-serif !important;
  color: var(--foreground);
  background: var(--gray-10)
    url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7 2-1z' fill='%230f0f0f'/%3E%3C/svg%3E")
    no-repeat right 5px top 55%;
}

.user-profile form .acf-input-wrap {
  position: relative;
}

/* underline in input elements */
.user-profile .acf-input-wrap::after {
  content: "";
  height: 1px;
  position: absolute;
  border-radius: 0;
  background: #000;
  margin: 0;
  bottom: 24px;
  left: 8px;
  right: 8px;
}

.user-profile .acf-image-uploader .hide-if-value::after {
  content: "";
  height: 1px;
  position: absolute;
  border-radius: 0;
  background: #000;
  margin: 0;
  bottom: 9px;
  left: 8px;
  right: 8px;
}

.user-profile .acf-field-select .acf-input::after {
  content: "";
  height: 1px;
  position: absolute;
  border-radius: 0;
  background: #000;
  margin: 0;
  bottom: 24px;
  left: 8px;
  right: 8px;
}

/* custom upload file button */
.user-profile form .acf-input a.acf-button.button {
  /* all: unset; */
  font-family: "WorkSans", Helvetica, Arial, sans-serif !important;
  border-radius: 22px;
  padding: 0px 20px 0px 28px;
  position: relative;
  background: #000000;
  color: var(--background);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  cursor: pointer;
  margin-right: 15px;
  margin-bottom: 0;
  display: inline-block;
}

.user-profile form input[type="file"]::-webkit-file-upload-button,
.user-profile form input[type="file"]::-ms-browse {
  all: unset;
  font-family: "WorkSans", Helvetica, Arial, sans-serif !important;
  border-radius: 22px;
  padding: 0px 20px 0px 28px;
  position: relative;
  background: #000000;
  color: var(--background);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  cursor: pointer;
  margin-right: 15px;
}

.user-profile form input[type="file"]::file-selector-button {
  all: unset;
  font-family: "WorkSans", Helvetica, Arial, sans-serif !important;
  border-radius: 22px;
  padding: 0px 20px 0px 28px;
  position: relative;
  background: #000000;
  color: var(--background);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  cursor: pointer;
  margin-right: 15px;
}

/* .user-profile form input[type="file"]::-ms-browse {
  all: unset;
  border-radius: 22px;
  padding: 0px 20px 0px 28px;
  position: relative;
  background: #000000;
  color: var(--background);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  cursor: pointer;
  margin-right: 15px;
} */

/* labels */
.user-profile .acf-field .acf-label {
  margin-bottom: 3px;
}

.user-profile .acf-field .acf-label label {
  font-size: 14px;
  line-height: 1.5;
  display: inline-block;
  font-weight: 600;
  width: 100%;
  cursor: auto;
}

/* first name and last name on same row */
.user-profile .acf-field[data-name="firstname"] {
  margin-right: 16px;
}

.user-profile .acf-field[data-name="firstname"],
.user-profile .acf-field[data-name="lastname"] {
  display: inline-block;
  width: calc(50% - 10px);
  margin-top: 0;
}

/**
BUTTONS
*/
.user-profile input[type="submit"] {
  min-height: 48px;
  padding: 10px 20px;
  float: right;
  background: var(--gradient-1-background);
  background: var(--gradient-1-background-moz);
  background: var(--gradient-1-background-webkit);
  background: var(--gradient-1-background-gradient);
  color: var(--foreground);
  text-decoration: none;
  text-shadow: none;
  display: block;
  font-size: 17px;
  line-height: 28px;
  margin: 0;
  margin-top: 22px;
  cursor: pointer;
  border-width: 0;
  border-radius: 0;
  white-space: nowrap;
  box-sizing: border-box;
  border-bottom: 1px solid transparent;
}

.user-profile input[type="submit"]:not(.disabled):hover,
.user-profile input[type="submit"]:not(.disabled):focus {
  background: var(--primary-complementary-light);
  border-bottom: 1px solid var(--foreground);
}

.user-profile input[type="submit"]:not(.disabled):active {
  background: var(--foreground);
  color: var(--background);
  border-bottom: 1px solid transparent;
}

/* S */
@media (max-width: 479px) {
  /* 4 columns */
  .user-profile {
    padding-bottom: 40px;
  }

  .user-profile .user-form-wrapper {
    grid-column: 1 / 5;
  }

  /* .user-profile .body-wrapper {
    grid-column: 1 / 5;
  } */
}

/* M */
@media (min-width: 480px) and (max-width: 600px) {
  /* 8 columns */
  .user-profile {
    padding-bottom: 40px;
  }

  .user-profile .user-form-wrapper {
    grid-column: 1 / 9;
  }

  /* .user-profile .body-wrapper {
    grid-column: 1 / 9;
  } */
}

@media (min-width: 600px) and (max-width: 960px) {
  /* 8 columns */
  .user-profile {
    padding-bottom: 60px;
  }

  .user-profile .user-form-wrapper {
    grid-column: 1 / 9;
  }

  /* .user-profile .body-wrapper {
    grid-column: 5 / 9;
  } */
}

/* L - XL */
@media (min-width: 960px) {
  /* 12 columns */
  .user-profile {
    padding-bottom: 60px;
  }

  .user-profile .user-form-wrapper {
    grid-column: 1 / 9;
  }

  /* .user-profile .body-wrapper {
    grid-column: 7 / 13;
  } */
}