BB-1950 Multiple Product Images:  - set controls width 700 -> 900

@import "mixins";
// Base
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  color: @bodyColor;
  margin: 0;
  padding: 0 ;
  min-width: 980px;
  background:#fff;
}
body.error-page {
  background-color: #eee;
  #container{
    position: relative;
    .popup-frame{
      position: relative;
      top: 50%;
    }
    .popup-holder{
      position: relative;
      margin: -97px 0 0;
    }
  }
  #main {
    background: none;
  }
}
a {
  color: @linkColor;
  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }
  &.no-action {
    color: @textColor;
  }
}
form {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  // supress bootstrap's optimizeLegibility text-rendering
  // it gives bad results on small size fonts
  // that could be applied only for fonts larger than 20px
  text-rendering: auto;
}
#main {
  background-color: #fff;
}
.dropdown-menu {
  margin-top:-1px;
  .border-radius(3px);
  z-index: @oroZindexDropdown;
  li.dropdown {
    position: relative;
    & > a{
      padding-right: 10px;
    }
  }
  li.dropdown:after{
    content: "\f054";
    font-family: 'FontAwesome';
    display: block;
    font-size: 11px;
    position: absolute;
    right: 5px;
    top: 9px;
  }
  & > li > a{
    & > i[class^="icon-"] {
      min-width: 17px;
    }
  }
}
.dropdown-menu__floating {
  margin-top: 0;
  > li > a, > li > button {
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 12px;
    color: #444;
    text-transform: capitalize;
  }
}
.dark {
  background-color: #f6f5f5;
}
.nowrap {
  white-space: nowrap;
}
label.disabled {
  cursor: default;
}
.ui-sortable-handle.disabled {
  cursor: not-allowed;
}

// Bootstrap - Form
label, input, button, select, textarea { font-size:13px;}
.form-horizontal .control-label {
  font-size:13px;
  text-align:left;
  line-height:1.2em;
}
.control-group .controls p.control-label{
  width: auto;
}
.form-horizontal {
  .control-group {
    label.control-label {
      float:left;
      width:160px;
      padding-top: 7px;
      color: #777;
      font-weight: normal;
      font-size: 13px;
      text-align:right;
    }
    .control-label.wrap {
      float:left;
      padding-top: 6px;
      color: #777;
      font-weight: normal;
      font-size: 13px;
      line-height: 20px;
      text-align: right;
      .tooltip-icon {
        margin-right: 5px;
        cursor: pointer;
      }
      label {
        display: inline;
      }
    }
    .controls {
      margin-left:170px;
      &.autocomplete-box{
        margin-bottom: 10px;
        margin-top: 10px;
      }
      .control-label {
        padding-top: 7px;
        width: 100%;
        word-wrap: break-word;
        padding-left: 5px; // to get nice hover background
        box-sizing: border-box;
        &.html-property {
          overflow: auto;
        }
      }
      .control-label.wrap {
        width: 130px;
      }
      label.control-label {
        width: auto;
      }
    }
  }
}
.simplecolorpicker {
  &.icon {
    &[data-color=''],
    &[data-color='#FFFFFF'],
    &[data-color='#ffffff'] {
      border: 1px solid rgba(0,0,0,0.2);
    }
    &[data-color='']:hover,
    &[data-color='#FFFFFF']:hover,
    &[data-color='#ffffff']:hover {
      border: 1px solid rgba(0,0,0,0.2) !important;
    }
  }
  span.color {
    &[data-color=''],
    &[data-color='#FFFFFF'],
    &[data-color='#ffffff'] {
      border: 1px solid rgba(0,0,0,0.2);
    }
    &[data-color='']:hover,
    &[data-color='#FFFFFF']:hover,
    &[data-color='#ffffff']:hover {
      border: 1px solid rgba(0,0,0,0.2) !important;
    }
    &[data-selected]:after {
      color: inherit !important;
    }
  }
}
i.color {
  display: block;
  border: 1px solid rgba(0,0,0,0.2);
  width: 18px;
  height: 18px;
  margin-top: -3px;
}
.context-menu,
.controls {
  .simplecolorpicker.icon,
  .simplecolorpicker span.color {
    width: 18px;
    height: 18px;
    margin: 0 3px 3px 0;
  }
  .simplecolorpicker.icon {
    margin-top: 3px;
  }
  .simplecolorpicker span.vr {
    margin: 0 5px 0 2px;
    padding: 3px 0 0 0;
  }
  .simplecolorpicker.fontawesome {
    span.color {
      position: relative;
      margin: 0 3px -3px 0;
    }
    span.color[data-selected]:after {
      margin: 0;
      display: block;
      position: absolute;
      top: -2px;
      left: 2px;
    }
  }
  .simplecolorpicker.inline {
    padding-top: 3px;
    padding-bottom: 0px;
    margin-bottom: -3px;
    max-width: 263px;
  }
  .simplecolorpicker.inline.with-empty-color,
  .simplecolorpicker.inline.with-custom-color {
    max-width: 294px;
  }
  .simplecolorpicker {
    .minicolors-swatch {
      position: relative;
      vertical-align: top;
      background-position: -62px -1px;
    }
  }
  .minicolors {
    .minicolors-panel {
      padding: 5px;
      border: 1px solid rgba(0,0,0,0.2);
      box-shadow: 0 5px 10px rgba(0,0,0,0.2);
      .minicolors-grid {
        top: 6px;
        left: 6px;
      }
      .minicolors-slider {
        top: 6px;
        left: 157px;
      }
    }
    .form-actions {
      position: absolute;
      top: 162px;
      left: 0;
      width: 183px;
      padding: 5px;
      margin: 0;
      background-color: #fff;
      box-shadow: 0 5px 10px rgba(0,0,0,0.2);
      .btn {
        margin-left: 5px;
      }
    }
  }
}
.context-menu {
  .minicolors-swatch {
    cursor: pointer;
    position: relative;
    vertical-align: top;
    background-position: -62px -1px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border: 1px solid rgba(0,0,0,0.2);
  }
  .minicolors-swatch:hover {
    border: 1px solid #222; /* @gray-dark */
  }
}

.ui-widget-overlay {
  z-index: 150;
}
.form-horizontal-large {
  .control-group {
    max-width: 100%;
    .controls {
      margin-left: 240px;
      div.control-label {
        text-align: left;
      }
    }
    div.control-label,
    label.control-label {
      width: 230px;
      text-align: right;
    }
  }
}
.user-fieldset{
  margin-bottom: 22px;
  span{
    background-color: #fff;
    padding: 0 20px 0 0;
    display: inline-block;
  }
}
input[type='radio'] + label,
input[type='checkbox'] + label {
  margin-bottom:2px;
  display: inline-block;
}
textarea, input, select,
.uneditable-input,
body .select2-container {
  .box-sizing();
  border-color:#ddd;
  color:#333;
  font-size: @baseFontSize;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
  .border-right-radius(3px);
}
.btn-group > .btn:first-child {
  .border-left-radius(3px);
}

// Bootstrap - Nav
.dropdown-menu > li > div {
  padding: 3px 13px;
}
.dropdown-menu > li > a {
  padding-left:13px;
  padding-right:13px;
  color: @menuItemColor;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background:#f3f3f3;
  color: @menuItemColor;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  background:none;
}
// fix for FF (broken corner)
.navbar .nav > li > .dropdown-menu:after {
  left: 9px;
  border-right-width: 7px;
  border-bottom-width: 7px;
  border-left-width: 7px;
}
.navbar .pull-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.pull-right:after {
  left: auto;
  right: 12px;
}

// Bootstrap - Table
.table thead th { padding-top:2px; padding-bottom:2px; }

.label-info,
.badge-info { background:#92b2d6; }

.widget-content > .label-info:first-child {
  margin-bottom: 10px;
}

.ui-sortable-handle {
  cursor: move;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.dropdown-menu {
  .divider {
    border-bottom-color:#eee;
    margin:4px 0;
  }
}

footer {
  text-align: center;
}
#aside {
  padding: 0 @horizontalPadding;
}
#sidebar {
  padding: 0 @horizontalPadding;
}
#content {
  padding: 0 @horizontalPadding;
}
.one-column {
  padding: @horizontalPadding;
  -webkit-border-radius: @baseBorderRadius;
  border-radius: @baseBorderRadius;
  border: 1px solid @generalBorderColor;
  margin:0 0 @marginBottomBox;
}
.page-container {
  padding: 0 @widthClosePanel;
  height: 1%;
  position: relative;
}
.page-container.left-locked {
  padding-left: @widthLeftPanel;
}
.page-container.right-locked {
  padding-right: @widthLeftPanel;
}
.page-container:after {
  content: "";
  clear: both;
  display: block;
}
.row-fluid.one-column {
  padding: 0;
}
.nav-box {
  position: absolute;
  top: 0;
  left: 25px;
  width: 320px;
  padding:0 1px 0 5px;
  z-index: 995;
  color: #fff;
  background: #424850 url("../../img/bg-sidebar.png")repeat-y;
  -webkit-box-shadow:  6px 4px 6px 1px rgba(0, 0, 0, 0.60);
  box-shadow:  6px 4px 6px 1px rgba(0, 0, 0, 0.60);
  .nav-title {
    overflow: hidden;
    height: 1%;
    padding: 7px 6px;
    color: #fff;
    background: #2b2d31;
    h3 {
      float: left;
      margin: 0;
      font-size: @fontSizeSmall;
      line-height: 12px;
      text-transform: uppercase;
    }
    .action {
      float: right;
      margin: 0 0 0 4px;
      text-indent: -9999px;
      font-size: 0;
      line-height: 0;
      background-image: url("../../img/glyphicons-halflings-white.png");
      cursor: pointer;
    }
    .close {
      opacity: 1;
    }
    .settings {

    }
  }
  .nav-content {
    padding: 10px 5px 5px;
  }
}
.side-nav {
  background:#424850 url("../../img/bg-sidebar.png") repeat-y 100% 0;
  padding: 0 5px 18px 0;
  position: relative;
  z-index: 999;
  .side-nav-opener {
    border-top: 1px solid #0d0d0d;
    position: absolute;
    bottom: 0;
    right: 5px;
    width: 25px;
    .icon-arrow-right {
      display: none;
      float:right;
      cursor: pointer;
    }
    .icon-arrow-left {
      float:right;
      margin: 3px 0;
      cursor: pointer;
    }
  }
  .lock-bar {
    display: none;
    float:right;
  }
  .bar-tools {
    margin: 0;
    padding: 0;
    .sn-opener {
      display: block;
      text-align: center;
      padding: 4px 0;
      span {
        display: none;
      }
    }
    &>li {
      border-top: 1px solid #2f343b;
    }
    &:first-child {
      border-top: 0;
    }
  }
  .open-bar-item {
    cursor: pointer;
  }
  .open-item .icon-chevron-right {
    display: none;
  }
  .open-item .icon-chevron-down {
    display: inline-block !important;
  }
  .well {
    background: #383c40;
    -webkit-box-shadow:  0px 2px 4px 1px rgba(0, 0, 0, 0.6);
    box-shadow:  0px 2px 4px 1px rgba(0, 0, 0, 0.6);
    border: 1px solid #2e2e2e;
  }
  .nav-content {
    padding: 0 7px;
  }
}
.side-nav-open {
  .lock-bar {
    display: block;
    margin: 0 3px 0 0;
  }
  .icon-unlock {
    display: none;
  }
  .sn-opener {
    display: none;
  }

}
.left-panel {
  float: left;
  width: @widthClosePanel;
  margin: 0 0 0 -@widthClosePanel;
  display: inline;
}
.left-panel.side-nav-open {
  position:  absolute;
  top: 0;
  left: 0;
  width: @widthLeftPanel;
  padding: 10px 0;
  margin: 0;
  .nav-title {
    background: none;
    margin: 0;
  }
  .bar-tools > li {
    margin: 0 5px 0 0;
  }
  .side-nav-opener {
    width: @widthLeftPanel;
    .icon-arrow-right {
      display: block;
      float:right;
      margin: 3px;
    }
    .icon-arrow-left {
      display: none;
      float:right;
    }
  }
  .sn-opener {
    display: none;
  }
  .nav-box {
    padding: 0;
    background: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
  }

}
.left-panel.side-nav-locked {
  position: relative;
  width: @widthLeftPanel;
  padding: 10px 0;
  margin: 0 0 0 -@widthLeftPanel;
  .nav-title {
    background: none;
    margin: 0;
  }
  .bar-tools > li {
    margin: 0 5px 0 0;
  }
  .side-nav-opener {
    width: @widthClosePanel;
  }
  .icon-unlock {
    display: block;
    margin: 4px 7px 3px 3px;
  }
  .icon-lock {
    display: none;
  }
  .lock-bar {
    display: block;
  }
  .maximize-bar {
    float: right;
  }
  .icon-arrow-left {
    display: none;
  }
  .icon-arrow-right {
    display: block;
    margin: 3px;
  }
  .sn-opener {
    display: none;
  }
  .nav-box {
    padding: 0;
    background: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
  }
}

.right-panel .nav-box {
  right: 25px;
  left: auto !important;
}
.side-nav-open .nav-box,
.side-nav-locked .nav-box {
  display: block !important;
  position: static;
  width: 100%;
}
.side-nav-open .sn-opener,
.side-nav-locked .sn-opener {
  display: none;
}
#bar-drop-overlay {
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 15;
}
#bar-drop-overlay.bar-open-overlay {
  display: block;
}
.layout-content {
  margin: 0 !important;
  .navbar-inner {
    z-index:1;
  }
}
.right-panel {
  display: inline;
  float: right;
  width: @widthClosePanel;
  margin: 0 -@widthClosePanel 0 0;
  background-position: 0 0;
  padding: 0 0 18px 5px;
  .bar-tools {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .side-nav-opener {
    right: auto;
    left: 5px;
    width: @widthClosePanel;
    .icon-arrow-left {
      display: none;
      float: left;
    }
    .icon-arrow-right {
      float: left;
      display: block;
      margin: 3px;
    }
  }
  .lock-bar {
    float: left;
  }
  .nav-box {
    background-position: 100% 0;
    padding: 0 5px 0 1px;
    -webkit-box-shadow:  -6px 4px 6px 1px rgba(0, 0, 0, 0.60);
    box-shadow:  -6px 4px 6px 1px rgba(0, 0, 0, 0.60);
  }
  .nav-content {
    padding-top: 10px;
  }
  .maximize-bar {
    width: 100%;
    overflow: hidden;
  }
}
.right-panel.side-nav-open {
  position:  absolute;
  top: 0;
  right: 0;
  width: @widthLeftPanel;
  overflow: hidden;
  padding: 10px 0;
  margin: 0;
  .bar-tools > li {
    margin: 0 0 0 5px;
  }
  .sn-opener {
    display: none;
  }
  .nav-box {
    padding: 0;
    background: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
  }
  .nav-title {
    background: none;
    margin: 0;
  }
  .side-nav-opener {
    width: @widthLeftPanel;
    .icon-arrow-left {
      display: block;
      float: left;
      margin: 3px;
    }
    .icon-arrow-right {
      float: left;
      display: none;
      margin: 3px;
    }
  }
}
.right-panel.side-nav-locked {
  position: relative;
  width: @widthLeftPanel;
  padding: 10px 0;
  margin: 0 -@widthLeftPanel 0 0;
  .bar-tools > li {
    margin: 0 0 0 5px;
  }
  .icon-unlock {
    display: block;
    margin: 4px 7px 3px 3px;
  }
  .icon-lock {
    display: none;
  }
  .lock-bar {
    display: block;
  }
  .side-nav-opener {
    width: (@widthLeftPanel -5);
    .icon-arrow-left {
      display: block;
      float: left;
      margin: 3px;
    }
    .icon-arrow-right {
      float: left;
      display: none;
      margin: 3px;
    }
  }
  .sn-opener {
    display: none;
  }
  .nav-box {
    padding: 0;
    background: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
  }
  .nav-title {
    background: none;
    margin: 0;
  }
}
#wrapper {
  -webkit-border-radius: @baseBorderRadius;
  border-radius: @baseBorderRadius;
  border: 1px solid @generalBorderColor;
  margin:0 0 @marginBottomBox;
}
.form-pass-reset {
  margin: 0 auto 20px;
  max-width: 400px;
  padding: 19px 29px 29px;
  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
  border: 1px solid @navbarBorder;
  .border-radius(@baseBorderRadius);
  .box-shadow(0 1px 4px rgba(0,0,0,.065));
}
.form-row {
  padding: 0 0 @marginBottomBox/2;
}
.small-text {
  font-size: @fontSizeSmall;
}
.small-text.checkbox {
  margin-top: 0 !important;
}
.top-frame {
  padding-top: @topPadding/2;
}
.popup-box {
  width: @widthPopup;
  margin: 0 auto;
}
/* dialog jQuery ui  start */
.ui-dialog {
  background: @bodyBackground;
  .border-radius(6px);
  box-shadow:0 1px 22px rgba(0,0,0,.4) !important;
  -webkit-box-shadow:0 1px 22px rgba(0,0,0,.4) !important;
  -moz-box-shadow:0 1px 22px rgba(0,0,0,.4) !important;
  z-index: 990;
}
.ui-dialog-titlebar {
  .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
  cursor: move;
  padding: @verticalPadding/2 @horizontalPadding;
}
.ui-dialog-titlebar-min {
  .border-radius(@baseBorderRadius);
  .box-shadow(0 1px 4px rgba(0,0,0,.065));
  cursor: auto;
}
.ui-dialog-content {
  padding: @verticalPadding/2 @horizontalPadding/2 0 @verticalPadding/2;
  margin: 0 auto;
  position: relative;
  min-width: 250px;
  width: 100% !important;
  height: calc(~"100% - 81px") !important;
  .ui-resizable-handle {
    cursor: move;
  }
}
.ui-dialog:not(.ui-dialog-buttons){
  .ui-dialog-content{
    border-radius: 0 0 3px 3px;
  }
}
.ui-dialog.ui-resizable:not(.ui-dialog-buttons) {
  .ui-dialog-content{
    height: calc(~"100% - 50px") !important;
    border-radius: 0 0 3px 3px;
    border-bottom: 1px solid #e5e5e5;
  }
}
.ui-dialog .widget-actions-section {
  .btn, .action {
    margin-left: 5px;
  }
}
.ui-dialog .ui-resizable-se {
  height: 14px;
  width: 14px;
  margin: 2px;
  position: absolute;
  bottom: -1px;
  right: 0px;
  background: url("../../img/glyphicons-halflings.png") no-repeat -336px -166px;
  cursor: se-resize;
}
.ui-dialog .ui-dialog-titlebar-restore,
.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-maximize,
.ui-dialog .ui-dialog-titlebar-minimize,
.ui-dialog .ui-dialog .minimized {
  float:right;
  margin: 0 0 0 7px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  background:none;
  cursor: pointer;
  border: 0;
}
.ui-dialog-buttonpane .form-actions {
  margin: 0;
}

