@charset "UTF-8";
@import "../../../../../../lib/craftcms-sass/mixins";

@mixin spinner {
  width: 24px;
  background: url(../images/spinner.gif) no-repeat 50% 50%;
}

@font-face {
  font-family: 'Craft';
  src: url('../fonts/Craft.woff') format('woff'),
  url('../fonts/Craft.ttf') format('truetype'),
  url('../fonts/Craft.svg#Craft') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ----------------------------------------
/*  Basic stuff
/* ----------------------------------------*/

body, html {
  background: $bgColor;
}

html.noscroll,
html.noscroll body {
  overflow: hidden;
}

body {
  font-size: 14px;
  line-height: 20px;
  color: $textColor;
  -webkit-font-smoothing: subpixel-antialiased;
}

body.rtl {
  direction: rtl;
}

body, input, select, textarea {
  @include sans-serif-font;
}

.first, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, blockquote:first-child, hr:first-child, .pane:first-child, .grid:first-child, .field:first-child, .toolbar:first-child, .buttons:first-child {
  margin-top: 0 !important;
}

.last, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, blockquote:last-child, .pane:last-child, .grid:last-child, .field:last-child, .toolbar:last-child, .buttons:last-child {
  margin-bottom: 0 !important;
}

.text,
table.editable textarea {
  body.rtl .ltr & {
    text-align: left !important;
    direction: ltr !important;
  }

  body.ltr .rtl & {
    text-align: right !important;
    direction: rtl !important;
  }
}

/* icons */
.icon:before,
.menu ul.padded li a.sel:before,
.texticon:before,
.element:before,
#help:before,
.secure:before,
.insecure:before,
.go:after,
.menubtn:after,
.required:after,
#preview-btn:before,
#share-btn:before,
.toggle:before,
a.fieldtoggle:before,
[data-icon]:before,
[data-icon-after]:after {
  @include icon;
}

.secure:before,
.insecure:before {
  margin-top: -3px;
  font-size: 14px;
}

[data-icon]:before {
  content: attr(data-icon);
}

[data-icon-after]:after {
  content: attr(data-icon-after);
}

body.rtl [data-icon=list]:before,
body.rtl [data-icon-after=list]:after {
  content: 'listrtl';
}

body.rtl [data-icon=structure]:before,
body.rtl [data-icon-after=structure]:after {
  content: 'structurertl';
}

.icon.secure:before {
  content: 'secure';
}

.icon.insecure:before {
  content: 'insecure';
}

.icon.add:before {
  content: 'plus';
}

.icon.edit:before {
  content: 'edit';
}

.icon.settings:before {
  content: 'settings';
}

.icon.search:before {
  content: 'search';
}

.icon.expand:before {
  content: 'expand';
}

.icon.collapse:before {
  content: 'collapse';
}

.help:before {
  content: 'help';
  color: #9d2dcc;
}

#preview-btn,
#share-btn {
  &:before {
    @include margin-right(7px);
  }
}

#preview-btn:before {
  margin-top: -2px;
  content: 'view';
}

#share-btn:before {
  body.ltr & {
    content: 'share';
  }
  body.rtl & {
    content: 'shareleft';
  }
}

/* nav */
.nav {
  display: block;
}

.nav ul li a {
  display: block;
  padding: 5px 0;
  color: #b3b3b3;
}

.nav ul li a:hover {
  color: $linkColor;
  text-decoration: none;
}

.nav ul li a .status {
  @include margin(0, 7px, 0, 6px);
}

.nav ul li a .badge {
  display: block;
  @include floatright;
  padding: 0 7px;
  border-radius: 9px;
  line-height: 18px;
  font-weight: bold;
}

.nav ul li a[data-icon]:before {
  margin: 0 8px 0 3px;
}

.nav ul li a.sel {
  color: #2c2c2c;
}

/* headings */
h1 {
  margin-bottom: 24px;
  font-weight: 300;
  font-size: 24px;
  line-height: 1;
}

h2 {
  margin: 14px 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
}

h3 {
  margin: 14px 0;
  font-weight: bold;
  line-height: 1.2;
}

h4 {
  margin: 14px 0;
  font-weight: bold;
  line-height: 1.2;
  color: $mediumTextColor;
}

h5 {
  margin: 14px 0 3px;
  line-height: 1.2;
  color: $mediumTextColor;
}

h6 {
  @include h6-styles;
}

h1[data-icon]:before {
  @include margin(-8px, 10px, 0, 0)
}

h2[data-icon]:before {
  @include margin(-4px, 6px, 0, 0);
  font-size: 19px;
}

/* horizontal rule */
hr {
  margin: 24px 0;
  border: none;
  border-top: 1px solid $hairlineColor;
  height: 0;
  color: transparent;
}

.pane hr {
  margin: 24px -24px;
}

/* paragraphs */
p {
  margin: 1em 0;
}

