_forms.scss

.modx-tv {
  .resizable {
    &:hover {
      &::before,
      &::after {
        background-color: rgba($mediumGray, 0.25);
        color: $mediumGray;
      }
    }
    &::before,
    &::after {
      @extend %pseudo-font;
      position: absolute;
      right: 0;
      margin-right: 0.25%;
      text-align: center;
      background-color: rgba($mediumGray, 0.15);
      color: scale-color($color: $mediumGray, $lightness: 20%);
      pointer-events: none;
      width: 15px;
      z-index: 2;
      font-size: smaller;
    }
    &::before {
      content: fa-content($fa-var-angle-up);
      bottom: 12px;
      height: 7px;
      line-height: 0.9;
    }
    &::after {
      content: fa-content($fa-var-angle-down);
      bottom: 4px;
      height: 8px;
      line-height: 0.6;
      border-bottom-right-radius: 3px;
    }
    textarea {
      resize: vertical;
    }
  }
  /* use default manager font for TV textareas to have unified look across TVs */
  .x-form-textarea:not(div) {
    font-family: inherit;
  }
}

textarea {
  overflow: auto;
}

textarea.x-form-field,
.x-form-textarea {
  display: block; /* make the field description (below) stick to the bottom correctly */
  font-family: $codefonts;
  padding: 5px; /* override standard extjs theme */
}

/* general class that can be applied to any form field that should display code font */
.modx-code-content {
  font-family: $codefonts;
}

textarea[name="description"],
textarea[name="introtext"],
.modx-text-content {
  font: $baseText;
}

.x-form-text,
/* this screws up clear cache modal #shame */
textarea.x-form-field,
.x-form-textarea {
  max-width: 100%;
  background-color: $coreFieldBg;
  background-image: none;
  border-radius: $borderRadius;
  border: 1px solid $borderColor;
  position: relative;
  transition: border-color 0.25s;
}

.x-viewport .x-trigger-wrap-focus,
.x-viewport input.x-form-focus,
.x-viewport textarea.x-form-focus,
.x-viewport .x-form-textarea .x-form-focus {
  border-color: $mediumGray;
}

.x-viewport .x-trigger-wrap-open {
  border-radius: $borderRadius $borderRadius 0 0;
}

.x-form-invalid,
textarea.x-form-invalid {
  border-color: $red !important;
}

/* fix oversize of buttons in FF */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* special rule for the TVs additional input/output properties form to have padding on top */
#modx-input-props,
#modx-widget-props {
  padding: 15px 0 0 0;
}

