.field {
  display: flex;
  flex-flow: column-reverse;
  margin-bottom: 1em;

  .tippy-box{
    word-break: break-all;
  }

  /**
* Add a transition to the label and input.
* I'm not even sure that touch-action: manipulation works on
* inputs, but hey, it's new and cool and could remove the
* pesky delay.
*/
  label, input {
    transition: all 0.2s;
    touch-action: manipulation;
  }

  input {
    font-size: 16px;
    border: 0;
    border-bottom: 1px solid #5b6f82;
    font-family: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 6px 10px 6px 8px;
    cursor: text;
  }

  input:focus {
    outline: 0;
    border-bottom: 1px solid #666;
  }

    .input-group {
      input:not(:focus) + label{
        position: absolute;
        transform: translate(0, 0rem) !important;
      }
      input:not(:focus) + label, input:placeholder-shown + label{
        position: absolute;
        transform: translate(0, -2.5rem) !important;
      }
      input:focus + label, input:placeholder-shown + label{
        position: absolute;
        transform: translate(0, -2.5rem) !important;
      }
    }

  /**
  * Translate down and scale the label up to cover the placeholder,
  * when following an input (with placeholder-shown support).
  * Also make sure the label is only on one row, at max 2/3rds of the
  * field—to make sure it scales properly and doesn't wrap.
  */
  input:placeholder-shown + label {
    cursor: text;
    max-width: fit-content;
    //white-space: nowrap;
    //overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    transform: translate(0, 2.5rem);
    font-weight: 700;
    font-size: 18px;
    padding: 6px 10px 6px 8px;
  }
  /**
  * By default, the placeholder should be transparent. Also, it should
  * inherit the transition.
  */
  ::-webkit-input-placeholder {
    opacity: 0;
    transition: inherit;
  }
  /**
  * Show the placeholder when the input is focused.
  */
  input:focus::-webkit-input-placeholder {
    opacity: 1;
  }
  /**
  * When the element is focused, remove the label transform.
  * Also, do this when the placeholder is _not_ shown, i.e. when
  * there's something in the input at all.
  */
  input:not(:placeholder-shown) + label,
  input:focus + label {
    transform: translate(0, 0);
    cursor: pointer;
    font-size: 16px;
    padding: 6px 10px 6px 8px;
  }
}

.required{
  .field {
    label:after {
      content: " *";
      color: #EB0000;
    }
  }
}
.form-control.ui.fluid.selection.dropdown{
  background: transparent;
}

.formio-error-wrapper {
  color: #721c24;
  background-color: #fceff1;
  border-color: #fceff1;
}

select, .choices.form-group.formio-choices {
  border-top-width: initial;
  border-right-width: initial;
  border-left-width: initial;
  border-top-color: initial;
  border-right-color: initial;
  border-left-color: initial;
  //height: 2.5rem;
  width: 100%;
  box-shadow: none;
  font-weight: 700;
  color: rgb(26, 26, 26);
  background-color: rgb(255, 255, 255);
  appearance: auto !important;
  border-style: none none solid;
  border-image: initial;
  border-bottom: 1px solid rgb(91, 111, 130) !important;
  border-radius: 0px;
  //padding: 0.375rem 0.5rem;
  outline: 0px;
  transition: 0.2s ease-out;
}

.select-wrapper-custom{
  position: relative;
  padding-bottom: 1rem;
}