#create-status-form {
  height: auto !important;
  border: 0 !important;
}
/* general style reset */
.navbar .btn,
.navbar .btn-group {
  margin-top: 0;
}
.nav-header {
  color: @bodyColor;
  font-size: 12px;
}
.nav-header-title {
  font-size: @baseFontSize;
  text-transform: none;
}

.label-important,
.badge-important {
  background-color: #ea0000;
  #gradient > .vertical(#ea0000, #ba0000);

}
/* general style classes */
.extra-small {
  font-size: 10px;
  color: #555;
}
.input-large {
  width: 235px;
}
.navbar .small-divider {
  background: url("../../img/vertical-divider-general.gif") repeat-y;
  height: 22px;
  margin: 10px 7px 0 0;
  border: 0;
  width: 2px;
}
.extra-list {
  margin: 0;
  padding: 0;
  list-style: none;
  &:empty {
    display: none;
  }
}
.extra-list .extra-list-element {
  vertical-align: top;
  line-height: 1.2em;
  padding-bottom: 5px;
}
.a2lix_translations {
  .nav-tabs {
    > li {
      height:29px !important;
      > a {
        border:1px solid #ddd;
        padding-top:4px;
        padding-bottom:4px;
        background:#f5f5f5;
        color:#777;
        &:hover {
          background:#eee;
        }
      }
      &.active {
        a {
          border-bottom-color:#fff;
          color:@bodyColor;
        }
      }
    }
  }
}
/* application-menu */
.application-menu {
  background-color: #232426;
  margin: 0;
  .container {
    padding: 6px 5px 0;
  }
  .nav-tabs {
    border-color: #000;
    & > li > a {
      -webkit-border-radius: 5px 5px 0 0;
      border-radius:  5px 5px 0 0;
      border: solid #000;
      border-width: 1px 1px 0 1px;
      height: 26px;
      color: #b8b8b8;
      font-size: @baseFontSize;
      line-height: 26px;
      text-shadow: 1px 1px 2px #00324d;
      background-color: #232426;
      padding: 0 15px;
      .box-shadow(none);
      font-weight: bold;
    }
  }
}
.application-menu .nav-tabs > li > a.empty,
.application-menu .nav-tabs > li.active > a.empty,
.application-menu .nav-tabs > li.active > a.empty:hover,
.application-menu .nav-tabs > li > a.empty:hover,
.application-menu .nav-tabs > li > a.empty:focus {
  border-radius:  5px;
  height:23px;
  border-width: 1px;
}
.application-menu .nav-tabs > li.active > a,
.application-menu .nav-tabs > li.active > a:hover,
.application-menu .nav-tabs > li > a:hover,
.application-menu .nav-tabs > li > a:focus {
  height: 26px;
  border: solid #000;
  border-width: 1px 1px 0 1px;
  background-color: #7a95b5;
  color: #fff;
  .box-shadow(none);
}
.tab-content > .tab-pane {
  padding: 0;
}
.application-menu .tab-content > .tab-pane > .nav a {
  color: #dedddd;
  font-size: @baseFontSize;
  font-weight: bold;
  &:hover {
    background-color: #447fe9;
  }
}
.application-menu .tab-content > .tab-pane > .nav .current a {
  background: #3b6fe5;
  color: #fff;
}
.application-menu .tab-content > .tab-pane > .nav {
  margin: 0;
}
.application-menu .tab-content {
  background-color: #7c96b4;
}
.application-menu .home a {
  padding: 0 5px !important;
}
.application-menu .home span {
  display: block;
  margin: 4px 0 0;
  width: 17px;
  height: 19px;
  text-indent: -9999px;
  font-size: 0;
  line-height: 0;
  background: url("../../img/general-sprite.png") no-repeat 0 -156px;
}
.page-title h1 {
  min-height:28px;
  font-size:20px;
  line-height:1.2em;
}

[class^="icon-"], [class*=" icon-"],
[class^="fa-"], [class*=" fa-"] {
  margin: 0 3px;
}

.fa-google {
  margin: 0 5px;
}

.icons-holder [class^="icon-"],
.icons-holder [class*=" icon-"] {
  margin: 0 -3px;
}
.icons-small button.btn {
  height: 24px;
  padding: 0 9px;
  line-height: 20px;
}
.application-menu .tab-content > .tab-pane > .nav a:hover {
  background: #447fe9;
  color: #fff;
}
.application-menu .tab-content > .tab-pane > .nav .active a {
  background: #3B6FE5;
  color: #fff;
}
.nav > li > a:focus {
  background-color: #7a95b5;
}
.navbar .nav > li a { padding-top:7px; padding-bottom:7px; }
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: #fff;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  box-shadow: none;
  background-color: #7a95b5;
  color: #fff;
}
.btn, a {
  .caret {
    margin-left: 5px;
  }
}
.new-line {
  clear: both;
  display: block;
  width: 100%;
}

.list-inline {
  list-style: none;
  padding-left: 0;
}
.list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.list-group > .list-group-item {
  padding: 10px;
  border-top: 1px solid #efefef;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.list-group > .list-group-item:after {
  content: '';
  clear: both;
  display: block;
}
.list-group > .list-group-item:first-child {
  border: 0;
}
.nav-tabs-content {
  background-color: #f8f8f8;
  padding: 4px 15px 0;
  margin-bottom: 8px;
}
.tab-content-small {
  table.table:last-child {
    margin: 0;
  }
  .table td {
    padding: 5px 20px;
  }
  table.table thead th:last-child,
  table.table thead th:first-child,
  table.table thead th {
    padding: 3px 20px;
    text-transform: uppercase;
    font:bold 11px/12px @baseFontFamily;
    border: solid #dfdfdf;
    border-width: 1px 0;
  }
}
.nav-tabs-content > li {
  line-height: 16px;
  height: 22px;
  margin-right: -3px;
}
.nav-tabs-content > li > a {
  background: none;
  border-right: 1px solid #e4e4e4;
  padding: 1px 10px 0;
  color: #666;
}
.nav-tabs-content > li:last-child > a {
  border-right: 0;
}

.nav-tabs-content > li.active:focus > a:hover,
.nav-tabs-content > li.active:focus > a:focus,
.nav-tabs-content > li.active:hover > a:focus,
.nav-tabs-content > li.active:hover > a,
.nav-tabs-content > li:hover > a,
.nav-tabs-content > li.active > a:focus,
.nav-tabs-content > li.active > a:hover,
.nav-tabs-content > li.active > a {
  background-color: #fff;
  border: solid #ddd;
  border-width: 1px 1px 0;
  padding-bottom: 1px;
  color: @bodyColor;
  font-weight: bold;
}

