// Core variables and mixins
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
@import "./navbar-fixed-side";

$fa-font-path: "/build/fonts" !default;
$brand-primary: #428bca !default; // #337ab7
@import "../../node_modules/font-awesome/scss/font-awesome";
@import "../../node_modules/codemirror/lib/codemirror.css";

.cms {
  // Reset and dependencies
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
  // @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print";

  // Core CSS
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons";

  // Components
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pager";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close";

  // Components w/ JavaScript
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/popovers";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/carousel";

  // Utility classes
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities";
  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

  @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/theme";

  pre {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    line-height: 0.8;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
  }
  .CodeMirror-cursors {
  }
}

.cms-btn {
  &.btn-outline {
    color: inherit;
    transition: all .5s;
    text-shadow: initial;
    box-shadow: initial;
    background: transparent;

  }

  &.btn-primary.btn-outline:hover {
    background-color: #428bca !important;
  }

  &.btn-primary.btn-outline {
    color: #428bca;
  }

  &.btn-success.btn-outline {
    color: #5cb85c;
  }

  &.btn-info.btn-outline {
    color: #5bc0de;
  }

  &.btn-warning.btn-outline {
    color: #f0ad4e;
  }

  &.btn-danger.btn-outline {
    color: #d9534f;
  }

  &.btn-primary.btn-outline:hover,
  &.btn-success.btn-outline:hover,
  &.btn-info.btn-outline:hover,
  &.btn-warning.btn-outline:hover,
  &.btn-danger.btn-outline:hover {
    color: #fff;
  }
}

@import "../../node_modules/ui-select/dist/select.css";

// @import "../../node_modules/lobipanel/lib/jquery-ui.min.css";

// fix for ui-select
.cms .ui-select-container.form-control {
  height: auto;
  padding: 3px 3px 0;
}

body.modal-open {
  // block scroll for mobile;
  // causes underlying page to jump to top;
  // prevents scrolling on all screens
  overflow: visible;
}

.cms-navbar-fix {
  top: 75px;
}

[cms-container] {
  min-height: 42px;
}

.cms-containers, .cms-containers-inline {
  > div {
    position: relative;
  }

  min-height: 42px;
  padding-left: 0px;

  .cms-element {
    display: inline-block;
  }
  .dndDraggingSource {
    display: none !important;
  }
}

.cms-containers {
  .dndPlaceholder {
    display: block;
    background-color: #ddd;
    min-height: 42px;
    position: relative;
  }
}

.cms-containers-inline {
  .dndPlaceholder {
    display: inline-block;
    background-color: #ddd;
    min-height: 20px;
    width: 50px;
    position: relative;
  }
}

.cms-admin-mode {
  [cms-editable] {
    border-bottom: 1px solid rgba(221, 221, 221, 0.53);
    display: inline;
  }
}

.cms-element-wrapper {
  position: relative;
}

.cms-element-controll-wrapper {
  width: 0px;
}

.cms-element-controll-icon, .cms-element-controll {
  position: absolute;
  z-index: 1000;
}

.cms-element-controll {
  width: 164px;
  right: 20px;
  top: -10px;
}

.cms-element-controll-icon {
  right: 20px;
  top: -10px;
  i {
    //color: $brand-primary;
  }
}

.cms-admin-right-panel {
  color: #333;
  @extend .pull-right;
  > * {
    display: inline-block;
    margin-top: 0px;
  }
  > button {
    margin-top: -13px;
  }
  > label {
    position: relative;
    top: -5px;
  }
}

.cms-admin-table {
  .cms-element-wrapper {
    width: 20px;
  }
  .cms-element-controll-icon {
    top: initial;
    right: 0px;
  }
  .cms-element-controll {
    top: initial;
    right: 0px;
    margin-left: -115px;
  }
}

.cms-window {
  .modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .modal-content {
    height: 100%;
    border-radius: 0;
    overflow: auto;
  }
}

.modal-lg {
  width: 1000px !important;
}

.vakata-context.jstree-contextmenu.jstree-proton-contextmenu {
  z-index: 10000;
}

.cms-close-position {
  position: absolute;
  right: 3px;
  top: 3px;
  z-index: 1;
}

.cms-controll-panel-right {
  position: absolute;
  right: 3px;
  top: 37px;
  border-radius: 10px;
  height: 94%;
  background-color: rgba(0, 0, 0, 0.03);
  padding: 10px;
}

