@charset "UTF-8";
/* ----------------------------------------
/*  Reset (thanks Eric!)
/* ----------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: none;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

input, textarea {
  margin: 0;
  font-family: "Lucida Grande", sans-serif;
  font-size: 100%;
}

textarea {
  resize: vertical;
}

select {
  margin: 0;
}

.awesomplete {
  width: 100% !important;
}

@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-color: hsl(212deg, 50%, 93%);
}

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

body {
  width: 100%;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 20px;
  color: hsl(209deg, 18%, 30%);
  -webkit-font-smoothing: subpixel-antialiased;
}

body.rtl {
  direction: rtl;
}

body, input, select, textarea {
  font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

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

/* icons */
.icon:before,
.menu ul.padded li a.sel:before,
.menu .flex.padded.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 {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
}

.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: #E8368F;
}

body.ltr #preview-btn:before,
body.ltr #share-btn:before {
  margin-right: 7px;
}
body.rtl #preview-btn:before,
body.rtl #share-btn:before {
  margin-left: 7px;
}

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

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

/* headings */
h1 {
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
}

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: 4px 0;
  font-weight: bold;
  line-height: 1.2;
  color: hsl(211deg, 10%, 53%);
}

h5 {
  margin: 14px 0 3px;
  line-height: 1.2;
  color: hsl(211deg, 10%, 53%);
}

h6 {
  margin: 14px 0 3px;
  font-size: 10px;
  line-height: 1.2;
  color: hsl(211deg, 13%, 65%);
  text-transform: uppercase;
  font-weight: bold;
}

body.ltr h1[data-icon]:before {
  margin: -8px 10px 0 0;
}
body.rtl h1[data-icon]:before {
  margin: -8px 0 0 10px;
}

h2[data-icon]:before {
  font-size: 19px;
}
body.ltr h2[data-icon]:before {
  margin: -4px 6px 0 0;
}
body.rtl h2[data-icon]:before {
  margin: -4px 0 0 6px;
}

/* horizontal rule */
hr {
  margin: 24px 0;
  border: none;
  border-top: 1px solid rgba(51, 64, 77, 0.1);
  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;
}

body.ltr .indent {
  margin-left: 14px;
}
body.rtl .indent {
  margin-right: 14px;
}

/* lists */
.bullets {
  list-style-type: square;
}
body.ltr .bullets {
  padding-left: 40px;
}
body.rtl .bullets {
  padding-right: 40px;
}

ol {
  list-style-type: decimal;
}
body.ltr ol {
  padding-left: 40px;
}
body.rtl ol {
  padding-right: 40px;
}

/* code */
code,
.code,
.code input,
.code textarea {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 0.9em !important;
}

/* links */
a {
  color: #0B69A3;
  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;
  color: hsl(211deg, 13%, 65%);
}
body.ltr .go:after {
  padding-left: 4px;
}
body.rtl .go:after {
  padding-right: 4px;
}
body.ltr .go:after {
  content: "circlerarr";
}
body.rtl .go:after {
  content: "circlelarr";
}

.go:hover:after {
  color: #0B69A3;
}

/* revision button */
body.ltr #revision-btngroup {
  margin-right: 7px;
}
body.rtl #revision-btngroup {
  margin-left: 7px;
}

#revision-btn.disabled {
  opacity: 1;
  color: hsl(211deg, 12%, 43%);
  background-color: rgba(205, 216, 228, 0.5) !important;
}

/* status icons */
.checkmark-icon,
.alert-icon {
  padding: 5px;
  margin-bottom: 0 !important;
  line-height: 10px;
  border-radius: 20px;
  cursor: pointer;
}
.checkmark-icon:before,
.alert-icon:before {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
}

.checkmark-icon {
  background-color: hsl(212deg, 30%, 85%);
}
.checkmark-icon:before {
  content: "check";
  color: #27AB83;
}

.alert-icon {
  background-color: hsl(212deg, 30%, 85%);
}
.alert-icon:before {
  content: "alert";
  color: #EF4E4E;
}

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

.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;
  color: hsl(209deg, 18%, 30%);
  text-decoration: none;
}
body.ltr a.fieldtoggle {
  padding-left: 12px;
}
body.rtl a.fieldtoggle {
  padding-right: 12px;
}

a.fieldtoggle:before {
  display: block;
  position: absolute;
  top: -2px;
}
body.ltr a.fieldtoggle:before {
  left: -6px;
}
body.rtl a.fieldtoggle:before {
  right: -6px;
}

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

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

/* readable blocks */
.readable {
  font-size: 16px;
  line-height: 22px;
}
.readable h1, .readable h2, .readable h3, .readable h4, .readable h5, .readable h6 {
  margin: 24px 0 16px;
  font-weight: 600;
}
.readable h1 {
  font-size: 32px;
  line-height: 40px;
  color: #000;
}
.readable h2 {
  font-size: 24px;
  line-height: 30px;
}
.readable h3 {
  font-size: 20px;
  line-height: 24px;
}
.readable h4 {
  font-size: 16px;
  line-height: 20px;
}
.readable h5 {
  font-size: 14px;
  line-height: 18px;
}
.readable h6 {
  font-size: 13.6px;
  line-height: 17px;
  color: hsl(211deg, 10%, 53%);
}
.readable ul,
.readable ol {
  margin: 1em 0;
}
body.ltr .readable ul,
body.ltr .readable ol {
  padding-left: 2em;
}
body.rtl .readable ul,
body.rtl .readable ol {
  padding-right: 2em;
}
.readable ul li {
  list-style-type: disc;
}
.readable li + li {
  margin-top: 0.25em;
}
.readable blockquote {
  margin: 16px 0;
}
.readable blockquote:not(.note) {
  padding: 0 16px;
  color: hsl(211deg, 10%, 53%);
}
body.ltr .readable blockquote:not(.note) {
  border-left: 4px solid rgba(51, 64, 77, 0.1);
}
body.rtl .readable blockquote:not(.note) {
  border-right: 4px solid rgba(51, 64, 77, 0.1);
}
.readable blockquote.note {
  position: relative;
  border-radius: 4px;
  padding: 1em;
  border: 1px solid;
}
body.ltr .readable blockquote.note {
  padding-left: 56px;
}
body.rtl .readable blockquote.note {
  padding-right: 56px;
}
.readable blockquote.note:not(.tip):not(.warning) {
  border-color: #EF4E4E;
  color: #bf503f;
}
.readable blockquote.note:not(.tip):not(.warning):before {
  content: "alert";
  color: #EF4E4E;
}
.readable blockquote.note.tip {
  border-color: #0B69A3;
  color: hsl(211deg, 10%, 53%);
}
.readable blockquote.note.tip:before {
  content: "lightbulb";
  color: #0B69A3;
}
.readable blockquote.note.warning {
  border-color: #CB6E17;
  color: #cf783a;
}
.readable blockquote.note.warning:before {
  content: "alert";
  color: #CB6E17;
}
.readable blockquote.note:before {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  position: absolute;
  top: 12px;
  font-size: 30px;
  width: 24px;
}
body.ltr .readable blockquote.note:before {
  left: 16px;
}
body.rtl .readable blockquote.note:before {
  right: 16px;
}

/* text styles */
body.ltr .leftalign {
  text-align: left;
}
body.rtl .leftalign {
  text-align: right;
}

.topalign {
  vertical-align: top;
}

body.ltr .rightalign {
  text-align: right;
}
body.rtl .rightalign {
  text-align: left;
}

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

.nowrap {
  white-space: nowrap;
}

.break-word {
  word-wrap: break-word;
}

.light {
  color: hsl(211deg, 10%, 53%) !important;
  font-weight: normal;
}

.extralight {
  color: hsl(211deg, 13%, 65%) !important;
}

.smalltext {
  font-size: 12px;
}

.zilch {
  padding: 100px 0 76px;
  text-align: center;
  font-size: 20px;
  line-height: 24px;
  color: hsl(211deg, 13%, 65%);
}

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

.required:after {
  content: "asterisk";
  font-size: 7px;
  color: #EF4E4E;
}
body.ltr .required:after {
  margin: -2px 0 0 7px;
}
body.rtl .required:after {
  margin: -2px 7px 0 0;
}

.scrollpane {
  overflow: auto;
}

body.ltr .left {
  float: left;
}
body.rtl .left {
  float: right;
}

body.ltr .right {
  float: right;
}
body.rtl .right {
  float: left;
}

th,
td {
  vertical-align: middle;
}
body.ltr th,
body.ltr td {
  text-align: left;
}
body.rtl th,
body.rtl td {
  text-align: right;
}

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

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

th.right,
td.right {
  float: none;
}
body.ltr th.right,
body.ltr td.right {
  text-align: right;
}
body.rtl th.right,
body.rtl td.right {
  text-align: left;
}

.no-outline {
  outline: none;
}

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

.fullwidth {
  width: 100%;
}

*:not(.highlight) > * > * > .token {
  display: inline-block;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 12px;
  line-height: 14px;
  color: hsl(209deg, 18%, 30%);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(123, 135, 147, 0.5);
}

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

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

.token[data-name="*"]:before {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 9px;
  line-height: 17px;
  content: "asterisk";
  text-indent: 0;
}

.token:focus {
  box-shadow: 0 0 0 1px rgba(96, 109, 123, 0.25);
  background-color: #fff;
  outline: none;
}

.success {
  color: #27AB83 !important;
}

.notice {
  color: #127FBF !important;
}

.warning {
  color: #CB6E17 !important;
}

.error {
  color: #EF4E4E !important;
}

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

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

.icon.move:before {
  content: "move";
  color: rgba(123, 135, 147, 0.5);
}

.icon.move:not(.disabled):hover:before {
  color: #0B69A3;
}

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

.icon.delete:before {
  content: "remove";
  color: rgba(123, 135, 147, 0.5);
}

.icon.delete:not(.disabled):hover:before {
  color: #CF1124;
}

.icon.delete:not(.disabled):active:before {
  color: #a00d1c;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

.clearafter:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.info {
  vertical-align: bottom;
  display: inline-block;
  width: 1em;
  height: 1.375em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.info:before {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  vertical-align: baseline;
  width: 100%;
  line-height: 1.375;
  color: hsl(211deg, 13%, 65%);
}
.info:not(.warning):before {
  content: "info";
}
.info:not(.warning):hover:before {
  color: #0B69A3;
}
.info.warning:before {
  content: "alert";
}
.info.warning:hover:before {
  color: #CB6E17;
}

.info-hud table {
  max-width: 280px;
  table-layout: auto;
}
.info-hud td {
  word-wrap: break-word;
  width: 100%;
}

@media (max-width: 450px) {
  .info-hud table {
    table-layout: fixed;
    width: 100%;
  }
}
/* ----------------------------------------
/*  Content
/* ----------------------------------------*/
/* Customize Sources */
.sidebar .customize-sources {
  display: block;
  margin: 14px -24px 4px;
  transition: color linear 100ms;
}
body.ltr .sidebar .customize-sources {
  padding: 7px 14px 7px 24px;
}
body.rtl .sidebar .customize-sources {
  padding: 7px 24px 7px 14px;
}
body.ltr .sidebar .customize-sources .icon {
  margin-right: 4px;
}
body.rtl .sidebar .customize-sources .icon {
  margin-left: 4px;
}
.sidebar .customize-sources .label {
  opacity: 0;
  transition: opacity linear 100ms;
}
.sidebar .customize-sources:hover {
  color: hsl(211deg, 10%, 53%) !important;
  text-decoration: none;
}
.sidebar .customize-sources:hover .label {
  opacity: 1;
}

body.ltr .customize-sources-modal {
  padding-left: 200px;
}
body.rtl .customize-sources-modal {
  padding-right: 200px;
}

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

.customize-sources-modal > .cs-sidebar {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 10px 0;
  border: none;
  width: 200px;
  height: calc(100% - 62px);
  box-sizing: border-box;
  background-color: hsl(212deg, 60%, 97%);
  overflow: auto;
  box-shadow: inset -1px 0 0 rgba(51, 64, 77, 0.1);
}
body.ltr .customize-sources-modal > .cs-sidebar {
  left: 0;
}
body.rtl .customize-sources-modal > .cs-sidebar {
  right: 0;
}

body.ltr .customize-sources-modal > .cs-sidebar > .btn {
  margin: 10px 0 0 14px;
}
body.rtl .customize-sources-modal > .cs-sidebar > .btn {
  margin: 10px 14px 0 0;
}

.customize-sources-item {
  position: relative;
  margin-top: -1px;
  background-color: hsl(212deg, 50%, 93%);
  border: solid rgba(51, 64, 77, 0.1);
  border-width: 1px 0;
  user-select: none;
  cursor: default;
}
body.ltr .customize-sources-item {
  margin-right: 1px;
}
body.rtl .customize-sources-item {
  margin-left: 1px;
}
body.ltr .customize-sources-item {
  padding: 10px 14px 10px 40px;
}
body.rtl .customize-sources-item {
  padding: 10px 40px 10px 14px;
}

.customize-sources-item + .customize-sources-item:not(.heading) {
  border-top: 1px solid rgba(51, 64, 77, 0.1);
}

.customize-sources-item.sel {
  background-color: hsl(212deg, 30%, 85%);
  z-index: 1;
}

.customize-sources-item .move {
  display: block;
  position: absolute;
  top: 11px;
  width: 24px;
  text-align: center;
}
body.ltr .customize-sources-item .move {
  left: 7px;
}
body.rtl .customize-sources-item .move {
  right: 7px;
}

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

.customize-sources-item.heading .label {
  text-transform: uppercase;
  color: hsl(211deg, 13%, 65%);
  font-size: 12px;
  font-weight: bold;
}

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

body.ltr .customize-sources-table-column .move {
  margin-right: 10px;
}
body.rtl .customize-sources-table-column .move {
  margin-left: 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 li {
  margin: 0 0 10px;
}
ul.icons li a {
  display: block;
  position: relative;
  padding: 60px 5px 10px;
  width: 110px;
  text-align: center;
  color: hsl(209deg, 18%, 30%);
  border-radius: 4px;
  border: 1px solid #fff;
}
ul.icons li a:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 40px;
  line-height: 60px;
}
ul.icons li a:hover {
  text-decoration: none;
  background-color: hsl(212deg, 60%, 97%);
  border-color: hsl(212deg, 50%, 93%);
}
ul.icons li a img,
ul.icons li a svg {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 12px;
  left: calc(50% - 20px);
}

@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: 14px;
  min-height: 34px;
}
.toolbar .flex {
  align-items: flex-start;
}
.toolbar .text {
  border-radius: 5px !important;
  box-shadow: none !important;
}

.flex {
  display: flex;
  align-items: center;
  align-content: stretch;
}
.flex:not(.flex-nowrap) {
  flex-wrap: wrap;
}
.flex:not(.flex-nowrap) > * {
  margin-bottom: 7px;
}
.flex > *.label {
  white-space: nowrap;
}
body.ltr .flex > *:not(:last-child) {
  margin-right: 7px !important;
}
body.rtl .flex > *:not(:last-child) {
  margin-left: 7px !important;
}
body.ltr .flex > *.spinner {
  margin-left: 0 !important;
}
body.rtl .flex > *.spinner {
  margin-right: 0 !important;
}

.flex-grow {
  flex: 1;
}

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

.spacer {
  width: 14px;
}

.buttons {
  display: flex;
  position: relative;
  margin: 24px 0;
}
body.ltr .buttons > .btn:not(.hidden) + .btn, body.ltr .buttons > .btn:not(.hidden) + .btngroup, body.ltr .buttons > .btngroup:not(.hidden) + .btn, body.ltr .buttons > .btngroup:not(.hidden) + .btngroup {
  margin-left: 5px;
}
body.rtl .buttons > .btn:not(.hidden) + .btn, body.rtl .buttons > .btn:not(.hidden) + .btngroup, body.rtl .buttons > .btngroup:not(.hidden) + .btn, body.rtl .buttons > .btngroup:not(.hidden) + .btngroup {
  margin-right: 5px;
}
.footer > .buttons {
  margin: 0;
}

.btn {
  display: inline-block;
  border-radius: 5px;
  padding: 7px 14px;
  border: none;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  outline: none;
}
.btn.chromeless {
  background-color: transparent;
  height: auto;
  padding: 0;
}
.btn.chromeless:hover, .btn.chromeless:active, .btn.chromeless:focus {
  background-color: transparent;
}
.btn.chromeless:hover, .btn.chromeless:active {
  text-decoration: underline;
}
.btn.rounded {
  border-radius: 17px;
}
.btn:focus, .btn:hover {
  background-color: rgba(96, 125, 159, 0.35);
}
.btn:active, .btn.active {
  background-color: rgba(96, 125, 159, 0.5);
}
.btn[type=color] {
  padding: 6px !important;
  width: 36px;
}
.btn.active {
  cursor: default;
}
.btn:hover {
  text-decoration: none;
}
.btn:active {
  outline: none;
}
.btn:not(.small)[data-icon]:before, .btn:not(.small).icon:before, .btn:not(.small).menubtn[data-icon]:before, .btn:not(.small).menubtn.icon:before {
  margin-top: -3px;
}
body.ltr .btn[data-icon]:not(:empty):before, body.ltr .btn.icon:not(:empty):before, body.ltr .btn.menubtn[data-icon]:empty:before, body.ltr .btn.menubtn.icon:empty:before {
  margin-right: 5px;
}
body.rtl .btn[data-icon]:not(:empty):before, body.rtl .btn.icon:not(:empty):before, body.rtl .btn.menubtn[data-icon]:empty:before, body.rtl .btn.menubtn.icon:empty:before {
  margin-left: 5px;
}
.btn div.checkbox {
  margin-top: 2px;
}

.disabled {
  opacity: 0.25;
}

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

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

body.ltr .btn[data-icon-after]:not(:empty):after,
body.ltr .menubtn:not(:empty):after,
body.ltr .menubtn.icon:after {
  margin-left: 6px;
}
body.rtl .btn[data-icon-after]:not(:empty):after,
body.rtl .menubtn:not(:empty):after,
body.rtl .menubtn.icon:after {
  margin-right: 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;
}
.btngroup.fullwidth .btn {
  flex: 1;
}
.btngroup.disabled .btn {
  cursor: default;
}
.btngroup .btn.active {
  cursor: default;
}
body.ltr .btngroup .btn:not(.dashed):not(:last-child) {
  margin-right: 1px;
}
body.rtl .btngroup .btn:not(.dashed):not(:last-child) {
  margin-left: 1px;
}
body.ltr .btngroup .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
body.ltr .btngroup .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
body.rtl .btngroup .btn:not(:first-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
body.rtl .btngroup .btn:not(:last-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* menu buttons */
.menubtn {
  user-select: none;
}
.menubtn:after {
  content: "downangle";
}
body.ltr .menubtn:empty {
  padding-left: 8px;
}
body.rtl .menubtn:empty {
  padding-right: 8px;
}
body.ltr .menubtn:empty {
  padding-right: 8px;
}
body.rtl .menubtn:empty {
  padding-left: 8px;
}

/* spinner */
.spinner {
  display: inline-block;
  vertical-align: bottom;
  width: 24px;
  background: url(../images/spinner.gif) no-repeat 50% 50%;
}

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

body.ltr .btn + .spinner {
  margin-left: 7px;
}
body.rtl .btn + .spinner {
  margin-right: 7px;
}

.buttons .spinner {
  display: block;
}
body.ltr .buttons .spinner {
  float: left;
}
body.rtl .buttons .spinner {
  float: right;
}

body.ltr .buttons .btn + .spinner,
body.ltr .buttons .btngroup + .spinner {
  margin-left: 0;
}
body.rtl .buttons .btn + .spinner,
body.rtl .buttons .btngroup + .spinner {
  margin-right: 0;
}

body.ltr .buttons.right .btn + .spinner {
  margin-right: -24px;
}
body.rtl .buttons.right .btn + .spinner {
  margin-left: -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;
}

body.ltr .btn.big[data-icon]:before,
body.ltr #preview-btn:before,
body.ltr #share-btn:before {
  margin-left: -2px;
}
body.rtl .btn.big[data-icon]:before,
body.rtl #preview-btn:before,
body.rtl #share-btn:before {
  margin-right: -2px;
}

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

/* submit buttons */
.btn.submit, .btn.submit:before, .btn.submit:after,
.btn.secondary,
.btn.secondary:before,
.btn.secondary:after {
  color: #fff !important;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}

.btn.submit {
  background-color: #E5422B !important;
}

.btn.submit:not(.disabled):not(.inactive):hover,
.btn.submit:not(.disabled):not(.inactive).hover {
  background-color: #dc331b !important;
}

.btn.submit:not(.disabled):not(.inactive):active,
.btn.submit:not(.disabled):not(.inactive).active {
  background-color: #c52e18 !important;
}

.secondary-buttons .btn.submit,
.btn.secondary {
  background-color: hsl(211deg, 11%, 59%) !important;
}

.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-color: #7d8997 !important;
}

.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-color: #6f7c8b !important;
}

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

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

/* dashed buttons */
.btn.dashed {
  border: 1px dashed rgba(81, 95, 108, 0.25);
  background-color: transparent !important;
}
body.ltr .btngroup .btn.dashed:not(:last-child) {
  border-right: 1px solid transparent;
}
body.rtl .btngroup .btn.dashed:not(:last-child) {
  border-left: 1px solid transparent;
}
body.ltr .btngroup .btn.dashed:not(:last-child) {
  margin-right: -1px;
}
body.rtl .btngroup .btn.dashed:not(:last-child) {
  margin-left: -1px;
}
.btn.dashed:not(.disabled):active, .btn.dashed:not(.disabled).active {
  background-color: rgba(205, 216, 228, 0.25) !important;
}

/* color inputs */
.color-input {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 0.9em !important;
}