.nav-tabs-content > li:hover > a {
  font-weight: normal;
}
.nav-tabs-content > li:hover > a:focus,
.nav-tabs-content > li > a:focus {
  font-weight: normal;
  background: none;
  border: 0;
  border-right: 1px solid #e4e4e4;
}
.badge-enabled,
.badge-tentatively,
.badge-disabled {
  padding: 3px 10px 3px 5px;
  font-size: 12px;
  font-weight: normal;
}
.badge-enabled {
  background-color: #dff2d4;
  color: #4c7940;
}
.badge-tentatively {
  background-color: #faf2cc;
  color: #a7a50a;
}
.badge-disabled {
  color: #aaa;
  background-color: #f2f2f2;
}
.status-disabled {
  color: #aaa;
}
.status-enabled {
  color: #2f8206;
}
.status-tentatively {
  color: #a7a50a;
}
.status-disabled,
.status-tentatively,
.status-enabled {
  margin-left: 5px;
  margin-top:-4px;
  text-shadow:none;
  padding:3px 10px 3px 5px;
  [class^='icon-']:before {
    font-size:12px;
  }
}
.status-enabled [class^='icon-']:before { color:#4a9938; }
.status-disabled [class^='icon-']:before { color:#e37878; }

.dib {
  display: inline-block;
  vertical-align: top;
  padding: 0 5px;
  line-height: 32px;
}

.more-bar-holder {
  .dropdown-toggle {
    padding: 0;
    color:#999;
    font-size:16px;
    line-height:.7em;
    width: 23px;
    height: 19px;
    float: left;
    &:hover,
    &:focus {
      border: 0;
      text-decoration: none;
    }
  }
  .nav {
    margin:0;
  }
  li {
    margin:0 0 5px;
    float: none;
    display: table-cell;
  }
  .nav-pills {
    padding:0 10px;
  }
  /* fix for IE10 in Win8, otherwise breaks actions column */
  .dropdown:not(.open) {
    .launchers-dropdown-menu {
      min-width: 0;
      display: block;
      height: 0;
      width: 0;
      overflow: hidden;
      border-width: 0;
    }
  }
}
.launchers-dropdown-menu {
  min-width: 35px;
}
.launchers-list {
  &.nav > li:first-child > a {
    margin-left: 2px;
  }
  .launcher-item {
    [class^='icon-']:before {
      color:#999;
      font:16px/1em 'FontAwesome';
    }
    a {
      .border-radius(3px);
      border:1px solid #fff;
      &:hover {
        background:#fafafa !important;
        border-color:#ddd;
        [class^='icon-']:before {
          color:#666;
        }
      }
      &:focus {
        background:#fff;
      }
    }
  }
}
.loading-wrapper {
  background: #000;
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.loading-frame {
  position: absolute;
  top: 40%;
  left: 48%;
  width: 180px;
  z-index: 9999;
  .box {
    background: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height:  24px;
  }
}
.holder-height {
  max-height: 200px;
  overflow: auto;
}
.navbar-extra {
  padding: 0;
  margin-bottom: 5px;
  .customer-info-top-actions a {
    height: 24px;
    line-height: 24px;
  }
  .btn {
    padding: 0 11px;
  }
  .icons-holder a {
    height: 24px;
    line-height: 24px;
  }
  > .row > div{
    margin-top: 10px;
    margin-bottom: 5px;
  }
}
.icons-holder .icons-holder-text [class^="icon-"] {
  margin-right: 5px;
}
.brand-extra {
  font-size: 18px;
  font-weight: bold;
  margin-top: 12px;
  margin-right: 15px;
  line-height: 24px;
  color: @bodyColor;
}
.navigation {
  position: relative;
  .top-action-box {
    padding: 3px 12px;
    background-color: #fff;
    float:right;
  }
  .icons-holder-text.btn {
    [class^='icon-'].hide-text {
      float:left;
      margin:0;
      &:before {
        display:inline-block;
        margin:4px 5px 0 0;
        font-size:16px;
        color:#666;
        line-height:19px;
      }
    }
    .icon-chevron-left.hide-text {
      &:before {
        font-size:11px;
        line-size:19px;
      }
    }
    &.btn-success,
    &.btn-primary,
    &.btn-danger {
      [class^='icon-'].hide-text {
        &:before {
          color:#fff;
        }
      }
    }
  }
}
.btn-primary{
  .icon-plus{
    font-size: 12px;
  }
}
.scroll-holder {
  position: relative;
}
.oro-drop > .btn {
  display: inline-block;
  vertical-align: top;
}
.btn-group > .disable-filter {
  .border-right-radius(4px);
  border-style: solid;
  border-color: #cccccc #cccccc #b3b3b3;
  border-width: 1px 1px 1px 0;
  font-size: 18px;
  display: inline-block;
  vertical-align: top;
  height: 28px;
  padding: 4px 2px 0;
  line-height: 28px;
  #gradient > .vertical(#ffffff, #e6e6e6);
}

.modal {
  .border-radius(8px 8px 6px 6px);
  .modal-header {
    padding: 10px 5px 10px 20px;
    .border-radius(6px 6px 0 0);
    .box-shadow(0 0 6px 0 rgba(0, 0, 0, 0.5));
    .close {
      font-size: 25px;
      height: 32px;
      width: 32px;
      margin-top: -6px;
      color: @white;
      text-shadow: 2px 0px 2px rgba(111, 123, 148, 1);
      opacity: 0.9;
      text-align: center;
      line-height: 32px;
      &:hover,
      &:focus {
        color: @white;
        opacity: 0.6;
      }
    }
    h3 {
      font: bold 16px/18px @baseFontFamily;
    }
  }
}

.oro-modal-danger {
  top: 20%;
  background-color: #fde0e0;
  width: 525px;
  .modal-header {
    background-color: #fdcece;
    border-bottom: 1px solid #d59c9c;
  }
  .modal-body {
    color: @bodyColor;
    font-size: 14px;
    padding-left: 20px;
  }
  .modal-footer {
    background: none;
    text-align: center;
    border: none;
    -webkit-box-shadow: none;
    box-shadow:  none;
    padding: 15px 15px 35px;
  }
}
.oro-modal-normal {
  background-color: #fff;
  width: 700px;
  margin-left: -350px;
  top: 20%;
  .modal-header{
    background-color: #303944;
    border-bottom: 1px solid #303944;
    color: #fff;
  }
  .modal-body{
    color: @bodyColor;
    font-size: 14px;
    padding-left: 20px;
  }
}
.modal-primary {
  top: 20%;
  background-color: #f9f9f9;
  width: 525px;
  .modal-header {
    background-color: #fcfcfc;
    #gradient > .vertical(#fcfcfc, #ebebeb);
    border-bottom: 1px solid #b2b2b2;
  }
  .modal-body {
    color: @bodyColor;
    font-size: 14px;
    padding-left: 20px;
  }
  .modal-footer {
    background: none;
    text-align: center;
    border: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
    padding: 15px 15px 35px;
  }
}
.dropup:after,
.dropdown:after {
  content: "";
  clear: both;
  display: inline;
}

.ui-dialog {
  background-color: #fff;
  -webkit-box-shadow:  0px 2px 32px 1px rgba(0, 0, 0, 0.8);
  box-shadow:  0px 2px 32px 1px rgba(0, 0, 0, 0.8);
  font-family:@baseFontFamily !important;
  .alert {
    background-color: @warningBackground;
    background-image: url('../../img/warning-ico.png');
    background-position: 10px 50%;
    background-repeat: no-repeat;
    padding: 12px 35px 12px 37px;
    border:1px solid @warningBorder;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    .border-radius(0);
    .close {
      font-size: 18px;
      color: @warningClose;
      opacity: 1;
    }
  }
  .alert-success {
    background-color: @successBackground;
    background-image: url('../../img/sucsses-ico.png');
    border-color: @successBorder;
    color: @successText;
    .close {
      color: @successClose;
    }
  }
  .alert-danger,
  .alert-error {
    background-image: url('../../img/error-ico.png');
    background-color: @errorBackground;
    border-color: @errorBorder;
    color: @errorText;
    .close {
      color: @errorClose;
    }
  }
  .ui-widget-header {
    border: 0;
  }
  .widget-actions.form-actions {
    margin-bottom: 0;
    background: #fafafa;
    padding: 10px;
    .border-radius(0 0 @WindowBorderRadius @WindowBorderRadius);
  }
  .ui-dialog-titlebar {
    margin:-1px -1px 0 -1px;
    border-bottom: 1px solid #000;
    background-color: @titleBackgroundStart;
    #gradient > .vertical(@titleBackgroundStart, @titleBackgroundEnd);
    padding: 6px 15px;
  }
  .ui-dialog-title {
    color: #fff;
    font-size: @baseFontSize;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ui-dialog-titlebar-buttonpane {
    right: 7px !important;
    top: 5px !important;
    margin: 0 !important;
    border:1px solid #272e36;
    height:auto;
    .border-radius(4px);
    #gradient > .vertical(#838d98, #46515d);
    [class*='ui-dialog-titlebar-'] {
      width:auto !important;
      height:auto !important;
      padding:0 !important;
      margin:0 !important;
      .ui-icon { display:none; }
      .ui-button-text { display:none; }
      &:before {
        display:inline-block;
        border-right:1px solid #272e36;
        width:24px;
        height:22px;
        color:#fff;
        font:14px 'FontAwesome';
        text-align:center;
        line-height:22px;
        text-shadow:0 1px 0 #45505c;
      }
      &:last-child:before { .border-radius(3px 0 0 3px); }
      &:first-child:before { border-right:0; .border-radius(0 3px 3px 0); }
    }
    .ui-dialog-titlebar-close:before {
      content: "\f00d";
    }
    .ui-dialog-titlebar-maximize:before {
      content: "\f0b2";
    }
    .ui-dialog-titlebar-minimize:before {
      content: "\f150";
    }
    .ui-dialog-titlebar-restore:before {
      content: "\f151";
    }
  }
  &.ui-dialog-normal {
    [class*='ui-dialog-titlebar-'] {
      &:hover:before {
        #gradient > .vertical(darken(#838d98,5%), darken(#46515d,5%));
      }
      &:active:before,
      &:focus {
        .box-shadow(inset 0 2px 4px 0 darken(#46515d,10%));
      }
    }
  }
  .form-horizontal {
    .control-group {
      margin-bottom: 10px;
      .control-label {
        width:130px;
        margin:0 12px 0 0;
      }
      .controls {
        margin-left: 142px;
        .control-label {
          width: auto;
        }
        select{
          width: 100%;
          max-width: 282px;
        }
      }
    }
  }
  .bottom-action {
    padding: 10px 10px 25px 10px;
    overflow: hidden;
    border-top: 1px solid #dfdfdf;
    background: #fafafa;
    font-family:  @baseFontFamily;
  }
  .ui-widget-content {
    border: 0;
  }
  .ui-widget-content.ui-helper-clearfix {
    .border-radius(0 0 5px 5px);
  }
}

.ui-dialog-minimized {
  margin:0 4px !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  -moz-box-shadow:none !important;
  .ui-dialog-titlebar {
    margin-bottom:-2px;
    padding:2px 80px 2px 10px !important;
    border-bottom:1px solid #d6d6d6 !important;
    background:#d6d6d6 !important;
    .ui-dialog-title {
      padding-top:2px;
      color:#666;
      font-size:12px;
      text-shadow:0 1px 0 #ddd;
    }
    .ui-dialog-titlebar-buttonpane {
      background:none;
      border:none;
      right:2px !important;
      top:2px !important;
      [class^='ui-dialog-titlebar-'] {
        &:before {
          border-right:none;
          color:#999;
          font-size:@baseFontSize;
          text-shadow:0 1px 0 #ddd;
        }
        &:hover:before,
        &:active:before,
        &:focus:before {
          color:#666;
        }
      }
    }
  }
  &.ui-widget-content { border:none !important; }
}
.ui-dialog.ui-widget-content {
  border: 1px solid #bbb;
  background-color: #fafafa;
}
.user-info-state {
  clear: right;
  .inline-decorate-container{
    margin-top:10px;
    margin-bottom:-10px;
    .inline-decorate{
      margin-bottom:10px;
    }
  }
}
.user-profile-cols .label {
  display:block;
  background:none;
  padding:0 0 7px 0;
  text-shadow:none;
  color:@bodyColor;
  font-weight:normal;
  font-size:@baseFontSize;
  line-height:1.2em;
}

.tag-sort-actions {
  margin-top: 5px;
  margin-bottom: 0;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  &:after{
    content: "";
    display: block;
    clear: both;
  }
  li {
    &:first-child{
      a{
        border-width: 1px;
      }
    }
    a {
      display:inline-block;
      .border-radius(0);
      background:#fafafa;
      outline: none;
      padding:8px 12px;
      color:#555;
      margin-bottom:0;
      border: solid #ddd;
      border-width: 1px 1px 1px 0;
      line-height:20px;
      &.active {
        border-bottom-color:#fff;
        .box-shadow(none);
        color:@bodyColor;
        background:#fff;
        text-decoration: none;
      }
      &:hover {
        text-decoration: none;
        color:@bodyColor;
      }
    }
  }
  &.inline li {
    float: left;
    margin-bottom: -1px;
    padding:0;
    line-height: 20px;
  }
}
.tag-view .tags-holder{
  -webkit-box-shadow: none;
  box-shadow:none;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: solid #ddd;
  border-width: 0 1px 1px;
  padding: 5px 10px 10px;
  overflow: hidden;
}
.tags-overlay .well{
  -webkit-box-shadow: none;
  box-shadow: none;
  padding-top: 4px;
}
.tags-overlay .tag-list,
.tag-view  .tag-list {
  margin-bottom: 0;
  li {
    padding: 5px 5px 0 0;
  }
  a:hover span.label {
    background:#e4e4e4;
  }
  span.label {
    background:#eee;
    .border-radius(4px);
    font-size:12px;
    font-weight:normal;
    text-shadow:none;
    padding:4px 6px;
    border:none;
    color:@bodyColor;
    .select2-search-choice-close {
      position: relative;
      display: inline-block;
      right: -2px;
      top: 0;
      &:before {
        width:20px;
        content: "\f00d";
        font:11px 'FontAwesome';
        color:#ccc;
      }
      &:hover:before {
        color:#999;
      }
    }
  }
}

.sub-title a { color:#888; }
.customer-info {
  padding-top: 4px;
  padding-left: 60px;
  padding-bottom: 0;
  line-height: 18px;
  &.customer-simple {
    padding:0 4px 0 0;
  }
  .top-row {
    overflow: hidden;
  }
  .sub-title {
    font-size: 17px;
    color: #999;
    display: inline-block;
    margin-bottom: 3px;
  }
  .separator {
    padding: 0 3px;
    color: #999;
    font-size: 18px;
  }
  .user-name {
    margin: 0 10px 3px 0;
    font-size: 19px;
    min-height: 15px;
    line-height: 22px;
    display: inline-block;
    float: none !important;
    font: bold 17px/18px Helvetica, Arial, sans-serif;

  }
  .dropdown.open .caret,
  .user-name .caret,
  .user-name:hover .caret {
    border-top-color: #444 !important;
    border-bottom-color: #444 !important;
  }
  .visual {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    float: left;
    position: relative;
    width: 60px;
    margin: 0 0 0 -60px;
    img {
      margin-top:-4px;
      .border-radius(3px);
      width: 45px;
    }
  }
  .nav {
    margin: 0;
  }
  ul.inline {
    margin-bottom:0;
    color: #777;
    li {
      padding: 0 10px;
      margin-bottom: 4px;
      border-left: 1px solid #e6e6e6;
      font-size: 11px;
      line-height: 14px;
      &:first-child {
        padding: 0 10px 0 0;
        border: 0;
      }
    }
  }
}
ul.inline-decorate {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.inline-decorate > li {
  padding-left: 10px;
  margin-left: 8px;
  display: inline;
  border-left: 1px solid #e6e6e6;
}
ul.inline-decorate > li:first-child {
  padding: 0;
  border: 0;
  margin: 0;
}
ul.inline-extra:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
ul.inline-extra {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #666;
  width: 100%;
  span.cb {
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
    color: #aaa;
  }
  & > li {
    float: left;
    padding: 0 10px;
    &:first-child {
      padding: 0 10px 0 0;
    }
  }
}
.scrollspy-nav {
  background-color: #f6f6f6;
  border-bottom: 1px solid #c4c4c4;
  margin-bottom: 0;
  .box-shadow(0 2px 0 rgba(0, 0, 0, .03));
  .navbar-inner {
    padding: 0;
    border: 0;
    background: 0;
    .container-fluid {
      padding:0 15px;
      .nav {
        > li a {
          padding:5px 15px;
          color:#666;
          font-size:@baseFontSize;
          &:hover {
            border-bottom:3px solid #ddd;
            background:none;
            padding-bottom:2px;
            color: #444 !important;
          }
        }
        .active a,
        .active a:hover {
          border-bottom:3px solid #555;
          background:none;
          padding-bottom:2px;
          color:#111;
          font-weight:bold;
        }
      }
    }
  }
}
.customer-info-actions {
  background-color: #f6f6f6;
  border-bottom: 1px solid #ebebeb;
  .alert {
    margin-bottom: 0;
  }
}
.customer-info-top-actions .btn .caret {
  margin-top: 10px;
}
.customer-info-top-actions  .btn-group > .disable-filter {
  height: 21px;
  line-height: 21px;
  padding: 3px 2px 0;
}
.cb {
  display: block;
  clear: both;
}
.scrollspy {
/*height: 500px;*/
  position: relative;
  overflow: auto;
}
.btn-action {
  color: #777 !important;
  font-size: 20px;
  padding: 0 5px !important;
}
.btn-action:hover {
  text-decoration: none !important;
}
.navbar-extra-right {
  padding-right: 23px;
  .title-buttons-container {
    .btn-group{
      margin-left: 8px;
    }
    .btn-group .btn-group {
      margin-left: 0;
    }
  }
}
.row-oro {
  width: 100%;
  margin: 0;
}
.clearfix-oro {
  width: 100%;
}
.row-oro:after,
.clearfix-oro:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  line-height: 0;
}

label.required em,
.form-horizontal label.required em {
  color: #c30b25;
  font-size: 15px;
  line-height: 1px;
}

/*.form-horizontal .span6 .controls div.selector {
  width:294px;
  select {
    width:292px;
  }
}*/
.controls .removeRow{
  position: relative;
  margin: 0 0 0 -24px;
}
/*.form-horizontal .span6 .oro-multiselect-holder input[type="email"],
.form-horizontal .span6 .oro-multiselect-holder input[type="text"],
.form-horizontal .span6 .oro-multiselect-holder input[type="password"] {
  margin: 0 0 5px 0;
}*/
input, textarea, .uneditable-input { width:280px; }
body .mce-tinymce { width: 292px }
textarea {
  height: 150px;
  resize: vertical;
  text-align: left;
  vertical-align: top;
}
.scrollspy-title {
  border:1px solid #e5e5e5;
  border-width:1px 0;
  margin:0 -20px 0px -20px;
  background:#fafafa;
  /*#gradient > .vertical(#fafafa, #f7f7f7);*/
  padding:4px 20px;
  color:lighten(@bodyColor,20%);
  text-shadow:0 1px 0 #fff;
  line-height:18px;
}
.scrollspy-nav-target {
  height: 20px;
}
.oro-clearfix-width:after,
.oro-clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.oro-clearfix-width {
  height: 1%;
}
.oro-clearfix {
  width: 100%;
}
.horizontal .oro-clearfix input[type="checkbox"],
.horizontal .oro-clearfix input[type="radio"] {
  margin: -4px 6px 0 0;
}
.horizontal .oro-clearfix .label {
  float: left;
}
.controls {
  .horizontal {
    padding-top: 7px;
  }
  > input[type=checkbox]:only-child {
    margin-top: 10px;
  }
}
.btn-group > .btn-small {
  font-size: @fontSizeSmall;
}
.btn-group > a.btn {
  height: 28px;
  line-height: 26px;
}
.oro-action .btn-group > .btn,
.oro-action .btn-group > .dropdown-menu,
.oro-action .btn-group > .popover {
  font-size: 14px;
}
.oro-action .btn-group {
  margin-right: 0;
}
.popup-box-errors {
  width: 480px;
  margin: 0 auto;
  border: 1px solid #bbb;
  padding: 40px 0;
  background-color: #fff;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, 0.5);
  box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, 0.5);
}
.popup-box-errors .popup-content {
  background-color: #fff;
  font: 14px/20px @baseFontFamily;
  margin: 0 30px;
}
.popup-box-errors h1 {
  font:bold 20px/46px @baseFontFamily;
  margin: 0 0 10px;
}
.popup-box-errors h1 span {
  font-size: 45px;
  margin: 0 12px 0 0;
}
.top-messages {
  margin-bottom: 0;
}
/* custom form elements */
.selector,
.selector *,
.uploader,
.uploader * {
  margin: 0;
  padding: 0;
}
/* Uploader */

div.uploader {
  height: 28px;
  border: 1px solid #ccc;
  background-color: #fff;
  float: left;
  position: relative;
  overflow: hidden;
  cursor: default;
  line-height: 28px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  vertical-align: middle;
  display: inline-block;
}

div.uploader span.action {
  float: left;
  height: 28px;
  border-left: 1px solid #ccc;
  padding: 0 10px;
  overflow: hidden;
  cursor: pointer;
  #gradient > .vertical(#ffffff, #e6e6e6);
}
div.uploader.active  span.action {
  #gradient > .vertical(#e6e6e6, #ffffff);
}
div.uploader span.filename {
  padding: 0px 10px;
  float: left;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  width: 202px;
}

div.uploader input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  float: right;
  height: 25px;
  border: none;
  cursor: default;
}
/* Select */

select {
  height: 26px;
  line-height: 26px;
}
div.selector {
  line-height: 30px;
  height: 30px;
  position: relative;
  width: 235px;
  border: 1px solid #ddd;
  #gradient > .vertical(#ffffff, #f3f3f3);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 0;
  margin: 0;
}

div.selector span {
  height: 30px;
  display: block;
  line-height: 30px;
  .box-sizing(border-box);
  padding: 0 5px 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  &:after {
    margin: 3px 2px 0 0;
    display:inline-block;
    font:16px 'FontAwesome';
    content: "\f0dd";
    position: absolute;
    right: 5px;
  }
}

div.selector select {
  position: absolute;
  top: 0px;
  left: -2px;
  opacity: 0;
  z-index: 1;
  padding: 0 5px;
}

/* start uniformjs customization (see documentation http://uniformjs.com/ selectAutoWidth property for explain this styles) */
.controls select {width: 282px;}
.controls .selector select {width: 100%;}
/* end uniformjs customization */

div.selector:active,
div.selector.active {
  background-position: -483px -156px;
}

div.selector.focus, div.selector.hover, div.selector:hover {
  background-position: -483px -182px;
}

div.selector.focus:active,
div.selector.focus.active,
div.selector:hover:active,
div.selector.active:hover {
  background-position: -483px -208px;
}

div.selector.disabled span {
  color:#aaa;
  &:after {
    color:#ddd;
  }
}

.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

.row-fluid.row-fluid-divider {
  background: url("../../img/vertical-separator.png") repeat-y 50% 0;
}
/* fix incorrect aligment of fluid divider line in Firefox */
@-moz-document url-prefix() {
  .row-fluid.row-fluid-divider {
    background-position: calc(~"50% - 1px") 0;
  }
}
h5.user-fieldset {
  font-weight:bold;
  font-size:15px;
  line-height:15px;
  margin: 0 10px 20px 0;
}
/*.user-fieldset span {
  display:block;
  position:relative;
  background: #fff;
  padding: 0 10px 0 0;
  &:before {
    display:block;
    position:absolute;
    top:2px;
    left:0;
    right:0;
    bottom:auto;
    border-bottom:1px solid #ddd;
  }
}*/
.page-size .dropdown-menu {
  min-width: 20px;
}

input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus,
div.selector.focus,
div.uploader.focus,
.select2-container-active .select2-choice,
.select2-container-active .select2-choices
{
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  color: #555;
}
.separator-btn {
  border-left: 1px solid #e9e9e9;
  margin: 4px 8px 0;
  height: 24px;
}
.title-buttons-container{
  .pull-left > .separator-btn{
    margin-right: 1px;
  }
}
.pagination-centered > label {
  margin-right: -4px;
  padding-left: 5px;
}
.alert-error > ul{
  margin-bottom: 0;
}
.oro-multiselect {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.oro-multiselect-holder .selector {
  display: inline-block;
  width: auto;
  overflow: hidden;
  vertical-align: middle;
}
/* validation-error */
label.validation-error {
  color: #C81717 !important;
}
.validation-error {
  .error {
    border: 1px solid #e9322d;
    .border-radius(3px);
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
    color: #555;
    &.validate-group {
      margin-left: -6px;
      padding-left: 5px;
    }
  }
  .input-append.error, .input-prepend.error {
    border-width: 0;
  }
  .input-append.error > *, .input-prepend.error > * {
    border: 1px solid #e9322d;
  }
  div.selector {
    display: inline-block;
    vertical-align: middle;
  }
}
/*.validation-error div.selector {
  border: 1px solid #d32121;
  outline: thin dotted \9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
}*/

.validation-tooltip {
  font-size:0;
  text-indent:-9999em;
  &:before {
    display: inline-block;
    margin-left:8px;
    font:normal 18px/1em 'FontAwesome';
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    content: "\f06a";
    color:#c81717;
    text-decoration: inherit;
    text-indent:0;
    speak: none;
  }
}

.validation-error .validation-tooltip {
  display: inline-block;
}
.validate-group {
  display: inline-block;
  vertical-align: middle;
  min-width: 230px;
}
.validate-group:after {
  content: "";
  clear: both;
  display: block;
}
label.checkbox.error,
label.radio.error {
  padding-right: 12px;
}
.scrollable-container {
  .oro-subtitle {
    margin:0 5px 0 0;
    font-size: 24px;
    line-height: 28px;
    font-size: 20px;
    padding: 0;
  }
  &.disable-scroll {
    overflow: hidden !important;
  }
}

.collection-fields-list {
  input[type='email'],
  input[type='text'] {
    float: left;
  }
  select,
  .selector,
  button {
    float: left;
    margin: 0 0 0 4px;
  }
}
.choice-filter {
  select,
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  .uneditable-input {
    height:19px;
  }
}
.choice-filter .input-append,
.choice-filter .input-prepend {
  margin-bottom: 0;
}
.input-append .add-on,
.input-prepend .add-on {
  height:30px;
  input[type='checkbox'],
  input[type='radio'] {
    margin-top:-1px;
  }
}
.add-list-item {
  i.icon-plus{
    font-size: 12px;
  }
}
.oro-item-collection {
  &>div {
    position: relative;
    padding: 0;
    margin: 0;
    border: none;
  }
  .add-list-item {
    margin-left: 183px;
  }
  .removeRow {
    text-indent:-999;
    font-size:0;
    line-height:0;
    margin: 0 0 0 5px;
    &:after {
      display:inline-block;
      font:14px/1em 'FontAwesome';
      color:#ddd;
      content: "\f00d";
      text-indent:0;
    }
    &:hover:after {
      color:#888;
    }
  }
  .addAfterRow {
    &:after {
      content: "\f067";
    }
    text-indent:-999;
    font-size:0;
    line-height:0;
    margin: 0 0 0 0;
    &:after {
      display:inline-block;
      font:14px/1em 'FontAwesome';
      color:#ddd;
      content: "\f067";
      text-indent:0;
    }
    &:hover:after {
      color:#888;
    }
  }
  .row-oro.oro-multiselect-holder {
    margin: 0 0 5px;
  }
}

.oro-address-collection.oro-item-collection {
  &>div {
    position: relative;
    padding: 10px 15px 0 0;
    margin: 0 0 20px;
    border: 1px solid #e6e6e6;
    background: #f8f8f8;
    border-radius: 4px;
  }
  .add-list-item {
    margin-left: 183px;
  }
  .removeRow {
    position: absolute;
    width: 28px;
    top: 4px;
    right: 4px;
    text-decoration: none;
    &:after {
      color: #bbb;
    }
  }
}

.form-horizontal .control-group {
  margin: 0;
  max-width:900px;
}
.form-container .control-group {
  margin: 0 0 10px;
}

.breadcrumb {
  float: left;
  background: none;
  margin: 0;
  padding: 6px 15px 6px 20px;
}
.breadcrumb > li.active,
.breadcrumb > li {
  color: #777;
  font: 11px/14px @baseFontFamily;
  word-break: break-all;
}
.breadcrumb > li > .divider {
  color: #777;
  padding: 0 1px 0 4px;
}
.btn.favorite-button,
.btn.minimize-button {
  background: none;
  padding: 1px;
  border: 0;
  -webkit-box-shadow:  none;
  box-shadow:  none;
  height: 26px;
  width: 26px;
  &:hover{
    background: #eee;
    .icon-star:before,
    .icon-pushpin:before {
      color: #d7d7d7;
    }
  }
}
.btn.favorite-button {
  padding: 1px 0;
}
.btn.favorite-button .icon-star:before,
.btn.minimize-button .icon-pushpin:before {
  color:#e7e7e7;
  font-size:19px;
}
.btn.favorite-button.gold-icon i:before,
.btn.favorite-button.gold-icon:hover i:before,
.btn.minimize-button.gold-icon i:before,
.btn.minimize-button.gold-icon:hover i:before{
  color:#ffd631;
}
.breadcrumb-pin {
  border-bottom: 1px solid #f2f2f2;
  padding:0;
  background-color: #fff;
  #bookmark-buttons{
    float: right;
  }
  #breadcrumb {
    float:left;
  }
  &:after {
    display: block;
    content: "";
    clear: both;
  }
}

.box-type1 {
  background-color: #fff;
  .title {
    font:bold 14px/18px Helvetica, Arial, sans-serif;
    padding:10px 15px;
  }
  .box-content {
    padding: 20px 15px;
    &.box-split-content {
      background: url("../../img/vertical-separator.png") repeat-y center 0;
      .responsive-small &, .responsive-big & {
        background-image: none;
      }
    }
  }
  .list-inline {
    margin-left: 0;
  }
}

#orocrm_contact_address_form { min-width:400px; }
.float-holder {
  float: left;
  .removeRow {
    margin: 0;
  }
}
pre.email-body {
  width: 100%;
  min-height: 5em;
  overflow: auto;
}
iframe.email-body {
  width: 100%;
  min-height: 5em;
  #font > #family > .monospace();
  color: @grayDark;
  padding: (@baseLineHeight - 1) / 2;
  margin: 0 0 @baseLineHeight / 2;
  display: block;
  font-size: @baseFontSize - 1; // 14px to 13px
  line-height: @baseLineHeight;
  background-color: #f5f5f5;
  border: 1px solid #ccc; // fallback for IE7-8
  border: 1px solid rgba(0,0,0,.15);
  .border-radius(@baseBorderRadius);
}
.ui-dialog-content {
  .email-body-holder {
    .control-group {
      .control-label {
        width: 100px;
      }
      .controls {
        margin-left: 112px;
      }
    }
    .email-body {
      margin: 0;
    }
  }
}
.security-row {
  display: inline-block;
  width: 30%;
  margin-bottom:25px;
  &>div {
    display: inline-block;
    margin-right: 20px;
  }
  input[type="checkbox"]{
    margin: 0;
  }
}

.security-permission {
  width: 120px;
}

span.validation-failed {
  color: @errorText;
  display: block;
  margin: 5px 0 5px 14px;
  line-height: 1.1em;
  clear:both;
  &:before {
    content: "\f00d";
    color: @errorText;
    font: normal 1.15em/1em 'FontAwesome';
    display: inline-block;
    width: 14px;
    margin-left: -14px;
  }
}
.default-field{
  background: #C3C3C3;
}
.tab-container{
  .nav-tabs > .active > a,
  .nav-tabs > .active > a:hover,
  .nav-tabs > .active > a:focus{
    background: #EFEFEF;
  }
  .nav > li > a:focus{
    background: #efefef;
  }
}
.responsive-cell .box-type1{
  .title{
    overflow: hidden;
    .widget-title{
      line-height: 21px;
    }
  }
  .filter-box {
    padding: 5px 20px 5px 130px;
    margin: 5px;
  }
  /*.tab-container{
    .nav-tabs > li > a{
      color: #577bd5;
      font-size: 13px;
      padding-left: 6px;
      padding-right: 6px;
      font-weight: normal;
      &:hover{
        text-decoration: underline;
      }
    }
    .nav-tabs > .active > a,
    .nav-tabs > .active > a:hover,
    .nav-tabs > .active > a:focus{
      color: #577bd5;
      font-size: 13px;
      background: none;
      border: 0;
      font-weight: bold;
      text-decoration: underline;
    }
  }*/
  .tab-container{
    .nav-tabs > .active > a,
    .nav-tabs > .active > a:hover,
    .nav-tabs > .active > a:focus{
      background: #fff;
    }
  }
}

.control-group.create-select-entity {
  max-width: inherit;
}

.create-select-entity-container {
  padding: 5px 30px 30px 30px;
  border: 1px solid #e6e6e6;
  .border-radius(3px);

  .buttons-container {
    margin-left: -20px;
    margin-bottom: 30px;
    a {
      margin-right: 20px;
    }
  }

  .control-label {
    width: 160px !important;
  }

  .box-type1 .title {
    padding-left: 0;
    padding-top: 0;
  }
}

/** Gray line after title centered vertically */
.create-select-entity .box-type1 .title,
.create-select-entity h5 {
  height: 1px;
  margin-bottom: 20px;
  padding: 0;
  position: relative;
  text-align: left;
  border-bottom: #e6e6e6 1px solid;
  overflow: visible;
  width: 90%;
}

.create-select-entity .box-type1 .title .widget-title,
.create-select-entity h5 span {
  background: white;
  display: inline-block;
  line-height: 15px;
  padding-right: 15px;
  position: relative;
  top: -0.6em;
}

/** create-select buttons visibility */
.create-select-entity .entity-create-block,
.create-select-entity .entity-select-block,
.create-select-entity .entity-view-block
{
  display: none;
}

.create-select-entity.create .entity-create-block,
.create-select-entity.grid .entity-select-block,
.create-select-entity.view .entity-view-block
{
  display: block;
}

.create-select-entity.create .entity-cancel-btn,
.create-select-entity.view .entity-cancel-btn,
.create-select-entity.create .entity-create-btn,
.create-select-entity.grid .entity-select-btn {
  display: none;
}
.icon-bars:before {
  content: "\f0c9";
  font-size: 14px;
  font-family: 'FontAwesome';
  line-height: 21px;
  font-style: normal;
}
.oro-tabs {
  .nav-tabs {
    padding-left: 1px; // compensate tabs margin-left: -1px
    margin-bottom: -1px; // should overlay tab-content's top border
    border-bottom: 1px solid #ddd;
    float: left;
  }
  .nav-tabs > li > a,
  .nav-tabs > li > a:hover,
  .nav-tabs > li > a:focus,
  .nav-tabs-dropdown > li.dropdown.open > a {
    color: @gray;
    background-color: #fafafa;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-radius: 0px;
    margin-right: 0px;
    margin-left: -1px;
    height: 38px;
  }

  .nav-tabs-dropdown {
    height: 38px;
    overflow: hidden;
    .dropdown-toggle:focus {
      font-weight: normal;
    }

    li.dropdown.open .caret {
      border-top-color: @linkColor !important;
      border-bottom-color: @linkColor !important;
    }

    li.dropdown.open.active .caret {
      border-top-color: @gray !important;
      border-bottom-color: @gray !important;
    }
  }

  .nav-tabs > .active > a,
  .nav-tabs > .active > a:hover,
  .nav-tabs > .active > a:focus,
  .nav-tabs > li.dropdown.open.active > a {
    color: @gray;
    border-bottom: 1px solid #fff;
    border-right-color: #ddd;
    border-top-color: #ddd;
    background-color: #fff;
    outline: none;
  }

  .tab-content {
    overflow: initial;
    border: 1px solid #ddd;
    clear: both;
  }

  .tab-pane {
    min-height: 104px;
  }
}

.nav-tabs {
  padding-left: 1px; // compensate tabs margin-left: -1px
  margin-bottom: -1px; // should overlay tab-content's top border
  border-bottom: 1px solid #ddd;
  float: left;
}
.tab-content {
  border-top: 1px solid #ddd;
  clear: both;
}
.nav-tabs > li > a.widget-component-processing{
  background: #ccc !important;
  border-bottom: 1px solid transparent !important;
  /* following two lines allow this tab handle overlay .tab-content while it is loading */
  position: relative;
  z-index: 1;
}
// capitalize buttons, labels, titles, breadcrumb for English language
.lang-en {
  .btn, .btn-group a,
  #main label,
  .oro-subtitle, .title, .ui-dialog-title,
  .btn-group .dropdown-menu button,
  .breadcrumb li {
    text-transform: capitalize;
  }
}
.pull-left-extra{
  margin-left: 20px;
}

.tooltip-icon {
  color: #6b92d0;
  font-size: 13px;
}

#container .popover {
  // prevent menu and loading wrapper overlapping
  z-index: 800;
}

.popover {
  max-width: 315px; /* little increase to fit usual content */
  .popover-content {
    padding: 13px 30px 13px 15px;
    height: 100%;
  }
  .oro-popover-content {
    overflow-y: auto;
    height: 100%;
  }
  .popover-close {
    position: absolute;
    top: 9px;
    right: 9px;
    cursor: pointer;
  }
}

label .popover-content {
  text-transform: none;
}

.entity-field-path {
  > * {
    &:before {
      content: '/';
      display: inline;
      padding: 0 3px;
    }
    &:first-child {
      &:before {
        display: none;
      }
    }
    &:last-child {
      &:before {
        content: '>';
        font-weight: normal;
      }
    }
  }
}
.list-widget .widget-actions-section {
  a.btn {
    line-height:1em;
    height:auto;
    border: 0;
    background: 0;
    .box-shadow(none);
    padding: 0 0 0 10px;
    [class^='icon-'] {
      &:before {
        opacity: 0.6;
        font-size:15px;
      }
      &:hover {
        &:before {
          opacity: 1;
        }
      }
    }
  }
  a.btn.disabled,
  a.btn[disabled] {
    cursor: not-allowed;
    [class^='icon-'] {
      &:before {
        opacity: 0.3;
      }
      &:hover {
        &:before {
          opacity: 0.3;
        }
      }
    }
  }
}
.list-box {
  &:after {
    content: "";
    clear: both;
    display: block;
  }
  .list-item {
    border-bottom: 1px solid #eeeeee;
    padding: 15px;
    .box-sizing(border-box);
    width: 100%;
    &:hover {
      background:#f8f8f8;
    }
    .actions {
      position:relative;
      float: right;
      margin-right:-4px;
      z-index:99;
      .btn {
        line-height:1em;
        height:auto;
        border: 0;
        background: 0;
        .box-shadow(none);
        padding: 0;
        [class^='icon-'] {
          &:before {
            opacity: 0.6;
            font-size:15px;
          }
          &:hover {
            &:before {
              opacity: 1;
            }
          }
        }
      }
      .btn.disabled,
      .btn[disabled] {
        cursor: not-allowed;
        [class^='icon-'] {
          &:before {
            opacity: 0.3;
          }
          &:hover {
            &:before {
              opacity: 0.3;
            }
          }
        }
      }
    }
  }
}

.entity-create-or-select-container .entity-create-btn {
  padding: 0 6px;
  margin-left: 3px;
  height: 30px;
}

.entity-create-enabled .input-prepend .select2-container,
.entity-create-enabled .input-append .select2-container {
  width: 228px;
}

.invisible {
  opacity: 0;
}
// dropdowns should be able to exceed accordion body area
.accordion-body {
  .clearfix();
  // once accordion is opened and animation is finished
  &[style="height: auto;"] {
    overflow: visible;
  }
  &.in {
    // fixes expand in FF
    min-height: 1px;
  }
}
.icon-with-counter {
  position: relative;
  white-space: nowrap;
  .item-counter {
    font-size: 9px;
    width: auto;
    display: inline-block;
    border-radius: 8px;
    position: relative;
    margin-left: -7px;
    margin-right: -5px;
    top: -1px;
    line-height: 10px;
    padding: 0 3px;
  }
}

@import "mixins";
// Base
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  color: @bodyColor;
  margin: 0;
  padding: 0 ;
  min-width: 980px;
  background:#fff;
}
body.error-page {
  background-color: #eee;
  #container{
    position: relative;
    .popup-frame{
      position: relative;
      top: 50%;
    }
    .popup-holder{
      position: relative;
      margin: -97px 0 0;
    }
  }
  #main {
    background: none;
  }
}
a {
  color: @linkColor;
  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }
  &.no-action {
    color: @textColor;
  }
}
form {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  // supress bootstrap's optimizeLegibility text-rendering
  // it gives bad results on small size fonts
  // that could be applied only for fonts larger than 20px
  text-rendering: auto;
}
#main {
  background-color: #fff;
}
.dropdown-menu {
  margin-top:-1px;
  .border-radius(3px);
  z-index: @oroZindexDropdown;
  li.dropdown {
    position: relative;
    & > a{
      padding-right: 10px;
    }
  }
  li.dropdown:after{
    content: "\f054";
    font-family: 'FontAwesome';
    display: block;
    font-size: 11px;
    position: absolute;
    right: 5px;
    top: 9px;
  }
  & > li > a{
    & > i[class^="icon-"] {
      min-width: 17px;
    }
  }
}
.dropdown-menu__floating {
  margin-top: 0;
  > li > a, > li > button {
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 12px;
    color: #444;
    text-transform: capitalize;
  }
}
.dark {
  background-color: #f6f5f5;
}
.nowrap {
  white-space: nowrap;
}
label.disabled {
  cursor: default;
}
.ui-sortable-handle.disabled {
  cursor: not-allowed;
}

