@charset "UTF-8";
.height-full {
  height: 100%; }

.width-full {
  width: 100%; }

.min-height100 {
  min-height: 100px; }

.no-border-top {
  border-top: none !important; }

.no-padding {
  padding: 0 !important; }

.no-padding-top {
  padding-top: 0 !important; }

.no-padding-left {
  padding-left: 0 !important; }

.no-margin {
  margin: 0 !important; }

.no-margin-bottom {
  margin-bottom: 0 !important; }

.no-margin-top {
  margin-top: 0 !important; }

.no-top {
  top: 0 !important; }

.padding {
  padding: 10px !important; }

.padding-top {
  padding-left: 10px !important; }

.padding-left {
  padding-left: 10px !important; }

.padding-right {
  padding-right: 10px !important; }

.margin-left {
  margin-left: 10px !important; }

.de-margin-top {
  margin-top: -10px; }

.pull-left {
  float: left !important; }

.pull-right {
  float: right !important; }

.no-float {
  float: none !important; }

.gray {
  color: #444444; }

.control-sized {
  line-height: 32px;
  vertical-align: middle;
  display: inline-block; }

.hidden {
  visibility: hidden; }

.visible {
  visibility: visible !important;
  opacity: 1 !important; }

.not-displayed {
  display: none; }

.margin-centered {
  margin: 0 auto !important;
  float: none !important; }

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

.capitalize {
  text-transform: capitalize; }

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

.block {
  display: block; }

.relative {
  position: relative; }

.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.nowrap {
  white-space: nowrap; }

.zero-size {
  width: 0;
  height: 0;
  overflow: hidden; }

.overflow-hidden {
  overflow: hidden !important; }

.overflow-visible {
  overflow: visible !important; }

.vertical-scroll {
  overflow-y: auto; }

.horizontal-scroll {
  overflow-x: auto; }

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.underline {
  text-decoration: underline; }

.outlined-icon {
  -webkit-text-stroke: 1px #fff;
  -webkit-text-fill-color: transparent; }

.uppercase {
  text-transform: uppercase; }

html {
  height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 14px;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  body > .main {
    overflow: hidden; }
    body > .main > .content,
    body > .main > ui-view > .content {
      background: #F8F8F8;
      box-sizing: border-box;
      padding: 15px;
      height: calc(100% - 50px);
      overflow: auto; }
    body > .main .subheader + .content {
      height: calc(100% - 100px); }

.ngdialog-open .container,
.container.blurred {
  filter: blur(1px); }

.loading {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.4); }
  .loading > .fa {
    font-size: 64px;
    color: #fff;
    line-height: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -32px 0 0 -32px; }

a.fa {
  color: #444444;
  text-decoration: none;
  cursor: pointer; }
  a.fa.fa-download::before {
    position: relative;
    top: 1px; }
  a.fa.help-link {
    color: #0095d9;
    font-size: 20px;
    padding: 5px; }

a {
  outline: none;
  color: #0095d9;
  cursor: pointer; }

.table {
  border-collapse: collapse; }
  .table td {
    vertical-align: top;
    padding: 0; }
    .table td.middle {
      vertical-align: middle; }

.ui-match {
  color: red; }

.asterisk {
  color: #D9534F;
  font-weight: bold;
  font-size: 20px;
  display: inline-block; }

.monaco-container {
  overflow: hidden !important;
  height: 100%; }

.tag {
  font-size: 9px;
  color: #666666;
  border: 1px solid #C5C5C5;
  border-radius: 2px;
  padding: 3px 5px 2px;
  line-height: 1em;
  height: 1em;
  background: #fff; }
  .tag.assertive {
    color: #D9534F;
    border-color: #D9534F; }

.icon {
  vertical-align: middle; }
  .icon img {
    height: 1em; }

.flex-parent-vertical {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }

.flex-parent-horizontal {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row; }

.flex-child-grow {
  -ms-flex-positive: 1;
      flex-grow: 1; }

.flex-center-children {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center; }

.flex-width-auto {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto; }

.ui-layout-pane {
  padding: 0 !important;
  border: none !important; }

.layout-wrap {
  position: relative;
  height: 100%; }

div[ui-layout] {
  overflow: hidden; }

.animate-row {
  transition: none; }

.animate-column {
  transition: none; }

.italic {
  font-style: italic;
  padding-right: 1px; }

.ui-splitbar.dragging > a {
  visibility: hidden !important;
  cursor: col-resize; }

button {
  position: relative; }
  button.fa, button.ion {
    border: none;
    background: none;
    outline: none;
    cursor: pointer; }
    button.fa:disabled, button.ion:disabled {
      cursor: default;
      opacity: .33; }
  button > .badge {
    display: inline-block;
    background: #D9534F;
    color: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 11px;
    font-weight: bold;
    line-height: 11px;
    padding: 1px 3px 1px 3px;
    text-align: center;
    border-radius: 11px; }
  button > .indicator {
    display: inline-block;
    background: #66FF00;
    border: 1px solid #40cb00;
    box-shadow: inset 1px 1px 1px white;
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 5px;
    width: 5px;
    height: 5px; }
  button:hover > .badge {
    background: rgba(217, 83, 79, 0.5); }

.button {
  outline: 0;
  background: #0095d9;
  color: #fff;
  border: none;
  font-weight: bold;
  font-size: 12px;
  line-height: 32px;
  height: 32px;
  display: inline-block;
  margin: 0;
  padding: 0 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.1s;
  text-decoration: none; }
  .button .fa,
  .button .ion {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    margin: -2px 10px 0 0; }
  .button:hover {
    background: #009ce3;
    transition: 0.1s; }
  .button:active {
    background: #008ecf;
    transition: 0.1s; }
  .button.large {
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    padding: 0 28px; }
  .button.small {
    line-height: 26px;
    height: 26px;
    padding: 0 10px; }
    .button.small .fa,
    .button.small .ion {
      margin-right: 5px; }
  .button.clear {
    background: transparent !important;
    color: #0095d9; }
    .button.clear:hover {
      color: #008ecf; }
    .button.clear:active {
      background: #009ce3; }
  .button.outline {
    background: transparent !important;
    color: #0095d9;
    border: 1px solid #0095d9; }
    .button.outline:hover {
      color: #008ecf; }
    .button.outline:active {
      color: #009ce3; }
  .button.left-aligned {
    padding-left: 0; }
  .button.link {
    background: transparent !important;
    color: #0C82BE;
    font-weight: normal;
    font-size: 13px !important; }
    .button.link:hover {
      color: #0fa3ee;
      text-decoration: underline; }
    .button.link:active {
      color: #0C82BE; }
  .button.icon {
    padding: 0;
    width: 32px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    vertical-align: middle;
    font-weight: normal; }
    .button.icon.small {
      width: 26px; }
    .button.icon .fa,
    .button.icon .ion {
      margin-right: 0; }
    .button.icon.clear, .button.icon.outline, .button.icon.link {
      color: #0095d9; }
    .button.icon img {
      height: 1em; }
  .button:disabled {
    transition: 0.1s;
    opacity: .5 !important;
    cursor: default !important; }

.button-danger {
  background: #D9534F; }
  .button-danger:hover {
    background: #db5b57; }
  .button-danger:active {
    background: #d74b47; }
  .button-danger.outline {
    background: #fff;
    color: #D9534F;
    height: 32px;
    line-height: 31px;
    padding: 0 19px 1px;
    border: 1px solid #D9534F; }
    .button-danger.outline:hover {
      color: #d74b47; }
    .button-danger.outline:active {
      color: #db5b57; }
  .button-danger.fa, .button-danger.ion {
    background: initial;
    color: #D9534F !important; }

.button-warning {
  background: #FFC107; }
  .button-warning:hover {
    background: #ffc411; }
  .button-warning:active {
    background: #fcbd00; }
  .button-warning.outline {
    background: #fff;
    color: #FFC107;
    height: 32px;
    line-height: 31px;
    padding: 0 19px 1px;
    border: 1px solid #FFC107; }
    .button-warning.outline:hover {
      color: #fcbd00; }
    .button-warning.outline:active {
      color: #ffc411; }
  .button-warning.fa, .button-warning.ion {
    background: initial;
    color: #FFC107 !important; }

.button-safe {
  background: #6CC04A; }
  .button-safe:hover {
    background: #72c352; }
  .button-safe:active {
    background: #66bd42; }
  .button-safe.fa, .button-safe.ion {
    background: initial;
    color: #6CC04A !important; }

.collapsible > .marker:checked ~ .target:after {
  transform: rotate(90deg);
  transition: 0.1s; }

.collapsible > .marker:checked ~ .content {
  display: block; }

.collapsible > .target {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  padding-left: 26px !important;
  position: relative; }
  .collapsible > .target:after {
    content: " ";
    position: absolute;
    left: 9px;
    top: 50%;
    margin-top: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #888888;
    transition: 0.1s; }

.collapsible > .content {
  display: none; }

.marker {
  display: none; }

.tabs {
  position: relative;
  width: 100%;
  margin-top: 5px;
  height: calc(100% - 5px);
  display: -ms-flexbox;
  display: flex; }
  .tabs.empty {
    height: auto; }
  .tabs > .spacer {
    -ms-flex-positive: 2;
        flex-grow: 2; }
  .tabs > .tab {
    overflow: hidden;
    height: 100%;
    float: left; }
    .tabs > .tab.selected {
      -ms-flex-negative: 0;
          flex-shrink: 0; }
    .tabs > .tab > .marker:checked + .target, .tabs > .tab > .marker.selected + .target {
      background: #6cb9e2;
      color: #fff; }
      .tabs > .tab > .marker:checked + .target .title > .fa, .tabs > .tab > .marker.selected + .target .title > .fa {
        color: #fff; }
    .tabs > .tab > .marker:checked + .target + .content, .tabs > .tab > .marker.selected + .target + .content {
      display: block; }
    .tabs > .tab > .target {
      color: #777;
      background: #eee;
      line-height: 28px;
      padding: 0 10px;
      border: 1px solid #aaa;
      margin-left: 5px;
      display: -ms-flexbox;
      display: flex;
      cursor: pointer;
      -webkit-user-select: none;
          -ms-user-select: none;
              user-select: none; }
      .tabs > .tab > .target.last {
        margin-right: 5px; }
      .tabs > .tab > .target .fa {
        color: #0095d9;
        opacity: .7;
        font-size: 18px;
        line-height: 28px;
        padding-left: 5px; }
        .tabs > .tab > .target .fa:last-child {
          padding-right: 10px;
          margin-right: -10px; }
        .tabs > .tab > .target .fa:hover {
          opacity: .9; }
      .tabs > .tab > .target .title {
        max-width: 130px;
        overflow: hidden;
        white-space: nowrap; }
        .tabs > .tab > .target .title > .fa {
          color: #777;
          opacity: .9;
          padding: 0 16px 0 0; }
          .tabs > .tab > .target .title > .fa:hover {
            opacity: .9; }
        .tabs > .tab > .target .title + [class*="fa-"] {
          margin-left: 8px; }
      .tabs > .tab > .target .asterisk {
        margin: 0 -2px 0 2px; }
    .tabs > .tab > .content {
      top: 28px;
      border-top: 5px solid #0095d9;
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0; }
  .tabs > .button {
    height: 24px;
    line-height: 1;
    padding: 0 15px;
    margin-left: 5px; }
    .tabs > .button.last {
      margin-right: 5px; }

.marker {
  display: none; }

.tree {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow-x: hidden; }
  .tree.plain .item {
    padding-left: 10px; }
  .tree.plain .edit, .tree.plain li.delete,
  .tree.plain .delete {
    padding-left: 8px; }
    .tree.plain .edit .input, .tree.plain li.delete .input,
    .tree.plain .delete .input {
      margin-left: 20px; }
  .tree.plain-root > li > .item {
    padding-left: 10px; }
  .tree.plain-root > li > ul {
    padding-left: 5px; }
  .tree.plain-root > ng-include .edit, .tree.plain-root > ng-include li.delete,
  .tree.plain-root > ng-include .delete {
    padding-left: 8px; }
    .tree.plain-root > ng-include .edit .input, .tree.plain-root > ng-include li.delete .input,
    .tree.plain-root > ng-include .delete .input {
      margin-left: 20px; }
  .tree.flexible .item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center; }
    .tree.flexible .item:hover {
      padding-right: 0; }
    .tree.flexible .item:first-child {
      padding-left: 5px; }
    .tree.flexible .item > i.fa,
    .tree.flexible .item > i.ion {
      padding-right: 0;
      margin-right: 0; }
      .tree.flexible .item > i.fa.fa-cubes,
      .tree.flexible .item > i.ion.fa-cubes {
        margin-left: -2px;
        margin-right: -2px; }
      .tree.flexible .item > i.fa.fa-bolt,
      .tree.flexible .item > i.ion.fa-bolt {
        padding-left: 0;
        padding-right: 0; }
    .tree.flexible .item > .label {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 5px; }
    .tree.flexible .item > .description {
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 5px; }
    .tree.flexible .item > select {
      margin-left: 10px;
      margin-top: 3px;
      box-sizing: border-box;
      font-size: 13px;
      line-height: 24px;
      height: 26px;
      min-width: 26px;
      box-shadow: inset 1px 1px 2px -1px rgba(0, 0, 0, 0.2); }
    .tree.flexible .item .template {
      margin-left: auto;
      overflow: hidden;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }
    .tree.flexible .item .controls {
      height: 30px;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      margin-right: 0; }
  .tree ul {
    list-style: none;
    margin: 0;
    padding-left: 18px; }
  .tree li {
    position: relative;
    overflow: hidden; }
    .tree li.box[tree-node] {
      border: 1px solid #6CC04A;
      margin: 10px; }
    .tree li.box [tree-node="child"] {
      border: 1px solid lightgrey;
      margin: 4px; }
    .tree li.box .target:after {
      border-color: transparent transparent transparent lightgrey; }
    .tree li.child-box > label.target:after {
      display: none; }
    .tree li > .item {
      display: block;
      padding-left: 26px;
      line-height: 32px;
      transition: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      cursor: default; }
      .tree li > .item.drop-before {
        box-shadow: inset 0 2px 0 0 #0FACBF; }
      .tree li > .item.drop-inside {
        box-shadow: inset 0 0 0 2px #0FACBF; }
      .tree li > .item.drop-after {
        box-shadow: inset 0 -2px 0 0 #0FACBF; }
      .tree li > .item:hover > .controls {
        transition-delay: 0.25s; }
        .tree li > .item:hover > .controls > button.fa,
        .tree li > .item:hover > .controls > button.ion {
          visibility: visible;
          opacity: 0.75;
          transition-delay: 0.25s; }
      .tree li > .item:active > .controls {
        visibility: hidden;
        opacity: 0; }
      .tree li > .item.clickable {
        cursor: pointer; }
        .tree li > .item.clickable:hover {
          background: #E5F1F8; }
          .tree li > .item.clickable:hover .controls {
            background: #E5F1F8; }
      .tree li > .item.drag-over {
        background: #E5F1F8;
        box-shadow: inset 0 0 1px 1px #8CC1DD;
        opacity: 0.8; }
      .tree li > .item.selected > .label {
        font-weight: bold; }
      .tree li > .item.warning > .label {
        color: #D9534F; }
      .tree li > .item > .description {
        display: inline-block;
        color: #888888;
        font-size: 0.8em;
        font-style: italic;
        vertical-align: top;
        margin-right: 10px; }
        .tree li > .item > .description > .fa {
          font-size: 10px;
          margin-right: 3px; }
          .tree li > .item > .description > .fa:last-child {
            margin-right: 1px; }
      .tree li > .item > i.fa,
      .tree li > .item > i.ion {
        color: grey;
        padding-right: 5px; }
        .tree li > .item > i.fa.fa-folder-open-o,
        .tree li > .item > i.ion.fa-folder-open-o {
          padding-right: 3px; }
        .tree li > .item > i.fa.fa-cubes,
        .tree li > .item > i.ion.fa-cubes {
          margin-left: -2px;
          margin-right: -2px; }
        .tree li > .item > i.fa.fa-bolt,
        .tree li > .item > i.ion.fa-bolt {
          padding-left: 3px;
          padding-right: 7px; }
      .tree li > .item > .asterisk {
        margin: -2px 2px 0 -14px; }
      .tree li > .item > .controls {
        position: absolute;
        right: 0;
        top: 0;
        padding: 0 5px; }
        .tree li > .item > .controls > button.fa,
        .tree li > .item > .controls > button.ion {
          visibility: hidden;
          opacity: 0;
          color: #0095d9;
          float: right;
          line-height: 30px;
          padding-left: 2px;
          font-size: 17px; }
          .tree li > .item > .controls > button.fa.control-visible,
          .tree li > .item > .controls > button.ion.control-visible {
            visibility: visible !important;
            opacity: 1 !important; }
          .tree li > .item > .controls > button.fa:hover,
          .tree li > .item > .controls > button.ion:hover {
            opacity: 1 !important; }
          .tree li > .item > .controls > button.fa.ion-ios-albums-outline,
          .tree li > .item > .controls > button.ion.ion-ios-albums-outline {
            opacity: 1;
            font-size: 15px;
            position: relative;
            top: 1px; }
          .tree li > .item > .controls > button.fa.ion-ios-folder,
          .tree li > .item > .controls > button.ion.ion-ios-folder {
            position: relative;
            top: 1px;
            font-size: 18px; }
          .tree li > .item > .controls > button.fa.ion-md-add,
          .tree li > .item > .controls > button.ion.ion-md-add {
            font-size: 22px; }
      .tree li > .item > input[type=checkbox] {
        display: inline-block;
        margin: 0 7px 0 -2px;
        padding: 0;
        transform: translate(-200vw, 0); }
        .tree li > .item > input[type=checkbox]:before {
          content: '';
          display: inline-block;
          width: 16px;
          height: 16px;
          border: 1px solid #C5C5C5;
          transform: translate(200vw, 1px);
          cursor: pointer;
          overflow: hidden;
          box-sizing: border-box; }
        .tree li > .item > input[type=checkbox]:checked:before {
          color: #0095d9;
          font-size: 16px;
          line-height: 16px;
          content: '✔';
          text-align: center; }
        .tree li > .item > input[type=checkbox]:disabled:before {
          background: #EFEFEF;
          cursor: default; }
      .tree li > .item > .left-button > button {
        cursor: inherit;
        color: #ABABAB !important;
        padding-top: 4px;
        padding-right: 5px;
        margin-top: 4px;
        margin-left: -10px;
        margin-right: 5px;
        border-radius: 0px;
        border-right: 1px solid #ABABAB;
        font-size: 12px; }
      .tree li > .item > .radio-container {
        display: inline;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none; }
        .tree li > .item > .radio-container > .tree-radio {
          position: absolute;
          opacity: 0;
          cursor: pointer; }
          .tree li > .item > .radio-container > .tree-radio:checked ~ .radio-check {
            background-color: #F8F8F8; }
            .tree li > .item > .radio-container > .tree-radio:checked ~ .radio-check:after {
              display: block; }
        .tree li > .item > .radio-container > .radio-check {
          margin-top: 5px;
          margin-right: 10px;
          margin-left: 5px;
          position: absolute;
          top: 0;
          left: 0;
          height: 20px;
          width: 20px;
          background-color: #F8F8F8;
          border: 1px solid #999;
          border-radius: 50%; }
          .tree li > .item > .radio-container > .radio-check:after {
            content: "";
            position: absolute;
            display: none;
            top: 3px;
            left: 3px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #3aace1; }
    .tree li > .target {
      z-index: 100;
      position: absolute;
      height: 32px;
      margin-right: -26px; }
    .tree li > .target:after {
      border-color: transparent transparent transparent #0095d9; }
    .tree li.edit, .tree li.delete, .tree li.delete {
      height: 32px;
      line-height: 32px; }
      .tree li.edit button.fa, .tree li.delete button.fa, .tree li.delete button.fa {
        float: right;
        color: #0095d9;
        line-height: 30px;
        padding-left: 2px;
        font-size: 14px; }
        .tree li.edit button.fa:disabled, .tree li.delete button.fa:disabled, .tree li.delete button.fa:disabled {
          cursor: default;
          opacity: 0.33; }
    .tree li.edit, .tree li.delete {
      padding: 0 5px 0 24px; }
      .tree li.edit i.fa, .tree li.delete i.fa {
        float: left;
        margin-left: 2px;
        line-height: 32px;
        color: #444444; }
      .tree li.edit .input, .tree li.delete .input {
        display: block;
        margin-right: 55px;
        margin-left: 21px; }
        .tree li.edit .input input[type=text], .tree li.delete .input input[type=text] {
          width: 100%;
          font-size: 1em;
          line-height: 16px;
          padding: 2px 1px;
          margin-top: 4px;
          outline: none; }
    .tree li.delete {
      padding-left: 26px;
      color: #D9534F; }

.horizontal-scroll > .tree {
  width: auto;
  overflow: visible !important; }
  .horizontal-scroll > .tree li {
    overflow: visible !important; }
    .horizontal-scroll > .tree li > .item {
      overflow: visible !important; }

.ngdialog {
  padding-top: 8vh; }
  .ngdialog.alert > .ngdialog-content, .ngdialog.confirm > .ngdialog-content, .ngdialog.confirm-with-option > .ngdialog-content {
    width: 360px; }
  .ngdialog.data-entry > .ngdialog-content {
    width: 520px; }
  .ngdialog.about > .ngdialog-content, .ngdialog.help > .ngdialog-content {
    width: 500px; }
  .ngdialog.error > .ngdialog-content {
    width: 840px; }
  .ngdialog.info > .ngdialog-content .content, .ngdialog.error > .ngdialog-content .content, .ngdialog.compile-error > .ngdialog-content .content {
    -webkit-user-select: text;
        -ms-user-select: text;
            user-select: text; }
    .ngdialog.info > .ngdialog-content .content .error-message, .ngdialog.error > .ngdialog-content .content .error-message, .ngdialog.compile-error > .ngdialog-content .content .error-message {
      background-color: rgba(180, 180, 180, 0.4);
      border: 1px solid #ABABAB;
      margin-bottom: 6px; }
      .ngdialog.info > .ngdialog-content .content .error-message > .header, .ngdialog.error > .ngdialog-content .content .error-message > .header, .ngdialog.compile-error > .ngdialog-content .content .error-message > .header {
        font-weight: bold;
        color: #000000;
        background-color: #C5C5C5;
        padding: 6px; }
      .ngdialog.info > .ngdialog-content .content .error-message > h4.explanation, .ngdialog.error > .ngdialog-content .content .error-message > h4.explanation, .ngdialog.compile-error > .ngdialog-content .content .error-message > h4.explanation {
        margin-bottom: 4px; }
      .ngdialog.info > .ngdialog-content .content .error-message > .message, .ngdialog.error > .ngdialog-content .content .error-message > .message, .ngdialog.compile-error > .ngdialog-content .content .error-message > .message {
        padding: 4px 6px; }
        .ngdialog.info > .ngdialog-content .content .error-message > .message > h4, .ngdialog.error > .ngdialog-content .content .error-message > .message > h4, .ngdialog.compile-error > .ngdialog-content .content .error-message > .message > h4 {
          margin: 0; }
        .ngdialog.info > .ngdialog-content .content .error-message > .message > .code-row, .ngdialog.error > .ngdialog-content .content .error-message > .message > .code-row, .ngdialog.compile-error > .ngdialog-content .content .error-message > .message > .code-row {
          padding: 4px 6px;
          font-style: italic; }
          .ngdialog.info > .ngdialog-content .content .error-message > .message > .code-row.code-error, .ngdialog.error > .ngdialog-content .content .error-message > .message > .code-row.code-error, .ngdialog.compile-error > .ngdialog-content .content .error-message > .message > .code-row.code-error {
            color: #D9534F;
            font-weight: bold; }
  .ngdialog > .ngdialog-content {
    margin: 0 auto;
    max-width: 90%;
    position: relative;
    width: 640px;
    box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.2); }
    .ngdialog > .ngdialog-content h1, .ngdialog > .ngdialog-content h2 {
      margin: 0;
      font-weight: normal;
      color: #444444;
      font-size: 18px;
      line-height: 50px;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .ngdialog > .ngdialog-content .subtitle {
      font-size: 16px;
      margin: 5px 0 10px;
      color: #444444; }
    .ngdialog > .ngdialog-content > .heading {
      background: #EFEFEF;
      height: 50px;
      border-bottom: 1px solid #ABABAB;
      padding: 0 20px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-line-pack: start;
          align-content: flex-start; }
      .ngdialog > .ngdialog-content > .heading > h1 {
        -ms-flex-positive: 2;
            flex-grow: 2; }
      .ngdialog > .ngdialog-content > .heading > span {
        -ms-flex-positive: 1;
            flex-grow: 1;
        text-align: right;
        margin: 0;
        font-weight: normal;
        color: #444444;
        font-size: 13px;
        line-height: 50px;
        vertical-align: middle;
        white-space: nowrap; }
      .ngdialog > .ngdialog-content > .heading .search, .ngdialog > .ngdialog-content > .heading .dropdown {
        -ms-flex-item-align: center;
            align-self: center; }
      .ngdialog > .ngdialog-content > .heading .dropdown {
        opacity: 1;
        margin: 0 20px; }
        .ngdialog > .ngdialog-content > .heading .dropdown > select {
          padding: 0 5px;
          border: 1px solid #D7D7D7;
          font-size: 16px;
          line-height: 32px;
          height: 32px;
          outline: none;
          background: #fff; }
    .ngdialog > .ngdialog-content .menu {
      margin: 15px 20px;
      float: left;
      width: 200px;
      list-style: none;
      padding: 0; }
      .ngdialog > .ngdialog-content .menu.short {
        width: 142.857142857px; }
        .ngdialog > .ngdialog-content .menu.short + .content {
          border: none;
          margin: 15px 20px 15px 182.857142857px; }
      .ngdialog > .ngdialog-content .menu + .content {
        border: 1px solid #ABABAB;
        margin: 15px 20px 15px 240px; }
      .ngdialog > .ngdialog-content .menu > li {
        cursor: pointer;
        color: #1E6FAB;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 15px;
        line-height: 26px;
        height: 26px; }
        .ngdialog > .ngdialog-content .menu > li:hover {
          background: #F4F4F4; }
        .ngdialog > .ngdialog-content .menu > li.active {
          background: #1E6FAB;
          color: #fff; }
          .ngdialog > .ngdialog-content .menu > li.active:hover {
            background: #1E6FAB;
            cursor: default; }
        .ngdialog > .ngdialog-content .menu > li[collapsible] {
          padding: 0 2px; }
          .ngdialog > .ngdialog-content .menu > li[collapsible]:hover {
            background: none; }
        .ngdialog > .ngdialog-content .menu > li > .menu {
          margin: 0 0 0 16px; }
    .ngdialog > .ngdialog-content .search {
      position: relative;
      float: right; }
      .ngdialog > .ngdialog-content .search a {
        position: absolute;
        padding: 0 5px;
        right: 0;
        top: 0;
        line-height: 31px; }
        .ngdialog > .ngdialog-content .search a .fa-times {
          color: #1E6FAB; }
    .ngdialog > .ngdialog-content > .content {
      padding: 15px 20px;
      max-height: calc(100vh - 16vh - 80px);
      overflow: auto; }
      .ngdialog > .ngdialog-content > .content [ui-ace] {
        margin: -15px -20px;
        height: 400px; }
      .ngdialog > .ngdialog-content > .content .column > h2 {
        line-height: 1em;
        padding-bottom: 15px;
        overflow: visible; }
        .ngdialog > .ngdialog-content > .content .column > h2 > .button {
          padding: 0 15px;
          position: relative;
          top: -7px; }
      .ngdialog > .ngdialog-content > .content .column > .outlined {
        overflow: auto;
        border: 1px solid #ABABAB;
        height: calc(100vh - 16vh - 160px); }
      .ngdialog > .ngdialog-content > .content .box {
        border: 1px solid #C5C5C5;
        padding: 10px; }
      .ngdialog > .ngdialog-content > .content .panel {
        background: #D7D7D7;
        padding: 10px;
        margin-bottom: 10px; }
    .ngdialog > .ngdialog-content > .buttons {
      clear: both;
      overflow: auto;
      padding: 0 20px 15px; }
      .ngdialog > .ngdialog-content > .buttons > .button {
        float: right; }
        .ngdialog > .ngdialog-content > .buttons > .button.clear {
          padding: 0;
          margin: 0 20px 0 0; }
    .ngdialog > .ngdialog-content > .secondary-content {
      padding: 0 20px;
      border-top: 1px solid #C5C5C5;
      border-bottom: 1px solid #C5C5C5;
      background-color: #F4F4F4;
      max-height: calc(60vh - 190px);
      overflow: auto; }
      .ngdialog > .ngdialog-content > .secondary-content + .buttons {
        padding-top: 15px; }
    .ngdialog > .ngdialog-content .dropdown-toggle {
      border: 1px solid #ABABAB;
      line-height: 28px;
      font-size: 16px;
      -webkit-user-select: none;
          -ms-user-select: none;
              user-select: none;
      padding: 6px 8px 6px 6px;
      background: #fff;
      min-width: 512px;
      text-align: left;
      cursor: pointer;
      outline: none;
      margin-right: 20px;
      margin-bottom: 16px; }
      .ngdialog > .ngdialog-content .dropdown-toggle .label {
        color: #888888; }
      .ngdialog > .ngdialog-content .dropdown-toggle .value {
        margin: 6px 6px 6px 12px; }
      .ngdialog > .ngdialog-content .dropdown-toggle .version {
        font-size: 14px; }
      .ngdialog > .ngdialog-content .dropdown-toggle i {
        float: right;
        margin: 6px 0 0 0;
        color: #0095d9;
        font-size: 18px; }
    .ngdialog > .ngdialog-content .dropdown-menu {
      -webkit-user-select: none;
          -ms-user-select: none;
              user-select: none;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 0;
      margin-top: 0;
      text-align: left;
      list-style: none;
      background-color: #fff;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
      .ngdialog > .ngdialog-content .dropdown-menu li {
        padding: 0 0 0 6px;
        cursor: pointer;
        line-height: 31px; }
        .ngdialog > .ngdialog-content .dropdown-menu li:hover {
          background: #E5F1F8; }
        .ngdialog > .ngdialog-content .dropdown-menu li .label {
          color: #444444;
          font-size: 14px;
          margin-left: 6px; }
        .ngdialog > .ngdialog-content .dropdown-menu li .description {
          color: #444444;
          font-size: 12px;
          margin-left: 8px;
          overflow: hidden; }
    .ngdialog > .ngdialog-content .controls {
      padding: 2px;
      margin: 2px 3px 2px 0px; }
      .ngdialog > .ngdialog-content .controls i {
        margin: -2px 4px 0px 4px; }

.pane {
  background: #F4F4F4;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }
  .pane .pane-block {
    -ms-flex-positive: 1;
        flex-grow: 1;
    overflow: hidden;
    position: relative;
    box-sizing: border-box; }
    .pane .pane-block > .header {
      display: -ms-flexbox;
      display: flex;
      background: #D7D7D7;
      padding: 0 10px;
      height: 32px;
      line-height: 32px; }
      .pane .pane-block > .header i.fa,
      .pane .pane-block > .header i.ion {
        padding-right: 8px;
        line-height: 32px; }
      .pane .pane-block > .header > button.ion, .pane .pane-block > .header a.ion,
      .pane .pane-block > .header > button.fa, .pane .pane-block > .header a.fa {
        color: #0095d9;
        float: right;
        line-height: 32px;
        padding: 0 8px;
        margin-right: -8px;
        margin-left: 3px;
        font-size: 16px; }
        .pane .pane-block > .header > button.ion.fa-search, .pane .pane-block > .header a.ion.fa-search,
        .pane .pane-block > .header > button.fa.fa-search, .pane .pane-block > .header a.fa.fa-search {
          position: relative;
          top: -1px; }
        .pane .pane-block > .header > button.ion.ion-ios-folder, .pane .pane-block > .header a.ion.ion-ios-folder,
        .pane .pane-block > .header > button.fa.ion-ios-folder, .pane .pane-block > .header a.fa.ion-ios-folder {
          font-size: 19px; }
        .pane .pane-block > .header > button.ion.ion-md-add, .pane .pane-block > .header a.ion.ion-md-add,
        .pane .pane-block > .header > button.fa.ion-md-add, .pane .pane-block > .header a.fa.ion-md-add {
          font-size: 22px; }
        .pane .pane-block > .header > button.ion.active, .pane .pane-block > .header a.ion.active,
        .pane .pane-block > .header > button.fa.active, .pane .pane-block > .header a.fa.active {
          box-sizing: border-box;
          border: 2px inset #ccc;
          background: #C5C5C5;
          padding: 8px;
          line-height: 13px; }
      .pane .pane-block > .header > span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%; }
      .pane .pane-block > .header input[type=text] {
        padding: 0 4px;
        line-height: 19px;
        box-sizing: border-box;
        position: relative;
        top: -1px;
        width: 100%;
        outline: none; }
      .pane .pane-block > .header .icon-overlay {
        position: absolute;
        left: 17px;
        top: -6px;
        font-size: 12px; }
    .pane .pane-block > .content {
      top: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px;
      overflow-y: auto; }
      .pane .pane-block > .content.horizontal-scroll {
        overflow-x: auto; }
      .pane .pane-block > .content > .pane-group {
        margin: 0 -10px; }
    .pane .pane-block > .header + .content {
      top: 32px; }
  .pane .pane-group > .header {
    display: block;
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    background-color: rgba(215, 215, 215, 0.49);
    color: black;
    font-weight: bold; }
  .pane .pane-group > .content {
    padding: 5px 0; }
  .pane .pane-group:last-child > .content {
    border: none; }

.pane-with-tabs > .tabs {
  margin-top: 5px;
  height: calc(100% - 5px); }
  .pane-with-tabs > .tabs > .tab > .content {
    padding: 0;
    overflow: hidden; }

.explorer-container > .explorer {
  display: block;
  visibility: hidden;
  position: absolute;
  left: 91px;
  z-index: 1200;
  background: #3aace1;
  line-height: 30px;
  margin: 0;
  padding: 10px 0;
  border-radius: 10px;
  box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.15);
  transition: visibility 0s;
  transition-delay: 0.1s;
  min-width: 150px;
  max-width: 300px;
  font-size: 14px;
  color: white; }
  .explorer-container > .explorer li {
    display: block;
    text-align: left;
    position: relative;
    cursor: default;
    height: 30px; }
    .explorer-container > .explorer li.splitter {
      height: 1px;
      background: rgba(255, 255, 255, 0.66);
      margin: 0 10px; }
    .explorer-container > .explorer li:hover {
      cursor: pointer;
      color: rgba(255, 255, 255, 0.66); }
      .explorer-container > .explorer li:hover > .explorer {
        visibility: visible;
        transition-delay: 0.3s; }
      .explorer-container > .explorer li:hover > .fa-caret-left {
        opacity: 1; }
    .explorer-container > .explorer li > .fa-caret-left {
      position: absolute;
      left: 5px;
      top: 12px;
      opacity: 0.5;
      font-size: 15px; }
    .explorer-container > .explorer li > [ng-click], .explorer-container > .explorer li label, .explorer-container > .explorer li [href] {
      cursor: pointer; }
      .explorer-container > .explorer li > [ng-click]:hover, .explorer-container > .explorer li label:hover, .explorer-container > .explorer li [href]:hover {
        background: #8CC1DD; }
    .explorer-container > .explorer li > span, .explorer-container > .explorer li label, .explorer-container > .explorer li a {
      display: inline-block;
      box-sizing: border-box;
      padding: 0 20px;
      line-height: 30px;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-decoration: inherit;
      color: inherit; }
      .explorer-container > .explorer li > span i, .explorer-container > .explorer li label i, .explorer-container > .explorer li a i {
        float: right;
        color: white;
        line-height: 30px; }
    .explorer-container > .explorer li:first-child {
      padding-bottom: 10px; }
      .explorer-container > .explorer li:first-child > span {
        width: calc(100% - 20px);
        margin: 0 10px;
        border-bottom: 1px solid white; }
    .explorer-container > .explorer li:last-child > span {
      cursor: pointer;
      width: calc(100% - 20px);
      margin: 0 10px;
      padding: 0 10px;
      background-color: lightblue;
      border-radius: 5px; }
    .explorer-container > .explorer li > .explorer {
      top: -5px;
      right: calc(100% + 8px); }
      .explorer-container > .explorer li > .explorer:before {
        border: 6px solid #3aace1;
        top: 24px;
        right: -8px;
        border-right-width: 0;
        border-left-width: 8px;
        border-top-color: transparent;
        border-bottom-color: transparent; }
      .explorer-container > .explorer li > .explorer:after {
        height: 100%;
        right: -8px;
        top: 0;
        width: 8px;
        background: transparent; }
  .explorer-container > .explorer:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid #3aace1;
    right: 12px;
    top: -8px;
    border-top-width: 0;
    border-bottom-width: 8px;
    border-right-color: transparent;
    border-left-color: transparent; }
  .explorer-container > .explorer:after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    right: 0;
    top: -8px;
    height: 8px;
    background: transparent; }

.explorer-container:hover > .explorer {
  visibility: visible;
  transition-delay: 0.01s; }

.form {
  margin: 10px 0; }
  .form.login {
    width: 480px; }
  .form.inline {
    margin: 0; }
    .form.inline .form-control {
      margin: 0; }

.form-control {
  margin-bottom: 15px; }
  .form-control:after {
    content: "";
    display: table;
    clear: both; }
  .form-control:last-child {
    margin-bottom: 0; }
  .form-control .spacing {
    display: inline-block;
    width: 15px; }
  .form-control .label {
    float: left;
    font-size: 16px;
    line-height: 32px;
    height: 32px;
    color: #444444; }
    .form-control .label + .sub-label {
      display: inline-block;
      padding-bottom: 5px;
      position: relative;
      top: -2px;
      width: 100%; }
  .form-control .sub-label {
    color: #ABABAB;
    font-size: 12px;
    line-height: 18px; }
  .form-control .text {
    font-size: 14px;
    margin-left: 10px;
    line-height: 32px;
    height: 32px;
    color: #444444; }
  .form-control input[type=text],
  .form-control input[type=url],
  .form-control input[type=password],
  .form-control input[type=number],
  .form-control input[type=date],
  .form-control input[type=email],
  .form-control select {
    padding: 0 5px;
    border: 1px solid #D7D7D7;
    font-size: 16px;
    line-height: 32px;
    height: 32px;
    outline: none;
    background: #fff; }
    .form-control input[type=text].ng-invalid,
    .form-control input[type=url].ng-invalid,
    .form-control input[type=password].ng-invalid,
    .form-control input[type=number].ng-invalid,
    .form-control input[type=date].ng-invalid,
    .form-control input[type=email].ng-invalid,
    .form-control select.ng-invalid {
      border-color: #D9534F; }
    .form-control input[type=text]:disabled,
    .form-control input[type=url]:disabled,
    .form-control input[type=password]:disabled,
    .form-control input[type=number]:disabled,
    .form-control input[type=date]:disabled,
    .form-control input[type=email]:disabled,
    .form-control select:disabled {
      background: #F4F4F4; }
      .form-control input[type=text]:disabled:-ms-input-placeholder,
      .form-control input[type=url]:disabled:-ms-input-placeholder,
      .form-control input[type=password]:disabled:-ms-input-placeholder,
      .form-control input[type=number]:disabled:-ms-input-placeholder,
      .form-control input[type=date]:disabled:-ms-input-placeholder,
      .form-control input[type=email]:disabled:-ms-input-placeholder,
      .form-control select:disabled:-ms-input-placeholder {
        color: #F4F4F4; }
      .form-control input[type=text]:disabled::placeholder,
      .form-control input[type=url]:disabled::placeholder,
      .form-control input[type=password]:disabled::placeholder,
      .form-control input[type=number]:disabled::placeholder,
      .form-control input[type=date]:disabled::placeholder,
      .form-control input[type=email]:disabled::placeholder,
      .form-control select:disabled::placeholder {
        color: #F4F4F4; }
    .form-control input[type=text]:focus,
    .form-control input[type=url]:focus,
    .form-control input[type=password]:focus,
    .form-control input[type=number]:focus,
    .form-control input[type=date]:focus,
    .form-control input[type=email]:focus,
    .form-control select:focus {
      border-color: #C5C5C5; }
  .form-control textarea {
    font-family: inherit;
    font-size: 16px;
    line-height: 32px;
    box-sizing: border-box;
    min-height: 4em;
    resize: none;
    background: #fff;
    border: 1px solid #D7D7D7;
    padding: 0 4px;
    outline: none; }
    .form-control textarea.ng-invalid {
      border-color: #D9534F; }
    .form-control textarea:disabled {
      background: #F4F4F4; }
      .form-control textarea:disabled:-ms-input-placeholder {
        color: #F4F4F4; }
      .form-control textarea:disabled::placeholder {
        color: #F4F4F4; }
    .form-control textarea:focus {
      border-color: #C5C5C5; }
  .form-control input[type=radio],
  .form-control input[type=checkbox] {
    margin: 0 5px 0 0 !important;
    line-height: 30px;
    height: 30px;
    width: 16px;
    vertical-align: middle; }
  .form-control .checkbox {
    font-size: 14px;
    line-height: 24px; }
  .form-control .radio {
    font-size: 16px;
    line-height: 32px;
    color: #444444;
    margin-right: 15px; }
  .form-control tr > td {
    padding-bottom: 15px; }
    .form-control tr > td > input[type=text],
    .form-control tr > td > select {
      width: 100%; }
  .form-control tr:first-child > td {
    height: 32px; }
  .form-control tr:last-child > td {
    padding-bottom: 0; }
  .form-control.path {
    white-space: nowrap; }
    .form-control.path > span {
      display: inline-block;
      font-size: 16px;
      line-height: 24px;
      height: 24px;
      color: #444444; }
      .form-control.path > span > span {
        float: left; }
      .form-control.path > span:last-child {
        margin-right: 20px; }
    .form-control.path input {
      padding: 0;
      border: none;
      border-bottom: 1px solid #D7D7D7;
      line-height: 24px;
      height: 24px;
      width: 2em;
      text-align: center; }

.form-control-group {
  border: solid 1px #C5C5C5;
  margin: 0 8px 8px;
  padding: 0; }
  .form-control-group > .heading {
    background: #EFEFEF;
    padding: 0 8px; }
    .form-control-group > .heading h2 {
      line-height: 35px; }
  .form-control-group > .content {
    padding: 8px 8px 0; }

div[class^="col-"] input[type=text],
div[class^="col-"] input[type=url],
div[class^="col-"] input[type=password],
div[class^="col-"] input[type=number],
div[class^="col-"] input[type=date],
div[class^="col-"] input[type=email],
div[class^="col-"] textarea,
div[class^="col-"] select,
span[class^="col-"] input[type=text],
span[class^="col-"] input[type=url],
span[class^="col-"] input[type=password],
span[class^="col-"] input[type=number],
span[class^="col-"] input[type=date],
span[class^="col-"] input[type=email],
span[class^="col-"] textarea,
span[class^="col-"] select {
  width: 100%; }

.switch {
  vertical-align: middle;
  background: #D9534F;
  border-color: #D9534F;
  transition: 0.1s ease-out background-color; }
  .switch small {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: 0.1s ease-out left; }
  .switch.checked {
    transition: 0.1s ease-out background-color; }
    .switch.checked small {
      transition: 0.1s ease-out left; }

.select2-search input,
.select2-search-choice-close,
.select2-container .select2-choice abbr,
.select2-container .select2-choice .select2-arrow b {
  background-image: url("/images/select2.png") !important; }

.cards {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: start;
      justify-content: flex-start; }
  .cards > .card {
    display: block;
    box-sizing: border-box;
    background: #fff;
    margin: 15px;
    padding: 15px;
    width: 25%;
    box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.15);
    text-decoration: none !important;
    color: #444444;
    font-size: 13px;
    border: 1px solid #fff;
    position: relative; }
    .cards > .card[ng-click] {
      cursor: pointer; }
    .cards > .card.focused {
      border-image-slice: 10 10 10 10;
      border-image-width: 10px 10px 10px 10px;
      border-image-outset: 0 0 0 0;
      border-image-repeat: round round;
      border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAMAAAAocOYLAAAADFBMVEUAAAAMgr4Mgr7////zfk7qAAAAAnRSTlMAAHaTzTgAAAA0SURBVHgBY2CCAEYGBIsRSYwBPyAsz0hAnmlA5Rkp9yGlukfDjxEKsLBGw4+wPCy/YmUBAIKWAM2knPDIAAAAAElFTkSuQmCC"); }
      .cards > .card.focused > .title {
        color: #0C82BE; }
    .cards > .card > .title {
      display: inline-block;
      padding-bottom: 5px;
      width: 100%;
      border-bottom: 3px solid #0C82BE;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .cards > .card > .title.focused {
        text-align: left;
        padding-bottom: 5px;
        border-bottom: 3px solid #C5C5C5;
        color: #888888; }
    .cards > .card > .content {
      display: block;
      text-align: center;
      color: #888888; }
    .cards > .card > .card-footer {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between;
      -ms-flex-align: center;
          align-items: center;
      position: absolute;
      bottom: 5px;
      left: 15px;
      right: 15px; }
    .cards > .card .icon img {
      height: 1em; }

.tile {
  background: #fff;
  padding: 30px;
  box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.15); }

.cards.cards-templates {
  padding: 0 5px;
  max-width: 100%; }
  .cards.cards-templates > .card {
    width: 146px;
    height: auto;
    padding: 8px 13px 13px;
    text-align: center;
    border: 0; }
    .cards.cards-templates > .card.focused {
      box-shadow: 0 0 0 2px #0C82BE; }
    .cards.cards-templates > .card > .title {
      border: 0;
      width: 100%; }
    .cards.cards-templates > .card > .template-preview {
      border: 1px solid #ABABAB;
      width: 120px;
      height: 180px;
      background-size: cover; }

.notification {
  width: 100%;
  height: auto;
  min-height: 30px;
  background: #D9534F;
  color: #F8F8F8;
  font-size: 12px;
  position: fixed;
  bottom: 0;
  z-index: 2000;
  padding: 5px 0px 5px 5px; }
  .notification span {
    padding-right: 50px; }
  .notification.progress {
    background: #6fc4e9;
    opacity: 0.9; }
  .notification.syntaxerror {
    background: #ffd700;
    color: #000000;
    font-weight: bold; }
  .notification .hide {
    cursor: pointer;
    position: absolute;
    right: 25px; }
  .notification .spinner {
    height: 30px; }

.all-files-editor {
  z-index: 10;
  width: 100%;
  height: 100%; }
  .all-files-editor.canvas-grid {
    left: 0; }
  .all-files-editor > .monaco-container {
    overflow: hidden !important;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; }
  .all-files-editor .image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 460px;
    height: 460px;
    margin-top: -230px;
    margin-left: -230px;
    border: 1px solid #ABABAB;
    box-shadow: 6px 6px 3px 0 rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    transition: 0.15s ease-out; }
    .all-files-editor .image-container img {
      height: 460px;
      width: 100%;
      object-fit: contain; }

header > .tabs-wrap > .tabs {
  height: auto; }
  header > .tabs-wrap > .tabs > .tab > .marker:checked + .target, header > .tabs-wrap > .tabs > .tab .marker.selected + .target {
    background: #fff;
    color: #000; }
    header > .tabs-wrap > .tabs > .tab > .marker:checked + .target .title > .fa, header > .tabs-wrap > .tabs > .tab .marker.selected + .target .title > .fa {
      color: #000; }
  header > .tabs-wrap > .tabs > .tab > .target {
    color: #444444;
    background: #8CC1DD;
    line-height: 34px; }
    header > .tabs-wrap > .tabs > .tab > .target > .title > .fa {
      opacity: 0.6; }
      header > .tabs-wrap > .tabs > .tab > .target > .title > .fa:hover {
        opacity: 0.6; }
    header > .tabs-wrap > .tabs > .tab > .target .fa {
      color: #000;
      opacity: 0.2;
      line-height: 34px;
      font-size: inherit; }
      header > .tabs-wrap > .tabs > .tab > .target .fa:hover {
        opacity: 0.4; }
  header > .tabs-wrap > .tabs > .tab > .content {
    top: 30px;
    padding: 10px;
    overflow: auto;
    background: #ccc; }

.toolbar {
  font-size: 0;
  background: #EFEFEF;
  min-height: 35px;
  border-bottom: 1px solid #C5C5C5;
  color: #999;
  padding: 0; }
  .toolbar .toolbar-section {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    height: auto;
    border-right: 1px solid #C5C5C5;
    padding: 3px 5px; }
    .toolbar .toolbar-section:first-child {
      padding-left: 0; }
    .toolbar .toolbar-section-dropdown {
      padding-right: 10px; }
      .toolbar .toolbar-section-dropdown:not(:first-child) {
        padding-left: 10px; }
    .toolbar .toolbar-section > * {
      font-size: 14px;
      width: auto;
      height: 25px;
      line-height: 25px;
      text-align: center;
      padding: 2px; }
      .toolbar .toolbar-section > *.active {
        background: #fff;
        border: 2px inset #D7D7D7;
        width: 21px;
        height: 21px;
        line-height: 21px; }
      .toolbar .toolbar-section > *.disabled {
        color: #999; }
      .toolbar .toolbar-section > *.title {
        color: #444444;
        padding-left: 20px;
        padding-right: 20px; }
    .toolbar .toolbar-section > *:not(:last-child) {
      margin: 0 5px 0 0; }
    .toolbar .toolbar-section > i, .toolbar .toolbar-section > a {
      width: 25px;
      color: #0095d9;
      cursor: pointer; }
      .toolbar .toolbar-section > i.fa.fa-mobile, .toolbar .toolbar-section > a.fa.fa-mobile {
        font-size: 20px;
        margin-top: -2px !important;
        margin-bottom: 2px !important;
        position: relative;
        top: 2px; }
    .toolbar .toolbar-section .ui-select-container {
      display: inline-block;
      min-width: 200px;
      max-width: 350px;
      width: auto;
      height: 28px;
      padding: 0;
      text-align: left; }
    .toolbar .toolbar-section .ui-select-placeholder {
      padding: 0 !important; }

.ui-select-choices-group-label {
  text-transform: capitalize; }

.pw::before {
  content: '';
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
  width: 1em;
  height: 1em; }

.pw-connect-blue::before {
  background-image: url("/images/App-Connect-Blue.png");
  height: 1.15em;
  width: 1.15em;
  margin-bottom: -0.1em;
  margin-right: -0.2em; }

.pw-studio-blue::before {
  background-image: url("/images/App-Studio-Blue.png");
  height: 1.15em;
  width: 1.15em;
  margin-bottom: -0.1em;
  margin-right: -0.2em; }

.monaco-editor .button {
  background: inherit;
  color: inherit;
  padding: inherit;
  border-radius: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: inherit;
  transition: inherit;
  text-decoration: inherit; }

.monaco-editor a {
  color: inherit; }

.monaco-container[readonly='readonly'] .monaco-editor .margin {
  background-color: #ededed; }

.monaco-container[readonly='readonly'] .monaco-editor-background {
  background-color: #ededed; }

.input-preview {
  padding-right: 3px;
  overflow: hidden;
  display: block; }
  .input-preview > .input-preview-wrapper {
    display: -ms-flexbox;
    display: flex;
    width: 100%; }
  .input-preview input[type=text] {
    width: 100%;
    font-size: 1em;
    line-height: 16px;
    padding: 2px 1px; }

.array-preview .control-button {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 1px;
  margin-top: 5px;
  border: none;
  background: none;
  outline: none;
  color: #0FACBF;
  font-size: 16px;
  cursor: pointer; }

.array-preview .table-container {
  border: 1px solid #6CC04A;
  height: 200px;
  background-color: white;
  overflow: auto;
  z-index: 1000; }
  .array-preview .table-container > .mock-table {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: white;
    width: 100%; }
    .array-preview .table-container > .mock-table thead > tr {
      background-color: #EFEFEF; }
      .array-preview .table-container > .mock-table thead > tr > th {
        padding: 0 4px;
        text-align: center;
        border-right: 1px solid #ABABAB;
        border-bottom: 1px solid #ABABAB; }
        .array-preview .table-container > .mock-table thead > tr > th:last-child {
          border-right: 0; }
        .array-preview .table-container > .mock-table thead > tr > th .property-icon {
          color: #444444;
          padding-right: 5px; }
      .array-preview .table-container > .mock-table thead > tr.heading {
        background: #D7D7D7;
        padding: 1px 10px 3px;
        box-shadow: inset 0 -1px #ABABAB; }
        .array-preview .table-container > .mock-table thead > tr.heading span {
          padding: 5px; }
        .array-preview .table-container > .mock-table thead > tr.heading button.fa {
          font-size: 18px;
          padding: 2px 5px;
          color: #0095d9; }
      .array-preview .table-container > .mock-table thead > tr .fa.fa-trash {
        color: #444444; }
    .array-preview .table-container > .mock-table tbody {
      background-color: #F8F8F8; }
      .array-preview .table-container > .mock-table tbody tr td {
        padding: 0 4px;
        text-align: center;
        border-right: 1px solid #C5C5C5;
        border-bottom: 1px solid #C5C5C5; }
        .array-preview .table-container > .mock-table tbody tr td:last-child {
          border-right: 0; }
    .array-preview .table-container > .mock-table tfoot td {
      padding: 2px; }
    .array-preview .table-container > .mock-table .row-control i {
      color: #fff; }

.array-preview-item {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  padding-left: 0 !important; }
  .array-preview-item > i {
    padding-left: 26px; }
  .array-preview-item .template {
    width: 100%; }

.ngdialog.about .content {
  max-height: none; }

.ngdialog.about .selectable {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text; }

.ngdialog.about img {
  display: block;
  margin: 40px auto 50px;
  width: 300px; }

.ngdialog.about hr {
  border: 0;
  height: 1px;
  background: #D7D7D7;
  width: 300px;
  margin: 40px auto; }

.ngdialog.about .description {
  color: #444444;
  padding: 0 50px 40px;
  line-height: 2em; }

.ngdialog.help .content {
  padding: 30px 70px 60px; }

.ngdialog.help hr {
  border: 0;
  height: 1px;
  background: #D7D7D7;
  width: 300px;
  margin: 40px auto; }

.ngdialog.help .description {
  line-height: 2em;
  color: #444444; }

.ngdialog.help img {
  width: 300px;
  margin: 50px auto 0;
  display: block; }

.sync-models .ngdialog-content {
  width: 900px; }
  .sync-models .ngdialog-content > .content {
    height: calc(100vh - 16vh - 80px);
    overflow: hidden;
    display: -ms-flexbox;
    display: flex; }
    .sync-models .ngdialog-content > .content #screen-model,
    .sync-models .ngdialog-content > .content #page-model {
      width: 400px; }
      .sync-models .ngdialog-content > .content #screen-model .drag-target,
      .sync-models .ngdialog-content > .content #page-model .drag-target {
        height: 100%; }
        .sync-models .ngdialog-content > .content #screen-model .drag-target ul.tree,
        .sync-models .ngdialog-content > .content #page-model .drag-target ul.tree {
          height: 100%;
          padding: 0; }

.sync-models label > span.title {
  font-size: 14px; }

.sync-models .tree li.box {
  border: none !important;
  padding: 0 !important; }
  .sync-models .tree li.box .associatedItem {
    color: #6CC04A;
    font-weight: normal;
    font-family: FontAwesome;
    line-height: 16px;
    margin: -4px 0 4px 20px;
    overflow: hidden;
    text-overflow: ellipsis; }
  .sync-models .tree li.box .notConnected .associatedItem {
    color: #C5C5C5; }
  .sync-models .tree li.box .controls {
    visibility: visible;
    opacity: 1; }
    .sync-models .tree li.box .controls > .fa-exchange {
      visibility: visible; }
      .sync-models .tree li.box .controls > .fa-exchange.diverged {
        color: #D9534F; }

.sync-models .associatedItem::before {
  content: "\f178";
  padding-right: 5px; }

.sync-models #sync-all-models {
  -ms-flex-positive: 1;
      flex-grow: 1; }
  .sync-models #sync-all-models .sync-buttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    height: 100%;
    -ms-flex-pack: center;
        justify-content: center; }
    .sync-models #sync-all-models .sync-buttons button.fa {
      cursor: pointer;
      display: block;
      font-size: 40px;
      line-height: 60px;
      opacity: 0.7; }
      .sync-models #sync-all-models .sync-buttons button.fa:hover {
        opacity: 1; }
      .sync-models #sync-all-models .sync-buttons button.fa:first-child {
        margin-right: 10px; }
      .sync-models #sync-all-models .sync-buttons button.fa:last-child {
        margin-left: 10px; }

.ngdialog.create-web-connector .buttons {
  float: right; }

.tabs-menu {
  margin: 0;
  padding: 0; }
  .tabs-menu li {
    display: inline-block; }
    .tabs-menu li a {
      display: inline-block;
      box-sizing: border-box;
      line-height: 50px;
      height: 50px;
      padding: 0 15px;
      color: #666666;
      opacity: .8;
      cursor: pointer;
      text-decoration: none;
      transition: opacity 0.15s ease-in-out; }
      .tabs-menu li a .fa {
        margin-right: 10px;
        font-size: 16px; }
      .tabs-menu li a.active {
        border-bottom: 3px solid #666666;
        opacity: 1; }
      .tabs-menu li a:hover {
        opacity: 1; }

.ngdialog.save-confirm > .ngdialog-content, .ngdialog.edit-screen-models-data-source > .ngdialog-content, .ngdialog.edit-screen-models-source-state > .ngdialog-content {
  width: 360px; }

.ngdialog.manage-views-create > .ngdialog-content, .ngdialog.publish-progress > .ngdialog-content, .ngdialog.edit-screen-models-action > .ngdialog-content {
  width: 440px; }

.ngdialog.view-app-settings > .ngdialog-content, .ngdialog.build-mobile-app > .ngdialog-content, .ngdialog.import-repository > .ngdialog-content {
  width: 800px; }

.ngdialog.project-form-plugin-options .required {
  color: red; }

.ngdialog.new-template-group > .ngdialog-content, .ngdialog.data-binding > .ngdialog-content, .ngdialog.method-binding > .ngdialog-content {
  width: 760px; }

.ngdialog.new-addon .component-groups {
  margin-top: 15px; }

.ngdialog.preview, .ngdialog.image-manager, .ngdialog.select-icon, .ngdialog.create-screen {
  padding: 10px; }
  .ngdialog.preview > .ngdialog-content, .ngdialog.image-manager > .ngdialog-content, .ngdialog.select-icon > .ngdialog-content, .ngdialog.create-screen > .ngdialog-content {
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: hidden; }
    .ngdialog.preview > .ngdialog-content > .content, .ngdialog.image-manager > .ngdialog-content > .content, .ngdialog.select-icon > .ngdialog-content > .content, .ngdialog.create-screen > .ngdialog-content > .content {
      max-height: none; }
    .ngdialog.preview > .ngdialog-content > .buttons, .ngdialog.image-manager > .ngdialog-content > .buttons, .ngdialog.select-icon > .ngdialog-content > .buttons, .ngdialog.create-screen > .ngdialog-content > .buttons {
      clear: none !important;
      overflow: visible !important;
      position: absolute;
      bottom: 0;
      width: 100%; }

.ngdialog.build-mobile-app .build-info-icons {
  text-align: center; }
  .ngdialog.build-mobile-app .build-info-icons i {
    vertical-align: sub; }

.ngdialog.build-mobile-app .help-block {
  font-size: 12px;
  display: inherit;
  color: #888888; }

.ngdialog.build-mobile-app .buttons {
  padding-top: 10px; }

.ngdialog .edit-components, .ngdialog .build-info-icons {
  font-size: 16px; }

.ngdialog button.fa {
  color: #0095d9; }

.ngdialog div.commit-message {
  overflow-wrap: break-word; }

.ngdialog a.help-link {
  margin-left: auto; }

.ngdialog a.commit-link {
  color: #0FACBF;
  text-decoration: none;
  overflow-wrap: break-word; }

.ngdialog.update-web-connector .ngdialog-content {
  width: 700px; }
  .ngdialog.update-web-connector .ngdialog-content .form .form-control {
    margin-bottom: 8px; }

.ngdialog.revision-history .content {
  font-size: 14px; }
  .ngdialog.revision-history .content .commits, .ngdialog.revision-history .content .branch {
    border-bottom: 1px solid #666; }
  .ngdialog.revision-history .content .branch {
    background-color: #E5F1F8;
    padding: 10px; }

.ngdialog.save-as-new-theme .ngdialog-content {
  width: 500px; }
  .ngdialog.save-as-new-theme .ngdialog-content .content {
    font-size: 14px; }
    .ngdialog.save-as-new-theme .ngdialog-content .content .row {
      border-bottom: 1px solid #D7D7D7;
      padding: 0 0 30px 0; }

.ngdialog .error-msg {
  color: red; }

.ngdialog .ngdialog-content .heading.ng-tabs {
  height: 50px;
  padding-top: 15px; }
  .ngdialog .ngdialog-content .heading.ng-tabs .ng-tab {
    display: inline-block;
    padding: 0 30px;
    margin: 0 5px;
    background: #fff;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
    color: #ABABAB;
    -ms-flex-positive: 0;
        flex-grow: 0;
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-color: #ABABAB;
    cursor: pointer; }
    .ngdialog .ngdialog-content .heading.ng-tabs .ng-tab:hover {
      color: #747474; }
    .ngdialog .ngdialog-content .heading.ng-tabs .ng-tab.active {
      color: #444444;
      border-bottom-color: #fff;
      margin-bottom: -1px; }

.sdk-multi-select {
  display: inline-block;
  margin-right: 15px; }
  .sdk-multi-select .select2-search-choice-close,
  .sdk-multi-select .select2-disabled {
    display: none !important; }
  .sdk-multi-select .select2-choice {
    border-radius: 0 !important;
    height: 38px;
    line-height: 38px; }
  .sdk-multi-select .select2-arrow {
    border-radius: 0 !important;
    background: none !important;
    border-left: 0 !important;
    margin-top: 3px; }
  .sdk-multi-select .select-icon {
    height: 25px;
    width: 25px;
    float: left;
    margin-top: 5px; }
  .sdk-multi-select .ui-select-dropdown {
    max-height: 400px;
    overflow: auto; }
  .sdk-multi-select .select2-result-label {
    height: 38px;
    line-height: 38px; }
  .sdk-multi-select .select-label {
    margin-left: 15px; }

.select2-container.open {
  z-index: 10000 !important; }

.small-btn {
  padding: 0 10px; }
  .small-btn .fa {
    margin: 0;
    font-size: 14px;
    vertical-align: unset; }

header {
  background: #0095d9;
  height: 50px;
  position: relative; }
  header .logo {
    height: 50px;
    box-sizing: border-box;
    margin: 0 30px;
    float: left; }
    header .logo a {
      display: inline-block;
      color: #fff;
      text-decoration: none;
      line-height: 50px;
      height: 50px;
      cursor: pointer;
      opacity: 0.9; }
      header .logo a:hover {
        opacity: 1; }
      header .logo a .fa {
        position: relative;
        top: 1px; }
      header .logo a h1 {
        font-size: 16px;
        font-weight: normal;
        display: inline-block;
        margin: 0; }
      header .logo a > span {
        display: inline-block;
        margin: -3px 10px 0;
        font-size: 13px;
        vertical-align: middle; }
      header .logo a img {
        display: inline-block;
        height: 25px;
        vertical-align: -5%; }
      header .logo a img.powwow-img {
        vertical-align: -13%; }
      header .logo a > i {
        color: white;
        font-size: 21px;
        padding: 0px 6px 0px 0px; }
    header .logo.mid > a {
      padding-left: 10px; }
      header .logo.mid > a > .explorer-container > img, header .logo.mid > a img {
        opacity: 0.7; }
        header .logo.mid > a > .explorer-container > img:hover, header .logo.mid > a img:hover {
          opacity: 1.0; }
    header .logo.right {
      float: right;
      margin-left: 10px; }
      header .logo.right img {
        height: 18px;
        padding-left: 10px; }
  header .tabs-menu {
    margin: 0 0 0 50px;
    float: left; }
    header .tabs-menu li a {
      color: #fff; }
      header .tabs-menu li a.active {
        border-bottom: 3px solid #fff; }
  header .controls .item .fa-code {
    font-size: 18px; }
  header .controls .item .ion-ios-eye,
  header .controls .item .ion-md-help-circle {
    font-size: 20px; }
  header .controls .item span i + span {
    padding-left: 5px; }
  header .controls .item span > .ion-ios-eye {
    position: relative;
    top: 2px; }

header.studio {
  margin-left: 50px; }
  header.studio .logo {
    margin: 0 15px; }
    header.studio .logo img {
      border: 0;
      padding-left: 0; }
  header.studio .tabs-wrap {
    height: 50px;
    min-height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
        align-items: flex-end;
    overflow-x: hidden; }
    header.studio .tabs-wrap .tab {
      min-width: 56px; }
      header.studio .tabs-wrap .tab .title {
        max-width: 150px;
        text-overflow: ellipsis; }
  header.studio.connect .explorer-container > .explorer {
    left: 105px; }
  header.studio.explorer .explorer-container {
    display: inline-block;
    position: relative; }
    header.studio.explorer .explorer-container > .explorer {
      position: absolute;
      top: 47px;
      left: -15px; }
      header.studio.explorer .explorer-container > .explorer::before {
        left: 19px; }
  header.studio.preview .explorer-container > .explorer {
    left: 137px; }

.subheader {
  background: #fff;
  border-bottom: 1px solid #0095d9;
  box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.15);
  height: 50px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0 30px; }

header .controls {
  height: 50px;
  float: right; }
  header .controls .item {
    float: left;
    color: #fff;
    text-align: center;
    font-size: 14px;
    height: 50px;
    min-width: 50px;
    position: relative; }
    header .controls .item > [ng-click] {
      cursor: pointer; }
      header .controls .item > [ng-click].disabled {
        background: transparent !important;
        opacity: 0.45; }
      header .controls .item > [ng-click]:hover {
        background: #8CC1DD; }
    header .controls .item > span {
      display: inline-block;
      line-height: 50px;
      padding: 0 20px;
      float: left;
      white-space: nowrap;
      overflow: hidden;
      max-width: 150px;
      text-overflow: ellipsis; }
      header .controls .item > span + .fa {
        margin: 0 0 0 -40px;
        float: right; }
    header .controls .item > .ion,
    header .controls .item > .fa {
      line-height: 50px;
      width: 50px; }
    header .controls .item .dropdown {
      display: block;
      visibility: hidden;
      position: absolute;
      right: 0;
      top: 58px;
      z-index: 200;
      background: #3aace1;
      margin: 0;
      border-radius: 10px;
      box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.15);
      padding: 10px 0;
      transition: visibility 0s;
      transition-delay: 0.1s;
      min-width: 150px;
      max-width: 300px;
      font-size: 14px; }
      header .controls .item .dropdown li {
        display: block;
        text-align: left;
        position: relative;
        cursor: default;
        height: 40px; }
        header .controls .item .dropdown li.splitter {
          height: 1px;
          background: rgba(255, 255, 255, 0.66);
          margin: 0 10px; }
        header .controls .item .dropdown li:hover > .dropdown {
          visibility: visible;
          transition-delay: 0.3s; }
        header .controls .item .dropdown li:hover > .fa-caret-left {
          opacity: 1; }
        header .controls .item .dropdown li > .fa-caret-left {
          position: absolute;
          left: 5px;
          top: 12px;
          opacity: 0.5;
          font-size: 15px; }
        header .controls .item .dropdown li > [ng-click], header .controls .item .dropdown li label, header .controls .item .dropdown li [href] {
          cursor: pointer; }
          header .controls .item .dropdown li > [ng-click].disabled, header .controls .item .dropdown li label.disabled, header .controls .item .dropdown li [href].disabled {
            background: transparent !important;
            opacity: 0.45; }
          header .controls .item .dropdown li > [ng-click]:hover, header .controls .item .dropdown li label:hover, header .controls .item .dropdown li [href]:hover {
            background: #8CC1DD; }
        header .controls .item .dropdown li > span, header .controls .item .dropdown li label, header .controls .item .dropdown li a {
          display: inline-block;
          box-sizing: border-box;
          padding: 0 20px;
          line-height: 40px;
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-decoration: inherit;
          color: inherit; }
        header .controls .item .dropdown li > .dropdown {
          top: -10px;
          right: calc(100% + 8px); }
          header .controls .item .dropdown li > .dropdown:before {
            border: 6px solid #3aace1;
            top: 24px;
            right: -8px;
            border-right-width: 0;
            border-left-width: 8px;
            border-top-color: transparent;
            border-bottom-color: transparent; }
          header .controls .item .dropdown li > .dropdown:after {
            height: 100%;
            right: -8px;
            top: 0;
            width: 8px;
            background: transparent; }
        header .controls .item .dropdown li input[type=radio] {
          display: inline-block;
          transform: translate(-200vw, 0); }
          header .controls .item .dropdown li input[type=radio]:before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 14px;
            transform: translate(200vw, 0);
            box-shadow: inset 2px 2px 1px 0 rgba(0, 0, 0, 0.15);
            margin-left: -5px;
            cursor: pointer;
            background: #fff; }
          header .controls .item .dropdown li input[type=radio]:checked:before {
            background: #6CC04A;
            box-shadow: inset 2px 2px 1px 0 rgba(0, 0, 0, 0.15), inset 0 0 0 3px #fff; }
      header .controls .item .dropdown:before {
        content: ' ';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border: 6px solid #3aace1;
        right: 20px;
        top: -8px;
        border-top-width: 0;
        border-bottom-width: 8px;
        border-right-color: transparent;
        border-left-color: transparent; }
      header .controls .item .dropdown:after {
        content: ' ';
        display: block;
        position: absolute;
        width: 100%;
        right: 0;
        top: -8px;
        height: 8px;
        background: transparent; }
    header .controls .item:hover > .dropdown {
      visibility: visible;
      transition-delay: 0.3s; }
    header .controls .item.active > [ng-click] {
      box-sizing: border-box;
      border: 2px inset #ccc;
      background: #6cb9e2;
      line-height: 46px; }
    header .controls .item.main {
      background: #6CC04A;
      margin-right: 0;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff; }
      header .controls .item.main > [ng-click]:hover {
        background: #8bcd70; }
      header .controls .item.main .dropdown {
        background: #6CC04A; }
        header .controls .item.main .dropdown li > [ng-click]:hover {
          background: #8bcd70; }
        header .controls .item.main .dropdown li > .dropdown:before {
          border-left-color: #6CC04A; }
        header .controls .item.main .dropdown:before {
          border-bottom-color: #6CC04A; }
    header .controls .item > .fa-caret-down {
      opacity: 0.9;
      padding-left: 5px; }

.ngdialog-open .dropdown {
  opacity: 0; }

header .controls .item > .ion.ion-help-circled,
header .controls .item > .fa.ion-help-circled {
  font-size: 22px; }

.layout {
  margin-left: 50px;
  margin-top: 50px; }

.layout-resize-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10; }

.ui-splitbar {
  background: #D7D7D7 !important;
  box-sizing: border-box;
  overflow: visible !important; }
  .ui-splitbar > a {
    display: none !important;
    background: #ABABAB; }
    .ui-splitbar > a:hover {
      background: #888888; }

.ui-layout-row > .ui-splitbar {
  border-top: 1px solid #ABABAB;
  border-bottom: 1px solid #ABABAB; }
  .ui-layout-row > .ui-splitbar > a {
    height: 6px;
    width: 65px;
    margin-top: -1px; }

.ui-layout-column > .ui-splitbar {
  border-left: 1px solid #ABABAB;
  border-right: 1px solid #ABABAB; }
  .ui-layout-column > .ui-splitbar > a {
    height: 64px;
    width: 6px;
    margin-left: -1px; }

.ui-splitbar-icon-left,
.ui-splitbar-icon-right,
.ui-splitbar-icon-up,
.ui-splitbar-icon-down {
  display: none; }

#west + .ui-splitbar > a:first-child,
#central + .ui-splitbar > a:last-child {
  display: block !important; }

.preview-page .sidebar {
  height: 50px; }

.preview-page #central {
  position: relative;
  height: 100%; }

.preview-page header .logo.mid > a {
  opacity: 1; }

.preview-page header .heading {
  display: -ms-flexbox;
  display: flex;
  background: #0095d9; }
  .preview-page header .heading h1 {
    -ms-flex-positive: 0;
        flex-grow: 0;
    margin: 0;
    font-weight: 400;
    color: white;
    font-size: 18px;
    line-height: 50px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .preview-page header .heading .tabs-menu {
    margin: 0px;
    -ms-flex-positive: 1;
        flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center; }
    .preview-page header .heading .tabs-menu li a {
      color: white;
      min-width: 130px;
      text-align: center; }
      .preview-page header .heading .tabs-menu li a.active {
        border-bottom: 3px solid white; }

.preview-page .layout {
  margin-left: 0px;
  margin-bottom: 0px;
  margin-top: 86px; }

.preview-page .left-pane {
  margin-top: 15px;
  padding: 10px 15px;
  width: 260px;
  overflow-y: auto;
  height: 100%;
  border-right: 1px solid #EFEFEF; }

.preview-page .source-app-view {
  margin: 0;
  padding: 0 5px;
  width: calc(100% - 10px);
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  background: #fff; }
  .preview-page .source-app-view .fill-height {
    -ms-flex: 1;
        flex: 1; }
  .preview-page .source-app-view #sourceAppViewer {
    width: 100%;
    height: 100%;
    border-top: 1px solid #ABABAB; }
  .preview-page .source-app-view .fa-external-link {
    margin-left: 10px; }
  .preview-page .source-app-view .label {
    display: inline-block;
    padding: 10px 5px; }
    .preview-page .source-app-view .label i {
      padding-right: 5px;
      color: #888888; }

.preview-page .output-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }
  .preview-page .output-container .output-heading {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
    margin: 5px;
    min-height: 30px; }
    .preview-page .output-container .output-heading > *:last-child {
      -ms-flex-positive: 1;
          flex-grow: 1;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: end;
          justify-content: flex-end; }
    .preview-page .output-container .output-heading .ui-select-container, .preview-page .output-container .output-heading .ui-select-placeholder {
      max-width: 170px;
      text-align: left;
      margin-left: 10px; }
    .preview-page .output-container .output-heading i {
      padding-right: 5px;
      color: #888888; }
  .preview-page .output-container .output-logs {
    -ms-flex-positive: 1;
        flex-grow: 1;
    margin: 0 5px 5px;
    color: white;
    background-color: black;
    font: 400 11px monospace;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    overflow: auto;
    white-space: pre; }
    .preview-page .output-container .output-logs *::selection {
      background-color: #2383ef; }
    .preview-page .output-container .output-logs > p {
      display: -ms-flexbox;
      display: flex;
      margin: 0; }
      .preview-page .output-container .output-logs > p:first-child {
        padding-top: 5px; }
      .preview-page .output-container .output-logs > p:last-child {
        padding-bottom: 5px; }
      .preview-page .output-container .output-logs > p.debug-level {
        color: #FFFFAA; }
      .preview-page .output-container .output-logs > p.trace-level {
        color: #6CC04A; }
      .preview-page .output-container .output-logs > p span:first-child {
        padding: 0 4px 0 1px;
        color: #a6a6a6;
        text-align: right; }

.preview-toolbar-select .ui-select-dropdown {
  max-height: calc(100vh - 90px);
  overflow: scroll; }

.preview #central:-webkit-full-screen {
  height: 100%;
  width: 100% !important;
  background: #fff;
  position: relative;
  margin-left: -130px;
  padding-right: 130px;
  box-sizing: content-box; }

.preview #central:-ms-fullscreen {
  height: 100%;
  width: 100% !important;
  background: #fff;
  position: relative;
  margin-left: -130px;
  padding-right: 130px;
  box-sizing: content-box; }

.preview #central:fullscreen {
  height: 100%;
  width: 100% !important;
  background: #fff;
  position: relative;
  margin-left: -130px;
  padding-right: 130px;
  box-sizing: content-box; }
  .preview #central:-webkit-full-screen .left-pane {
    display: none; }
  .preview #central:-ms-fullscreen .left-pane {
    display: none; }
  .preview #central:fullscreen .left-pane {
    display: none; }

.preview-device,
.preview-iframe {
  --scale: 1;
  --width: 0px;
  --height: 0px;
  --gapTop: 0px;
  --gapLeft: 0px; }

.preview-device,
.preview-iframe {
  opacity: 0;
  position: absolute;
  top: calc(30px + var(--gapTop) * var(--scale));
  left: calc(50% - var(--width) * var(--scale) / 2 + var(--gapLeft) * var(--scale));
  transform-origin: 0 0;
  transform: scale(var(--scale));
  width: var(--width);
  height: var(--height); }

.preview-device {
  background-size: contain;
  background-repeat: no-repeat; }

.preview-iframe {
  border: 0; }

.preview-desktop .preview-iframe {
  --width: calc(100% - 20px);
  --height: calc(100% - 30px);
  --gapTop: 0px;
  --gapLeft: 0px;
  transform: none;
  left: 0px;
  top: 30px; }

.preview-iphone5 .preview-device {
  --width: 586px;
  --height: 1001px;
  background-image: url("/images/devices/iphone5-portrait.png"); }
  .preview-iphone5 .preview-device.landscape {
    --width: 1001px;
    --height: 586px;
    background-image: url("/images/devices/iphone5-landscape.png"); }

.preview-iphone5 .preview-iframe {
  --width: 320px;
  --height: 568px;
  --gapTop: 218px;
  --gapLeft: 4px; }
  .preview-iphone5 .preview-iframe.landscape {
    --width: 568px;
    --height: 320px;
    --gapTop: 132px;
    --gapLeft: 0px; }

.preview-iphone8 .preview-device {
  --width: 424px;
  --height: 880px;
  background-image: url("/images/devices/iphone8-portrait.png"); }
  .preview-iphone8 .preview-device.landscape {
    --width: 880px;
    --height: 424px;
    background-image: url("/images/devices/iphone8-landscape.png"); }

.preview-iphone8 .preview-iframe {
  --width: 375px;
  --height: 667px;
  --gapTop: 110px;
  --gapLeft: 3px; }
  .preview-iphone8 .preview-iframe.landscape {
    --width: 667px;
    --height: 375px;
    --gapTop: 23px;
    --gapLeft: 2px; }

.preview-ipad .preview-device {
  --width: 1067px;
  --height: 1482px;
  background-image: url("/images/devices/ipad-portrait.png");
  --gapTop: -62px; }
  .preview-ipad .preview-device.landscape {
    --width: 1482px;
    --height: 1067px;
    background-image: url("/images/devices/ipad-landscape.png"); }

.preview-ipad .preview-iframe {
  --width: 768px;
  --height: 1024px;
  --gapTop: 146px;
  --gapLeft: 0px; }
  .preview-ipad .preview-iframe.landscape {
    --width: 1024px;
    --height: 768px;
    --gapTop: 153px;
    --gapLeft: 4px; }

.preview-iphonex .preview-device {
  --width: 446px;
  --height: 882px;
  background-image: url("/images/devices/iphonex-portrait.png");
  border-radius: 0 0 32px 32px; }
  .preview-iphonex .preview-device.landscape {
    --width: 882px;
    --height: 446px;
    background-image: url("/images/devices/iphonex-landscape.png");
    border-radius: 0 32px 32px 0; }

.preview-iphonex .preview-iframe {
  --width: 375px;
  --height: 776px;
  --gapTop: 70px;
  --gapLeft: 0px; }
  .preview-iphonex .preview-iframe.landscape {
    --width: 776px;
    --height: 375px;
    --gapTop: 36px;
    --gapLeft: 18px; }

.preview-galaxyS8 .preview-device {
  --width: 387px;
  --height: 832px;
  background-image: url("/images/devices/galaxyS8-portrait.png");
  border-radius: 32px; }
  .preview-galaxyS8 .preview-device.landscape {
    --width: 825px;
    --height: 384px;
    background-image: url("/images/devices/galaxyS8-landscape.png"); }

.preview-galaxyS8 .preview-iframe {
  --width: 360px;
  --height: 740px;
  --gapTop: 49px;
  --gapLeft: 1px; }
  .preview-galaxyS8 .preview-iframe.landscape {
    --width: 740px;
    --height: 356px;
    --gapTop: 13px;
    --gapLeft: 3px; }

.preview-pixel2 .preview-device {
  --width: 510px;
  --height: 1034px;
  background-image: url("/images/devices/pixel2-portrait.png");
  border-radius: 20px; }
  .preview-pixel2 .preview-device.landscape {
    --width: 1034px;
    --height: 510px;
    background-image: url("/images/devices/pixel2-landscape.png"); }

.preview-pixel2 .preview-iframe {
  --width: 436px;
  --height: 872px;
  --gapTop: 84px;
  --gapLeft: -2px; }
  .preview-pixel2 .preview-iframe.landscape {
    --width: 872px;
    --height: 436px;
    --gapTop: 38px;
    --gapLeft: 5px; }

.preview-ipad-mini .preview-device {
  --width: 1067px;
  --height: 1482px;
  background-image: url("/images/devices/ipad-portrait.png");
  --gapTop: -62px; }
  .preview-ipad-mini .preview-device.landscape {
    --width: 1410px;
    --height: 1012px;
    background-image: url("/images/devices/ipad-landscape.png"); }

.preview-ipad-mini .preview-iframe {
  --width: 768px;
  --height: 1024px;
  --gapTop: 146px;
  --gapLeft: 0px; }
  .preview-ipad-mini .preview-iframe.landscape {
    --width: 1024px;
    --height: 768px;
    --gapTop: 153px;
    --gapLeft: 4px; }

.preview-galaxyview .preview-device {
  --width: 2500px;
  --height: 1618px;
  background-image: url("/images/devices/galaxyview-portrait.png"); }

.preview-galaxyview .preview-iframe {
  --width: 1920px;
  --height: 1080px;
  --gapTop: 260px;
  --gapLeft: 0px; }

.preview-surfacert .preview-device {
  --width: 670px;
  --height: 960px;
  background-image: url("/images/devices/surfacert-portrait.png"); }
  .preview-surfacert .preview-device.landscape {
    --width: 1370px;
    --height: 999px;
    background-image: url("/images/devices/surfacert-landscape.png"); }

.preview-surfacert .preview-iframe {
  --width: 550px;
  --height: 837px;
  --gapTop: 60px;
  --gapLeft: 1px; }
  .preview-surfacert .preview-iframe.landscape {
    --width: 1196px;
    --height: 787px;
    --gapTop: 84px;
    --gapLeft: 0px; }

.preview-galaxyS6 .preview-device {
  --width: 627px;
  --height: 1086px;
  background-image: url("/images/devices/galaxyS6-portrait.png"); }
  .preview-galaxyS6 .preview-device.landscape {
    --width: 1086px;
    --height: 627px;
    background-image: url("/images/devices/galaxyS6-landscape.png"); }

.preview-galaxyS6 .preview-iframe {
  --width: 375px;
  --height: 667px;
  --gapTop: 210px;
  --gapLeft: 9px; }
  .preview-galaxyS6 .preview-iframe.landscape {
    --width: 667px;
    --height: 375px;
    --gapTop: 120px;
    --gapLeft: 0px; }

.preview-lumia950 .preview-device {
  --width: 648px;
  --height: 1000px;
  background-image: url("/images/devices/lumia950-portrait.png"); }
  .preview-lumia950 .preview-device.landscape {
    --width: 1000px;
    --height: 648px;
    background-image: url("/images/devices/lumia950-landscape.png"); }

.preview-lumia950 .preview-iframe {
  --width: 360px;
  --height: 640px;
  --gapTop: 173px;
  --gapLeft: -5px; }
  .preview-lumia950 .preview-iframe.landscape {
    --width: 640px;
    --height: 360px;
    --gapTop: 148px;
    --gapLeft: -7px; }

.preview-hpEliteX3 .preview-device {
  --width: 680px;
  --height: 1119px;
  background-image: url("/images/devices/hpEliteX3-portrait.png"); }
  .preview-hpEliteX3 .preview-device.landscape {
    --width: 1119px;
    --height: 680px;
    background-image: url("/images/devices/hpEliteX3-landscape.png"); }

.preview-hpEliteX3 .preview-iframe {
  --width: 480px;
  --height: 848px;
  --gapTop: 147px;
  --gapLeft: -33px; }
  .preview-hpEliteX3 .preview-iframe.landscape {
    --width: 848px;
    --height: 480px;
    --gapTop: 76px;
    --gapLeft: 10px; }

.layouts-list {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .layouts-list > .preload,
  .layouts-list > .layout-type {
    width: 110px;
    margin: 0 10px 10px 0;
    float: left; }
    .layouts-list > .preload > .icon,
    .layouts-list > .layout-type > .icon {
      height: 110px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: top center;
      position: relative; }
      .layouts-list > .preload > .icon[ng-click],
      .layouts-list > .layout-type > .icon[ng-click] {
        cursor: pointer; }
      .layouts-list > .preload > .icon.phone-portrait,
      .layouts-list > .layout-type > .icon.phone-portrait {
        background-image: url("/images/layouts/phone-portrait.png"); }
        .layouts-list > .preload > .icon.phone-portrait.active,
        .layouts-list > .layout-type > .icon.phone-portrait.active {
          background-image: url("/images/layouts/phone-portrait-blue.png"); }
      .layouts-list > .preload > .icon.phone-landscape,
      .layouts-list > .layout-type > .icon.phone-landscape {
        background-image: url("/images/layouts/phone-landscape.png"); }
        .layouts-list > .preload > .icon.phone-landscape.active,
        .layouts-list > .layout-type > .icon.phone-landscape.active {
          background-image: url("/images/layouts/phone-landscape-blue.png"); }
      .layouts-list > .preload > .icon.tablet-portrait,
      .layouts-list > .layout-type > .icon.tablet-portrait {
        background-image: url("/images/layouts/tablet-portrait.png"); }
        .layouts-list > .preload > .icon.tablet-portrait.active,
        .layouts-list > .layout-type > .icon.tablet-portrait.active {
          background-image: url("/images/layouts/tablet-portrait-blue.png"); }
      .layouts-list > .preload > .icon.tablet-landscape,
      .layouts-list > .layout-type > .icon.tablet-landscape {
        background-image: url("/images/layouts/tablet-landscape.png"); }
        .layouts-list > .preload > .icon.tablet-landscape.active,
        .layouts-list > .layout-type > .icon.tablet-landscape.active {
          background-image: url("/images/layouts/tablet-landscape-blue.png"); }
      .layouts-list > .preload > .icon.desktop,
      .layouts-list > .layout-type > .icon.desktop {
        background-image: url("/images/layouts/desktop.png"); }
        .layouts-list > .preload > .icon.desktop.active,
        .layouts-list > .layout-type > .icon.desktop.active {
          background-image: url("/images/layouts/desktop-blue.png"); }
      .layouts-list > .preload > .icon > .fa,
      .layouts-list > .layout-type > .icon > .fa {
        position: absolute;
        top: 34px;
        left: 1px;
        width: 100%;
        text-align: center;
        color: #1E6FAB;
        font-size: 16px; }
    .layouts-list > .preload > .name,
    .layouts-list > .layout-type > .name {
      text-align: center;
      color: #444444;
      word-spacing: 110px;
      height: 45px; }
    .layouts-list > .preload > .controls,
    .layouts-list > .layout-type > .controls {
      text-align: center; }
  .layouts-list > .template-type > .icon, .layouts-list .addons-type > .icon {
    float: left;
    height: 78px;
    width: 90px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative; }
    .layouts-list > .template-type > .icon[ng-click], .layouts-list .addons-type > .icon[ng-click] {
      cursor: pointer; }
    .layouts-list > .template-type > .icon.single, .layouts-list .addons-type > .icon.single {
      background-image: url("/images/layouts/template-single.png"); }
    .layouts-list > .template-type > .icon.double, .layouts-list .addons-type > .icon.double {
      background-image: url("/images/layouts/template-double.png"); }
    .layouts-list > .template-type > .icon.triple, .layouts-list .addons-type > .icon.triple {
      background-image: url("/images/layouts/template-triple.png"); }
  .layouts-list > .template-type > .quantity, .layouts-list .addons-type > .quantity {
    float: left;
    text-align: center;
    margin-top: 15px;
    color: #888888; }
    .layouts-list > .template-type > .quantity > span, .layouts-list .addons-type > .quantity > span {
      display: block;
      font-size: 36px;
      color: #0C82BE; }
  .layouts-list > .preload {
    display: none; }

.cfp-hotkeys-close {
  border: none; }
  .cfp-hotkeys-close:hover {
    background: transparent; }

search span.fa-search, .search span.fa-search {
  position: relative;
  right: -7px;
  top: -1px;
  line-height: 28px;
  color: #0095d9;
  font-size: 14px; }

search input,
search .dropdown-toggle, .search input,
.search .dropdown-toggle {
  border: 1px solid #ABABAB;
  line-height: 28px;
  font-size: 14px; }

search input, .search input {
  margin-left: -18px;
  padding: 0 10px 0 25px;
  color: #444444;
  width: 200px;
  outline: none; }

search .dropdown-toggle, .search .dropdown-toggle {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 0 8px 0 6px;
  background: #fff;
  min-width: 140px;
  text-align: left;
  cursor: pointer;
  outline: none;
  margin-right: 20px; }
  search .dropdown-toggle .label, .search .dropdown-toggle .label {
    color: #888888; }
  search .dropdown-toggle .value, .search .dropdown-toggle .value {
    color: #444444;
    padding-right: 6px; }
  search .dropdown-toggle i, .search .dropdown-toggle i {
    float: right;
    margin: 6px 0 0 0;
    color: #0095d9;
    font-size: 18px; }

search .dropdown-menu, .search .dropdown-menu {
  position: absolute;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  margin-top: 0;
  text-align: left;
  list-style: none;
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
  search .dropdown-menu li, .search .dropdown-menu li {
    padding: 0 0 0 6px;
    cursor: pointer;
    line-height: 31px; }
    search .dropdown-menu li:hover, .search .dropdown-menu li:hover {
      background: #E5F1F8; }
    search .dropdown-menu li .label, .search .dropdown-menu li .label {
      color: #444444; }

dropdown .dropdown-toggle {
  cursor: pointer;
  outline: none; }
  dropdown .dropdown-toggle .dropdown-menu {
    position: absolute;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    margin-top: 0;
    text-align: left;
    list-style: none;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
    dropdown .dropdown-toggle .dropdown-menu li {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 0 0 6px;
      cursor: pointer;
      line-height: 31px;
      color: #444444; }
      dropdown .dropdown-toggle .dropdown-menu li:hover {
        background: #E5F1F8; }
  dropdown .dropdown-toggle.dropdown-preview {
    border: none;
    border-radius: 8px;
    padding: 5px 0;
    color: #fff;
    background: #444444;
    line-height: 24px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    width: 100%; }
    dropdown .dropdown-toggle.dropdown-preview .left-label {
      -ms-flex-positive: 1;
          flex-grow: 1; }
      dropdown .dropdown-toggle.dropdown-preview .left-label i {
        font-size: 20px;
        line-height: 24px;
        margin-right: 2px;
        vertical-align: top; }
    dropdown .dropdown-toggle.dropdown-preview .label {
      padding-bottom: 0;
      font-size: 13px; }
    dropdown .dropdown-toggle.dropdown-preview .right-icon {
      border-left: 1px solid #888888;
      padding-right: 5px;
      padding-left: 5px;
      font-size: 14px; }
    dropdown .dropdown-toggle.dropdown-preview:hover {
      background: #515151; }
    dropdown .dropdown-toggle.dropdown-preview:active {
      background: #373737; }

.radio-tree {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow-x: hidden; }
  .radio-tree .item {
    line-height: 28px;
    display: block;
    padding-left: 10px;
    transition: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    cursor: default; }
    .radio-tree .item .short-input {
      display: inline;
      width: 50px; }

.cards.applications > .card,
.cards.users > .card {
  height: 170px;
  width: 220px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between; }
  .cards.applications > .card .view-only,
  .cards.users > .card .view-only {
    float: left; }
  .cards.applications > .card.focused > .title,
  .cards.users > .card.focused > .title {
    border: 0;
    text-align: center;
    color: #888888; }
  .cards.applications > .card > .fa,
  .cards.users > .card > .fa {
    color: #0C82BE;
    display: block;
    text-align: center;
    font-size: 36px; }
  .cards.applications > .card > .spacer,
  .cards.users > .card > .spacer {
    -ms-flex-positive: 1;
        flex-grow: 1; }
  .cards.applications > .card > .link,
  .cards.users > .card > .link {
    display: block;
    text-align: center;
    line-height: 1.5em; }
    .cards.applications > .card > .link:hover,
    .cards.users > .card > .link:hover {
      text-decoration: underline; }
    .cards.applications > .card > .link.content,
    .cards.users > .card > .link.content {
      color: #0C82BE;
      height: 24px;
      font-size: 14px; }
  .cards.applications > .card i.fa.fa-file-archive-o,
  .cards.users > .card i.fa.fa-file-archive-o {
    padding-right: 5px; }

.cards.applications > .section {
  -ms-flex: 1 100%;
      flex: 1 100%;
  color: #008ad4;
  font-size: 16px;
  border-bottom: 1px solid #dbdbdb;
  margin: 15px 20px 2px 10px;
  padding-bottom: 8px; }

.cards.applications > .card {
  border-radius: 10px; }
  .cards.applications > .card.focused {
    border-radius: 0; }
  .cards.applications > .card > .card-footer {
    display: block; }
    .cards.applications > .card > .card-footer > .icon {
      font-size: 20px;
      line-height: 18px;
      color: #0C82BE; }
      .cards.applications > .card > .card-footer > .icon:hover {
        color: #3aace1; }
      .cards.applications > .card > .card-footer > .icon > i, .cards.applications > .card > .card-footer > .icon img {
        width: 20px;
        height: 20px; }
        .cards.applications > .card > .card-footer > .icon > i::before, .cards.applications > .card > .card-footer > .icon img::before {
          display: block;
          text-align: center; }
      .cards.applications > .card > .card-footer > .icon > .explorer-container {
        position: relative; }
        .cards.applications > .card > .card-footer > .icon > .explorer-container > .explorer {
          display: inline-block;
          position: absolute;
          left: -23px;
          top: 25px; }
          .cards.applications > .card > .card-footer > .icon > .explorer-container > .explorer::before {
            left: 25px; }
  .cards.applications > .card > .card-footer.addons {
    visibility: hidden;
    opacity: 0; }
    .cards.applications > .card > .card-footer.addons .icon {
      font-size: 18px;
      padding-left: 5px; }
  .cards.applications > .card .tag:not(.branch) {
    position: absolute;
    right: 15px;
    top: 15px;
    visibility: hidden;
    opacity: 0; }
    .cards.applications > .card .tag:not(.branch).assertive {
      visibility: visible;
      opacity: 1; }
  .cards.applications > .card .tag.branch {
    visibility: visible;
    opacity: 1; }
  .cards.applications > .card > .title {
    border-bottom: 1px solid #0C82BE;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center; }
    .cards.applications > .card > .title .app-title {
      -ms-flex: 1;
          flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  .cards.applications > .card.layouts-list > .layout-type {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    margin: auto !important; }
  .cards.applications > .card.layouts-list > .template-type {
    position: absolute;
    top: 65px;
    left: 35px; }
  .cards.applications > .card.layouts-list > .addons-type {
    position: absolute;
    top: 45px;
    left: 70px; }
  .cards.applications > .card.layouts-list .app-icon {
    height: 60px;
    padding-top: 5px;
    text-align: center; }
    .cards.applications > .card.layouts-list .app-icon img {
      height: 65px;
      border: 1px solid #ABABAB;
      box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.15); }
  .cards.applications > .card .subtitle {
    display: block;
    max-width: calc(100% - 25px);
    color: #888888;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    margin-top: 1px; }
  .cards.applications > .card:hover .card-footer,
  .cards.applications > .card:hover .subtitle,
  .cards.applications > .card:hover .tag {
    transition: visibility 0s, opacity 0.1s;
    transition-delay: 0.3s;
    visibility: visible;
    opacity: 1; }
    .cards.applications > .card:hover .card-footer.branch,
    .cards.applications > .card:hover .subtitle.branch,
    .cards.applications > .card:hover .tag.branch {
      visibility: hidden;
      opacity: 0;
      transition: 0s;
      transition-delay: 0.3s; }

body {
  min-width: 578px; }

@media (max-width: 992px) {
  .header-label {
    display: none; } }

@media (max-width: 1200px) {
  .logo.right {
    display: none; } }

.pane-bottom > .tabs > .tab > .content .pane {
  float: left;
  border-right: 1px solid #1E6FAB;
  min-width: 280px !important; }
  .pane-bottom > .tabs > .tab > .content .pane .item {
    overflow: visible; }
  .pane-bottom > .tabs > .tab > .content .pane .tree > .collapsible > .ng-scope > li.edit, .pane-bottom > .tabs > .tab > .content .pane .tree > .collapsible > .ng-scope > li.delete,
  .pane-bottom > .tabs > .tab > .content .pane .tree > .collapsible > .ng-scope > li.delete {
    padding-left: 8px; }

.canvas-holder {
  overflow: hidden; }
  .canvas-holder .hint {
    color: #444444;
    font-size: 15px;
    margin: 15px 20px; }

.canvas-content {
  overflow: hidden;
  position: relative; }

.canvas-grid {
  background: url("/images/bg-graph-paper.gif");
  position: absolute;
  left: 18px;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto; }

.canvas-ruler-top-edge {
  height: 17px;
  width: 17px;
  background-color: white;
  border-right: 1px solid #ABABAB;
  border-bottom: 1px solid #ABABAB; }

.canvas-ruler-horizontal {
  height: 18px;
  background: url("/images/ruler-horizontal-bg.png") repeat-x -1px 0; }

.canvas-ruler-vertical {
  width: 18px;
  background: url("/images/ruler-vertical-bg.png") repeat-y 0 -1px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0; }

.canvas-design-area {
  background-color: white;
  border: none;
  border-right: 1px solid #ABABAB;
  min-height: 100%;
  margin: 0 0 -3px 0;
  padding: 0;
  box-sizing: border-box; }
  .canvas-design-area.iphone8 {
    width: 375px; }
    .canvas-design-area.iphone8.landscape {
      width: 667px; }
  .canvas-design-area.iphonex {
    width: 375px; }
    .canvas-design-area.iphonex.landscape {
      width: 812px; }
  .canvas-design-area.ipad-mini {
    width: 768px; }
    .canvas-design-area.ipad-mini.landscape {
      width: 1024px; }
  .canvas-design-area.ipad {
    width: 768px; }
    .canvas-design-area.ipad.landscape {
      width: 1024px; }
  .canvas-design-area.iphone5 {
    width: 320px; }
    .canvas-design-area.iphone5.landscape {
      width: 568px; }
  .canvas-design-area.galaxyS8 {
    width: 360px; }
    .canvas-design-area.galaxyS8.landscape {
      width: 740px; }
  .canvas-design-area.pixel2 {
    width: 411px; }
    .canvas-design-area.pixel2.landscape {
      width: 731px; }
  .canvas-design-area.galaxyview {
    width: 1080px; }
    .canvas-design-area.galaxyview.landscape {
      width: 1920px; }
  .canvas-design-area.galaxyS6 {
    width: 360px; }
    .canvas-design-area.galaxyS6.landscape {
      width: 640px; }
  .canvas-design-area.hpEliteX3 {
    width: 480px; }
    .canvas-design-area.hpEliteX3.landscape {
      width: 848px; }
  .canvas-design-area.surfacert {
    width: 1366px; }
    .canvas-design-area.surfacert.landscape {
      width: 768px; }
  .canvas-design-area.lumia950 {
    width: 360px; }
    .canvas-design-area.lumia950.landscape {
      width: 640px; }
  .canvas-design-area.desktop {
    width: 100%;
    border-right: none; }
    .canvas-design-area.desktop.landscape {
      width: 100%; }
  .canvas-design-area.canvas-connect {
    width: 100%;
    border-right: none;
    background: none transparent; }

.pane-left .fa {
  color: grey; }

.pane-left .app-block {
  padding: 0 0 0 14px;
  height: 50px; }
  .pane-left .app-block .app-info-block {
    width: calc(100% - 30px);
    float: left;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    line-height: 50px; }
    .pane-left .app-block .app-info-block .app-name {
      -ms-flex: 1;
          flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .pane-left .app-block .app-info-block .button {
      padding: 0;
      width: auto;
      font-size: 18px;
      vertical-align: sub; }
  .pane-left .app-block .icon {
    font-size: 1.3em; }
  .pane-left .app-block .fa-spin {
    font-size: 18px;
    margin: 15px 0 0 6px; }
  .pane-left .app-block .button-danger,
  .pane-left .app-block .button-warning,
  .pane-left .app-block .button-safe {
    font-size: 16px;
    margin: 15px 0 0 0; }

.pane-left .pane-block {
  border: 4px solid #6CC04A;
  border-right: none; }

.pane-left .content .header {
  display: inline-block;
  margin: 0px 0px 5px 0px;
  color: grey; }

.pane-left .content .palette-image {
  height: 30px;
  margin: 0px 0px -1px 3px; }

.pane-left .content .palette-label {
  padding: 7px 4px 0 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.pane-left .content .palette-component {
  width: 135px;
  border: 1px solid #D7D7D7;
  float: left;
  margin: 2px;
  font-size: 12px;
  display: -ms-flexbox;
  display: flex; }

.pane-left .content .component-group {
  margin: 0px 0px 15px 0px; }

.screen-model-tree {
  padding: 0 10px; }
  .screen-model-tree .screen-model-first-item {
    margin-bottom: 7px; }
    .screen-model-tree .screen-model-first-item:hover > .controls {
      background: #F4F4F4; }
  .screen-model-tree .tree-item {
    border: 1px solid #ABABAB;
    margin-bottom: 7px; }

.array-preview .table-container {
  border: none; }

.property-sheet {
  padding: 0 !important; }
  .property-sheet .property-group {
    margin: 0 !important; }
  .property-sheet .content {
    padding: 0 !important; }
    .property-sheet .content .properties {
      box-sizing: border-box;
      padding: 8px;
      display: table;
      width: 100%; }
      .property-sheet .content .properties .property {
        display: table-row; }
        .property-sheet .content .properties .property .property-label {
          font-size: 12px;
          display: table-cell;
          vertical-align: top;
          line-height: 20px;
          padding-right: 8px;
          white-space: nowrap;
          text-align: right;
          width: 1%; }
        .property-sheet .content .properties .property tooltip._top:not(._left):not(._right) tip tip-arrow {
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 6px solid #0095d9; }
        .property-sheet .content .properties .property tooltip._bottom:not(._left):not(._right) tip tip-arrow {
          border-bottom: 6px solid #0095d9;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent; }
        .property-sheet .content .properties .property tooltip._right:not(._top):not(._bottom) tip tip-arrow {
          border-bottom: 6px solid transparent;
          border-right: 6px solid #0095d9;
          border-top: 6px solid transparent; }
        .property-sheet .content .properties .property tooltip._left:not(._top):not(._bottom) tip tip-arrow {
          border-bottom: 6px solid transparent;
          border-left: 6px solid #0095d9;
          border-top: 6px solid transparent; }
        .property-sheet .content .properties .property tooltip._top._left tip tip-arrow {
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 6px solid #0095d9; }
        .property-sheet .content .properties .property tooltip._top._right tip tip-arrow {
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 6px solid #0095d9; }
        .property-sheet .content .properties .property tooltip._bottom._left tip tip-arrow {
          border-bottom: 6px solid #0095d9;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent; }
        .property-sheet .content .properties .property tooltip._bottom._right tip tip-arrow {
          border-bottom: 6px solid #0095d9;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent; }
        .property-sheet .content .properties .property tip.tooltip {
          background-color: #0095d9;
          white-space: normal;
          text-align: left; }
        .property-sheet .content .properties .property .property-control {
          display: table-cell;
          vertical-align: top;
          white-space: nowrap; }
          .property-sheet .content .properties .property .property-control input[type=text],
          .property-sheet .content .properties .property .property-control textarea,
          .property-sheet .content .properties .property .property-control select {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 3px;
            resize: none;
            height: 21px;
            line-height: 21px;
            background: #fff;
            border: 1px solid #ABABAB;
            -webkit-appearance: none;
            border-radius: 0;
            padding: 0 4px;
            font-size: 13px; }
          .property-sheet .content .properties .property .property-control textarea {
            height: 42px; }
          .property-sheet .content .properties .property .property-control select {
            background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAWklEQVQ4T2NkoBAwUqifYdQABqxhwA8MWE8sgfsfKLYNiD8jy+EKxAagono0Q2qB/BZ0g/HFArIhdUCNzdiinFA0ggwBOb0RV3ohZADBdDZqAPaERDDgkBUAAJYaCRFgvG3iAAAAAElFTkSuQmCC") no-repeat;
            background-position-x: right;
            background-position-y: 2px;
            line-height: 19px; }
          .property-sheet .content .properties .property .property-control [msd-elastic] {
            margin-bottom: 0; }
          .property-sheet .content .properties .property .property-control input[type=checkbox] {
            height: 16px;
            width: 16px;
            margin: 2px 0 0 0; }
          .property-sheet .content .properties .property .property-control.has-button {
            display: -ms-flexbox;
            display: flex; }
            .property-sheet .content .properties .property .property-control.has-button input {
              margin-right: -1px; }
            .property-sheet .content .properties .property .property-control.has-button select {
              margin-right: 2px; }
            .property-sheet .content .properties .property .property-control.has-button button {
              width: 21px;
              height: 21px;
              padding: 0;
              display: inline-block;
              border: 1px solid #ABABAB;
              cursor: pointer;
              -webkit-appearance: none;
              box-sizing: border-box;
              background-image: linear-gradient(#fff, #D7D7D7); }

@keyframes copy-success {
  0% {
    opacity: 0;
    transform: translateX(100%); }
  50% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }
            .property-sheet .content .properties .property .property-control.has-button .copied::after {
              position: absolute;
              bottom: 10%;
              right: 110%;
              content: "Copied";
              padding: 3px 3px;
              color: #fff;
              font-size: 11px;
              font-family: system-ui;
              text-shadow: 1px 1px black;
              background-color: #0C82BE;
              border-radius: 3px;
              opacity: 0;
              animation-name: copy-success;
              animation-duration: 1.5s; }
          .property-sheet .content .properties .property .property-control.link {
            cursor: pointer;
            font-size: 12px;
            color: #0FACBF;
            vertical-align: middle; }
            .property-sheet .content .properties .property .property-control.link:hover {
              text-decoration: underline; }
      .property-sheet .content .properties .property-note {
        display: table-row; }
        .property-sheet .content .properties .property-note > span {
          display: table-cell;
          font-size: 12px;
          vertical-align: top;
          padding: 4px 0;
          color: #888888; }

.color-control-container {
  display: -ms-flexbox;
  display: flex;
  line-height: 23px;
  margin-bottom: 3px; }
  .color-control-container > button {
    margin-left: 2px; }
  .color-control-container .ui-select-placeholder {
    width: 100% !important; }

.color-control .select2-choice {
  box-sizing: border-box;
  height: 21px;
  border-radius: 0;
  background-image: none;
  font-size: 13px;
  color: #000;
  line-height: 19px;
  padding-left: 4px;
  box-shadow: none; }

.color-control .select2-arrow {
  border-radius: 0 !important;
  background-image: linear-gradient(#fff, #D7D7D7); }
  .color-control .select2-arrow b {
    margin-top: -4px; }

.color-control .ui-select-dropdown {
  border-radius: 0 !important;
  border: 1px solid #5897fb !important; }

.color-control.select2-dropdown-open .select2-choice {
  border-radius: 0 !important; }

.ui-select-container {
  display: table-cell;
  width: 100%; }
  .ui-select-container .set-colors {
    width: 11px;
    height: 11px;
    display: inline-block;
    border: 1px solid #ABABAB;
    position: relative;
    top: 2px; }
  .ui-select-container .color-option {
    white-space: nowrap; }

.property-button {
  width: 21px;
  height: 21px;
  padding: 0;
  display: inline-block;
  border: 1px solid #ABABAB;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  box-sizing: border-box;
  background-image: linear-gradient(#fff, #D7D7D7); }

.select2-results {
  max-height: none; }

.ui-select-choices-row:hover {
  color: black; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50px;
  background: #666666;
  overflow: visible;
  z-index: 1500; }
  .sidebar > div > button,
  .sidebar > button,
  .sidebar > a {
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 4px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: #fff;
    overflow: hidden;
    text-align: left;
    text-decoration: none; }
    .sidebar > div > button:disabled,
    .sidebar > button:disabled,
    .sidebar > a:disabled {
      opacity: 0.5; }
      .sidebar > div > button:disabled:hover,
      .sidebar > button:disabled:hover,
      .sidebar > a:disabled:hover {
        background: none;
        box-shadow: none;
        cursor: auto; }
    .sidebar > div > button.tab,
    .sidebar > button.tab,
    .sidebar > a.tab {
      border-radius: 10px 0 0 10px;
      width: 46px; }
    .sidebar > div > button.active,
    .sidebar > button.active,
    .sidebar > a.active {
      background: #6CC04A !important; }
    .sidebar > div > button:hover,
    .sidebar > button:hover,
    .sidebar > a:hover {
      background: #3aace1;
      width: 190px;
      box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.15);
      border-radius: 10px;
      transition: width 0.15s ease-in-out, border-radius 0.15s linear, box-shadow 0.15s linear;
      transition-delay: 0.6s; }
    .sidebar > div > button:active,
    .sidebar > button:active,
    .sidebar > a:active {
      box-shadow: inset 2px 2px 1px 0 rgba(0, 0, 0, 0.15); }
    .sidebar > div > button > .fa, .sidebar > div > button .ion,
    .sidebar > button > .fa,
    .sidebar > button .ion,
    .sidebar > a > .fa,
    .sidebar > a .ion {
      display: inline-block;
      font-size: 20px;
      line-height: 42px;
      width: 42px;
      text-align: center;
      vertical-align: middle; }
      .sidebar > div > button > .fa.fa-home, .sidebar > div > button .ion.fa-home,
      .sidebar > button > .fa.fa-home,
      .sidebar > button .ion.fa-home,
      .sidebar > a > .fa.fa-home,
      .sidebar > a .ion.fa-home {
        font-size: 24px; }
      .sidebar > div > button > .fa.fa-paint-brush, .sidebar > div > button > .fa.fa-share-square, .sidebar > div > button .ion.fa-paint-brush, .sidebar > div > button .ion.fa-share-square,
      .sidebar > button > .fa.fa-paint-brush,
      .sidebar > button > .fa.fa-share-square,
      .sidebar > button .ion.fa-paint-brush,
      .sidebar > button .ion.fa-share-square,
      .sidebar > a > .fa.fa-paint-brush,
      .sidebar > a > .fa.fa-share-square,
      .sidebar > a .ion.fa-paint-brush,
      .sidebar > a .ion.fa-share-square {
        font-size: 18px; }
      .sidebar > div > button > .fa.fa-puzzle-piece, .sidebar > div > button .ion.fa-puzzle-piece,
      .sidebar > button > .fa.fa-puzzle-piece,
      .sidebar > button .ion.fa-puzzle-piece,
      .sidebar > a > .fa.fa-puzzle-piece,
      .sidebar > a .ion.fa-puzzle-piece {
        font-size: 22px;
        margin-left: 2px; }
    .sidebar > div > button > span,
    .sidebar > button > span,
    .sidebar > a > span {
      display: inline-block;
      font-size: 16px;
      line-height: 40px;
      vertical-align: bottom;
      margin-left: 5px; }
  .sidebar > .spacer {
    display: inline-block;
    margin: 4px;
    width: 42px;
    height: 42px; }
  .sidebar > .divider {
    display: block;
    margin: 0 auto;
    width: 27.72px;
    height: 1px;
    background: #ABABAB; }

.ngdialog-open .sidebar > button,
.ngdialog-open .sidebar > a {
  background: transparent !important;
  width: 42px !important;
  box-shadow: none !important;
  transition: 0s;
  transition-delay: 0s; }

#temp-token {
  border: 2px dotted #6cb9e2;
  position: relative;
  margin-bottom: -5px;
  display: inline-block;
  width: 80px;
  height: 20px;
  box-sizing: border-box;
  pointer-events: none;
  text-align: center; }

#temp-drag-image {
  width: 80px;
  height: 20px;
  pointer-events: none;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid #0095d9; }

mapping-token {
  display: inline-block;
  margin: 0 2px; }
  mapping-token:hover {
    cursor: pointer; }
  mapping-token .mapping-token {
    background-color: none;
    color: #888888;
    border: 1px solid #888888;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
    width: 80px;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    text-align: center;
    padding: 0 4px; }
    mapping-token .mapping-token i.fa-remove {
      font-size: 14px;
      color: #888888;
      padding-right: 2px; }
      mapping-token .mapping-token i.fa-remove:hover {
        cursor: pointer; }
    mapping-token .mapping-token.selected {
      color: #444444;
      border: 1px solid #0095d9;
      background-color: #c1e2f3; }
      mapping-token .mapping-token.selected i.fa-remove {
        color: #444444; }
    mapping-token .mapping-token .token-label, mapping-token .mapping-token .radio-outline {
      font-size: 12px; }
    mapping-token .mapping-token .radio-outline {
      width: 14px;
      height: 14px;
      position: relative;
      border: 1px solid #888888;
      border-radius: 50%;
      background: white; }
    mapping-token .mapping-token .radio-check {
      height: 8px;
      width: 8px;
      position: absolute;
      top: 2px;
      left: 2px;
      border-radius: 50%;
      background: #3aace1; }

block-mapping {
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; }

.arrows-divider {
  padding: 0 1rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 0;
      flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex: 0;
      flex: 0; }
  .arrows-divider > i {
    color: #0095d9;
    font-size: 30px;
    cursor: pointer; }
    .arrows-divider > i.active {
      opacity: .5; }

.block-mapping-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -ms-flex-direction: column;
      flex-direction: column; }
  .block-mapping-container .data-models {
    width: 100%;
    color: #777;
    line-height: 28px;
    border: 1px solid #C5C5C5;
    background: #eee;
    padding: 0 10px; }
  .block-mapping-container .block-header {
    padding: 5px 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-align: center;
        align-items: center; }
    .block-mapping-container .block-header > span {
      -ms-flex-positive: 1;
          flex-grow: 1; }
    .block-mapping-container .block-header > button {
      margin-left: 5px;
      padding: 0 10px; }
      .block-mapping-container .block-header > button > i {
        font-size: 14px;
        padding-left: 10px;
        margin-right: 0; }
        .block-mapping-container .block-header > button > i.fa-caret-right {
          font-size: 17px; }
  .block-mapping-container .mock-button {
    background-color: #EFEFEF !important;
    height: 25px;
    -ms-flex-pack: justify;
        justify-content: space-between;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-positive: 0;
        flex-grow: 0;
    width: 80px;
    padding: 0;
    margin-left: 8px; }
    .block-mapping-container .mock-button .label {
      height: 10px;
      line-height: 10px;
      margin-left: 5px; }
    .block-mapping-container .mock-button i {
      font-size: 17px; }
    .block-mapping-container .mock-button.active {
      background-color: #C5C5C5 !important;
      border-color: #888888; }
  .block-mapping-container .block-tabs {
    display: -ms-flexbox;
    display: flex;
    width: auto;
    height: 100%;
    margin-top: 0;
    padding-top: 5px;
    border: 1px solid #C5C5C5;
    border-top: none; }
    .block-mapping-container .block-tabs .tab {
      padding: 0; }
      .block-mapping-container .block-tabs .tab > .target {
        width: auto;
        min-width: 120px;
        border: 1px solid #aaa; }
      .block-mapping-container .block-tabs .tab > .content {
        background-color: white;
        border-top: 5px solid #0095d9;
        top: 34px;
        overflow: hidden;
        -ms-flex-direction: column;
            flex-direction: column; }
        .block-mapping-container .block-tabs .tab > .content > .summary {
          display: -ms-flexbox;
          display: flex;
          -ms-flex-align: center;
              align-items: center;
          color: #666666;
          font-size: 11px;
          font-style: italic;
          padding: 10px;
          height: auto;
          overflow: hidden;
          -ms-flex-positive: 0;
              flex-grow: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
          height: 35px; }
        .block-mapping-container .block-tabs .tab > .content block-mapping-tree {
          -ms-flex-positive: 1;
              flex-grow: 1;
          -ms-flex-negative: 1;
              flex-shrink: 1; }
        .block-mapping-container .block-tabs .tab > .content .input-tree, .block-mapping-container .block-tabs .tab > .content .output-tree {
          padding: 0 10px;
          height: calc(100% - 35px);
          overflow: auto; }

.input-tree .item .third-line {
  margin-left: 26px; }

.input-tree, .output-tree {
  display: -ms-flexbox;
  display: flex; }
  .input-tree .scrollable-area, .output-tree .scrollable-area {
    overflow: auto;
    width: 100%; }
  .input-tree .tree, .output-tree .tree {
    overflow: visible; }
    .input-tree .tree ul, .output-tree .tree ul {
      width: 100%; }
    .input-tree .tree > li[tree-node] > span.item, .output-tree .tree > li[tree-node] > span.item {
      background-color: #EFEFEF;
      margin-bottom: 2px; }
  .input-tree .category-title, .output-tree .category-title {
    padding-left: 8px; }
    .input-tree .category-title .fa, .output-tree .category-title .fa {
      color: #888888; }
  .input-tree .item .arrow, .output-tree .item .arrow {
    font-family: FontAwesome;
    color: #6CC04A;
    margin-right: 7px; }
    .input-tree .item .arrow::before, .output-tree .item .arrow::before {
      content: "\f178"; }
  .input-tree .item.selected, .output-tree .item.selected {
    background-color: #d6e6f0; }
  .input-tree .item.drag-over, .output-tree .item.drag-over {
    background-color: #FFFF66 !important;
    box-shadow: none !important;
    opacity: 0.8 !important; }
  .input-tree li > .item i, .output-tree li > .item i {
    color: #888888;
    padding-right: 5px; }
  .input-tree li > .item > .template, .output-tree li > .item > .template {
    width: 100%; }
  .input-tree li > .item > .label, .input-tree li > .item > .description, .input-tree li > .item > i, .output-tree li > .item > .label, .output-tree li > .item > .description, .output-tree li > .item > i {
    display: none; }
  .input-tree li > .item .first-line, .output-tree li > .item .first-line {
    overflow: hidden;
    text-overflow: ellipsis; }
    .input-tree li > .item .first-line.flexible, .output-tree li > .item .first-line.flexible {
      display: -ms-flexbox;
      display: flex; }
      .input-tree li > .item .first-line.flexible .left, .output-tree li > .item .first-line.flexible .left {
        padding-right: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto; }
      .input-tree li > .item .first-line.flexible .right, .output-tree li > .item .first-line.flexible .right {
        -ms-flex: 1 1;
            flex: 1 1; }
    .input-tree li > .item .first-line .description, .output-tree li > .item .first-line .description {
      color: #888888;
      font-size: 0.8em;
      font-style: italic; }
    .input-tree li > .item .first-line .arrow, .output-tree li > .item .first-line .arrow {
      font-family: FontAwesome;
      color: #6CC04A; }
      .input-tree li > .item .first-line .arrow::before, .output-tree li > .item .first-line .arrow::before {
        content: "\f177"; }
  .input-tree li > .item .input, .output-tree li > .item .input {
    width: 95%;
    border: solid 1px #eeeeee; }
  .input-tree li > .item .radio-container, .output-tree li > .item .radio-container {
    margin-right: 10px; }
    .input-tree li > .item .radio-container input[type=radio], .output-tree li > .item .radio-container input[type=radio] {
      position: relative;
      top: 1px;
      height: 11px; }
  .input-tree li > .item .associated-item, .output-tree li > .item .associated-item {
    font-family: FontAwesome;
    color: #6CC04A;
    margin-left: 35px;
    line-height: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-align: center;
        align-items: center;
    padding-bottom: 5px; }
    .input-tree li > .item .associated-item .fa.fa-times, .output-tree li > .item .associated-item .fa.fa-times {
      visibility: hidden; }
    .input-tree li > .item .associated-item .associated-item-description, .output-tree li > .item .associated-item .associated-item-description {
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis; }
  .input-tree li > .item:hover .associated-item .fa.fa-times, .output-tree li > .item:hover .associated-item .fa.fa-times {
    visibility: visible;
    opacity: 0.5; }
    .input-tree li > .item:hover .associated-item .fa.fa-times:hover, .output-tree li > .item:hover .associated-item .fa.fa-times:hover {
      opacity: 1; }
  .input-tree li > .item.mapped .associated-item, .output-tree li > .item.mapped .associated-item {
    color: #6CC04A; }
  .input-tree.mock-mode li > .item > .label, .input-tree.mock-mode li > .item > .description, .input-tree.mock-mode li > .item > i, .output-tree.mock-mode li > .item > .label, .output-tree.mock-mode li > .item > .description, .output-tree.mock-mode li > .item > i {
    display: inline-block; }
  .input-tree.mock-mode li > .item input[type="text"], .output-tree.mock-mode li > .item input[type="text"] {
    width: unset; }
  .input-tree.mock-mode li > .item .array-preview, .output-tree.mock-mode li > .item .array-preview {
    padding: 0 1px 1px 0; }
    .input-tree.mock-mode li > .item .array-preview .table-container, .output-tree.mock-mode li > .item .array-preview .table-container {
      border-top: 1px solid #6CC04A;
      width: 25vw; }
  .input-tree.mock-mode li > .item > .template, .output-tree.mock-mode li > .item > .template {
    width: unset; }

token-text-input {
  display: -ms-flexbox;
  display: flex;
  border: 1px solid #D7D7D7;
  background-color: white;
  font-size: 14px;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  height: 32px; }
  token-text-input .input-area {
    padding: 6px; }
  token-text-input .add-token-button,
  token-text-input .delete-item-button {
    margin: 6px; }
  token-text-input .token-text-input-container {
    -ms-flex-positive: 1;
        flex-grow: 1;
    line-height: 20px; }
    token-text-input .token-text-input-container.drag-over {
      background-color: #FFFF66;
      color: transparent;
      text-shadow: 0 0 0 black; }
    token-text-input .token-text-input-container .input-area {
      min-width: -webkit-max-content;
      min-width: max-content; }
      token-text-input .token-text-input-container .input-area > *:first-child {
        margin-left: 0; }
      token-text-input .token-text-input-container .input-area[data-placeholder-enabled="true"]:before {
        content: attr(data-placeholder-value);
        color: #666666; }
      token-text-input .token-text-input-container .input-area.focus {
        outline: none;
        outline-style: none; }
  token-text-input.one-line .token-text-input-container::-webkit-scrollbar {
    width: 0;
    height: 0; }
  token-text-input.one-line .input-area {
    width: 100%; }
  token-text-input .add-token-button,
  token-text-input .delete-item-button {
    width: 20px;
    height: 20px;
    border: 1px solid #0095d9;
    color: #0095d9;
    position: relative;
    cursor: pointer;
    -ms-flex-negative: 0;
        flex-shrink: 0; }
    token-text-input .add-token-button > span,
    token-text-input .delete-item-button > span {
      margin: 0;
      position: absolute;
      top: 50%;
      width: 100%;
      text-align: center; }
  token-text-input .add-token-button {
    font-size: 25px; }
    token-text-input .add-token-button > span {
      transform: translateY(-51%); }
  token-text-input .delete-item-button {
    font-size: 20px; }
    token-text-input .delete-item-button > span {
      transform: translateY(-50%); }
  token-text-input.selected {
    outline-width: 2px;
    outline-style: solid;
    outline-color: Highlight; }
  @media (-webkit-min-device-pixel-ratio: 0) {
    token-text-input.selected {
      outline-color: -webkit-focus-ring-color;
      outline-style: solid; } }

rest-canvas {
  height: calc(100% - 32px);
  -ms-flex-direction: column !important;
      flex-direction: column !important;
  padding-top: 15px; }
  rest-canvas .url-container, rest-canvas .results-header {
    border: 1px solid #C5C5C5;
    padding: 5px;
    margin-bottom: 0;
    max-height: 44px; }
    rest-canvas .url-container .toggle-options, rest-canvas .results-header .toggle-options {
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
      padding-right: 0; }
      rest-canvas .url-container .toggle-options .caret, rest-canvas .results-header .toggle-options .caret {
        cursor: pointer;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        -ms-flex-pack: center;
            justify-content: center;
        position: relative;
        height: 100%; }
        rest-canvas .url-container .toggle-options .caret:after, rest-canvas .results-header .toggle-options .caret:after {
          content: " ";
          position: absolute;
          left: calc(50% - 3px);
          border-style: solid;
          border-width: 5px 0 5px 7px;
          border-color: transparent transparent transparent #0095d9;
          transition: 0.1s; }
        rest-canvas .url-container .toggle-options .caret.caret-down:after, rest-canvas .results-header .toggle-options .caret.caret-down:after {
          transform: rotate(90deg);
          transition: 0.1s; }
  rest-canvas .url-container {
    border: 1px solid #0095d9; }
    rest-canvas .url-container .method-select {
      -ms-flex: 0 0 120px;
          flex: 0 0 120px; }
    rest-canvas .url-container .base-url-display {
      text-overflow: ellipsis;
      line-height: 32px;
      white-space: nowrap;
      display: block;
      overflow: hidden; }
  rest-canvas .results-header {
    margin-top: 15px;
    background: #EFEFEF;
    color: #777; }
  rest-canvas .tabs {
    width: auto;
    height: 100%;
    margin-top: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #C5C5C5;
    border-top: none; }
    rest-canvas .tabs .tab {
      padding: 0; }
      rest-canvas .tabs .tab > .target {
        width: auto;
        min-width: 120px;
        border: 1px solid #aaa; }
      rest-canvas .tabs .tab > .content {
        background-color: white;
        top: 34px;
        overflow-y: auto;
        overflow-x: hidden; }
    rest-canvas .tabs.output-tabs .tab > .content > .row {
      margin: 0;
      height: 100%; }
    rest-canvas .tabs.output-tabs .tab > .content .output-schema {
      padding: 8px;
      overflow: auto;
      height: 100%; }
    rest-canvas .tabs.output-tabs .tab > .content .output-raw {
      padding: 0;
      height: 100%; }
      rest-canvas .tabs.output-tabs .tab > .content .output-raw .editor-view {
        border-left: 1px solid #C5C5C5; }
    rest-canvas .tabs.output-tabs .output-status {
      margin-left: 30%;
      padding-top: 5px; }
      rest-canvas .tabs.output-tabs .output-status mapping-source > span {
        padding: 5px; }
        rest-canvas .tabs.output-tabs .output-status mapping-source > span.selecte d {
          background-color: #d6e6f0; }
      rest-canvas .tabs.output-tabs .output-status .status-button {
        border: 1px solid;
        width: 50px; }
        rest-canvas .tabs.output-tabs .output-status .status-button.two-hundred {
          border-color: #6CC04A; }
        rest-canvas .tabs.output-tabs .output-status .status-button.three-hundred {
          border-color: #FF6633; }
        rest-canvas .tabs.output-tabs .output-status .status-button.four-hundred {
          border-color: #D9534F; }
        rest-canvas .tabs.output-tabs .output-status .status-button.five-hundred {
          border-color: #0C82BE; }

key-value-table {
  display: block; }
  key-value-table table {
    width: calc(100% + 1px); }
    key-value-table table th {
      font-size: 13px;
      background-color: lightgrey; }
    key-value-table table td {
      position: relative; }
    key-value-table table input[type="text"] {
      width: 100%;
      border: none;
      height: 100%;
      font-size: 12px; }
    key-value-table table .is-used-column {
      width: 5%;
      transform: scale(1.6);
      padding-left: 7px; }
    key-value-table table .key-column {
      width: 25%; }
      key-value-table table .key-column > span {
        display: -ms-flexbox;
        display: flex; }
    key-value-table table .value-column {
      height: 20px; }
      key-value-table table .value-column token-text-input {
        height: 26px; }
        key-value-table table .value-column token-text-input .input-area {
          padding: 3px; }
        key-value-table table .value-column token-text-input .add-token-button,
        key-value-table table .value-column token-text-input .delete-item-button {
          margin: 3px; }
    key-value-table table input[type="text"].key-input {
      height: 26px;
      padding: 3px;
      border: 1px solid transparent; }
      key-value-table table input[type="text"].key-input:focus {
        outline-style: none;
        border: 1px solid #D7D7D7; }
    key-value-table table ul.autocomplete-box {
      position: absolute;
      top: 23px;
      background: #FFFFFF;
      border: 1px solid #C5C5C5;
      padding: 0;
      width: 400px;
      z-index: 1;
      list-style-type: none;
      max-height: 163px;
      overflow-x: auto;
      box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.2); }
      key-value-table table ul.autocomplete-box li {
        padding: 5px;
        border-bottom: 1px solid #C5C5C5;
        cursor: pointer; }
        key-value-table table ul.autocomplete-box li.highlighted, key-value-table table ul.autocomplete-box li:hover {
          background: #EFEFEF; }
      key-value-table table ul.autocomplete-box li:last-child {
        border-bottom: none; }
  key-value-table table, key-value-table th, key-value-table td {
    border-collapse: collapse; }
  key-value-table th, key-value-table td {
    border: 1px solid #ABABAB;
    padding: 5px; }
  key-value-table th:first-child, key-value-table td:first-child {
    border-left: none; }
  key-value-table th:last-child, key-value-table td:last-child {
    border-right: none; }

#output-response-tree-container .item {
  padding-top: 5px;
  padding-bottom: 10px; }
  #output-response-tree-container .item .associated-item {
    margin-left: 35px;
    -ms-flex-align: center;
        align-items: center; }
    #output-response-tree-container .item .associated-item .label {
      overflow: hidden; }
  #output-response-tree-container .item .first-line {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    line-height: 20px; }
    #output-response-tree-container .item .first-line .left {
      overflow: hidden; }
  #output-response-tree-container .item .second-line {
    color: #888888;
    font-size: 0.7em;
    font-style: italic;
    line-height: 12px; }
  #output-response-tree-container .item .arrow::before {
    content: "\f178"; }

#output-response-tree-container .template {
  width: 100%; }

rest-body-editor {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -ms-flex-direction: column;
      flex-direction: column; }
  rest-body-editor .top {
    margin: 10px; }
    rest-body-editor .top > span {
      display: inline-block; }
    rest-body-editor .top .body-type-option {
      margin-right: 15px; }
  rest-body-editor token-text-input.raw-input {
    font-size: 17px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid #C5C5C5;
    -ms-flex-positive: 1;
        flex-grow: 1; }
    rest-body-editor token-text-input.raw-input.selected {
      outline: none; }
    rest-body-editor token-text-input.raw-input .token-text-input-container {
      height: 100%; }
      rest-body-editor token-text-input.raw-input .token-text-input-container .input-area {
        height: 100%; }
  rest-body-editor .binary-input-container {
    margin: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center; }
    rest-body-editor .binary-input-container token-text-input {
      margin-left: 10px;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.rest-auth-tab {
  background-color: #EFEFEF;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%; }
  .rest-auth-tab .type-selection-container {
    padding: 15px;
    border-right: 1px solid #C5C5C5; }
  .rest-auth-tab .options-container {
    -ms-flex-positive: 1;
        flex-grow: 1;
    padding: 15px; }
    .rest-auth-tab .options-container .auth-form-row {
      height: 40px;
      color: #666666;
      display: -ms-flexbox;
      display: flex;
      line-height: 32px; }
      .rest-auth-tab .options-container .auth-form-row label {
        width: 80px; }
      .rest-auth-tab .options-container .auth-form-row token-text-input {
        -ms-flex-positive: 1;
            flex-grow: 1; }
    .rest-auth-tab .options-container .no-auth-options, .rest-auth-tab .options-container .inherit-auth-options {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: center;
          justify-content: center;
      width: 100%;
      height: 100%; }
    .rest-auth-tab .options-container .auth-option-message {
      color: #666666;
      text-align: center; }

filter-builder li > .item > i {
  display: none; }

filter-builder li .filter-builder-node-options {
  height: 24px;
  width: 100%;
  display: -ms-inline-flexbox;
  display: inline-flex; }
  filter-builder li .filter-builder-node-options > * {
    margin-left: 5px;
    margin-right: 5px; }
  filter-builder li .filter-builder-node-options > select {
    width: 20%; }
  filter-builder li .filter-builder-node-options token-text-input {
    line-height: 24px;
    width: 35%; }
    filter-builder li .filter-builder-node-options token-text-input input-area {
      line-height: 24px; }

.pane-left.connect .fa.text-white {
  color: white;
  opacity: 0.7; }

.pane-left.connect .content.connect {
  padding: 0px; }

.pane-left.connect .content .header {
  color: #333; }

.pane-left.connect .content details summary::-webkit-details-marker {
  color: #0095d9; }

.pane-left.connect .content details :focus {
  outline: none; }

.pane-left.connect .content .text-black {
  color: black; }

.pane-left.connect .content .event-block-group {
  padding-left: 12px; }
  .pane-left.connect .content .event-block-group block {
    display: inline-block; }

.pane-left.connect .content .event-block-group.client-events .event-component {
  margin-left: 25px; }

.pane-left.connect .content .palette-component {
  height: 28px;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  cursor: grab;
  cursor: -webkit-grab; }
  .pane-left.connect .content .palette-component:active {
    cursor: grabbing;
    cursor: -webkit-grabbing; }

.pane-left.connect .content .event-component {
  background-color: #1e428a;
  color: #F8F8F8;
  font-size: 12px;
  padding: 0 5px;
  width: 115px;
  border-radius: 12px;
  position: relative; }
  .pane-left.connect .content .event-component i {
    position: absolute;
    width: 14px;
    font-size: 14px;
    text-align: center; }
  .pane-left.connect .content .event-component span {
    padding: 0 0 0 18px;
    word-break: break-all;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis; }

.pane-left.connect .content .tree[endpoints-tree] {
  padding-left: 18px;
  width: auto; }

.pane-left.connect .content .tree .top-level-event-node,
.pane-left.connect .content .tree span.screen-node + ul li {
  display: inline-block; }
  .pane-left.connect .content .tree .top-level-event-node > span.item,
  .pane-left.connect .content .tree span.screen-node + ul li > span.item {
    padding: 0; }
    .pane-left.connect .content .tree .top-level-event-node > span.item > .label,
    .pane-left.connect .content .tree .top-level-event-node > span.item > .description,
    .pane-left.connect .content .tree span.screen-node + ul li > span.item > .label,
    .pane-left.connect .content .tree span.screen-node + ul li > span.item > .description {
      display: none; }

.pane-left.connect .content .block-component {
  background-color: #0095d9;
  color: white;
  font-size: 12px;
  padding: 5px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between; }
  .pane-left.connect .content .block-component i {
    width: 14px;
    font-size: 14px;
    text-align: center; }
  .pane-left.connect .content .block-component i:last-child:hover {
    cursor: pointer; }
  .pane-left.connect .content .block-component span {
    -ms-flex-positive: 1;
        flex-grow: 1;
    padding: 0px 0px 0px 4px;
    word-break: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }

.pane-left.connect .content block .tooltip {
  background-color: #666666;
  white-space: normal;
  text-align: left; }

.pane-left.connect .content block tooltip._top:not(._left):not(._right) tip tip-arrow {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666666; }

.pane-left.connect .content block tooltip._bottom:not(._left):not(._right) tip tip-arrow {
  border-bottom: 6px solid #666666;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent; }

.pane-left.connect .content block tooltip._right:not(._top):not(._bottom) tip tip-arrow {
  border-bottom: 6px solid transparent;
  border-right: 6px solid #666666;
  border-top: 6px solid transparent; }

.pane-left.connect .content block tooltip._left:not(._top):not(._bottom) tip tip-arrow {
  border-bottom: 6px solid transparent;
  border-left: 6px solid #666666;
  border-top: 6px solid transparent; }

.pane-left.connect .content block tooltip._top._left tip tip-arrow {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666666; }

.pane-left.connect .content block tooltip._top._right tip tip-arrow {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666666; }

.pane-left.connect .content block tooltip._bottom._left tip tip-arrow {
  border-bottom: 6px solid #666666;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent; }

.pane-left.connect .content block tooltip._bottom._right tip tip-arrow {
  border-bottom: 6px solid #666666;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent; }

.pane-left.connect .content block.create-block .block-component {
  background-color: white;
  border: 1px dashed #0095d9;
  color: #0095d9; }
  .pane-left.connect .content block.create-block .block-component span {
    text-align: center;
    word-break: break-word; }
  .pane-left.connect .content block.create-block .block-component i {
    color: #0095d9; }

.pane-left.connect .content summary.connectHeader {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  -ms-flex-align: center;
      align-items: center;
  margin: 0px 0px 0px 0px;
  color: grey;
  padding: 7.5px 0px 4px 12px;
  cursor: pointer; }
  .pane-left.connect .content summary.connectHeader:hover {
    background-color: #E5F1F8; }
  .pane-left.connect .content summary.connectHeader div.open-endpoint,
  .pane-left.connect .content summary.connectHeader div.open-block {
    display: inline-block;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
    .pane-left.connect .content summary.connectHeader div.open-endpoint + span,
    .pane-left.connect .content summary.connectHeader div.open-block + span {
      -ms-flex: unset;
          flex: unset; }
  .pane-left.connect .content summary.connectHeader.bg-grey {
    background-color: #E6E6E6; }
  .pane-left.connect .content summary.connectHeader span {
    padding: 0px 0px 0px 5px;
    -ms-flex: 1 1;
        flex: 1 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .pane-left.connect .content summary.connectHeader > .right-side {
    -ms-flex: 0 1;
        flex: 0 1;
    overflow: visible;
    text-align: right; }
  .pane-left.connect .content summary.connectHeader .dirty-marker {
    color: #D9534F;
    margin: -5px 0px 0 0px;
    font-size: 16px; }

.pane-left.connect .content .add-connector-button {
  margin-right: 35px;
  padding: 0;
  color: #0095d9; }

.pane-left.connect .content .connector-settings-button {
  margin-right: 25px;
  padding: 0px;
  color: #0095d9; }

.pane-left.connect .content .rdbs-block-group summary, .pane-left.connect .content .rest-block-group summary {
  color: black; }

.pane-left.connect .content .block-group > details, .pane-left.connect .content .connector-group > details {
  margin-bottom: 10px; }

.pane-left.connect .content .block-group > details[open], .pane-left.connect .content .connector-group > details[open] {
  margin-bottom: 0px; }

#canvas {
  font-family: 'Open Sans', sans-serif;
  color: #F8F8F8;
  height: 100vh;
  width: 100%; }
  #canvas svg.straight-line {
    height: 30px; }
  #canvas svg.curved-line {
    height: 50px; }
  #canvas .connect-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    position: relative; }
  #canvas connect-block {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    cursor: move; }
  #canvas .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3px; }
  #canvas .node rect {
    fill: #85bbdd; }
  #canvas .screen-label {
    margin: 0 0 0 5px;
    border: 1px solid #99D5F0;
    width: 120px;
    color: black;
    background-color: white;
    text-align: center; }
  #canvas .event {
    margin: 10px 10px 20px; }
    #canvas .event .event-area-header {
      display: -ms-flexbox;
      display: flex;
      width: 90%;
      padding: 0 10px; }
    #canvas .event.selected .event-area {
      border-color: #6CC04A; }
    #canvas .event .event-label {
      background-color: #1e428a;
      border-radius: 6px 6px 0 0;
      font-size: 14px;
      word-break: break-word;
      padding: 7px 10px 5px;
      -ms-flex-positive: 1;
          flex-grow: 1;
      display: -ms-flexbox;
      display: flex;
      margin: 0 0 0 10px;
      -ms-flex-align: center;
          align-items: center; }
    #canvas .event .event-area-error {
      color: #FF6633;
      font-size: 12px;
      font-style: italic;
      font-weight: bolder; }
    #canvas .event .event-toolbar {
      white-space: nowrap;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: end;
          align-items: flex-end;
      padding-bottom: 3px; }
      #canvas .event .event-toolbar button {
        margin: 0 1px 0 4px;
        text-align: center;
        font-size: 14px;
        padding: 0;
        color: #3aace1;
        background-color: white;
        border: 1px solid #ABABAB;
        box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.15);
        border-radius: 50%;
        width: 24px;
        height: 24px;
        overflow: hidden;
        cursor: pointer; }
        #canvas .event .event-toolbar button:hover {
          border-color: #0C82BE; }
        #canvas .event .event-toolbar button.pw-studio-blue::before {
          width: 1.4em;
          height: 1.4em;
          overflow: hidden;
          margin-right: 0; }
      #canvas .event .event-toolbar button:disabled {
        color: #99D5F0;
        cursor: default; }
        #canvas .event .event-toolbar button:disabled:hover {
          border-color: initial; }
    #canvas .event .event-area {
      border: 3px solid #1e428a;
      border-radius: 16px;
      min-width: 50%;
      min-height: 50px;
      background-color: #F8F8F8;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      -ms-flex-direction: column;
          flex-direction: column;
      padding: 10px 10px 20px;
      width: 90%; }
      #canvas .event .event-area.fake {
        background-color: yellow;
        border: 3px dotted #7C7F50; }
      #canvas .event .event-area.blank {
        border: 3px dotted rgba(30, 66, 138, 0.5);
        padding-bottom: 15px; }
        #canvas .event .event-area.blank .blank-text {
          color: #888888;
          padding: 2px; }
        #canvas .event .event-area.blank .blank-event-component {
          width: 100px;
          display: inline-block;
          text-align: left;
          margin: 5px auto 0;
          background-color: #1e428a;
          color: #fff;
          font-size: 12px;
          padding: 5px;
          border-radius: 8px; }
          #canvas .event .event-area.blank .blank-event-component .fa {
            padding: 0 6px;
            opacity: 0.7; }
      #canvas .event .event-area.code {
        min-height: inherit;
        padding: 8px;
        display: block;
        color: gray; }
        #canvas .event .event-area.code div {
          white-space: pre-wrap;
          font-family: 'Courier New', Courier, monospace;
          font-size: 12px; }
  #canvas .block {
    padding: 7px 10px;
    margin: 0px 16px;
    width: 215px;
    background-color: #0095d9;
    -ms-flex-item-align: center;
        align-self: center;
    border: 3px solid transparent; }
  #canvas .block.fake {
    background-color: yellow;
    border: 1px dotted #7C7F50; }
  #canvas .block.placeholder {
    background-color: inherit;
    border: 1px dotted black;
    height: 15px; }
  #canvas .block.selected {
    border: 3px solid #6CC04A; }
  #canvas .top-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    font-size: 14px;
    width: 40%;
    padding: 5px 5px 0px 5px; }
  #canvas .connector {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    background-color: #85bbdd;
    padding: 5px 15px 5px 15px; }
  #canvas .data-target {
    border: 1px solid greenyellow;
    background-color: #99D5F0;
    width: 40%;
    padding: 2px 2px 2px 2px; }
  #canvas .single-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between; }
  #canvas .sub-contexts {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: distribute;
        justify-content: space-around; }
  #canvas .sub-contexts-seperator {
    height: 4px;
    background-color: #0095d9;
    margin: 18px 0px 0px 0px; }
  #canvas .icon-left {
    float: left;
    margin: 0px 8px 0px 0px; }
  #canvas .icon-right {
    float: right; }
  #canvas #canvas {
    background-repeat: repeat;
    width: 1200px;
    height: 768px;
    padding: 20px 20px 10px 20px;
    z-index: -1; }
  #canvas #svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; }

floating-button.custom-event i {
  right: 20px; }

.rewrite-button {
  margin: 0px 0px 0px 20px; }

#prettydiff p {
  margin: 4px; }

#prettydiff .diff p.author {
  display: none; }

#prettydiff .diff .data li {
  padding: 0em 0.5em; }

#prettydiff .count li {
  padding: 0em 1em; }

connect-block .block-label {
  min-width: 0;
  word-wrap: break-word;
  padding-top: 3px; }

connect-block .block-icon,
connect-block .block-settings[ng-click] {
  padding: 3px 6px;
  height: -webkit-fit-content;
  height: fit-content; }

connect-block .block-settings[ng-click]:hover {
  background: #8CC1DD;
  outline: 1px solid white; }

connect-node .true-path, connect-node .success-path, connect-node .false-path, connect-node .error-path {
  position: absolute;
  top: 73px; }

connect-node .true-path, connect-node .success-path {
  color: #6CC04A; }

connect-node .false-path, connect-node .error-path {
  color: #FF6633; }

connect-node .true-path {
  left: 106px; }

connect-node .success-path {
  left: 85px; }

connect-node .false-path {
  right: 101px; }

connect-node .error-path {
  right: 108px; }

connect-node .block .clickable-icon {
  cursor: pointer; }

connect-node .block .fa-cog {
  cursor: pointer; }

connect-node .block .no-specific-settings {
  opacity: 0.7; }

.ngdialog.select-event .choose-async {
  padding-bottom: 25px; }

.ngdialog.select-event .custom-event {
  width: 40%; }

.ngdialog.connect-config select.smartux-version {
  height: 34px;
  min-width: 512px;
  font-size: 16px; }

.ngdialog.custom-event input {
  height: 30px;
  width: 300px;
  font-size: 15px; }

.ngdialog.rdbs-config #rdbs-connection-settings .label {
  text-align: right; }

.ngdialog.rdbs-config #rdbs-connection-settings .oracle-notes {
  display: block;
  height: 15px; }

.ngdialog.rdbs-config #rdbs-connection-settings .oracle-notes-bottom {
  font-size: 12px; }

.ngdialog.rdbs-config button.refresh {
  margin-left: 10px; }

.ngdialog.rdbs-config .connector-name-container {
  background: #EFEFEF;
  padding: 10px 20px;
  color: black; }
  .ngdialog.rdbs-config .connector-name-container input {
    width: -webkit-fit-content;
    width: fit-content; }

.ngdialog.rdbs-config .connection-error {
  color: #D9534F;
  padding: 15px;
  padding-bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center; }
  .ngdialog.rdbs-config .connection-error .error-label {
    font-weight: bold;
    padding-right: 5px; }

.ngdialog.rdbs-config table-selection-component .row, .ngdialog.rdbs-config table-selection-component .col {
  margin-left: 0;
  margin-right: 0; }

.ngdialog.rdbs-config table-selection-component input[type="text"] {
  width: 100%; }

.ngdialog.rdbs-config table-selection-component #table-selection-container {
  overflow: scroll;
  height: 380px; }
  .ngdialog.rdbs-config table-selection-component #table-selection-container .box {
    width: 100%;
    height: 100%; }
  .ngdialog.rdbs-config table-selection-component #table-selection-container ul {
    list-style: none; }
  .ngdialog.rdbs-config table-selection-component #table-selection-container .all-views-node, .ngdialog.rdbs-config table-selection-component #table-selection-container .all-tables-node {
    padding-left: 20px; }
  .ngdialog.rdbs-config table-selection-component #table-selection-container .description {
    font-size: 12px;
    color: #888888; }

.rest-block {
  padding-top: 4vh; }
  .rest-block .ngdialog-content {
    width: 100%; }
    .rest-block .ngdialog-content > .content {
      height: calc(100vh - 10vh - 80px);
      max-height: none;
      overflow: hidden;
      margin: 0; }
      .rest-block .ngdialog-content > .content .form-control {
        margin-bottom: 0; }
        .rest-block .ngdialog-content > .content .form-control .test-container {
          margin-left: auto; }
          .rest-block .ngdialog-content > .content .form-control .test-container .button-test {
            margin-left: 20px; }
            .rest-block .ngdialog-content > .content .form-control .test-container .button-test .fa-caret-right {
              margin: -2px 0  0 10px; }
      .rest-block .ngdialog-content > .content .block-mapping-container .associated-item > button {
        position: sticky;
        right: 0; }
    .rest-block .ngdialog-content > .buttons .button {
      margin-right: 10px; }

.rdbs-block {
  padding-top: 4vh; }
  .rdbs-block .ngdialog-content {
    width: 100%; }
    .rdbs-block .ngdialog-content > .content {
      height: calc(100vh - 10vh - 80px);
      max-height: none;
      overflow: hidden;
      margin: 0; }
      .rdbs-block .ngdialog-content > .content .form-control {
        margin-bottom: 0; }
      .rdbs-block .ngdialog-content > .content .left-pane .db-info, .rdbs-block .ngdialog-content > .content .left-pane .table-query {
        max-height: 47px;
        margin-top: 10px; }
        .rdbs-block .ngdialog-content > .content .left-pane .db-info .button-test, .rdbs-block .ngdialog-content > .content .left-pane .table-query .button-test {
          margin-left: 20px; }
          .rdbs-block .ngdialog-content > .content .left-pane .db-info .button-test .fa-caret-right, .rdbs-block .ngdialog-content > .content .left-pane .table-query .button-test .fa-caret-right {
            margin: -2px 0  0 10px; }
      .rdbs-block .ngdialog-content > .content .left-pane .container-header {
        border: 1px solid #C5C5C5; }
        .rdbs-block .ngdialog-content > .content .left-pane .container-header .title {
          text-transform: uppercase; }
      .rdbs-block .ngdialog-content > .content .left-pane > .row {
        height: 100%;
        -ms-flex-direction: column !important;
            flex-direction: column !important; }
        .rdbs-block .ngdialog-content > .content .left-pane > .row > .collapsible {
          border: 1px solid #C5C5C5;
          margin-top: 10px;
          position: relative; }
          .rdbs-block .ngdialog-content > .content .left-pane > .row > .collapsible.collapsed {
            -ms-flex: 0 0 auto;
                flex: 0 0 auto; }
            .rdbs-block .ngdialog-content > .content .left-pane > .row > .collapsible.collapsed > .content {
              display: none; }
          .rdbs-block .ngdialog-content > .content .left-pane > .row > .collapsible > .target {
            height: 47px;
            -ms-flex-align: center;
                align-items: center;
            background: #EFEFEF;
            color: #777; }
            .rdbs-block .ngdialog-content > .content .left-pane > .row > .collapsible > .target:after {
              border-color: transparent transparent transparent #0095d9; }
            .rdbs-block .ngdialog-content > .content .left-pane > .row > .collapsible > .target > .label {
              -ms-flex-positive: 1;
                  flex-grow: 1;
              padding-right: 15px;
              text-align: right; }
          .rdbs-block .ngdialog-content > .content .left-pane > .row > .collapsible > .marker:checked ~ .content {
            height: calc(100% - 47px);
            position: absolute;
            width: 100%;
            border-top: 1px solid #C5C5C5;
            display: -ms-flexbox;
            display: flex;
            overflow: auto; }
      .rdbs-block .ngdialog-content > .content .left-pane .limit-container {
        max-height: 47px;
        border: 1px solid #C5C5C5;
        border-top: none; }
        .rdbs-block .ngdialog-content > .content .left-pane .limit-container > .row {
          height: 100%; }
      .rdbs-block .ngdialog-content > .content .left-pane .db-info {
        padding: 5px 0;
        margin: 0; }
        .rdbs-block .ngdialog-content > .content .left-pane .db-info > .row > div:last-child {
          display: -ms-flexbox;
          display: flex;
          -ms-flex-pack: end;
              justify-content: flex-end; }
        .rdbs-block .ngdialog-content > .content .left-pane .db-info > .row a.label {
          color: #0095d9;
          cursor: pointer; }
      .rdbs-block .ngdialog-content > .content .left-pane .table-query {
        border: 1px solid #0095d9; }
        .rdbs-block .ngdialog-content > .content .left-pane .table-query > .row {
          height: 100%;
          -ms-flex-align: center;
              align-items: center; }
        .rdbs-block .ngdialog-content > .content .left-pane .table-query .query-method {
          -ms-flex: 0 0 150px;
              flex: 0 0 150px; }
      .rdbs-block .ngdialog-content > .content .left-pane .sql-input-container .params-block {
        padding: 5px;
        overflow-x: hidden; }
        .rdbs-block .ngdialog-content > .content .left-pane .sql-input-container .params-block > .row {
          padding: 2px; }
        .rdbs-block .ngdialog-content > .content .left-pane .sql-input-container .params-block .button {
          line-height: 1; }
        .rdbs-block .ngdialog-content > .content .left-pane .sql-input-container .params-block .params-list {
          margin: 0; }
          .rdbs-block .ngdialog-content > .content .left-pane .sql-input-container .params-block .params-list token-text-input {
            padding: 0; }
      .rdbs-block .ngdialog-content > .content .left-pane .sql-input-container .editor-view {
        padding-right: 0; }
        .rdbs-block .ngdialog-content > .content .left-pane .sql-input-container .editor-view > .monaco-container {
          border-left: 1px solid #C5C5C5; }
      .rdbs-block .ngdialog-content > .content .left-pane .filter-container > .content .content-inner {
        padding: 5px 0; }
      .rdbs-block .ngdialog-content > .content .left-pane .filter-container > .content query-node-detail {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
        .rdbs-block .ngdialog-content > .content .left-pane .filter-container > .content query-node-detail > .row {
          padding: 5px 0; }
      .rdbs-block .ngdialog-content > .content .left-pane .filter-container > .content filter-builder span.item {
        padding: 5px;
        padding-left: 40px; }
      .rdbs-block .ngdialog-content > .content .left-pane .input-columns-container .content-inner {
        margin-bottom: 5px;
        margin-top: 5px; }
      .rdbs-block .ngdialog-content > .content .left-pane .input-columns-container .input-column > .row {
        height: 37px;
        -ms-flex-align: center;
            align-items: center; }
        .rdbs-block .ngdialog-content > .content .left-pane .input-columns-container .input-column > .row > .label {
          padding: 0; }
      .rdbs-block .ngdialog-content > .content .left-pane .output-response-container > .content {
        position: relative; }
      .rdbs-block .ngdialog-content > .content .block-mapping-container .associated-item > button {
        position: sticky;
        right: 0; }
    .rdbs-block .ngdialog-content > .buttons .button {
      margin-right: 10px; }

.ngdialog.rest-config .ngdialog-content {
  width: 640px; }

.ngdialog.rest-config .buttons button#delete-connector {
  width: 160px; }

.ngdialog.rest-config #settings-column #settings-tree-box {
  border: 1px solid #3aace1;
  background-color: white;
  padding: 10px;
  display: -ms-flexbox;
  display: flex; }
  .ngdialog.rest-config #settings-column #settings-tree-box .tree-upper-button {
    font-size: 15px;
    outline: none;
    border: none;
    color: #0095d9;
    outline: none;
    height: 32px;
    width: 35px;
    cursor: pointer; }
    .ngdialog.rest-config #settings-column #settings-tree-box .tree-upper-button.active {
      box-sizing: border-box;
      border: 2px inset #ccc;
      background: #C5C5C5; }
  .ngdialog.rest-config #settings-column #settings-tree-box > ul {
    overflow: auto; }

.ngdialog.rest-config #settings-column span[ng-include="itemTemplate"] {
  position: absolute;
  width: 65%; }

.ngdialog.rest-config .collapsible-section > .target {
  height: 32px;
  line-height: 32px;
  display: block;
  border: 1px solid #C5C5C5;
  -ms-flex-align: center;
      align-items: center;
  background: #EFEFEF; }

.ngdialog.rest-config .collapsible-section > .content {
  padding: 15px;
  background-color: #EFEFEF;
  border: 1px solid #C5C5C5;
  border-top: none; }

.ngdialog.rest-config rest-auth-options .auth-form-row {
  display: -ms-flexbox;
  display: flex; }
  .ngdialog.rest-config rest-auth-options .auth-form-row > label {
    color: #666666;
    width: 120px;
    line-height: 32px; }

.ngdialog.add-token .ngdialog-content {
  height: 50vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }
  .ngdialog.add-token .ngdialog-content > .content {
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    margin: 0px 10px 10px 10px;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden; }
    .ngdialog.add-token .ngdialog-content > .content > .box {
      width: 100%;
      overflow: scroll; }
  .ngdialog.add-token .ngdialog-content > .heading {
    -ms-flex-positive: 0;
        flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0; }
  .ngdialog.add-token .ngdialog-content > .buttons {
    -ms-flex-positive: 0;
        flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0; }

.isolated-transaction-settings #transaction-level-select {
  height: 35px;
  margin-left: 10px; }

.view-diffs {
  padding-top: 4vh; }
  .view-diffs .ngdialog-content {
    width: 100%; }

floating-button i {
  position: fixed;
  font-size: 17px !important;
  line-height: 40px !important;
  text-align: center;
  background-color: #0095d9;
  color: #F8F8F8;
  border: 1px solid #0095d9;
  box-shadow: 2px 2px 2px #ABABAB;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  cursor: pointer; }

.addon-script-panel .tabs > button {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  cursor: default; }
  .addon-script-panel .tabs > button > .fa {
    font-size: 14px;
    margin: 0 13px 0 0;
    cursor: pointer; }
    .addon-script-panel .tabs > button > .fa.disabled {
      opacity: 0.4;
      cursor: not-allowed; }
    .addon-script-panel .tabs > button > .fa:not(.disabled):hover {
      opacity: 0.7; }
  .addon-script-panel .tabs > button:active, .addon-script-panel .tabs > button:hover {
    background: #0095d9; }

.addon-script-output-container {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-direction: column;
      flex-direction: column;
  background-color: black; }
  .addon-script-output-container .output-logs {
    -ms-flex-positive: 1;
        flex-grow: 1;
    margin: 0 0 4px;
    color: white;
    background-color: #ffffff;
    font: 400 11px monospace;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    overflow: auto; }
    .addon-script-output-container .output-logs *::selection {
      background-color: #2383ef; }
    .addon-script-output-container .output-logs > p {
      display: -ms-flexbox;
      display: flex;
      margin: 0; }
      .addon-script-output-container .output-logs > p:first-child {
        padding-top: 5px; }
      .addon-script-output-container .output-logs > p:last-child {
        padding-bottom: 5px; }
      .addon-script-output-container .output-logs > p.debug-level {
        color: #FFFFAA; }
      .addon-script-output-container .output-logs > p.trace-level {
        color: #6CC04A; }
      .addon-script-output-container .output-logs > p span:first-child {
        padding: 0 4px 0 1px;
        color: #a6a6a6;
        text-align: right; }
    .addon-script-output-container .output-logs > .fa-spin {
      font-size: 16px;
      margin: 8px 24px; }

.image-manager > .ngdialog-content > .content {
  border: 1px solid #ABABAB;
  position: absolute;
  top: 70px;
  bottom: 65px;
  left: 20px;
  right: 20px;
  padding: 10px; }
  .image-manager > .ngdialog-content > .content h2 {
    line-height: 1em;
    padding: 15px 10px 10px 5px;
    border-bottom: 1px solid #C5C5C5;
    margin-bottom: 10px; }
  .image-manager > .ngdialog-content > .content .thumbnail {
    width: 160px;
    height: 160px;
    border: 1px solid #ABABAB;
    box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.15);
    margin: 10px;
    padding: 10px;
    float: left;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: 0.15s ease-out; }
    .image-manager > .ngdialog-content > .content .thumbnail img {
      height: 130px;
      width: 100%;
      object-fit: contain; }
    .image-manager > .ngdialog-content > .content .thumbnail > .image-header {
      margin: -10px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-line-pack: start;
          align-content: flex-start;
      position: relative;
      padding: 0 0 0 2px;
      box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.15);
      transition: 0.15s ease-out;
      background: rgba(171, 171, 171, 0.8);
      z-index: 10; }
      .image-manager > .ngdialog-content > .content .thumbnail > .image-header > .title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        color: #fff;
        font-size: 12px;
        padding: 6px 2px 0 3px;
        -ms-flex-positive: 2;
            flex-grow: 2; }
      .image-manager > .ngdialog-content > .content .thumbnail > .image-header > .control-item {
        -ms-flex: 1;
            flex: 1;
        height: 26px; }
        .image-manager > .ngdialog-content > .content .thumbnail > .image-header > .control-item > button.fa {
          float: right;
          background: rgba(171, 171, 171, 0.8);
          color: #fff;
          line-height: 26px;
          padding: 0 8px 0 8px;
          font-size: 14px;
          opacity: 0.8; }
          .image-manager > .ngdialog-content > .content .thumbnail > .image-header > .control-item > button.fa:hover {
            opacity: 1; }
    .image-manager > .ngdialog-content > .content .thumbnail.selected {
      cursor: default;
      border-color: #0C82BE;
      background-color: #E5F1F8;
      box-shadow: 0 0 40px #888899;
      transition: 0.15s ease-out; }
      .image-manager > .ngdialog-content > .content .thumbnail.selected > .image-header {
        visibility: hidden;
        opacity: 0;
        transition: 0.15s ease-out; }
    .image-manager > .ngdialog-content > .content .thumbnail.upload {
      border-image-slice: 10 10 10 10;
      border-image-width: 10px 10px 10px 10px;
      border-image-outset: 0 0 0 0;
      border-image-repeat: round round;
      border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAMAAAAocOYLAAAADFBMVEUAAAAMgr4Mgr7////zfk7qAAAAAnRSTlMAAHaTzTgAAAA0SURBVHgBY2CCAEYGBIsRSYwBPyAsz0hAnmlA5Rkp9yGlukfDjxEKsLBGw4+wPCy/YmUBAIKWAM2knPDIAAAAAElFTkSuQmCC"); }
      .image-manager > .ngdialog-content > .content .thumbnail.upload > .fa {
        color: #0C82BE;
        display: block;
        text-align: center;
        font-size: 36px;
        margin: 22px 0; }
      .image-manager > .ngdialog-content > .content .thumbnail.upload > .content {
        display: block;
        text-align: center;
        color: #888888; }

.edit-screen-models .ngdialog-content > .content, .view-screen-models .ngdialog-content > .content {
  max-height: 65vh;
  height: 65vh; }
  .edit-screen-models .ngdialog-content > .content .tab .title, .view-screen-models .ngdialog-content > .content .tab .title {
    max-width: none; }
  .edit-screen-models .ngdialog-content > .content .tab .content, .view-screen-models .ngdialog-content > .content .tab .content {
    padding-top: 5px; }
    .edit-screen-models .ngdialog-content > .content .tab .content .row, .view-screen-models .ngdialog-content > .content .tab .content .row {
      height: 100%; }
      .edit-screen-models .ngdialog-content > .content .tab .content .row .col .box-nested, .view-screen-models .ngdialog-content > .content .tab .content .row .col .box-nested {
        border: 1px solid #ABABAB;
        height: 100%;
        overflow: auto; }

.ngdialog.set-data {
  color: #333; }
  .ngdialog.set-data > .ngdialog-content {
    width: 85vw;
    min-width: 1000px; }
    .ngdialog.set-data > .ngdialog-content > .heading {
      display: block;
      border-bottom: 5px solid #0095d9;
      height: -webkit-fit-content;
      height: fit-content; }
      .ngdialog.set-data > .ngdialog-content > .heading.show-tabs {
        height: 90px; }
      .ngdialog.set-data > .ngdialog-content > .heading h1 {
        display: block;
        margin-left: 10px; }
    .ngdialog.set-data > .ngdialog-content .tabs {
      margin-top: 4px;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      -ms-flex-positive: 0;
          flex-grow: 0; }
      .ngdialog.set-data > .ngdialog-content .tabs .tab label.target {
        border-bottom: none;
        min-width: 120px; }
    .ngdialog.set-data > .ngdialog-content > .content {
      height: 85vh;
      overflow: hidden;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column; }
      .ngdialog.set-data > .ngdialog-content > .content .from-to-headers {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
        display: -ms-flexbox;
        display: flex; }
        .ngdialog.set-data > .ngdialog-content > .content .from-to-headers .left, .ngdialog.set-data > .ngdialog-content > .content .from-to-headers .right {
          -ms-flex-positive: 1;
              flex-grow: 1;
          -ms-flex-negative: 1;
              flex-shrink: 1;
          width: 50%; }
        .ngdialog.set-data > .ngdialog-content > .content .from-to-headers .right {
          margin-left: 5px; }
        .ngdialog.set-data > .ngdialog-content > .content .from-to-headers .left {
          margin-right: 5px; }
      .ngdialog.set-data > .ngdialog-content > .content .trees-container {
        -ms-flex-positive: 1;
            flex-grow: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
        height: 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly; }
        .ngdialog.set-data > .ngdialog-content > .content .trees-container > .left, .ngdialog.set-data > .ngdialog-content > .content .trees-container > .right {
          -ms-flex-positive: 1;
              flex-grow: 1;
          -ms-flex-negative: 1;
              flex-shrink: 1;
          width: 50%; }
          .ngdialog.set-data > .ngdialog-content > .content .trees-container > .left > .box, .ngdialog.set-data > .ngdialog-content > .content .trees-container > .right > .box {
            padding: 2px;
            height: 100%; }
            .ngdialog.set-data > .ngdialog-content > .content .trees-container > .left > .box block-mapping-tree, .ngdialog.set-data > .ngdialog-content > .content .trees-container > .right > .box block-mapping-tree {
              height: 100%; }
        .ngdialog.set-data > .ngdialog-content > .content .trees-container > .right {
          margin-left: 5px; }
        .ngdialog.set-data > .ngdialog-content > .content .trees-container > .left {
          margin-right: 5px; }

.condition-builder .ngdialog-content {
  color: #333;
  font-size: 16px;
  width: 75%;
  overflow: scroll; }
  .condition-builder .ngdialog-content tr.logicOperators {
    color: #69b0dc;
    font-size: 16px;
    height: 50px; }
  .condition-builder .ngdialog-content tr td {
    padding-bottom: 15px; }
  .condition-builder .ngdialog-content tr .missing-items {
    color: #FF6633;
    font-size: 12px;
    font-style: italic;
    position: absolute;
    left: 60px;
    margin-top: 25px; }
  .condition-builder .ngdialog-content .custom-dropdown, .condition-builder .ngdialog-content input[type=text] {
    position: relative;
    display: inline-block;
    margin: 5px 0 0 0; }
    .condition-builder .ngdialog-content .custom-dropdown select, .condition-builder .ngdialog-content input[type=text] select {
      padding: .5em;
      padding-right: 2.5em;
      text-overflow: '';
      -moz-appearance: none;
      -webkit-appearance: none; }
      .condition-builder .ngdialog-content .custom-dropdown select::-ms-expand, .condition-builder .ngdialog-content input[type=text] select::-ms-expand {
        display: none; }
    .condition-builder .ngdialog-content .custom-dropdown::before, .condition-builder .ngdialog-content .custom-dropdown::after, .condition-builder .ngdialog-content input[type=text]::before, .condition-builder .ngdialog-content input[type=text]::after {
      content: "";
      position: absolute;
      pointer-events: none; }
    .condition-builder .ngdialog-content .custom-dropdown::after, .condition-builder .ngdialog-content input[type=text]::after {
      content: "\25BC";
      height: 1em;
      font-size: .625em;
      line-height: 1;
      right: 1.2em;
      top: 50%;
      margin-top: -.5em;
      color: #3d94d4; }
    .condition-builder .ngdialog-content .custom-dropdown::before, .condition-builder .ngdialog-content input[type=text]::before {
      width: 2em;
      right: 0;
      top: 0;
      bottom: 0;
      border: 1px solid #dfdfdf; }
  .condition-builder .ngdialog-content .custom-radio {
    display: inline;
    margin: 12px; }
    .condition-builder .ngdialog-content .custom-radio label {
      position: relative;
      padding-left: 25px;
      margin-right: 15px; }
    .condition-builder .ngdialog-content .custom-radio input {
      display: none; }
    .condition-builder .ngdialog-content .custom-radio label:before {
      content: "";
      width: 16px;
      height: 16px;
      position: absolute;
      left: 0;
      bottom: 1px;
      background-color: #fff;
      border: 1px solid #d1d1d1;
      border-radius: 8px; }
    .condition-builder .ngdialog-content .custom-radio input:checked + label:before {
      content: "\2022";
      color: #69b0dc;
      font-size: 40px;
      text-align: center;
      line-height: 16px; }
  .condition-builder .ngdialog-content select, .condition-builder .ngdialog-content input[type=text] {
    width: 150px;
    height: 36px;
    background-color: white;
    border-radius: 0px;
    border: 1px solid #eeeeee;
    font-size: 16px;
    margin-left: 5px; }
    .condition-builder .ngdialog-content select.filler, .condition-builder .ngdialog-content input[type=text].filler {
      color: #FF6633; }
  .condition-builder .ngdialog-content input[type=radio] {
    margin: 1em;
    width: 25px;
    height: 25px;
    background-color: white; }
  .condition-builder .ngdialog-content .content {
    margin-left: 2em; }
  .condition-builder .ngdialog-content hr {
    width: 95%;
    border-top: 0.25px solid #d1d1d1;
    margin-top: 0; }
  .condition-builder .ngdialog-content .addDelete {
    display: inline;
    margin-left: 5px; }
    .condition-builder .ngdialog-content .addDelete button {
      background-color: #3d94d3;
      color: white;
      font-size: 1.25em;
      border: none;
      border-radius: 4px;
      margin-left: 10px;
      width: 1.25em; }
  .condition-builder .ngdialog-content .buttons {
    margin-top: 1em; }
    .condition-builder .ngdialog-content .buttons button.clear {
      color: #3aace1; }
    .condition-builder .ngdialog-content .buttons button {
      font-weight: normal;
      font-size: 14px;
      background-color: #0095d9; }

.connect-edit-settings .ngdialog-content {
  -webkit-user-select: text;
      -ms-user-select: text;
          user-select: text; }
  .connect-edit-settings .ngdialog-content .label {
    font-size: 18px;
    display: inline-block;
    margin-right: 20px; }
    .connect-edit-settings .ngdialog-content .label .text-red {
      color: red; }
  .connect-edit-settings .ngdialog-content input {
    min-width: 512px;
    min-height: 32px;
    font-size: 16px;
    color: #444444;
    margin-top: 4px;
    margin-bottom: 4px; }
  .connect-edit-settings .ngdialog-content .description {
    color: #444444;
    font-size: 14px;
    margin: 5px 0px 25px 0px;
    font-style: italic;
    text-align: left; }

.trigger-builder .ngdialog-content {
  width: 85vw;
  color: #333;
  font-size: 16px; }
  .trigger-builder .ngdialog-content hr {
    width: 95%;
    border-top: 0.25px solid #d1d1d1;
    margin-top: 0; }
  .trigger-builder .ngdialog-content h1 {
    color: #666666;
    font-size: 1.1em; }
  .trigger-builder .ngdialog-content h1.innerHeader {
    margin: -5px 0 0 2.5em;
    display: inline-block; }
  .trigger-builder .ngdialog-content .condition-builder, .trigger-builder .ngdialog-content .trigger-name, .trigger-builder .ngdialog-content .event-selection {
    display: inline-block;
    margin-left: 2.5em;
    max-height: 21vh;
    vertical-align: top; }
  .trigger-builder .ngdialog-content .event-selection {
    margin-left: 25px; }
  .trigger-builder .ngdialog-content .trigger-name h1, .trigger-builder .ngdialog-content .trigger-name input {
    display: inline-block; }
  .trigger-builder .ngdialog-content .trigger-name input[type=text] {
    padding: 0 0.5em 0 0.5em;
    margin-left: 2em;
    width: 225px; }
  .trigger-builder .ngdialog-content .eventDropdown {
    width: 250px;
    border-radius: 1px; }
  .trigger-builder .ngdialog-content .addDelete {
    display: inline;
    margin-left: 5px; }
    .trigger-builder .ngdialog-content .addDelete button {
      background-color: #3d94d3;
      color: white;
      font-size: 1.25em;
      border: none;
      border-radius: 4px;
      margin-left: 10px;
      width: 1.25em;
      margin-bottom: 5px; }
  .trigger-builder .ngdialog-content .custom-radio {
    display: inline;
    margin: 12px; }
    .trigger-builder .ngdialog-content .custom-radio label {
      position: relative;
      padding-left: 25px;
      margin-right: 15px; }
    .trigger-builder .ngdialog-content .custom-radio input {
      display: none; }
    .trigger-builder .ngdialog-content .custom-radio label:before {
      content: "";
      width: 16px;
      height: 16px;
      position: absolute;
      left: 0;
      bottom: 1px;
      background-color: #fff;
      border: 1px solid #d1d1d1;
      border-radius: 8px; }
    .trigger-builder .ngdialog-content .custom-radio input:checked + label:before {
      content: "\2022";
      color: #69b0dc;
      font-size: 40px;
      text-align: center;
      line-height: 16px; }
  .trigger-builder .ngdialog-content .condition-builder > table {
    margin-top: 5px; }
  .trigger-builder .ngdialog-content .condition-builder {
    margin-left: 50px; }
    .trigger-builder .ngdialog-content .condition-builder button {
      margin-top: -25px; }
  .trigger-builder .ngdialog-content .custom-dropdown, .trigger-builder .ngdialog-content input[type=text] {
    display: inline;
    position: relative;
    display: inline-block;
    margin: 0 15px 10px 0; }
    .trigger-builder .ngdialog-content .custom-dropdown select, .trigger-builder .ngdialog-content input[type=text] select {
      padding: .5em;
      padding-right: 2.5em;
      text-overflow: '';
      -moz-appearance: none;
      -webkit-appearance: none; }
      .trigger-builder .ngdialog-content .custom-dropdown select::-ms-expand, .trigger-builder .ngdialog-content input[type=text] select::-ms-expand {
        display: none; }
    .trigger-builder .ngdialog-content .custom-dropdown::before, .trigger-builder .ngdialog-content .custom-dropdown::after, .trigger-builder .ngdialog-content input[type=text]::before, .trigger-builder .ngdialog-content input[type=text]::after {
      content: "";
      position: absolute;
      pointer-events: none; }
    .trigger-builder .ngdialog-content .custom-dropdown::after, .trigger-builder .ngdialog-content input[type=text]::after {
      content: "\25BC";
      height: 1em;
      font-size: .625em;
      line-height: 1;
      right: 1.2em;
      top: 50%;
      margin-top: -.5em;
      color: #3d94d4; }
    .trigger-builder .ngdialog-content .custom-dropdown::before, .trigger-builder .ngdialog-content input[type=text]::before {
      width: 2em;
      right: 0;
      top: 0;
      bottom: 0;
      border: 1px solid #dfdfdf; }
  .trigger-builder .ngdialog-content select, .trigger-builder .ngdialog-content input[type=text] {
    width: 175px;
    height: 36px;
    background-color: white;
    border-radius: 0px;
    border: 1px solid #dfdfdf;
    font-size: 16px; }
  .trigger-builder .ngdialog-content tr.logicOperators {
    color: #69b0dc;
    font-size: 16px; }
    .trigger-builder .ngdialog-content tr.logicOperators td {
      padding-bottom: 16px; }
  .trigger-builder .ngdialog-content .buttons button.clear {
    color: #3aace1; }
  .trigger-builder .ngdialog-content .buttons button {
    font-weight: normal;
    font-size: 14px;
    background-color: #0095d9; }

.select-screen .ngdialog-content {
  width: 35vw; }
  .select-screen .ngdialog-content .content {
    margin-bottom: 1em; }

.code-block {
  color: #333; }
  .code-block .ngdialog-content > .content {
    max-height: 65vh;
    height: 50vh;
    margin: 0 auto; }
    .code-block .ngdialog-content > .content #editor-view {
      width: 95%;
      height: 45vh;
      border-radius: 0px;
      border: 3px solid #eeeeee;
      margin-left: 1em;
      padding-top: 1em; }

.ngdialog.create-screen > .ngdialog-content > .secondary-content {
  padding: 0;
  height: calc(100% - 195px);
  overflow: hidden; }
  .ngdialog.create-screen > .ngdialog-content > .secondary-content .row {
    height: 100%; }
  .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane {
    padding: 0;
    background: #fff;
    border-right: 1px solid #C5C5C5;
    height: 100%;
    display: block; }
    .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane .heading {
      width: 100%;
      height: 30px;
      background: #D7D7D7;
      padding: 6px 15px;
      border-bottom: 1px solid #C5C5C5; }
    .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane .templates-tree .tree, .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane .apptemplates-tree .tree, .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane .apps-tree .tree {
      height: calc(100% - 31px);
      overflow: auto; }
    .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane .templates-tree {
      height: 40%; }
    .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane .apptemplates-tree, .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane .apps-tree {
      height: 30%; }
      .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane .apptemplates-tree .heading, .ngdialog.create-screen > .ngdialog-content > .secondary-content .left-pane .apps-tree .heading {
        border-top: 1px solid #C5C5C5; }
  .ngdialog.create-screen > .ngdialog-content > .secondary-content .middle-pane {
    height: 100%;
    padding: 0; }
    .ngdialog.create-screen > .ngdialog-content > .secondary-content .middle-pane .heading {
      height: 50px;
      padding: 17px 20px;
      font-size: 18px;
      color: #444444; }
      .ngdialog.create-screen > .ngdialog-content > .secondary-content .middle-pane .heading > span {
        line-height: 32px; }
      .ngdialog.create-screen > .ngdialog-content > .secondary-content .middle-pane .heading .search input {
        border-radius: 0;
        border-color: #C5C5C5; }
    .ngdialog.create-screen > .ngdialog-content > .secondary-content .middle-pane .screens-list {
      overflow: auto;
      height: calc(100% - 50px);
      margin-top: 15px; }
      .ngdialog.create-screen > .ngdialog-content > .secondary-content .middle-pane .screens-list .cards {
        margin-top: -15px;
        padding-top: 2px; }
      .ngdialog.create-screen > .ngdialog-content > .secondary-content .middle-pane .screens-list .card .title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
  .ngdialog.create-screen > .ngdialog-content > .secondary-content .right-pane {
    background: #fff;
    border-left: 1px solid #C5C5C5;
    height: 100%; }
    .ngdialog.create-screen > .ngdialog-content > .secondary-content .right-pane .heading {
      height: 50px;
      padding: 15px 20px;
      font-size: 18px;
      color: #444444; }
    .ngdialog.create-screen > .ngdialog-content > .secondary-content .right-pane .screen-preview {
      overflow: auto;
      height: calc(100% - 50px); }
      .ngdialog.create-screen > .ngdialog-content > .secondary-content .right-pane .screen-preview .preview {
        height: 340px; }
        .ngdialog.create-screen > .ngdialog-content > .secondary-content .right-pane .screen-preview .preview .scale-block {
          width: 100%;
          height: 100%; }
          .ngdialog.create-screen > .ngdialog-content > .secondary-content .right-pane .screen-preview .preview .scale-block iframe {
            margin: 0 auto;
            border: 1px solid #888888;
            display: block; }
        .ngdialog.create-screen > .ngdialog-content > .secondary-content .right-pane .screen-preview .preview.phone-portrait {
          height: calc(100% - 50px); }
          .ngdialog.create-screen > .ngdialog-content > .secondary-content .right-pane .screen-preview .preview.phone-portrait iframe {
            width: 100%;
            height: 100%; }
      .ngdialog.create-screen > .ngdialog-content > .secondary-content .right-pane .screen-preview .text {
        color: #444444;
        padding: 15px 8px 8px; }

.app-styles .ngdialog-content > .content > .subtitle a {
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  padding-left: 5px;
  vertical-align: middle; }

.app-styles .ngdialog-content > .content > .row {
  border: 1px solid #ABABAB;
  padding: 10px;
  margin: 0; }

.app-styles .ngdialog-content > .content .col spectrum-colorpicker {
  margin-bottom: 5px; }

.app-styles .ngdialog-content > .content .col .description {
  color: #444444;
  padding-top: 5px;
  text-align: right; }

.app-styles .ngdialog-content > .content .col.color-picker {
  margin: auto auto;
  text-align: center; }

.app-styles .ngdialog-content > .content .col .label {
  color: #444444;
  line-height: 27px;
  margin-right: 15px;
  white-space: nowrap;
  margin-left: 10px; }

.app-styles .ngdialog-content > .content .sp-picker-container > .sp-input-container > input {
  background: #fff; }

.app-styles .ngdialog-content > .content .sp-replacer {
  margin: 0 0 2px;
  border: solid 1px #888888;
  background: #fff; }
  .app-styles .ngdialog-content > .content .sp-replacer:hover {
    border: solid 1px #888888;
    background: #fff; }

.app-styles .ngdialog-content > .content .selected .sp-replacer {
  border-color: #1E6FAB;
  background-color: #8CC1DD; }
  .app-styles .ngdialog-content > .content .selected .sp-replacer:after {
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float: left;
    font-size: 10px;
    content: '►'; }

.app-styles .ngdialog-content > .content .selected .sp-dd {
  display: none; }

.app-styles .ngdialog-content > .content .spectrum-disabled {
  pointer-events: none; }
  .app-styles .ngdialog-content > .content .spectrum-disabled .sp-picker-container > .sp-input-container > input {
    background: #EFEFEF; }

.data-binding .ngdialog-content > .content > .row .col .box-nested {
  padding: 10px;
  border: 1px solid #ABABAB;
  overflow: auto;
  box-sizing: border-box;
  height: calc(100vh - 16vh - 160px); }

.method-binding .box-nested {
  padding: 10px;
  border: 1px solid #ABABAB;
  overflow: auto;
  box-sizing: border-box;
  height: calc(100vh - 16vh - 160px); }

.method-binding .box-options .row {
  margin-bottom: 15px;
  min-height: 20px;
  -ms-flex-align: center;
      align-items: center; }

.method-binding .box-options .options-box-checkbox {
  -ms-flex-positive: 0;
      flex-grow: 0;
  padding-right: 0; }
  .method-binding .box-options .options-box-checkbox > * {
    margin: 0; }

.method-binding .box-options .short-input {
  width: 50px;
  margin-left: 25px; }

.method-binding .box-options input[type="text"] {
  display: inline-block;
  margin-top: 5px; }

.ngdialog.new-user > .ngdialog-content .msg-error, .ngdialog.change-password > .ngdialog-content .msg-error {
  color: red;
  font-size: 10px;
  margin-top: 10px; }

.ngdialog.edit-user > .ngdialog-content .change-button {
  margin-top: 5px; }

.truncate-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; }

.select-icon > .ngdialog-content > .content {
  border: 1px solid #ABABAB;
  position: absolute;
  top: 70px;
  bottom: 65px;
  left: 20px;
  right: 20px;
  padding: 0 10px 10px; }
  .select-icon > .ngdialog-content > .content h2 {
    line-height: 1em;
    padding: 15px 10px 10px 5px;
    border-bottom: 1px solid #C5C5C5;
    margin-bottom: 10px; }
  .select-icon > .ngdialog-content > .content .icon-wrap {
    float: left;
    width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 26px;
    padding: 10px 15px;
    color: #333;
    border-radius: 4px; }
    .select-icon > .ngdialog-content > .content .icon-wrap:hover {
      background: #E5F1F8;
      cursor: pointer; }
    .select-icon > .ngdialog-content > .content .icon-wrap.selected {
      color: #fff;
      background: #0C82BE;
      cursor: default; }
    .select-icon > .ngdialog-content > .content .icon-wrap .icon {
      display: inline-block;
      font-size: 26px;
      width: 26px;
      text-align: center;
      margin-right: 15px;
      vertical-align: top; }
    .select-icon > .ngdialog-content > .content .icon-wrap .fa {
      display: inline-block;
      font-size: 22px;
      width: 26px;
      text-align: center;
      margin-right: 15px;
      vertical-align: middle; }

.ngdialog.connect-screens [tree-node="child"] {
  padding-left: 20px;
  color: #ABABAB; }
  .ngdialog.connect-screens [tree-node="child"] i {
    color: #ABABAB !important; }

.preview-on-device .ngdialog-content {
  width: 540px; }
  .preview-on-device .ngdialog-content .content .qr-code-container {
    text-align: center;
    margin-top: 20px; }
  .preview-on-device .ngdialog-content .content > p {
    padding: 5px 10px;
    margin-bottom: 0;
    line-height: 2em; }

.project-form-plugin-option-array .ngdialog-content .button.row-button {
  margin-top: 0;
  margin-left: 5px; }

.project-form-plugin-option-array .ngdialog-content .button.col-button {
  margin-top: 0;
  margin-left: 5px; }

.bound-or-constant-mapping .ngdialog-content .heading {
  display: block; }
  .bound-or-constant-mapping .ngdialog-content .heading h1 {
    font-weight: bold; }

.bound-or-constant-mapping .ngdialog-content .radio-container {
  display: inline;
  position: relative;
  padding-left: 35px;
  margin-bottom: 22px;
  margin-right: 25px;
  cursor: pointer;
  font-size: 17px;
  line-height: 31px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .bound-or-constant-mapping .ngdialog-content .radio-container > .property-radio {
    position: absolute;
    opacity: 0;
    cursor: pointer; }
    .bound-or-constant-mapping .ngdialog-content .radio-container > .property-radio:checked ~ .radio-check {
      background-color: #F8F8F8; }
      .bound-or-constant-mapping .ngdialog-content .radio-container > .property-radio:checked ~ .radio-check:after {
        display: block; }
  .bound-or-constant-mapping .ngdialog-content .radio-container > .radio-check {
    margin-top: 5px;
    margin-right: 10px;
    margin-left: 5px;
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #F8F8F8;
    border: 1px solid #999;
    border-radius: 50%; }
    .bound-or-constant-mapping .ngdialog-content .radio-container > .radio-check:after {
      content: "";
      position: absolute;
      display: none;
      top: 2px;
      left: 2px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #3aace1; }

.bound-or-constant-mapping .ngdialog-content > .content {
  height: calc(100vh - 16vh - 128px); }
  .bound-or-constant-mapping .ngdialog-content > .content > .row form {
    margin-top: 5px; }
  .bound-or-constant-mapping .ngdialog-content > .content > .row .col .box-nested {
    padding: 10px;
    overflow: auto;
    box-sizing: border-box;
    height: calc(100vh - 16vh - 223px);
    border: 1px solid #ABABAB; }
    .bound-or-constant-mapping .ngdialog-content > .content > .row .col .box-nested.no-border {
      border: none; }
  .bound-or-constant-mapping .ngdialog-content > .content > .row .col .tab {
    width: 100%; }
    .bound-or-constant-mapping .ngdialog-content > .content > .row .col .tab .box-nested {
      height: calc(100vh - 16vh - 251px); }

.ngdialog.project-form {
  padding-top: 3vh; }
  .ngdialog.project-form .app-icon {
    height: 35px;
    display: inline-block;
    float: left; }
    .ngdialog.project-form .app-icon img {
      height: 35px;
      object-fit: contain; }
    .ngdialog.project-form .app-icon + .label {
      font-size: 14px;
      padding: 0 10px;
      max-width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #666666; }
  .ngdialog.project-form .ngdialog-overlay {
    pointer-events: none; }
  .ngdialog.project-form .ngdialog-content {
    width: 800px; }
    .ngdialog.project-form .ngdialog-content .heading.ng-tabs {
      height: 45px;
      padding-top: 10px; }
    .ngdialog.project-form .ngdialog-content .form {
      margin: 0 0; }
      .ngdialog.project-form .ngdialog-content .form .form-control {
        margin-bottom: 8px; }
      .ngdialog.project-form .ngdialog-content .form .layouts-list > .layout-type {
        margin: 10px 10px 0 0; }
    .ngdialog.project-form .ngdialog-content > .content {
      padding: 10px 20px 0 20px; }
    .ngdialog.project-form .ngdialog-content > .secondary-content {
      min-height: 50px;
      max-height: calc(94vh - 275px); }
    .ngdialog.project-form .ngdialog-content statusbar-background {
      display: block;
      margin: 5px 5px 0 0; }

constant-data-mapping textarea {
  height: 200px;
  width: 100%;
  max-width: 100%;
  font-size: 15px; }

constant-data-mapping .options-container .sub-title {
  margin-bottom: 10px; }

constant-data-mapping .options-container .option-row {
  margin-top: 10px; }
  constant-data-mapping .options-container .option-row .option-input {
    height: 30px;
    width: 300px;
    max-width: 45%;
    font-size: 15px;
    margin-right: 30px; }
  constant-data-mapping .options-container .option-row .value-input {
    height: 30px;
    width: 300px;
    max-width: 45%;
    font-size: 15px; }

constant-data-mapping .options-container .add-remove-buttons {
  float: right;
  margin-top: 10px;
  margin-right: 10px; }

device-view > li {
  height: 50px !important; }
  device-view > li > span {
    line-height: 20px !important;
    padding: 10px 20px 0 !important; }
    device-view > li > span > span {
      display: block; }

.color-picker .radio-container {
  text-align: center;
  margin-bottom: 5px; }
  .color-picker .radio-container .single-radio {
    padding-right: 8px; }
  .color-picker .radio-container .gradient-radio {
    padding-left: 8px; }

.color-picker .gradient-direction {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px; }

.color-picker .sp-container {
  border: none;
  width: 100%;
  margin-top: 10px; }
  .color-picker .sp-container .sp-button-container.sp-cf {
    display: none; }
  .color-picker .sp-container .sp-picker-container .sp-top-inner {
    width: 175%; }
  .color-picker .sp-container .sp-picker-container .sp-alpha {
    width: 175%; }
  .color-picker .sp-container .sp-picker-container .sp-input {
    width: 175%; }

.pane-popup {
  z-index: 101;
  position: absolute;
  background-color: white;
  border: 3px solid #ABABAB;
  font-size: 13px;
  left: 2px;
  right: 2px; }
  .pane-popup .heading {
    background: #EFEFEF;
    height: 40px;
    border-bottom: 1px solid #ABABAB;
    padding: 0 10px;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    text-align: center; }
    .pane-popup .heading button {
      color: #0FACBF;
      float: left;
      font-size: 24px;
      vertical-align: middle;
      line-height: 35px; }
    .pane-popup .heading h1 {
      margin: 0;
      color: #444444;
      font-size: 17px;
      font-weight: normal;
      line-height: 40px;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
  .pane-popup .content {
    border-bottom: 1px solid #ABABAB;
    padding: 10px !important; }
  .pane-popup .button-container {
    text-align: center;
    margin-top: 0;
    padding: 15px; }

.action-preview select {
  margin-right: 4px;
  font-size: 13px;
  line-height: 22px;
  height: 25px;
  box-shadow: inset 1px 1px 2px -1px rgba(0, 0, 0, 0.2);
  max-width: calc((100% - 45px) / 2); }

#explorer header.explorer .tabs-wrap > .tabs > .tab:first-child > .target > i, #explorer header.explorer .tabs-wrap > .tabs > .tab > input:not(.selected) ~ .target > i {
  visibility: hidden; }

#explorer header.explorer div.main .badge {
  display: inline-block;
  background: #D9534F;
  color: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 11px;
  font-weight: bold;
  line-height: 11px;
  padding: 1px 3px 1px 3px;
  text-align: center;
  border-radius: 11px; }

#explorer #west *, #explorer #south * {
  box-sizing: initial;
  min-width: initial;
  min-height: initial; }

#explorer [ui-view="topPane"] {
  overflow: hidden; }
  #explorer [ui-view="topPane"] #domParent {
    width: 100%;
    height: 100%; }

#explorer .pane-bottom.explorer .fa:not(i) {
  color: #0095d9; }

#explorer .pane-bottom.explorer > .tabs {
  display: block; }
  #explorer .pane-bottom.explorer > .tabs > .tab > .target > .title {
    text-transform: capitalize; }
    #explorer .pane-bottom.explorer > .tabs > .tab > .target > .title > .fa {
      padding-right: 5px; }
    #explorer .pane-bottom.explorer > .tabs > .tab > .target > .title > span {
      vertical-align: top; }
  #explorer .pane-bottom.explorer > .tabs span.tab.right {
    float: right; }
    #explorer .pane-bottom.explorer > .tabs span.tab.right > button {
      font-size: 20px;
      line-height: 20px; }

#explorer div#canvas-container {
  position: absolute; }
  #explorer div#canvas-container div#overlay {
    z-index: 2;
    position: absolute; }
    #explorer div#canvas-container div#overlay:focus {
      outline: none; }
  #explorer div#canvas-container div#selector-canvas {
    z-index: 1;
    position: absolute; }

#explorer rectangle {
  position: absolute; }
  #explorer rectangle div.rectangle {
    height: inherit;
    width: inherit;
    background-color: rgba(0, 155, 222, 0.1);
    border: 1px solid #009bde; }

#explorer page-models-list .page-list {
  font-size: 14px; }
  #explorer page-models-list .page-list .header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    background-color: #EFEFEF;
    border-bottom: 1px solid lightgrey; }
    #explorer page-models-list .page-list .header > * {
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
      line-height: 32px;
      height: 32px; }
    #explorer page-models-list .page-list .header > .fa {
      color: #0095d9;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      cursor: pointer;
      padding: 0 8px; }
    #explorer page-models-list .page-list .header > .label {
      padding: 0 10px; }
    #explorer page-models-list .page-list .header > input, #explorer page-models-list .page-list .header input:focus {
      font-size: 1em;
      height: 16px;
      margin-left: 10px;
      outline: none; }
  #explorer page-models-list .page-list .tree li > .item {
    cursor: pointer !important; }

#explorer explorer-select {
  position: absolute;
  background: #F4F4F4;
  box-shadow: 0 0 10px #888888;
  margin: -20px 0px 0px 0px;
  z-index: 100;
  border-radius: 5px;
  display: inline-block; }
  #explorer explorer-select .option {
    margin: 2px;
    padding: 2px 12px 2px 12px; }
  #explorer explorer-select .option:hover {
    background-color: #0099ff;
    color: white; }

@keyframes zoominout {
  0% {
    transform: scale(1, 1); }
  50% {
    transform: scale(1.2, 1.2); }
  100% {
    transform: scale(1, 1); } }

#explorer explorer-file-upload {
  position: absolute;
  margin-top: 36px; }
  #explorer explorer-file-upload #fileUploadDisplay {
    background-color: #0095d9;
    width: 200px;
    color: #F8F8F8;
    border-radius: 6px;
    height: 25px;
    box-shadow: 1px 1px 1px 1px #D7D7D7;
    animation: zoominout 0.5s forwards; }
  #explorer explorer-file-upload #explorerFileUpload {
    display: none; }

#explorer .pane-left.explorer .fa:not(i) {
  color: #0095d9; }

#explorer [ui-view="modelsEntries"] {
  background-color: #F8F8F8;
  overflow-x: hidden; }
  #explorer [ui-view="modelsEntries"] .pages-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column; }
  #explorer [ui-view="modelsEntries"] .header {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    height: 32px;
    background-color: #EFEFEF;
    width: 100%;
    border-bottom: 1px solid #D7D7D7;
    position: absolute; }
    #explorer [ui-view="modelsEntries"] .header span.controls {
      height: 0px;
      line-height: 33px;
      float: none; }
    #explorer [ui-view="modelsEntries"] .header > span.icons {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      line-height: 31px;
      -ms-flex-order: 3;
          order: 3;
      -ms-flex: 1;
          flex: 1;
      -ms-flex-preferred-size: content;
          flex-basis: content;
      -ms-flex-negative: 10;
          flex-shrink: 10;
      float: right;
      padding-left: 0; }
      #explorer [ui-view="modelsEntries"] .header > span.icons:first-child {
        -ms-flex-order: 1;
            order: 1; }
      #explorer [ui-view="modelsEntries"] .header > span.icons .fa {
        padding: 0 10px; }
        #explorer [ui-view="modelsEntries"] .header > span.icons .fa:last-child {
          padding: 0 12px; }
        #explorer [ui-view="modelsEntries"] .header > span.icons .fa.active {
          box-sizing: border-box;
          border: 2px inset #ccc;
          border-radius: 0;
          background: #F8F8F8;
          padding: 8px 10px; }
    #explorer [ui-view="modelsEntries"] .header > span.item {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -ms-flex-order: 2;
          order: 2;
      -ms-flex: 45;
          flex: 45;
      line-height: 31px;
      padding: 0 6px;
      overflow: hidden; }
      #explorer [ui-view="modelsEntries"] .header > span.item i {
        line-height: 31px;
        color: black; }
        #explorer [ui-view="modelsEntries"] .header > span.item i.fa.fa-cubes {
          min-width: 20px !important; }
      #explorer [ui-view="modelsEntries"] .header > span.item.selected {
        font-weight: bold; }
      #explorer [ui-view="modelsEntries"] .header > span.item .description {
        -ms-flex: 10;
            flex: 10;
        font-weight: normal;
        display: inline-block;
        color: #888888;
        font-size: 0.8em;
        font-style: italic;
        vertical-align: top;
        margin-right: 10px;
        margin-left: 8px; }
      #explorer [ui-view="modelsEntries"] .header > span.item .controls {
        -ms-flex: 1;
            flex: 1; }
      #explorer [ui-view="modelsEntries"] .header > span.item.clickable {
        cursor: pointer; }
      #explorer [ui-view="modelsEntries"] .header > span.item .label {
        overflow: hidden;
        text-overflow: ellipsis; }
  #explorer [ui-view="modelsEntries"] div.content > ul.tree > li.box {
    margin: 0; }
    #explorer [ui-view="modelsEntries"] div.content > ul.tree > li.box [tree-node="child"] {
      margin: 5px 4px; }
    #explorer [ui-view="modelsEntries"] div.content > ul.tree > li.box span.item > span.controls {
      visibility: visible;
      opacity: 1; }
      #explorer [ui-view="modelsEntries"] div.content > ul.tree > li.box span.item > span.controls > .fa:not(.fa-play) {
        opacity: 0.05; }
  #explorer [ui-view="modelsEntries"] .model-entries {
    position: relative;
    top: 33px;
    margin-bottom: 32px;
    width: 100%; }

#explorer .events-container [ui-view="events"] {
  background-color: #F8F8F8; }

#explorer .events-container .tabs.empty {
  background-color: #EFEFEF; }

#explorer .events-container .events {
  overflow: auto; }
  #explorer .events-container .events #connect-buttons {
    float: right;
    margin-right: 5px;
    margin-top: 10px; }
    #explorer .events-container .events #connect-buttons .fa {
      font-size: 20px; }
    #explorer .events-container .events #connect-buttons ~ .tree > .box {
      margin: 5px 10px;
      overflow: visible; }
      #explorer .events-container .events #connect-buttons ~ .tree > .box > .item {
        padding-left: 10px; }
        #explorer .events-container .events #connect-buttons ~ .tree > .box > .item.drop-before {
          box-shadow: -7px -7px #6CC04A; }
        #explorer .events-container .events #connect-buttons ~ .tree > .box > .item.drop-after {
          box-shadow: -7px 7px #6CC04A; }

#explorer .events-container label {
  width: 101px; }
  #explorer .events-container label > span > .fa {
    padding-right: 5px; }
  #explorer .events-container label > span > span {
    vertical-align: top; }
  #explorer .events-container label ~ div#content {
    background-color: white; }

#explorer .events-container a.help-link {
  padding: 3px 5px;
  margin: 0 4px 0 auto; }

#explorer .selector {
  overflow: hidden; }
  #explorer .selector .header {
    border: 1px solid lightgray;
    border-top: 0px;
    border-bottom: 0px;
    background-color: #dddddd;
    color: #222;
    line-height: 36px;
    margin: 0;
    font-size: 12px; }
    #explorer .selector .header > i.fa {
      color: #666666;
      font-size: 14px;
      padding: 0 9px; }
  #explorer .selector .content {
    padding: 10px; }
  #explorer .selector > div {
    padding: 0px 0px 0px 0px;
    width: 100%;
    display: inline-block; }
    #explorer .selector > div span.toggle {
      float: left;
      padding-left: 10px;
      font-size: 18px;
      margin-top: 3px; }
      #explorer .selector > div span.toggle.fa-caret-down {
        padding-left: 5px; }
    #explorer .selector > div span.label {
      text-transform: capitalize;
      float: left;
      padding-left: 9px;
      margin-right: 10px; }
      #explorer .selector > div span.label:first-child {
        width: 66px;
        line-height: 36px; }
      #explorer .selector > div span.label:not(:first-child) {
        margin-top: 5px;
        padding-left: 10px;
        margin-right: 18px; }
      #explorer .selector > div span.label.model-count {
        position: absolute;
        line-height: 50px;
        left: 30px; }
    #explorer .selector > div span.right {
      line-height: inherit !important;
      cursor: pointer;
      float: right;
      padding: 0 12px 0 4px; }
      #explorer .selector > div span.right.fa-code {
        font-size: 20px;
        padding-top: 7px; }
    #explorer .selector > div div.input {
      overflow: hidden;
      margin-right: 10px; }
      #explorer .selector > div div.input > input, #explorer .selector > div div.input > select, #explorer .selector > div div.input > textarea {
        margin-top: 4px;
        border-radius: 5px; }
        #explorer .selector > div div.input > input:focus, #explorer .selector > div div.input > select:focus, #explorer .selector > div div.input > textarea:focus {
          outline: 1px solid #5897fb;
          outline-offset: -1px;
          border-radius: 0px; }
      #explorer .selector > div div.input input {
        line-height: 36px;
        font-size: 12px;
        width: 95%;
        height: 26px;
        border: 1px solid lightgrey;
        padding: 0 0 0 7px; }
      #explorer .selector > div div.input input[type="checkbox"] {
        width: 18px;
        outline: none; }
      #explorer .selector > div div.input select {
        width: 99%;
        height: 30px; }
      #explorer .selector > div div.input textarea {
        min-height: 33px;
        font-size: 12px;
        width: 95% !important;
        border: 1px solid lightgrey;
        padding: 2px 0 0 7px; }
  #explorer .selector > div.list {
    margin-top: -5px; }
  #explorer .selector .select-function-container {
    display: -ms-flexbox;
    display: flex;
    margin: 4px 0;
    margin-right: 5%; }

#explorer .find-option i.fa-close {
  color: #D9534F; }

#explorer [ui-view="statusbar"] #matched-events {
  font-size: 12px;
  font-weight: bold;
  line-height: 22px; }
  #explorer [ui-view="statusbar"] #matched-events button {
    color: black !important;
    padding: 0 5px 0 10px; }
    #explorer [ui-view="statusbar"] #matched-events button:before {
      color: #0095d9 !important; }
  #explorer [ui-view="statusbar"] #matched-events span.clickable:hover {
    cursor: pointer;
    color: #0095d9; }

.language-uk .ngdialog.data-entry > .ngdialog-content {
  width: 640px; }

.language-uk .ngdialog.data-binding > .ngdialog-content {
  width: 780px; }

.language-uk .ngdialog.project-form > .ngdialog-content {
  width: 1000px; }

.language-uk .ngdialog.method-binding > .ngdialog-content {
  width: 860px; }

.language-uk .ngdialog.import-repository > .ngdialog-content {
  width: 740px; }

.language-uk .ngdialog.change-password > .ngdialog-content {
  width: 700px; }

.language-uk .ngdialog.update-web-connector .ngdialog-content {
  width: 950px; }

.language-uk .ngdialog.new-addon .ngdialog-content {
  width: 965px; }

.language-uk .ngdialog.new-user .ngdialog-content {
  width: 720px; }

.language-uk .tabs > .tab > .target .title {
  max-width: 150px; }

.language-uk .sidebar > div > button:hover,
.language-uk .sidebar > button:hover,
.language-uk .sidebar > a:hover {
  width: 250px; }