.cms-sidebar {
  h3, h4, h5 {
    font-weight: 400;
  }
}

a[ng-click], a[cms-admin] {
  cursor: pointer;
}

.cms-btn-bottom.btn {
  margin-bottom: 5px;
  display: block;
}

.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn,
.form-control.input-xs, .cms-select .ui-select-toggle, .cms-select .ui-select-search {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5; //If Placeholder of the input is moved up, rem/modify this.
  border-radius: 3px;
}

.cms-select {
  .selectize-input {
    height: 22px !important;
    font-size: 12px !important;
    padding: 2px 5px !important;
  }

  .selectize-control.multi .selectize-input.has-items {
    padding: 1px 5px !important;
  }
}

.popover {
  max-width: 700px;
  [class^="col-"] {
    width: 100%;
  }
}

[cms-editable] {
  .popover {
    z-index: 10000;
    min-width: 250px;
    max-width: 700px;
  }
  .form-horizontal .control-label {
    text-align: left;
  }
  .col-sm-10, .col-sm-2 {
    width: 100%
  }
  .col-sm-10 {
    margin-top: 5px;
  }
}

[cms-login] {
  .form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
    .form-signin-heading {
      margin-bottom: 10px;
    }
    .checkbox {
      margin-bottom: 10px;
      font-weight: normal;
    }
    .form-control {
      position: relative;
      height: auto;
      //Instead of the line below you could use @include box-sizing($bs)
      box-sizing: border-box;
      padding: 10px;
      font-size: 16px;
      &:focus {
        z-index: 2;
      }
    }
    input[type="email"] {
      margin-bottom: -1px;
      //Instead of the line below you could use @include border-bottom-right-radius($radius)
      border-bottom-right-radius: 0;
      //Instead of the line below you could use @include border-bottom-left-radius($radius)
      border-bottom-left-radius: 0;
    }
    input[type="password"] {
      margin-bottom: 10px;
      //Instead of the line below you could use @include border-top-left-radius($radius)
      border-top-left-radius: 0;
      //Instead of the line below you could use @include border-top-right-radius($radius)
      border-top-right-radius: 0;
    }
  }
}

.cms-panel {
  .panel {
    border-radius: 1px;
    .panel-default {
      border-color: #e7eaec;
    }
  }

  .panel-heading {
    border-radius: 1px;
    color: black;
    padding: 4px 10px;
  }
  .cms-border {
    position: relative;
    border: 1px solid #bbb;
    margin: 10px 0px;
    padding: 5px 5px 0px 5px;
    background-color: #ddd;
    -moz-box-shadow: inset 0 1px 1px #eeeeee;
    -ms-box-shadow: inset 0 1px 1px #eeeeee;
    -o-box-shadow: inset 0 1px 1px #eeeeee;
    -webkit-box-shadow: inset 0 1px 1px #EEE;
    box-shadow: inset 0 1px 1px #EEE;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    &:before {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 15px;
      left: 10px;
      width: 50%;
      top: 50%;
      max-width: 300px;
      background: rgba(0, 0, 0, 0.7);
      -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg);
    }
    &:after {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 15px;
      left: 10px;
      width: 50%;
      top: 50%;
      max-width: 300px;
      background: rgba(0, 0, 0, 0.7);
      -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg);
      -webkit-transform: rotate(3deg);
      -moz-transform: rotate(3deg);
      -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      transform: rotate(3deg);
      right: 10px;
      left: auto;
    }
  }
}

.cms-wrapper {
  padding: 20px;
  position: relative;
}

.btn-white {
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
  &:hover, &:focus, &:active, &.active {
    color: inherit;
    border: 1px solid #d2d2d2;
  }
  &:active {
    &:focus, &:hover {
      color: inherit;
      border: 1px solid #d2d2d2;
    }
  }
  &.active {
    &:hover, &:focus {
      color: inherit;
      border: 1px solid #d2d2d2;
    }
  }
  &:active, &.active {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
  }
  &:active, &.active {
    background-image: none;
  }

  &.disabled {
    color: #cacaca;
    &:hover, &:focus, &:active, &.active {
      color: #cacaca;
    }
  }
  &[disabled] {
    color: #cacaca;
    &:hover, &:focus, &:active {
      color: #cacaca;
    }
  }
  &.active[disabled] {
    color: #cacaca;
  }

}