.color {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  padding: 0;
  background-color: url(../images/checkers.png);
}
.color:not(.static) {
  cursor: pointer;
}
.color.small {
  width: 16px;
  height: 16px;
  background-size: 16px;
}
.color .color-preview {
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
body.ltr .color .color-preview {
  left: 0;
}
body.rtl .color .color-preview {
  right: 0;
}

.colorhex {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  color: hsl(211deg, 10%, 53%);
}

/* lightswitch */
.lightswitch {
  position: relative;
  border: none !important;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  background-image: linear-gradient(to right, hsl(211deg, 13%, 65%), hsl(211deg, 13%, 65%));
  transition: background-image linear 100ms;
}
.lightswitch.on {
  background-image: linear-gradient(to right, #27AB83, #27AB83);
}
.lightswitch.indeterminate {
  background-image: linear-gradient(to right, #27AB83, hsl(211deg, 13%, 65%));
}
.lightswitch .lightswitch-container {
  position: relative;
  height: 100%;
}
.lightswitch .lightswitch-container .handle {
  position: absolute;
  top: 1px;
  background-color: #fff;
}
.lightswitch:not(.small) {
  border-radius: 11px;
  width: 34px;
  height: 22px;
}
.lightswitch:not(.small) .lightswitch-container {
  width: 46px;
}
body.ltr .lightswitch:not(.small) .lightswitch-container {
  margin-left: -12px;
}
body.rtl .lightswitch:not(.small) .lightswitch-container {
  margin-right: -12px;
}
.lightswitch:not(.small) .lightswitch-container .handle {
  border-radius: 10px;
  width: 20px;
  height: 20px;
  left: calc(50% - 10px);
}
.lightswitch.small {
  border-radius: 9px;
  width: 28px;
  height: 18px;
}
.lightswitch.small .lightswitch-container {
  width: 38px;
}
body.ltr .lightswitch.small .lightswitch-container {
  margin-left: -10px;
}
body.rtl .lightswitch.small .lightswitch-container {
  margin-right: -10px;
}
.lightswitch.small .lightswitch-container .handle {
  border-radius: 8px;
  width: 16px;
  height: 16px;
  left: calc(50% - 8px);
}
table .lightswitch {
  display: inline-block;
  margin-bottom: -5px;
}
.lightswitch:focus {
  outline: none;
}
.lightswitch:focus .lightswitch-container .handle {
  background-color: hsl(212deg, 30%, 85%);
}
body.ltr .lightswitch.on .lightswitch-container {
  margin-left: 0;
}
body.rtl .lightswitch.on .lightswitch-container {
  margin-right: 0;
}
body.ltr .lightswitch.indeterminate:not(.small) .lightswitch-container {
  margin-left: -6px;
}
body.rtl .lightswitch.indeterminate:not(.small) .lightswitch-container {
  margin-right: -6px;
}
body.ltr .lightswitch.indeterminate.small .lightswitch-container {
  margin-left: -5px;
}
body.rtl .lightswitch.indeterminate.small .lightswitch-container {
  margin-right: -5px;
}

/* pagination */
table.data + .pagination {
  margin-top: 24px;
}
.pagination .page-link {
  padding: 4px 13px 8px;
  border-radius: 4px;
  color: hsl(209deg, 18%, 30%);
}
.pagination .page-link:before {
  font-size: 1.2em;
}
.pagination .page-link:not(.disabled) {
  transition: box-shadow linear 100ms;
  box-shadow: inset 0 0 0 1px rgba(51, 64, 77, 0.1);
  cursor: pointer;
}
.pagination .page-link:not(.disabled):hover {
  text-decoration: none;
  box-shadow: inset 0 0 0 1px #0B69A3;
}
.pagination .page-link.disabled {
  opacity: 1;
  color: hsl(211deg, 13%, 65%);
}

/* action buttons */
body.ltr .actions {
  float: right;
}
body.rtl .actions {
  float: left;
}

body.ltr .actions > li {
  float: left;
}
body.rtl .actions > li {
  float: right;
}

body.ltr .actions > li + li {
  margin-left: 10px;
}
body.rtl .actions > li + li {
  margin-right: 10px;
}

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

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

/* ----------------------------------------
/*  Tables
/* ----------------------------------------*/
.tablepane {
  margin: -24px -24px 0;
  overflow-x: auto;
}
body.ltr .tablepane table th:first-child,
body.ltr .tablepane table td:first-child {
  padding-left: 24px;
}
body.rtl .tablepane table th:first-child,
body.rtl .tablepane table td:first-child {
  padding-right: 24px;
}
body.ltr .tablepane table th:last-child,
body.ltr .tablepane table td:last-child {
  padding-right: 24px;
}
body.rtl .tablepane table th:last-child,
body.rtl .tablepane table td:last-child {
  padding-left: 24px;
}
.tablepane table thead th,
.tablepane table thead td {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

table.fixed-layout {
  table-layout: fixed;
}
table th.thin,
table td.thin {
  width: 0.01% !important;
  white-space: nowrap;
}
table thead th {
  font-weight: bold;
  vertical-align: top;
  color: hsl(211deg, 10%, 53%);
}
body.ltr table thead th {
  text-align: left;
}
body.rtl table thead th {
  text-align: right;
}
table:not(.data) th,
table:not(.data) td {
  padding-top: 7px;
  padding-bottom: 7px;
}
table:not(.data) th:not(:first-child),
table:not(.data) td:not(:first-child) {
  padding-left: 12px;
}
table:not(.data) th:not(:last-child),
table:not(.data) td:not(:last-child) {
  padding-right: 12px;
}
table.data th,
table.data td {
  position: relative;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
table.data th.checkbox-cell,
table.data td.checkbox-cell {
  width: 16px !important;
  min-width: 16px;
  box-sizing: content-box;
  position: relative;
}
table.data th.checkbox-cell input.checkbox + label,
table.data th.checkbox-cell div.checkbox,
table.data td.checkbox-cell input.checkbox + label,
table.data td.checkbox-cell div.checkbox {
  position: absolute;
  top: calc(50% - 8px);
}
table.data th {
  font-weight: bold;
}
table.data thead th,
table.data thead td {
  padding-top: 14px;
  padding-bottom: 14px;
  width: auto;
  background-color: hsl(212deg, 60%, 97%);
  cursor: default;
}
body.ltr table.data thead th:first-child,
body.ltr table.data thead td:first-child {
  border-top-left-radius: 5px;
}
body.rtl table.data thead th:first-child,
body.rtl table.data thead td:first-child {
  border-top-right-radius: 5px;
}
body.ltr table.data thead th:first-child,
body.ltr table.data thead td:first-child {
  border-bottom-left-radius: 5px;
}
body.rtl table.data thead th:first-child,
body.rtl table.data thead td:first-child {
  border-bottom-right-radius: 5px;
}
body.ltr table.data thead th:last-child,
body.ltr table.data thead td:last-child {
  border-top-right-radius: 5px;
}
body.rtl table.data thead th:last-child,
body.rtl table.data thead td:last-child {
  border-top-left-radius: 5px;
}
body.ltr table.data thead th:last-child,
body.ltr table.data thead td:last-child {
  border-bottom-right-radius: 5px;
}
body.rtl table.data thead th:last-child,
body.rtl table.data thead td:last-child {
  border-bottom-left-radius: 5px;
}
table.data thead th {
  white-space: nowrap;
}
table.data thead th.orderable:not(.ordered):hover {
  background-color: hsl(212deg, 50%, 93%);
}
table.data thead th.ordered {
  background-color: hsl(212deg, 30%, 85%);
}
table.data thead th.ordered {
  background-image: url(../images/listview_sort.png);
  background-repeat: no-repeat;
}
body.ltr table.data thead th.ordered {
  padding-right: 26px;
}
body.rtl table.data thead th.ordered {
  padding-left: 26px;
}
body.ltr table.data thead th.ordered:first-child {
  padding-left: 10px;
}
body.rtl table.data thead th.ordered:first-child {
  padding-right: 10px;
}
body.ltr table.data thead th.ordered:not(.desc) {
  background-position: 100% 9px;
}
body.rtl table.data thead th.ordered:not(.desc) {
  background-position: 0 9px;
}
body.ltr table.data thead th.ordered.desc {
  background-position: 100% -22px;
}
body.rtl table.data thead th.ordered.desc {
  background-position: 0 -22px;
}
table.data thead th.ordered.loading {
  background-image: url(../images/spinner_tableheader.gif);
}
body.ltr table.data thead th.ordered.loading {
  background-position: 100% 16px;
}
body.rtl table.data thead th.ordered.loading {
  background-position: 0 16px;
}
table.data tbody tr {
  outline: none;
}
table.data tbody tr:not(.disabled):hover th,
table.data tbody tr:not(.disabled):hover td {
  background-color: hsl(212deg, 60%, 97%);
}
table.data tbody tr:not(.disabled).sel th,
table.data tbody tr:not(.disabled).sel td {
  background-color: hsl(212deg, 30%, 85%);
}
table.data tbody th,
table.data tbody td {
  border-top: 1px solid transparent;
  padding-top: 7px;
  padding-bottom: 7px;
  background-clip: padding-box;
}
table.data tbody td.timestamp {
  vertical-align: bottom;
  white-space: nowrap;
  color: hsl(211deg, 13%, 65%);
}
body.ltr table.data tbody td.timestamp {
  text-align: right;
}
body.rtl table.data tbody td.timestamp {
  text-align: left;
}
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;
  width: auto !important;
  white-space: normal;
}
body.ltr table.collapsed,
body.ltr table.collapsed tbody,
body.ltr table.collapsed tbody tr,
body.ltr table.collapsed tbody th,
body.ltr table.collapsed tbody td {
  text-align: left;
}
body.rtl table.collapsed,
body.rtl table.collapsed tbody,
body.rtl table.collapsed tbody tr,
body.rtl table.collapsed tbody th,
body.rtl table.collapsed tbody td {
  text-align: right;
}
table.collapsed thead {
  display: none;
}
table.collapsed tbody tr {
  padding: 6px 0;
  border-bottom: 1px dotted rgba(51, 64, 77, 0.1);
}
table.collapsed tbody tr:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
table.collapsed tbody th,
table.collapsed tbody td {
  padding: 2px 0 !important;
}
table.collapsed tbody td:empty {
  display: none;
}
body.ltr table.collapsed tbody [data-title] {
  margin-right: 0;
}
body.rtl table.collapsed tbody [data-title] {
  margin-left: 0;
}
table.collapsed tbody [data-title]:before {
  margin-right: 5px;
  content: attr(data-title) ":";
  font-weight: bold;
}
table.collapsed tbody [data-title] form {
  display: inline-block;
}

.datatablesorthelper,
.editabletablesorthelper,
.thumbviewhelper {
  background-color: #fff;
  box-shadow: 0 1px 5px -1px rgba(31, 41, 51, 0.2);
}

.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;
}

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

/* elements */
.element {
  position: relative;
  cursor: default;
  outline: none !important;
  user-select: none;
}
.element:focus, li:focus .element {
  background-color: hsl(212deg, 60%, 97%);
}
.element.sel, li.sel .element {
  background-color: hsl(212deg, 30%, 85%) !important;
  cursor: default;
}
.element.sel.loading:after, li.sel .element.loading:after {
  background-image: url(../images/spinner_element.gif);
}
.element.hasthumb .elementthumb img {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  pointer-events: none;
}
.element .label {
  display: inline-block;
}
.element.small, .element.large:not(.hasthumb) {
  display: inline-block;
  padding: 7px;
  border-radius: 17px;
  box-sizing: border-box;
}
body.ltr .element.small.hasstatus, body.ltr .element.large:not(.hasthumb).hasstatus {
  padding-left: 22px;
}
body.rtl .element.small.hasstatus, body.rtl .element.large:not(.hasthumb).hasstatus {
  padding-right: 22px;
}
.element.small.hasstatus .status, .element.large:not(.hasthumb).hasstatus .status {
  position: absolute;
  top: calc(50% - 5px);
}
body.ltr .element.small.hasstatus .status, body.ltr .element.large:not(.hasthumb).hasstatus .status {
  left: 7px;
}
body.rtl .element.small.hasstatus .status, body.rtl .element.large:not(.hasthumb).hasstatus .status {
  right: 7px;
}
body.ltr .element.small.hasthumb, body.ltr .element.large:not(.hasthumb).hasthumb {
  padding-left: 38px;
}
body.rtl .element.small.hasthumb, body.rtl .element.large:not(.hasthumb).hasthumb {
  padding-right: 38px;
}
.element.small.hasthumb .elementthumb, .element.large:not(.hasthumb).hasthumb .elementthumb {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(50% - 16px);
  width: 32px;
  height: 32px;
  border-radius: 16px;
  overflow: hidden;
}
body.ltr .element.small.hasthumb .elementthumb, body.ltr .element.large:not(.hasthumb).hasthumb .elementthumb {
  left: 1px;
}
body.rtl .element.small.hasthumb .elementthumb, body.rtl .element.large:not(.hasthumb).hasthumb .elementthumb {
  right: 1px;
}
body.ltr .element.small.hasthumb.hasstatus, body.ltr .element.large:not(.hasthumb).hasthumb.hasstatus {
  padding-left: 53px;
}
body.rtl .element.small.hasthumb.hasstatus, body.rtl .element.large:not(.hasthumb).hasthumb.hasstatus {
  padding-right: 53px;
}
body.ltr .element.small.hasthumb.hasstatus .status, body.ltr .element.large:not(.hasthumb).hasthumb.hasstatus .status {
  left: 38px;
}
body.rtl .element.small.hasthumb.hasstatus .status, body.rtl .element.large:not(.hasthumb).hasthumb.hasstatus .status {
  right: 38px;
}
.element.large.hasthumb {
  display: block;
  padding: 132px 7px 7px;
  width: 134px;
  box-sizing: border-box;
  border-radius: 3px;
}
body.ltr .element.large.hasthumb.hasstatus {
  padding-left: 22px;
}
body.rtl .element.large.hasthumb.hasstatus {
  padding-right: 22px;
}
.element.large.hasthumb.hasstatus .status {
  position: absolute;
  top: 138px;
}
body.ltr .element.large.hasthumb.hasstatus .status {
  left: 7px;
}
body.rtl .element.large.hasthumb.hasstatus .status {
  right: 7px;
}
.element.large.hasthumb .elementthumb {
  position: absolute;
  top: 7px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  -ms-flex-pack: center;
  align-items: center;
  -ms-flex-align: center;
  width: 120px;
  height: 120px;
  border-radius: 5px;
}
body.ltr .element.large.hasthumb .elementthumb {
  left: 7px;
}
body.rtl .element.large.hasthumb .elementthumb {
  right: 7px;
}
.element.large.hasthumb .label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
}
body.ltr .element.removable .label {
  padding-right: 20px;
}
body.rtl .element.removable .label {
  padding-left: 20px;
}
.element.removable .delete:before {
  color: rgba(123, 135, 147, 0.5);
}
.element.removable.small .delete, .element.removable.large:not(.hasthumb) .delete {
  position: absolute;
  top: calc(50% - 11px);
}
body.ltr .element.removable.small .delete, body.ltr .element.removable.large:not(.hasthumb) .delete {
  right: 7px;
}
body.rtl .element.removable.small .delete, body.rtl .element.removable.large:not(.hasthumb) .delete {
  left: 7px;
}
.element.removable.large.hasthumb .delete {
  position: absolute;
}
body.ltr .element.removable.large.hasthumb .delete {
  right: 7px;
}
body.rtl .element.removable.large.hasthumb .delete {
  left: 7px;
}
body.ltr .element.loading {
  padding-right: 31px;
}
body.rtl .element.loading {
  padding-left: 31px;
}
.element.loading:after {
  content: ".";
  font-size: 0;
  position: absolute;
  bottom: 0;
  width: 24px;
  background: url(../images/spinner.gif) no-repeat 50% 50%;
  height: 32px;
}
body.ltr .element.loading:after {
  right: 3px;
}
body.rtl .element.loading:after {
  left: 3px;
}
.element.loading.removable .delete {
  display: none;
}

.elements {
  position: relative;
}
.elements.busy {
  min-height: 200px;
}
.elements.busy:after {
  display: block;
  content: ".";
  font-size: 0;
  position: absolute;
  top: 0;
  left: -24px;
  width: calc(100% + 48px);
  height: 100%;
  background: rgba(255, 255, 255, 0.75) url(../images/spinner.gif) no-repeat 50% 50%;
  border-radius: 5px;
}
.elements .header {
  margin: -24px -24px 24px;
  padding: 14px 24px;
  background-color: hsl(212deg, 60%, 97%);
  box-shadow: none;
}
.elements .header:after {
  content: "";
}
.elements .header .selectallcontainer {
  cursor: default;
}
.elements .header .selectallcontainer:focus {
  outline: none;
}
body.ltr .elements .header .selectallcontainer .checkbox {
  margin-right: 5px;
}
body.rtl .elements .header .selectallcontainer .checkbox {
  margin-left: 5px;
}
.elements .tableview thead th.selectallcontainer {
  outline: none;
}
.elements .tableview .move {
  display: block;
  position: absolute;
  top: calc(50% - 11px);
  font-size: 11px;
  text-decoration: none;
}
body.ltr .elements .tableview .move {
  margin-left: -14px;
}
body.rtl .elements .tableview .move {
  margin-right: -14px;
}
.elements .tableview .toggle {
  display: block;
  position: absolute;
  top: calc(50% - 8px);
}
body.ltr .elements .tableview .toggle {
  margin-left: -20px;
}
body.rtl .elements .tableview .toggle {
  margin-right: -20px;
}
body.ltr .elements .tableview .move + .toggle {
  margin-left: -34px;
}
body.rtl .elements .tableview .move + .toggle {
  margin-right: -34px;
}
.elements .thumbsview {
  width: calc(100% + 15px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
body.ltr .elements .thumbsview {
  margin: -7px -8px -8px -7px;
}
body.rtl .elements .thumbsview {
  margin: -7px -7px -8px -8px;
}
.elements .thumbsview li {
  position: relative;
  outline: none;
}
body.ltr .elements .thumbsview li {
  margin: 0 1px 1px 0;
}
body.rtl .elements .thumbsview li {
  margin: 0 0 1px 1px;
}
.elements .thumbsview li:hover .element {
  background-color: hsl(212deg, 60%, 97%);
}
.elements .thumbsview li.has-checkbox .checkbox {
  position: absolute;
  top: 109px;
}
body.ltr .elements .thumbsview li.has-checkbox .checkbox {
  left: 9px;
}
body.rtl .elements .thumbsview li.has-checkbox .checkbox {
  right: 9px;
}
@supports (backdrop-filter: blur(10px)) {
  .elements .thumbsview li.has-checkbox div.checkbox:before {
    background-color: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
  }
  .elements .thumbsview li.has-checkbox:focus div.checkbox:before {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.5);
  }
}

.export-form {
  position: relative;
}
.export-form .spinner {
  position: absolute;
  bottom: 0;
}
body.ltr .export-form .spinner {
  right: -24px;
}
body.rtl .export-form .spinner {
  left: -24px;
}

.thumbviewhelper {
  margin: -7px;
  padding: 7px;
}
.thumbviewhelper .thumbsview,
.thumbviewhelper .thumbsview li {
  margin: 0 !important;
}

/* structures */
.structure {
  position: relative;
  z-index: 1;
}
body.ltr .structure li {
  padding-left: 8px;
}
body.rtl .structure li {
  padding-right: 8px;
}
.structure li.collapsed > ul {
  display: none;
}
.structure li .row:hover > .icon, .structure li.draghelper > .row .move,
.structure li .add.active {
  opacity: 1;
}
.structure li.draghelper > .row .add {
  opacity: 0;
}
.structure li.draghelper > .row .move:before {
  color: #0B69A3;
}
.structure li.draginsertion {
  position: relative;
  height: 2px;
  background-color: #0B69A3 !important;
  border-radius: 1px;
}
body.ltr .structure li.draginsertion {
  margin: -1px 0 -1px 8px;
}
body.rtl .structure li.draginsertion {
  margin: -1px 8px -1px 0;
}
body.ltr .structure li.draginsertion {
  padding-left: 0;
}
body.rtl .structure li.draginsertion {
  padding-right: 0;
}
body.ltr .structure li.draginsertion {
  border-left: none;
}
body.rtl .structure li.draginsertion {
  border-right: none;
}
.structure li .toggle {
  position: relative;
  z-index: 1;
}
body.ltr .structure li .toggle {
  float: left;
}
body.rtl .structure li .toggle {
  float: right;
}
body.ltr .structure li .toggle {
  margin: 4px -8px 0 -12px;
}
body.rtl .structure li .toggle {
  margin: 4px -12px 0 -8px;
}
.structure li .row:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.structure li .move,
.structure li .add {
  opacity: 0;
  transition: opacity linear 100ms;
}
body.ltr .structure li .move,
body.ltr .structure li .add {
  margin: 5px 5px 0 0;
}
body.rtl .structure li .move,
body.rtl .structure li .add {
  margin: 5px 0 0 5px;
}
.structure li .add {
  padding: 0 5px;
}
.structure li .add:before {
  content: "downangle";
  color: rgba(123, 135, 147, 0.5);
}
.structure li .add:not(.disabled):hover:before, .structure li .add.active:before {
  color: #0B69A3;
}
body.ltr .structure li .checkbox {
  float: left;
}
body.rtl .structure li .checkbox {
  float: right;
}
body.ltr .structure li .checkbox {
  margin: 7px 0 0 7px;
}
body.rtl .structure li .checkbox {
  margin: 7px 7px 0 0;
}
body.ltr .structure ul {
  margin-left: -3px;
}
body.rtl .structure ul {
  margin-right: -3px;
}
.structure ul li {
  background-repeat: no-repeat;
}
body.ltr .structure ul li {
  padding-left: 38px;
}
body.rtl .structure ul li {
  padding-right: 38px;
}
body.ltr .structure ul li {
  background-image: url(../images/branch.png);
  background-position: 0 0;
}
body.rtl .structure ul li {
  background-image: url(../images/branch_rtl.png);
  background-position: 100% 0;
}
body.ltr .structure ul li:not(:last-child):not(.last) {
  padding-left: 37px;
}
body.rtl .structure ul li:not(:last-child):not(.last) {
  padding-right: 37px;
}
body.ltr .structure ul li:not(:last-child):not(.last) {
  border-left: 1px solid rgba(51, 64, 77, 0.1);
}
body.rtl .structure ul li:not(:last-child):not(.last) {
  border-right: 1px solid rgba(51, 64, 77, 0.1);
}
body.ltr .structure ul li:not(:last-child):not(.last) {
  background-position: -1px 0;
}
body.rtl .structure ul li:not(:last-child):not(.last) {
  background-position: calc(100% + 1px) 0;
}
body.ltr .structure ul li.draginsertion {
  margin-left: 38px;
}
body.rtl .structure ul li.draginsertion {
  margin-right: 38px;
}
.structure .row.draghover .element {
  z-index: 2;
  border-radius: 15px;
  box-shadow: inset 0 0 0 2px #0B69A3;
}
.structure .row.droptarget {
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #0B69A3;
}

/* element select fields */
.elementselect {
  position: relative;
  min-height: 37px;
  margin-top: -7px;
}
.elementselect:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
body.ltr .elementselect .element,
body.ltr .elementselect .btn {
  float: left;
}
body.rtl .elementselect .element,
body.rtl .elementselect .btn {
  float: right;
}
body.ltr .elementselect .element,
body.ltr .elementselect .btn {
  margin: 7px 7px 0 0;
}
body.rtl .elementselect .element,
body.rtl .elementselect .btn {
  margin: 7px 0 0 7px;
}
.elementselect .element.small,
.elementselect .btn {
  clear: both;
}
.elementselect .element {
  z-index: 1;
}
.elementselect .element.small {
  max-width: 100%;
}
.elementselect .element.small .label {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.ltr .elementselect .caboose {
  float: left;
}
body.rtl .elementselect .caboose {
  float: right;
}

/* editable tables */
table.editable {
  border-radius: 5px;
  border: 1px solid hsl(212deg, 30%, 85%);
}
table.editable th,
table.editable td.action {
  color: hsl(211deg, 10%, 53%);
  font-weight: normal;
  background-color: hsl(212deg, 60%, 97%);
}
table.editable thead tr th,
table.editable tbody tr th {
  padding: 6px 10px;
}
table.editable thead tr th {
  border-bottom: 1px solid rgba(51, 64, 77, 0.1);
}
body.ltr table.editable thead tr th.has-info {
  padding-right: calc(15px + 1em);
}
body.rtl table.editable thead tr th.has-info {
  padding-left: calc(15px + 1em);
}
table.editable thead tr th span.info {
  position: absolute;
  margin-left: 5px;
}
table.editable tbody tr:not(:first-child) th,
table.editable tbody tr:not(:first-child) td {
  border-top: 1px solid rgba(51, 64, 77, 0.1);
}
body.ltr table.editable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
body.rtl table.editable tbody tr:last-child td:first-child {
  border-bottom-right-radius: 5px;
}
body.ltr table.editable tbody tr:last-child td:first-child textarea,
body.ltr table.editable tbody tr:last-child td:first-child input.text {
  border-bottom-left-radius: 4px;
}
body.rtl table.editable tbody tr:last-child td:first-child textarea,
body.rtl table.editable tbody tr:last-child td:first-child input.text {
  border-bottom-right-radius: 4px;
}
body.ltr table.editable tbody tr td:not(:first-child),
body.ltr table.editable tbody tr th ~ td:not(.hidden) ~ td {
  border-left: 1px solid rgba(51, 64, 77, 0.1);
}
body.rtl table.editable tbody tr td:not(:first-child),
body.rtl table.editable tbody tr th ~ td:not(.hidden) ~ td {
  border-right: 1px solid rgba(51, 64, 77, 0.1);
}
body.ltr table.editable tbody tr th ~ td:not(:first-child) {
  border-left: 1px solid #dbdddf;
}
body.rtl table.editable tbody tr th ~ td:not(:first-child) {
  border-right: 1px solid #dbdddf;
}
table.editable tbody tr td {
  vertical-align: top;
  text-align: center;
  background-color: #fff;
  padding: 4px 10px;
}
table.editable tbody tr td.focus {
  box-shadow: inset 0 0 0 1px rgba(51, 64, 77, 0.1);
}
table.editable tbody tr td.textual {
  padding: 0;
}
table.editable tbody tr td.textual textarea {
  resize: none;
}
table.editable tbody tr td.textual pre {
  white-space: pre-wrap;
}
body.ltr table.editable tbody tr td.textual pre {
  text-align: left;
}
body.rtl table.editable tbody tr td.textual pre {
  text-align: right;
}
table.editable tbody tr td.lightswitch-cell {
  padding-top: 9px;
  padding-bottom: 9px;
}
table.editable tbody tr td.lightswitch-cell .lightswitch {
  display: block;
  margin: 0 auto;
}
table.editable tbody tr td.checkbox-cell {
  padding-top: 10px;
  padding-bottom: 10px;
}
table.editable tbody tr td.checkbox-cell .checkbox-wrapper {
  display: block;
  margin: -2px auto 0;
  width: 16px;
  height: 16px;
}
table.editable tbody tr td.error {
  box-shadow: inset 0 0 0 1px #EF4E4E;
}
table.editable tbody tr td.disabled {
  position: relative;
  opacity: 1;
}
table.editable tbody tr td.disabled:after {
  content: ".";
  font-size: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(243, 247, 252, 0.75);
  user-select: none;
}
table.editable tbody tr td.action {
  padding: 4px 7px;
}
body.ltr table.editable tbody tr td.action + td.action {
  border-left: none;
}
body.rtl table.editable tbody tr td.action + td.action {
  border-right: none;
}
body.ltr table.editable tbody tr td.action + td.action {
  padding-left: 0;
}
body.rtl table.editable tbody tr td.action + td.action {
  padding-right: 0;
}
table.editable tbody tr td .flex > * {
  margin-bottom: 0;
}
table.editable tbody textarea,
table.editable tbody textarea.text,
table.editable tbody input.text,
table.editable tbody pre {
  display: block;
  width: 100%;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 7px 10px;
  background-color: transparent;
  overflow: hidden;
  transition: none;
  box-sizing: border-box;
}
table.editable tbody textarea:focus,
table.editable tbody textarea.text:focus,
table.editable tbody input.text:focus,
table.editable tbody pre:focus {
  outline: none;
}
table.editable tbody .color-container {
  display: block;
  position: relative;
}
table.editable tbody .color-container > .color, table.editable tbody .color-container > .color-input {
  margin-bottom: 0;
}
table.editable tbody .color-container > .color {
  position: absolute;
  top: 10px;
}
body.ltr table.editable tbody .color-container > .color {
  left: 10px;
}
body.rtl table.editable tbody .color-container > .color {
  right: 10px;
}
body.ltr table.editable tbody .color-container > .color-input {
  padding-left: 35px;
}
body.rtl table.editable tbody .color-container > .color-input {
  padding-right: 35px;
}
table.editable tbody .datewrapper,
table.editable tbody .timewrapper {
  display: block;
  width: 100%;
}
table.editable tbody .datewrapper .text:placeholder-shown + div[data-icon],
table.editable tbody .timewrapper .text:placeholder-shown + div[data-icon] {
  top: 6px;
}
body.ltr table.editable tbody .datewrapper .text:placeholder-shown + div[data-icon],
body.ltr table.editable tbody .timewrapper .text:placeholder-shown + div[data-icon] {
  left: 10px;
}
body.rtl table.editable tbody .datewrapper .text:placeholder-shown + div[data-icon],
body.rtl table.editable tbody .timewrapper .text:placeholder-shown + div[data-icon] {
  right: 10px;
}
table.editable:not(.static) td.textual {
  cursor: text;
}
table.editable + .btn.add {
  display: block;
  border-radius: 0 0 4px 4px;
  border: 1px dashed rgba(81, 95, 108, 0.25);
  border-top-width: 0;
  background-color: transparent;
  box-shadow: none;
}
table.editable + .btn.add:focus {
  border-style: solid;
  border-color: #1992D4;
}

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

/* ----------------------------------------
/*  Nav
/* ----------------------------------------*/
body.ltr ul.tree,
body.ltr .tree ul {
  margin-left: 20px;
}
body.rtl ul.tree,
body.rtl .tree ul {
  margin-right: 20px;
}

body.ltr .tree li .toggle {
  margin: 7px 0 0 -15px;
}
body.rtl .tree li .toggle {
  margin: 7px -15px 0 0;
}

/* status icons */
.status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  border: 1px solid transparent;
}
body.ltr .status {
  margin-right: 10px;
}
body.rtl .status {
  margin-left: 10px;
}

.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(96, 125, 159, 0.8);
}

.green,
.status.on,
.status.live,
.status.active,
.status.enabled {
  background-color: #27AB83;
}

/* green */
.orange,
.status.pending {
  background-color: #CB6E17;
}

/* orange */
.red,
.status.off,
.status.suspended,
.status.expired {
  background-color: #CF1124;
}

/* red */
.yellow {
  background-color: #FADB5F;
}

.pink {
  background-color: #E8368F;
}

.purple {
  background-color: #9B59B6;
}

.blue {
  background-color: #1992D4;
}

.turquoise {
  background-color: #65D6AD;
}

.status.light {
  background-color: hsl(212deg, 50%, 93%);
}

.grey {
  background-color: hsl(211deg, 13%, 65%);
}

.black {
  background-color: hsl(209deg, 20%, 25%);
}

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

/* ----------------------------------------
/*  Progress bar
/* ----------------------------------------*/
.progressbar {
  border-radius: 6px;
  border: 2px solid hsl(209deg, 18%, 30%);
  padding: 2px;
  position: absolute;
  left: 20%;
  width: 60%;
}

.progressbar-inner {
  border-radius: 2px;
  height: 4px;
  background-color: hsl(209deg, 18%, 30%);
}

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

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

@-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-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
}
body.ltr .elementselect .progress-shade {
  left: 0;
}
body.rtl .elementselect .progress-shade {
  right: 0;
}

.elementselect.uploading {
  position: relative;
}

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

.missing-component {
  padding: 7px 10px !important;
  max-width: 400px;
  background-color: hsl(212deg, 60%, 97%) !important;
}
.missing-component .error {
  margin: 0;
}
.missing-component .install-plugin {
  margin: 7px 0 -7px;
  border-top: 1px solid rgba(51, 64, 77, 0.1);
  position: relative;
}
body.ltr .missing-component .install-plugin {
  padding: 10px 0 10px 40px;
}
body.rtl .missing-component .install-plugin {
  padding: 10px 40px 10px 0;
}
.missing-component .install-plugin .icon {
  width: 32px;
  height: 32px;
  position: absolute;
  top: calc(50% - 16px);
}
body.ltr .missing-component .install-plugin .icon {
  left: 0;
}
body.rtl .missing-component .install-plugin .icon {
  right: 0;
}
.missing-component .install-plugin .icon img, .missing-component .install-plugin .icon svg {
  width: 100%;
  height: 100%;
}
.missing-component .install-plugin h3 {
  flex: 1;
  margin: 8px 0 !important;
}
.missing-component .install-plugin .btn {
  margin: 0;
}

/* ----------------------------------------
/*  Panes, Modals and HUDs
/* ----------------------------------------*/
.pane {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(205, 216, 228, 0.25), 0 2px 12px rgba(205, 216, 228, 0.5);
  position: relative;
  margin: 14px 0;
  padding: 24px;
  border-radius: 5px;
  word-wrap: break-word;
  box-sizing: border-box;
}
.pane .pane, #content .pane {
  background-color: hsl(212deg, 60%, 97%);
  border: 1px solid rgba(51, 64, 77, 0.1);
  box-shadow: none;
}