/* the wrapper structure for form inputs */
.x-form-item {
  display: block;
  margin: 0;
  outline: 0 none; /* prevent firefox from creating ugly dotted outlines */
  position: relative; /* boundary for absolutely positioned elements */
  z-index: 1;

  /* general styles for form labels, paddings for various form layouts are handled below */
  label.x-form-item-label {
    color: $coreFieldLabelColor;
    font-size: 13px;
    font-weight: bold;
    position: relative; /* boundary for absolutely positioned elements */

    .modx-tv-label-title {
      display: inline-block;
    }

    .modx-tv-label-description {
      display: inline-block;
      font-style: italic;
      font-weight: normal;
    }

    .modx-tv-reset,
    .modx-field-utils {
      cursor: pointer;
      display: inline-block;
      position: relative;
      opacity: 0;
      filter: alpha(opacity=0); /* for IE <= 8 */
      padding: 0 0 0 3px;
      top: 0;
      right: 0;
      transition: all 0.25s;
      width: 16px;
      height: 16px;

      &::before {
        @extend %pseudo-font;
        box-sizing: border-box;
        color: scale-color($coreFieldLabelColor, $lightness: 50%);
        content: fa-content($fa-var-undo-alt); /* better match IMO for the action being taken */
        font-size: 14px;
        position: relative;
        bottom: 2px;
        left: 0;
        text-align: center;
        vertical-align: middle;
        width: 16px;
        height: 16px;
      }
      &.modx-field-reset {
          &::before {
            content: fa-content($fa-var-undo-alt);
          }
          &:hover::before {
            color: $green;
          }
      }
      &.modx-field-clear {
        &::before {
          content: fa-content($fa-var-eraser);
          font-size: 15px;
          margin-bottom: 4px;
        }
        &:hover::before {
          color: $red;
        }
      }

      &:hover:before {
        color: $green;
      }

      &:active:before {
        color: darken($colorSplash, 6%);
      }
    }

    &:hover .modx-tv-reset,
    &:hover .modx-field-utils {
      opacity: 1;
      filter: alpha(opacity=100); /* for IE <= 8 */
    }
  }

  /* label.x-form-item-label */

  &.modx-tv {
    padding: 0 0 0 0 !important;
  }

  /* is outside of the label */
  .modx-tv-inherited {
    color: $darkGray;
    display: inline-block;
    font-size: 10px;
    font-style: italic;
    position: absolute;
    top: 19px;
    right: 0; /* absolute position to avoid layout issues with long descriptions */
  }

  .modx-tv-image-preview {
    margin-top: 7px;

    img {
      display: block;
      max-width: 400px;
      max-height: 400px;
    }
  }

  /* Tag TVs tag list below */
  .modx-tag-list {
    list-style: none;
    margin: 0;
    overflow: auto;
    padding: 0;

    .modx-tag-opt {
      background-color: $lightGray;
      border-radius: 0 $borderRadius $borderRadius 0;
      cursor: pointer;
      display: inline-block;
      margin: 4px 5px 0 10px;
      padding: 1px 5px;
      position: relative;

      &:before {
        border-style: solid;
        border-width: 10px 10px 10px 0;
        border-color: transparent $lightGray transparent transparent;
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        transform: rotate(360deg); /* for better anti-aliasing in webkit browsers */
        width: 0;
        height: 0;
      }

      &:after {
        background-color: $white;
        border-radius: 50%;  /* make a circle */
        content: '';
        position: absolute;
        top: 8px;
        left: -4px;
        width: 4px;
        height: 4px;
      }

      &.modx-tag-checked,
      &:hover {
        background-color: $colorSplash;
        color: $colorSplashContrast;
        text-decoration: none;

        &:before {
          border-color: transparent $colorSplash transparent transparent;
        }

        &:hover {
          background-color: darken($colorSplash, 6%);

          &:before {
            border-color: transparent darken($colorSplash, 6%) transparent transparent;
          }
        }
      }
    }
  }

  /* a few styles for the old original type multi select TV */
  .modx-tv-legacy-select {
    border: 1px solid $borderColor;
    border-radius: $borderRadius;
    padding: 5px;
    transition: all 0.25s;

    &:focus {
      border: 1px solid $borderColorFocus;
    }

    /* does not work in webkit but it's here anyways if some browsers support it */
    option[selected] {
      background-color: $brandHover;
    }
  }

  /* style the labels and form items in the various form layouts */
  /* .x-form-label-left needs to come first, so .x-form-label-top rules can override, as some forms are strangely nested */
  .x-form-label-left & {
    /* targets .x-form-item */
    padding: 15px 0 0 0;
    padding-bottom: 0; /* override extjs default theme styles */

    &:first-of-type {
      /* do not add the top padding to the first .x-form-item in this type of form layout */
      padding: 0;
    }

    label.x-form-item-label {
      display: inline-block; /* override extjs default theme styles */
      margin: 0; /* override extjs default theme styles */
      padding: 7px 0 7px 0;
    }
  }

  .x-form-label-top & {
    /* targets .x-form-item */
    padding: 0; /* override the .x-form-label-left rule */
    padding-bottom: 0; /* override extjs default theme styles */

    label.x-form-item-label {
      display: inline-block; /* override extjs default theme styles */
      margin: 15px 0 4px 0;
      padding: 0;
    }
  }

  .x-window & {

    .x-form-item-label {
      padding: 10px 0 4px 0; /* move the form fields a bit tighter together inside windows */
    }
  }

  &.x-hide-label {
    padding-top: 10px !important; /* make this override common rules */

    #modx-resource-content & {
      padding-top: 0 !important; /* make this override the rule above */
    }

    label.x-form-item-label {
      display: none; /* override !important rule from above */
    }
  }

  &.disabled {
    label {
        color: scale-color($coreFieldLabelColor, $lightness: 50%);
    }
  }

  .x-form-element {
    padding: 0;
    font: $baseText;
    .x-form-invalid-icon {
        color: $red;
        &::before {
            @extend %pseudo-font;
            content: fa-content($fa-var-exclamation-triangle); /* : "\f071" */
            position: absolute;
            left: 3px;
        }
    }
  }

  /* .x-form-element */

  /* prevent columns used inside form elements to have too much spacing, some custom TV types need this */
  .x-column-inner > .x-column {

    ~.x-column {
      margin-left: 5px;
    }

    .x-form-field-wrap {
      width: auto !important; /* make sure the wrap is always full width of parent, fixes some custom TVs */
    }
  }

  /* prevent nested elements with class .container having a lot of margin, some custom TV types need this */
  .container {
    margin: 0;
  }

  .x-btn {
    padding: 7px 10px 7px 10px;
  }
}

/* .x-form-item */

