<commit_before>/**
* Forms
*/
form {
  position: relative;
}

.control-group {
  display: flex;
  flex-direction: column;

  p {
    margin-bottom: 0;
    font-size: $smallFontSize;
    line-height: $smallFontSizeLineHeight;
  }

  .controls {
    margin-bottom: 20px;
    position: relative;
    p {
      margin: $labelMargin 0 0 0;
      font-size: $smallFontSize;
      color: $grayColor;
      a {
        @include link-color();
      }
    }
  }

  &.tight, &:last-of-type {
    .controls {
      margin-bottom: 0;
    }
  }
}

legend {
  font-weight: bold;
  margin-bottom: 2rem;
}

label:not(.checkbox) {
  font-size: $smallFontSize;
  color: $labelColor;
  margin-bottom: $labelMargin;
  display: block;
}

fieldset {
  border: none;
  padding: 0 0 30px 0;
  border-bottom: 1px solid $globalBorderColor;
  margin-bottom: 22px;
  margin-left:0;
  &:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

form.loading {
  button[type="submit"], input[type="submit"] {
    @include loadingContainer();
  }
}

// Basic form and input types
.input, .input-xlarge, select, textarea, input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
  background-color: $inputBackground;
  border: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // disable default browser style
  -webkit-appearance: none;
  appearance: none;
  -o-appearance: none;
  -moz-appearance: none;

  border-radius: $globalRadius;
  color: $baseColor;
  display: block;
  padding: $inputPadding;
  width: 100%;
  max-width: 100%;
  will-change: background-color;
  text-overflow: ellipsis;
  height: $inputHeight;
  &:focus {
    background-color: $inputFocusColor;
    outline: none;
    transition: background .5s ease;
  }

  &.uneditable-input {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    height: auto;
    min-height: $inputHeight;
  }

  &.uneditable-input,
  &.disabled {
    background: $inputDisabledBg;
    color: $inputDisabledColor;
    cursor: not-allowed;

    &:not(.copyable) {
      @include interface();
    }

  }

  &.copyable {
    cursor: copy;
  }

  /**
  * Placeholder
  */
  &::-webkit-input-placeholder {
    /* WebKit browsers */
    color: $placeholderColor;
    font-style: normal;
    font-weight: normal;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $placeholderColor;
    font-style: normal;
    opacity: 1;
    font-weight: normal;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $placeholderColor;
    font-style: normal;
    opacity: 1;
    font-weight: normal;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: $placeholderColor;
    font-style: normal;
    font-weight: normal;
  }

  // validation
  &.invalid {
    background: lighten($alertColor, 35%);
    // Firefox will render a boxshadow
    box-shadow: none;
    border: none;

    &.loading {
      @include loadingContainer($alertColor);

    }
  }

  // remove default states
  &:invalid {
    box-shadow: none;
    border: none;
  }

  &.loading {
    position: relative;
    @include loadingContainer(#ccc);
  }
}

.form-error {
  color: $alertColor;
  font-size: $smallFontSize;
}

/* Styled Checkbox and Radio Button: */

.multi-select-field {
  margin-bottom: 10px;
  margin-top: 2px;
  .checkbox {
    display: block;
    margin-bottom: 10px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

.checkbox {
  padding: 1px 0 0 25px;
  position: relative;
  @include interface();
  cursor: pointer;
  input {
    z-index: -1;
    position: absolute;
    left: 8px;
    top: 3px;
    width: 2px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none !important;
    box-shadow: none !important;

  }
  .checkbox-container {
    line-height: $baseLineHeight;
    display: inline-block;
    > span {
      color: $checkRadioColor;
    }
  }
  .checkbox-container::before {
    content: ' ';
    width: $checkboxAndOptionHeight;
    height: $checkboxAndOptionHeight;
    position: absolute;
    left: 0;
    border-radius: $globalRadius;
    font-size: 12px;
    line-height: $checkboxAndOptionHeight;
    top: 1px;
    background: $inputBackground;
    text-align: center;
    color: $checkRadioColor !important;

    @include icon();
  }

  &:active {
    .checkbox-container::before {
      background: darken($inputBackground, 5%);
    }
  }

  input[type="checkbox"], input[type="radio"] {
    &.invalid + .checkbox-container::before {
      background: lighten($alertColor, 30%);
    }
  }

  input[type="checkbox"], input[type="radio"] {
    &:focus {
      + .checkbox-container::before {
        background: darken($inputBackground, 5%);
      }
    }
  }
  input[type="checkbox"]:checked + .checkbox-container::before {
    @extend .icon-ok:before;

  }
  input[type="radio"]:checked + .checkbox-container::before {
    @extend .icon-circle:before;
    font-size: 10px;
  }

  input[disabled] + .checkbox-container {
    cursor: not-allowed;
  }

  input[disabled] + .checkbox-container::before {
    background: $inputDisabledBg;
    color: $inputDisabledColor !important;
    cursor: not-allowed;
  }
}

// Styled select:
/* Arrows for Select's*/

select {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

textarea {
  min-height: 12rem;
}

.select-element:after {
  @include icon;
  @extend .icon-down-open:before;
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 70%;
  line-height: $inputHeight;
  padding: 0 11px 0 11px;
  background: $inputBackground;
  color: $selectPickerColor;
  height: 100%;
  pointer-events: none;
  border-radius: 0 $globalRadius $globalRadius 0;

  &:focus, &:active {
    background: $inputFocusColor;
  }
  will-change: background;

  transition: background .5s ease;
}

.select-element {
  cursor: pointer;
  position: relative;

  &:hover {
    &:after {
      background: $inputFocusColor;
    }
  }
}

.list-form {
  width: 100%;
}

.append-form {
  display: flex;
  align-items: center;
  > :first-child {
    flex: 1;
  }
}

// Multiple elements in one row
.multi-form {
  display: flex;

  > div {
    margin-left: 10px;
    // all all equal size
    flex: 1;
    &:first-of-type {
      margin-left: 0;
    }
  }

  &.break {
    display: block;
    > div {
      margin-left: 0px;
      &:not(:last-of-type) {
        margin-bottom: 10px;
      }
    }
    flex-direction: column;
  }
}

// A Date selector:
.select-day {
  flex: 1;
  max-width: 75px;
}

.select-month {
  flex: 3;
}

.select-year {
  flex: 2;
  max-width: 100px;
}

.form-actions {
  text-align: left;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  border-top: 1px solid $globalBorderColor;
  padding-top: 2rem;

  &.plain {
    border-top: none;
    padding-top: 0;
  }

  > div {
    flex: 1;

    > * {
      width: 100%;
      text-align: center;
    }
  }

  .right {
    flex: 0 1 auto;
  }

  p {
    margin: 0;
  }

  .button, button, input[type="submit"] {
    margin-bottom: 1rem;
  }

  .left {
    > label {

      .checkbox-container {
        margin-bottom: 1rem;
      }
    }
  }

}

.toolbar-form {
  padding: 0 4px;
  display: flex;
  align-items: center;
  line-height: $topbarHeight;
  position: absolute;
  top: 0;
  min-width: 200px;
  input {
    padding-left: 2px !important;
  }
}

input[type="range"] {
  background-color: transparent !important;
  padding: 0 !important;
}

.multiple-range-input {
  overflow: hidden;
  position: relative;
  height: $inputHeight;
}

// Range Controls
.multiple-range-input input {
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  outline: none;
}

@mixin slider-thumb {
  pointer-events: all;
  position: relative;
  background: $primaryColor;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: background .3s ease;
  &:hover {
    background: lighten($primaryColor, 10%);
  }

  &:focus, &:active {
    background: darken($primaryColor, 10%);
  }
}

input[type="range"]::-webkit-slider-thumb {
  z-index: 1;
  outline: 0;
  @include slider-thumb;
  margin-top: -9px;
}

input[type="range"]::-moz-range-thumb {
  z-index: 10;
  @include slider-thumb;
}

input[type="range"]::-ms-thumb {
  z-index: 1;
  @include slider-thumb;
}

input::-webkit-slider-runnable-track {
  height: 3px;
  background: $lighterGrayColor;
  position: relative;
}

input[type="range"]::-ms-track {
  height: 3px;
  background: $lighterGrayColor;
  position: relative;
  border-color: transparent;
  color: transparent;
  z-index: -1;
}

input[type=range]::-ms-fill-lower {
  background: $lighterGrayColor;
  border-radius: 0;
}

input[type=range]::-ms-fill-upper {
  background: $lighterGrayColor;
  border-radius: 0;
}

input::-moz-range-track {
  position: relative;
  z-index: -1;
  background-color: $lighterGrayColor;
  border: 0;
}

.multiple-range-input {
  input:last-of-type::-moz-range-track {
    -moz-appearance: none;
    background: none transparent;
    border: 0;
  }
  input:last-of-type {
    &::-ms-fill-lower {
      background: none transparent;
    }

    &::-ms-fill-upper {
      background: none transparent;
    }
    &::-ms-track {
      background: none transparent;
    }
  }

}

// Desktop Version of Forms
@media #{$mediaDesktop} {

  form:not(.wide) {
    .control-group {
      flex-direction: row;
    }

    label:not(.checkbox) {
      min-width: $labelMinWidth;
      width: $labelWidthDesktop;
      text-align: right;
      padding: 5px 15px 0 0;
      position: relative;
      top: 5px;
      margin-bottom: 0;
      word-wrap: break-word;
    }

    .no-label {
      margin-left: $labelWidthDesktop;
    }

    legend {
      margin-left: $labelWidthDesktop;
    }

    .multi-select-field {
      margin-top: 7px;
    }

    .controls {
      width: 50%;
      min-width: $formMinWidthControls;
    }


    fieldset:not(:last-of-type) {
      padding: 0 0 30px 0;
      margin-bottom: 30px;
    }

    .indent-label {
      margin-left: $labelWidthDesktop;
    }

  }
  .multi-form {
    &.break {
      display: flex;
      > div:not(:first-of-type) {
        margin-left: 20px;

      }
      > div {
        &:not(:last-of-type) {
          margin-bottom: 0px;
        }
      }
      flex-direction: row;
    }
  }

  .form-actions {
    align-items: center;

    flex-direction: row;
    flex-wrap: nowrap;


    label {
      margin-left: 1rem;
    }

    .left {
      > label {
        margin-left: 0;

        .checkbox-container {
          margin-bottom: 0;
        }
      }
    }

    > div {
      > * {
        width: auto;
        text-align: left;
      }
    }

    p {
      margin: 0 1rem;
    }

    .button, button, input[type="submit"] {
      margin-bottom: 0;
    }


    &.break {
      margin-top:1rem;
      flex-wrap:wrap;
      p {
        margin:0;
      }

      .button {
       margin:1rem 1rem 1rem 0;
      }
    }

  }
}<commit_msg>fixed landing page front<commit_after>/**
* Forms
*/
form {
  position: relative;
}

.control-group {
  display: flex;
  flex-direction: column;

  p {
    margin-bottom: 0;
    font-size: $smallFontSize;
    line-height: $smallFontSizeLineHeight;
  }

  .controls {
    margin-bottom: 20px;
    position: relative;
    p {
      margin: $labelMargin 0 0 0;
      font-size: $smallFontSize;
      color: $grayColor;
      a {
        @include link-color();
      }
    }
  }

  &.tight, &:last-of-type {
    .controls {
      margin-bottom: 0;
    }
  }
}

legend {
  font-weight: bold;
  margin-bottom: 2rem;
}

label:not(.checkbox) {
  font-size: $smallFontSize;
  color: $labelColor;
  margin-bottom: $labelMargin;
  display: block;
}

fieldset {
  border: none;
  padding: 0 0 30px 0;
  border-bottom: 1px solid $globalBorderColor;
  margin-bottom: 22px;
  margin-left:0;
  margin-right:0;
  &:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

form.loading {
  button[type="submit"], input[type="submit"] {
    @include loadingContainer();
  }
}

// Basic form and input types
.input, .input-xlarge, select, textarea, input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
  background-color: $inputBackground;
  border: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // disable default browser style
  -webkit-appearance: none;
  appearance: none;
  -o-appearance: none;
  -moz-appearance: none;

  border-radius: $globalRadius;
  color: $baseColor;
  display: block;
  padding: $inputPadding;
  width: 100%;
  max-width: 100%;
  will-change: background-color;
  text-overflow: ellipsis;
  height: $inputHeight;
  &:focus {
    background-color: $inputFocusColor;
    outline: none;
    transition: background .5s ease;
  }

  &.uneditable-input {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    height: auto;
    min-height: $inputHeight;
  }

  &.uneditable-input,
  &.disabled {
    background: $inputDisabledBg;
    color: $inputDisabledColor;
    cursor: not-allowed;

    &:not(.copyable) {
      @include interface();
    }

  }

  &.copyable {
    cursor: copy;
  }

  /**
  * Placeholder
  */
  &::-webkit-input-placeholder {
    /* WebKit browsers */
    color: $placeholderColor;
    font-style: normal;
    font-weight: normal;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $placeholderColor;
    font-style: normal;
    opacity: 1;
    font-weight: normal;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $placeholderColor;
    font-style: normal;
    opacity: 1;
    font-weight: normal;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: $placeholderColor;
    font-style: normal;
    font-weight: normal;
  }

  // validation
  &.invalid {
    background: lighten($alertColor, 35%);
    // Firefox will render a boxshadow
    box-shadow: none;
    border: none;

    &.loading {
      @include loadingContainer($alertColor);

    }
  }

  // remove default states
  &:invalid {
    box-shadow: none;
    border: none;
  }

  &.loading {
    position: relative;
    @include loadingContainer(#ccc);
  }
}

.form-error {
  color: $alertColor;
  font-size: $smallFontSize;
}

/* Styled Checkbox and Radio Button: */

.multi-select-field {
  margin-bottom: 10px;
  margin-top: 2px;
  .checkbox {
    display: block;
    margin-bottom: 10px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

.checkbox {
  padding: 1px 0 0 25px;
  position: relative;
  @include interface();
  cursor: pointer;
  input {
    z-index: -1;
    position: absolute;
    left: 8px;
    top: 3px;
    width: 2px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none !important;
    box-shadow: none !important;

  }
  .checkbox-container {
    line-height: $baseLineHeight;
    display: inline-block;
    > span {
      color: $checkRadioColor;
    }
  }
  .checkbox-container::before {
    content: ' ';
    width: $checkboxAndOptionHeight;
    height: $checkboxAndOptionHeight;
    position: absolute;
    left: 0;
    border-radius: $globalRadius;
    font-size: 12px;
    line-height: $checkboxAndOptionHeight;
    top: 1px;
    background: $inputBackground;
    text-align: center;
    color: $checkRadioColor !important;

    @include icon();
  }

  &:active {
    .checkbox-container::before {
      background: darken($inputBackground, 5%);
    }
  }

  input[type="checkbox"], input[type="radio"] {
    &.invalid + .checkbox-container::before {
      background: lighten($alertColor, 30%);
    }
  }

  input[type="checkbox"], input[type="radio"] {
    &:focus {
      + .checkbox-container::before {
        background: darken($inputBackground, 5%);
      }
    }
  }
  input[type="checkbox"]:checked + .checkbox-container::before {
    @extend .icon-ok:before;

  }
  input[type="radio"]:checked + .checkbox-container::before {
    @extend .icon-circle:before;
    font-size: 10px;
  }

  input[disabled] + .checkbox-container {
    cursor: not-allowed;
  }

  input[disabled] + .checkbox-container::before {
    background: $inputDisabledBg;
    color: $inputDisabledColor !important;
    cursor: not-allowed;
  }
}

// Styled select:
/* Arrows for Select's*/

select {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

textarea {
  min-height: 12rem;
}

.select-element:after {
  @include icon;
  @extend .icon-down-open:before;
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 70%;
  line-height: $inputHeight;
  padding: 0 11px 0 11px;
  background: $inputBackground;
  color: $selectPickerColor;
  height: 100%;
  pointer-events: none;
  border-radius: 0 $globalRadius $globalRadius 0;

  &:focus, &:active {
    background: $inputFocusColor;
  }
  will-change: background;

  transition: background .5s ease;
}

.select-element {
  cursor: pointer;
  position: relative;

  &:hover {
    &:after {
      background: $inputFocusColor;
    }
  }
}

.list-form {
  width: 100%;
}

.append-form {
  display: flex;
  align-items: center;
  > :first-child {
    flex: 1;
  }
}

// Multiple elements in one row
.multi-form {
  display: flex;

  > div {
    margin-left: 10px;
    // all all equal size
    flex: 1;
    &:first-of-type {
      margin-left: 0;
    }
  }

  &.break {
    display: block;
    > div {
      margin-left: 0px;
      &:not(:last-of-type) {
        margin-bottom: 10px;
      }
    }
    flex-direction: column;
  }
}

// A Date selector:
.select-day {
  flex: 1;
  max-width: 75px;
}

.select-month {
  flex: 3;
}

.select-year {
  flex: 2;
  max-width: 100px;
}

.form-actions {
  text-align: left;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  border-top: 1px solid $globalBorderColor;
  padding-top: 2rem;

  &.plain {
    border-top: none;
    padding-top: 0;
  }

  > div {
    flex: 1;

    > * {
      width: 100%;
      text-align: center;
    }
  }

  .right {
    flex: 0 1 auto;
  }

  p {
    margin: 0;
  }

  .button, button, input[type="submit"] {
    margin-bottom: 1rem;
  }

  .left {
    > label {

      .checkbox-container {
        margin-bottom: 1rem;
      }
    }
  }

}

.toolbar-form {
  padding: 0 4px;
  display: flex;
  align-items: center;
  line-height: $topbarHeight;
  position: absolute;
  top: 0;
  min-width: 200px;
  input {
    padding-left: 2px !important;
  }
}

input[type="range"] {
  background-color: transparent !important;
  padding: 0 !important;
}

.multiple-range-input {
  overflow: hidden;
  position: relative;
  height: $inputHeight;
}

// Range Controls
.multiple-range-input input {
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  outline: none;
}

@mixin slider-thumb {
  pointer-events: all;
  position: relative;
  background: $primaryColor;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: background .3s ease;
  &:hover {
    background: lighten($primaryColor, 10%);
  }

  &:focus, &:active {
    background: darken($primaryColor, 10%);
  }
}

input[type="range"]::-webkit-slider-thumb {
  z-index: 1;
  outline: 0;
  @include slider-thumb;
  margin-top: -9px;
}

input[type="range"]::-moz-range-thumb {
  z-index: 10;
  @include slider-thumb;
}

input[type="range"]::-ms-thumb {
  z-index: 1;
  @include slider-thumb;
}

input::-webkit-slider-runnable-track {
  height: 3px;
  background: $lighterGrayColor;
  position: relative;
}

input[type="range"]::-ms-track {
  height: 3px;
  background: $lighterGrayColor;
  position: relative;
  border-color: transparent;
  color: transparent;
  z-index: -1;
}

input[type=range]::-ms-fill-lower {
  background: $lighterGrayColor;
  border-radius: 0;
}

input[type=range]::-ms-fill-upper {
  background: $lighterGrayColor;
  border-radius: 0;
}

input::-moz-range-track {
  position: relative;
  z-index: -1;
  background-color: $lighterGrayColor;
  border: 0;
}

.multiple-range-input {
  input:last-of-type::-moz-range-track {
    -moz-appearance: none;
    background: none transparent;
    border: 0;
  }
  input:last-of-type {
    &::-ms-fill-lower {
      background: none transparent;
    }

    &::-ms-fill-upper {
      background: none transparent;
    }
    &::-ms-track {
      background: none transparent;
    }
  }

}

// Desktop Version of Forms
@media #{$mediaDesktop} {

  form:not(.wide) {
    .control-group {
      flex-direction: row;
    }

    label:not(.checkbox) {
      min-width: $labelMinWidth;
      width: $labelWidthDesktop;
      text-align: right;
      padding: 5px 15px 0 0;
      position: relative;
      top: 5px;
      margin-bottom: 0;
      word-wrap: break-word;
    }

    .no-label {
      margin-left: $labelWidthDesktop;
    }

    legend {
      margin-left: $labelWidthDesktop;
    }

    .multi-select-field {
      margin-top: 7px;
    }

    .controls {
      width: 50%;
      min-width: $formMinWidthControls;
    }


    fieldset:not(:last-of-type) {
      padding: 0 0 30px 0;
      margin-bottom: 30px;
    }

    .indent-label {
      margin-left: $labelWidthDesktop;
    }

  }
  .multi-form {
    &.break {
      display: flex;
      > div:not(:first-of-type) {
        margin-left: 20px;

      }
      > div {
        &:not(:last-of-type) {
          margin-bottom: 0px;
        }
      }
      flex-direction: row;
    }
  }

  .form-actions {
    align-items: center;

    flex-direction: row;
    flex-wrap: nowrap;


    label {
      margin-left: 1rem;
    }

    .left {
      > label {
        margin-left: 0;

        .checkbox-container {
          margin-bottom: 0;
        }
      }
    }

    > div {
      > * {
        width: auto;
        text-align: left;
      }
    }

    p {
      margin: 0 1rem;
    }

    .button, button, input[type="submit"] {
      margin-bottom: 0;
    }


    &.break {
      margin-top:1rem;
      flex-wrap:wrap;
      p {
        margin:0;
      }

      .button {
       margin:1rem 1rem 1rem 0;
      }
    }

  }
}
{'fraction_non_alphanumeric': 0.14580436830066826, 'fraction_numerical': 0.01636991523523344, 'mean_word_length': 2.4431747992588018, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2448432', 'n_tokens_mistral': 8452, 'n_tokens_neox': 7874, 'n_words': 1644}