/* meta panes */
.meta {
  padding: 0;
  overflow: visible;
}
.meta > .field, .meta > .data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 24px;
  transition: padding-left linear 100ms, padding-right linear 100ms;
}
body.ltr .meta > .field.nested, body.ltr .meta > .data.nested {
  padding-left: 38px;
}
body.rtl .meta > .field.nested, body.rtl .meta > .data.nested {
  padding-right: 38px;
}
.meta > .field > .heading, .meta > .data > .heading {
  flex: 0 0 105px;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 18px;
}
.meta > .field.lightswitch-field > .heading, .meta > .data.lightswitch-field > .heading {
  flex: 1;
}
.meta > .field > .input .flex, .meta > .data > .input .flex {
  flex-wrap: nowrap;
}
.meta > .field > .input .flex > *, .meta > .data > .input .flex > * {
  margin-bottom: 0;
}
.meta > .field > .heading {
  padding: 14px 0;
}
.meta > .data > .heading {
  padding: 7px 0;
}
.meta > .field > .heading > label, .meta > .data > .heading {
  color: hsl(211deg, 10%, 53%);
}
.meta > .field > .input, .meta > .data > .value {
  padding: 7px 0;
  width: calc(100% - 112px);
}
.meta > .field.lightswitch-field > .input {
  width: auto;
}
.meta > .field.has-errors {
  margin: 0 -1px !important;
  border: 1px solid #EF4E4E !important;
}
.meta > .field.has-errors:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.meta > .field.has-errors:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.meta > .field.has-errors + .field {
  border-top: none !important;
}
.meta > .field + .field {
  border-top: 1px solid rgba(51, 64, 77, 0.1);
}
.meta > .field > .heading > label {
  font-weight: normal;
}
.meta > .field > .heading > label.required:after {
  position: absolute;
  top: 6px;
}
body.ltr .meta > .field > .heading > label.required:after {
  left: -13px;
}
body.rtl .meta > .field > .heading > label.required:after {
  right: -13px;
}
body.ltr .meta > .field > .heading > label.required:after {
  margin-left: 0;
}
body.rtl .meta > .field > .heading > label.required:after {
  margin-right: 0;
}
.meta > .field > .input > .text, .meta > .field > .input > .flex > .text, .meta > .field > .input > .flex > .textwrapper > .text, .meta > .field > .input > .datewrapper > .text, .meta > .field > .input > .timewrapper > .text, .meta > .field > .input > .datetimewrapper > .datewrapper > .text, .meta > .field > .input > .datetimewrapper > .timewrapper > .text {
  display: block;
  margin: -7px 0;
  padding: 14px 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  border: none !important;
}
.meta > .field > .input > .datewrapper, .meta > .field > .input > .timewrapper, .meta > .field > .input > .datetimewrapper > .datewrapper, .meta > .field > .input > .datetimewrapper > .timewrapper {
  background-color: transparent;
}
body.ltr .meta > .field > .input > .datewrapper .text:placeholder-shown + div[data-icon], body.ltr .meta > .field > .input > .timewrapper .text:placeholder-shown + div[data-icon], body.ltr .meta > .field > .input > .datetimewrapper > .datewrapper .text:placeholder-shown + div[data-icon], body.ltr .meta > .field > .input > .datetimewrapper > .timewrapper .text:placeholder-shown + div[data-icon] {
  left: 0;
}
body.rtl .meta > .field > .input > .datewrapper .text:placeholder-shown + div[data-icon], body.rtl .meta > .field > .input > .timewrapper .text:placeholder-shown + div[data-icon], body.rtl .meta > .field > .input > .datetimewrapper > .datewrapper .text:placeholder-shown + div[data-icon], body.rtl .meta > .field > .input > .datetimewrapper > .timewrapper .text:placeholder-shown + div[data-icon] {
  right: 0;
}
body.ltr .meta > .field > .input > .datetimewrapper > .datewrapper, body.ltr .meta > .field > .input > .datetimewrapper > .timewrapper {
  float: left;
}
body.rtl .meta > .field > .input > .datetimewrapper > .datewrapper, body.rtl .meta > .field > .input > .datetimewrapper > .timewrapper {
  float: right;
}
.meta > .field > .input > .datetimewrapper > .datewrapper {
  width: 55%;
}
.meta > .field > .input > .datetimewrapper > .timewrapper {
  width: 45%;
}
.meta > .field > .input > .datewrapper, .meta > .field > .input > .timewrapper {
  display: block;
  width: 100%;
}
.meta > .field > ul.errors {
  margin: 0;
  padding: 0 0 6px;
  width: 100%;
  list-style-type: none;
}

.meta > .field > .input > .select {
  display: block;
  margin: -7px 0;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}
body.ltr .meta > .field > .input > .select:after {
  right: 0;
}
body.rtl .meta > .field > .input > .select:after {
  left: 0;
}
.meta > .field > .input > .select + .spinner {
  position: absolute;
  top: calc(50% - 17px);
}
body.ltr .meta > .field > .input > .select + .spinner {
  right: -24px;
}
body.rtl .meta > .field > .input > .select + .spinner {
  left: -24px;
}
.meta > .field > .input > .select select {
  width: 100%;
  background-color: transparent;
}
body.ltr .meta > .field > .input > .select select {
  padding: 7px 12px 7px 0;
}
body.rtl .meta > .field > .input > .select select {
  padding: 7px 0 7px 12px;
}

.body {
  position: relative;
}

.header:after,
.hud-header:after,
.footer:after,
.hud-footer:after,
.body:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

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

.header,
.hud-header,
.footer,
.hud-footer {
  background-color: hsl(212deg, 50%, 93%);
}

.header,
.hud-header {
  border-radius: 5px 5px 0 0;
  padding: 24px;
  box-shadow: inset 0 -1px 0 rgba(51, 64, 77, 0.1);
}
.header h1,
.hud-header h1 {
  margin: 0;
}

.footer,
.hud-footer {
  border-radius: 0 0 5px 5px;
  padding: 14px 24px;
  box-shadow: inset 0 1px 0 rgba(51, 64, 77, 0.1);
}
.footer.flex > *,
.hud-footer.flex > * {
  margin-bottom: 0;
}

.hud {
  position: absolute;
  display: none;
  top: 0;
}
.hud.has-footer .tip-bottom {
  background-image: url(../images/hudtip_bottom_gray.png);
}
.hud .tip {
  position: absolute;
  z-index: 101;
  background: no-repeat 0 0;
}
.hud .tip-left {
  left: -15px;
  width: 15px;
  height: 30px;
  background-image: url(../images/hudtip_left.png);
}
.hud .tip-top {
  top: -15px;
  width: 30px;
  height: 15px;
  background-image: url(../images/hudtip_top.png);
}
.hud .tip-right {
  right: -15px;
  width: 15px;
  height: 30px;
  background-image: url(../images/hudtip_right.png);
}
.hud .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;
}
.hud .body ::-webkit-scrollbar {
  appearance: none;
}
.hud .body ::-webkit-scrollbar:vertical {
  width: 11px;
}
.hud .body ::-webkit-scrollbar:horizontal {
  height: 11px;
}
.hud .body ::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid transparent;
  background-color: rgba(0, 0, 0, 0.5);
  background-clip: content-box;
}
.hud .body ::-webkit-scrollbar-track {
  background-color: hsl(212deg, 60%, 97%);
}

/* inline asset previews */
.preview-thumb-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 190px;
  background-color: hsl(210deg, 24%, 16%);
}
.preview-thumb-container.loading:after {
  content: ".";
  font-size: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(31, 41, 51, 0.8) no-repeat 50% 50% url(../images/spinner_dark.gif);
}
#details .preview-thumb-container {
  margin-bottom: 14px;
  border-radius: 5px;
  overflow: hidden;
}
.preview-thumb-container .preview-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.preview-thumb-container .preview-thumb img {
  display: block;
  max-width: 100%;
  max-height: 190px;
}
.preview-thumb-container.editable {
  cursor: pointer;
}
.preview-thumb-container .buttons {
  opacity: 0;
  position: absolute;
  top: 10px;
  margin: 0;
  transition: opacity linear 100ms;
}
body.ltr .preview-thumb-container .buttons {
  right: 10px;
}
body.rtl .preview-thumb-container .buttons {
  left: 10px;
}
.preview-thumb-container .buttons .btn {
  background-color: hsl(209deg, 14%, 37%);
  color: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}
@supports (backdrop-filter: blur(10px)) {
  .preview-thumb-container .buttons .btn {
    background-color: rgba(81, 95, 108, 0.4);
    backdrop-filter: blur(10px);
    transition: opacity linear 100ms, backdrop-filter linear 100ms;
  }
}
.preview-thumb-container:hover .buttons {
  opacity: 1;
}
.preview-thumb-container:not(.editable) .buttons .btn:hover {
  background-color: hsl(211deg, 12%, 43%);
}
@supports (backdrop-filter: blur(10px)) {
  .preview-thumb-container:not(.editable) .buttons .btn:hover {
    background-color: rgba(96, 109, 123, 0.7);
  }
}

/* element editor HUDs */
@media (min-width: 440px) {
  .hud .elementeditor {
    min-width: 380px;
  }
}
.hud .elementeditor {
  max-width: 600px;
}
.hud .elementeditor .hud-header {
  text-align: center;
}
.hud .elementeditor .main {
  padding: 8px 0;
}
.hud .elementeditor .main .meta .preview-thumb-container {
  margin: -8px 0 8px;
}
.hud .elementeditor .main .meta .field {
  padding-left: 24px;
  padding-right: 24px;
}

/* element selector modals */
.elementselectormodal {
  padding-bottom: 62px;
  user-select: none;
}
.elementselectormodal .body {
  position: relative;
  height: 100%;
}
.elementselectormodal .body .spinner.big {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -24px 0 0 -24px;
}
.elementselectormodal .body .content {
  height: calc(100% + 48px);
}
.elementselectormodal .body .content .sidebar {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: auto;
}
body.ltr .elementselectormodal .body .content .sidebar {
  margin-left: -249px;
}
body.rtl .elementselectormodal .body .content .sidebar {
  margin-right: -249px;
}
.elementselectormodal .body .content .main {
  margin: -24px;
  padding: 24px;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
}
.elementselectormodal .body .content .main .elements.busy {
  min-height: calc(100% - 48px);
}
.elementselectormodal .body .content .main .elements .tableview table .element {
  display: inline-block;
}
.elementselectormodal .body .content .main .elements .tableview table tr:focus {
  outline: none;
}
.elementselectormodal .body .content .main .elements .tableview table tr.disabled {
  opacity: 1;
  color: hsl(212deg, 30%, 85%);
}
.elementselectormodal .body .content .main .elements .tableview table tr.disabled .element {
  opacity: 0.25;
}
.elementselectormodal .body .content .main .elements .tableview table tr th,
.elementselectormodal .body .content .main .elements .tableview table tr td {
  cursor: default;
}
body.ltr .elementselectormodal .body .content .main .elements .tableview table tr td:first-child {
  padding-left: 7px;
}
body.rtl .elementselectormodal .body .content .main .elements .tableview table tr td:first-child {
  padding-right: 7px;
}
.elementselectormodal .body .content .main .elements .structure .row {
  margin-top: 1px;
  outline: none;
}
.elementselectormodal .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.elementselectormodal .footer .buttons {
  margin: 0;
}
body.ltr .elementselectormodal .footer .spinner {
  float: right;
}
body.rtl .elementselectormodal .footer .spinner {
  float: left;
}
body.ltr .elementselectormodal .footer .spinner {
  margin-right: -24px;
}
body.rtl .elementselectormodal .footer .spinner {
  margin-left: -24px;
}

/* element editing HUD */
.element-hud-form .buttons {
  position: relative;
}
.element-hud-form .buttons .spinner {
  position: absolute;
  top: 0;
}
body.ltr .element-hud-form .buttons .spinner {
  right: -24px;
}
body.rtl .element-hud-form .buttons .spinner {
  left: -24px;
}

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

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

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

#loginmodal .inputcontainer,
#elevatedsessionmodal .inputcontainer {
  position: relative;
}
#loginmodal .inputcontainer .spinner,
#elevatedsessionmodal .inputcontainer .spinner {
  position: absolute;
  top: 0;
  margin-top: 0;
}
body.ltr #loginmodal .inputcontainer .spinner,
body.ltr #elevatedsessionmodal .inputcontainer .spinner {
  right: -24px;
}
body.rtl #loginmodal .inputcontainer .spinner,
body.rtl #elevatedsessionmodal .inputcontainer .spinner {
  left: -24px;
}

/* delete user modal */
.deleteusermodal .content-summary {
  margin: -24px -24px 24px;
  padding: 24px;
  background-color: hsl(212deg, 60%, 97%);
}
.deleteusermodal .options label {
  display: inline-block;
  line-height: 30px;
}
.deleteusermodal .elementselect {
  display: inline-block;
  vertical-align: middle;
}
body.ltr .deleteusermodal .elementselect {
  margin-left: 10px;
}
body.rtl .deleteusermodal .elementselect {
  margin-right: 10px;
}
body.ltr .deleteusermodal .buttons .spinner {
  float: right;
}
body.rtl .deleteusermodal .buttons .spinner {
  float: left;
}
body.ltr .deleteusermodal .buttons .spinner {
  margin-right: -20px;
}
body.rtl .deleteusermodal .buttons .spinner {
  margin-left: -20px;
}
body.ltr .deleteusermodal .buttons .spinner {
  margin-left: -4px;
}
body.rtl .deleteusermodal .buttons .spinner {
  margin-right: -4px;
}

.dropdownsettingsmodal {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 400px;
}
.dropdownsettingsmodal .body {
  max-height: 100%;
  overflow-y: auto;
}