.desc-under {
  color: $coreFieldDescColor;
  display: block;
  font-size: 12px;
  font-style: italic;
  margin: .4em 0 0 0;
  transition: color 0.25s;

  &:hover {
    color: scale-color($coreFieldDescColor, $lightness: -50%);
  }

  &.toggle-slider-above {
    margin: 0.3em 0;
    padding-left: 3.9em;
  }

  .warning {
    color: $red;
    overflow: hidden;
    padding: 0;
  }

  .example-list {
    ul {
      margin: 0.4em 0;
      li {
        position: relative;
        margin-bottom: 0.25em;
        padding-left: 1.25em;
        &::before {
          @extend %pseudo-font;
          position: absolute;
          left: 0.2em;
          top: 0;
          content: fa-content($fa-var-angle-double-right);
          color: scale-color($mediumGray, $lightness: 20%);
        }
      }
    }
  }
  .example-input,
  .copy-this {
    padding: 0 0.3em;
    border-radius: 2px;
    transition: width 1s;
  }

  .example-input {
    color: scale-color($green, $lightness: -5%, $saturation: -45%);
    background-color: scale-color($green, $lightness: 94%, $saturation: -20%);
    &:hover {
      background-color: scale-color($green, $lightness: 89%, $saturation: -10%);
      color: scale-color($green, $lightness: -20%, $saturation: -5%);
      cursor: pointer;
    }
  }

  .copy-this {
      color: scale-color($blue, $lightness: -5%, $saturation: -40%);
      background-color: scale-color($blue, $lightness: 92%, $saturation: -15%);
      position: relative;
      &:hover {
          background-color: scale-color($blue, $lightness: 87%, $saturation: 5%);
          color: scale-color($blue, $lightness: -35%);
          cursor: pointer;
          &::after {
              @extend %pseudo-font;
              content: fa-content($fa-var-copy);
              color: scale-color($blue, $saturation: -40%);
              position: absolute;
              margin-left: 0.5em;
              cursor: default;
          }
          &:active {
              color: $darkGray;
              &::after {
                  color: $darkGray;
              }
          }
      }
      &:active {
        color: $darkGray;
        &::after {
          color: $darkGray;
        }
      }
    }

  .feedback {
      margin-left: 1.4rem;
      color: scale-color($blue, $lightness: -35%);
      font-style: normal;
      &.item-copied {
          opacity: 1;
          transition: opacity 1.5s;
      }
  }

  a {
    text-decoration: none;
    border-bottom: 1px dotted $mediumGray;
    color: $mediumGray;
    &:hover {
      color: $darkGray;
    }
  }

  .deemphasize {
    font-style: normal;
  }

}

.fs-toggle {
  padding-top: 1em;
  margin-top: 2em;
  margin-bottom: 0.5em;
  border-top: 1px dashed $borderColor;
}

.x-fieldset {
  border: 1px solid $borderColor;
  border-radius: $borderRadius !important; /* !important ensures the border radius, also when the fieldset has a class that sets it to 0 */
  margin: 15px 0 0 0;
  overflow: visible; /* allow the legend to be displayed correctly */
  padding: 0; /* override extjs default styles */
  position: relative;

  .x-fieldset-header {
    /* legend */
    color: $coreFieldLabelColor;
    font: $fontSmall;
    font-weight: bold;
    margin: 0 0 0 10px;
    padding: 0 5px 0 3px;
    position: relative;

    .x-fieldset-header-text {
      line-height: 18px; /* prevent collapse button cut off */
    }
  }

  .x-fieldset-bwrap {
    .x-fieldset-body {
      overflow-x: hidden !important; /* prevent unnecessary horizontal scrollbars */
      padding: 0 10px 10px 10px;
    }
  }

  /* for toggled fieldsets */
  &.form-row-wrapper {
    .x-fieldset-bwrap {
      .x-fieldset-body {
        padding: 0 15px 15px 15px;
      }
    }
  }

  &#tv-input-opts-fs,
  &#tv-output-opts-fs {
    border: 0;
    margin: 0;
    .x-fieldset-bwrap {
      .x-fieldset-body {
        padding: 0;
      }
    }
    .x-fieldset {
      .x-fieldset-bwrap {
        .x-fieldset-body {
          padding: 0 15px 15px 15px;
        }
      }
    }
  }

}

.x-form-field {
  font: inherit;

  /* composite fields that are used by some extras */
  &.x-form-composite {
    margin-bottom: 0 !important;

    /* not sure if this applies to all buttons inside composite fields, could only find Image+ TV using this */
    .x-btn {
      top: 1px !important; /* override inline style */
    }
  }
}

/* the different input fields */
.x-static-text-field {
  color: inherit;
  font-size: inherit;

  &.x-form-focus {
    border-color: $borderColor !important;
  }
}

.x-form-text {
  /*box-sizing: border-box;*/
  /* we cannot use this because extjs calculates widths with the old box-model */
  line-height: 20px;
  min-height: 20px; /* + 5px + 5px padding = 30px */
  padding: 5px;
}