h5 + p {
  margin-top: 0;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

.indent {
  @include margin-left(14px);
}

/* lists */
.bullets {
  @include padding-left(40px);
  list-style-type: square;
}

ol {
  @include padding-left(40px);
  list-style-type: decimal;
}

/* code */
code,
.code,
.code input,
.code textarea {
  @include fixed-width-font;
}

/* links */
a {
  color: $linkColor;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

a.sel,
li.sel a {
  cursor: default !important;
  text-decoration: none;
}

.go:after {
  font-size: 11px;
  margin-top: -1px;
  @include padding-left(4px);
  color: $lightTextColor;
  body.ltr & {
    content: 'circlerarr';
  }
  body.rtl & {
    content: 'circlelarr';
  }
}

.go:hover:after {
  color: $linkColor;
}

/* revision button */
#revision-btngroup {
  @include margin-right(7px);
}
#revision-btn.disabled {
  opacity: 1;
  color: $mediumDarkTextColor;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* status icons */
.checkmark-icon,
.alert-icon {
  padding: 5px;
  margin-bottom: 0 !important;
  line-height: 10px;
  border-radius: 20px;
  cursor: pointer;

  &:before {
    @include icon;
  }
}

.checkmark-icon {
  background: darken($bgColor, 10%);

  &:before {
    content: 'check';
    color: $successColor;
  }
}

.alert-icon {
  background: darken($bgColor, 10%);

  &:before {
    content: 'alert';
    color: $errorColor;
  }
}

/* toggles */
.toggle,
a.fieldtoggle:before {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  body.ltr & {
    transform: rotate(-90deg);
  }
  body.rtl & {
    transform: rotate(90deg);
  }
  -webkit-transition: -webkit-transform linear 100ms;
  -moz-transition: -moz-transform linear 100ms;
  -ms-transition: -ms-transform linear 100ms;
  transition: transform linear 100ms;
}

.toggle:before,
a.fieldtoggle:before {
  content: 'downangle';
}

.toggle.expanded,
a.fieldtoggle.expanded:before,
.sidebar nav li.expanded > .toggle,
.structure li:not(.collapsed) > .row > .toggle {
  transform: rotate(0) !important;
}

a.fieldtoggle {
  display: block;
  position: relative;
  margin: 14px 0;
  @include padding-left(12px);
  color: $textColor;
  text-decoration: none;
}

a.fieldtoggle:before {
  display: block;
  position: absolute;
  top: -2px;
  @include left(-6px);
}

/* emphasis */
em, i {
  font-style: italic;
}

strong, b, i em {
  font-weight: bold;
}

/* readable blocks */
.readable {
  @include readable;
}

/* text styles */
.leftalign {
  @include alignleft;
}

.topalign {
  vertical-align: top;
}

.rightalign {
  @include alignright;
}

.centeralign {
  text-align: center !important;
}

.nowrap {
  white-space: nowrap;
}

.light {
  color: $mediumTextColor !important;
  font-weight: normal;
}

.extralight {
  color: $lightTextColor !important;
}

.smalltext {
  font-size: 12px;
}

input.checkbox + label.smalltext {
  padding-top: 2px;
}

.required:after {
  content: 'asterisk';
  @include margin(-2px, 0, 0, 7px);
  font-size: 7px;
  color: $errorColor;
}

.scrollpane {
  overflow: auto;
}

.left {
  @include floatleft;
}

.right {
  @include floatright;
}

th,
td {
  @include alignleft;
  vertical-align: middle;
}

body.ltr table[dir='rtl'] {
  th,
  td {
    text-align: right;
  }
}
body.rtl table[dir='ltr'] {
  th,
  td {
    text-align: left;
  }
}

th.right,
td.right {
  float: none;
  @include alignright;
}

.no-outline {
  outline: none;
}

.clear {
  display: block;
  clear: both;
  height: 0;
}

.fullwidth {
  width: 100%;
}

.token {
  @include token-styles;
}

.token[data-name='*'] {
  position: relative;
  width: 10px;
}

.token[data-name='*'] span {
  opacity: 0;
}

.token[data-name='*']:before {
  @include icon;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 9px;
  line-height: 17px;
  content: 'asterisk';
  text-indent: 0;
}

.token:focus {
  border-color: $mediumTextColor;
  background: #aaa;
  outline: none;
}

.success {
  color: $successColor !important;
}

.notice {
  color: $noticeColor !important;
}

.warning {
  color: $warningColor !important;
}

.error {
  color: $errorColor !important;
}

.icon.move {
  display: inline-block;
}

.icon.move:not(.disabled) {
  cursor: move;
}

.icon.move:before {
  content: 'move';
  color: rgba(0, 0, 0, 0.2);
}

.icon.move:not(.disabled):hover:before {
  color: $linkColor;
}

.icon.delete {
  display: inline-block;
}

.icon.delete:before {
  content: 'remove';
  color: rgba(0, 0, 0, 0.2);
}

.icon.delete:not(.disabled):hover:before {
  color: $red;
}

.icon.delete:not(.disabled):active:before {
  color: darken($red, 10%);
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

.clearafter:after {
  @include clearafter;
}

.info {
  vertical-align: bottom;
  display: inline-block;
  width: 1em;
  height: 1.375em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;

  &:before {
    @include icon;
    vertical-align: baseline;
    width: 100%;
    line-height: 1.375;
    color: $lightTextColor;
  }

  &:not(.warning) {
    &:before {
      content: 'info';
    }
    &:hover:before {
      color: $linkColor;
    }
  }

  &.warning {
    &:before {
      content: 'alert';
    }
    &:hover:before {
      color: $warningColor;
    }
  }
}

.info-hud {

  table {
    max-width: 280px;
    table-layout: auto;
  }

  td {
    word-wrap: break-word;
    width: 100%;
  }

}

@media (max-width: 450px) {

  .info-hud {

    table {
      table-layout: fixed;
      width: 100%;
    }

  }

}

/* ----------------------------------------
/*  Content
/* ----------------------------------------*/

.content {
  position: relative;
}

.content:after {
  @include clearafter;
}

/* Customize Sources */
.sidebar .customize-sources {
  color: rgba(0, 0, 0, 0.2);
}

.sidebar .customize-sources:hover {
  color: $linkColor;
}

.customize-sources-modal {
  @include padding-left(200px);
}

.customize-sources-modal > .spinner {
  position: absolute;
  top: calc(50% - 44px);
  left: calc(50% - 12px);
}

.customize-sources-modal > .cs-sidebar {
  position: absolute;
  top: 0;
  @include left(0);
  margin: 0;
  padding: 10px 0;
  border: none;
  width: 200px;
  height: calc(100% - 78px);
  background: $lightBgColor;
  overflow: auto;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.06);
}

.customize-sources-modal > .cs-sidebar > .btn {
  @include margin(10px, 0, 0, 14px);
}

.customize-sources-item {
  position: relative;
  margin-top: -1px;
  @include margin-right(1px);
  @include padding(10px, 14px, 10px, 40px);
  background: #fcfcfc;
  border: solid rgba(0, 0, 0, 0.06);
  border-width: 1px 0;
  user-select: none;
  cursor: default;
}

.customize-sources-item + .customize-sources-item:not(.heading) {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.customize-sources-item.sel {
  background: #ececec;
  z-index: 1;
}

.customize-sources-item .move {
  display: block;
  position: absolute;
  @include left(7px);
  top: 11px;
  width: 24px;
  text-align: center;
}

.customize-sources-item + .customize-sources-item.heading {
  margin-top: 10px;
}

.customize-sources-item.heading .label {
  text-transform: uppercase;
  color: $lightTextColor;
  font-size: 12px;
  font-weight: bold;
}

/*.matrix-configurator .mc-sidebar .items .btn { margin: 14px; }*/

.customize-sources-modal > .source-settings {
  position: relative;
  height: calc(100% - 106px);
  padding: 24px;
  overflow: auto;
}

.customize-sources-table-column .move {
  @include margin-right(10px);
}

.customize-sources-modal > .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* ----------------------------------------
/*  Icon lists
/* ----------------------------------------*/

ul.icons {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

ul.icons:after {
  @include clearafter;
}

ul.icons li {
  margin: 0 0 10px;
}

ul.icons li a {
  display: block;
  position: relative;
  padding: 60px 5px 10px;
  width: 110px;
  text-align: center;
  color: $textColor;
  border-radius: 4px;
  border: 1px solid #fff;
}

ul.icons li a img,
ul.icons li a svg {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 12px;
  left: calc(50% - 20px);
}

ul.icons li a:before {
  display: block;
  position: absolute;
  top: 0;
  @include left(0);
  width: 100%;
  font-size: 40px;
  line-height: 60px;
}

ul.icons li a:hover {
  text-decoration: none;
  background-color: #f9f9f9;
  border-color: #f2f2f2;
}

@media only screen and (max-width: 380px) {
  ul.icons li a {
    width: 96px;
  }
}

@media only screen and (max-width: 320px) {
  ul.icons li a {
    width: 75px;
  }
}

/* ----------------------------------------
/*  Buttons
/* ----------------------------------------*/

.toolbar {
  position: relative;
  margin-bottom: 21px;
  min-height: 32px;

  &.fixed {
    position: fixed;
    z-index: 1;
    top: 0;
    margin: 0 -1px;
    padding: 7px 1px 0;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  }

  .flex {
    align-items: flex-start;
  }
}

.flex {
  display: flex;
  align-items: center;
  align-content: stretch;

  &:not(.flex-nowrap) {
    flex-wrap: wrap;

    & > * {
      margin-bottom: 7px;
    }
  }

  & > * {
    &.label {
      white-space: nowrap;
    }

    &:not(:last-child) {
      @include margin-right(7px !important);
    }
  }
}

.flex-grow {
  flex: 1;
}

.flex-center {
  align-items: center;
}

.spacer {
  width: 14px;
}

.buttons {
  display: flex;
  position: relative;
  margin: 24px 0;

  & > .btn,
  & > .btngroup {
    &:not(.hidden) {
      & + .btn,
      & + .btngroup {
        @include margin-left(5px);
      }
    }
  }

  .footer > & {
    margin: 0;
  }
}

.btn {
  display: inline-block;
  border-radius: $btnBorderRadius;
  padding: 6px 12px;
  border: none;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px rgba(0, 0, 0, 0.025), 0 1px 1px rgba(0, 0, 0, 0.1);

  color: $textColor;

  &:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px $blue, 0 0 0 1px rgba(0, 0, 0, 0.025), 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  &:active,
  &.active {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.025), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0.5px 1px rgba(0, 0, 0, 0.15);
  }

  &:not(.submit) {
    color: $textColor;
    background-image: linear-gradient(#fff, hsl($hue, 5%, 98%));

    &:active,
    &.active {
      background-image: linear-gradient(hsl($hue, 5%, 90%), hsl($hue, 5%, 92%));
    }
  }

  &[type='color'] {
    padding: 6px !important;
    width: 36px;
  }

  &.active {
    cursor: default;
  }

  &:hover {
    text-decoration: none;
  }

  &:active {
    outline: none;
  }

  div.checkbox {
    margin-top: 4px;
  }
}

.disabled {
  opacity: 0.25;
}

.disabled,
.disabled .btn {
  cursor: default;
}

.btn,
.spinner {
  height: 32px;
}

.btn[data-icon]:not(:empty):before,
.btn.icon:not(:empty):before,
.btn.menubtn[data-icon]:empty:before,
.btn.menubtn.icon:empty:before {
  @include margin-right(5px);
}

.btn[data-icon-after]:not(:empty):after,
.menubtn:not(:empty):after,
.menubtn.icon:after {
  @include margin-left(6px);
}

.btn[data-icon]:before,
.btn[data-icon-after]:after,
.btn.icon:before,
.menubtn:after {
  position: relative;
}

.btn.small[data-icon]:before,
.btn.small[data-icon-after]:after,
.btn.icon.small:before,
.menubtn.small:after {
  font-size: 10px;
}

.btn.icon.add.loading {
  position: relative;
}

.btn.icon.add.loading:before {
  visibility: hidden;
}

.btn.icon.add.loading:after {
  position: absolute;
  content: '.';
  font-size: 0;
  display: block;
  width: 24px;
  height: 100%;
  left: 5px;
  top: 0;
  background: url(../images/spinner.gif) no-repeat 0 50%;
}

.btn.icon.add.loading.submit:after {
  background-image: url(../images/spinner_submit.gif);
}

.secondary-buttons .btn.icon.add.loading.submit:after,
.btn.secondary.icon.add.loading.submit:after {
  background-image: url(../images/spinner_submit_secondary.gif);
}

/* button groups */
.btngroup {
  position: relative;
  z-index: 1;
  display: flex;
  white-space: nowrap;
  align-items: center;

  &.fullwidth .btn {
    flex: 1;
  }

  &.disabled .btn {
    cursor: default;
  }

  .btn {
    &.active {
      cursor: default;
    }

    &:not(:last-child) {
      @include margin-right(1px);
    }

    body.ltr & {
      &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    body.rtl & {
      &:not(:first-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:not(:last-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}

/* menu buttons */
.menubtn {
  user-select: none;

  &:after {
    content: 'downangle';
  }

  &:empty {
    @include padding-left(8px);
    @include padding-right(8px);
  }
}

/* spinner */
.spinner {
  display: inline-block;
  vertical-align: bottom;
  @include spinner;
}

.spinner.big {
  width: 48px;
  height: 48px;
  background: url(../images/spinner_big.gif) no-repeat 50% 50%;
}

.btn + .spinner {
  @include margin-left(7px);
}

.buttons .spinner {
  display: block;
  @include floatleft;
}

.buttons .btn + .spinner,
.buttons .btngroup + .spinner {
  @include margin-left(0);
}

.buttons.right .btn + .spinner {
  @include margin-right(-24px);
}

/* small buttons */
.btngroup.small .btn,
.btn.small {
  padding: 0 7px !important;
  font-size: 12px;
  line-height: 22px;
}

.btngroup.small,
.btngroup.small input.btn,
.btn.small,
.btn.small + .spinner {
  height: 22px;
}

/* big buttons */
.btngroup.big .btn,
.btn.big {
  padding: 0 14px;
  font-size: 14px;
  line-height: 36px;
}

.btn.big[data-icon]:before,
#preview-btn:before,
#share-btn:before {
  @include margin-left(-2px);
}

.btngroup.big,
.btngroup.big input.btn,
.btn.big,
.btn.big + .spinner {
  height: 36px;
}

/* submit buttons */
.btn.submit,
.btn.secondary {
  color: #fff;
  @include light-on-dark-text;
}

.btn.submit {
  background-image: linear-gradient($submitColor, #cc5643);
}

.btn.submit:not(.disabled):not(.inactive):hover,
.btn.submit:not(.disabled):not(.inactive).hover {
  background-image: linear-gradient($submitHoverColor, #b34b3b);
}

.btn.submit:not(.disabled):not(.inactive):active,
.btn.submit:not(.disabled):not(.inactive).active {
  background-image: linear-gradient($submitActiveColor, #994032);
}

.secondary-buttons .btn.submit,
.btn.secondary {
  background-image: linear-gradient($secondarySubmitColor, #878f99);
}

.secondary-buttons .btn.submit:not(.disabled):not(.inactive):hover,
.secondary-buttons .btn.submit:not(.disabled):not(.inactive).hover,
.btn.secondary:not(.disabled):not(.inactive):hover,
.btn.secondary:not(.disabled):not(.inactive).hover {
  background-image: linear-gradient($secondarySubmitHoverColor, #697480);
}

.secondary-buttons .btn.submit:not(.disabled):not(.inactive):active,
.secondary-buttons .btn.submit:not(.disabled):not(.inactive).active,
.btn.secondary:not(.disabled):not(.inactive):active,
.btn.secondary:not(.disabled):not(.inactive).active {
  background-image: linear-gradient($secondarySubmitActiveColor, #697380);
}

div.btn.submit {
  position: relative;
  overflow: hidden;
}

div.btn.submit input {
  position: absolute;
  left: 100%;
}

/* dashed buttons */
.btn.dashed {
  border: 1px dashed rgba(0, 0, 0, 0.2) !important;
  background: none !important;
  box-shadow: none !important;
}

.btn.dashed:not(.disabled):active,
.btn.dashed:not(.disabled).active {
  background-color: hsla($hue, 10%, 50%, 0.1) !important;
}

/* color inputs */
.color-input {
  @include fixed-width-font;
}

.color {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  padding: 0;
  background: url(../images/checkers.png);

  &:not(.static) {
    cursor: pointer;

    &:not(.disabled) {
      &:hover,
      &:active,
      &.active {
        .color-preview {
          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.05);
        }
      }

      &:active,
      &.active {
        .color-preview {
          background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
        }
      }
    }
  }

  &.small {
    width: 15px;
    height: 15px;
    background-size: 16px;
  }

  .color-preview {
    top: 0;
    @include left(0);
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(0, 0, 0, 0.05);
  }
}

.colorhex {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  color: $mediumTextColor;
}

/* lightswitch */
.lightswitch {
  position: relative;
  border: none !important;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: box-shadow linear 100ms;

  &:not(.small) {
    border-radius: 11px;
    width: 33px;
    height: 22px;

    .lightswitch-container {
      @include margin-left(-11px);
      width: 44px;
    }

    .label {
      width: 22px;
      height: 22px;

      &.on {
        @include border-radius(11px, 0, 0, 11px);
      }
      &.off {
        @include border-radius(0, 11px, 11px, 0);
      }
    }

    .handle {
      border-radius: 10px;
      margin: 1px -10px;
      width: 20px;
      height: 20px;
    }
  }

  &.small {
    border-radius: 9px;
    width: 27px;
    height: 18px;

    .lightswitch-container {
      @include margin-left(-9px);
      width: 36px;
    }

    .label {
      width: 18px;
      height: 18px;

      &.on {
        @include border-radius(9px, 0, 0, 9px);
      }
      &.off {
        @include border-radius(0, 9px, 9px, 0);
      }
    }

    .handle {
      border-radius: 8px;
      margin: 1px -8px;
      width: 16px;
      height: 16px;
    }
  }

  table & {
    display: inline-block;
    margin-bottom: -5px;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 1px hsla(205, 100%, 60%, 0.5), 0 0 2px hsl(205, 100%, 60%);
  }

  &.on {
    .lightswitch-container {
      @include margin-left(0);
    }
  }

  .label {
    @include floatleft;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }

  .label.on,
  &:not(.dragging).on .label.off {
    background: $successColor;
  }

  .label.off,
  &:not(.dragging):not(.on) .label.on {
    background: hsl($hue, 10%, 65%);
  }

  .handle {
    position: relative;
    @include floatleft;
    background-image: linear-gradient(#fff, hsl($hue, 5%, 98%));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
}

/* pagination */
.pagination {
  table.data + & {
    margin-top: 24px;
  }

  .page-link {
    padding: 4px 13px 8px;
    border-radius: $btnBorderRadius;
    color: $textColor;

    &:before {
      font-size: 1.2em;
    }

    &:not(.disabled) {
      transition: box-shadow linear 100ms;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
      cursor: pointer;

      &:hover {
        text-decoration: none;
        box-shadow: inset 0 0 0 1px $linkColor;
      }
    }

    &.disabled {
      opacity: 1;
      background: $bgColor;
      font-weight: bold;
      color: $lightTextColor;
    }
  }
}

/* action buttons */
.actions {
  @include floatright;
}

.actions > li {
  @include floatleft;
}

.actions > li + li {
  @include margin-left(10px);
}

h1 + .actions {
  margin-top: -100px;
}

h2 + .actions {
  margin-top: -54px;
}

/* ----------------------------------------
/*  Tables
/* ----------------------------------------*/

table thead th {
  font-weight: bold;
  @include alignleft;
  vertical-align: top;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.5);
}

table thead th.ordered {
  @include padding-right(26px);
  background: #f2f2f2 url(../images/listview_sort.png) no-repeat;
  body.ltr & {
    background-position: 100% -3px;
  }
  body.rtl & {
    background-position: 0 -3px;
  }
}

table thead th.ordered.desc {
  body.ltr & {
    background-position: 100% -34px;
  }
  body.rtl & {
    background-position: 0 -34px;
  }
}

table thead th.ordered:first-child {
  @include padding-left(10px);
}

table thead th.ordered.loading {
  background-image: url(../images/spinner_tableheader.gif);
  body.ltr & {
    background-position: 100% 4px;
  }
  body.rtl & {
    background-position: 0 4px;
  }
}

table thead th.orderable:hover {
  background-color: #f9f9f9;
}

th.thin,
td.thin {
  width: 0.01% !important;
}

/* data */
body.ltr table.data:not([dir='rtl']),
body.rtl table.data[dir='ltr'] {
  th:not(:first-child),
  td:not(:first-child) {
    padding-left: 14px;
  }
}
body.rtl table.data:not([dir='ltr']),
body.ltr table.data[dir='rtl'] {
  th:not(:first-child),
  td:not(:first-child) {
    padding-right: 14px;
  }
}

table.data thead th,
table.data thead td {
  padding-top: 4px;
  padding-bottom: 4px;
  width: auto;
  cursor: default;
}

table.data tbody th,
table.data tbody td {
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom: 1px dotted $hairlineColor;
}

table.data tbody tr:first-child th,
table.data tbody tr:first-child td {
  border-top: 1px dotted $hairlineColor;
}

table.data thead + tbody tr:first-child th,
table.data thead + tbody tr:first-child td {
  border-top-style: solid;
}

table.data th {
  font-weight: bold;
}

table.data thead th {
  white-space: nowrap;
}

table.data td.timestamp {
  @include alignright;
  vertical-align: bottom;
  white-space: nowrap;
  color: $lightTextColor;
}

table.fixed-layout {
  table-layout: fixed;
}

/* collapsable data tables for small screens
   based on Aaron Gustafson's technique: http://blog.easy-designs.net/archives/2013/02/02/responsive-tables/ */
table.collapsed {
  width: auto;
}

table.collapsed,
table.collapsed tbody,
table.collapsed tbody tr,
table.collapsed tbody th,
table.collapsed tbody td {
  display: block;
  border: none;
  padding: 0;
  @include alignleft;
  width: auto !important;
  white-space: normal;
}

table.collapsed tbody th,
table.collapsed tbody td {
  padding: 2px 0 !important;
}

table.collapsed thead {
  display: none;
}

table.collapsed tbody tr {
  padding: 6px 0;
  border-bottom: 1px dotted $hairlineColor;
}

table.collapsed tbody [data-title] {
  @include margin-right(0);
}

table.collapsed tbody [data-title]:before {
  margin-right: 5px;
  content: attr(data-title) ":";
  font-weight: bold;
}

table.collapsed tbody td:empty {
  display: none;
}

table.collapsed tbody tr:after {
  @include clearafter;
}

table.collapsed tbody td[data-title] form {
  display: inline-block;
}

table.collapsed thead + tbody tr:first-child th,
table.collapsed thead + tbody tr:first-child td {
  border-top: none;
}

table.collapsed tbody tr:last-child th:not(:last-child),
table.collapsed tbody tr:last-child td:not(:last-child) {
  border-bottom: none;
}

.datatablesorthelper,
.editabletablesorthelper,
.thumbviewhelper {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 5px -1px rgba(0, 0, 0, 0.1);
}

.datatablesorthelper {
  margin: 0 -7px;
  padding: 0 7px;
}

.datatablesorthelper,
.datatablesorthelper .element,
.datatablesorthelper a {
  cursor: move !important;
}

.datatablesorthelper tr:first-child th,
.datatablesorthelper tr:first-child td {
  border-top: none !important;
}

.datatablesorthelper tr:last-child th,
.datatablesorthelper tr:last-child td {
  border-bottom: none !important;
}

.datatablesorthelper .tableview .toggle {
  body.ltr & {
    transform: rotate(-90deg) !important;
  }
  body.rtl & {
    transform: rotate(90deg) !important;
  }
}

/* elements */
$baseElementSidePadding: 7px;
$elementInnerSpacing: 10;
$elementStatusPadding: 8 + $elementInnerSpacing;
$elementThumbPadding: 30 + $elementInnerSpacing;

.element {
  position: relative;
  cursor: default;
  outline: none !important;
  user-select: none;

  &.sel,
  li.sel & {
    border-radius: $elementBorderRadius;
    background: $lightSelColor;
    cursor: default;

    &.hasthumb .elementthumb:after {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: '.';
      font-size: 0;
      background: rgba(35, 51, 76, 0.19);
    }

    &.loading:after {
      background-image: url(../images/spinner_element.gif);
    }
  }

  &.hasthumb .elementthumb img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    background: url(../images/checkers.svg) 0 0;
    flex-shrink: 0;
    pointer-events: none;
  }

  .label {
    display: inline-block;
  }

  &.small,
  &.large:not(.hasthumb) {
    display: inline-block;
    padding: 6px $baseElementSidePadding;
    &.hasstatus {
      .status {
        position: absolute;
        @include left($baseElementSidePadding);
        top: calc(50% - 4px);
      }
    }
    &.hasstatus:not(.hasthumb) {
      @include padding-left($baseElementSidePadding + $elementStatusPadding);
    }
    &.hasthumb {
      .elementthumb {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: calc(50% - 15px);
        width: 30px;
        height: 30px;
      }
      &:not(.hasstatus) {
        @include padding-left($baseElementSidePadding + $elementThumbPadding);
        .elementthumb {
          @include left($baseElementSidePadding);
        }
      }
      &.hasstatus {
        @include padding-left($baseElementSidePadding + $elementStatusPadding + $elementThumbPadding);
        .elementthumb {
          @include left($baseElementSidePadding + $elementStatusPadding);
        }
      }
    }
  }

  &.large.hasthumb {
    display: block;
    padding: 105px 0 5px;
    width: 100px;
    box-sizing: border-box;

    &.hasstatus {
      @include padding-left($elementStatusPadding + px);
      .status {
        position: absolute;
        @include left(0);
        top: 110px;
      }
    }

    .elementthumb {
      position: absolute;
      top: 0;
      @include left(0);
      border-radius: $elementBorderRadius;
      overflow: hidden;
      background: #fff;
      display: flex;
      justify-content: center;
      -ms-flex-pack: center;
      align-items: center;
      -ms-flex-align: center;
      width: 100px;
      height: 100px;
    }

    .label {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: normal;
    }
  }

  &.removable {
    .label {
      @include padding-right(20px);
    }

    .delete:before {
      color: rgba(0, 0, 0, 0.2);
    }

    &.small,
    &.large:not(.hasthumb) {
      .delete {
        position: absolute;
        @include right(7px);
      }
    }

    &.large.hasthumb {
      .delete {
        position: absolute;
        @include right(0);
      }
    }
  }

  &.loading {
    @include padding-right($baseElementSidePadding + 24);

    &:after {
      content: '.';
      font-size: 0;
      position: absolute;
      bottom: 0;
      @include right(3px);
      @include spinner;
      height: 32px;
    }

    &.removable .delete {
      display: none;
    }
  }
}

$checkboxPadding: 20px;

.elements {
  // table views
  .tableview {
    tr {
      outline: none;

      &.sel {
        td {
          &:not(.checkbox-cell) {
            background: $lightSelColor;
          }
        }
      }
    }

    th,
    td {
      padding-top: 5px;
      padding-bottom: 5px;
    }

    td {
      position: relative;

      &.checkbox-cell {
        @include padding-right(7px);
        width: 12px !important;
        position: relative;

        input.checkbox + label,
        div.checkbox {
          position: absolute;
          top: calc(50% - 6px);
        }

        & + td,
        & + th {
          @include padding-left(7px);
        }
      }
    }

    .move {
      display: block;
      position: absolute;
      top: calc(50% - 9px);
      @include margin-left(-14px);
      font-size: 11px;
      text-decoration: none;
    }

    .toggle {
      display: block;
      position: absolute;
      top: 13px;
      @include margin-left(-20px);
    }

    .move + .toggle {
      @include margin-left(-34px);
    }
  }

  // thumbs views
  .thumbsview {
    @include margin(-14px, 0, 0, -14px);

    li {
      position: relative;
      @include floatleft;
      @include margin(14px, 0, 0, 14px);
      outline: none;

      &.has-checkbox {
        .checkbox {
          position: absolute;
          top: 108px;
          @include left(4px);
        }

        .element.large.hasthumb {
          &:not(.hasstatus) {
            @include padding-left($checkboxPadding);
          }
          &.hasstatus {
            @include padding-left($checkboxPadding + $elementStatusPadding);

            .status {
              @include left($checkboxPadding);
            }
          }
        }
      }
    }
  }
}

.export-form {
  position: relative;
  .spinner {
    position: absolute;
    bottom: 0;
    @include right(-24px);
  }
}

.thumbviewhelper {
  margin: -7px;
  padding: 7px;

  .thumbsview {
    &,
    li {
      margin: 0 !important;
    }
  }
}

/* structures */
.structure {
  position: relative;
  z-index: 1;

  li {
    @include padding-left(8px);

    &.collapsed > ul {
      display: none;
    }

    .row:hover > .icon,
    &.draghelper > .row .move,
    .add.active {
      opacity: 1;
    }

    &.draghelper {
      & > .row {
        .add {
          opacity: 0;
        }

        .move:before {
          color: $linkColor;
        }
      }
    }

    &.draginsertion {
      position: relative;
      @include margin(-1px, 0, -1px, 8px);
      @include padding-left(0);
      height: 2px;
      background: $linkColor !important;
      @include border-left(none);
      border-radius: 1px;
    }

    .toggle {
      position: relative;
      z-index: 1;
      @include floatleft;
      @include margin(4px, -8px, 0, -12px);
    }

    .row:after {
      @include clearafter;
    }

    .move,
    .add {
      @include margin(5px, 5px, 0, 0);
      opacity: 0;
      transition: opacity linear 100ms;
    }

    .add {
      padding: 0 5px;

      &:before {
        content: 'downangle';
        color: rgba(0, 0, 0, 0.2);
      }

      &:not(.disabled):hover:before,
      &.active:before {
        color: $linkColor;
      }
    }

    .checkbox {
      @include floatleft;
      @include margin(7px, 0, 0, 7px);
    }
  }

  ul {
    @include margin-left(-3px);

    li {
      @include padding-left(38px);
      background-repeat: no-repeat;

      body.ltr & {
        background-image: url(../images/branch.png);
        background-position: 0 0;
      }

      body.rtl & {
        background-image: url(../images/branch_rtl.png);
        background-position: 100% 0;
      }

      &:not(:last-child):not(.last) {
        @include padding-left(37px);
        @include border-left(1px solid $hairlineColor);

        body.ltr & {
          background-position: -1px 0;
        }

        body.rtl & {
          background-position: calc(100% + 1px) 0;
        }
      }

      &.draginsertion {
        @include margin-left(38px);
      }
    }
  }

  .row {
    &.draghover {
      .element {
        z-index: 2;
        border-radius: 15px;
        box-shadow: inset 0 0 0 2px $linkColor;
      }
    }

    &.droptarget {
      border-radius: 5px;
      box-shadow: inset 0 0 0 2px $linkColor;
    }
  }
}

/* element select fields */
.elementselect {
  position: relative;
  min-height: 37px;
  margin-top: -7px;

  &:after {
    @include clearafter;
  }

  .element,
  .btn {
    @include floatleft;
    @include margin(7px, 7px, 0, 0);
  }

  .element.small,
  .btn {
    clear: both;
  }

  .element {
    z-index: 1;
  }

  .caboose {
    @include floatleft;
  }
}

/* editable tables */
table.editable {
  th,
  td.action {
    color: $mediumTextColor;
    font-weight: normal;
    background: $bgColor;
  }

  thead,
  tbody {
    tr {
      th {
        padding: 6px 10px;
        white-space: nowrap;
      }
    }
  }

  thead {
    tr {
      th {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);

        span.info {
          position: absolute;
          margin-left: 5px;
        }
      }
    }
  }

  tbody {
    tr {
      &:not(:first-child) {
        th,
        td {
          border-top: 1px solid rgba(0, 0, 0, 0.07);
        }
      }

      &:last-child {
        td:first-child {
          @include border-bottom-left-radius($paneBorderRadius);

          textarea,
          input.text {
            @include border-bottom-left-radius($paneBorderRadius - 1);
          }
        }
      }

      td:not(:first-child),
      th ~ td:not(.hidden) ~ td {
        @include border-left(1px solid rgba(0, 0, 0, 0.07));
      }

      th {
        // Set a dark border-left for the first <td> that follows a <th>, if there is one.
        // This is a ridiculous CSS hack since there's no operator/pseudo-class that mimics jQuery's next(selector) function.
        // If there was it could have been as simple as: th ??? td:not(.hidden) { dark left border }
        // kudos to Mark Huot for coming up with it!
        & ~ td:not(:first-child) {
          @include border-left(1px solid #dbdddf);
        }
      }

      td {
        vertical-align: middle;
        text-align: center;
        background: #fff;

        &.textual {
          vertical-align: top;

          textarea {
            resize: none;
          }
        }

        &:not(.textual) {
          padding: 4px 10px;
        }

        &.error {
          box-shadow: inset 0 0 0 1px $errorColor;
        }

        &.disabled {
          position: relative;
          opacity: 1;

          &:after {
            content: '.';
            font-size: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: hsla($hue, 10%, 96%, 0.75);
            user-select: none;
          }
        }

        &.action {
          padding: 4px 7px;

          & + td.action {
            @include border-left(none);
            @include padding-left(0);
          }
        }

        .flex > * {
          margin-bottom: 0;
        }
      }
    }

    textarea,
    textarea.text,
    input.text {
      display: block;
      width: 100%;
      border: none;
      border-radius: 0;
      padding: 7px 10px;
      background: transparent;
      overflow: hidden;
      transition: none;

      &:focus {
        border: 1px solid rgba(0, 0, 0, 0.15);
        padding: 6px 9px;
        outline: none;
      }
    }

    .color-container {
      display: block;
      position: relative;

      & > .color,
      & > .color-input {
        margin-bottom: 0;
      }

      & > .color {
        position: absolute;
        top: calc(50% - 8px);
        @include left(10px);
      }

      & > .color-input {
        @include padding-left(35px);

        &:focus {
          @include padding-left(34px);
        }
      }
    }

    .datewrapper,
    .timewrapper {
      width: 100%;

      .text:placeholder-shown + div[data-icon] {
        @include left(10px);
      }
    }
  }

  & + .btn.add {
    display: block;
    border-radius: 0 0 $btnBorderRadius $btnBorderRadius;
    border: 1px dashed $darkHairlineColorAlpha;
    border-top-width: 0;
    background: none;
    box-shadow: none;

    &:focus {
      border-style: solid;
      border-color: $blue;
    }
  }
}

.border-box,
.shadow-box {
  & + .buttons {
    margin-top: 7px;
  }
}

/* ----------------------------------------
/*  Nav
/* ----------------------------------------*/

ul.tree,
.tree ul {
  @include margin-left(20px);
}

.tree li .toggle {
  @include margin(7px, 0, 0, -15px);
}

/* status icons */
.status {
  display: inline-block;
  @include margin-right(10px);
  width: 8px;
  height: 8px;
  border-radius: 100%;
  border: 1px solid transparent;
}

.status:not(.on):not(.live):not(.active):not(.enabled):not(.pending):not(.off):not(.suspended):not(.expired):not(.yellow):not(.orange):not(.red):not(.pink):not(.purple):not(.blue):not(.green):not(.turquoise):not(.light):not(.grey):not(.black) {
  border-color: rgba(0, 0, 0, 0.40);
}

.status.green,
.status.on,
.status.live,
.status.active,
.status.enabled {
  background-color: $green;
}

/* green */

.status.orange,
.status.pending {
  background-color: $orange;
}

/* orange */

.status.red,
.status.off,
.status.suspended,
.status.expired {
  background-color: $red;
}

/* red */

.status.yellow {
  background-color: $yellow;
}

.status.pink {
  background-color: $pink;
}

.status.purple {
  background-color: $purple;
}

.status.blue {
  background-color: $blue;
}

.status.turquoise {
  background-color: $turquoise;
}

.status.light {
  background-color: $light;
}

.status.grey {
  background-color: $grey;
}

.status.black {
  background-color: $black;
}

.status.white,
.status.disabled {
  opacity: 1;
}

/* ----------------------------------------
/*  Progress bar
/* ----------------------------------------*/

.progressbar {
  border-radius: 6px;
  border: 2px solid $textColor;
  padding: 2px;
  position: absolute;
  left: 20%;
  width: 60%;
}

.progressbar-inner {
  border-radius: 2px;
  height: 4px;
  background: $textColor;
}

.progressbar:not(.pending) .progressbar-inner {
  width: 0;
  transition: width linear 100ms;
}

.progressbar.pending .progressbar-inner {
  background: url(../images/progressbar_pending.png) repeat-x;
  body.ltr & {
    animation-name: pendingprogress-ltr;
  }
  body.rtl & {
    animation-name: pendingprogress-rtl;
  }
  animation-timing-function: linear;
  animation-duration: 250ms;
  animation-iteration-count: infinite;
}

@-webkit-keyframes pendingprogress-ltr {
  0% {
    background-position: 0;
  }
  100% {
    background-position: -50px;
  }
}

@-moz-keyframes pendingprogress-ltr {
  from {
    background-position: 0;
  }
  to {
    background-position: -50px;
  }
}

@keyframes pendingprogress-ltr {
  from {
    background-position: 0;
  }
  to {
    background-position: -50px;
  }
}

@-webkit-keyframes pendingprogress-rtl {
  0% {
    background-position: -50px;
  }
  100% {
    background-position: 0;
  }
}

@-moz-keyframes pendingprogress-rtl {
  from {
    background-position: -50px;
  }
  to {
    background-position: 0;
  }
}

@keyframes pendingprogress-rtl {
  from {
    background-position: -50px;
  }
  to {
    background-position: 0;
  }
}

.elementselect .progress-shade {
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  @include left(0);
  display: none;
}

.elementselect.uploading {
  position: relative;
}

.elementselect.uploading .progress-shade {
  display: block;
  z-index: 2;
}

// Plugin installers

.missing-component {
  padding: 7px 10px !important;
  max-width: 400px;
  background: $lightBgColor !important;

  .error {
    margin: 0;
  }

  .install-plugin {
    margin: 7px 0 -7px;
    border-top: 1px solid $hairlineColor;
    position: relative;
    @include padding(10px, 0, 10px, 40px);

    .icon {
      width: 32px;
      height: 32px;
      position: absolute;
      top: calc(50% - 16px);
      @include left(0);

      img, svg {
        width: 100%;
        height: 100%;
      }
    }

    h3 {
      flex: 1;
      margin: 8px 0 !important;
    }

    .btn {
      margin: 0;
    }
  }
}

/* ----------------------------------------
/*  Panes, Modals and HUDs
/* ----------------------------------------*/

.pane {
  @include pane;
  position: relative;
  margin: 14px 0;
  padding: 24px;
  border-radius: $paneBorderRadius;
  word-wrap: break-word;
  box-sizing: border-box;

  .pane {
    background: $lightBgColor;
  }
}

/* meta panes */
.meta {
  padding: 0;
  overflow: visible;

  & > .field,
  & > .data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 24px;

    & > .heading {
      flex: 0 0 105px;
      margin-bottom: 0;
      line-height: 18px;
    }

    &.lightswitch-field > .heading {
      flex: 1;
    }

    & > .input {
      .flex {
        flex-wrap: nowrap;

        & > * {
          margin-bottom: 0;
        }
      }
    }
  }

  & > .field > .heading {
    padding: 14px 0;
  }

  & > .data > .heading {
    padding: 8px 0;
  }

  & > .field > .heading > label,
  & > .data > .heading {
    color: $mediumTextColor;
  }

  & > .field > .input,
  & > .data > .value {
    padding: 8px 0;
    width: calc(100% - 112px);
  }

  & > .field.lightswitch-field > .input {
    width: auto;
  }

  & > .field {
    box-shadow: 0 0 2px hsla(205, 100%, 60%, 0), inset 0 0 0 1px hsla(205, 100%, 60%, 0);
    transition: box-shadow linear 100ms;

    &.has-focus {
      z-index: 1;
      box-shadow: 0 0 5px hsl(205, 100%, 60%);
    }

    &.has-errors {
      margin: 0 -1px !important;
      border: 1px solid $errorColor !important;

      & + .field {
        border-top: none !important;
      }
    }

    & + .field {
      border-top: 1px solid $hairlineColorAlpha;

      &.has-focus {
        border-top: none;
        margin-top: 1px !important;
      }
    }

    & > .heading {
      & > label {
        font-weight: normal;

        &.required:after {
          position: absolute;
          top: 6px;
          @include left(-13px);
          @include margin-left(0);
        }
      }
    }

    & > .input {
      &,
      & > .flex,
      & > .flex > .textwrapper,
      & > .datewrapper,
      & > .timewrapper,
      & > .datetimewrapper > .datewrapper,
      & > .datetimewrapper > .timewrapper {
        & > .text {
          display: block;
          margin: -8px 0;
          padding: 14px 0;
          border-radius: 0;
          box-shadow: none;
          border: none !important;
        }
      }

      & > .datewrapper,
      & > .timewrapper,
      & > .datetimewrapper > .datewrapper,
      & > .datetimewrapper > .timewrapper {
        background: transparent;
        .text:placeholder-shown + div[data-icon] {
          @include left(0);
        }
      }

      & > .datetimewrapper > .datewrapper,
      & > .datetimewrapper > .timewrapper {
        @include floatleft;
      }

      & > .datetimewrapper > .datewrapper {
        width: 55%;
      }

      & > .datetimewrapper > .timewrapper {
        width: 45%;
      }

      & > .datewrapper,
      & > .timewrapper {
        display: block;
        width: 100%;
      }
    }

    & > ul.errors {
      margin: 0;
      padding: 0 0 6px;
      width: 100%;
      list-style-type: none;
    }
  }
}

.meta > .field > .input .select {
  display: block;
  margin: -8px 0;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  background: none;

  &:after {
    @include right(0);
  }

  & + .spinner {
    position: absolute;
    top: calc(50% - 17px);
    @include right(-24px);
  }

  select {
    @include padding(8px, 12px, 8px, 0);
    width: 100%;
    box-shadow: none;
  }
}

.body {
  position: relative;
}

.modal,
.hud {
  z-index: 100;
  box-sizing: border-box;
}

.modal,
.hud .body {
  border-radius: $paneBorderRadius;
  background: #fff;
  box-shadow: 0 25px 100px rgba(0, 0, 0, 0.5);
}

.header,
.hud-header,
.footer,
.hud-footer,
.body {
  &:after {
    @include clearafter;
  }
}

.header,
.hud-header,
.footer,
.hud-footer {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.header,
.hud-header {
  border-radius: $paneBorderRadius $paneBorderRadius 0 0;
  padding: 24px;
  background-image: linear-gradient(#fff, hsl($hue, 8%, 98%));
  box-shadow: 0 2px 1px -2px rgba(0, 0, 0, 0.2);

  h1 {
    margin: 0;
  }
}

.footer,
.hud-footer {
  border-radius: 0 0 $paneBorderRadius $paneBorderRadius;
  padding: 14px 24px;
  background-image: linear-gradient(hsl($hue, 8%, 93%), hsl($hue, 8%, 92%));
  box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.2);

  &.flex {
    & > * {
      margin-bottom: 0;
    }
  }
}

.modal .body,
.hud .main {
  padding: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.pane,
.modal .body {
  .header {
    margin: -24px -24px 24px;
  }

  .footer {
    margin: 24px -24px -24px;
  }
}

.modal-shade,
.hud-shade {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.modal-shade {
  &:not(.dark) {
    background: rgba(255, 255, 255, 0.75) !important;
  }

  &.dark {
    background: rgba(0, 0, 0, 0.75) !important;
  }
}

.modal {
  position: fixed;
  width: 66%;
  height: 66%;
  min-width: 600px;
  min-height: 400px;
  overflow: hidden;

  &.fitted {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
  }

  &.alert .body {
    @include padding-left(76px);

    &:before {
      @include icon;
      @include margin(-6px, 0, 0, -58px);
      @include floatleft;
      content: 'alert';
      font-size: 40px;
      color: $lightTextColor;
    }
  }

  &.secure .body {
    @include padding-left(76px);

    &:before {
      @include icon;
      @include margin(-14px, 0, 0, -56px);
      @include floatleft;
      content: 'secure';
      font-size: 58px;
      color: $lightTextColor;
    }
  }

  .resizehandle {
    position: absolute;
    z-index: 1;
    bottom: 0;
    @include right(0);
    width: 24px;
    height: 24px;
    background: no-repeat 50% 50%;
    cursor: nwse-resize;
    body.ltr & {
      background-image: url(../images/resizehandle.png);
    }
    body.rtl & {
      background-image: url(../images/resizehandle_rtl.png);
    }
  }
}

.hud {
  position: absolute;
  display: none;
  top: 0;

  &.has-footer .tip-bottom {
    background-image: url(../images/hudtip_bottom_gray.png);
  }

  .tip {
    position: absolute;
    z-index: 101;
    background: no-repeat 0 0;
  }

  .tip-left {
    left: -15px;
    width: 15px;
    height: 30px;
    background-image: url(../images/hudtip_left.png);
  }

  .tip-top {
    top: -15px;
    width: 30px;
    height: 15px;
    background-image: url(../images/hudtip_top.png);
  }

  .tip-right {
    right: -15px;
    width: 15px;
    height: 30px;
    background-image: url(../images/hudtip_right.png);
  }

  .tip-bottom {
    bottom: -15px;
    width: 30px;
    height: 15px;
    background-image: url(../images/hudtip_bottom.png);
  }
}

.hud .hud-header,
.hud .hud-footer {
  padding: 7px 24px;
}

.hud .body {
  overflow: hidden;

  ::-webkit-scrollbar {
    appearance: none;

    &:vertical {
      width: 11px;
    }

    &:horizontal {
      height: 11px;
    }
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid transparent;
    background-color: rgba(0, 0, 0, .5);
    background-clip: content-box;
  }

  ::-webkit-scrollbar-track {
    background-color: $lightBgColor;
  }
}

/* element editor HUDs */

@media (min-width: 440px) {
  .hud .elementeditor {
    min-width: 380px;
  }
}

.hud .elementeditor {
  max-width: 600px;

  .hud-header {
    text-align: center;
  }

  .main {
    padding: 8px 0;

    .meta {
      .image-preview-container {
        position: relative;
        margin: -8px 0 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 190px;
        background: #222;

        .image-preview {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;

          img {
            display: block;
            max-width: 100%;
            max-height: 190px;
          }
        }

        &.editable {
          cursor: pointer;

          .btn {
            opacity: 0;
            position: absolute;
            top: 10px;
            @include right(10px);
            background: rgba(34, 34, 34, 0.9);
            color: #fff;
            border: 1px solid rgba(153, 153, 153, 0.9);
            background-clip: padding-box;
            box-shadow: none;
            transition: opacity linear 100ms;
          }

          &:hover .btn {
            opacity: 1;
          }
        }
      }

      .field {
        padding-left: 24px;
        padding-right: 24px;
      }
    }
  }
}

/* element selector modals */
.elementselectormodal {
  padding-bottom: 58px;
  user-select: none;

  .body {
    position: relative;
    height: 100%;

    .spinner.big {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -24px 0 0 -24px;
    }

    .content {
      height: calc(100% + 48px);

      .sidebar {
        position: absolute;
        top: 0;
        @include margin-left(-242px);
        height: 100%;
        overflow: auto;
      }

      .main {
        margin: -24px;
        padding: 24px;
        height: calc(100% - 48px);
        overflow: auto;
        position: relative;

        .elements {
          .tableview table {
            .element {
              display: inline-block;
            }

            tr {
              &:focus {
                outline: none;
              }

              &.disabled {
                opacity: 1;
                color: #d4d4d4;

                & + tr.disabled {
                  th,
                  td {
                    border-top-color: rgba(0, 0, 0, 0.025);
                  }
                }

                .element {
                  opacity: 0.25;
                }
              }

              th,
              td {
                cursor: default;
              }

              td:first-child {
                @include padding-left(7px);
              }
            }
          }

          .structure .row {
            margin-top: 1px;
            outline: none;
          }
        }
      }
    }
  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;

    .buttons {
      margin: 0;
    }

    .spinner {
      @include floatright;
      @include margin-right(-24px);
    }
  }
}

/* element editing HUD */
.element-hud-form {
  .buttons {
    position: relative;

    .spinner {
      position: absolute;
      top: 0;
      @include right(-24px);
    }
  }
}

/* logout warning/login/elevated session modals */
.logoutwarningmodalshade,
.loginmodalshade {
  z-index: 101;
}

#logoutwarningmodal,
#loginmodal,
#elevatedsessionmodal {
  width: 500px;
}

#logoutwarningmodal,
#loginmodal {
  z-index: 101;
}

#loginmodal,
#elevatedsessionmodal {
  .inputcontainer {
    position: relative;

    .spinner {
      position: absolute;
      top: 0;
      margin-top: 0;
      @include right(-24px);
    }
  }
}

/* delete user modal */
.deleteusermodal {
  .content-summary {
    margin: -24px -24px 24px;
    padding: 24px;
    background: $lightBgColor;
  }

  .options {
    label {
      display: inline-block;
      line-height: 30px;
    }
  }

  .elementselect {
    @include margin-left(10px);
    display: inline-block;
    vertical-align: middle;
  }

  .buttons {
    .spinner {
      @include floatright;
      @include margin-right(-20px);
      @include margin-left(-4px);
    }
  }
}

.dropdownsettingsmodal {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 400px;

  .body {
    max-height: 100%;
    overflow-y: auto;
  }
}

/* ----------------------------------------
/*  Menus
/* ----------------------------------------*/

.menu,
.ui-datepicker,
.ui-timepicker-list {
  @include menu-styles;
}

.ui-datepicker,
.ui-timepicker-list {
  padding: 0;
}

.menu {
  display: none;
  position: absolute;

  h6 {
    &:first-child {
      margin-top: 14px !important;
    }
  }

  ul {
    &.padded {
      li {
        a {
          @include padding-left(24px);

          &[data-icon],
          &.icon,
          &.sel {
            &:before {
              @include floatleft;
              @include margin(3px, 0, 0, -17px);
              font-size: 14px;
              color: $lightTextColor;
            }

            &.error:before {
              color: $errorColor;
            }
          }

          &.sel:not([data-icon]):before {
            content: 'check';
          }
        }
      }
    }

    li {
      a {
        @include menu-option-styles;
        display: block !important;
        font-size: 14px;

        &.sel {
          cursor: default;
        }

        .shortcut {
          @include floatright;
          @include margin-left(14px);
          color: $mediumTextColor;
        }
      }
    }
  }

  hr {
    margin: 5px -14px;
  }
}

.menubtn,
.menu {
  span.icon {
    display: inline-block;
    margin-top: -1px;
    width: 10px;
    @include margin-right(10px);
    text-align: center;
    font-size: 14px;
    color: $lightTextColor;
  }
}

.menu ul li a:not(.sel):not(.disabled):hover,
.menu ul li a:not(.sel):not(.disabled):hover .light,
.menu:not(:hover) ul li a:not(.disabled).hover,
.menu:not(:hover) ul li a:not(.sel):not(.disabled).hover .light {
  @include menu-option-active-styles;
}

.menu hr.padded {
  @include margin-left(10px);
}

/* tag select fields */
.tagselect {
  .elements {
    display: inline;
  }

  .element.small {
    clear: none;
  }

  .add {
    position: relative;
    z-index: 1;
    @include margin(7px, 7px, 0, 0);
    display: inline-block;
    width: 12em;

    .text {
      @include padding-right(30px);
    }

    .spinner {
      position: absolute;
      top: 0;
      @include right(5px);
    }
  }

  // todo: why are body.ltr and body.rtl needed here?
  body.ltr &,
  body.rtl & {
    &.elementselect .element {
      float: none !important;
      display: inline-block;
    }
  }
}

.tagmenu {
  ul {
    li {
      a {
        @include padding-left(26px);

        &:before {
          @include floatleft;
          @include margin(3px, 0, 0, -18px);
        }
      }
    }
  }
}

/* selectize */

/* ----------------------------------------
/*  Fields
/* ----------------------------------------*/

.shadow-box {
  border-radius: $paneBorderRadius;
  border: 1px solid #ccc;
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.1);
}

table.shadow-box {
  thead:first-child,
  tbody:first-child {
    tr:first-child {
      th:first-child,
      td:first-child {
        &,
        &.disabled:after {
          border-top-left-radius: $paneBorderRadius - 1;
        }
      }
      th:last-child,
      td:last-child {
        &,
        &.disabled:after {
          border-top-right-radius: $paneBorderRadius - 1;
        }
      }
    }
  }
  thead:last-child,
  tbody:last-child {
    tr:last-child {
      th:first-child,
      td:first-child {
        &,
        &.disabled:after {
          border-bottom-left-radius: $paneBorderRadius - 1;
        }
      }
      th:last-child,
      td:last-child {
        &,
        &.disabled:after {
          border-bottom-right-radius: $paneBorderRadius - 1;
        }
      }
    }
  }
}

.text:not(.selectize-text),
.border-box,
.matrix-configurator > .field > .input,
.selectize-text > .selectize-control > .selectize-input {
  @include text-input-styles;
}

.text,
.border-box,
.selectize-text > .selectize-control > .selectize-input {
  &.focus,
  &:focus {
    @include text-input-focused-styles;
  }
}

input.text,
textarea.text,
.text > input,
.text > textarea,
table.editable textarea,
.selectize-text > .selectize-control > .selectize-input {
  font-size: 14px;
  line-height: 20px;
  color: $textColor;
  min-height: 3px;
  box-sizing: border-box;
  appearance: none;
}

.selectize-text > .selectize-control > .selectize-input {
  line-height: 18px;
}

textarea.text.fullwidth {
  display: block;
}

.multitext .multitextrow {
  &:after {
    @include clearafter;
  }

  &:first-child .text {
    &:first-child {
      @include border-top-left-radius($btnBorderRadius);
    }

    &:last-child {
      @include border-top-right-radius($btnBorderRadius);
    }
  }

  &:last-child .text {
    &:first-child {
      @include border-bottom-left-radius($btnBorderRadius);
    }

    &:last-child {
      @include border-bottom-right-radius($btnBorderRadius);
    }
  }

  &:not(:first-child) .text {
    margin-top: -1px;
  }

  .text {
    border-radius: 0;
    float: left;
    box-sizing: border-box;

    &:not(:first-child) {
      @include margin-left(-1px);
    }

    &:first-child {
      &:nth-last-child(1) {
        width: 100%;
      }

      &:nth-last-child(2) {
        width: 50%;
      }

      &:nth-last-child(2) ~ .text {
        width: calc(50% + 1px);
      }
    }

    &.error {
      position: relative;
      z-index: 1;
    }
  }

  .text:focus,
  .selectize-text > .selectize-control > .selectize-input.focus {
    position: relative;
    z-index: 2;
  }
}

.chars-left {
  position: relative;
  @include floatright;
  @include margin(-24px, 7px, 0, 0);
  color: $lightTextColor;

  &.negative-chars-left {
    color: $errorColor;
  }
}

.field {
  position: relative;
  margin: 24px 0;

  & > .heading {
    margin-bottom: 5px;

    & > label {
      position: relative;
      font-weight: bold;
      color: $mediumDarkTextColor;

      & > .site {
        display: inline-block;
        border-radius: $btnBorderRadius;
        @include margin-left(7px);
        padding: 0 4px;
        font-size: 11px;
        color: $mediumTextColor;
        background: $bgColor;
      }
    }
  }

  & > .notice,
  & > .warning {
    margin: 2px 0 0;

    &:before {
      @include margin(-2px, 2px, 0, 0);
      @include icon;
      width: 1em;
    }

    &.notice:before {
      content: 'lightbulb';
    }

    &.warning:before {
      content: 'alert';
    }
  }

  & > .input {
    position: relative;

    &:after {
      @include clearafter;
    }
  }
}

.field > .heading > .instructions,
.checkboxfield.has-instructions .instructions {
  margin-top: 2px;
  color: $mediumTextColor;

  img {
    max-width: 100%;
  }

  ul,
  ol {
    margin: 1em 0;
    @include padding-left(2em);
  }

  ul li {
    list-style-type: disc;
  }

  li + li {
    margin-top: 0.25em;
  }
}

/* toggles and nested fields */
.nested-fields {
  margin: -24px;
  padding: 24px 24px 0;

  &.hidden {
    display: block;
    height: 0;
  }

  & > .field:last-child {
    padding-bottom: 24px;
  }
}

/* checkbox */
input.checkbox {
  opacity: 0;
  position: absolute;
  width: 12px;
  height: 12px;
}

input.checkbox + label,
div.checkbox {
  display: inline-block;
  clear: none;
  position: relative;
  @include padding-left(20px);
  cursor: pointer;
}

input.checkbox:disabled + label,
.disabled div.checkbox {
  cursor: default;
}

input.checkbox + label:empty,
div.checkbox:empty {
  @include padding-left(12px);
}

input.checkbox + label:empty:after,
div.checkbox:empty:after {
  content: '.';
  font-size: 0;
}

/* fixes a RTL bug */
input.checkbox + label:before,
div.checkbox:before {
  display: block;
  position: absolute;
  @include left(0);
  top: 0;
  width: 12px !important;
  height: 12px;
  content: '.';
  font-size: 0;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 0 1px $mediumHairlineColorAlpha;
}

input.checkbox + label:before {
  top: 3px;
}

input.checkbox:disabled + label,
div.checkbox.disabled:before,
div.checkbox.disabled + label {
  opacity: 0.25;
}

input.checkbox:checked + label:before,
div.checkbox.checked:before,
.sel div.checkbox:before,
input.checkbox:indeterminate + label:before,
div.checkbox.indeterminate:before {
  @include icon;
  line-height: 12px;
}

input.checkbox:checked:not(:indeterminate) + label:before,
div.checkbox.checked:not(.indeterminate):before,
.sel div.checkbox:not(.indeterminate):before {
  content: 'check';
  font-size: 15px;
}

input.checkbox:indeterminate + label:before,
div.checkbox.indeterminate:before {
  content: 'minus';
  font-size: 7px;
  text-align: center;
}

input.checkbox:focus + label:before,
:focus div.checkbox:before {
  outline: none;
  box-shadow: 0 0 0 1px $blue;
}

.checkboxfield:not(.has-instructions) + .checkboxfield:not(.has-instructions) {
  margin-top: -22px;
}

.checkboxfield.has-instructions .instructions {
  @include padding-left(20px);
}

/* multiselect */
.multiselect > select {
  @include text-input-styles;
  color: $textColor;
  font-size: 14px;
  appearance: none;

  &:focus {
    @include text-input-focused-styles;
  }

  option {
    padding: 1px 8px;
  }
}

.text:not(.selectize-text),
.selectize-text > .selectize-control > .selectize-input {
  padding: 5px 7px;
}

.text {
  background: #fff;

  &.small {
    padding: 3px;
  }

  input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
  }
}

.input.errors > .text,
.input.errors > .border-box,
.input.errors > .passwordwrapper > .text,
.input.errors > .autosuggest-container .text,
.text.error {
  border: 1px solid $errorColor !important;
}

.texticon {
  position: relative;
  cursor: text;
  min-width: 130px;

  &.icon {
    &:before {
      position: absolute;
      top: 9px;
      @include left(9px);
      color: $lightTextColor;
    }

    .text {
      @include padding-left(26px);
    }
  }

  &.clearable .text {
    @include padding-right(22px);
  }

  .clear {
    position: absolute;
    top: 6px;
    @include right(9px);
    color: $lightTextColor;
    cursor: pointer;

    &:hover {
      color: $mediumTextColor;
    }

    &:before {
      @include icon;
      content: 'remove';
    }
  }
}

.texthint-container {
  position: relative;
  height: 0;
}

.texthint {
  position: absolute;
  top: -1px;
  width: 100%;
  color: $lightTextColor;
  cursor: text;
}

.passwordwrapper {
  position: relative;

  .password {
    width: 100%;
  }

  .password-toggle {
    display: block;
    position: absolute;
    top: 7px;
    @include right(7px);
    @include alignright;
  }
}

.password {
  @include padding-right(5em);
}

.datewrapper,
.timewrapper {
  display: inline-block;
  position: relative;
  background: #fff;

  .text {
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent;

    &:placeholder-shown + div[data-icon] {
      display: block;
      position: absolute;
      top: calc(50% - 10px);
      @include left(8px);
      z-index: 0;
      color: $lightTextColor;

      &,
      &:before {
        user-select: none;
        pointer-events: none;
      }

      #details & {
        color: rgba(0, 0, 0, 0.25);
      }
    }

    &:not(:placeholder-shown) + div[data-icon] {
      display: none;
    }
  }
}

.datewrapper {
  width: 8em;

  .text:before {
    top: calc(50% - 7px);
    @include left(7px);
    content: 'date';
  }
}

.timewrapper {
  width: 7em;

  .text:before {
    top: calc(50% - 5px);
    @include left(7px);
    font-size: 11px;
    content: 'time';
  }
}

::-webkit-input-placeholder {
  @include placeholder-styles;
}

input:-ms-input-placeholder {
  @include placeholder-styles;
}

::-ms-input-placeholder {
  @include placeholder-styles;
}

:-moz-placeholder {
  @include placeholder-styles;
}

::-moz-placeholder {
  @include placeholder-styles;
}

::placeholder {
  @include placeholder-styles;
}

/* Kill IE's special text features */
::-ms-reveal,
::-ms-clear {
  display: none;
}

/* Assets related */
.hud.assetshud .body {
  max-height: 500px;
  overflow: auto;
}

// Selects
.select:not(.selectize),
.select:not(.selectize) select {
  @include select-styles;
}

.select:not(.selectize) {
  @include select-container-styles;
}

.select:not(.selectize):after {
  @include select-arrow-styles;
}

.select:not(.selectize) select {
  @include select-input-styles;
  white-space: pre;

  option {
    background: #fff;
  }
}

.select:not(.selectize).fullwidth select {
  @include select-input-fullwidth-styles;
}

.select:not(.selectize) select:focus {
  @include select-input-focused-styles;
}

.select:not(.selectize).small:after {
  top: 9px;
}

.select:not(.selectize).small select {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: 11px;
}

/* selectize reset */
.selectize .selectize-control.single .selectize-input {
  border-color: inherit;
  box-shadow: none;
  background: none;
}

.selectize .selectize-control.single .selectize-input:after {
  display: none;
}

body .selectize-dropdown {
  border: none;
}

/* single select styles */
.selectize.select .selectize-control,
.selectize.select .selectize-control .selectize-input {
  @include select-styles;
}

.selectize.select .selectize-control {
  @include select-container-styles;
}

.selectize.select .selectize-control:after {
  @include select-arrow-styles;
}

.selectize.select .selectize-control .selectize-input {
  @include select-input-styles;
}

.selectize.select.fullwidth .selectize-control,
.selectize.select.fullwidth .selectize-control .selectize-input {
  @include select-input-fullwidth-styles;
}

/* multi select styles */
.selectize.multiselect .selectize-control.multi .selectize-input {
  @include text-input-styles;
  padding: 6px 8px;
}

.selectize.multiselect .selectize-control.multi .selectize-input.has-items {
  padding: 5px 8px;
}

.selectize.multiselect .selectize-control.multi .selectize-input > div {
  @include token-styles;
  margin-top: 1px;
  margin-bottom: 1px;
}

.selectize.multiselect .selectize-control.plugin-remove_button [data-value] .remove {
  padding: 0;
}

/* shared styles */
.selectize .selectize-control .selectize-input.focus {
  @include text-input-focused-styles;
}

/* menu styles */
body .selectize-dropdown {
  @include menu-styles;
  margin-top: 1px;
  padding: 0;
}

body .selectize-dropdown-content {
  padding: 3px 14px;
}

body .selectize-dropdown-content > div[data-value="new"]:before {
  @include icon;
  content: 'plus';
  margin-right: 5px;
}

body .selectize-dropdown-content > div[data-value="new"]:after {
  content: '…';
}

body .selectize-dropdown [data-selectable],
body .selectize-dropdown .optgroup-header {
  @include menu-option-styles;
}

body .selectize-dropdown .optgroup-header {
  @include h6-styles;
  margin: 0;
  padding: 4px 0;
}

body .selectize-dropdown .active {
  @include menu-option-active-styles;
}

/* datepicker */
.ui-datepicker {
  position: fixed;
  top: -300px;
  @include margin-left(1px);
  -padding: 10px;
  width: 210px;
  height: 242px;
  z-index: 101 !important;
}

.ui-datepicker-header {
  padding: 8px 8px 4px;
}

.ui-datepicker-prev {
  @include floatleft;
}

.ui-datepicker-next {
  @include floatright;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: none;
}

.ui-datepicker-prev:after,
.ui-datepicker-next:after {
  @include icon;
  width: 20px;
  margin-top: -2px;
  line-height: 20px !important;
  text-align: center;
}

.ui-datepicker-prev:after {
  body.ltr & {
    content: 'leftangle';
  }
  body.rtl & {
    content: 'rightangle';
  }
}

.ui-datepicker-next:after {
  body.ltr & {
    content: 'rightangle';
  }
  body.rtl & {
    content: 'leftangle';
  }
}

.ui-datepicker-title {
  text-align: center;
}

.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
  padding: 2px;
}

.ui-datepicker-calendar th span,
.ui-datepicker-calendar td a {
  display: block;
  width: 26px;
  line-height: 26px;
  text-align: center;
  color: $textColor;
}

.ui-datepicker-calendar th span {
  color: $mediumTextColor;
  font-weight: normal;
}

.ui-datepicker-calendar td a {
  border-radius: 2px;
}

.ui-datepicker-calendar td a:hover {
  background: $lightSelColor;
  text-decoration: none;
}

.ui-datepicker-calendar td a.ui-state-active {
  background: $darkSelColor;
  color: #fff;
  cursor: default;
}

.ui-datepicker-calendar td.ui-datepicker-today a {
  border-radius: 13px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15);
}

/* timepicker */
.ui-timepicker-wrapper {
  z-index: 101;
}

.ui-timepicker-list {
  @include margin-left(1px);
  overflow-y: auto;
  width: calc(14px + 6em);
  height: 210px;
  z-index: 100;
}

.ui-timepicker-list li {
  @include padding(2px, 0, 2px, 14px);
  white-space: nowrap;
  cursor: pointer;
}

.ui-timepicker-list li:hover {
  background: $lightSelColor;
}

.ui-timepicker-list li.ui-timepicker-selected {
  background: $darkSelColor;
  color: #fff;
  cursor: default;
}

/* errors */
ul.errors {
  margin-top: 5px;
  list-style-type: square;
  @include padding-left(20px);
}

ul.errors li {
  color: $errorColor;
}

/* message pages */
.message-container {
  position: absolute;
  z-index: 100;
  top: 0;
  @include left(0);
  width: 100%;
  height: 100%;

  &.no-access {
    background: rgba(50, 50, 50, 0.9);
  }

  .pane {
    top: 50%;
    margin-top: -33px !important;
    margin-left: auto;
    margin-right: auto;
    width: 320px;
  }
}

/* auto-suggest */
.autosuggest-container {
  position: relative;
}

.autosuggest__results-container {
  position: absolute;
  z-index: 2;
  width: 100%;
  border-radius: $paneBorderRadius;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 0 14px;
  text-align: left;
  @include sans-serif-font;
  font-size: 1em !important;

  .autosuggest__results_title {
    @include h6-styles;
    margin-top: 14px !important;
  }

  .autosuggest__results_item {
    @include menu-option-styles;

    &:hover,
    &.autosuggest__results_item-highlighted {
      @include menu-option-active-styles;
      cursor: pointer;
    }
  }
}

/* ----------------------------------------
/* Matrix
/* ----------------------------------------*/

/* config */
.matrix-configurator > .field {
  max-width: none;
}

.matrix-configurator > .field > .input {
  position: relative;
  @include padding-left(400px);
  overflow: hidden;
}

.matrix-configurator .mc-sidebar {
  position: absolute;
  top: 0;
  margin: 0;
  border: none;
  width: 200px;
  height: 100%;
  background: hsla($hue, 8%, 0%, 0.03);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.06);
}

.matrix-configurator .mc-sidebar.block-types {
  @include left(0);
}

.matrix-configurator .mc-sidebar.fields {
  @include left(200px);
}

.matrix-configurator .mc-sidebar .items {
  margin-top: -1px;
  padding-top: 1px;
}

.matrixconfigitem {
  position: relative;
  margin-top: -1px;
  @include padding(11px, 45px, 10px, 14px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  user-select: none;
  cursor: default;
}

.matrixconfigitem.sel {
  background: rgba(0, 0, 0, 0.05);
}

.matrixconfigitem.error {
  background: rgba(255, 0, 0, 0.1);
}

.matrixconfigitem.sel.error {
  background: rgba(200, 0, 0, 0.2);
}

.matrixconfigitem .handle {
  font-size: 12px;
  color: $mediumTextColor;
}

.matrixconfigitem .actions {
  position: absolute;
  @include right(0);
  width: 24px;
}

.matrixconfigitem.mci-blocktype .actions {
  top: 10px;
}

.matrixconfigitem.mci-field .actions {
  top: 20px;
}

.matrixconfigitem .actions .icon {
  display: block;
  margin-bottom: 1px;
  text-align: center;
}

.matrixconfigitem .actions .icon.settings:before {
  color: rgba(0, 0, 0, 0.2);
}

.matrixconfigitem .actions .icon.settings.error:before {
  color: $errorColor;
}

.matrixconfigitem .actions .icon.settings:not(.disabled):hover:before {
  color: $linkColor;
}

.matrix-configurator .mc-sidebar .items .btn {
  margin: 14px;
}

.matrix-configurator .field-settings {
  position: relative;
  height: 100%;
}

.matrix-configurator .field-settings .items {
  padding: 24px;
}

.matrix-configurator .mc-sidebar > .col-inner-container > .heading,
.matrix-configurator .field-settings > .col-inner-container > .heading {
  margin: 0;
  padding: 7px 14px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
}

/* blocks */
$titlebarBorderRadius: $paneBorderRadius - 1;

.matrixblock {
  position: relative;
  margin-bottom: 10px;
  padding: 0 14px 14px;
  border-radius: $paneBorderRadius;
  border: 1px solid $hairlineColor;
  background: $lightBgColor;
  outline: none;

  & > .titlebar {
    margin: 0 -14px 14px;
    width: calc(100% + 28px);
    box-sizing: border-box;
    border-radius: $titlebarBorderRadius $titlebarBorderRadius 0 0;
    @include padding(5px, 70px, 5px, 33px);
    border-bottom: 1px solid $hairlineColor;
    background: $bgColor;
    color: $lightTextColor;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
    cursor: default;
    user-select: none;

    & > .blocktype {
      display: inline;
      color: $mediumTextColor;
    }

    & > .preview {
      @include margin-left(7px);
      display: inline;
      opacity: 0;
      transition: opacity linear 100ms;

      span {
        opacity: 0.5;
      }
    }
  }

  &.disabled {
    opacity: 1;

    & > .titlebar {
      @include padding-right(90px);
    }

    & > .actions {
      & > .status {
        &.off {
          display: inline-block;
          @include floatleft;
          @include margin(6px, 10px, 0, 0);
        }
      }
    }
  }

  &.collapsed {
    & > .titlebar {
      border-radius: $titlebarBorderRadius;
      border-bottom: none;

      & > .preview {
        opacity: 1;
      }
    }
  }

  & > .checkbox {
    position: absolute;
    top: 7px;
    @include left(14px);
  }

  & > .actions {
    position: absolute;
    z-index: 1;
    top: 4px;
    @include right(5px);
    cursor: default;

    & > .status {
      &.off {
        display: none;
      }
    }

    a {
      padding: 0;
      @include margin-right(2px);
      width: 15px;
      height: 20px;
      text-align: center;
      color: rgba(0, 0, 0, 0.25);

      &:hover {
        width: 15px;
        height: 20px;
        text-align: center;
        color: $linkColor;
      }

      &.settings:after {
        @include margin-left(3px);
      }
    }
  }

  & > .fields {
    & > .field {
      margin: 15px 0;
    }
  }

  & > .buttons {
    margin-top: 0;
    height: 30px;
  }
}

/* categories */
.add-category-form {
  margin-top: 24px;
}

.add-category-form .texticon {
  width: 200px;
  @include floatleft;
  @include margin-right(5px);
}

.add-category-form .texticon .text {
  @include padding-right(30px);
}

.add-category-form .texticon .spinner {
  position: absolute;
  top: 0;
  @include right(5px);
}

.categoriesfield {
  position: relative;
  min-height: 30px;
}

.categoriesfield .structure ul {
  @include margin-left(12px);
}

/* site pickers */
body.sitepicker {
  #main-container {
    #main {
      #main-content {
        padding: 30px;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
    }
  }
}

.sitepicker-group {
  li {
    &:not(:first-child) {
      a {
        margin-top: -1px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        &:not(:hover) {
          border-top-color: transparent;
        }
      }
    }

    &:not(:last-child) {
      a {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    a {
      display: block;
      position: relative;
      text-align: left;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid $hairlineColorAlpha;
      border-radius: $btnBorderRadius;
      @include padding(9px, 42px, 9px, 15px);
      font-size: 16px;
      line-height: 1.4;

      &:after {
        font-size: 14px;
        position: absolute;
        top: calc(50% - 7px);
        @include right(12px);
        margin: 0;
        padding: 0;
      }

      &:hover {
        border-color: $linkColor;
        text-decoration: none;
        z-index: 1;
      }
    }
  }
}

/* ----------------------------------------
/* IE hacks
/* ----------------------------------------*/

/* Fix layout of modal element selectors for IE8 */
.elementselectormodal .body .main {
  float: left \9
;
  width: 445px \9
;
}

/* ----------------------------------------
/*  Retina graphics
/* ----------------------------------------*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
  .color {
    background-image: url(../images/checkers_2x.png);
    background-size: 16px;

    &.small {
      background-size: 8px;
    }
  }

  table thead th.ordered {
    background-image: url(../images/listview_sort_2x.png);
    background-size: 26px;
  }
  table thead th.ordered.loading {
    background-image: url(../images/spinner_tableheader_2x.gif);
    background-size: 26px;
  }

  .spinner {
    background-image: url(../images/spinner_2x.gif);
    background-size: 20px;
  }
  .spinner.big {
    background-image: url(../images/spinner_big_2x.gif);
    background-size: 48px;
  }

  .btn.icon.add.loading:after {
    background-image: url(../images/spinner_2x.gif);
    background-size: 20px;
  }
  .btn.icon.add.loading.submit:after {
    background-image: url(../images/spinner_submit_2x.gif);
  }
  .secondary-buttons .btn.icon.add.loading.submit:after,
  .btn.secondary.icon.add.loading.submit:after {
    background-image: url(../images/spinner_submit_secondary_2x.gif);
  }

  .sel .element.loading:after,
  .element.loading.sel:after {
    background-image: url(../images/spinner_element_2x.gif);
    background-size: 20px;
  }

  .structure ul li {
    background-size: 40px;
    body.ltr & {
      background-image: url(../images/branch_2x.png);
    }
    body.rtl & {
      background-image: url(../images/branch_rtl_2x.png);
    }
  }

  .progressbar.pending .progressbar-inner {
    background-image: url(../images/progressbar_pending_2x.png);
    background-size: 50px;
  }

  .modal .resizehandle {
    background-size: 13px;
    body.ltr & {
      background-image: url(../images/resizehandle_2x.png);
    }
    body.rtl & {
      background-image: url(../images/resizehandle_rtl_2x.png);
    }
  }

  .hud .tip-left {
    background-image: url(../images/hudtip_left_2x.png);
    background-size: 15px 30px;
  }
  .hud .tip-top {
    background-image: url(../images/hudtip_top_2x.png);
    background-size: 30px 15px;
  }
  .hud .tip-right {
    background-image: url(../images/hudtip_right_2x.png);
    background-size: 15px 30px;
  }
  .hud .tip-bottom {
    background-image: url(../images/hudtip_bottom_2x.png);
    background-size: 30px 15px;
  }
  .hud.has-footer .tip-bottom {
    background-image: url(../images/hudtip_bottom_gray_2x.png);
  }
}