.previewmodal.zilch {
  padding: 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------
/*  Menus
/* ----------------------------------------*/
.menu,
.ui-datepicker,
.ui-timepicker-list {
  z-index: 100;
  border-radius: 4px;
  padding: 0 14px;
  overflow: auto;
  background: #fff;
  user-select: none;
  box-shadow: 0 0 0 1px rgba(31, 41, 51, 0.1), 0 5px 20px rgba(31, 41, 51, 0.25);
}

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

.menu {
  display: none;
  position: absolute;
}
.menu h6:first-child {
  margin-top: 14px !important;
}
body.ltr .menu ul.padded li a {
  padding-left: 24px;
}
body.rtl .menu ul.padded li a {
  padding-right: 24px;
}
.menu ul.padded li a[data-icon]:before, .menu ul.padded li a.icon:before, .menu ul.padded li a.sel:before {
  font-size: 14px;
  color: hsl(211deg, 13%, 65%);
}
body.ltr .menu ul.padded li a[data-icon]:before, body.ltr .menu ul.padded li a.icon:before, body.ltr .menu ul.padded li a.sel:before {
  float: left;
}
body.rtl .menu ul.padded li a[data-icon]:before, body.rtl .menu ul.padded li a.icon:before, body.rtl .menu ul.padded li a.sel:before {
  float: right;
}
body.ltr .menu ul.padded li a[data-icon]:before, body.ltr .menu ul.padded li a.icon:before, body.ltr .menu ul.padded li a.sel:before {
  margin: 3px 0 0 -17px;
}
body.rtl .menu ul.padded li a[data-icon]:before, body.rtl .menu ul.padded li a.icon:before, body.rtl .menu ul.padded li a.sel:before {
  margin: 3px -17px 0 0;
}
.menu ul.padded li a[data-icon].error:before, .menu ul.padded li a.icon.error:before, .menu ul.padded li a.sel.error:before {
  color: #EF4E4E;
}
.menu ul.padded li a.sel:not([data-icon]):before {
  content: "check";
}
.menu ul li a {
  margin: 0 -14px;
  padding: 10px 14px;
  color: hsl(209deg, 18%, 30%);
  text-decoration: none;
  white-space: nowrap;
  display: block !important;
  font-size: 14px;
}
.menu ul li a.sel {
  cursor: default;
}
.menu ul li a .shortcut {
  color: hsl(211deg, 10%, 53%);
}
body.ltr .menu ul li a .shortcut {
  float: right;
}
body.rtl .menu ul li a .shortcut {
  float: left;
}
body.ltr .menu ul li a .shortcut {
  margin-left: 14px;
}
body.rtl .menu ul li a .shortcut {
  margin-right: 14px;
}
.menu .flex {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
}
body.ltr .menu .flex.padded {
  margin-left: -14px;
}
body.rtl .menu .flex.padded {
  margin-right: -14px;
}
body.ltr .menu .flex.padded {
  padding-left: 24px;
}
body.rtl .menu .flex.padded {
  padding-right: 24px;
}
.menu .flex.padded.sel:before {
  position: absolute;
  top: 36px;
  content: "check";
  font-size: 14px;
  color: hsl(211deg, 13%, 65%);
}
body.ltr .menu .flex.padded.sel:before {
  left: 7px;
}
body.rtl .menu .flex.padded.sel:before {
  right: 7px;
}
.menu hr {
  margin: 5px -14px;
}

.menubtn span.icon,
.menu span.icon {
  display: inline-block;
  margin-top: -1px;
  width: 10px;
  text-align: center;
  font-size: 14px;
  color: hsl(211deg, 13%, 65%);
}
body.ltr .menubtn span.icon,
body.ltr .menu span.icon {
  margin-right: 10px;
}
body.rtl .menubtn span.icon,
body.rtl .menu span.icon {
  margin-left: 10px;
}

.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 {
  color: hsl(209deg, 18%, 30%);
  background-color: hsl(212deg, 60%, 97%);
}

body.ltr .menu hr.padded {
  margin-left: 10px;
}
body.rtl .menu hr.padded {
  margin-right: 10px;
}

/* tag select fields */
.tagselect .elements {
  display: inline;
}
.tagselect .element.small {
  clear: none;
}
.tagselect .add {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 12em;
}
body.ltr .tagselect .add {
  margin: 7px 7px 0 0;
}
body.rtl .tagselect .add {
  margin: 7px 0 0 7px;
}
body.ltr .tagselect .add .text {
  padding-right: 30px;
}
body.rtl .tagselect .add .text {
  padding-left: 30px;
}
.tagselect .add .spinner {
  position: absolute;
  top: 0;
}
body.ltr .tagselect .add .spinner {
  right: 5px;
}
body.rtl .tagselect .add .spinner {
  left: 5px;
}
body.ltr .tagselect.elementselect .element, body.rtl .tagselect.elementselect .element {
  float: none !important;
  display: inline-block;
}

body.ltr .tagmenu ul li a {
  padding-left: 26px;
}
body.rtl .tagmenu ul li a {
  padding-right: 26px;
}
body.ltr .tagmenu ul li a:before {
  float: left;
}
body.rtl .tagmenu ul li a:before {
  float: right;
}
body.ltr .tagmenu ul li a:before {
  margin: 3px 0 0 -18px;
}
body.rtl .tagmenu ul li a:before {
  margin: 3px -18px 0 0;
}

/* selectize */
/* ----------------------------------------
/*  Fields
/* ----------------------------------------*/
.shadow-box {
  border-radius: 5px;
  border: 1px solid hsl(212deg, 30%, 85%);
  box-shadow: 0 1px 5px -1px rgba(31, 41, 51, 0.2);
}

table.shadow-box thead:first-child tr:first-child th:first-child, table.shadow-box thead:first-child tr:first-child th:first-child.disabled:after,
table.shadow-box thead:first-child tr:first-child td:first-child,
table.shadow-box thead:first-child tr:first-child td:first-child.disabled:after,
table.shadow-box tbody:first-child tr:first-child th:first-child,
table.shadow-box tbody:first-child tr:first-child th:first-child.disabled:after,
table.shadow-box tbody:first-child tr:first-child td:first-child,
table.shadow-box tbody:first-child tr:first-child td:first-child.disabled:after,
table.editable thead:first-child tr:first-child th:first-child,
table.editable thead:first-child tr:first-child th:first-child.disabled:after,
table.editable thead:first-child tr:first-child td:first-child,
table.editable thead:first-child tr:first-child td:first-child.disabled:after,
table.editable tbody:first-child tr:first-child th:first-child,
table.editable tbody:first-child tr:first-child th:first-child.disabled:after,
table.editable tbody:first-child tr:first-child td:first-child,
table.editable tbody:first-child tr:first-child td:first-child.disabled:after {
  border-top-left-radius: 4px;
}
table.shadow-box thead:first-child tr:first-child th:last-child, table.shadow-box thead:first-child tr:first-child th:last-child.disabled:after,
table.shadow-box thead:first-child tr:first-child td:last-child,
table.shadow-box thead:first-child tr:first-child td:last-child.disabled:after,
table.shadow-box tbody:first-child tr:first-child th:last-child,
table.shadow-box tbody:first-child tr:first-child th:last-child.disabled:after,
table.shadow-box tbody:first-child tr:first-child td:last-child,
table.shadow-box tbody:first-child tr:first-child td:last-child.disabled:after,
table.editable thead:first-child tr:first-child th:last-child,
table.editable thead:first-child tr:first-child th:last-child.disabled:after,
table.editable thead:first-child tr:first-child td:last-child,
table.editable thead:first-child tr:first-child td:last-child.disabled:after,
table.editable tbody:first-child tr:first-child th:last-child,
table.editable tbody:first-child tr:first-child th:last-child.disabled:after,
table.editable tbody:first-child tr:first-child td:last-child,
table.editable tbody:first-child tr:first-child td:last-child.disabled:after {
  border-top-right-radius: 4px;
}
table.shadow-box thead:last-child tr:last-child th:first-child, table.shadow-box thead:last-child tr:last-child th:first-child.disabled:after,
table.shadow-box thead:last-child tr:last-child td:first-child,
table.shadow-box thead:last-child tr:last-child td:first-child.disabled:after,
table.shadow-box tbody:last-child tr:last-child th:first-child,
table.shadow-box tbody:last-child tr:last-child th:first-child.disabled:after,
table.shadow-box tbody:last-child tr:last-child td:first-child,
table.shadow-box tbody:last-child tr:last-child td:first-child.disabled:after,
table.editable thead:last-child tr:last-child th:first-child,
table.editable thead:last-child tr:last-child th:first-child.disabled:after,
table.editable thead:last-child tr:last-child td:first-child,
table.editable thead:last-child tr:last-child td:first-child.disabled:after,
table.editable tbody:last-child tr:last-child th:first-child,
table.editable tbody:last-child tr:last-child th:first-child.disabled:after,
table.editable tbody:last-child tr:last-child td:first-child,
table.editable tbody:last-child tr:last-child td:first-child.disabled:after {
  border-bottom-left-radius: 4px;
}
table.shadow-box thead:last-child tr:last-child th:last-child, table.shadow-box thead:last-child tr:last-child th:last-child.disabled:after,
table.shadow-box thead:last-child tr:last-child td:last-child,
table.shadow-box thead:last-child tr:last-child td:last-child.disabled:after,
table.shadow-box tbody:last-child tr:last-child th:last-child,
table.shadow-box tbody:last-child tr:last-child th:last-child.disabled:after,
table.shadow-box tbody:last-child tr:last-child td:last-child,
table.shadow-box tbody:last-child tr:last-child td:last-child.disabled:after,
table.editable thead:last-child tr:last-child th:last-child,
table.editable thead:last-child tr:last-child th:last-child.disabled:after,
table.editable thead:last-child tr:last-child td:last-child,
table.editable thead:last-child tr:last-child td:last-child.disabled:after,
table.editable tbody:last-child tr:last-child th:last-child,
table.editable tbody:last-child tr:last-child th:last-child.disabled:after,
table.editable tbody:last-child tr:last-child td:last-child,
table.editable tbody:last-child tr:last-child td:last-child.disabled:after {
  border-bottom-right-radius: 4px;
}

.text:not(.selectize-text),
.border-box,
.matrix-configurator > .field > .input,
.selectize-text > .selectize-control > .selectize-input,
.multiselect > select,
.selectize.multiselect .selectize-control.multi .selectize-input {
  border-radius: 3px;
  border: 1px solid rgba(96, 125, 159, 0.25);
  background-color: hsl(212deg, 50%, 99%);
  box-shadow: inset 0 1px 4px -1px rgba(96, 125, 159, 0.25);
  background-clip: padding-box;
}

.text.focus, .text:focus,
.border-box.focus,
.border-box:focus,
.selectize-text > .selectize-control > .selectize-input.focus,
.selectize-text > .selectize-control > .selectize-input:focus {
  outline: none;
  border-color: rgba(96, 125, 159, 0.8);
}

input.text,
textarea.text,
.text > input,
.text > textarea,
table.editable textarea,
.selectize-text > .selectize-control > .selectize-input {
  font-size: 14px;
  line-height: 20px;
  color: hsl(209deg, 18%, 30%);
  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 {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
body.ltr .multitext .multitextrow:first-child .text:first-child {
  border-top-left-radius: 4px;
}
body.rtl .multitext .multitextrow:first-child .text:first-child {
  border-top-right-radius: 4px;
}
body.ltr .multitext .multitextrow:first-child .text:last-child {
  border-top-right-radius: 4px;
}
body.rtl .multitext .multitextrow:first-child .text:last-child {
  border-top-left-radius: 4px;
}
body.ltr .multitext .multitextrow:last-child .text:first-child {
  border-bottom-left-radius: 4px;
}
body.rtl .multitext .multitextrow:last-child .text:first-child {
  border-bottom-right-radius: 4px;
}
body.ltr .multitext .multitextrow:last-child .text:last-child {
  border-bottom-right-radius: 4px;
}
body.rtl .multitext .multitextrow:last-child .text:last-child {
  border-bottom-left-radius: 4px;
}
.multitext .multitextrow:not(:first-child) .text {
  margin-top: -1px;
}
.multitext .multitextrow .text {
  border-radius: 0;
  float: left;
  box-sizing: border-box;
}
body.ltr .multitext .multitextrow .text:not(:first-child) {
  margin-left: -1px;
}
body.rtl .multitext .multitextrow .text:not(:first-child) {
  margin-right: -1px;
}
.multitext .multitextrow .text:first-child:nth-last-child(1) {
  width: 100%;
}
.multitext .multitextrow .text:first-child:nth-last-child(2) {
  width: 50%;
}
.multitext .multitextrow .text:first-child:nth-last-child(2) ~ .text {
  width: calc(50% + 1px);
}
.multitext .multitextrow .text.error {
  position: relative;
  z-index: 1;
}
.multitext .multitextrow .text:focus,
.multitext .multitextrow .selectize-text > .selectize-control > .selectize-input.focus {
  position: relative;
  z-index: 2;
}

.chars-left {
  position: relative;
  color: hsl(211deg, 13%, 65%);
}
body.ltr .chars-left {
  float: right;
}
body.rtl .chars-left {
  float: left;
}
body.ltr .chars-left {
  margin: -27px 7px 0 0;
}
body.rtl .chars-left {
  margin: -27px 0 0 7px;
}
.chars-left.negative-chars-left {
  color: #EF4E4E;
}

.field {
  position: relative;
  margin: 24px 0;
}
.flex > .field {
  margin-top: 0;
  margin-bottom: 0;
}
.field > .first {
  margin-top: 4px !important;
}
.field > .status-badge {
  position: absolute;
  top: 2px;
  font-size: 9px;
  font-weight: bold;
  line-height: 15px;
  width: 15px;
  text-align: center;
  cursor: default;
  border-radius: 3px;
}
body.ltr .field > .status-badge {
  left: -19px;
}
body.rtl .field > .status-badge {
  right: -19px;
}
.field > .status-badge.modified {
  background-color: #1992D4;
  color: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}
.field > .status-badge.outdated {
  background-color: #FADB5F;
}
.field > .status-badge.conflicted {
  background-color: #CF1124;
  color: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}
.field > .heading {
  margin-top: -5px;
  margin-bottom: 5px;
  text-align: left !important;
}
.field > .heading > label {
  position: relative;
  font-weight: bold;
  color: hsl(211deg, 12%, 43%);
}
.field > .heading > label > .site {
  display: inline-block;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
  color: hsl(211deg, 10%, 53%);
  background-color: hsl(212deg, 50%, 93%);
}
body.ltr .field > .heading > label > .site {
  margin-left: 7px;
}
body.rtl .field > .heading > label > .site {
  margin-right: 7px;
}
.field > .notice, .field > .warning {
  margin: 2px 0 0;
}
.field > .notice:before, .field > .warning:before {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  width: 1em;
}
body.ltr .field > .notice:before, body.ltr .field > .warning:before {
  margin: -2px 2px 0 0;
}
body.rtl .field > .notice:before, body.rtl .field > .warning:before {
  margin: -2px 0 0 2px;
}
.field > .notice.notice:before, .field > .warning.notice:before {
  content: "lightbulb";
}
.field > .notice.warning:before, .field > .warning.warning:before {
  content: "alert";
}
.field > .input {
  position: relative;
}
.field > .input:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.first {
  margin-top: 12px;
}

.field > .heading > .instructions,
.checkboxfield.has-instructions .instructions {
  margin-top: 2px;
  color: hsl(211deg, 10%, 53%);
}
.field > .heading > .instructions img,
.checkboxfield.has-instructions .instructions img {
  max-width: 100%;
}
.field > .heading > .instructions ul,
.field > .heading > .instructions ol,
.checkboxfield.has-instructions .instructions ul,
.checkboxfield.has-instructions .instructions ol {
  margin: 1em 0;
}
body.ltr .field > .heading > .instructions ul,
body.ltr .field > .heading > .instructions ol,
body.ltr .checkboxfield.has-instructions .instructions ul,
body.ltr .checkboxfield.has-instructions .instructions ol {
  padding-left: 2em;
}
body.rtl .field > .heading > .instructions ul,
body.rtl .field > .heading > .instructions ol,
body.rtl .checkboxfield.has-instructions .instructions ul,
body.rtl .checkboxfield.has-instructions .instructions ol {
  padding-right: 2em;
}
.field > .heading > .instructions ul li,
.checkboxfield.has-instructions .instructions ul li {
  list-style-type: disc;
}
.field > .heading > .instructions li + li,
.checkboxfield.has-instructions .instructions li + li {
  margin-top: 0.25em;
}

#expand-status-btn {
  margin-left: 5px;
  width: 30px;
  height: 17px;
  padding: 0;
  line-height: 16px;
  border-radius: 3px;
  color: hsl(211deg, 12%, 43%);
}
#expand-status-btn:before {
  margin: 0;
}

/* toggles and nested fields */
.nested-fields {
  margin: -24px;
  padding: 24px 24px 0;
}
.nested-fields.hidden {
  display: block;
  height: 0;
}
.nested-fields > .field:last-child {
  padding-bottom: 24px;
}

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

input.checkbox + label,
div.checkbox {
  display: inline-block;
  clear: none;
  position: relative;
  line-height: 16px;
  height: 16px;
  cursor: pointer;
}
body.ltr input.checkbox + label,
body.ltr div.checkbox {
  padding-left: 21px;
}
body.rtl input.checkbox + label,
body.rtl div.checkbox {
  padding-right: 21px;
}
input.checkbox + label .info,
div.checkbox .info {
  height: 16px;
}

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

body.ltr input.checkbox + label:empty,
body.ltr div.checkbox:empty {
  padding-left: 16px;
}
body.rtl input.checkbox + label:empty,
body.rtl div.checkbox:empty {
  padding-right: 16px;
}

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;
  top: 0;
  width: 16px !important;
  height: 16px;
  box-sizing: border-box;
  content: ".";
  font-size: 0;
  background-color: hsl(212deg, 50%, 99%);
  border: 1px solid rgba(96, 125, 159, 0.4);
  background-clip: padding-box;
  border-radius: 3px;
}
body.ltr input.checkbox + label:before,
body.ltr div.checkbox:before {
  left: 0;
}
body.rtl input.checkbox + label:before,
body.rtl div.checkbox:before {
  right: 0;
}

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 {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  line-height: 16px;
  color: hsl(210deg, 24%, 16%);
}

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;
  border-color: hsl(212deg, 25%, 50%);
}

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

body.ltr .checkboxfield.has-instructions .instructions {
  padding-left: 21px;
}
body.rtl .checkboxfield.has-instructions .instructions {
  padding-right: 21px;
}

/* multiselect */
.multiselect > select {
  color: hsl(209deg, 18%, 30%);
  font-size: 14px;
  appearance: none;
}
.multiselect > select:focus {
  outline: none;
  border-color: rgba(96, 125, 159, 0.8);
}
.multiselect > select option {
  padding: 1px 8px;
}

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

.text {
  background-color: #fff;
}
.text.small {
  padding: 3px;
}
.text input {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
}

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

.texticon {
  position: relative;
  cursor: text;
  min-width: 130px;
}
.texticon.icon:before {
  position: absolute;
  top: 9px;
  color: hsl(211deg, 10%, 53%);
}
body.ltr .texticon.icon:before {
  left: 9px;
}
body.rtl .texticon.icon:before {
  right: 9px;
}
body.ltr .texticon.icon .text {
  padding-left: 26px;
}
body.rtl .texticon.icon .text {
  padding-right: 26px;
}
body.ltr .texticon.clearable .text {
  padding-right: 22px;
}
body.rtl .texticon.clearable .text {
  padding-left: 22px;
}
.texticon .clear {
  position: absolute;
  top: 6px;
  color: hsl(211deg, 13%, 65%);
  cursor: pointer;
}
body.ltr .texticon .clear {
  right: 9px;
}
body.rtl .texticon .clear {
  left: 9px;
}
.texticon .clear:hover {
  color: hsl(211deg, 10%, 53%);
}
.texticon .clear:before {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  content: "remove";
}

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

.texthint {
  position: absolute;
  top: -1px;
  width: 100%;
  color: hsl(211deg, 13%, 65%);
  cursor: text;
}

.passwordwrapper {
  position: relative;
}
.passwordwrapper .password {
  width: 100%;
}
.passwordwrapper .password-toggle {
  display: block;
  position: absolute;
  top: 7px;
}
body.ltr .passwordwrapper .password-toggle {
  right: 7px;
}
body.rtl .passwordwrapper .password-toggle {
  left: 7px;
}
body.ltr .passwordwrapper .password-toggle {
  text-align: right;
}
body.rtl .passwordwrapper .password-toggle {
  text-align: left;
}

body.ltr .password {
  padding-right: 5em;
}
body.rtl .password {
  padding-left: 5em;
}

.datewrapper,
.timewrapper {
  display: inline-block;
  position: relative;
}
.datewrapper .text,
.timewrapper .text {
  position: relative;
  z-index: 1;
  width: 100%;
}
.datewrapper .text:placeholder-shown + div[data-icon],
.timewrapper .text:placeholder-shown + div[data-icon] {
  display: block;
  position: absolute;
  top: calc(50% - 10px);
  z-index: 0;
  color: hsl(211deg, 13%, 65%);
}
body.ltr .datewrapper .text:placeholder-shown + div[data-icon],
body.ltr .timewrapper .text:placeholder-shown + div[data-icon] {
  left: 14px;
}
body.rtl .datewrapper .text:placeholder-shown + div[data-icon],
body.rtl .timewrapper .text:placeholder-shown + div[data-icon] {
  right: 14px;
}
.datewrapper .text:placeholder-shown + div[data-icon], .datewrapper .text:placeholder-shown + div[data-icon]:before,
.timewrapper .text:placeholder-shown + div[data-icon],
.timewrapper .text:placeholder-shown + div[data-icon]:before {
  user-select: none;
  pointer-events: none;
  z-index: 1;
}
#details .datewrapper .text:placeholder-shown + div[data-icon],
#details .timewrapper .text:placeholder-shown + div[data-icon] {
  color: rgba(123, 135, 147, 0.5);
}
.datewrapper .text:not(:placeholder-shown) + div[data-icon],
.timewrapper .text:not(:placeholder-shown) + div[data-icon] {
  display: none;
}

.datewrapper {
  width: 8em;
}
.datewrapper .text:before {
  top: calc(50% - 7px);
  content: "date";
}
body.ltr .datewrapper .text:before {
  left: 7px;
}
body.rtl .datewrapper .text:before {
  right: 7px;
}

.timewrapper {
  width: 7em;
}
.timewrapper .text:before {
  top: calc(50% - 5px);
  font-size: 11px;
  content: "time";
}
body.ltr .timewrapper .text:before {
  left: 7px;
}
body.rtl .timewrapper .text:before {
  right: 7px;
}

::-webkit-input-placeholder {
  color: hsl(211deg, 13%, 65%);
}

input:-ms-input-placeholder {
  color: hsl(211deg, 13%, 65%);
}

::-ms-input-placeholder {
  color: hsl(211deg, 13%, 65%);
}

:-moz-placeholder {
  color: hsl(211deg, 13%, 65%);
}

::-moz-placeholder {
  color: hsl(211deg, 13%, 65%);
}