.x-form-field-wrap {
  max-width: 100%;
  background: $coreFieldBg;
  border: 1px solid $borderColor;
  border-radius: $borderRadius; /*box-shadow: $shadowBorderField;*/

  .x-form-text:not(.x-form-invalid) {
    border: 0;
  }

  .x-form-trigger {
    border: 0;
    border-radius: 0 calc($borderRadius - 1px) calc($borderRadius - 1px) 0; /* override button styles border-radius */
    box-shadow: none; /* override button styles box-shadow */
    padding: 0; /* override button styles padding */
    width: 30px;
    height: 100% !important; /* height 100% to enable vertical centering, !important to override default extjs theme styles */
    position: absolute;
    top: 0;
    right: 0;

    &:before {
      @extend %pseudo-font;

      box-sizing: border-box;
      content: fa-content($fa-var-chevron-down);
      font-size: 14px;
      opacity: .8;
      filter: alpha(opacity=60); /* for IE <= 8 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 30px;
      transition: opacity 0.25s;
    }

    &.x-form-trigger-over,
    &:hover {
      &:before {
        opacity: 1;
        filter: alpha(opacity=100); /* for IE <= 8 */
      }
    }

    &.x-form-trigger-click,
    &:active {
      &:before {
        opacity: 1;
        filter: alpha(opacity=100); /* for IE <= 8 */
      }
    }

    /* for xtype datefield */
    &.x-form-date-trigger:before {
      content: fa-content($fa-var-calendar);
      font-weight: 400;
    }

    /* for xtype timefield, doesn't add the class somehow...but it's here anyways */
    /* to make it work the property ,triggerClass: 'x-form-time-trigger' has to be specified for xtype: 'timefield' */
    &.x-form-time-trigger:before {
      content: fa-content($fa-var-clock);
      font-weight: 400;
    }

    &.x-form-file-trigger:before {
      content: fa-content($fa-var-file);
      font-weight: 400;
    }

    &.x-form-image-trigger:before {
      content: fa-content($fa-var-file-image);
      font-weight: 400;
    }

    &.x-form-code-trigger:before {
      content: fa-content($fa-var-file-code);
      font-weight: 400;
    }

  }

  &.x-datetime-wrap {
    background: none;
    border: 0;

    .ux-datetime-date,
    .ux-datetime-time {
        vertical-align: top;
        .x-form-invalid-msg {
            white-space: normal;
        }
    }

    .ux-datetime-date {
      .x-form-trigger {
        &:before {
          content: fa-content($fa-var-calendar);
        }
      }
    }

    .ux-datetime-time {
      .x-form-trigger {
        &:before {
          content: fa-content($fa-var-clock);
        }
      }
    }
  }

  /* xtype: fileuploadfield styles, mainly used for import windows */
  &.x-form-fileupload-wrap {
    overflow: visible; /* allows the upload button to cover the border of the wrap on hover */
    position: relative;

    .x-form-file {
      position: absolute;
      top: 0;
      right: 0;
      min-height: 20px;
      opacity: 0;
      filter: alpha(opacity=0); /* for IE <= 8 */
      padding: 5px;
      z-index: 2;
    }

    .x-form-file-btn {
      border-radius: 0 $borderRadius $borderRadius 0;
      padding: 7px; /* override default button padding */
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1; /* needs to stay below the transparent file input field */
      line-height: 0;
      box-shadow: none;
      border-left: solid 1px $borderColor;
    }

    .x-form-file-text {
      position: relative;
      z-index: 3; /* needs to stay above the transparent file input field */
    }
  }

}

.modx-tv-type-listbox-multiple {

    .x-form-field-wrap {
        border-color: #fff;
        .x-form-text {
            border: 1px solid $borderColor;
            margin: -1px;
            &.x-form-focus {
                border-color: $mediumGray;
            }
        }
    }
}


#x-form-el-modx-user-photo .x-form-file-trigger:before {
  content: fa-content($fa-var-file-image);
}

/* .x-form-field-wrap */

/* both, radio groups and checkbox groups are wrapped in a x-form-check-wrap */
.x-form-check-wrap,
.x-fieldset-checkbox-toggle legend {
  height: auto !important;
  line-height: 18px; /* this is also default in the extjs default theme */

  .x-form-label-left & {
    padding: 7px 0 7px 0;
  }

  .x-form-label-top & {
    padding: 0;
  }

  .x-toolbar .x-toolbar-cell & {
      .x-form-cb-label {
          padding-left: 1.9em;
          &::before {
              color: $silver;
          }
          &:hover,
          &:active,
          &:focus {
              &::before {
                  color: $mediumGray;
              }
          }
      }
  }

  .x-form-cb-label,
  .x-fieldset-header-text {
    color: $coreFieldLabelColor;
    cursor: pointer;
    display: inline-block; /* make line-height apply */
    font-weight: normal;
    margin: 0;
    padding-left: 1.9em;
    position: relative;
    top: 0; /* override extjs default style */

    .ext-ie8 & {
      padding-left: 3px;

      &:before {
        content: '';
      }
    }

    &:before {
      @extend %pseudo-font;

      box-sizing: border-box;
      content: '';
      font-size: 18px;
      padding-right: 3px;
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      vertical-align: middle;
      width: 18px;
      height: 18px;
    }

    &:hover:before,
    &:focus:before {
      color: $colorSplash;
    }

    &:active:before {
      color: darken($colorSplash, 6%);
    }
  }

  /* checkbox & radio button replacement */
  .x-form-checkbox,
  input[type="checkbox"], /* we need this to catch un-classed checkboxes in fieldset legends */
  .x-form-radio {
    /*display: none;*/
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 1;

    .ext-ie8 & {
      /*display: inline-block; /* fallback for IE8 */
      position: relative;
      top: auto;
      left: auto;
      width: 13px;
      height: 13px;
    }

    &:hover + .x-form-cb-label:before,
    &:hover + .x-fieldset-header-text:before,
    &:focus + .x-form-cb-label:before,
    &:focus + .x-fieldset-header-text:before {
      color: $colorSplash;
    }

    &:active + .x-form-cb-label:before,
    &:active + .x-fieldset-header-text:before {
      color: darken($colorSplash, 6%);
    }
  }

  .x-form-checkbox + .x-form-cb-label:before,
  input[type="checkbox"] + .x-fieldset-header-text:before {
    content: fa-content($fa-var-square);
    font-weight: 400;
  }

  .x-form-checkbox:checked + .x-form-cb-label:before,
  input[type="checkbox"]:checked + .x-fieldset-header-text:before {
    content: fa-content($fa-var-check-square);
    font-weight: 400;
  }

  .x-form-radio + .x-form-cb-label:before {
    content: fa-content($fa-var-circle);
    font-weight: 400;
  }

  .x-form-radio:checked + .x-form-cb-label:before {
    content: fa-content($fa-var-dot-circle);
    font-weight: 400;
  }
}