fieldset[disabled] .btn-white {
  color: #cacaca;
  &:hover, &:focus, &:active, &.active {
    color: #cacaca;
  }
}

.btn.btn-white {
  border: 1px solid #e7eaec;
}

.cms-panel-highlight {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

// todo :mixin
.cms-form {
  .form-control {
    @extend .input-sm;
  }
  .control-label {
    font-weight: 500;
  }
  input {
    min-width: 55px;
  }
}

.lint-error {
  font-family: arial;
  font-size: 70%;
  background: #ffa;
  color: #a00;
  padding: 2px 5px 3px;
}

.lint-error-icon {
  color: white;
  background-color: red;
  font-weight: bold;
  border-radius: 50%;
  padding: 0 3px;
  margin-right: 7px;
}

ul.CodeMirror-hints {
  z-index: 100000001;
}

div.CodeMirror-lint-tooltip {
  z-index: 100000000;
}

[data-ng-app] .CodeMirror-Tern-tooltip {
  z-index: 100000000;
}

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
}

.cms-edit-shadow {
  display: inline-block;
  -webkit-box-shadow: 0 0 4px 0 #f0ad4e;
  -moz-box-shadow: 0 0 4px 0 #f0ad4e;
  box-shadow: 0 0 4px 0 #f0ad4e;
}

.nonDraggableImage {
  -webkit-user-drag: none;
}

.cms-layout {
  margin-top: 15px;
  padding: 5px;
  border: 1px dashed rgba(111, 164, 210, 0.4);
  border-radius: 10px;
}

[cms-fragment] {
  .cms-layout {
    margin-top: 0px;
    padding: 0px;
    border: none;
    border-radius: 0px;
  }
}

.cms-field-form {
  .form-control {
    @extend .input-sm;
  }
  .col-sm-2 {
    @extend .col-xs-12;
    text-align: start !important;
    margin-bottom: 5px !important;
  }
  .col-sm-10, .col-sm-4, .col-sm-6 {
    @extend .col-xs-12;
  }

}

.cms-data-element {
  .cms-layout {
    border: none;
  }
  [cms-editable] {
    border: none;
  }

}

.cms-panel-list-content {
  > * {
    padding-top: 20px;
    margin-bottom: 20px;
  }
  display: block;
}

.cms-table-section {
  label {
    display: none;
  }
  .col-sm-10:not(.col-sm-offset-2) {
    width: 100%;
  }
  .checkbox {
    label {
      display: inline;
    }
    span {
      color: transparent;
    }
  }
  td {
    padding-bottom: 2px !important;
  }

}

body > .ui-select-bootstrap.open {
  z-index: 10000 !important;
}

.cms {
  .cms-empty-value {
    font-style: italic;
    color: #a94442;
  }
}

.panel-xs {
  hr {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.panel-text {
  background-color: #E1ECF4;
  color: #8835b7;
  font-size: small;
  font-weight: 500;
  padding: 2px;
}

.cms-admin-heading-form {
  margin-left: -5px;
  .ui-select-container {
    @extend .cms-select;
  }
  .selectize-input {
    height: 22px !important;
  }

  .selectize-control.single .selectize-input.full:after {
    margin-top: 0px;
  }

  .form-control {
    @extend .input-xs;
  }
  .col-sm-2 {
    width: 20%;
    text-align: start !important;
    margin-bottom: 5px !important;
  }
  .col-sm-10, .col-sm-4, .col-sm-6 {
    width: 20%;
  }

}

.text-danger-2 {
  color: crimson !important;
}

.text-violet {
  margin-right: 5px;
  background-color: #E1ECF4;
  color: #8835b7;
  font-size: small;
  font-weight: 500;
  padding: 2px;
}

@import "./ui-switch.css";

.selectize-dropdown {
  z-index: 1000000 !important;
}

.selectize-input {
  // height: 30px !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
}

.selectize-control:not(.multi) {
  height: 30px !important;
}

.selectize-control.multi .selectize-input.has-items {
  padding: 3px 10px !important;
}

.selectize-control.multi .selectize-input > div {
  border-radius: 3px !important;

  background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%) !important;
  background-repeat: repeat-x;
  text-shadow: 0 1px 0 #fff;
  border-color: #ccc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075) !important;
  color: #337ab7 !important;
}

.selectize-control.plugin-remove_button [data-value] .remove {
  border-left: 1px solid rgba(208, 208, 208, 0.31) !important;
}