::placeholder {
  color: hsl(211deg, 13%, 65%);
}

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

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

.select:not(.selectize),
.select:not(.selectize) select {
  position: relative;
  border-radius: 5px;
  white-space: nowrap;
  height: 32px;
}

.select:not(.selectize) {
  position: relative;
}
:not(.flex) > .select:not(.selectize) {
  display: inline-block;
}

.select:not(.selectize):after {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  position: absolute;
  z-index: 1;
  top: calc(50% - 5px);
  font-size: 10px;
  user-select: none;
  pointer-events: none;
}
body.ltr .select:not(.selectize):after {
  right: 9px;
}
body.rtl .select:not(.selectize):after {
  left: 9px;
}

.select:not(.selectize) select {
  display: block;
  position: relative;
  border: none;
  font-size: 14px;
  line-height: 20px;
  color: hsl(209deg, 18%, 30%);
  background-color: rgba(96, 125, 159, 0.25);
  appearance: none;
  white-space: pre;
  background-color: hsl(212deg, 50%, 93%);
}
body.ltr .select:not(.selectize) select {
  padding: 7px 22px 7px 10px;
}
body.rtl .select:not(.selectize) select {
  padding: 7px 10px 7px 22px;
}
.select:not(.selectize) select::-ms-expand {
  display: none;
}
.select:not(.selectize) select option {
  background-color: #fff;
}

.select:not(.selectize).fullwidth select {
  min-width: 100%;
}

.select:not(.selectize) select:hover, .select:not(.selectize) select:focus {
  outline: none;
  background-color: rgba(96, 125, 159, 0.5);
}

.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-color: transparent;
}

.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 {
  position: relative;
  border-radius: 5px;
  white-space: nowrap;
}

.selectize.select .selectize-control {
  position: relative;
}
:not(.flex) > .selectize.select .selectize-control {
  display: inline-block;
}

.selectize.select .selectize-control:after {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  position: absolute;
  z-index: 1;
  top: calc(50% - 5px);
  font-size: 10px;
  user-select: none;
  pointer-events: none;
}
body.ltr .selectize.select .selectize-control:after {
  right: 9px;
}
body.rtl .selectize.select .selectize-control:after {
  left: 9px;
}

.selectize.select .selectize-control .selectize-input {
  display: block;
  position: relative;
  border: none;
  font-size: 14px;
  line-height: 20px;
  color: hsl(209deg, 18%, 30%);
  background-color: rgba(96, 125, 159, 0.25);
  appearance: none;
}
body.ltr .selectize.select .selectize-control .selectize-input {
  padding: 7px 22px 7px 10px;
}
body.rtl .selectize.select .selectize-control .selectize-input {
  padding: 7px 10px 7px 22px;
}
.selectize.select .selectize-control .selectize-input::-ms-expand {
  display: none;
}

.selectize.select.fullwidth .selectize-control,
.selectize.select.fullwidth .selectize-control .selectize-input {
  min-width: 100%;
}

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

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

.selectize.multiselect .selectize-control.multi .selectize-input > div {
  display: inline-block;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 12px;
  line-height: 14px;
  color: hsl(209deg, 18%, 30%);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(123, 135, 147, 0.5);
  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 {
  outline: none;
  border-color: rgba(96, 125, 159, 0.8);
}

/* menu styles */
body .selectize-dropdown {
  z-index: 100;
  border-radius: 4px;
  padding: 0 14px;
  overflow: auto;
  background: #fff;
  user-select: none;
  box-shadow: 0 0 0 1px rgba(31, 41, 51, 0.1), 0 5px 20px rgba(31, 41, 51, 0.25);
  margin-top: 1px;
  padding: 0;
}

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

body .selectize-dropdown-content > div[data-value=new]:before {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  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 {
  margin: 0 -14px;
  padding: 10px 14px;
  color: hsl(209deg, 18%, 30%);
  text-decoration: none;
  white-space: nowrap;
}

body .selectize-dropdown .optgroup-header {
  margin: 14px 0 3px;
  font-size: 10px;
  line-height: 1.2;
  color: hsl(211deg, 13%, 65%);
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
  padding: 4px 0;
}

body .selectize-dropdown .active {
  color: hsl(209deg, 18%, 30%);
  background-color: hsl(212deg, 60%, 97%);
}

/* datepicker */
.ui-datepicker {
  position: fixed;
  top: -300px;
  -padding: 10px;
  width: 210px;
  height: 242px;
  z-index: 101 !important;
}
body.ltr .ui-datepicker {
  margin-left: 1px;
}
body.rtl .ui-datepicker {
  margin-right: 1px;
}

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

body.ltr .ui-datepicker-prev {
  float: left;
}
body.rtl .ui-datepicker-prev {
  float: right;
}

body.ltr .ui-datepicker-next {
  float: right;
}
body.rtl .ui-datepicker-next {
  float: left;
}

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

.ui-datepicker-prev:after,
.ui-datepicker-next:after {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  width: 20px;
  margin-top: -2px;
  line-height: 20px !important;
  text-align: center;
}

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

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

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

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

.ui-datepicker-calendar th span,
.ui-datepicker-calendar td a {
  display: block;
  width: 26px;
  line-height: 26px;
  text-align: center;
  color: hsl(209deg, 18%, 30%);
}

.ui-datepicker-calendar th span {
  color: hsl(211deg, 10%, 53%);
  font-weight: normal;
}

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

.ui-datepicker-calendar td a:hover {
  background-color: hsl(212deg, 30%, 85%);
  text-decoration: none;
}

.ui-datepicker-calendar td a.ui-state-active {
  background-color: hsl(209deg, 14%, 37%);
  color: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
  cursor: default;
}

.ui-datepicker-calendar td.ui-datepicker-today a {
  border-radius: 13px;
  box-shadow: inset 0 0 0 2px hsl(212deg, 30%, 85%);
}

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

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

.ui-timepicker-list li {
  white-space: nowrap;
  cursor: pointer;
}
body.ltr .ui-timepicker-list li {
  padding: 2px 0 2px 14px;
}
body.rtl .ui-timepicker-list li {
  padding: 2px 14px 2px 0;
}

.ui-timepicker-list li:hover {
  background-color: hsl(212deg, 30%, 85%);
}

.ui-timepicker-list li.ui-timepicker-selected {
  background-color: hsl(209deg, 14%, 37%);
  color: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
  cursor: default;
}

/* errors */
ul.errors {
  margin-top: 5px;
  list-style-type: square;
}
body.ltr ul.errors {
  padding-left: 20px;
}
body.rtl ul.errors {
  padding-right: 20px;
}

ul.errors li {
  color: #EF4E4E;
}

/* message pages */
.message-container {
  position: absolute;
  z-index: 100;
  top: 0;
  width: 100%;
  height: 100%;
}
body.ltr .message-container {
  left: 0;
}
body.rtl .message-container {
  right: 0;
}
.message-container.no-access {
  background-color: rgba(31, 41, 51, 0.5);
}
.message-container .pane {
  top: 50%;
  margin-top: -33px !important;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  box-shadow: 0 25px 100px rgba(31, 41, 51, 0.5);
}

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

.autosuggest__results-container {
  position: absolute;
  z-index: 2;
  width: 100%;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 1px 5px -1px rgba(31, 41, 51, 0.2);
  box-sizing: border-box;
  padding: 0 14px;
  text-align: left;
  font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 1em !important;
}
.autosuggest__results-container .autosuggest__results_title {
  margin: 14px 0 3px;
  font-size: 10px;
  line-height: 1.2;
  color: hsl(211deg, 13%, 65%);
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 14px !important;
}
.autosuggest__results-container .autosuggest__results_item {
  margin: 0 -14px;
  padding: 10px 14px;
  color: hsl(209deg, 18%, 30%);
  text-decoration: none;
  white-space: nowrap;
}
.autosuggest__results-container .autosuggest__results_item:hover, .autosuggest__results-container .autosuggest__results_item.autosuggest__results_item-highlighted {
  color: hsl(209deg, 18%, 30%);
  background-color: hsl(212deg, 60%, 97%);
  cursor: pointer;
}

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

.matrix-configurator > .field > .input {
  position: relative;
  background-color: hsl(212deg, 60%, 97%);
  overflow: hidden;
  box-shadow: none;
}
body.ltr .matrix-configurator > .field > .input {
  padding-left: 400px;
}
body.rtl .matrix-configurator > .field > .input {
  padding-right: 400px;
}
.matrix-configurator > .field > .input:after {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: visible;
  content: ".";
  font-size: 0;
  border-radius: 5px;
  box-shadow: inset 0 1px 3px -1px #acbed2;
  user-select: none;
  pointer-events: none;
}

.matrix-configurator .mc-sidebar {
  position: absolute;
  top: 0;
  margin: 0;
  border: none;
  width: 200px;
  height: 100%;
  box-sizing: border-box;
  background-color: hsl(212deg, 50%, 93%);
}
body.ltr .matrix-configurator .mc-sidebar {
  border-right: 1px solid rgba(51, 64, 77, 0.1);
}
body.rtl .matrix-configurator .mc-sidebar {
  border-left: 1px solid rgba(51, 64, 77, 0.1);
}

body.ltr .matrix-configurator .mc-sidebar.block-types {
  left: 0;
}
body.rtl .matrix-configurator .mc-sidebar.block-types {
  right: 0;
}

body.ltr .matrix-configurator .mc-sidebar.fields {
  left: 200px;
}
body.rtl .matrix-configurator .mc-sidebar.fields {
  right: 200px;
}

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

.matrixconfigitem {
  position: relative;
  margin-top: -1px;
  border: solid rgba(51, 64, 77, 0.1);
  border-width: 1px 0;
  user-select: none;
  cursor: default;
  background-color: hsl(212deg, 50%, 93%);
}
body.ltr .matrixconfigitem {
  padding: 11px 45px 10px 14px;
}
body.rtl .matrixconfigitem {
  padding: 11px 14px 10px 45px;
}

.matrixconfigitem.sel {
  z-index: 1;
  background-color: #d1dff0;
}
body.ltr .matrixconfigitem.sel {
  margin-right: -1px;
}
body.rtl .matrixconfigitem.sel {
  margin-left: -1px;
}
body.ltr .matrixconfigitem.sel {
  border-right-width: 1px;
}
body.rtl .matrixconfigitem.sel {
  border-left-width: 1px;
}

.matrixconfigitem.error {
  background-color: rgba(207, 17, 36, 0.1);
}

.matrixconfigitem.sel.error {
  background-color: rgba(207, 17, 36, 0.2);
}

.matrixconfigitem .handle {
  font-size: 12px;
  color: hsl(211deg, 10%, 53%);
}

.matrixconfigitem .actions {
  position: absolute;
  width: 24px;
}
body.ltr .matrixconfigitem .actions {
  right: 0;
}
body.rtl .matrixconfigitem .actions {
  left: 0;
}

.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(123, 135, 147, 0.5);
}

.matrixconfigitem .actions .icon.settings.error:before {
  color: #EF4E4E;
}

.matrixconfigitem .actions .icon.settings:not(.disabled):hover:before {
  color: #0B69A3;
}

.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(51, 64, 77, 0.1);
  background-image: linear-gradient(rgba(51, 64, 77, 0), rgba(51, 64, 77, 0.05));
}

/* Matrix fields */
.matrix > .buttons {
  margin-top: 10px;
}

.matrixblock {
  position: relative;
  margin-bottom: 10px;
  padding: 0 14px 14px;
  border-radius: 5px;
  border: 1px solid rgba(51, 64, 77, 0.1);
  background-color: hsl(212deg, 60%, 97%);
  outline: none;
}
.matrixblock.static {
  padding-top: 14px;
}
.matrixblock > .titlebar {
  margin: 0 -14px;
  width: calc(100% + 28px);
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
  color: hsl(211deg, 13%, 65%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
  cursor: default;
  user-select: none;
  position: relative;
}
body.ltr .matrixblock > .titlebar {
  padding: 5px 70px 5px 35px;
}
body.rtl .matrixblock > .titlebar {
  padding: 5px 35px 5px 70px;
}
.matrixblock > .titlebar:after {
  display: block;
  content: "";
  position: absolute;
  bottom: -1px;
  left: 14px;
  width: calc(100% - 28px);
  height: 1px;
  background-color: rgba(51, 64, 77, 0.1);
}
.matrixblock > .titlebar > .blocktype {
  display: inline;
  color: hsl(211deg, 10%, 53%);
}
.matrixblock > .titlebar > .preview {
  display: inline;
  opacity: 0;
  transition: opacity linear 100ms;
}
body.ltr .matrixblock > .titlebar > .preview {
  margin-left: 7px;
}
body.rtl .matrixblock > .titlebar > .preview {
  margin-right: 7px;
}
.matrixblock > .titlebar > .preview span {
  opacity: 0.5;
}
.matrixblock.disabled {
  opacity: 1;
}
body.ltr .matrixblock.disabled > .titlebar {
  padding-right: 90px;
}
body.rtl .matrixblock.disabled > .titlebar {
  padding-left: 90px;
}
.matrixblock.disabled > .actions > .status.off {
  display: inline-block;
}
body.ltr .matrixblock.disabled > .actions > .status.off {
  float: left;
}
body.rtl .matrixblock.disabled > .actions > .status.off {
  float: right;
}
body.ltr .matrixblock.disabled > .actions > .status.off {
  margin: 6px 10px 0 0;
}
body.rtl .matrixblock.disabled > .actions > .status.off {
  margin: 6px 0 0 10px;
}
.matrixblock.collapsed > .titlebar {
  border-radius: 4px;
  border-bottom: none;
}
.matrixblock.collapsed > .titlebar > .preview {
  opacity: 1;
}
.matrixblock > .checkbox {
  position: absolute;
  top: 7px;
}
body.ltr .matrixblock > .checkbox {
  left: 14px;
}
body.rtl .matrixblock > .checkbox {
  right: 14px;
}
.matrixblock > .actions {
  position: absolute;
  z-index: 1;
  top: 4px;
  cursor: default;
}
body.ltr .matrixblock > .actions {
  right: 14px;
}
body.rtl .matrixblock > .actions {
  left: 14px;
}
.matrixblock > .actions > .status.off {
  display: none;
}
.matrixblock > .actions a {
  padding: 0 !important;
  width: 15px;
  height: 20px;
  text-align: center;
  color: rgba(123, 135, 147, 0.5);
}
body.ltr .matrixblock > .actions a {
  margin-right: 2px;
}
body.rtl .matrixblock > .actions a {
  margin-left: 2px;
}
.matrixblock > .actions a:hover {
  width: 15px;
  height: 20px;
  text-align: center;
  color: #0B69A3;
}
body.ltr .matrixblock > .actions a.settings:after {
  margin-left: 3px;
}
body.rtl .matrixblock > .actions a.settings:after {
  margin-right: 3px;
}
.matrixblock:not(.static) > .fields {
  border-top: 1px solid rgba(51, 64, 77, 0.1);
  padding-top: 14px;
}
.matrixblock > .fields > .field {
  margin: 15px 0;
}
.matrixblock > .buttons {
  margin-top: 0;
  height: 30px;
}

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

.add-category-form .texticon {
  width: 200px;
}
body.ltr .add-category-form .texticon {
  float: left;
}
body.rtl .add-category-form .texticon {
  float: right;
}
body.ltr .add-category-form .texticon {
  margin-right: 5px;
}
body.rtl .add-category-form .texticon {
  margin-left: 5px;
}

body.ltr .add-category-form .texticon .text {
  padding-right: 30px;
}
body.rtl .add-category-form .texticon .text {
  padding-left: 30px;
}

.add-category-form .texticon .spinner {
  position: absolute;
  top: 0;
}
body.ltr .add-category-form .texticon .spinner {
  right: 5px;
}
body.rtl .add-category-form .texticon .spinner {
  left: 5px;
}

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

body.ltr .categoriesfield .structure ul {
  margin-left: 12px;
}
body.rtl .categoriesfield .structure ul {
  margin-right: 12px;
}

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

.sitepicker-group li:not(:first-child) a {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.sitepicker-group li:not(:first-child) a:not(:hover) {
  border-top-color: transparent;
}
.sitepicker-group li:not(:last-child) a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.sitepicker-group li a {
  display: block;
  position: relative;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(51, 64, 77, 0.1);
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.4;
}
body.ltr .sitepicker-group li a {
  padding: 9px 42px 9px 15px;
}
body.rtl .sitepicker-group li a {
  padding: 9px 15px 9px 42px;
}
.sitepicker-group li a:after {
  font-size: 14px;
  position: absolute;
  top: calc(50% - 7px);
  margin: 0;
  padding: 0;
}
body.ltr .sitepicker-group li a:after {
  right: 12px;
}
body.rtl .sitepicker-group li a:after {
  left: 12px;
}
.sitepicker-group li a:hover {
  border-color: #0B69A3;
  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;
  }
  .color.small {
    background-size: 8px;
  }
  table.data thead th.ordered {
    background-image: url(../images/listview_sort_2x.png);
    background-size: 26px;
  }
  table.data thead th.ordered.loading {
    background-image: url(../images/spinner_tableheader_2x.gif);
    background-size: 26px;
  }
  .spinner .elements.busy:after {
    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;
  }
  .preview-thumb-container.loading:after {
    background-image: url(../images/spinner_dark_2x.gif);
    background-size: 20px;
  }
  .structure ul li {
    background-size: 40px;
  }
  body.ltr .structure ul li {
    background-image: url(../images/branch_2x.png);
  }
  body.rtl .structure ul li {
    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 .modal .resizehandle {
    background-image: url(../images/resizehandle_2x.png);
  }
  body.rtl .modal .resizehandle {
    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);
  }
}
html {
  -webkit-text-size-adjust: 100%;
}

#global-container {
  position: relative;
}

/* global sidebar */
#global-sidebar {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
  background-color: hsl(209deg, 20%, 25%);
}
#global-sidebar a {
  color: hsl(212deg, 50%, 93%);
  transition: color linear 100ms;
  text-decoration: none;
  margin-bottom: 0 !important;
}
#global-sidebar > a,
#global-sidebar *:not(.has-subnav) > a {
  outline: none;
  transition: background-color linear 100ms;
}
#global-sidebar > a[href]:hover, #global-sidebar > a[href].active, #global-sidebar > a[href]:active,
#global-sidebar *:not(.has-subnav) > a[href]:hover,
#global-sidebar *:not(.has-subnav) > a[href].active,
#global-sidebar *:not(.has-subnav) > a[href]:active {
  color: #fff;
}
#global-sidebar > a[href]:hover,
#global-sidebar *:not(.has-subnav) > a[href]:hover {
  background-color: #29333d;
  transition: none;
}
#global-sidebar > a[href]:hover .icon,
#global-sidebar *:not(.has-subnav) > a[href]:hover .icon {
  opacity: 1;
}
#global-sidebar > a[href].active, #global-sidebar > a[href]:active,
#global-sidebar *:not(.has-subnav) > a[href].active,
#global-sidebar *:not(.has-subnav) > a[href]:active {
  background-color: #1f272e;
}
#global-sidebar > a:not([href]),
#global-sidebar *:not(.has-subnav) > a:not([href]) {
  cursor: default;
  background-color: transparent;
}
#global-sidebar > a .icon,
#global-sidebar *:not(.has-subnav) > a .icon {
  transition: opacity linear 100ms;
}
#global-sidebar .light {
  color: hsl(211deg, 10%, 53%);
}

#system-info {
  display: grid;
  grid-template-columns: 32px auto;
  grid-gap: 14px;
  padding: 0 10px;
  position: relative;
  flex: 0 0 60px;
  flex-direction: row;
  align-items: center;
  background-color: #29333d;
}
#system-info:after {
  display: none;
}
#system-info:focus, #system-info:hover {
  background-color: #1f272e !important;
}

#site-icon {
  height: 32px;
}
#site-icon img,
#site-icon svg {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}
#site-icon svg rect, #site-icon svg circle, #site-icon svg ellipse, #site-icon svg line, #site-icon svg polyline, #site-icon svg polygon, #site-icon svg path, #site-icon svg text {
  fill: hsl(211deg, 10%, 53%);
  stroke-width: 0;
  transition: fill linear 100ms;
}

#system-name h2 {
  margin: 0;
  width: 100%;
  overflow: hidden;
  max-height: 40px;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#system-name h2:after {
  display: block;
  content: ".";
  font-size: 0;
  position: absolute;
  top: 0;
  width: 14px;
  background-image: linear-gradient(to right, rgba(41, 51, 61, 0), #29333d);
}
body.ltr #system-name h2:after {
  right: 0;
}
body.rtl #system-name h2:after {
  left: 0;
}
#system-info:hover #system-name h2:after {
  background-image: linear-gradient(to right, rgba(31, 39, 46, 0), #1f272e);
}

#job-icon > span.icon {
  display: block;
  position: relative;
  width: 16px;
  height: 16px;
}
#job-icon > span.icon > canvas {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
}
#job-icon > span.icon > canvas#job-icon-hover {
  opacity: 0;
  transition: opacity linear 100ms;
}
#job-icon .progressbar {
  position: static;
  margin: 8px 2px;
  width: auto;
  border-color: hsl(212deg, 30%, 85%);
  transition: color linear 100ms;
}
#job-icon .progressbar-inner {
  background-color: hsl(212deg, 30%, 85%);
  transition: color linear 100ms;
}
#job-icon[href]:hover .progressbar {
  border-color: #fff;
}
#job-icon[href]:hover .progressbar-inner {
  background-color: #fff;
}
#job-icon[href]:hover .icon > span.icon > canvas#job-icon-hover {
  opacity: 1;
}

#nav {
  flex: 1;
  margin: 27px 0 0;
  overflow: visible;
}
#nav li:not(.has-subnav) > a.sel {
  color: #fff;
  background-color: hsl(210deg, 24%, 16%);
  border-color: #E5422B;
  opacity: 1;
}
#nav li:not(.has-subnav) > a.sel .icon {
  opacity: 1;
}
#nav li a {
  border-left: 0 solid transparent;
}
body.ltr #nav li a {
  padding-left: 18px;
}
body.rtl #nav li a {
  padding-right: 18px;
}
#nav li a.active {
  color: #fff;
}
#nav li a.menubtn {
  line-height: 26px;
}
#nav li a:active .icon {
  opacity: 1;
}
#nav li a .icon {
  opacity: 0.5;
}
body.ltr #nav li a .icon {
  margin: 0 22px 0 0;
}
body.rtl #nav li a .icon {
  margin: 0 0 0 22px;
}
#nav li a .icon.icon-mask svg rect, #nav li a .icon.icon-mask svg circle, #nav li a .icon.icon-mask svg ellipse, #nav li a .icon.icon-mask svg line, #nav li a .icon.icon-mask svg polyline, #nav li a .icon.icon-mask svg polygon, #nav li a .icon.icon-mask svg path, #nav li a .icon.icon-mask svg text {
  fill: #fff;
  stroke-width: 0;
  transition: fill linear 100ms;
}
#nav li a .icon.icon-mask span[data-icon] {
  color: #fff;
}
#nav li a .label, #nav li a .label span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nav li a .badge {
  background-color: rgba(255, 255, 255, 0.5);
  color: hsl(209deg, 20%, 25%);
}
body.ltr #nav li a .badge {
  margin-right: 0;
}
body.rtl #nav li a .badge {
  margin-left: 0;
}
#nav li ul {
  display: block;
  margin-bottom: 10px;
}
#nav li ul li a {
  font-size: 12px;
}
body.ltr #nav li ul li a {
  padding: 3px 14px 3px 56px !important;
}
body.rtl #nav li ul li a {
  padding: 3px 56px 3px 14px !important;
}
#nav li ul li a:not(.active) {
  color: hsl(212deg, 30%, 85%);
}