/* .x-form-check-wrap */
/* Special checboxes for resources and tv configs */
#modx-chunk-tabs,
#modx-plugin-tabs,
#modx-resource-tabs .display-switch,
#modx-snippet-tabs,
#modx-template-tabs,
#modx-tv-tabs .display-switch,
#modx-tv-editor-tabs,
.display-switch {

  &.space-before {
    margin-top: 0.75rem;
  }

  .x-form-check-wrap,
  .x-fieldset-checkbox-toggle legend,
  .x-fieldset legend {
    [type="checkbox"]{

      position: absolute;
      left: -9999px;
      html[dir="rtl"] & {
        right: -9999px;
        left: unset;
      }

      & + .x-form-cb-label,
      & + .x-fieldset-header-text {
        position: relative;
        padding-left: 3.6em;
        padding-top: 0.2em;
        margin-left: 0;
        cursor: pointer;
        box-sizing: border-box;
        line-height: 1; /* fixes vertical alignment with slider control */

        &:before,
        &:after {
          content: '';
          position: absolute;
          transition: all 0.2s ease;
          font-size: inherit;
        }

        &:before {
          left: 0;
          top: 0;
          width: 3em;
          height: 1.6em;
          background: $lightGray;
          border-radius: 1.2em;
          z-index: 10;
        }

        &:after {
          left: 0.1em;
          top: 0.8em;
          margin-top: -0.65em;
          height: 1.3em;
          width: 1.3em;
          border-radius: 50%;
          background-color: $white;
          z-index: 11;
        }
      }

      &:checked {
        & + .x-form-cb-label,
        & + .x-fieldset-header-text {
          &:after {
            left: 1.6em;
            top: 0.8em;
          }

          &:before {
            background-color: $green;
            border-color: $green;
          }
        }
      }

      &.danger:checked {
        & + .x-form-cb-label,
        & + .x-fieldset-header-text {
          &:before {
            background-color: $red;
            border-color: $red;
          }
        }
      }

      &.warning:checked {
        & + .x-form-cb-label,
        & + .x-fieldset-header-text {
          &:before {
            background-color: $orange;
            border-color: $orange;
          }
        }
      }
    }
  }
}

.switch-container {
  padding-top: 1.6rem;
}

.x-form-check-group,
.x-form-radio-group {
  /*overflow: visible; /* do not cut off the bottom of the input elements */
  overflow: hidden; /* visible causes horizontal scrollbars in vertical tabs */
  padding-bottom: 0.5em; /* prevent bottom-most sliders from being clipped */

  .x-column {
    /* we need this to have access to the first child */

    .x-form-item {
      &:first-child {
        padding: 4px 0 0 0;
      }
    }
  }
  /* applies to new xcheckboxgroup custom checkbox group */
  &.aggregated-group {
      padding-left: 1em;
      padding-right: 1em;
  }
}