// Bootstrap - Form
label, input, button, select, textarea { font-size:13px;}
.form-horizontal .control-label {
  font-size:13px;
  text-align:left;
  line-height:1.2em;
}
.control-group .controls p.control-label{
  width: auto;
}
.form-horizontal {
  .control-group {
    label.control-label {
      float:left;
      width:160px;
      padding-top: 7px;
      color: #777;
      font-weight: normal;
      font-size: 13px;
      text-align:right;
    }
    .control-label.wrap {
      float:left;
      padding-top: 6px;
      color: #777;
      font-weight: normal;
      font-size: 13px;
      line-height: 20px;
      text-align: right;
      .tooltip-icon {
        margin-right: 5px;
        cursor: pointer;
      }
      label {
        display: inline;
      }
    }
    .controls {
      margin-left:170px;
      &.autocomplete-box{
        margin-bottom: 10px;
        margin-top: 10px;
      }
      .control-label {
        padding-top: 7px;
        width: 100%;
        word-wrap: break-word;
        padding-left: 5px; // to get nice hover background
        box-sizing: border-box;
        &.html-property {
          overflow: auto;
        }
      }
      .control-label.wrap {
        width: 130px;
      }
      label.control-label {
        width: auto;
      }
    }
  }
}
.simplecolorpicker {
  &.icon {
    &[data-color=''],
    &[data-color='#FFFFFF'],
    &[data-color='#ffffff'] {
      border: 1px solid rgba(0,0,0,0.2);
    }
    &[data-color='']:hover,
    &[data-color='#FFFFFF']:hover,
    &[data-color='#ffffff']:hover {
      border: 1px solid rgba(0,0,0,0.2) !important;
    }
  }
  span.color {
    &[data-color=''],
    &[data-color='#FFFFFF'],
    &[data-color='#ffffff'] {
      border: 1px solid rgba(0,0,0,0.2);
    }
    &[data-color='']:hover,
    &[data-color='#FFFFFF']:hover,
    &[data-color='#ffffff']:hover {
      border: 1px solid rgba(0,0,0,0.2) !important;
    }
    &[data-selected]:after {
      color: inherit !important;
    }
  }
}
i.color {
  display: block;
  border: 1px solid rgba(0,0,0,0.2);
  width: 18px;
  height: 18px;
  margin-top: -3px;
}
.context-menu,
.controls {
  .simplecolorpicker.icon,
  .simplecolorpicker span.color {
    width: 18px;
    height: 18px;
    margin: 0 3px 3px 0;
  }
  .simplecolorpicker.icon {
    margin-top: 3px;
  }
  .simplecolorpicker span.vr {
    margin: 0 5px 0 2px;
    padding: 3px 0 0 0;
  }
  .simplecolorpicker.fontawesome {
    span.color {
      position: relative;
      margin: 0 3px -3px 0;
    }
    span.color[data-selected]:after {
      margin: 0;
      display: block;
      position: absolute;
      top: -2px;
      left: 2px;
    }
  }
  .simplecolorpicker.inline {
    padding-top: 3px;
    padding-bottom: 0px;
    margin-bottom: -3px;
    max-width: 263px;
  }
  .simplecolorpicker.inline.with-empty-color,
  .simplecolorpicker.inline.with-custom-color {
    max-width: 294px;
  }
  .simplecolorpicker {
    .minicolors-swatch {
      position: relative;
      vertical-align: top;
      background-position: -62px -1px;
    }
  }
  .minicolors {
    .minicolors-panel {
      padding: 5px;
      border: 1px solid rgba(0,0,0,0.2);
      box-shadow: 0 5px 10px rgba(0,0,0,0.2);
      .minicolors-grid {
        top: 6px;
        left: 6px;
      }
      .minicolors-slider {
        top: 6px;
        left: 157px;
      }
    }
    .form-actions {
      position: absolute;
      top: 162px;
      left: 0;
      width: 183px;
      padding: 5px;
      margin: 0;
      background-color: #fff;
      box-shadow: 0 5px 10px rgba(0,0,0,0.2);
      .btn {
        margin-left: 5px;
      }
    }
  }
}
.context-menu {
  .minicolors-swatch {
    cursor: pointer;
    position: relative;
    vertical-align: top;
    background-position: -62px -1px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border: 1px solid rgba(0,0,0,0.2);
  }
  .minicolors-swatch:hover {
    border: 1px solid #222; /* @gray-dark */
  }
}