#app-info {
  padding: 14px 14px 24px;
  color: hsl(210deg, 24%, 10%);
  text-align: center;
}

#edition {
  font-size: 14px;
}
#edition.hot:hover {
  cursor: pointer;
}
#edition.hot:hover #edition-logo {
  border-color: hsl(211deg, 13%, 65%);
}
#edition.hot:hover #edition-logo > .edition-name {
  color: hsl(211deg, 13%, 65%);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}
#edition.hot:hover #edition-logo > .edition-trial {
  background-color: hsl(211deg, 13%, 65%);
}
body.ltr #edition.hot:hover #edition-logo > .edition-trial:before {
  border-color: transparent hsl(211deg, 13%, 65%) transparent transparent;
}
body.rtl #edition.hot:hover #edition-logo > .edition-trial:before {
  border-color: transparent transparent transparent hsl(211deg, 13%, 65%);
}

#edition-logo {
  user-select: none;
  border: 1px solid hsl(210deg, 24%, 10%);
  border-radius: 3px;
  display: inline-flex;
  height: 24px;
  box-sizing: content-box;
  transition: border-color linear 100ms;
}
#edition-logo > .edition-name, #edition-logo > .edition-trial {
  padding: 8px 8px 7px;
  line-height: 8px;
  font-weight: 500;
}
#edition-logo > .edition-name {
  letter-spacing: 2.2px;
  padding-right: 5.8px;
  text-transform: uppercase;
  transition: color linear 100ms;
}
#edition-logo > .edition-trial {
  display: inline-block;
  position: relative;
  background-color: hsl(210deg, 24%, 10%);
  color: hsl(209deg, 20%, 25%);
  border-radius: 0 1px 1px 0;
  letter-spacing: 1px;
  text-transform: lowercase;
  transition: background linear 100ms;
}
body.ltr #edition-logo > .edition-trial {
  margin-left: 5px;
}
body.rtl #edition-logo > .edition-trial {
  margin-right: 5px;
}
body.ltr #edition-logo > .edition-trial {
  padding-left: 5px;
}
body.rtl #edition-logo > .edition-trial {
  padding-right: 5px;
}
body.ltr #edition-logo > .edition-trial {
  padding-right: 7px;
}
body.rtl #edition-logo > .edition-trial {
  padding-left: 7px;
}
#edition-logo > .edition-trial:before {
  display: block;
  position: absolute;
  top: 0;
  content: ".";
  font-size: 0;
  width: 0;
  height: 0;
  border-style: solid;
  transition: border-color linear 100ms;
}
body.ltr #edition-logo > .edition-trial:before {
  left: -10px;
  border-width: 0 10px 23px 0;
  border-color: transparent hsl(210deg, 24%, 10%) transparent transparent;
}
body.rtl #edition-logo > .edition-trial:before {
  right: -10px;
  border-width: 0 0 23px 10px;
  border-color: transparent transparent transparent hsl(210deg, 24%, 10%);
}

#version {
  margin-top: 4px;
  font-size: 12px;
}

#devmode {
  flex: 0 0 4px;
  width: 100%;
  min-height: 4px;
  background: url(../images/dev-mode.svg) repeat-x 21px 0;
  cursor: help;
}

body.ltr #page-container {
  padding-left: 225px;
}
body.rtl #page-container {
  padding-right: 225px;
}

#alerts {
  background-color: #EF4E4E;
  padding: 9px 0;
  text-align: center;
  color: #fff;
}
#alerts li {
  padding: 4px 24px;
}
#alerts li:before {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  content: "alert";
  font-size: 16px;
}
body.ltr #alerts li:before {
  margin: -1px 3px 0 0;
}
body.rtl #alerts li:before {
  margin: -1px 0 0 3px;
}
#alerts li a {
  color: #fff;
  text-decoration: underline;
}
#alerts li a.go {
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: 3px 5px;
  margin: 0 2px;
}
#alerts li a.go:after {
  color: #fff;
}
#alerts li a.go:hover {
  border-color: #fff;
  transition: border-color linear 100ms;
}

#global-header {
  margin-bottom: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(205, 216, 228, 0.25), 0 2px 12px rgba(205, 216, 228, 0.5);
  background: hsl(212deg, 60%, 97%);
}
#global-header .flex {
  height: 60px;
  align-items: center;
}

#crumbs {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  font-size: 13px;
}
#crumbs.empty {
  display: none;
}
#crumbs a {
  color: hsl(211deg, 13%, 65%);
  transition: color linear 100ms;
}
#crumbs a:hover {
  color: #0B69A3;
  text-decoration: none;
}
#crumbs nav {
  margin: 0;
}
#crumbs nav ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
#crumbs nav ul li:after {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  margin: -1px 5px 0;
  font-size: 11px;
  color: hsl(211deg, 13%, 65%);
}
body.ltr #crumbs nav ul li:after {
  content: "rightangle";
}
body.rtl #crumbs nav ul li:after {
  content: "leftangle";
}
#crumbs nav ul li a {
  display: inline-block;
  padding: 5px 0 1px;
}

#nav-toggle {
  display: none;
  width: 36px;
  height: 26px;
  line-height: 26px;
  color: hsl(211deg, 13%, 65%);
  text-align: center;
}
body.ltr #nav-toggle {
  margin-left: -10px;
}
body.rtl #nav-toggle {
  margin-right: -10px;
}
#nav-toggle:before {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  content: "menu";
  font-size: 16px;
  line-height: 0;
}
#nav-toggle:hover {
  color: hsl(211deg, 10%, 53%);
}

#user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  background-color: transparent;
  border-radius: 0;
}
body.ltr #user-info {
  padding: 0 24px 0 14px;
}
body.rtl #user-info {
  padding: 0 14px 0 24px;
}
#user-info:after {
  color: hsl(211deg, 13%, 65%);
  transition: color linear 100ms;
}
body.ltr #user-info:after {
  margin: 0 0 0 5px !important;
}
body.rtl #user-info:after {
  margin: 0 5px 0 0 !important;
}
#user-info:hover:after {
  color: hsl(211deg, 10%, 53%);
}

#user-photo {
  padding: 5px 0;
}
#user-photo img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(31, 41, 51, 0.05), 0 0 0 rgba(31, 41, 51, 0);
  transition: box-shadow linear 150ms;
}
#user-info:hover #user-photo img {
  box-shadow: 0 0 0 1px rgba(31, 41, 51, 0.05), 0 2px 10px -2px rgba(31, 41, 51, 0.3);
}

/* main container */
#main-container {
  position: relative;
}

#notifications {
  position: fixed;
  width: calc(100% - 225px);
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#notifications .notification {
  padding: 5px 10px;
  border-radius: 0 0 3px 3px;
  border-width: 0 1px 1px;
  color: #fff !important;
  pointer-events: auto;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
  box-shadow: 0 1px 5px -1px rgba(31, 41, 51, 0.2);
}
#notifications .notification.notice {
  background-color: #127FBF;
}
#notifications .notification.error {
  background-color: #E5422B;
}

#header-container {
  margin-bottom: 14px;
}

#crumbs,
#header {
  padding: 0 24px;
}

#global-header .flex,
#header .flex {
  flex-wrap: nowrap;
  max-width: 100%;
}
#global-header .flex.flex-nowrap,
#header .flex.flex-nowrap {
  min-width: 0;
}
#global-header .flex > *,
#header .flex > * {
  margin-bottom: 0;
}

#header {
  display: flex;
  align-items: flex-start;
  align-content: stretch;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-top: 13px;
  padding-bottom: 13px;
  position: relative;
  z-index: 2;
  width: calc(100vw - 225px);
  box-sizing: border-box;
  background-color: rgba(154, 165, 177, 0);
  box-shadow: 0 1px 0 rgba(51, 64, 77, 0);
  transition: background-color linear 100ms, box-shadow linear 100ms;
}
body.fixed-header #header {
  position: fixed;
  z-index: 12;
  top: 0;
  background-color: hsl(212deg, 50%, 93%);
  box-shadow: inset 0 -1px 0 rgba(63, 77, 90, 0.1);
}
@supports (backdrop-filter: blur(10px)) {
  #header {
    transition: background-color linear 100ms, box-shadow linear 100ms, backdrop-filter linear 100ms;
  }
  body.fixed-header #header {
    background-color: rgba(228, 237, 246, 0.75);
    backdrop-filter: blur(10px);
  }
}
@media only screen and (min-width: 975px) {
  body.ltr #header .flex:not(:last-child) {
    margin-right: 7px;
  }
  body.rtl #header .flex:not(:last-child) {
    margin-left: 7px;
  }
}
#header h1 {
  line-height: 32px;
  margin-top: 0;
  margin-bottom: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.ltr #header h1:not(:last-child) {
  margin-right: 14px !important;
}
body.rtl #header h1:not(:last-child) {
  margin-left: 14px !important;
}
#header .buttons,
#header .btngroup {
  margin-top: 0;
}

@media only screen and (min-width: 975px) {
  #page-title.has-toolbar {
    min-width: 242px !important;
  }
}

#toolbar {
  flex: 1;
  align-items: flex-start;
}
#toolbar .btn,
#toolbar .text {
  color: #394b60;
}
#toolbar .icon:before,
#toolbar .texticon:before,
#toolbar .menubtn:after,
#toolbar [data-icon]:before,
#toolbar [data-icon-after]:after {
  color: #4d6480;
}
#toolbar .text {
  border-radius: 5px;
  box-shadow: none;
}
#toolbar .text::-webkit-input-placeholder {
  color: #4d6480;
}
#toolbar .text:-ms-input-placeholder {
  color: #4d6480;
}
#toolbar .text::-ms-input-placeholder {
  color: #4d6480;
}
#toolbar .text:-moz-placeholder {
  color: #4d6480;
}
#toolbar .text::-moz-placeholder {
  color: #4d6480;
}
#toolbar .text::placeholder {
  color: #4d6480;
}
#toolbar .text:not(:focus) {
  background-clip: border-box;
}
#toolbar .spinner {
  background-image: url(../images/spinner_toolbar.gif);
}

#action-button {
  height: 34px;
}

#main-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: calc(100vw - 225px);
  padding: 0 24px 48px;
  box-sizing: border-box;
}
#main-content > .grid:only-child {
  flex: 1;
}

#sidebar-toggle-container {
  display: none;
}

#sidebar-container {
  flex: 0 0 273px;
  width: 273px;
  box-sizing: border-box;
}
body.ltr #sidebar-container {
  margin-left: -24px;
}
body.rtl #sidebar-container {
  margin-right: -24px;
}

#sidebar {
  box-sizing: border-box;
  padding: 0 48px;
  width: 273px;
  background-color: transparent;
}
#sidebar.fixed {
  position: fixed;
  overflow-y: auto;
  padding-top: 14px;
  padding-bottom: 14px;
}
#sidebar nav li a {
  border-radius: 5px;
}
#sidebar nav li a:not(.sel):hover {
  background-color: hsl(212deg, 30%, 85%);
}
#sidebar nav li a.sel {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(205, 216, 228, 0.25), 0 2px 12px rgba(205, 216, 228, 0.5);
  background-color: hsl(212deg, 60%, 97%);
}

#content-container {
  flex: 1;
}
#main-content.has-sidebar #content-container {
  width: calc(100% - 225px - 24px);
  max-width: calc(100% - 225px - 24px);
}
#main-content.has-details #content-container {
  width: calc(100% - 350px - 14px);
  max-width: calc(100% - 350px - 14px);
}
#content-container #main-content.has-sidebar.has-details {
  width: calc(100% - 225px - 350px - 38px);
  max-width: calc(100% - 225px - 350px - 38px);
}

#tabs {
  margin: -10px -12px 0;
  padding: 10px 12px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
#tabs ul {
  display: flex;
  flex-direction: row;
  max-width: calc(100% - 40px);
}
#tabs ul li {
  max-width: 100%;
}
body.ltr #tabs ul li + li {
  margin-left: -12px;
}
body.rtl #tabs ul li + li {
  margin-right: -12px;
}
#tabs ul li a {
  display: block;
  position: relative;
  border-radius: 4px 4px 0 0;
  padding: 12px 24px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  line-height: 1.2;
}
#tabs ul li a:hover {
  text-decoration: none;
}
#tabs ul li a:not(.sel) {
  color: hsl(211deg, 12%, 43%);
}
#tabs ul li a:not(.sel):hover {
  color: hsl(209deg, 18%, 30%);
  background-image: linear-gradient(to bottom, hsl(212deg, 60%, 97%), rgba(243, 247, 252, 0.5));
}
#tabs ul li a.sel {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(205, 216, 228, 0.25), 0 2px 12px rgba(205, 216, 228, 0.5);
  z-index: 1;
  color: hsl(209deg, 18%, 30%);
  cursor: default;
  background-clip: padding-box;
}
#tabs #overflow-tab-btn {
  margin-left: 10px;
  width: 30px;
  height: 17px;
  padding: 0;
  line-height: 16px;
  border-radius: 3px;
  color: hsl(211deg, 12%, 43%);
}
#tabs #overflow-tab-btn:before {
  margin: 0;
}
#tabs #overflow-tab-btn:after {
  display: none;
}

.content-pane {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(205, 216, 228, 0.25), 0 2px 12px rgba(205, 216, 228, 0.5);
  border-radius: 5px;
  position: relative;
  background-clip: padding-box;
  padding: 24px;
  word-wrap: break-word;
}
body.ltr .content-pane.square {
  border-top-left-radius: 0;
}
body.rtl .content-pane.square {
  border-top-right-radius: 0;
}
.content-pane > hr {
  margin-left: -24px;
  margin-right: -24px;
}

#footer {
  z-index: 1;
  margin: 24px -24px -24px;
  padding: 10px 24px;
  background-color: hsl(212deg, 60%, 97%);
  border-radius: 0 0 5px 5px;
}
#footer:empty {
  display: none;
}
#footer > *,
#footer .flex > * {
  margin-bottom: 0;
}

#details-container {
  flex: 0 0 388px;
  width: 388px;
  box-sizing: border-box;
}
body.ltr #details-container {
  margin-right: -24px;
}
body.rtl #details-container {
  margin-left: -24px;
}

#details {
  box-sizing: border-box;
  padding-bottom: 24px;
  width: 388px;
}
body.ltr #details {
  padding-right: 24px;
}
body.rtl #details {
  padding-left: 24px;
}
body.ltr #details {
  padding-left: 14px;
}
body.rtl #details {
  padding-right: 14px;
}
#main-content.has-tabs #details {
  padding-top: 40px;
}
#details.fixed {
  position: fixed;
  overflow-y: auto;
  padding-top: 14px;
}
#main-content.has-tabs #details.fixed {
  padding-top: 54px;
}
#details .meta {
  margin-bottom: 14px;
  border-radius: 5px;
  padding: 0 24px;
}
#details .meta:not(.read-only):not(.warning) {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(205, 216, 228, 0.25), 0 2px 12px rgba(205, 216, 228, 0.5);
  background-color: hsl(212deg, 60%, 97%);
}
#details .meta.read-only {
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: hsl(212deg, 30%, 85%);
}
#details .meta.warning {
  border: 2px solid #FADB5F;
  padding: 19px 22px;
  background: hsl(212deg, 60%, 97%);
  color: hsl(209deg, 18%, 30%) !important;
}
#details .meta.warning p {
  margin-bottom: 5px;
}
#details .meta.warning .btn {
  background-color: #FADB5F;
}
#details .meta.warning .btn:hover, #details .meta.warning .btn:focus {
  background-color: #f8d02e;
}
#details .meta.warning .btn:active {
  background-color: #f8ca15;
}
#details .meta > .field, #details .meta > .data {
  margin: 0 -24px !important;
}
#details .meta > .field > .heading > label, #details .meta > .field > .heading, #details .meta > .data > .heading > label, #details .meta > .data > .heading {
  color: hsl(209deg, 14%, 37%);
}
#details .meta > .field.has-errors {
  margin: 0 -24px !important;
  padding: 0 24px;
}
#details .meta > .field .status-badge {
  top: calc(50% - 8px);
}
body.ltr #details .meta > .field .status-badge {
  left: 4px;
}
body.rtl #details .meta > .field .status-badge {
  right: 4px;
}
#details .meta > .field + .field {
  border-top-color: rgba(51, 64, 77, 0.1);
}
#details .meta .text::placeholder,
#details .meta .datewrapper .text:placeholder-shown + div[data-icon],
#details .meta .timewrapper .text:placeholder-shown + div[data-icon] {
  color: hsl(211deg, 13%, 65%);
}
body.ltr #details .meta .ui-datepicker {
  margin: 0 0 0 -8px;
}
body.rtl #details .meta .ui-datepicker {
  margin: 0 -8px 0 0;
}
#details hr {
  margin: 14px 0;
  border-top-color: rgba(51, 64, 77, 0.1);
}
#details .spinner {
  background-image: url(../images/spinner_details.gif);
}
#details .text {
  background-color: transparent;
}

@media only screen and (max-width: 1199px) {
  #global-container {
    width: calc(100vw + 225px);
  }
  body.ltr #global-container {
    left: -225px;
  }
  body.rtl #global-container {
    right: -225px;
  }
  body.ltr #global-container {
    transition: left 250ms ease-in-out;
  }
  body.rtl #global-container {
    transition: right 250ms ease-in-out;
  }
  body.ltr.showing-nav #global-container {
    left: 0;
  }
  body.rtl.showing-nav #global-container {
    right: 0;
  }
  #crumbs {
    display: flex !important;
  }
  #header {
    width: 100vw;
  }
  #nav-toggle {
    display: block;
  }
  #main-content {
    width: 100vw;
  }
}
@media only screen and (max-width: 974px) {
  #header {
    display: block;
  }
  #header .flex:not(#toolbar) {
    margin-top: 10px;
  }
  #toolbar {
    flex-wrap: wrap !important;
  }
  #toolbar > * {
    margin-top: 10px !important;
  }
  body.fixed-header #header .flex:first-child {
    margin-top: 0;
  }
  #main-content {
    display: block;
  }
  #sidebar-toggle-container {
    display: block;
    margin-bottom: 14px;
  }
  #sidebar-toggle:after {
    font-family: "Craft";
    speak: none;
    -webkit-font-feature-settings: "liga", "dlig";
    -moz-font-feature-settings: "liga=1, dlig=1";
    -moz-font-feature-settings: "liga", "dlig";
    -ms-font-feature-settings: "liga", "dlig";
    -o-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
    text-rendering: optimizeLegibility;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    text-align: center;
    font-style: normal;
    vertical-align: middle;
    word-wrap: normal !important;
    user-select: none;
    opacity: 0.8;
    content: "downangle";
  }
  body.ltr #sidebar-toggle:after {
    margin-left: 5px;
  }
  body.rtl #sidebar-toggle:after {
    margin-right: 5px;
  }
  body.showing-sidebar #sidebar-toggle {
    background-color: #acbed2 !important;
  }
  body.showing-sidebar #sidebar-toggle:after {
    content: "upangle";
  }
  #sidebar-container,
#details-container {
    width: auto !important;
  }
  #sidebar,
#details {
    position: static !important;
    overflow-y: visible !important;
    max-height: none !important;
    width: auto;
  }
  #sidebar {
    margin-bottom: 14px;
  }
  body:not(.showing-sidebar) #sidebar {
    display: none;
  }
  body.ltr #details-container {
    margin-right: 0;
  }
  body.rtl #details-container {
    margin-left: 0;
  }
  #content-container {
    width: auto !important;
    max-width: none !important;
  }
  #details {
    padding: 0 !important;
    margin-top: 14px;
  }
}
@media only screen and (max-width: 767px) {
  #crumbs,
#header,
#main-content {
    padding-left: 10px;
    padding-right: 10px;
  }
  #tabs ul li a {
    padding-left: 14px;
    padding-right: 14px;
  }
  body.ltr #tabs ul li + li {
    margin-left: -7px;
  }
  body.rtl #tabs ul li + li {
    margin-right: -7px;
  }
}
body.ltr #settingsmenu ul li a {
  padding-left: 46px;
}
body.rtl #settingsmenu ul li a {
  padding-right: 46px;
}
#settingsmenu ul li a:before {
  font-size: 15px;
}
body.ltr #settingsmenu ul li a:before {
  margin: 1px 0 0 -22px;
}
body.rtl #settingsmenu ul li a:before {
  margin: 1px -22px 0 0;
}
#settingsmenu ul li a img {
  width: 16px;
  height: 16px;
  position: absolute;
  margin-left: -23px;
  margin-top: 1px;
}

/* grids */
.grid {
  position: relative;
}
.grid:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.grid > .item {
  display: none;
  box-sizing: border-box;
}

.lp-editor-container,
.lp-preview-container {
  position: fixed;
  top: 0;
  height: 100%;
  background-color: #fff;
  z-index: 100;
}
.lp-editor-container header,
.lp-preview-container header {
  padding: 10px 24px;
  background-color: hsl(212deg, 50%, 93%);
  box-shadow: inset 0 -1px 0 rgba(63, 77, 90, 0.1);
  box-sizing: border-box;
}
@supports (backdrop-filter: blur(10px)) {
  .lp-editor-container header,
.lp-preview-container header {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(228, 237, 246, 0.75);
    backdrop-filter: blur(10px);
  }
  .lp-editor-container header + .lp-editor,
.lp-preview-container header + .lp-editor {
    padding-top: 78px;
  }
}
.lp-editor-container header .btn, .lp-editor-container header .spinner, .lp-editor-container header .checkmark-icon,
.lp-preview-container header .btn,
.lp-preview-container header .spinner,
.lp-preview-container header .checkmark-icon {
  margin-bottom: 0;
}

.lp-editor-container {
  display: flex;
  flex-direction: column;
}
.lp-editor-container .lp-editor {
  flex: 1;
  padding: 24px;
  overflow: auto;
  box-sizing: border-box;
}
.lp-editor-container .lp-editor > .field:last-child {
  margin-bottom: 24px !important;
}
.lp-editor-container .lp-draghandle {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
}
body.ltr .lp-editor-container .lp-draghandle {
  right: -4px;
}
body.rtl .lp-editor-container .lp-draghandle {
  left: -4px;
}

.lp-preview-container {
  display: flex;
  flex-direction: column;
}
.lp-preview-container.dragging:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  font-size: 0;
}
.lp-preview-container header {
  justify-content: center;
}
.lp-preview-container .lp-preview {
  flex: 1;
}