/* superboxselect / multi-select field */
.x-superboxselect {
  height: auto !important; /* override the extjs default theme style of 18px */
  margin: 0;
  outline: 0;
  padding: 0 5px 5px 5px; /* special padding because selected items need margin-top */
  position: relative;
  white-space: normal; /* make selected options wrap */
  width: auto !important; /* prevents the right border to be cut off */

  .ext-strict .x-toolbar .x-small-editor & {
    height: auto !important; /* override the extjs default theme style high specifiy + !important rule, wtf... */
  }

  ul {
    cursor: text;
    min-height: 20px;
    overflow: visible; /* prevent item box-shadow from being cut off */
    padding-right: 61px; /* 2 * 30px for each .x-form-trigger + 1px border */
    white-space: normal; /* make selected options wrap */
    width: auto !important; /* override extjs width calculation */

    .x-toolbar & {
      margin: -5px 0 0 -5px; /* fix for superbox selects in toolbars */
    }

    li {
      margin: 5px 5px 0 0;
      padding: 0;

      &.x-superboxselect-item {
        cursor: default; /* don't make the selected options appear like full buttons */
        font-size: 12px;
        padding: 4px 18px 4px 4px !important; /* can somehow not override the extended rules */
        position: relative;

        /* focus styles need to be defined as the item is an li element which normally doesn't get :focus */
        &.x-superboxselect-item-focus {
          background-color: $buttonBgHover;
          box-shadow: $shadowBorderHover;
          color: $buttonColorHover;
        }

        .x-superboxselect-item-close {
          border: 0;
          color: inherit;
          cursor: pointer;
          display: inline-block; /*font-size: 1px;*/
          outline: 0; /* fix firefox dotted outlines */
          opacity: 0.6;
          filter: alpha(opacity=60); /* for IE <= 8 */
          padding: 0;
          position: absolute;
          top: 0;
          right: 0;
          transition: opacity 0.25s;
          width: 16px;
          height: 100%;

          &:before {
            @extend %pseudo-font;

            box-sizing: border-box;
            content: fa-content($fa-var-times);
            color: inherit;
            font-size: 14px;
            margin-top: -7px; /* half of the height to center vertically with top 50% */
            position: absolute;
            top: 50%;
            right: 0;
            text-align: center;
            vertical-align: middle;
            width: 16px;
          }

          &:hover,
          &:focus {
            opacity: 1;
            filter: alpha(opacity=100); /* for IE <= 8 */
          }
        }
      }

      &.x-superboxselect-input {
        display: inline-block;

        input {
          background: none;
          border: 0;
          line-height: 20px;
          outline: 0;
        }
      }
    }
  }

  &.x-superboxselect-stacked li {
    box-sizing: border-box;
    margin: 5px 0 0 0;
    width: 100%;
  }

  /* these buttons got the .x-form-trigger class assigned */
  .x-superboxselect-btns {
    overflow: visible;
    position: absolute;
    top: 0;
    right: 0;
    width: 61px;
    height: 100%; /* 61px account for the border of the clear button */

    .x-superboxselect-btn-expand {
      border-radius: 0;
      right: 31px; /* account for the border of the clear button */
    }

    .x-superboxselect-btn-clear {
      border-left: 1px solid $borderColor;

      &:before {
        @extend %pseudo-font;
        content: fa-content($fa-var-times);
      }
    }
  }
}

.inline-form {
  border: 0 none;
  padding: 15px 15px 0;

  label {
    color: #777777;
    display: block;
    font-weight: bold;
    margin-bottom: 2px;
  }

  input[type=text],
  textarea {
    background-color: $coreFieldBg;
    background-image: none;
    border-radius: $borderRadius;
    border: 1px solid $silver;
    position: relative;
    width: 97%;
  }

  input[type=text] {
    font-size: 13px;
    height: 20px !important;
    padding: 5px;
  }
}

/* cannot find this class anywhere, leaving it for savety, but most likely broken when it appears */
.modx-tv-description {
  color: $darkGray;
  font-size: 10px;
  line-height: 1.2;
  margin-top: 2px !important;
}

/* TODO: is it used? -> exside: yes, but it ha a class of .modx-tv-reset */
.modx-tv-reload-btn {
  float: right;
  position: absolute;
  right: 19px;
  z-index: 10;
}

.modx-tv-reload-btn div {
  z-index: 10;
}

.modx-tv-th label {
  cursor: pointer;
}

.modx-tv-th .tv-description {
  color: $darkGray;
  font-size: 11px;
  font-weight: normal;
}

.x-editor .x-form-check-wrap {
  background-color: $white;
}

.x-grid-editor {
  z-index: 9002 !important;
  .x-form-field-wrap {
    background: #f6f2f7 url($imgPath + "modx-theme/form/combo-bck.png") repeat-x
      scroll 0 100%;
    input {
  background-color: transparent !important;
}
    img {
  background-color: $white;
      background-image: url($imgPath + "modx-theme/form/trigger.png");
    }
  }
}

.x-form-grow-sizer {
  font: $fontSmall;
}

.x-form-invalid-msg {
  color: $red;
  font: $fontSmall;
  margin-top: 2px;
  position: relative;
  min-width: 95%;

  &:before {
    @extend %pseudo-font;
    content: fa-content($fa-var-exclamation-triangle); /* : "\f071" */
    position: absolute;
    top: 3px;
    left: 3px;
    color: inherit;
  }
}

.x-form-empty-field {
  color: $darkGray;
}

.x-grid3 {
  .x-small-editor {

    .x-form-text,
    .x-form-field-wrap {
      font: $fontSmall;
      margin-top: 7px;
      padding: 2px 5px 2px 5px;

      .x-form-text {
        margin: 0;
        padding: 0;
      }
    }

    .x-form-field-wrap {
      overflow: hidden;
    }
  }
}

