hubl/src/styles/base/form.scss

form {
  display: flex;
  flex-direction: column;
  margin-left: -3.4rem;
  transition: all .3s ease;
}

.button-register>form>input[type=submit] {
  @extend .button,
  .text-bold,
  .text-uppercase,
  .reversed,
  .button-secondary,
  .bordered;
  margin-left: auto;
  margin-top: 3.2rem;
}

.fieldset {
  border-bottom: 1px solid var(--color-fieldset-border);
  color: var(--color-title);
  display: flex;
  flex: 1 0 100%;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 2.6rem 0 1.8rem;
  padding-bottom: 0.8rem;
}

.form-label {
  /*flex: 1 1 auto;*/
  font-weight: 600;

  &.is-light label {
    color: var(--color-label-light);
    margin-top: 1.8rem;
    text-transform: uppercase;

    &>*:nth-child(1) {
      margin-bottom: 0.8rem;
    }
  }
}

.is-full-width {
  box-sizing: border-box;
  flex: 1 1 100%;
  padding-left: 3.4rem;
}

.is-half-width {
  box-sizing: border-box;
  flex: 0 0 50%;
  padding-left: 3.4rem;
}

input:not([type='file']):not([type='search']):not([type='submit']),
textarea {
  -webkit-tap-highlight-color: var(--color-grey-7);
  background-color: var(--color-input-background);
  box-sizing: border-box;
  border: 2px solid var(--color-input-background);
  color: var(--color-input-text);
  /*flex: 1 1 0;  Problem on Firefox for input type date*/
  line-height: 1;
  min-width: 0;
  padding: 1rem;

  &:focus,
  &:active {
    border-bottom: 2px solid var(--color-input-active);
  }
}

textarea {
  height: 100px;
}

.content-box {

  &.with-form {

    sib-set-default:not([name='user-thumb']) {
			clear: both;
	    display: flex!important;
			flex-wrap: wrap;
			max-width: 100%;
			
			sib-form-label-text {
				float: left;
				width: 50%;
			}
		}

    /* To align label and input vertically */
    label {
      display: flex;
      flex-direction: column;
    }

    /*sib-form[set-user-id-select] {

      input[type="submit"] {
        margin-left: 0;
        margin-top: 0;
      }

      select {
        display: none;
      }
    }*/


    /* WIDGETS SIB  (let in .content-box to override default styles) */

    sib-form-auto-completion {

      .ss-main {
        font-weight: normal;
        text-transform: none;
      }

      .ss-single-selected {
        align-items: center;
        background-color: var(--color-input-background);
        border: none;
        border-radius: 0px;
        color: var(--color-input-text);
        display: flex;
        font-weight: normal;
        justify-content: flex-end;
        min-height: 4.6rem;
        padding-left: 1.2rem;
        text-transform: none;

        .ss-disabled {
          color: var(--color-grey-5);
        }

        .ss-arrow {
          font-size: 1.8rem;
          margin: 0 18px 0 0;

          span {
            border: solid var(--color-input-icon);
            border-width: 0 2px 2px 0;
          }
        }
      }

      .ss-list {
        color: var(--color-select-list);
        font-weight: normal;
        text-transform: none;
      }
    }

    hubl-status {
      align-self: auto;
    }

    sib-form-date {
      input[type="date"] {
        background-image: url("/images/calendar.svg");
        background-position: right 12px top 50%;
        background-repeat: no-repeat;
        background-size: 1.4rem;
        color: var(--color-input-icon);
        cursor: default;
        font-size: 1.4rem;
        margin-top: 1.6rem;
        max-width: 50vw;
        padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */
        padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */
        position: relative;

        &::-webkit-calendar-picker-indicator {
          cursor: pointer;
          opacity: 0;
          position: absolute;
          right: 8px;
        }

        &::-webkit-clear-button {
          cursor: pointer;
          margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
          margin-right: 5px;
        }

        &::-webkit-inner-spin-button {
          display: none;
        }
      }
    }

    sib-form-file {

      label {
        align-items: baseline;
        clear: both;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 100%;

        div {
          width: 100%;
        }

        input[type='text'] {
          box-sizing: border-box;
          flex: 0 0 50%;
        }

        input[type='file'] {
          box-sizing: border-box;
          flex: 0 0 20%;
          color: var(--color-input-text);
          cursor: pointer;
          padding-left: 3rem;
        }
      }
    }

    /*sib-multiple-select {

      &.select-skills .ss-values .ss-disabled::before {
        content: "Select skills";
      }

      sib-form-auto-completion > label {
        display: flex;
        flex-direction: column;

        .ss-main {
          font-weight: normal;
          margin-bottom: 7.8rem;
          margin-top: 1.6rem;
          max-width: 50vw;
          text-transform: none;

          .ss-multi-selected {
            align-items: center;
            background-color: var(--color-input-background);
            border: none;
            border-radius: 0px;
            display: flex;
            justify-content: flex-end;
            min-height: 4.2rem;
            padding-left: 1.2rem;

            .ss-add {
              font-size: 1.8rem;
              margin: 0 18px 0 0;

              span.ss-plus {
                background: var(--color-input-icon);

                &::after {
                  background: var(--color-input-icon);
                }
              }
            }

            .ss-values {
              background: transparent;
              position: absolute;
              top: 6rem;
              width: 100%;

              .ss-disabled {
                color: transparent;
                font-size: 1.4rem;
                left: calc(1.2rem - 5px);
                position: absolute;
                top: calc(-6rem + 7px);

                &::before {
                  color: var(--color-grey-5);
                  font-weight: normal;
                }
              }

              .ss-value {
                @extend .skill;
                display: flex;

                .ss-value-delete {
                  font-weight: normal;
                }
              }
            }
          }

          .ss-list {
            color: var(--color-input-text);
          }
        }
      }
    }*/

    /* CUSTOM WIDGETS */

    hubl-member-form {
      width: 100%;

      form {
        display: flex;
        flex-direction: column;

        [name='member-form__input'] {
          margin-bottom: 1rem;
        }

        sib-form-auto-completion {
          float: left;
        }

        input[type='submit'] {
          background-color: var(--color-select-add-button-background);
          border: 1px solid var(--color-select-add-button);
          color: var(--color-select-add-button);
        }
      }
    }
  }
}