.ui-widget-overlay {
  z-index: 150;
}
.form-horizontal-large {
  .control-group {
    max-width: 100%;
    .controls {
      margin-left: 240px;
      div.control-label {
        text-align: left;
      }
    }
    div.control-label,
    label.control-label {
      width: 230px;
      text-align: right;
    }
  }
}
.user-fieldset{
  margin-bottom: 22px;
  span{
    background-color: #fff;
    padding: 0 20px 0 0;
    display: inline-block;
  }
}
input[type='radio'] + label,
input[type='checkbox'] + label {
  margin-bottom:2px;
  display: inline-block;
}
textarea, input, select,
.uneditable-input,
body .select2-container {
  .box-sizing();
  border-color:#ddd;
  color:#333;
  font-size: @baseFontSize;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
  .border-right-radius(3px);
}
.btn-group > .btn:first-child {
  .border-left-radius(3px);
}

// Bootstrap - Nav
.dropdown-menu > li > div {
  padding: 3px 13px;
}
.dropdown-menu > li > a {
  padding-left:13px;
  padding-right:13px;
  color: @menuItemColor;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background:#f3f3f3;
  color: @menuItemColor;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  background:none;
}
// fix for FF (broken corner)
.navbar .nav > li > .dropdown-menu:after {
  left: 9px;
  border-right-width: 7px;
  border-bottom-width: 7px;
  border-left-width: 7px;
}
.navbar .pull-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.pull-right:after {
  left: auto;
  right: 12px;
}

// Bootstrap - Table
.table thead th { padding-top:2px; padding-bottom:2px; }

.label-info,
.badge-info { background:#92b2d6; }

.widget-content > .label-info:first-child {
  margin-bottom: 10px;
}

.ui-sortable-handle {
  cursor: move;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.dropdown-menu {
  .divider {
    border-bottom-color:#eee;
    margin:4px 0;
  }
}

footer {
  text-align: center;
}
#aside {
  padding: 0 @horizontalPadding;
}
#sidebar {
  padding: 0 @horizontalPadding;
}
#content {
  padding: 0 @horizontalPadding;
}
.one-column {
  padding: @horizontalPadding;
  -webkit-border-radius: @baseBorderRadius;
  border-radius: @baseBorderRadius;
  border: 1px solid @generalBorderColor;
  margin:0 0 @marginBottomBox;
}
.page-container {
  padding: 0 @widthClosePanel;
  height: 1%;
  position: relative;
}
.page-container.left-locked {
  padding-left: @widthLeftPanel;
}
.page-container.right-locked {
  padding-right: @widthLeftPanel;
}
.page-container:after {
  content: "";
  clear: both;
  display: block;
}
.row-fluid.one-column {
  padding: 0;
}
.nav-box {
  position: absolute;
  top: 0;
  left: 25px;
  width: 320px;
  padding:0 1px 0 5px;
  z-index: 995;
  color: #fff;
  background: #424850 url("../../img/bg-sidebar.png")repeat-y;
  -webkit-box-shadow:  6px 4px 6px 1px rgba(0, 0, 0, 0.60);
  box-shadow:  6px 4px 6px 1px rgba(0, 0, 0, 0.60);
  .nav-title {
    overflow: hidden;
    height: 1%;
    padding: 7px 6px;
    color: #fff;
    background: #2b2d31;
    h3 {
      float: left;
      margin: 0;
      font-size: @fontSizeSmall;
      line-height: 12px;
      text-transform: uppercase;
    }
    .action {
      float: right;
      margin: 0 0 0 4px;
      text-indent: -9999px;
      font-size: 0;
      line-height: 0;
      background-image: url("../../img/glyphicons-halflings-white.png");
      cursor: pointer;
    }
    .close {
      opacity: 1;
    }
    .settings {

    }
  }
  .nav-content {
    padding: 10px 5px 5px;
  }
}
.side-nav {
  background:#424850 url("../../img/bg-sidebar.png") repeat-y 100% 0;
  padding: 0 5px 18px 0;
  position: relative;
  z-index: 999;
  .side-nav-opener {
    border-top: 1px solid #0d0d0d;
    position: absolute;
    bottom: 0;
    right: 5px;
    width: 25px;
    .icon-arrow-right {
      display: none;
      float:right;
      cursor: pointer;
    }
    .icon-arrow-left {
      float:right;
      margin: 3px 0;
      cursor: pointer;
    }
  }
  .lock-bar {
    display: none;
    float:right;
  }
  .bar-tools {
    margin: 0;
    padding: 0;
    .sn-opener {
      display: block;
      text-align: center;
      padding: 4px 0;
      span {
        display: none;
      }
    }
    &>li {
      border-top: 1px solid #2f343b;
    }
    &:first-child {
      border-top: 0;
    }
  }
  .open-bar-item {
    cursor: pointer;
  }
  .open-item .icon-chevron-right {
    display: none;
  }
  .open-item .icon-chevron-down {
    display: inline-block !important;
  }
  .well {
    background: #383c40;
    -webkit-box-shadow:  0px 2px 4px 1px rgba(0, 0, 0, 0.6);
    box-shadow:  0px 2px 4px 1px rgba(0, 0, 0, 0.6);
    border: 1px solid #2e2e2e;
  }
  .nav-content {
    padding: 0 7px;
  }
}
.side-nav-open {
  .lock-bar {
    display: block;
    margin: 0 3px 0 0;
  }
  .icon-unlock {
    display: none;
  }
  .sn-opener {
    display: none;
  }

}
.left-panel {
  float: left;
  width: @widthClosePanel;
  margin: 0 0 0 -@widthClosePanel;
  display: inline;
}
.left-panel.side-nav-open {
  position:  absolute;
  top: 0;
  left: 0;
  width: @widthLeftPanel;
  padding: 10px 0;
  margin: 0;
  .nav-title {
    background: none;
    margin: 0;
  }
  .bar-tools > li {
    margin: 0 5px 0 0;
  }
  .side-nav-opener {
    width: @widthLeftPanel;
    .icon-arrow-right {
      display: block;
      float:right;
      margin: 3px;
    }
    .icon-arrow-left {
      display: none;
      float:right;
    }
  }
  .sn-opener {
    display: none;
  }
  .nav-box {
    padding: 0;
    background: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
  }

}
.left-panel.side-nav-locked {
  position: relative;
  width: @widthLeftPanel;
  padding: 10px 0;
  margin: 0 0 0 -@widthLeftPanel;
  .nav-title {
    background: none;
    margin: 0;
  }
  .bar-tools > li {
    margin: 0 5px 0 0;
  }
  .side-nav-opener {
    width: @widthClosePanel;
  }
  .icon-unlock {
    display: block;
    margin: 4px 7px 3px 3px;
  }
  .icon-lock {
    display: none;
  }
  .lock-bar {
    display: block;
  }
  .maximize-bar {
    float: right;
  }
  .icon-arrow-left {
    display: none;
  }
  .icon-arrow-right {
    display: block;
    margin: 3px;
  }
  .sn-opener {
    display: none;
  }
  .nav-box {
    padding: 0;
    background: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
  }
}

.right-panel .nav-box {
  right: 25px;
  left: auto !important;
}
.side-nav-open .nav-box,
.side-nav-locked .nav-box {
  display: block !important;
  position: static;
  width: 100%;
}
.side-nav-open .sn-opener,
.side-nav-locked .sn-opener {
  display: none;
}
#bar-drop-overlay {
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 15;
}
#bar-drop-overlay.bar-open-overlay {
  display: block;
}
.layout-content {
  margin: 0 !important;
  .navbar-inner {
    z-index:1;
  }
}
.right-panel {
  display: inline;
  float: right;
  width: @widthClosePanel;
  margin: 0 -@widthClosePanel 0 0;
  background-position: 0 0;
  padding: 0 0 18px 5px;
  .bar-tools {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .side-nav-opener {
    right: auto;
    left: 5px;
    width: @widthClosePanel;
    .icon-arrow-left {
      display: none;
      float: left;
    }
    .icon-arrow-right {
      float: left;
      display: block;
      margin: 3px;
    }
  }
  .lock-bar {
    float: left;
  }
  .nav-box {
    background-position: 100% 0;
    padding: 0 5px 0 1px;
    -webkit-box-shadow:  -6px 4px 6px 1px rgba(0, 0, 0, 0.60);
    box-shadow:  -6px 4px 6px 1px rgba(0, 0, 0, 0.60);
  }
  .nav-content {
    padding-top: 10px;
  }
  .maximize-bar {
    width: 100%;
    overflow: hidden;
  }
}
.right-panel.side-nav-open {
  position:  absolute;
  top: 0;
  right: 0;
  width: @widthLeftPanel;
  overflow: hidden;
  padding: 10px 0;
  margin: 0;
  .bar-tools > li {
    margin: 0 0 0 5px;
  }
  .sn-opener {
    display: none;
  }
  .nav-box {
    padding: 0;
    background: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
  }
  .nav-title {
    background: none;
    margin: 0;
  }
  .side-nav-opener {
    width: @widthLeftPanel;
    .icon-arrow-left {
      display: block;
      float: left;
      margin: 3px;
    }
    .icon-arrow-right {
      float: left;
      display: none;
      margin: 3px;
    }
  }
}
.right-panel.side-nav-locked {
  position: relative;
  width: @widthLeftPanel;
  padding: 10px 0;
  margin: 0 -@widthLeftPanel 0 0;
  .bar-tools > li {
    margin: 0 0 0 5px;
  }
  .icon-unlock {
    display: block;
    margin: 4px 7px 3px 3px;
  }
  .icon-lock {
    display: none;
  }
  .lock-bar {
    display: block;
  }
  .side-nav-opener {
    width: (@widthLeftPanel -5);
    .icon-arrow-left {
      display: block;
      float: left;
      margin: 3px;
    }
    .icon-arrow-right {
      float: left;
      display: none;
      margin: 3px;
    }
  }
  .sn-opener {
    display: none;
  }
  .nav-box {
    padding: 0;
    background: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
  }
  .nav-title {
    background: none;
    margin: 0;
  }
}
#wrapper {
  -webkit-border-radius: @baseBorderRadius;
  border-radius: @baseBorderRadius;
  border: 1px solid @generalBorderColor;
  margin:0 0 @marginBottomBox;
}
.form-pass-reset {
  margin: 0 auto 20px;
  max-width: 400px;
  padding: 19px 29px 29px;
  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
  border: 1px solid @navbarBorder;
  .border-radius(@baseBorderRadius);
  .box-shadow(0 1px 4px rgba(0,0,0,.065));
}
.form-row {
  padding: 0 0 @marginBottomBox/2;
}
.small-text {
  font-size: @fontSizeSmall;
}
.small-text.checkbox {
  margin-top: 0 !important;
}
.top-frame {
  padding-top: @topPadding/2;
}
.popup-box {
  width: @widthPopup;
  margin: 0 auto;
}
/* dialog jQuery ui  start */
.ui-dialog {
  background: @bodyBackground;
  .border-radius(6px);
  box-shadow:0 1px 22px rgba(0,0,0,.4) !important;
  -webkit-box-shadow:0 1px 22px rgba(0,0,0,.4) !important;
  -moz-box-shadow:0 1px 22px rgba(0,0,0,.4) !important;
  z-index: 990;
}
.ui-dialog-titlebar {
  .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
  cursor: move;
  padding: @verticalPadding/2 @horizontalPadding;
}
.ui-dialog-titlebar-min {
  .border-radius(@baseBorderRadius);
  .box-shadow(0 1px 4px rgba(0,0,0,.065));
  cursor: auto;
}
.ui-dialog-content {
  padding: @verticalPadding/2 @horizontalPadding/2 0 @verticalPadding/2;
  margin: 0 auto;
  position: relative;
  min-width: 250px;
  width: 100% !important;
  height: calc(~"100% - 81px") !important;
  .ui-resizable-handle {
    cursor: move;
  }
}
.ui-dialog:not(.ui-dialog-buttons){
  .ui-dialog-content{
    border-radius: 0 0 3px 3px;
  }
}
.ui-dialog.ui-resizable:not(.ui-dialog-buttons) {
  .ui-dialog-content{
    height: calc(~"100% - 50px") !important;
    border-radius: 0 0 3px 3px;
    border-bottom: 1px solid #e5e5e5;
  }
}
.ui-dialog .widget-actions-section {
  .btn, .action {
    margin-left: 5px;
  }
}
.ui-dialog .ui-resizable-se {
  height: 14px;
  width: 14px;
  margin: 2px;
  position: absolute;
  bottom: -1px;
  right: 0px;
  background: url("../../img/glyphicons-halflings.png") no-repeat -336px -166px;
  cursor: se-resize;
}
.ui-dialog .ui-dialog-titlebar-restore,
.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-maximize,
.ui-dialog .ui-dialog-titlebar-minimize,
.ui-dialog .ui-dialog .minimized {
  float:right;
  margin: 0 0 0 7px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  background:none;
  cursor: pointer;
  border: 0;
}
.ui-dialog-buttonpane .form-actions {
  margin: 0;
}