/* the following styles have to be outside of their component blocks as they are inserted at the end of the DOM */
.x-combo-list {
  border: 0; /* set the border on .x-combo-list-inner */
  border-radius: $borderRadius;
  overflow: visible; /* prevent the left/right borders of .x-combo-list-inner to be cut off */

  .x-combo-list-inner {
    background-color: $dropdownBg;
    border: 1px solid $mediumGray; /* apply the border here as we move this element 1px left to be in line with the combobox border */
    border-radius: $borderRadius;
    margin-left: -1px; /* we cannot use this on the .x-combo-list element as it's used for position calculation */
    width: 100% !important; /* override extjs calculated inline dimensions and stretch to container */
  }

  .x-combo-list-item {
    padding: 6px 8px;
    color: $dropdownTextColor;
    min-height: $baseTextHeight;
    border: 0 !important;
    border-bottom: 1px solid $borderColor !important;

    /* keep border to prevent unnecessary scroll bar on hover of last item */
    &:last-child {
      border-bottom-color: $white !important;
    }

    &.x-combo-selected {
      color: $borderColorFocus;
      background-color: $brandHover;
      border: 0 !important;
      border-bottom: 1px solid $borderColor !important;
    }

    &.x-combo-list-item-grouped {
      padding: 6px 14px;
    }

    .x-combo-list-title {
      display: block;
      font-weight: bold;
      margin: 0 0 5px;
    }
  }

  .x-combo-list-group {
    padding: 6px 8px;
    color: $dropdownTextColor;
    font-weight: bold;
    border-bottom: 1px solid $borderColor;
  }

  /* the pagination toolbar inside a combobox has 2 buttons left, text, pagenumberfield, text, 2 buttons */
  /* this information is important to understand the following code with uses sibling selectors for IE8 compat */
  .x-toolbar {
    border: 0;
    border-radius: 0 0 $borderRadius $borderRadius;
    box-shadow: 0 0 0 1px $colorSplash;
    margin-top: -1px;
    position: relative;

    .x-toolbar-ct {
      padding: 5px 0 15px 0;
    }

    .x-toolbar-left table {
      margin: 0 auto; /* center the buttons regardless of listWidth */
    }

    .x-toolbar-cell {
      display: inline-block; /* make table cells act as block elements^^, dont look at me... =) */

      /* nested to override normal toolbar rules */
      .x-btn,
      .x-form-text {
        background: transparent;
        box-shadow: none;
        font-size: 10px;
        line-height: 16px;
        margin-right: 2px;
        min-height: 16px;
        padding: 2px;
      }

      .x-btn {
        padding: 1px;
        transition: color 0.25s;

        &.x-btn-over,
        &:hover,
        &:focus {
          color: $buttonBgHover;
        }

        &.x-btn-click,
        &:active {
          color: $buttonBgActive;
        }

        &.x-item-disabled {
          color: $buttonColor;
          opacity: 0.4;
        }

        button:before {
          line-height: 20px;
          top: 0;
          left: 0;
          right: 0;
        }
      }

      .x-form-text {
        background: $lightestGray;
        width: 23px;
      }
    }

    .xtb-text {
      font-size: 10px;
      line-height: 1;
      margin: 0 auto;
      padding: 0;
      text-align: center;
    }

    /* the first button << */
    .x-toolbar-cell:first-child {
      .x-btn {
        margin-left: 1px;
      }
    }

    /* the first text cell, "Page" */
    .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell {
      .xtb-text {
        display: none;
        position: absolute;
        top: 2px;
        right: 0;
        left: 0;
      }
    }

    /* the second text cell, "of X" */
    .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell {
      .xtb-text {
        display: inline-block;
        position: absolute;
        top: auto;
        right: 0;
        bottom: 4px;
        left: 0;
      }
    }

    /* the last regular button >>, yes, I know it's ugly but tell that Microsoft and say thanks for IE8 =) */
    .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell
      + .x-toolbar-cell {
      .x-btn {
        margin-right: 0;
      }
    }

    /* the refresh button */
    .x-toolbar-cell:last-child {
      opacity: 0;
      transition: opacity 0.25s;

      .x-btn {
        font-size: 12px;
        line-height: 1;
        margin: 0;
        opacity: 0.4;
        padding: 0;
        position: absolute;
        bottom: 2px;
        right: 1px;

        &:hover {
          opacity: 1;
        }

        button {
          width: 16px;
          height: 16px;

          &:before {
            font-size: 12px;
          }
        }
      }
    }

    &:hover {
      .x-toolbar-cell:last-child {
        opacity: 1;
      }
    }
  }

  /* the small resize handle bottom right */
  .x-resizable-handle-southeast {
    bottom: 1px;
    right: 3px;
  }

    &.modx-superboxselect {
        .x-combo-list-inner {
            margin-left: 0;
        }
    }
}

.x-combo-list-hd {
  background-image: url($imgPath + 'modx-theme/layout/panel-title-light-bg.gif');
  border-bottom-color: #bcbcbc;
  color: #464646;
}

.x-combo-list-small {
  font: $fontSmall;
}

/* The date TV calendar styles */
.x-date-picker,
.x-date-mp {
  background-color: $lightestGray;

  .x-btn,
  .x-date-mp-ok,
  .x-date-mp-cancel {
    border: 0;
    padding: 5px 10px 5px 10px;
    margin: 0 0 0 7px;

    &:first-child {
      margin: 0;
    }

    button {
      font-size: 11px;
      font-style: normal;
      margin: 0;
    }
  }

  .x-date-mp-ok,
  .x-date-mp-cancel {
    height: 16px;
  }
}

.x-date-middle {
  padding: 5px 3px 5px 3px;
}