#job-icon {
  align-items: flex-start;
}
#job-icon .icon {
  margin-top: 2px !important;
}
#job-icon .progress-label {
  display: block;
  color: hsl(211deg, 13%, 65%);
  font-size: 11px;
  line-height: 1.5;
}

body.ltr .content.has-sidebar:not(.hiding-sidebar) {
  margin-left: 225px;
}
body.rtl .content.has-sidebar:not(.hiding-sidebar) {
  margin-right: 225px;
}

body.ltr nav > ul > li > .toggle {
  left: -20px;
}
body.rtl nav > ul > li > .toggle {
  right: -20px;
}

body.ltr nav > ul > li > ul > li > .toggle {
  left: 0px;
}
body.rtl nav > ul > li > ul > li > .toggle {
  right: 0px;
}

body.ltr nav > ul > li > ul > li > ul > li > .toggle {
  left: 20px;
}
body.rtl nav > ul > li > ul > li > ul > li > .toggle {
  right: 20px;
}

body.ltr nav > ul > li > ul > li > ul > li > ul > li > .toggle {
  left: 40px;
}
body.rtl nav > ul > li > ul > li > ul > li > ul > li > .toggle {
  right: 40px;
}

body.ltr nav > ul > li > ul > li > ul > li > ul > li > ul > li .toggle {
  left: 60px;
}
body.rtl nav > ul > li > ul > li > ul > li > ul > li > ul > li .toggle {
  right: 60px;
}

/* retina */
@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) {
  #details .spinner {
    background-image: url(../images/spinner_details_2x.gif);
    background-size: 20px;
  }
  #toolbar .spinner {
    background-image: url(../images/spinner_toolbar_2x.gif);
    background-size: 20px;
  }
  #upgrademodal.loading {
    background-image: url(../images/spinner_big_2x.gif);
    background-size: 48px;
  }
  #upgrademodal-success .message {
    background-image: url(../images/success_2x.png);
    background-size: 48px;
  }
}
.fieldlayoutform,
.fld-tab,
.fld-field {
  color: #035388;
}

.fieldlayoutform {
  padding: 24px;
  background-image: url(../images/fieldlayoutform-bg.png);
}
body.ltr .fieldlayoutform {
  background-position: 25px 24px;
}
body.rtl .fieldlayoutform {
  background-position: calc(100% - 24px) 24px;
}
.fieldlayoutform:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.fieldlayoutform h2 {
  margin: 3px 0 27px !important;
  font-size: 20px;
  line-height: 30px;
  font-weight: normal;
  text-decoration: underline;
  color: #035388;
  margin-bottom: 30px;
}
.fieldlayoutform .instructions {
  margin: -30px 0 30px;
  line-height: 30px;
}
body.ltr .fieldlayoutform .fld-tabs {
  margin: 0 0 29px -30px;
}
body.rtl .fieldlayoutform .fld-tabs {
  margin: 0 -30px 29px 0;
}
body.ltr .fieldlayoutform .unusedfields {
  margin: 30px 0 -30px -30px;
}
body.rtl .fieldlayoutform .unusedfields {
  margin: 30px -30px -30px 0;
}
.fieldlayoutform .fld-tabs:after,
.fieldlayoutform .unusedfields:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.fieldlayoutform .newtabbtn-container {
  display: flex;
  flex-direction: row;
}
body.ltr .fieldlayoutform .newtabbtn-container {
  margin: 0 0 60px 0;
}
body.rtl .fieldlayoutform .newtabbtn-container {
  margin: 0 0 60px 0;
}
.fieldlayoutform .newtabbtn-container .btn.add {
  border: 1px solid #035388;
  padding: 5px 10px;
  height: 31px;
  color: #035388;
  background: transparent;
  box-shadow: none;
}
.fieldlayoutform .newtabbtn-container .btn.add:before {
  margin-top: -2px;
}
.fieldlayoutform .newtabbtn-container h3 {
  line-height: 30px;
}
body.ltr .fieldlayoutform .newtabbtn-container h3 {
  margin: 0 0 0 30px;
}
body.rtl .fieldlayoutform .newtabbtn-container h3 {
  margin: 0 30px 0 0;
}

.fld-tab {
  width: 211px;
}
body.ltr .fld-tab {
  float: left;
}
body.rtl .fld-tab {
  float: right;
}
body.ltr .fld-tab {
  margin: 0 -1px 30px 30px;
}
body.rtl .fld-tab {
  margin: 0 30px 30px -1px;
}

.fld-tab .tabs .tab,
.fld-tab .fld-tabcontent,
.fld-field {
  border: 1px solid #035388;
}

body.ltr .fld-tab .icon,
body.ltr .fld-field .icon {
  margin-left: 5px;
}
body.rtl .fld-tab .icon,
body.rtl .fld-field .icon {
  margin-right: 5px;
}

.fld-tab .icon:before,
.fld-field .icon:before {
  margin-top: -2px;
  font-size: 16px;
  color: #035388;
  opacity: 0.5;
}

.fld-tab .icon:hover:before,
.fld-tab .icon.active:before,
.fld-field .icon:hover:before,
.fld-field .icon.active:before {
  opacity: 1;
}

.fld-tab .menubtn,
.fld-field .menubtn {
  padding: 0;
}

.fld-tab .menubtn:after,
.fld-field .menubtn:after {
  display: none;
}

.fld-tab .tabs {
  padding: 0 10px;
}
.fld-tab .tabs:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.fld-tab .tabs .tab {
  margin: -1px 0;
  padding: 5px 12px 4px;
  border-bottom-color: #f4f3fb;
  color: #035388;
}
body.ltr .fld-tab .tabs .tab {
  float: left;
}
body.rtl .fld-tab .tabs .tab {
  float: right;
}
.fld-tab .tabs .tab.draggable {
  cursor: move;
}

.fld-tab .fld-tabcontent {
  padding: 13px;
}

.fld-tab-caboose {
  min-height: 31px;
}

.fld-field {
  padding: 6px 8px 3px;
  cursor: move;
}
.fld-field + .fld-field {
  margin-top: 7px;
}
.fld-field.fld-required span:after {
  font-family: "Craft";
  speak: none;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  font-style: normal;
  vertical-align: middle;
  word-wrap: normal !important;
  user-select: none;
  opacity: 0.8;
  color: #035388;
  content: "asterisk";
  font-size: 8px;
}
body.ltr .fld-field.fld-required span:after {
  margin: -2px 0 0 5px;
}
body.rtl .fld-field.fld-required span:after {
  margin: -2px 5px 0 0;
}
body.ltr .fld-field .icon {
  float: right;
}
body.rtl .fld-field .icon {
  float: left;
}

.fld-tab.unused .tabs .tab,
.fld-tab.unused .fld-tabcontent,
.fld-field.unused {
  border-style: dashed;
}

.fld-tab.unused .tabs .tab {
  border-bottom-style: solid;
}

.fld-tab.fld-insertion .tabs .tab,
.fld-tab.fld-insertion .fld-tabcontent,
.fld-field.fld-insertion {
  border-style: dashed;
}

.fld-tab.fld-insertion .tabs .tab {
  border-bottom-style: solid;
}

.fld-tab.draghelper .tabs {
  margin: -5px 0 -1px;
  padding-top: 5px;
  padding-bottom: 1px;
  overflow: hidden;
}

.fld-tab.draghelper .tabs .tab,
.fld-tab.draghelper .fld-tabcontent,
.fld-field.draghelper {
  background: #fff;
  box-shadow: 0 1px 5px -1px rgba(31, 41, 51, 0.2);
}

.fld-tab.draghelper .tabs .tab {
  border-bottom-color: #fff;
}

/* retina */
@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) {
  .fieldlayoutform {
    background-image: url(../images/fieldlayoutform-bg_2x.png);
    background-size: 30px 30px;
  }
}
/* No Scroll */
html.noscroll, html.noscroll body {
  overflow: hidden;
  height: 100%;
}

/* Image Editor */
.modal.imageeditor {
  background-color: hsl(210deg, 24%, 16%);
  color: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
  opacity: 0;
  user-select: none;
}

.modal.imageeditor.modal {
  border-radius: 0;
}

.modal.imageeditor.modal .body:after {
  display: none;
}

.modal.imageeditor .btn:not(.submit):not(.noborder) {
  background-color: hsl(209deg, 14%, 37%);
  color: #fff;
}

.modal.imageeditor .btn:not(.submit):not(.noborder):hover {
  background-color: hsl(209deg, 18%, 30%);
}

.modal.imageeditor .btn:not(.submit):not(.noborder).active {
  background-color: hsl(209deg, 20%, 25%);
}

.modal.imageeditor .icon::before {
  width: 24px;
  height: 24px;
  margin-top: -4px;
  margin-left: -3px;
  display: inline-block;
  content: " ";
}

.modal.imageeditor .icon.rotate-left::before {
  background-image: url(../images/image-editor/rotate-left.svg);
}

.modal.imageeditor .icon.rotate-right::before {
  background-image: url(../images/image-editor/rotate-right.svg);
}

.modal.imageeditor .icon.flip-vertical::before {
  background-image: url(../images/image-editor/flip-vertical.svg);
}

.modal.imageeditor .icon.flip-horizontal::before {
  background-image: url(../images/image-editor/flip-horizontal.svg);
}

.modal.imageeditor .icon.constraint::before {
  background-image: url(../images/image-editor/unconstrained.svg);
}

.modal.imageeditor .icon.focal-point::before {
  background-image: url(../images/image-editor/focal-point.svg);
}

.modal.imageeditor .body {
  display: flex;
  padding: 0;
}

.modal.imageeditor .body .tabs {
  border-right: 1px solid hsl(210deg, 24%, 10%);
}

.modal.imageeditor .body .tabs ul {
  width: 100px;
  flex-direction: column;
  align-items: stretch;
}

.modal.imageeditor .body .tabs ul li {
  padding: 14px;
  text-align: center;
  border-bottom: 1px solid hsl(210deg, 24%, 10%);
}

.modal.imageeditor .body .tabs ul li i {
  background-repeat: no-repeat;
  background-position: top center;
  display: block;
  height: 24px;
}

.modal.imageeditor .body .tabs ul li[data-view=rotate] i {
  background-image: url(../images/image-editor/rotate-left.svg);
}

.modal.imageeditor .body .tabs ul li[data-view=crop] i {
  background-image: url(../images/image-editor/crop.svg);
}

.modal.imageeditor .body .tabs ul li[data-view=filters] i {
  background-image: url(../images/image-editor/filters.svg);
}

.modal.imageeditor .body .tabs ul li:hover {
  background-color: #1b242c;
}

.modal.imageeditor .body .tabs ul li.selected {
  background-color: #151c23;
}

.modal.imageeditor .body .tabs ul li:hover {
  cursor: pointer;
}

.modal.imageeditor .body .views {
  padding: 24px;
  overflow: auto;
}

.modal.imageeditor .body .views .btngroup {
  margin-bottom: 24px;
}

.modal.imageeditor .body .views .filters ul {
  width: 100px;
}

.modal.imageeditor .body .views .filters ul li {
  text-align: center;
  margin-right: 14px;
  margin-bottom: 14px;
}

.modal.imageeditor .body .views .filters ul li:last-child {
  margin-right: 0;
}

.modal.imageeditor .body .views .filters ul li img {
  border: 3px solid transparent;
  border-radius: 4px;
}

.modal.imageeditor .body .views .filters ul li span {
  display: block;
}

.modal.imageeditor .body .views .filters ul li:hover {
  cursor: pointer;
}

.modal.imageeditor .body .views .filters ul li.selected img {
  border-color: #fff;
}

.modal.imageeditor .body .image-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.modal.imageeditor .body .image-container .image {
  text-align: center;
  flex-grow: 1;
  position: relative;
}

.modal.imageeditor .body .image-container .image canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.modal.imageeditor .body .image-container .image-tools {
  text-align: center;
}

.modal.imageeditor .body .image-container .image-tools .straightening {
  max-width: 400px;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}

.modal.imageeditor .footer {
  position: absolute;
  background-color: transparent;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #000;
}

.modal.imageeditor .body .views .crop .orientation {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.imageeditor .body .views .crop .orientation input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0 4px;
  cursor: pointer;
}
.modal.imageeditor .body .views .crop .orientation input:focus {
  outline: none;
}
.modal.imageeditor .body .views .crop .orientation input[value=landscape] {
  width: 30px;
  height: 20px;
  background-image: url(../images/image-editor/orientation-landscape-unchecked.svg);
}
.modal.imageeditor .body .views .crop .orientation input[value=landscape]:checked {
  background-image: url(../images/image-editor/orientation-landscape-checked.svg);
}
.modal.imageeditor .body .views .crop .orientation input[value=portrait] {
  width: 20px;
  height: 30px;
  background-image: url(../images/image-editor/orientation-portrait-unchecked.svg);
}
.modal.imageeditor .body .views .crop .orientation input[value=portrait]:checked {
  background-image: url(../images/image-editor/orientation-portrait-checked.svg);
}

.modal.imageeditor.vertical .body .views .crop > .btngroup:first-child {
  justify-content: center;
}
.modal.imageeditor.vertical .body .views .crop .constraint-buttons-container {
  display: flex;
  justify-content: center;
}
.modal.imageeditor.vertical .body .views .crop .constraint-buttons-container .constraint-buttons {
  overflow: auto;
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 12px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 12px;
}
.modal.imageeditor.vertical .body .views .crop .constraint-buttons-container .constraint-buttons .constraint {
  padding: 4px 12px;
}
.modal.imageeditor.vertical .body .views .crop .constraint-buttons-container .constraint-buttons .constraint:hover {
  cursor: pointer;
}
.modal.imageeditor.vertical .body .views .crop .constraint-buttons-container .constraint-buttons .constraint.active {
  color: #fff;
  background: hsl(209deg, 14%, 37%);
  border-radius: 1rem;
}
.modal.imageeditor.vertical .body .views .crop .constraint-buttons-container .constraint-buttons .constraint:last-child {
  position: relative;
}
.modal.imageeditor.vertical .body .views .crop .constraint-buttons-container .constraint-buttons .constraint:last-child:after {
  content: "";
  display: block;
  position: absolute;
  right: -24px;
  width: 24px;
  height: 1px;
}

.modal.imageeditor:not(.vertical) .body .views .crop .constraint-buttons {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
.modal.imageeditor:not(.vertical) .body .views .crop .constraint-buttons .constraint {
  text-align: left;
  padding: 4px 0 4px 24px;
  cursor: pointer;
}
.modal.imageeditor:not(.vertical) .body .views .crop .constraint-buttons .constraint.active {
  background-position: left center;
  background-repeat: no-repeat;
  background-image: url(../images/image-editor/check.svg);
}

/* Vertical */
.vertical.imageeditor .body {
  flex-direction: column-reverse;
}

.vertical.imageeditor .body .tabs ul {
  display: flex;
  flex-direction: row;
  width: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.vertical.imageeditor .body .tabs ul li {
  flex-grow: 1;
  border: 0;
  border-right: 1px solid #000;
  padding: 7px;
}

.vertical.imageeditor .body .views {
  width: auto;
}

.vertical.imageeditor .body .views .rotate {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: -14px;
}

.vertical.imageeditor .body .views .rotate .btngroup {
  margin: 0 7px 14px;
}

.vertical.imageeditor .body .views .filters ul {
  width: auto;
  height: 109px;
  overflow: auto;
  white-space: nowrap;
  margin: 0 -24px;
  margin-bottom: -24px;
  padding: 24px;
  text-align: center;
}

.vertical.imageeditor .body .views .filters ul li {
  display: inline-block;
  margin-bottom: 0;
}

/* Slide Rule */
.slide-rule {
  position: relative;
  padding: 10px 0;
}

.slide-rule .cursor {
  position: absolute;
  margin-left: -4px;
  margin-top: 4px;
  left: 50%;
  z-index: 1;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #63A6E1;
}

.slide-rule .graduations {
  white-space: nowrap;
  height: 40px;
  position: relative;
}

.slide-rule .graduations ul {
  position: relative;
  float: left;
}

.slide-rule .graduations ul li {
  display: inline-block;
  font-size: 8px;
  position: relative;
  width: 10px;
}

.slide-rule .graduations ul li:not(.main-graduation) {
  left: 1px;
}

.slide-rule .graduations ul li.main-graduation:before {
  border-left-width: 3px;
}

.slide-rule .graduations ul li.main-graduation .label {
  display: block;
  cursor: default;
}

.slide-rule .graduations ul li.selected:before {
  border-left-color: #63A6E1;
}

.slide-rule .graduations ul li:before {
  content: "";
  position: absolute;
  border-left: 1px solid #fff;
  height: 10px;
  top: 0px;
  left: 0;
}

.slide-rule .graduations ul li .label {
  width: 20px;
  position: absolute;
  top: 10px;
  left: -9px;
  display: none;
  text-align: center;
}

.slide-rule .value {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  box-sizing: border-box;
  padding: 5px;
  width: 50px;
  margin-left: -25px;
  background: hsl(209deg, 14%, 37%);
}

.slide-rule .overlay {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 1px;
  left: 0;
  background-image: linear-gradient(to right, hsl(210deg, 24%, 16%) 0%, rgba(31, 41, 51, 0) 15%, rgba(31, 41, 51, 0) 85%, hsl(210deg, 24%, 16%) 100%);
}

/* Misc */
.menu.dark {
  background-color: hsl(209deg, 14%, 37%);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}
.menu.dark ul li a {
  color: #fff !important;
}
.menu.dark ul li a:not(.sel):not(.disabled):hover {
  background-color: hsl(209deg, 18%, 30%);
}

_:-ms-lang(x),
.elements .tableview td.checkbox-cell input.checkbox + label,
.elements .tableview td.checkbox-cell div.checkbox {
  top: 16px;
}

_:-ms-lang(x),
input.checkbox + label:empty,
div:empty.checkbox {
  display: block;
}

.wqiMap {
  margin-top: 0;
}

#wqitoolbar {
  width: 100%;
  z-index: 5;
  top: 0px;
  height: 30px;
  padding-top: 7px;
  background: rgba(0, 66, 139, 0.9);
  font-family: montserratregular, sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  #wqitoolbar {
    height: 45px;
  }
}
#wqitoolbar a {
  color: #cf6a34;
  -webkit-transition: color 0.1s ease-in-out;
  -moz-transition: color 0.1s ease-in-out;
  -o-transition: color 0.1s ease-in-out;
  transition: color 0.1s ease-in-out;
}
#wqitoolbar a:hover {
  color: #fff !important;
}
#wqitoolbar a[href$=clients] {
  position: absolute;
  top: 0;
  left: calc(50% - 5em);
  text-align: center;
  width: 10em;
  line-height: 30px;
}
#wqitoolbar #yearselect {
  position: absolute;
  top: 4px;
  left: 20px;
  height: 22px;
}
#wqitoolbar #yearselect label {
  dispaly: block;
  color: #fff;
}
@media (max-width: 600px) {
  #wqitoolbar #yearselect {
    top: 20px;
    right: 10px;
  }
}
#wqitoolbar #variableselect {
  position: absolute;
  top: 4px;
  left: 120px;
  height: 22px;
}
#wqitoolbar #variableselect label {
  dispaly: block;
  color: #fff;
}
@media (max-width: 600px) {
  #wqitoolbar #variableselect {
    top: 20px;
    right: 130px;
  }
}
#wqitoolbar #search {
  position: absolute;
  top: 0px;
  right: 10px;
  width: 140px;
  height: 21px;
}
#wqitoolbar #search form.search-form {
  margin: 0;
  padding: 0;
}
#wqitoolbar #search input {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid #6b6a6a;
  border-radius: 2px;
  padding-right: 20px;
  color: #fff;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Firefox 18- */
  /* Firefox 19+ */
}
#wqitoolbar #search input::-webkit-input-placeholder {
  font-family: montserratregular, sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a2a2a2;
}
#wqitoolbar #search input:-moz-placeholder {
  font-family: montserratregular, sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a2a2a2;
}
#wqitoolbar #search input::-moz-placeholder {
  font-family: montserratregular, sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a2a2a2;
}
#wqitoolbar #search input:-ms-input-placeholder {
  font-family: montserratregular, sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a2a2a2;
}
#wqitoolbar #search input::-webkit-search-cancel-button {
  display: none;
}

.wqivarselect {
  line-height: 27px;
  color: #333333;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.wqivarselect label {
  margin: 4px 8px;
  width: 30px;
  height: 25px;
}
.wqivarselect select {
  margin: 4px 8px;
  width: 90px;
  height: 25px;
}

.wqilegend {
  line-height: 27px;
  color: #333333;
  padding: 10px;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
}
.wqilegend .wqilegendLabel {
  margin-right: 5px;
  width: 80px;
}
.wqilegend h4 {
  font-size: 120%;
  color: #333333;
  margin-bottom: 0.4em;
  margin-top: 0.1em;
}
.wqilegend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.9;
}
.wqilegend img {
  width: 16px;
  height: 40px;
  left: 10px;
  margin-right: 8px;
  opacity: 0.9;
}
.wqilegend .marker {
  float: left;
  margin-right: 8px;
  opacity: 0.9;
  width: 20px;
  height: 25px;
}
.wqilegend .marker-vgood {
  background: url(https://api.tiles.mapbox.com/v3/marker/pin-s+3399cc.png) no-repeat;
}
.wqilegend .marker-good {
  background: url(https://api.tiles.mapbox.com/v3/marker/pin-s+99cc33.png) no-repeat;
}
.wqilegend .marker-fair {
  background: url(https://api.tiles.mapbox.com/v3/marker/pin-s+ffcc33.png) no-repeat;
}
.wqilegend .marker-poor {
  background: url(https://api.tiles.mapbox.com/v3/marker/pin-s+ff9900.png) no-repeat;
}
.wqilegend .marker-vpoor {
  background: url(https://api.tiles.mapbox.com/v3/marker/pin-s+ff6600.png) no-repeat;
}
.wqilegend .marker-unknown {
  background: url(https://api.tiles.mapbox.com/v3/marker/pin-s+888888.png) no-repeat;
}

.wqi_popup {
  font-family: "montserratregular", serif;
}
.wqi_popup td {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-right: 10px !important;
  font-size: 14px !important;
}
.wqi_popup h1 {
  font-size: 1.7em !important;
  margin: 4px 0px !important;
}
.wqi_popup h2 {
  font-size: 1.2em;
  margin: 2px 0px !important;
}

html {
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}

#BudgetValue-field,
#ResourcesValue-field,
#TimelineValue-field,
#StakeholderValue-field {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

#BudgetCode-field,
#ResourcesCode-field,
#TimelineCode-field,
#StakeholderCode-field {
  margin-top: 5px !important;
}

.modalPopup, .bwinPopupd {
  padding: 15px !important;
}

.modal-lg {
  min-width: 50% !important;
  max-width: 95% !important;
}

#header-modal {
  display: flex;
  align-items: flex-start;
  align-content: stretch;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-top: 0px;
  padding-right: 30px;
  padding-bottom: 3px;
  position: relative;
  z-index: 2;
  width: 100%;
}
body.fixed-header #header-modal {
  position: fixed;
  z-index: 12;
  top: 0;
  background-color: hsl(212deg, 50%, 93%);
  box-shadow: inset 0 -1px 0 rgba(63, 77, 90, 0.1);
}
#header-modal h1 {
  line-height: 26px;
  margin-top: 0;
  margin-bottom: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: black !important;
}
body.ltr #header-modal h1:not(:last-child) {
  margin-right: 14px !important;
}
body.rtl #header-modal h1:not(:last-child) {
  margin-left: 14px !important;
}
#header-modal .buttons,
#header-modal .btngroup {
  margin-top: 0;
}