#create-status-form {
  height: auto !important;
  border: 0 !important;
}
/* general style reset */
.navbar .btn,
.navbar .btn-group {
  margin-top: 0;
}
.nav-header {
  color: @bodyColor;
  font-size: 12px;
}
.nav-header-title {
  font-size: @baseFontSize;
  text-transform: none;
}

.label-important,
.badge-important {
  background-color: #ea0000;
  #gradient > .vertical(#ea0000, #ba0000);

}
/* general style classes */
.extra-small {
  font-size: 10px;
  color: #555;
}
.input-large {
  width: 235px;
}
.navbar .small-divider {
  background: url("../../img/vertical-divider-general.gif") repeat-y;
  height: 22px;
  margin: 10px 7px 0 0;
  border: 0;
  width: 2px;
}
.extra-list {
  margin: 0;
  padding: 0;
  list-style: none;
  &:empty {
    display: none;
  }
}
.extra-list .extra-list-element {
  vertical-align: top;
  line-height: 1.2em;
  padding-bottom: 5px;
}
.a2lix_translations {
  .nav-tabs {
    > li {
      height:29px !important;
      > a {
        border:1px solid #ddd;
        padding-top:4px;
        padding-bottom:4px;
        background:#f5f5f5;
        color:#777;
        &:hover {
          background:#eee;
        }
      }
      &.active {
        a {
          border-bottom-color:#fff;
          color:@bodyColor;
        }
      }
    }
  }
}
/* application-menu */
.application-menu {
  background-color: #232426;
  margin: 0;
  .container {
    padding: 6px 5px 0;
  }
  .nav-tabs {
    border-color: #000;
    & > li > a {
      -webkit-border-radius: 5px 5px 0 0;
      border-radius:  5px 5px 0 0;
      border: solid #000;
      border-width: 1px 1px 0 1px;
      height: 26px;
      color: #b8b8b8;
      font-size: @baseFontSize;
      line-height: 26px;
      text-shadow: 1px 1px 2px #00324d;
      background-color: #232426;
      padding: 0 15px;
      .box-shadow(none);
      font-weight: bold;
    }
  }
}
.application-menu .nav-tabs > li > a.empty,
.application-menu .nav-tabs > li.active > a.empty,
.application-menu .nav-tabs > li.active > a.empty:hover,
.application-menu .nav-tabs > li > a.empty:hover,
.application-menu .nav-tabs > li > a.empty:focus {
  border-radius:  5px;
  height:23px;
  border-width: 1px;
}
.application-menu .nav-tabs > li.active > a,
.application-menu .nav-tabs > li.active > a:hover,
.application-menu .nav-tabs > li > a:hover,
.application-menu .nav-tabs > li > a:focus {
  height: 26px;
  border: solid #000;
  border-width: 1px 1px 0 1px;
  background-color: #7a95b5;
  color: #fff;
  .box-shadow(none);
}
.tab-content > .tab-pane {
  padding: 0;
}
.application-menu .tab-content > .tab-pane > .nav a {
  color: #dedddd;
  font-size: @baseFontSize;
  font-weight: bold;
  &:hover {
    background-color: #447fe9;
  }
}
.application-menu .tab-content > .tab-pane > .nav .current a {
  background: #3b6fe5;
  color: #fff;
}
.application-menu .tab-content > .tab-pane > .nav {
  margin: 0;
}
.application-menu .tab-content {
  background-color: #7c96b4;
}
.application-menu .home a {
  padding: 0 5px !important;
}
.application-menu .home span {
  display: block;
  margin: 4px 0 0;
  width: 17px;
  height: 19px;
  text-indent: -9999px;
  font-size: 0;
  line-height: 0;
  background: url("../../img/general-sprite.png") no-repeat 0 -156px;
}
.page-title h1 {
  min-height:28px;
  font-size:20px;
  line-height:1.2em;
}

[class^="icon-"], [class*=" icon-"],
[class^="fa-"], [class*=" fa-"] {
  margin: 0 3px;
}

.fa-google {
  margin: 0 5px;
}

.icons-holder [class^="icon-"],
.icons-holder [class*=" icon-"] {
  margin: 0 -3px;
}
.icons-small button.btn {
  height: 24px;
  padding: 0 9px;
  line-height: 20px;
}
.application-menu .tab-content > .tab-pane > .nav a:hover {
  background: #447fe9;
  color: #fff;
}
.application-menu .tab-content > .tab-pane > .nav .active a {
  background: #3B6FE5;
  color: #fff;
}
.nav > li > a:focus {
  background-color: #7a95b5;
}
.navbar .nav > li a { padding-top:7px; padding-bottom:7px; }
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: #fff;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  box-shadow: none;
  background-color: #7a95b5;
  color: #fff;
}
.btn, a {
  .caret {
    margin-left: 5px;
  }
}
.new-line {
  clear: both;
  display: block;
  width: 100%;
}

.list-inline {
  list-style: none;
  padding-left: 0;
}
.list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.list-group > .list-group-item {
  padding: 10px;
  border-top: 1px solid #efefef;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.list-group > .list-group-item:after {
  content: '';
  clear: both;
  display: block;
}
.list-group > .list-group-item:first-child {
  border: 0;
}
.nav-tabs-content {
  background-color: #f8f8f8;
  padding: 4px 15px 0;
  margin-bottom: 8px;
}
.tab-content-small {
  table.table:last-child {
    margin: 0;
  }
  .table td {
    padding: 5px 20px;
  }
  table.table thead th:last-child,
  table.table thead th:first-child,
  table.table thead th {
    padding: 3px 20px;
    text-transform: uppercase;
    font:bold 11px/12px @baseFontFamily;
    border: solid #dfdfdf;
    border-width: 1px 0;
  }
}
.nav-tabs-content > li {
  line-height: 16px;
  height: 22px;
  margin-right: -3px;
}
.nav-tabs-content > li > a {
  background: none;
  border-right: 1px solid #e4e4e4;
  padding: 1px 10px 0;
  color: #666;
}
.nav-tabs-content > li:last-child > a {
  border-right: 0;
}

.nav-tabs-content > li.active:focus > a:hover,
.nav-tabs-content > li.active:focus > a:focus,
.nav-tabs-content > li.active:hover > a:focus,
.nav-tabs-content > li.active:hover > a,
.nav-tabs-content > li:hover > a,
.nav-tabs-content > li.active > a:focus,
.nav-tabs-content > li.active > a:hover,
.nav-tabs-content > li.active > a {
  background-color: #fff;
  border: solid #ddd;
  border-width: 1px 1px 0;
  padding-bottom: 1px;
  color: @bodyColor;
  font-weight: bold;
}