.x-date-right a,
.x-date-left a,
.x-date-mp-ybtn a.x-date-mp-prev,
.x-date-mp-ybtn a.x-date-mp-next {
  display: inline-block;
  opacity: 0.6;
  filter: alpha(opacity=60); /* for IE <= 8 */
  margin: 0 auto;
  position: relative;
  transition: opacity 0.25s;

  &:before {
    @extend %pseudo-font;

    box-sizing: border-box;
    color: $colorSplash;
    content: '';
    font-size: 18px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    vertical-align: middle;
    width: 18px;
    height: 18px;
  }

  &:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* for IE <= 8 */
  }
}

.x-date-right a,
.x-date-mp-ybtn a.x-date-mp-next {
  &:before {
    content: fa-content($fa-var-caret-right);
    left: auto;
    right: 0;
  }
}

.x-date-left a,
.x-date-mp-ybtn a.x-date-mp-prev {
  &:before {
    content: fa-content($fa-var-caret-left);
  }
}

.x-date-inner {
  margin: 0 auto;
}

.x-date-inner th {
  border-bottom-color: $lightGray;
  color: $darkGray;
  font: $fontSmall;
  font-weight: bold;
}

.x-date-inner td,
.x-date-mp td {
  background-color: $white;
  border: 0;
  font: $fontSmall;
  padding: 1px;
}

.x-date-inner a,
td.x-date-mp-month a,
td.x-date-mp-year a {
  border-radius: $borderRadius;
  color: $mediumGray;
  font: inherit;
  font-weight: bold;
}

td.x-date-mp-month a,
td.x-date-mp-year a {
  margin: 0 3px 0 3px;
}

.x-date-inner a:hover,
.x-date-inner .x-date-prevday a:hover,
.x-date-inner .x-date-nextday a:hover,
.x-date-inner .x-date-disabled a:hover,
td.x-date-mp-month a:hover,
td.x-date-mp-year a:hover {
  background-color: $softGray;
  color: $darkGray;
}

.x-date-inner .x-date-disabled a {
  background-color: $lightGray;
  color: $mediumGray;
}

.x-date-inner .x-date-active {
  color: $black;
}

.x-date-inner .x-date-today a {
  border-color: $colorSplash;
}

.x-date-inner span {
  font-style: normal; /* prevent italic font style because of em */
}

.x-date-inner .x-date-active span,
.x-date-inner .x-date-selected span {
  font-weight: bold;
}

.x-date-inner .x-date-selected a,
td.x-date-mp-sel a {
  background-color: $colorSplash;
  /*background-image: none;*/
  border-color: $white;
  color: $colorSplashContrast;
}

.x-date-inner .x-date-prevday a,
.x-date-inner .x-date-nextday a {
  color: $softGray;
}

.x-date-bottom,
.x-date-mp-btns {
  border-top: 1px solid $lightGray;
  padding: 5px;

  td {
    background-color: transparent;
    border-top: 1px solid $lightGray;
  }
}

td.x-date-mp-sep {
  border-right: 1px solid $borderColor;
}

.x-date-mmenu {
  background-color: $gallery !important;
}

.x-date-mmenu .x-menu-item {
  color: $black;
  font: $fontSmall;
}

// Specific to package upgrades
.radio-version {
  .x-form-check-wrap .x-form-cb-label {
    display: block;

    .changelog {
      float: right;
    }
  }
}

// Template picker on resource create window
.x-form-template-picker {
  .x-form-template-picker-search {
    padding: 0 !important;
  }

  .x-form-template-picker-templates {
    .x-form-radio-group {
      height: 194px;
      border-radius: $borderRadius;
      background-color: $coreFieldBg;
      border: 1px solid $borderColor;
      overflow: auto;
    }

    .x-form-template-picker-item,
    .x-form-template-picker-category {
      border-bottom: 1px solid $borderColor;

      &:last-child {
        border-bottom: 0;
      }

      .x-form-check-wrap {
        .x-form-cb-label {
          display: block;

          &:before {
            display: none;
          }
        }

        .x-form-radio {
          &:checked {
            + .x-form-cb-label {
              color: $borderColorFocus;
              background-color: $brandHover;
            }
          }
        }

        &:not(.x-item-disabled) {
          .x-form-cb-label {
            &:hover {
              color: $borderColorFocus;
              background-color: $brandHover;
            }
          }
        }
      }
    }

    .x-form-template-picker-item {
      padding: 0 !important;

      .x-form-cb-label {
        padding: 10px 14px;
      }
    }

    .x-form-template-picker-category {
      padding: 0 !important;

      .x-form-cb-label {
        padding: 10px 8px;
        font-weight: bold !important;
      }

      .x-item-disabled {
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
      }
    }
  }
}

// Shows a thumbnail of selected template
.x-form-template-preview {
  height: 236px;
  border-radius: $borderRadius;
  background-color: $coreFieldBg;
  border: 1px solid $borderColor;
  background: url('../images/tp-no-preview.png') no-repeat center center;
  overflow: hidden;

  .x-panel-bwrap,
  .x-panel-body {
    position: relative;
    height: 100%;
  }

  .x-form-template-preview-image {
    height: 100%;
    object-fit: cover;
  }

  .x-form-template-preview-desc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
  }
}