.bwinPopupd {
  border-color: hsl(211deg, 10%, 53%);
  border-width: 1px;
  box-shadow: none !important;
}

[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link {
  color: hsl(212deg, 60%, 97%);
}

.nav-sidebar > .nav-item {
  max-width: 235px;
}

.widgetWrapper {
  padding: 15px;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.widgetTableBox_wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.widgetTableBox_wrapper .widgetTableBox {
  display: inline-block;
}

th, td {
  white-space: nowrap;
}

div.dataTables_wrapper {
  margin: 0 auto;
  max-width: 98%;
}

table.statsTable thead th, table.dataTable tbody td {
  padding: 2px 10px;
}

table.statsTable tbody th, table.dataTable tbody td {
  padding: 2px 10px;
  font-size: 12px;
}

div.container {
  width: 80%;
}

.form-label {
  margin-top: 0.6em !important;
}

.form-control {
  margin-top: 2px;
}

#form-select {
  left: 0px;
  top: 0px;
  width: 350px;
  text-align: right;
  margin-bottom: 5px;
}

#form-select label {
  float: left;
  margin-top: 2px;
  margin-right: 5px;
}

.content-wrapper > .content {
  padding: 0 0 0 0;
}

.content {
  overflow-x: hidden;
}

.text-wrapper {
  padding: 0.6em 1.2em !important;
}

.wiki {
  background-color: white;
}
.wiki li {
  list-style: disc;
  margin-left: 30px;
}
.wiki h1 {
  margin-top: 12px;
  margin-bottom: 18px;
}

.links {
  background-color: white;
}
.links ul {
  margin-top: 0.6em;
}

.row {
  margin-right: 0px;
  margin-left: 0px;
}

.container-fluid {
  padding: 0 !important;
}

table.data tbody th, table.data tbody td {
  padding-top: 0px;
  padding-bottom: 0px;
}

table.data tbody th, table.data tbody td input {
  border-radius: 0 !important;
}

table.data thead th, table.data thead td {
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 0 !important;
}

.fixed-header {
  border-width: 1px !important;
  border-style: solid;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed-header tbody {
  display: block;
  overflow: auto;
  height: 500px;
}

.fixed-header thead tr {
  display: block;
}

.fixed-header-3col {
  width: 500px;
}

.fixed-header-4col {
  width: 750px;
}

.fixed-header {
  width: 1050px;
}

table.fixed-header thead th {
  width: 120px !important;
}

table.fixed-header tbody td {
  width: 120px !important;
}

table.fixed-header th.delete-col {
  width: 80px !important;
}

table.fixed-header td {
  padding-left: 1px;
  padding-right: 1px;
}

table.fixed-header td.delete-col {
  width: 100px !important;
  padding-top: 4px;
}

table.fixed-header th.date-col {
  width: 220px !important;
}

table.fixed-header td.date-col {
  width: 220px !important;
}

table.fixed-header th.month-col {
  width: 180px !important;
}

table.fixed-header td.month-col input[type=month] {
  width: 180px !important;
  padding-left: 4px;
  padding-right: 1px;
}

.rw-wide {
  width: 1500px;
}

table.losses-table th.small-val {
  width: 70px !important;
}

table.losses-table td.small-val {
  width: 70px !important;
}

table.losses-table td.small-val input[type=text] {
  width: 70px !important;
}

table.losses-table th.loss-col {
  width: 220px !important;
}

table.losses-table td.loss-col {
  width: 220px !important;
}

table.losses-table td.loss-col input[type=text] {
  width: 220px !important;
}

table.losses-table th.comment-col {
  width: 400px !important;
}

table.losses-table td.comment-col {
  width: 400px !important;
}

table.losses-table td.comment-col input[type=text] {
  width: 400px !important;
}

table.losses-table th {
  font-size: 0.85em;
}

table.losses-table .form-control {
  font-size: 0.85em;
  height: calc(1.25rem + 2px);
  padding: 0.1rem 0.75rem;
}

.KPI_Good {
  background-color: green !important;
  color: white;
}

.KPI_Bad {
  background-color: red !important;
  color: white;
}

.KPI_Medium {
  background-color: #eeee00 !important;
}

.KPI_trafficlight {
  width: 30px;
}

.KPI_Good_trafficlight {
  background-color: green;
}

.KPI_Medium_trafficlight {
  background-color: #eeee00 !important;
}

.KPI_Bad_trafficlight {
  background-color: red;
}

.progress-bar.KPI_GOOD {
  background-color: #00cc00 !important;
  color: white;
}

.progress-bar.KPI_BAD {
  background-color: #cc0000 !important;
  color: white;
}

.progress-bar.KPI_MEDIUM {
  background-color: #eeee00 !important;
}

.date-select-widget {
  padding: 2px 24px;
}
.date-select-widget .btn-sm {
  height: 24px;
  padding: 1px 20px;
}

.deliverablesWidget ul, .overviewWidget ul {
  list-style-type: disc;
  margin-left: 10px;
}

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

.alert-danger {
  padding: 0px 10px;
}

.select.small {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.select.small select {
  max-width: 100%;
  width: 100%;
}
.select.small select option {
  width: 100%;
  max-width: 100%;
}

.front-page {
  padding-left: 5%;
  padding-right: 5%;
}

.front-page-row {
  height: calc(100vh - 110px);
  margin-top: 10px;
  max-width: 1200px;
  margin: auto;
}

.btn-isqms-frontpage {
  background-color: #007bff;
  height: 60px !important;
  width: 100% !important;
  min-width: 100% !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  padding: 0% 20px;
}
.btn-isqms-frontpage a {
  margin: auto;
  height: 60px !important;
  white-space: normal;
  color: white;
}
.btn-isqms-frontpage a:hover {
  color: #007bff;
}

.img-isqms-frontpage-wrapper {
  display: grid;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

.img-isqms-frontpage {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin: auto;
  width: 100% !important;
  max-height: 100% !important;
}

.btns-isqms-frontpage {
  margin: auto;
}
.btns-isqms-frontpage .btn {
  vertical-align: middle;
  padding: 0 0px;
  font-size: 16px;
}
@media screen and (max-width: 1400px) {
  .btns-isqms-frontpage .btn {
    font-size: 12px;
  }
}
.btns-isqms-frontpage .nav-link {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
}

.content-wrapper {
  background-color: white;
}

.card-tools .btn {
  height: 32px;
  padding: 0em 0.1em !important;
  border-radius: 0 !important;
}

[class*=sidebar-dark] .brand-link {
  color: rgb(255, 255, 255) !important;
}
[class*=sidebar-dark] .brand-link a {
  color: rgb(255, 255, 255) !important;
}

.leaflet-popup-content h1 {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.leaflet-popup-content p {
  margin: 2px;
}

.colorbar-header {
  max-width: 100px;
}

.leaflet-date-display {
  background-color: rgba(255, 255, 255, 0.7);
  color: black;
  padding: 5px 10px;
  border-radius: 4px;
}

.leaflet-date-inner {
  margin: 0px;
  font-size: 1.5em;
}

.leaflet-topcenter {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  top: 0%;
  /* possible because the placeholder's parent is the map */
  margin-left: 50px;
  padding-top: 10px;
  text-align: center;
}

.leaflet-button-down {
  color: #888;
}

.leaflet-movie-control {
  padding-top: 5px;
}

.wwcontainer {
  display: table;
  width: 100%;
}

.wwsidebartogglebutton {
  font-size: 16px;
  cursor: pointer;
  padding-left: 18px;
  border: none;
  outline: none;
}

.wwsidebar {
  display: table-cell;
  height: calc(100% - 30px);
  width: 50px;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: 0.1s;
}

.wwsidebarcontent {
  display: none;
  overflow-x: hidden;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 0px !important;
  transition: 0.1s;
}

.wwsidebarcontent input[type=radio],
.wwsidebarcontent .input-label {
  display: none;
}

.wwsidebarcontent .listitem {
  margin-left: 26px;
}

.wwsidebarcontent .active {
  color: #007bff;
}

.wwsearchbox {
  margin-bottom: 4px;
}

.wwmain {
  display: table-cell;
  vertical-align: middle;
}

.has-treeview li {
  padding: 0px 0px 0px 0px;
  display: block;
  font-size: 0.9em;
  line-height: 1;
}

.card {
  padding: 0 !important;
}

.hnwidget {
  margin: 0 !important;
  padding: 0.25em !important;
}

.hnwidget-flat {
  margin: 0 !important;
  padding: 0em !important;
}

.card-flat {
  box-shadow: none;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-radius: 0;
}

.card-header {
  padding: 3px 1.25rem;
}

.valueBoxWidget .card-footer {
  padding: 0.5em 0;
}

.value {
  position: relative;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
}

.value p {
  margin: 0;
  font-weight: bold;
  line-height: 1em;
}

.valueTable {
  width: 100%;
}

.valueRow {
  width: 100%;
}

.valueTitle {
  color: #555;
  width: 60%;
  padding-right: 10px;
  text-align: right;
}

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

.valueDate {
  color: #555;
  width: 100%;
  bottom: 5px;
  text-align: center;
  font-size: 15px;
}

.valueDateError {
  border-radius: 0px;
  color: white;
  background-color: #f00;
  font-weight: bold;
}

.textBoxWidgetWrapper {
  position: absolute;
  display: inline-block;
  padding: 1em;
  left: 0;
  top: 0;
  overflow: auto;
}

.jet0 {
  color: #000087;
}

.jet1 {
  color: #000087;
}

.jet2 {
  color: #00008f;
}

.jet3 {
  color: #000097;
}

.jet4 {
  color: #00009f;
}

.jet5 {
  color: #0000a7;
}

.jet6 {
  color: #0000af;
}

.jet7 {
  color: #0000b7;
}

.jet8 {
  color: #0000bf;
}

.jet9 {
  color: #0000c7;
}

.jet10 {
  color: #0000cf;
}

.jet11 {
  color: #0000d7;
}

.jet12 {
  color: #0000df;
}

.jet13 {
  color: #0000e7;
}

.jet14 {
  color: #0000ef;
}

.jet15 {
  color: #0000f7;
}

.jet16 {
  color: #0000ff;
}

.jet17 {
  color: #0007ff;
}

.jet18 {
  color: #000fff;
}

.jet19 {
  color: #0017ff;
}

.jet20 {
  color: #001fff;
}

.jet21 {
  color: #0027ff;
}

.jet22 {
  color: #002fff;
}

.jet23 {
  color: #0037ff;
}

.jet24 {
  color: #003fff;
}

.jet25 {
  color: #0047ff;
}

.jet26 {
  color: #004fff;
}

.jet27 {
  color: #0057ff;
}

.jet28 {
  color: #005fff;
}

.jet29 {
  color: #0067ff;
}

.jet30 {
  color: #006fff;
}

.jet31 {
  color: #0077ff;
}

.jet32 {
  color: #007fff;
}

.jet33 {
  color: #0087ff;
}

.jet34 {
  color: #008fff;
}

.jet35 {
  color: #0097ff;
}

.jet36 {
  color: #009fff;
}

.jet37 {
  color: #00a7ff;
}

.jet38 {
  color: #00afff;
}

.jet39 {
  color: #00b7ff;
}

.jet40 {
  color: #00bfff;
}

.jet41 {
  color: #00c7ff;
}

.jet42 {
  color: #00cfff;
}

.jet43 {
  color: #00d7ff;
}

.jet44 {
  color: #00dfff;
}

.jet45 {
  color: #00e7ff;
}

.jet46 {
  color: #00efff;
}

.jet47 {
  color: #00f7ff;
}

.jet48 {
  color: #00ffff;
}

.jet49 {
  color: #07fff7;
}

.jet50 {
  color: #0fffef;
}

.jet51 {
  color: #17ffe7;
}

.jet52 {
  color: #1fffdf;
}

.jet53 {
  color: #27ffd7;
}

.jet54 {
  color: #2fffcf;
}

.jet55 {
  color: #37ffc7;
}

.jet56 {
  color: #3fffbf;
}

.jet57 {
  color: #47ffb7;
}

.jet58 {
  color: #4fffaf;
}

.jet59 {
  color: #57ffa7;
}

.jet60 {
  color: #5fff9f;
}

.jet61 {
  color: #67ff97;
}

.jet62 {
  color: #6fff8f;
}

.jet63 {
  color: #77ff87;
}

.jet64 {
  color: #7fff7f;
}

.jet65 {
  color: #87ff77;
}

.jet66 {
  color: #8fff6f;
}

.jet67 {
  color: #97ff67;
}

.jet68 {
  color: #9fff5f;
}

.jet69 {
  color: #a7ff57;
}

.jet70 {
  color: #afff4f;
}

.jet71 {
  color: #b7ff47;
}

.jet72 {
  color: #bfff3f;
}

.jet73 {
  color: #c7ff37;
}

.jet74 {
  color: #cfff2f;
}

.jet75 {
  color: #d7ff27;
}

.jet76 {
  color: #dfff1f;
}

.jet77 {
  color: #e7ff17;
}

.jet78 {
  color: #efff0f;
}

.jet79 {
  color: #f7ff07;
}

.jet80 {
  color: #ffff00;
}

.jet81 {
  color: #fff700;
}

.jet82 {
  color: #ffef00;
}

.jet83 {
  color: #ffe700;
}

.jet84 {
  color: #ffdf00;
}

.jet85 {
  color: #ffd700;
}

.jet86 {
  color: #ffcf00;
}

.jet87 {
  color: #ffc700;
}

.jet88 {
  color: #ffbf00;
}

.jet89 {
  color: #ffb700;
}

.jet90 {
  color: #ffaf00;
}

.jet91 {
  color: #ffa700;
}

.jet92 {
  color: #ff9f00;
}

.jet93 {
  color: #ff9700;
}

.jet94 {
  color: #ff8f00;
}

.jet95 {
  color: #ff8700;
}

.jet96 {
  color: #ff7f00;
}

.jet97 {
  color: #ff7700;
}

.jet98 {
  color: #ff6f00;
}

.jet99 {
  color: #ff6700;
}

.jet100 {
  color: #ff5f00;
}

.jet101 {
  color: #ff5700;
}

.jet102 {
  color: #ff4f00;
}

.jet103 {
  color: #ff4700;
}

.jet104 {
  color: #ff3f00;
}

.jet105 {
  color: #ff3700;
}

.jet106 {
  color: #ff2f00;
}

.jet107 {
  color: #ff2700;
}

.jet108 {
  color: #ff1f00;
}

.jet109 {
  color: #ff1700;
}

.jet110 {
  color: #ff0f00;
}

.jet111 {
  color: #ff0700;
}

.jet112 {
  color: #ff0000;
}

.jet113 {
  color: #f70000;
}

.jet114 {
  color: #ef0000;
}

.jet115 {
  color: #e70000;
}

.jet116 {
  color: #df0000;
}

.jet117 {
  color: #d70000;
}

.jet118 {
  color: #cf0000;
}

.jet119 {
  color: #c70000;
}

.jet120 {
  color: #bf0000;
}

.jet121 {
  color: #b70000;
}

.jet122 {
  color: #af0000;
}

.jet123 {
  color: #a70000;
}

.jet124 {
  color: #9f0000;
}

.jet125 {
  color: #970000;
}

.jet126 {
  color: #8f0000;
}

.jet127 {
  color: #8f0000;
}

.jetbg0 {
  background: #000087;
}

.jetbg1 {
  background: #000087;
}

.jetbg2 {
  background: #00008f;
}

.jetbg3 {
  background: #000097;
}

.jetbg4 {
  background: #00009f;
}

.jetbg5 {
  background: #0000a7;
}

.jetbg6 {
  background: #0000af;
}

.jetbg7 {
  background: #0000b7;
}

.jetbg8 {
  background: #0000bf;
}

.jetbg9 {
  background: #0000c7;
}

.jetbg10 {
  background: #0000cf;
}

.jetbg11 {
  background: #0000d7;
}

.jetbg12 {
  background: #0000df;
}

.jetbg13 {
  background: #0000e7;
}

.jetbg14 {
  background: #0000ef;
}

.jetbg15 {
  background: #0000f7;
}

.jetbg16 {
  background: #0000ff;
}

.jetbg17 {
  background: #0007ff;
}

.jetbg18 {
  background: #000fff;
}

.jetbg19 {
  background: #0017ff;
}

.jetbg20 {
  background: #001fff;
}

.jetbg21 {
  background: #0027ff;
}

.jetbg22 {
  background: #002fff;
}

.jetbg23 {
  background: #0037ff;
}

.jetbg24 {
  background: #003fff;
}

.jetbg25 {
  background: #0047ff;
}

.jetbg26 {
  background: #004fff;
}

.jetbg27 {
  background: #0057ff;
}

.jetbg28 {
  background: #005fff;
}

.jetbg29 {
  background: #0067ff;
}

.jetbg30 {
  background: #006fff;
}

.jetbg31 {
  background: #0077ff;
}

.jetbg32 {
  background: #007fff;
}

.jetbg33 {
  background: #0087ff;
}

.jetbg34 {
  background: #008fff;
}

.jetbg35 {
  background: #0097ff;
}

.jetbg36 {
  background: #009fff;
}

.jetbg37 {
  background: #00a7ff;
}

.jetbg38 {
  background: #00afff;
}

.jetbg39 {
  background: #00b7ff;
}

.jetbg40 {
  background: #00bfff;
}

.jetbg41 {
  background: #00c7ff;
}

.jetbg42 {
  background: #00cfff;
}

.jetbg43 {
  background: #00d7ff;
}

.jetbg44 {
  background: #00dfff;
}

.jetbg45 {
  background: #00e7ff;
}

.jetbg46 {
  background: #00efff;
}

.jetbg47 {
  background: #00f7ff;
}

.jetbg48 {
  background: #00ffff;
}

.jetbg49 {
  background: #07fff7;
}

.jetbg50 {
  background: #0fffef;
}

.jetbg51 {
  background: #17ffe7;
}

.jetbg52 {
  background: #1fffdf;
}

.jetbg53 {
  background: #27ffd7;
}

.jetbg54 {
  background: #2fffcf;
}

.jetbg55 {
  background: #37ffc7;
}

.jetbg56 {
  background: #3fffbf;
}

.jetbg57 {
  background: #47ffb7;
}

.jetbg58 {
  background: #4fffaf;
}

.jetbg59 {
  background: #57ffa7;
}

.jetbg60 {
  background: #5fff9f;
}

.jetbg61 {
  background: #67ff97;
}

.jetbg62 {
  background: #6fff8f;
}

.jetbg63 {
  background: #77ff87;
}

.jetbg64 {
  background: #7fff7f;
}

.jetbg65 {
  background: #87ff77;
}

.jetbg66 {
  background: #8fff6f;
}

.jetbg67 {
  background: #97ff67;
}

.jetbg68 {
  background: #9fff5f;
}

.jetbg69 {
  background: #a7ff57;
}

.jetbg70 {
  background: #afff4f;
}

.jetbg71 {
  background: #b7ff47;
}

.jetbg72 {
  background: #bfff3f;
}

.jetbg73 {
  background: #c7ff37;
}

.jetbg74 {
  background: #cfff2f;
}

.jetbg75 {
  background: #d7ff27;
}

.jetbg76 {
  background: #dfff1f;
}

.jetbg77 {
  background: #e7ff17;
}

.jetbg78 {
  background: #efff0f;
}

.jetbg79 {
  background: #f7ff07;
}

.jetbg80 {
  background: #ffff00;
}

.jetbg81 {
  background: #fff700;
}

.jetbg82 {
  background: #ffef00;
}

.jetbg83 {
  background: #ffe700;
}

.jetbg84 {
  background: #ffdf00;
}

.jetbg85 {
  background: #ffd700;
}

.jetbg86 {
  background: #ffcf00;
}

.jetbg87 {
  background: #ffc700;
}

.jetbg88 {
  background: #ffbf00;
}

.jetbg89 {
  background: #ffb700;
}

.jetbg90 {
  background: #ffaf00;
}

.jetbg91 {
  background: #ffa700;
}

.jetbg92 {
  background: #ff9f00;
}

.jetbg93 {
  background: #ff9700;
}

.jetbg94 {
  background: #ff8f00;
}

.jetbg95 {
  background: #ff8700;
}

.jetbg96 {
  background: #ff7f00;
}

.jetbg97 {
  background: #ff7700;
}

.jetbg98 {
  background: #ff6f00;
}

.jetbg99 {
  background: #ff6700;
}

.jetbg100 {
  background: #ff5f00;
}

.jetbg101 {
  background: #ff5700;
}

.jetbg102 {
  background: #ff4f00;
}

.jetbg103 {
  background: #ff4700;
}

.jetbg104 {
  background: #ff3f00;
}

.jetbg105 {
  background: #ff3700;
}

.jetbg106 {
  background: #ff2f00;
}

.jetbg107 {
  background: #ff2700;
}

.jetbg108 {
  background: #ff1f00;
}

.jetbg109 {
  background: #ff1700;
}

.jetbg110 {
  background: #ff0f00;
}

.jetbg111 {
  background: #ff0700;
}

.jetbg112 {
  background: #ff0000;
}

.jetbg113 {
  background: #f70000;
}

.jetbg114 {
  background: #ef0000;
}

.jetbg115 {
  background: #e70000;
}

.jetbg116 {
  background: #df0000;
}

.jetbg117 {
  background: #d70000;
}

.jetbg118 {
  background: #cf0000;
}

.jetbg119 {
  background: #c70000;
}

.jetbg120 {
  background: #bf0000;
}

.jetbg121 {
  background: #b70000;
}

.jetbg122 {
  background: #af0000;
}

.jetbg123 {
  background: #a70000;
}

.jetbg124 {
  background: #9f0000;
}

.jetbg125 {
  background: #970000;
}

.jetbg126 {
  background: #8f0000;
}

.jetbg127 {
  background: #8f0000;
}

.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.colorbar-header {
  line-height: 18px;
  color: #222;
}

.leaflet-control.colorbar {
  width: 100px;
}

.colorbar {
  line-height: 1px;
  color: #555;
}

.colorbar i {
  width: 18px;
  height: 1px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}

.month-year-input {
  margin-right: 5px;
}

.month-picker-open-button {
  height: 24px !important;
}

.month-select-button {
  height: 24px !important;
}

div.container {
  width: 80%;
}

::-webkit-calendar-picker-indicator {
  margin-left: -10px;
}

table.dataTable thead {
  margin: 0 auto;
}

div.dataTables_scrollBody table {
  margin: 0;
}

.modal.fade.modal-blurred.show {
  backdrop-filter: blur(5px);
}

/*# sourceMappingURL=HNDashboarding.css.map */