.nav-tabs-content > li:hover > a {
  font-weight: normal;
}
.nav-tabs-content > li:hover > a:focus,
.nav-tabs-content > li > a:focus {
  font-weight: normal;
  background: none;
  border: 0;
  border-right: 1px solid #e4e4e4;
}
.badge-enabled,
.badge-tentatively,
.badge-disabled {
  padding: 3px 10px 3px 5px;
  font-size: 12px;
  font-weight: normal;
}
.badge-enabled {
  background-color: #dff2d4;
  color: #4c7940;
}
.badge-tentatively {
  background-color: #faf2cc;
  color: #a7a50a;
}
.badge-disabled {
  color: #aaa;
  background-color: #f2f2f2;
}
.status-disabled {
  color: #aaa;
}
.status-enabled {
  color: #2f8206;
}
.status-tentatively {
  color: #a7a50a;
}
.status-disabled,
.status-tentatively,
.status-enabled {
  margin-left: 5px;
  margin-top:-4px;
  text-shadow:none;
  padding:3px 10px 3px 5px;
  [class^='icon-']:before {
    font-size:12px;
  }
}
.status-enabled [class^='icon-']:before { color:#4a9938; }
.status-disabled [class^='icon-']:before { color:#e37878; }

.dib {
  display: inline-block;
  vertical-align: top;
  padding: 0 5px;
  line-height: 32px;
}

.more-bar-holder {
  .dropdown-toggle {
    padding: 0;
    color:#999;
    font-size:16px;
    line-height:.7em;
    width: 23px;
    height: 19px;
    float: left;
    &:hover,
    &:focus {
      border: 0;
      text-decoration: none;
    }
  }
  .nav {
    margin:0;
  }
  li {
    margin:0 0 5px;
    float: none;
    display: table-cell;
  }
  .nav-pills {
    padding:0 10px;
  }
  /* fix for IE10 in Win8, otherwise breaks actions column */
  .dropdown:not(.open) {
    .launchers-dropdown-menu {
      min-width: 0;
      display: block;
      height: 0;
      width: 0;
      overflow: hidden;
      border-width: 0;
    }
  }
}
.launchers-dropdown-menu {
  min-width: 35px;
}
.launchers-list {
  &.nav > li:first-child > a {
    margin-left: 2px;
  }
  .launcher-item {
    [class^='icon-']:before {
      color:#999;
      font:16px/1em 'FontAwesome';
    }
    a {
      .border-radius(3px);
      border:1px solid #fff;
      &:hover {
        background:#fafafa !important;
        border-color:#ddd;
        [class^='icon-']:before {
          color:#666;
        }
      }
      &:focus {
        background:#fff;
      }
    }
  }
}
.loading-wrapper {
  background: #000;
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.loading-frame {
  position: absolute;
  top: 40%;
  left: 48%;
  width: 180px;
  z-index: 9999;
  .box {
    background: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height:  24px;
  }
}
.holder-height {
  max-height: 200px;
  overflow: auto;
}
.navbar-extra {
  padding: 0;
  margin-bottom: 5px;
  .customer-info-top-actions a {
    height: 24px;
    line-height: 24px;
  }
  .btn {
    padding: 0 11px;
  }
  .icons-holder a {
    height: 24px;
    line-height: 24px;
  }
  > .row > div{
    margin-top: 10px;
    margin-bottom: 5px;
  }
}
.icons-holder .icons-holder-text [class^="icon-"] {
  margin-right: 5px;
}
.brand-extra {
  font-size: 18px;
  font-weight: bold;
  margin-top: 12px;
  margin-right: 15px;
  line-height: 24px;
  color: @bodyColor;
}
.navigation {
  position: relative;
  .top-action-box {
    padding: 3px 12px;
    background-color: #fff;
    float:right;
  }
  .icons-holder-text.btn {
    [class^='icon-'].hide-text {
      float:left;
      margin:0;
      &:before {
        display:inline-block;
        margin:4px 5px 0 0;
        font-size:16px;
        color:#666;
        line-height:19px;
      }
    }
    .icon-chevron-left.hide-text {
      &:before {
        font-size:11px;
        line-size:19px;
      }
    }
    &.btn-success,
    &.btn-primary,
    &.btn-danger {
      [class^='icon-'].hide-text {
        &:before {
          color:#fff;
        }
      }
    }
  }
}
.btn-primary{
  .icon-plus{
    font-size: 12px;
  }
}
.scroll-holder {
  position: relative;
}
.oro-drop > .btn {
  display: inline-block;
  vertical-align: top;
}
.btn-group > .disable-filter {
  .border-right-radius(4px);
  border-style: solid;
  border-color: #cccccc #cccccc #b3b3b3;
  border-width: 1px 1px 1px 0;
  font-size: 18px;
  display: inline-block;
  vertical-align: top;
  height: 28px;
  padding: 4px 2px 0;
  line-height: 28px;
  #gradient > .vertical(#ffffff, #e6e6e6);
}

.modal {
  .border-radius(8px 8px 6px 6px);
  .modal-header {
    padding: 10px 5px 10px 20px;
    .border-radius(6px 6px 0 0);
    .box-shadow(0 0 6px 0 rgba(0, 0, 0, 0.5));
    .close {
      font-size: 25px;
      height: 32px;
      width: 32px;
      margin-top: -6px;
      color: @white;
      text-shadow: 2px 0px 2px rgba(111, 123, 148, 1);
      opacity: 0.9;
      text-align: center;
      line-height: 32px;
      &:hover,
      &:focus {
        color: @white;
        opacity: 0.6;
      }
    }
    h3 {
      font: bold 16px/18px @baseFontFamily;
    }
  }
}

.oro-modal-danger {
  top: 20%;
  background-color: #fde0e0;
  width: 525px;
  .modal-header {
    background-color: #fdcece;
    border-bottom: 1px solid #d59c9c;
  }
  .modal-body {
    color: @bodyColor;
    font-size: 14px;
    padding-left: 20px;
  }
  .modal-footer {
    background: none;
    text-align: center;
    border: none;
    -webkit-box-shadow: none;
    box-shadow:  none;
    padding: 15px 15px 35px;
  }
}
.oro-modal-normal {
  background-color: #fff;
  width: 700px;
  margin-left: -350px;
  top: 20%;
  .modal-header{
    background-color: #303944;
    border-bottom: 1px solid #303944;
    color: #fff;
  }
  .modal-body{
    color: @bodyColor;
    font-size: 14px;
    padding-left: 20px;
  }
}
.modal-primary {
  top: 20%;
  background-color: #f9f9f9;
  width: 525px;
  .modal-header {
    background-color: #fcfcfc;
    #gradient > .vertical(#fcfcfc, #ebebeb);
    border-bottom: 1px solid #b2b2b2;
  }
  .modal-body {
    color: @bodyColor;
    font-size: 14px;
    padding-left: 20px;
  }
  .modal-footer {
    background: none;
    text-align: center;
    border: none;
    -webkit-box-shadow:  none;
    box-shadow:  none;
    padding: 15px 15px 35px;
  }
}
.dropup:after,
.dropdown:after {
  content: "";
  clear: both;
  display: inline;
}

.ui-dialog {
  background-color: #fff;
  -webkit-box-shadow:  0px 2px 32px 1px rgba(0, 0, 0, 0.8);
  box-shadow:  0px 2px 32px 1px rgba(0, 0, 0, 0.8);
  font-family:@baseFontFamily !important;
  .alert {
    background-color: @warningBackground;
    background-image: url('../../img/warning-ico.png');
    background-position: 10px 50%;
    background-repeat: no-repeat;
    padding: 12px 35px 12px 37px;
    border:1px solid @warningBorder;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    .border-radius(0);
    .close {
      font-size: 18px;
      color: @warningClose;
      opacity: 1;
    }
  }
  .alert-success {
    background-color: @successBackground;
    background-image: url('../../img/sucsses-ico.png');
    border-color: @successBorder;
    color: @successText;
    .close {
      color: @successClose;
    }
  }
  .alert-danger,
  .alert-error {
    background-image: url('../../img/error-ico.png');
    background-color: @errorBackground;
    border-color: @errorBorder;
    color: @errorText;
    .close {
      color: @errorClose;
    }
  }
  .ui-widget-header {
    border: 0;
  }
  .widget-actions.form-actions {
    margin-bottom: 0;
    background: #fafafa;
    padding: 10px;
    .border-radius(0 0 @WindowBorderRadius @WindowBorderRadius);
  }
  .ui-dialog-titlebar {
    margin:-1px -1px 0 -1px;
    border-bottom: 1px solid #000;
    background-color: @titleBackgroundStart;
    #gradient > .vertical(@titleBackgroundStart, @titleBackgroundEnd);
    padding: 6px 15px;
  }
  .ui-dialog-title {
    color: #fff;
    font-size: @baseFontSize;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ui-dialog-titlebar-buttonpane {
    right: 7px !important;
    top: 5px !important;
    margin: 0 !important;
    border:1px solid #272e36;
    height:auto;
    .border-radius(4px);
    #gradient > .vertical(#838d98, #46515d);
    [class*='ui-dialog-titlebar-'] {
      width:auto !important;
      height:auto !important;
      padding:0 !important;
      margin:0 !important;
      .ui-icon { display:none; }
      .ui-button-text { display:none; }
      &:before {
        display:inline-block;
        border-right:1px solid #272e36;
        width:24px;
        height:22px;
        color:#fff;
        font:14px 'FontAwesome';
        text-align:center;
        line-height:22px;
        text-shadow:0 1px 0 #45505c;
      }
      &:last-child:before { .border-radius(3px 0 0 3px); }
      &:first-child:before { border-right:0; .border-radius(0 3px 3px 0); }
    }
    .ui-dialog-titlebar-close:before {
      content: "\f00d";
    }
    .ui-dialog-titlebar-maximize:before {
      content: "\f0b2";
    }
    .ui-dialog-titlebar-minimize:before {
      content: "\f150";
    }
    .ui-dialog-titlebar-restore:before {
      content: "\f151";
    }
  }
  &.ui-dialog-normal {
    [class*='ui-dialog-titlebar-'] {
      &:hover:before {
        #gradient > .vertical(darken(#838d98,5%), darken(#46515d,5%));
      }
      &:active:before,
      &:focus {
        .box-shadow(inset 0 2px 4px 0 darken(#46515d,10%));
      }
    }
  }
  .form-horizontal {
    .control-group {
      margin-bottom: 10px;
      .control-label {
        width:130px;
        margin:0 12px 0 0;
      }
      .controls {
        margin-left: 142px;
        .control-label {
          width: auto;
        }
        select{
          width: 100%;
          max-width: 282px;
        }
      }
    }
  }
  .bottom-action {
    padding: 10px 10px 25px 10px;
    overflow: hidden;
    border-top: 1px solid #dfdfdf;
    background: #fafafa;
    font-family:  @baseFontFamily;
  }
  .ui-widget-content {
    border: 0;
  }
  .ui-widget-content.ui-helper-clearfix {
    .border-radius(0 0 5px 5px);
  }
}

.ui-dialog-minimized {
  margin:0 4px !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  -moz-box-shadow:none !important;
  .ui-dialog-titlebar {
    margin-bottom:-2px;
    padding:2px 80px 2px 10px !important;
    border-bottom:1px solid #d6d6d6 !important;
    background:#d6d6d6 !important;
    .ui-dialog-title {
      padding-top:2px;
      color:#666;
      font-size:12px;
      text-shadow:0 1px 0 #ddd;
    }
    .ui-dialog-titlebar-buttonpane {
      background:none;
      border:none;
      right:2px !important;
      top:2px !important;
      [class^='ui-dialog-titlebar-'] {
        &:before {
          border-right:none;
          color:#999;
          font-size:@baseFontSize;
          text-shadow:0 1px 0 #ddd;
        }
        &:hover:before,
        &:active:before,
        &:focus:before {
          color:#666;
        }
      }
    }
  }
  &.ui-widget-content { border:none !important; }
}
.ui-dialog.ui-widget-content {
  border: 1px solid #bbb;
  background-color: #fafafa;
}
.user-info-state {
  clear: right;
  .inline-decorate-container{
    margin-top:10px;
    margin-bottom:-10px;
    .inline-decorate{
      margin-bottom:10px;
    }
  }
}
.user-profile-cols .label {
  display:block;
  background:none;
  padding:0 0 7px 0;
  text-shadow:none;
  color:@bodyColor;
  font-weight:normal;
  font-size:@baseFontSize;
  line-height:1.2em;
}

.tag-sort-actions {
  margin-top: 5px;
  margin-bottom: 0;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  &:after{
    content: "";
    display: block;
    clear: both;
  }
  li {
    &:first-child{
      a{
        border-width: 1px;
      }
    }
    a {
      display:inline-block;
      .border-radius(0);
      background:#fafafa;
      outline: none;
      padding:8px 12px;
      color:#555;
      margin-bottom:0;
      border: solid #ddd;
      border-width: 1px 1px 1px 0;
      line-height:20px;
      &.active {
        border-bottom-color:#fff;
        .box-shadow(none);
        color:@bodyColor;
        background:#fff;
        text-decoration: none;
      }
      &:hover {
        text-decoration: none;
        color:@bodyColor;
      }
    }
  }
  &.inline li {
    float: left;
    margin-bottom: -1px;
    padding:0;
    line-height: 20px;
  }
}
.tag-view .tags-holder{
  -webkit-box-shadow: none;
  box-shadow:none;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: solid #ddd;
  border-width: 0 1px 1px;
  padding: 5px 10px 10px;
  overflow: hidden;
}
.tags-overlay .well{
  -webkit-box-shadow: none;
  box-shadow: none;
  padding-top: 4px;
}
.tags-overlay .tag-list,
.tag-view  .tag-list {
  margin-bottom: 0;
  li {
    padding: 5px 5px 0 0;
  }
  a:hover span.label {
    background:#e4e4e4;
  }
  span.label {
    background:#eee;
    .border-radius(4px);
    font-size:12px;
    font-weight:normal;
    text-shadow:none;
    padding:4px 6px;
    border:none;
    color:@bodyColor;
    .select2-search-choice-close {
      position: relative;
      display: inline-block;
      right: -2px;
      top: 0;
      &:before {
        width:20px;
        content: "\f00d";
        font:11px 'FontAwesome';
        color:#ccc;
      }
      &:hover:before {
        color:#999;
      }
    }
  }
}

.sub-title a { color:#888; }
.customer-info {
  padding-top: 4px;
  padding-left: 60px;
  padding-bottom: 0;
  line-height: 18px;
  &.customer-simple {
    padding:0 4px 0 0;
  }
  .top-row {
    overflow: hidden;
  }
  .sub-title {
    font-size: 17px;
    color: #999;
    display: inline-block;
    margin-bottom: 3px;
  }
  .separator {
    padding: 0 3px;
    color: #999;
    font-size: 18px;
  }
  .user-name {
    margin: 0 10px 3px 0;
    font-size: 19px;
    min-height: 15px;
    line-height: 22px;
    display: inline-block;
    float: none !important;
    font: bold 17px/18px Helvetica, Arial, sans-serif;

  }
  .dropdown.open .caret,
  .user-name .caret,
  .user-name:hover .caret {
    border-top-color: #444 !important;
    border-bottom-color: #444 !important;
  }
  .visual {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    float: left;
    position: relative;
    width: 60px;
    margin: 0 0 0 -60px;
    img {
      margin-top:-4px;
      .border-radius(3px);
      width: 45px;
    }
  }
  .nav {
    margin: 0;
  }
  ul.inline {
    margin-bottom:0;
    color: #777;
    li {
      padding: 0 10px;
      margin-bottom: 4px;
      border-left: 1px solid #e6e6e6;
      font-size: 11px;
      line-height: 14px;
      &:first-child {
        padding: 0 10px 0 0;
        border: 0;
      }
    }
  }
}
ul.inline-decorate {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.inline-decorate > li {
  padding-left: 10px;
  margin-left: 8px;
  display: inline;
  border-left: 1px solid #e6e6e6;
}
ul.inline-decorate > li:first-child {
  padding: 0;
  border: 0;
  margin: 0;
}
ul.inline-extra:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
ul.inline-extra {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #666;
  width: 100%;
  span.cb {
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
    color: #aaa;
  }
  & > li {
    float: left;
    padding: 0 10px;
    &:first-child {
      padding: 0 10px 0 0;
    }
  }
}
.scrollspy-nav {
  background-color: #f6f6f6;
  border-bottom: 1px solid #c4c4c4;
  margin-bottom: 0;
  .box-shadow(0 2px 0 rgba(0, 0, 0, .03));
  .navbar-inner {
    padding: 0;
    border: 0;
    background: 0;
    .container-fluid {
      padding:0 15px;
      .nav {
        > li a {
          padding:5px 15px;
          color:#666;
          font-size:@baseFontSize;
          &:hover {
            border-bottom:3px solid #ddd;
            background:none;
            padding-bottom:2px;
            color: #444 !important;
          }
        }
        .active a,
        .active a:hover {
          border-bottom:3px solid #555;
          background:none;
          padding-bottom:2px;
          color:#111;
          font-weight:bold;
        }
      }
    }
  }
}
.customer-info-actions {
  background-color: #f6f6f6;
  border-bottom: 1px solid #ebebeb;
  .alert {
    margin-bottom: 0;
  }
}
.customer-info-top-actions .btn .caret {
  margin-top: 10px;
}
.customer-info-top-actions  .btn-group > .disable-filter {
  height: 21px;
  line-height: 21px;
  padding: 3px 2px 0;
}
.cb {
  display: block;
  clear: both;
}
.scrollspy {
/*height: 500px;*/
  position: relative;
  overflow: auto;
}
.btn-action {
  color: #777 !important;
  font-size: 20px;
  padding: 0 5px !important;
}
.btn-action:hover {
  text-decoration: none !important;
}
.navbar-extra-right {
  padding-right: 23px;
  .title-buttons-container {
    .btn-group{
      margin-left: 8px;
    }
    .btn-group .btn-group {
      margin-left: 0;
    }
  }
}
.row-oro {
  width: 100%;
  margin: 0;
}
.clearfix-oro {
  width: 100%;
}
.row-oro:after,
.clearfix-oro:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  line-height: 0;
}

label.required em,
.form-horizontal label.required em {
  color: #c30b25;
  font-size: 15px;
  line-height: 1px;
}

/*.form-horizontal .span6 .controls div.selector {
  width:294px;
  select {
    width:292px;
  }
}*/
.controls .removeRow{
  position: relative;
  margin: 0 0 0 -24px;
}
/*.form-horizontal .span6 .oro-multiselect-holder input[type="email"],
.form-horizontal .span6 .oro-multiselect-holder input[type="text"],
.form-horizontal .span6 .oro-multiselect-holder input[type="password"] {
  margin: 0 0 5px 0;
}*/
input, textarea, .uneditable-input { width:280px; }
body .mce-tinymce { width: 292px }
textarea {
  height: 150px;
  resize: vertical;
  text-align: left;
  vertical-align: top;
}
.scrollspy-title {
  border:1px solid #e5e5e5;
  border-width:1px 0;
  margin:0 -20px 0px -20px;
  background:#fafafa;
  /*#gradient > .vertical(#fafafa, #f7f7f7);*/
  padding:4px 20px;
  color:lighten(@bodyColor,20%);
  text-shadow:0 1px 0 #fff;
  line-height:18px;
}
.scrollspy-nav-target {
  height: 20px;
}
.oro-clearfix-width:after,
.oro-clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.oro-clearfix-width {
  height: 1%;
}
.oro-clearfix {
  width: 100%;
}
.horizontal .oro-clearfix input[type="checkbox"],
.horizontal .oro-clearfix input[type="radio"] {
  margin: -4px 6px 0 0;
}
.horizontal .oro-clearfix .label {
  float: left;
}
.controls {
  .horizontal {
    padding-top: 7px;
  }
  > input[type=checkbox]:only-child {
    margin-top: 10px;
  }
}
.btn-group > .btn-small {
  font-size: @fontSizeSmall;
}
.btn-group > a.btn {
  height: 28px;
  line-height: 26px;
}
.oro-action .btn-group > .btn,
.oro-action .btn-group > .dropdown-menu,
.oro-action .btn-group > .popover {
  font-size: 14px;
}
.oro-action .btn-group {
  margin-right: 0;
}
.popup-box-errors {
  width: 480px;
  margin: 0 auto;
  border: 1px solid #bbb;
  padding: 40px 0;
  background-color: #fff;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, 0.5);
  box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, 0.5);
}
.popup-box-errors .popup-content {
  background-color: #fff;
  font: 14px/20px @baseFontFamily;
  margin: 0 30px;
}
.popup-box-errors h1 {
  font:bold 20px/46px @baseFontFamily;
  margin: 0 0 10px;
}
.popup-box-errors h1 span {
  font-size: 45px;
  margin: 0 12px 0 0;
}
.top-messages {
  margin-bottom: 0;
}
/* custom form elements */
.selector,
.selector *,
.uploader,
.uploader * {
  margin: 0;
  padding: 0;
}
/* Uploader */

div.uploader {
  height: 28px;
  border: 1px solid #ccc;
  background-color: #fff;
  float: left;
  position: relative;
  overflow: hidden;
  cursor: default;
  line-height: 28px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  vertical-align: middle;
  display: inline-block;
}

div.uploader span.action {
  float: left;
  height: 28px;
  border-left: 1px solid #ccc;
  padding: 0 10px;
  overflow: hidden;
  cursor: pointer;
  #gradient > .vertical(#ffffff, #e6e6e6);
}
div.uploader.active  span.action {
  #gradient > .vertical(#e6e6e6, #ffffff);
}
div.uploader span.filename {
  padding: 0px 10px;
  float: left;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  width: 202px;
}

div.uploader input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  float: right;
  height: 25px;
  border: none;
  cursor: default;
}
/* Select */

select {
  height: 26px;
  line-height: 26px;
}
div.selector {
  line-height: 30px;
  height: 30px;
  position: relative;
  width: 235px;
  border: 1px solid #ddd;
  #gradient > .vertical(#ffffff, #f3f3f3);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 0;
  margin: 0;
}

div.selector span {
  height: 30px;
  display: block;
  line-height: 30px;
  .box-sizing(border-box);
  padding: 0 5px 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  &:after {
    margin: 3px 2px 0 0;
    display:inline-block;
    font:16px 'FontAwesome';
    content: "\f0dd";
    position: absolute;
    right: 5px;
  }
}

div.selector select {
  position: absolute;
  top: 0px;
  left: -2px;
  opacity: 0;
  z-index: 1;
  padding: 0 5px;
}

/* start uniformjs customization (see documentation http://uniformjs.com/ selectAutoWidth property for explain this styles) */
.controls select {width: 282px;}
.controls .selector select {width: 100%;}
/* end uniformjs customization */

div.selector:active,
div.selector.active {
  background-position: -483px -156px;
}

div.selector.focus, div.selector.hover, div.selector:hover {
  background-position: -483px -182px;
}

div.selector.focus:active,
div.selector.focus.active,
div.selector:hover:active,
div.selector.active:hover {
  background-position: -483px -208px;
}

div.selector.disabled span {
  color:#aaa;
  &:after {
    color:#ddd;
  }
}

.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

.row-fluid.row-fluid-divider {
  background: url("../../img/vertical-separator.png") repeat-y 50% 0;
}
/* fix incorrect aligment of fluid divider line in Firefox */
@-moz-document url-prefix() {
  .row-fluid.row-fluid-divider {
    background-position: calc(~"50% - 1px") 0;
  }
}
h5.user-fieldset {
  font-weight:bold;
  font-size:15px;
  line-height:15px;
  margin: 0 10px 20px 0;
}
/*.user-fieldset span {
  display:block;
  position:relative;
  background: #fff;
  padding: 0 10px 0 0;
  &:before {
    display:block;
    position:absolute;
    top:2px;
    left:0;
    right:0;
    bottom:auto;
    border-bottom:1px solid #ddd;
  }
}*/
.page-size .dropdown-menu {
  min-width: 20px;
}

input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus,
div.selector.focus,
div.uploader.focus,
.select2-container-active .select2-choice,
.select2-container-active .select2-choices
{
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  color: #555;
}
.separator-btn {
  border-left: 1px solid #e9e9e9;
  margin: 4px 8px 0;
  height: 24px;
}
.title-buttons-container{
  .pull-left > .separator-btn{
    margin-right: 1px;
  }
}
.pagination-centered > label {
  margin-right: -4px;
  padding-left: 5px;
}
.alert-error > ul{
  margin-bottom: 0;
}
.oro-multiselect {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.oro-multiselect-holder .selector {
  display: inline-block;
  width: auto;
  overflow: hidden;
  vertical-align: middle;
}
/* validation-error */
label.validation-error {
  color: #C81717 !important;
}
.validation-error {
  .error {
    border: 1px solid #e9322d;
    .border-radius(3px);
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
    color: #555;
    &.validate-group {
      margin-left: -6px;
      padding-left: 5px;
    }
  }
  .input-append.error, .input-prepend.error {
    border-width: 0;
  }
  .input-append.error > *, .input-prepend.error > * {
    border: 1px solid #e9322d;
  }
  div.selector {
    display: inline-block;
    vertical-align: middle;
  }
}
/*.validation-error div.selector {
  border: 1px solid #d32121;
  outline: thin dotted \9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(211, 33, 33, 0.6);
}*/

.validation-tooltip {
  font-size:0;
  text-indent:-9999em;
  &:before {
    display: inline-block;
    margin-left:8px;
    font:normal 18px/1em 'FontAwesome';
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    content: "\f06a";
    color:#c81717;
    text-decoration: inherit;
    text-indent:0;
    speak: none;
  }
}

.validation-error .validation-tooltip {
  display: inline-block;
}
.validate-group {
  display: inline-block;
  vertical-align: middle;
  min-width: 230px;
}
.validate-group:after {
  content: "";
  clear: both;
  display: block;
}
label.checkbox.error,
label.radio.error {
  padding-right: 12px;
}
.scrollable-container {
  .oro-subtitle {
    margin:0 5px 0 0;
    font-size: 24px;
    line-height: 28px;
    font-size: 20px;
    padding: 0;
  }
  &.disable-scroll {
    overflow: hidden !important;
  }
}

.collection-fields-list {
  input[type='email'],
  input[type='text'] {
    float: left;
  }
  select,
  .selector,
  button {
    float: left;
    margin: 0 0 0 4px;
  }
}
.choice-filter {
  select,
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  .uneditable-input {
    height:19px;
  }
}
.choice-filter .input-append,
.choice-filter .input-prepend {
  margin-bottom: 0;
}
.input-append .add-on,
.input-prepend .add-on {
  height:30px;
  input[type='checkbox'],
  input[type='radio'] {
    margin-top:-1px;
  }
}
.add-list-item {
  i.icon-plus{
    font-size: 12px;
  }
}
.oro-item-collection {
  &>div {
    position: relative;
    padding: 0;
    margin: 0;
    border: none;
  }
  .add-list-item {
    margin-left: 183px;
  }
  .removeRow {
    text-indent:-999;
    font-size:0;
    line-height:0;
    margin: 0 0 0 5px;
    &:after {
      display:inline-block;
      font:14px/1em 'FontAwesome';
      color:#ddd;
      content: "\f00d";
      text-indent:0;
    }
    &:hover:after {
      color:#888;
    }
  }
  .addAfterRow {
    &:after {
      content: "\f067";
    }
    text-indent:-999;
    font-size:0;
    line-height:0;
    margin: 0 0 0 0;
    &:after {
      display:inline-block;
      font:14px/1em 'FontAwesome';
      color:#ddd;
      content: "\f067";
      text-indent:0;
    }
    &:hover:after {
      color:#888;
    }
  }
  .row-oro.oro-multiselect-holder {
    margin: 0 0 5px;
  }
}

.oro-address-collection.oro-item-collection {
  &>div {
    position: relative;
    padding: 10px 15px 0 0;
    margin: 0 0 20px;
    border: 1px solid #e6e6e6;
    background: #f8f8f8;
    border-radius: 4px;
  }
  .add-list-item {
    margin-left: 183px;
  }
  .removeRow {
    position: absolute;
    width: 28px;
    top: 4px;
    right: 4px;
    text-decoration: none;
    &:after {
      color: #bbb;
    }
  }
}

.form-horizontal .control-group {
  margin: 0;
  max-width:700px;
}
.form-container .control-group {
  margin: 0 0 10px;
}

.breadcrumb {
  float: left;
  background: none;
  margin: 0;
  padding: 6px 15px 6px 20px;
}
.breadcrumb > li.active,
.breadcrumb > li {
  color: #777;
  font: 11px/14px @baseFontFamily;
  word-break: break-all;
}
.breadcrumb > li > .divider {
  color: #777;
  padding: 0 1px 0 4px;
}
.btn.favorite-button,
.btn.minimize-button {
  background: none;
  padding: 1px;
  border: 0;
  -webkit-box-shadow:  none;
  box-shadow:  none;
  height: 26px;
  width: 26px;
  &:hover{
    background: #eee;
    .icon-star:before,
    .icon-pushpin:before {
      color: #d7d7d7;
    }
  }
}
.btn.favorite-button {
  padding: 1px 0;
}
.btn.favorite-button .icon-star:before,
.btn.minimize-button .icon-pushpin:before {
  color:#e7e7e7;
  font-size:19px;
}
.btn.favorite-button.gold-icon i:before,
.btn.favorite-button.gold-icon:hover i:before,
.btn.minimize-button.gold-icon i:before,
.btn.minimize-button.gold-icon:hover i:before{
  color:#ffd631;
}
.breadcrumb-pin {
  border-bottom: 1px solid #f2f2f2;
  padding:0;
  background-color: #fff;
  #bookmark-buttons{
    float: right;
  }
  #breadcrumb {
    float:left;
  }
  &:after {
    display: block;
    content: "";
    clear: both;
  }
}

.box-type1 {
  background-color: #fff;
  .title {
    font:bold 14px/18px Helvetica, Arial, sans-serif;
    padding:10px 15px;
  }
  .box-content {
    padding: 20px 15px;
    &.box-split-content {
      background: url("../../img/vertical-separator.png") repeat-y center 0;
      .responsive-small &, .responsive-big & {
        background-image: none;
      }
    }
  }
  .list-inline {
    margin-left: 0;
  }
}

#orocrm_contact_address_form { min-width:400px; }
.float-holder {
  float: left;
  .removeRow {
    margin: 0;
  }
}
pre.email-body {
  width: 100%;
  min-height: 5em;
  overflow: auto;
}
iframe.email-body {
  width: 100%;
  min-height: 5em;
  #font > #family > .monospace();
  color: @grayDark;
  padding: (@baseLineHeight - 1) / 2;
  margin: 0 0 @baseLineHeight / 2;
  display: block;
  font-size: @baseFontSize - 1; // 14px to 13px
  line-height: @baseLineHeight;
  background-color: #f5f5f5;
  border: 1px solid #ccc; // fallback for IE7-8
  border: 1px solid rgba(0,0,0,.15);
  .border-radius(@baseBorderRadius);
}
.ui-dialog-content {
  .email-body-holder {
    .control-group {
      .control-label {
        width: 100px;
      }
      .controls {
        margin-left: 112px;
      }
    }
    .email-body {
      margin: 0;
    }
  }
}
.security-row {
  display: inline-block;
  width: 30%;
  margin-bottom:25px;
  &>div {
    display: inline-block;
    margin-right: 20px;
  }
  input[type="checkbox"]{
    margin: 0;
  }
}

.security-permission {
  width: 120px;
}

span.validation-failed {
  color: @errorText;
  display: block;
  margin: 5px 0 5px 14px;
  line-height: 1.1em;
  clear:both;
  &:before {
    content: "\f00d";
    color: @errorText;
    font: normal 1.15em/1em 'FontAwesome';
    display: inline-block;
    width: 14px;
    margin-left: -14px;
  }
}
.default-field{
  background: #C3C3C3;
}
.tab-container{
  .nav-tabs > .active > a,
  .nav-tabs > .active > a:hover,
  .nav-tabs > .active > a:focus{
    background: #EFEFEF;
  }
  .nav > li > a:focus{
    background: #efefef;
  }
}
.responsive-cell .box-type1{
  .title{
    overflow: hidden;
    .widget-title{
      line-height: 21px;
    }
  }
  .filter-box {
    padding: 5px 20px 5px 130px;
    margin: 5px;
  }
  /*.tab-container{
    .nav-tabs > li > a{
      color: #577bd5;
      font-size: 13px;
      padding-left: 6px;
      padding-right: 6px;
      font-weight: normal;
      &:hover{
        text-decoration: underline;
      }
    }
    .nav-tabs > .active > a,
    .nav-tabs > .active > a:hover,
    .nav-tabs > .active > a:focus{
      color: #577bd5;
      font-size: 13px;
      background: none;
      border: 0;
      font-weight: bold;
      text-decoration: underline;
    }
  }*/
  .tab-container{
    .nav-tabs > .active > a,
    .nav-tabs > .active > a:hover,
    .nav-tabs > .active > a:focus{
      background: #fff;
    }
  }
}

.control-group.create-select-entity {
  max-width: inherit;
}

.create-select-entity-container {
  padding: 5px 30px 30px 30px;
  border: 1px solid #e6e6e6;
  .border-radius(3px);

  .buttons-container {
    margin-left: -20px;
    margin-bottom: 30px;
    a {
      margin-right: 20px;
    }
  }

  .control-label {
    width: 160px !important;
  }

  .box-type1 .title {
    padding-left: 0;
    padding-top: 0;
  }
}

/** Gray line after title centered vertically */
.create-select-entity .box-type1 .title,
.create-select-entity h5 {
  height: 1px;
  margin-bottom: 20px;
  padding: 0;
  position: relative;
  text-align: left;
  border-bottom: #e6e6e6 1px solid;
  overflow: visible;
  width: 90%;
}

.create-select-entity .box-type1 .title .widget-title,
.create-select-entity h5 span {
  background: white;
  display: inline-block;
  line-height: 15px;
  padding-right: 15px;
  position: relative;
  top: -0.6em;
}

/** create-select buttons visibility */
.create-select-entity .entity-create-block,
.create-select-entity .entity-select-block,
.create-select-entity .entity-view-block
{
  display: none;
}

.create-select-entity.create .entity-create-block,
.create-select-entity.grid .entity-select-block,
.create-select-entity.view .entity-view-block
{
  display: block;
}

.create-select-entity.create .entity-cancel-btn,
.create-select-entity.view .entity-cancel-btn,
.create-select-entity.create .entity-create-btn,
.create-select-entity.grid .entity-select-btn {
  display: none;
}
.icon-bars:before {
  content: "\f0c9";
  font-size: 14px;
  font-family: 'FontAwesome';
  line-height: 21px;
  font-style: normal;
}
.oro-tabs {
  .nav-tabs {
    padding-left: 1px; // compensate tabs margin-left: -1px
    margin-bottom: -1px; // should overlay tab-content's top border
    border-bottom: 1px solid #ddd;
    float: left;
  }
  .nav-tabs > li > a,
  .nav-tabs > li > a:hover,
  .nav-tabs > li > a:focus,
  .nav-tabs-dropdown > li.dropdown.open > a {
    color: @gray;
    background-color: #fafafa;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-radius: 0px;
    margin-right: 0px;
    margin-left: -1px;
    height: 38px;
  }

  .nav-tabs-dropdown {
    height: 38px;
    overflow: hidden;
    .dropdown-toggle:focus {
      font-weight: normal;
    }

    li.dropdown.open .caret {
      border-top-color: @linkColor !important;
      border-bottom-color: @linkColor !important;
    }

    li.dropdown.open.active .caret {
      border-top-color: @gray !important;
      border-bottom-color: @gray !important;
    }
  }

  .nav-tabs > .active > a,
  .nav-tabs > .active > a:hover,
  .nav-tabs > .active > a:focus,
  .nav-tabs > li.dropdown.open.active > a {
    color: @gray;
    border-bottom: 1px solid #fff;
    border-right-color: #ddd;
    border-top-color: #ddd;
    background-color: #fff;
    outline: none;
  }

  .tab-content {
    overflow: initial;
    border: 1px solid #ddd;
    clear: both;
  }

  .tab-pane {
    min-height: 104px;
  }
}

.nav-tabs {
  padding-left: 1px; // compensate tabs margin-left: -1px
  margin-bottom: -1px; // should overlay tab-content's top border
  border-bottom: 1px solid #ddd;
  float: left;
}
.tab-content {
  border-top: 1px solid #ddd;
  clear: both;
}
.nav-tabs > li > a.widget-component-processing{
  background: #ccc !important;
  border-bottom: 1px solid transparent !important;
  /* following two lines allow this tab handle overlay .tab-content while it is loading */
  position: relative;
  z-index: 1;
}
// capitalize buttons, labels, titles, breadcrumb for English language
.lang-en {
  .btn, .btn-group a,
  #main label,
  .oro-subtitle, .title, .ui-dialog-title,
  .btn-group .dropdown-menu button,
  .breadcrumb li {
    text-transform: capitalize;
  }
}
.pull-left-extra{
  margin-left: 20px;
}

.tooltip-icon {
  color: #6b92d0;
  font-size: 13px;
}

#container .popover {
  // prevent menu and loading wrapper overlapping
  z-index: 800;
}

.popover {
  max-width: 315px; /* little increase to fit usual content */
  .popover-content {
    padding: 13px 30px 13px 15px;
    height: 100%;
  }
  .oro-popover-content {
    overflow-y: auto;
    height: 100%;
  }
  .popover-close {
    position: absolute;
    top: 9px;
    right: 9px;
    cursor: pointer;
  }
}

label .popover-content {
  text-transform: none;
}

.entity-field-path {
  > * {
    &:before {
      content: '/';
      display: inline;
      padding: 0 3px;
    }
    &:first-child {
      &:before {
        display: none;
      }
    }
    &:last-child {
      &:before {
        content: '>';
        font-weight: normal;
      }
    }
  }
}
.list-widget .widget-actions-section {
  a.btn {
    line-height:1em;
    height:auto;
    border: 0;
    background: 0;
    .box-shadow(none);
    padding: 0 0 0 10px;
    [class^='icon-'] {
      &:before {
        opacity: 0.6;
        font-size:15px;
      }
      &:hover {
        &:before {
          opacity: 1;
        }
      }
    }
  }
  a.btn.disabled,
  a.btn[disabled] {
    cursor: not-allowed;
    [class^='icon-'] {
      &:before {
        opacity: 0.3;
      }
      &:hover {
        &:before {
          opacity: 0.3;
        }
      }
    }
  }
}
.list-box {
  &:after {
    content: "";
    clear: both;
    display: block;
  }
  .list-item {
    border-bottom: 1px solid #eeeeee;
    padding: 15px;
    .box-sizing(border-box);
    width: 100%;
    &:hover {
      background:#f8f8f8;
    }
    .actions {
      position:relative;
      float: right;
      margin-right:-4px;
      z-index:99;
      .btn {
        line-height:1em;
        height:auto;
        border: 0;
        background: 0;
        .box-shadow(none);
        padding: 0;
        [class^='icon-'] {
          &:before {
            opacity: 0.6;
            font-size:15px;
          }
          &:hover {
            &:before {
              opacity: 1;
            }
          }
        }
      }
      .btn.disabled,
      .btn[disabled] {
        cursor: not-allowed;
        [class^='icon-'] {
          &:before {
            opacity: 0.3;
          }
          &:hover {
            &:before {
              opacity: 0.3;
            }
          }
        }
      }
    }
  }
}

.entity-create-or-select-container .entity-create-btn {
  padding: 0 6px;
  margin-left: 3px;
  height: 30px;
}

.entity-create-enabled .input-prepend .select2-container,
.entity-create-enabled .input-append .select2-container {
  width: 228px;
}

.invisible {
  opacity: 0;
}
// dropdowns should be able to exceed accordion body area
.accordion-body {
  .clearfix();
  // once accordion is opened and animation is finished
  &[style="height: auto;"] {
    overflow: visible;
  }
  &.in {
    // fixes expand in FF
    min-height: 1px;
  }
}
.icon-with-counter {
  position: relative;
  white-space: nowrap;
  .item-counter {
    font-size: 9px;
    width: auto;
    display: inline-block;
    border-radius: 8px;
    position: relative;
    margin-left: -7px;
    margin-right: -5px;
    top: -1px;
    line-height: 10px;
    padding: 0 3px;
  }
}