// Nav User
// ---------------
.nav-user {
  margin-bottom: - (@global-margin/2);
  margin-top: -@global-margin/2;

  > li > a {
    color: rgba(255, 255, 255, 0.5);
    height: 50px;
    line-height: 50px;
    padding-left: @gridGutterWidth;
    padding-right: @gridGutterWidth;
    min-width: 160px;

    &:hover, &:focus, &:active {
      color: @white;
      background: none;

      .icon-user {
        background-color: @white;
      }
    }

    @media (max-width: @screen-sm-max) {
      min-width: 65px;
      padding-right: 0;

      strong {
        display: none;
      }
    }
  }

  > li.open > a {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .open > .dropdown-menu {
    border-radius: 0;
    left: auto;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    right: 0;
    min-width: 166px;

    li:first-child {
      border-bottom: 1px solid #ddd;
    }

    li.divider {
      display: none;
    }

    a {
      height: 38px;
      line-height: 38px;
      padding-top: 0;
      padding-bottom: 0;

      &:hover, &:focus, &:active {
        background: @grayLighter;
        color: @grayDarker;
      }
    }
  }

  .dropdown-menu .divider {
    border-bottom: 0;
  }

  .icon-user {
    background-color: rgba(255, 255, 255, 0.8);
    color: rgba(0, 0, 0, 0.8);
    padding: 5px;
    text-align: center;
    height: 24px;
    width: 24px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
  }

  @media (max-width: @screen-xs-max) {
    strong {
      display: none;
    }
  }
}


.nav-announcements {
  margin-bottom: -@global-margin/2;
  margin-top: -@global-margin/2;

  > li > a {
    height: 50px;
    line-height: 50px;

    &:hover, &:focus, &:active {
      background-color: transparent;
      color: @white;
    }
  }

  > li.open > a {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .open > .dropdown-menu {
    left: auto;
    right: 0;
    min-width: 300px;
    max-height: 400px;
    padding: @global-padding;
    overflow: auto;
    margin-top: 0;

    ul {
      margin: 0;
      list-style: none;
    }
  }
}

// Toolbar
// ------------
div#toolbar {
  background: @white;
  border: 1px solid lighten(@grayLight, 25%);
  border-bottom-width: 2px;
  border-radius: 3px;
}

#toolbar,
.btn-toolbar {
  .clearfix();
  background-color: @wellBackground;
  border-radius: @baseBorderRadius;

  .btn-success {
    width: 148px;
  }

  .btn-wrapper {
    float: left;
    margin-right: @gridGutterWidth/2; 

    @media (max-width: @screen-sm-max) {
      margin-bottom: @gridGutterWidth/2;
    }
  }
}

#toolbar.btn-toolbar {
  margin: @global-margin 0;
  padding: @global-padding @gridGutterWidth;

  .btn {
    min-height: 38px;
    height: auto;
  }

  @media (max-width: @screen-md-max) {
    padding-right: @gridGutterWidth/2;
    padding-left: @gridGutterWidth/2;
  }
}

#toolbar #toolbar-options,
#toolbar #toolbar-help {
  float: right;

  @media (max-width: @screen-md-max) {
    span {
      display: none;
    }
  }
}

html[dir=rtl] #toolbar #toolbar-options,
html[dir=rtl] #toolbar #toolbar-help {
  float: left;
}

.btn-toolbar {
}

/* Stools Container */
.js-stools-container-list {
  > .btn {
    float: right;
  }

  .ordering-select {
    float: right;
    margin-right: @global-margin/2;
  }
}

.js-stools-container-bar .btn-primary .caret {
  margin-top: 10px;
}

.js-stools .js-stools-container-bar, 
.js-stools .js-stools-container-list,
.js-stools .js-stools-container-selector {
  margin-top: 10px;
}

.js-stools {
  @media (max-width: @screen-sm-max) {
    .hidden-phone,
    .hidden-tablet { 
      display: none;
    }
  }
}

.jcomponent .js-stools .js-stools-container-list {
  @media (max-width: @screen-sm-max) {
    &.hidden-phone,
    &.hidden-tablet { 
      display: block !important;
    }
  }
}

/* Content */
.well .page-header {
  margin: -10px 0 18px 0;
  padding-bottom: 5px;
}

.well .row-even p,
.well .row-odd p {
  margin-bottom: 0;
}
/* Headings */

h1, h2, h3, h4, h5, h6 {
  margin: (@baseLineHeight / 1.5) 0;
}

h1 {
  font-size: 26px;
  line-height: 28px;
}

h2 {
  font-size: 22px;
  line-height: 24px;
}

h3 {
  font-size: 18px;
  line-height: 20px;
}

h4 {
  font-size: 14px;
  line-height: 16px;
}

h5 {
  font-size: 13px;
  line-height: 15px;
}

h6 {
  font-size: 12px;
  line-height: 14px;
}

/* Sidebar */
.sidebar-nav .nav-list {
  padding-left: 25px;
  padding-right: 25px;
}

.sidebar-nav .nav-list > li > a {
  color: #555;
  padding: 3px 25px;
  margin-left: -25px;
  margin-right: -25px;
}

.sidebar-nav .nav-list > li.active > a {
  color: #fff;
  margin-right: -26px;
}

/* Quick-icons */
.quick-icons .nav li + .nav-header {
  margin-top: 12px;
  margin-bottom: 2px;
}

.quick-icons .nav-list > li > a {
  padding: 5px 15px;
}

.quick-icons {
  font-size: 14px;
  margin-bottom: 20px;
}

.quick-icons .nav-header, .well .module-title.nav-header {
  font-size: 13px;
}

.quick-icons h2.nav-header {
  margin: 12px 0 5px;
}

.quick-icons h2.nav-header:first-child {
  margin: 0px 0 5px;
}

.well .module-title.nav-header {
  padding: 0px 15px 7px;
  margin: 0px;
}

.quick-icons [class^="icon-"]:before, .quick-icons [class*=" icon-"]:before {
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 18px;
}

.quick-icons .nav-list [class^="icon-"], .quick-icons .nav-list [class*=" icon-"] {
  margin-right: 9px;
}

html[dir=rtl] .quick-icons .nav-list [class^="icon-"], html[dir=rtl] .quick-icons .nav-list [class*=" icon-"] {
  margin-left: 9px;
  margin-right: 0px;
}
/* Links */
.j-links-separator {
  margin: 20px 0px;
  width: 100%;
  height: 0px;
  border-top: 2px solid #ddd;
}

/* Main Container & System Debug Padding */
.container-main,
#system-debug {
  padding-bottom: 50px;
}

/* Status Module in top position */
#status.status-top {
  background: @headerBackground;
  .box-shadow(~"0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px rgba(0, 0, 0, 0.3) inset, 0px -1px 0px rgba(0, 0, 0, 0.3)");
  border-top: 0;
  color: @navbarInverseText;
  padding: 2px 20px 6px 20px;

  a {
    color: @navbarInverseLinkColor;
  }
}

/* Pagination in toolbar */
.pagination-toolbar {
  margin: @global-margin 0 0;

  ul > li > a,
  ul > li > span {
    border-color: lighten(@grayLight, 15%);
    padding: 8px 12px;
  }
}

.pagination-toolbar a {
  line-height: 26px;
}

/* Toolbar dropdown */
.pull-right > .dropdown-menu {
  left: auto;
  right: 0;
}

/* Disabled (generic) */
.disabled {
  cursor: default;
  background-image: none;
  .opacity(65);
  .box-shadow(none);
}

/* Nav list filters */
.nav-filters hr {
  margin: 5px 0;
}

/* Module Assignment Tab */
#assignment.tab-pane {
  min-height: 500px;
}
// Button color
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
  color: rgba(255, 255, 255, .95);
}

/* Chosen Max Width */
.chzn-container,
.chzn-drop {
  max-width: 100% !important;
}

.chzn-container-single .chzn-single abbr {
  top: 11px;
}

@media (max-width: @screen-sm-max) {
  .row-fluid [class*="span"] {
    margin-left: 0;
    width: 100%;
  }

  .navbar {
    .nav {
      font-size: 13px;
      margin: 0 2px 0 0;
      > li {
        > a {
          padding: 6px;
        }
      }
    }
  }

  .container-fluid {
    padding-left: @gridGutterWidth/2;
    padding-right: @gridGutterWidth/2;
  }
}

@media (min-width: @screen-sm-min) {
  body.component {
    padding-top: 0;
    height: 100%;
    overflow: auto;
  }

  .row-fluid [class*="span"] {
    margin-left: 2.127659574%;

    &.span12 {
      padding-left: 0;
    }
  }

  .row-fluid .modal-batch [class*="span"] {
    margin-left: 0;
  }

  .nav-collapse.collapse.in {
    height: auto !important;
  }
}

@media (max-width: @screen-xs-max) {
  .navbar-search.pull-right {
    float: none;
    text-align: center;
  }

  .subhead-fixed {
    position: static;
    width: auto;
  }

  .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 738px) {
  body.component {
    padding-top: 0;
  }
}

@media (max-width: 738px) {
  .navbar {
    .brand {
      font-size: 16px;

    }
  }
}

/* Subhead (toolbar) Collapse Button */
.btn-subhead {
  display: none;
}

@media (min-width: 481px) {
  #filter-bar {
    height: auto;
    padding: @global-padding/2 @gridGutterWidth;

    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 {
      margin-bottom: 0 !important
    }
  }
}
/* Extended Responsive Styles */
@media (max-width: 480px) {
  .table th:nth-of-type(n+5),
  .table th:nth-of-type(3),
  .table th:nth-of-type(2),
  .table td:nth-of-type(n+5),
  .table td:nth-of-type(2),
  .table td:nth-of-type(3) {
    white-space: normal;
  }

  .pagination a {
    padding: 5px;
  }

  .btn-group.divider,
  .header .row-fluid .span3,
  .header .row-fluid .span7 {
    display: none;
  }

  .navbar .btn {
    margin: 0;
  }

  .btn-subhead {
    display: block;
    margin: 10px 0;    
  }

  .chzn-container,
  .chzn-container .chzn-results,
  .chzn-container-single .chzn-drop {
    width: 99% !important;
  }

  .subhead-collapse.collapse {
    height: 0;
    overflow: hidden;
  }

  .btn-toolbar .btn-wrapper {
    display: block;
    margin: 0px 10px 5px 10px;
  }

  .btn-toolbar .btn-wrapper .btn {
    width: 100% !important;
  }

  .subhead {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 0 solid darken(@wellBackground, 7%);
  }

  .btn-group + .btn-group {
    margin-left: 10px;
  }

  .login .chzn-single { 
    width: 222px !important;
  }

  .login .chzn-container,
  .login .chzn-drop {
    width: 230px !important;
  }
}

@media (max-width: 320px) {
  .view-login .navbar-fixed-bottom {
    display: none;
  }

  .btn-toolbar .btn-wrapper .btn {
    width: 100% !important;
  }
}
// Navbar
.nav-collapse .nav li a,
.dropdown-menu a {
  background-image: none;
}

.nav-collapse .dropdown-menu > li > span {
  display: block;
  padding: 3px 20px;
}

@media (max-width: @navbarCollapseWidth) {
  .navbar-fixed-top .navbar-inner,
  .navbar-fixed-top .navbar-inner .container-fluid {
    padding: 0;
  }

  .navbar .brand {
    margin-top: 2px;
    float: none;
    text-align: center;
  }

  .navbar .btn-navbar {
    margin-top: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
  }

  .nav-collapse .nav .nav-header {
    color: @white;
  }

  .nav-collapse .nav,
  .navbar .nav-collapse .nav.pull-right {
    margin: 0;
  }

  .nav-collapse .dropdown-menu {
    margin: 0;
  }

  .nav-collapse .dropdown-menu > li > span {
    display: block;
    padding: 4px 15px;
  }

  .navbar-inverse .nav-collapse .dropdown-menu > li > span {
    color: @navbarInverseLinkColor;
  }

  .nav-collapse .nav > li > a.dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.07);
    font-size: 12px;
    font-weight: bold;
    color: @grayLighter;
    text-transform: uppercase;
    padding-left: 15px;
  }

  .nav-collapse .nav li a {
    margin-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  }

  .nav-collapse .nav li ul li ul.dropdown-menu,
  .nav-collapse .nav li ul li:hover ul.dropdown-menu,
  .nav-collapse .caret {
    display: none !important;
  }

  .nav-collapse .nav > li > a,
  .nav-collapse .dropdown-menu a {
    font-size: 15px;
    font-weight: normal;
    color: @white;
    .border-radius(0);
  }

  .navbar .nav-collapse .nav > li > .dropdown-menu::before,
  .navbar .nav-collapse .nav > li > .dropdown-menu::after,
  .navbar .nav-collapse .dropdown-submenu > a::after {
    display: none;
  }

  .nav-collapse .dropdown-menu li + li a {
    margin-bottom: 0;
  }
}

/* Sortable list*/
.sortable-handler.inactive {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

/* Joomla and Extension update message */
.alert-joomlaupdate {
  text-align: center;

  button {
    vertical-align: baseline;
  }
}


// Normalize LTR Label (JBS request)
// --------------------------
.form-horizontal {

  // Float the labels left
  .control-label {
    width: auto;
    padding-right: 5px;
    text-align: left;
    // Set a width for the spacer hr so it shows
    .spacer hr {
      width: 380px;
      @media (max-width: 420px) {
        width: 220px;
      }
    }
  }

  #jform_catid_chzn {
    vertical-align: middle;
  }

  @media (max-width: @screen-xs-max) {
    .control-label {
      float: none;
      width: auto;
      padding-right: 0;
      padding-top: 0;
      text-align: left;

      > label {
        display: inline-block;
        .ie7-inline-block();
      }
    }

    .controls {
      margin-left: 0;
    }
  }
}

.form-vertical {
  .control-label {
    > label {
      display: inline-block;
      .ie7-inline-block();
    }
  }
  .controls {
    margin-left: 0;
  }
}

@media (max-width: @screen-sm-max) {
  .form-horizontal-desktop {
    .control-label {
      float: none;
      width: auto;
      padding-right: 0;
      padding-top: 0;
      text-align: left;
      > label {
        display: inline-block;
        .ie7-inline-block();
      }
    }
    .controls {
      margin-left: 0;
    }
  }
}

@media (max-width: @screen-md-max) {
  .row-fluid .row-fluid .form-horizontal-desktop {
    .control-label {
      float: none;
      width: auto;
      padding-right: 0;
      padding-top: 0;
      text-align: left;
      > label {
        display: inline-block;
        .ie7-inline-block();
      }
    }
    .controls {
      margin-left: 0;
    }
  }
}

.form-inline-header {
  margin: 5px 0;
  .control-group,
  .control-label,
  .controls {
    display: inline-block;
    .ie7-inline-block();
  }
  .control-label {
    width: auto;
    padding-right: 10px;
  }
  .controls {
    padding-right: 20px;
  }
}

.contentpane .form-inline-header {
  margin-top: 0;
  margin-bottom: @global-margin;

  input {
    box-shadow: none;
  }
}

/* Display checkboxes without bullets in list */
fieldset.checkboxes input {
  float: left;
}

fieldset.checkboxes li {
  list-style: none;
}
/* Media Manager folder icon override */
ul.manager .height-50 .icon-folder-2 {
  height: 35px;
  width: 35px;
  line-height: 35px;
  font-size: 30px;
}

/* Flash uploader */
.upload-queue > li > span,
.upload-queue > li > a {
  margin: 0 2px;
}

.upload-queue .file-remove {
  float: right;
}

/* z-index issues */
.moor-box {
  z-index: 3;
}

.admin .chzn-container .chzn-drop {
  z-index: 1020;
}

/* Tree Select */
ul.treeselect,
ul.treeselect li {
  margin: 0;
  padding: 0;
}

ul.treeselect {
  margin-top: 8px;
}

ul.treeselect li {
  padding: 2px 10px 2px;
  list-style: none;
}

ul.treeselect i.treeselect-toggle {
  line-height: 18px;
}

ul.treeselect label {
  font-size: 1em;
  margin-left: 8px;
}

ul.treeselect label.nav-header {
  padding: 0;
}

ul.treeselect input {
  margin: 2px 0 0 8px;
}

ul.treeselect .treeselect-menu {
  margin: 0 6px;
}

ul.treeselect ul.dropdown-menu {
  margin: 0;
}

ul.treeselect ul.dropdown-menu li {
  padding: 0 5px;
  border: none;
}

/* Tables */
td.has-context {
  // Fixes difference in height between normal and hover on cell with context
  height: 23px;
}

td.nowrap.has-context {
  width: 45%;
}

/* Item associations */
.item-associations {
  margin: 0;
}

.item-associations li {
  list-style: none;
  display: inline-block;
  margin: 0 0 3px 0;
}

.item-associations li a {
  color: #fff;
}
/* Content Languages flag */
#flag img {
  padding-top: 6px;
  vertical-align: top;
}
/* Tweaking of tooltips */
.tooltip {
  max-width: 400px;
}

.tooltip-inner {
  max-width: none;
  text-align: left;
  text-shadow: none;
}

th .tooltip-inner {
  font-weight: normal;
}

.tooltip.hasimage {
  opacity: 1;
}

/* Permissions dropdown display */
#permissions-sliders .chzn-container {
  position: absolute;
}

/* Component pop-up */
.container-popup {
  padding: 15px;
}

/* Min-width on buttons */
.controls .btn-group > .btn {
  min-width: 50px;
}

.controls .btn-group.btn-group-yesno > .btn {
  min-width: 84px;
  padding: 2px 12px;
}
.img-preview > img {
  max-height: 100%;
}

/* Help site refresh button*/
#helpsite-refresh {
  vertical-align: top;
}

.alert-no-items {
  margin-top: 20px;
}

@media (max-width: @screen-xs-max) {
  html[dir=rtl] #toolbar #toolbar-options,
  html[dir=rtl] #toolbar #toolbar-help,
  #toolbar #toolbar-options,
  #toolbar #toolbar-help {
    float: none;
  }
}

/* Title field */
input.input-large-text {
  font-size: 18px;
  line-height: 22px;
  height: auto;
}

/* Extension type labels */
.info-labels {
  margin-top: -5px;
  margin-bottom: 10px;
}

/* Chosen color styles */
[class^="chzn-color"].chzn-single,
[class*=" chzn-color"].chzn-single,
[class^="chzn-color"].chzn-single .chzn-single-with-drop,
[class*=" chzn-color"].chzn-single .chzn-single-with-drop {
  .box-shadow(none);
}

.chzn-color.chzn-single[rel="value_1"],
.chzn-color-reverse.chzn-single[rel="value_0"],
.chzn-color-state.chzn-single[rel="value_1"] {
  .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
}

.chzn-color.chzn-single[rel="value_0"],
.chzn-color-reverse.chzn-single[rel="value_1"],
.chzn-color-state.chzn-single[rel="value_0"],
.chzn-color-state.chzn-single[rel="value_-1"],
.chzn-color-state.chzn-single[rel="value_-2"] {
  .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
}

/* Widen the drop downs for the Permissions Field */
#permissions-sliders .input-small {
  width: 120px;
}

.editor {
  overflow: hidden;
  position: relative
}

.editor textarea.mce_editable {
  box-sizing: border-box;
}

/* For grid.boolean */
a.grid_false {
  display: inline-block;
  height: 16px;
  width: 16px;
  background-image: url('../images/admin/publish_r.png');
}

a.grid_true {
  display: inline-block;
  height: 16px;
  width: 16px;
  background-image: url('../images/admin/icon-16-allow.png');
}

/* For collapsible sidebar */
.j-sidebar-container {
  
  &.j-sidebar-hidden {
    
  }

  &.j-sidebar-visible {
  }

  .filter-select {
  }
}

.j-toggle-button-wrapper {
  position: absolute;
  display: block;
  top: 7px;
  padding: 0;

  &.j-toggle-hidden {
    right: -24px;
  }

  &.j-toggle-visible {
    right: 7px;
  }
}

.j-toggle-sidebar-button {
  font-size: 16px;
  color: @linkColor;
  text-decoration: none;
  cursor: pointer;
  
  &:hover {
    color: @linkColorHover;
  }
}

#system-message-container,
#j-main-container {
  padding: 0 0 0 5px;
  min-height: 0;
}

#system-message-container.j-toggle-main,
#j-main-container.j-toggle-main,
#system-debug.j-toggle-main {
  float: right;
  width: 100%;
}

@media (min-width: @screen-sm-min) {
  .j-toggle-transition {
    .transition(all 0.3s ease);
  }
}

@media (max-width: 979px) {
  .j-toggle-button-wrapper.j-toggle-hidden {
    right: -20px;
  }
}

@media (max-width: @screen-xs-max) {
  .j-sidebar-container {
  }

  .j-sidebar-container.j-sidebar-hidden {
    margin-left: 16.5%;
  }

  .j-sidebar-container.j-sidebar-visible {
    margin-left: 0;
  }

  .j-toggle-sidebar-header,
  .j-toggle-button-wrapper {
    display: none;
  }

  .view-login {
    select {
      width: 232px;
    }
  }
}

@media (max-width: 500px) {
  .j-sidebar-container {
    margin: 0;
  }

  .view-login {
    .control-group {
      text-align: center;
    }

    .input-medium {
      width: 130px;
    }

    .btn-block {
      width: 241px;
      display: inline-block;
    }

    select {
      width: 232px
    }
  }
}

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

/* Customize Textarea Resizing */
textarea {
  resize: both;
}

textarea.vert {
  resize: vertical;
}

textarea.noResize {
  resize: none;
}

/* Prevent scrolling on the parent window of a modal */
body.modal-open {
  overflow: hidden;
  -ms-overflow-style: none;
}

/* Corrects the modals padding */
.field-media-wrapper .modal .modal-body {
  padding: 5px 10px;
  overflow: hidden;
}

/* Stats plugin */
.js-pstats-data-details dd {
  margin-left: 240px;
}
.js-pstats-data-details dt {
  width: 220px;
}

/* Corrects the media modal padding on small devices */
@media (max-width: @screen-xs-max) {
  .field-media-wrapper .modal .modal-body {
    padding: 5px 0;
  }
}

/* Fix iOS scrolling inside bootstrap modals (using iframe) */
.modal-body {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto !important;
}


// Dashboard home
.dashboard-home {
  border-bottom: 1px solid @border-color;
  margin-bottom: @global-margin * 2;
  .clearfix();
  
  h3 {
    display: inline-block;
    margin-right: @global-margin;
  }

  .dashboard-toolbox {
    border: 1px solid @border-color;
    border-bottom-color: @white;
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: -1px;
  }
}


// Quick links
.dashboard-links {
  margin-bottom: @global-margin;
  padding: (@global-padding * 2) 0 @global-padding ;
  overflow: hidden;

  // Group style
  .group {
    background-color: lighten(@grayLighter, 3%);
    border: 1px solid lighten(@grayLight, 30%);
    border-top: 2px solid @blue;
    border-radius: 2px;
    margin: 0 @global-margin @global-margin 0;
    padding: (@global-padding * 2.5) @global-padding @global-padding;
    position: relative;
    float: left;
    width: calc(~"25% - 18px");   

    &:nth-child(4n+1) {
      clear: both;
    }

    @media (max-width: @screen-md-max) {
      width: calc(~"50% - 18px");
    }

    @media (max-width: @screen-xs-max) {
      width: calc(~"50% - 18px");

      &:nth-child(2n+1) {
        clear: both;
      }
    }

    @media (max-width: 480px) {
      width: 100%;
      margin-right: 0;
    }
  }

  h3 {
    background-color: @white;
    border-right: 2px solid @border-color;
    border-bottom: 2px solid @border-color;
    border-radius: 2px 0 2px 0;
    font-size: 15px;
    line-height: 1;
    margin: 0;
    padding: (@global-padding / 2) @global-padding;
    position: absolute;
    top: 0;
    left: 0;
  }

  ul {
    list-style: none;
    margin: 0 -(@global-margin / 2);
    padding: 0;

    li {
      display: block;
      float: left;
      padding: @global-padding / 2;
      width: 100%;

      // Medium screen
      @media screen and (min-width: 1280px) {
        width: 50%;
      }

      // Large screen
      @media screen and (min-width: 1920px) {
        width: 33.3%;
      }

      i {
        color: @grayLight;
        font-size: 32px;
      }

      img {
        max-height: 30px;
        display: inline-block;
      }

      a {
        background-color: @white;
        border-radius: 3px;
        display: block;
        border: 1px solid @border-color;
        border-bottom-width: 2px;
        color: @gray;
        min-height: 100px;
        line-height: 38px;
        padding: @global-padding;
        overflow: hidden;
        position: relative;
        text-align: center;
        .transition(all 0.35s);

        &:hover {
          border-bottom-color: @blue;
          text-decoration: none;

          i {
            color: @blue;
          }

          span strong {
          }
        }

        span {
          display: block;
          font-size: 14px;
          position: absolute;
          left: 0;
          bottom: @global-padding;
          text-align: center;
          line-height: 1;
          width: 100%;
        }

        strong {
          font-weight: normal;
        }

      }

    }
  }
}


// Quick link (list view)
.quicklinks-list {
  .dashboard-links {
    background-color: @grayLighter;
    border: 1px solid @border-color;
    margin-top: @global-margin * 2;
    padding: (@global-padding * 1.5) @global-padding;

    // Group
    .group {
      background: @white;
      box-shadow: 3px 3px 0 rgba(0,0,0,0.05);
      border: 1px solid lighten(@grayLight, 20%);
      border-radius: 0;
      padding: 0 @global-padding @global-padding;

      // Group title
      h3 {
        border: 0;
        border-bottom: 2px solid @border-color;
        border-radius: 0;
        margin: 0 -@global-margin @global-margin;
        padding: 0 @global-padding;
        position: relative;

        span {
          border-bottom: 2px solid @blue;
          display: inline-block;
          margin-bottom: -2px;
          padding: 15px 0;
        }
      }

      ul {
        margin-left: 0;
        margin-right: 0;

        li {
          float: none;
          padding: 0;
          position: relative;
          width: 100%;

          a {
            background-color: transparent;
            border: 1px solid lighten(@grayLight, 30%);
            border-radius: 0;
            margin: 0 0 (@global-margin / 2);
            padding: 12px 15px;
            min-height: 1px;
            line-height: 1;
            text-align: left;

            &:after {
              font-family: FontAwesome;
              color: @gray;
              content: "\f178";
              display: inline-block;
              position: absolute;
              right: 15px;
              top: 50%;
              opacity: 0;
              margin-top: -8px;
              width: 20px;
              transition: all 0.35s;
            }

            &:hover, &:focus, &:active {
              background-color: lighten(@grayLighter, 5%);
              border-color: @blue;
              box-shadow: 0 0 3px rgba(0,0,0,0.1);
              color: @blue;

              &:after {
                color: @blue;
                opacity: 1;
                right: 10px;
              }
            }
          }

          i {
            display: inline-block;
            font-size: 14px;
            margin-right: 5px;
            min-width: 12px;
          }

          span {
            display: inline-block;
            position: relative;
            left: 0;
            bottom: 0;
            width: auto;
          }
        }
      }
    }
  }
}

// Quick link (list view)
.flayout {
  .dashboard-links {
    padding-bottom: 0;

    .group {
      border: 0;
      padding-top: @global-padding / 2;
      padding-left: 160px;
      min-height: 80px;

      @media (max-width: 1366px) {
        width: calc(~"50% - 18px");
      }

      @media (max-width: @screen-xs-max) {
        width: calc(~"100% - 18px");
      }

      // Mobile screen
      @media (max-width: @screen-xs-min) {
        padding-left: @global-padding;
        padding-top: 50px;
      }

      h3 {
        background-color: @blue;
        border-radius: 0;
        border: 0;
        color: @white;
        font-size: 14px;
        line-height: 1.5;
        min-height: 70px;
        padding-top: @global-padding;
        text-align: center;
        top: -7px;
        left: @global-padding / 2;
        width: 130px;

        @media (max-width: @screen-xs-min) {
          padding: (@global-padding / 2) @global-padding;
          min-height: 1px;
          width: auto;
        }

        &:before {
          border-top: 5px solid darken(@blue, 10%);
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          content: "";
          display: block;
          position: absolute;
          top: 3px;
          left: -7px;
          transform: rotate(-45deg);
        }
      }

      ul li {
        float: none;
        padding: 0;
        width: 100%;

        & + li {
          margin-top: 10px;
        }

        a {
          border: 1px solid @border-color;
          border-radius: 0;
          line-height: 1;
          min-height: 10px;
          padding-top: 12px;
          padding-bottom: 12px;
          padding-left: 12px;
          position: relative;
          text-align: left;

          &:before {
            background-color: @grayLighter;
            border-right: 1px solid @border-color;
            content: "";
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
          }

          &:hover, &:focus, &:active {
            border-color: @grayLight;

            i {
              color: @white;
            }

            &:before {
              background-color: @grayLight;
              border-color: @grayLight;
            }
          }
        }

        span {
          bottom: auto;
          display: inline-block;
          left: auto;
          position: relative;
          text-align: left;
          width: auto;
        }

        i {
          display: inline-block;
          font-size: 15px;
          position: relative;
          margin-right: 15px;
          width: 18px;
          text-align: center;
          z-index: 100;
        }
      }
    }
  }
}


// JOOMLA OVERRIDE STYLE
// ---------------------
// Icon colors
.icon-featured::before,
.icon-default::before,
.icon-expired::before,
.icon-pending::before {
  color: #c67605;
}

// Table module list
// -----------------
table.moduleList {
  margin-top: @global-margin;
}

// Plugin list
// -----------
table#pluginList {
  .btn-micro,
  .btn.active {
    height: 24px;
    line-height: 20px;
  }
}


// Install from Web / Com Messages
// -------------------------------
.com-apps-container {
  #filter-bar {
    height: auto;
    padding: @global-padding/2 @gridGutterWidth;

    .btn-group.pull-right.select {
      width: auto;
    }

    #filter_search {
      margin-bottom: 0;
    }
  }
}


// Com Messages
// ---------------
.com_messages {
  #filter-bar {
    height: auto;
    padding: @global-padding/2 @gridGutterWidth;

    .btn-group.pull-right.select {
      width: auto;
    }

    #filter_search {
      margin-bottom: 0;
    }
  }
}

#modal-cog {
  left: 50%;
  right: auto;
  bottom: auto;

  .modal-body #kunena {
    max-width: none !important;
  }
}

body.contentpane.component {
  #message-form {
    margin-bottom: 0;

    .control-label {
      margin-bottom: @global-margin/2;
    }
  }
}


// List style
#styleList {
  margin-top: @global-margin;

  td {
    vertical-align: middle;
  }

  .btn-micro {
    background: @white;
    border: 1px solid lighten(@grayLight, 20%);
    box-shadow: none;
    border-radius: 2px;
    padding: 1px 4px;
    text-align: center;
    line-height: 18px;

    span {
      font-size: 12px;
      margin: 0;
    }
  }

  input[type="checkbox"] {
    margin-top: 0;
    margin-bottom: 5px;
  }

  @media (max-width: @screen-sm-max) {
    .hidden-phone {
      display: none;
    }
  }
}


// Quick link table
// ----------------
#systemLinks {
  td {
    vertical-align: middle;
  }

  td:nth-child(1) { width: 5%; }
  td:nth-child(2) { width: 15%; }
  td:nth-child(3) { width: 45%; }
  td:nth-child(4) { width: 10%; }
  td:nth-child(5) { width: 10%; }
  td:nth-child(6) { width: 10%; }

  input[type="text"] {
    box-shadow: none;
    margin-bottom: 0;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  h4 {
    margin-bottom: 2px;
  }

  .quicklink-url {
    color: @grayLight;
    font-size: 12px;
  }
}

#dashboard-quicklinks {
  height: 100%;

  #quicklink-wrap {
    overflow: hidden;
    height: 100%;
    padding-bottom: @global-padding;
  }

  #group-en,
  #group-dis {
    border: 1px solid @border-color;
    float: left;
    width: 48%;
    height: 100%;
  }

  #group-en {
    #addNewGroup.in + .group-body {
      height: calc(~"100% - 150px");
    }
  }

  #group-dis {
    float: right;

    .group-body {
      height: calc(~"100% - 69px"); 
    }

    #addLinkForm.in + .group-body {
      height: calc(~"100% - 200px");
    }
  }

  // Group header
  .group-header {
    background-color: @grayLighter;
    box-shadow: 0 -2px 0 0 @grayLight inset;
    padding: (@global-padding / 2) @global-padding;
    overflow: hidden;

    h3 {
      border-bottom: 2px solid @blue;
      display: inline-block; 
      font-size: 16px;
      color: @blue;
      margin: -(@global-padding / 2) 0 -(@global-padding / 2) -@global-padding;
      padding: (@global-padding / 2) 0 (@global-padding / 2) @global-padding;
      line-height: 36px;
    }

    .btn {
      float: right;
    }

    .searchLink {
      float: right;
      margin-right: @global-margin/2;
      margin-bottom: 0;
      position: relative;

      .add-on {
        border: 0;
        border-left: 1px solid @border-color;
        background: none;
        float: right;
        height: 26px;
        line-height: 26px;
        position: absolute;
        z-index: 3;
        right: 3px;
      }
    }

    #searchLink {
      margin-bottom: 0;
      padding-right: 38px;
      float: right;
    }
  }

  // Add link form (must change form name in next version)
  #addLinkForm {
    background-color: lighten(@grayLighter, 10%);
    padding-left: @global-padding;
    padding-right: @global-padding;

    input {
      border-radius: 0;
      box-shadow: none;
      margin-bottom: 0;
      max-width: 150px;
    }

    .btn-image {
      height: 36px;
      line-height: 28px;
    }

    &.in {
      border-bottom: 1px solid @border-color;
      padding-top: (@global-padding / 2);
      padding-bottom: (@global-padding / 2);
    }
  }

  // Add new group form
  #addNewGroup {
    background-color: lighten(@grayLighter, 5%);
    padding-left: @global-padding;
    padding-right: @global-padding;

    ul {
      list-style: none;

      li {
        display: inline-block;

        label {
          display: inline-block;
        }

        input {
          border-radius: 0;
          box-shadow: none;
          margin: 0;
        }

        .btn-group-addnew {
          background: @green;
          height: 36px;
          line-height: 26px;
          box-shadow: none;
        }

        .btn-cancel {
          background: @red;
          border-color: @red;
          box-shadow: none;
          height: 36px;
          line-height: 26px;
          box-shadow: none;
          border-radius: 2px;
          color: @white;
          text-shadow: none;
          float: none;
        }
      }
    }

    &.in {
      padding-top: @global-padding;
      padding-bottom: @global-padding;
      border-bottom: 1px solid @border-color;
    }
  }

  #editGroup {
    background-color: lighten(@grayLighter, 5%);
    padding-left: @global-padding;
    padding-right: @global-padding;
    margin-bottom: @global-margin;

    ul {
      list-style: none;

      li {
        display: inline-block;

        @media (max-width: 1280px) {
          margin-bottom: @global-margin;

          ul li {
            margin-bottom: 3px;
          }
        }

        label {
          display: inline-block;
        }

        input {
          border-radius: 0;
          box-shadow: none;
          margin: 0;
        }

        .btn-apply-gr,
        .btn-cancel-gr {
          background: @green;
          border-color: @green;
          border-radius: 2px;
          height: 36px;
          line-height: 26px;
          box-shadow: none;
        }

        .btn-cancel-gr {
          background: @white;
          border-color: @border-color;
          color: @gray;

          &:hover, &:focus, &:active {
            background: @grayLighter;
          }
        }
      }
    }

    ul.chzn-results {
      li {
        display: block;
      }
    }

    &.in {
      padding-top: @global-padding;
      padding-bottom: @global-padding;
      border: 1px solid @border-color;
    }
  }

  .group-body {
    overflow: auto;
    padding: @global-padding;
    height: calc(~"100% - 60px");

    ul {
      border: 0;
      display: block;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        display: block;

        .group-title {
          background-color: @grayLighter;
          border-radius: 2px;
          color: @gray;
          display: inline-block;
          height: 38px;
          margin-bottom: @global-margin / 2;
          padding: (@global-padding / 3) (@global-padding / 2);
          position: relative;
          overflow: hidden;
          .transition(padding-right 0.35s);

          .btn-edit-gr,
          .btn-remove-gr {
            background: @white;
            border-color: @border-color;
            box-shadow: none;
            border-radius: 2px;
            color: @gray;
            display: inline-block;
            height: 24px;
            line-height: 24px;
            padding: 0;
            position: absolute;
            top: 7px;
            right: 10px;
            opacity: 0;
            text-align: center;
            transition: all 0.35s;
            width: 24px;

            &:hover, &:focus, &:active {
              color: @linkColorHover;
            }
      
          }

          .btn-edit-gr {
            right: 40px;
          }

          span {
            color: @grayLight;
            float: right;
            font-size: 16px;
            line-height: 26px;

            .fa-angle-left {
              display: none;
            }
          }

          // Group title hover state
          &:hover {
            padding-right: 70px;

            .btn-edit-gr,
            .btn-remove-gr {
              opacity: 1;
            }

            span .fa-angle-right {
              display: none;
            }

            span .fa-angle-left {
              display: inline-block;
            }
          }
        }

        h4 {
          display: inline-block;
          margin: 5px 5px 5px 0;
        }

        h5 {
          display: inline-block;
        }

        // Button actions
        .btn-edit-link,
        .btn-delete-customlink {
          background-color: lighten(@grayLighter, 5%);
          border: 1px solid lighten(@grayLight, 25%);
          border-radius: 2px;
          color: @grayLight;
          display: block;
          float: right;
          height: 32px;
          line-height: 32px;
          margin: 10px 10px 0 0;
          text-align: center;
          width: 32px;

          &:hover, &:focus, &:active {
            background-color: @blue;
            border-color: darken(@blue, 5%);
            color: @white;
          }
        }

        .btn-delete-customlink {
          &:hover, &:focus, &:active {
            background-color: @red;
            border-color: darken(@red, 5%);
          }
        }
      }
    }

    .links {
      margin-left: @global-margin;
    }

    // Link item
    li.link-item {
      background-color: @white;
      display: block;
      border-radius: 2px;
      border: 1px solid @border-color;
      border-left-width: 3px;
      min-height: 38px;
      line-height: 38px;
      padding: 0 0 0 10px;
      margin-bottom: 10px;
      position: relative;
      .clearfix();

      .edit-link.in {
        background-color: #f6f6f6;
        border-top: 1px solid #eee;
        margin-left: -10px;
        padding-left: 20px;
        padding-top: 20px;
      }

      // Handle icon
      .handle {
        color: @grayLight;
        display: inline-block;
        margin-right: 5px;
        padding: 0 7px;
        text-align: center;
        vertical-align: top;

        i {
          display: inline-block;
          margin-right: 0;
          padding-top: 20px;
        }

        &:hover {
          cursor: move;
          color: @blue;
        }
      }

      // Link item hover state
      &:hover {
        border-left-color: @blue;
      }

      & > .collapse.in {
        overflow: visible;
        .clearfix();
      }

      // Quick link icon
      .ql-icon {
        color: @grayLight;
        display: inline-block;
        line-height: 1;
        margin-right: @global-margin / 3;
        margin-top: 17px;
        vertical-align: top;

        .fa {
          font-size: 18px;
        }

        img {
          max-height: 20px;
        }
      }

      // Quick link title
      .link-title {
        display: inline-block;
        padding-top: @global-padding / 2;
        padding-bottom: @global-padding / 2;
        line-height: 1;
        width: 50%;

        h5 {
          display: block;
          margin: 0;
        }

        span {
          display: none;
          color: @grayLight;
          font-size: 11px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 60%;

          @media (min-width: 1280px) {
            display: inline-block;
          }
        }
      }

      // Show on
      .ql-show-on {
        border-left: 1px solid @border-color;
        color: @grayLight;
        padding-left: @global-padding / 2;
        line-height: 1;
        position: absolute;
        top: 20px;
        right: 150px;

        strong {
          color: @gray;
          font-size: 12px;
          margin: 5px 0 0 2px;
        }
      }

      ul {
        display: block;
        margin-bottom: @global-margin;
        .clearfix();

        li {
          display: block;
          float: left;
          margin-right: 10px;

          input[type="text"] {
            max-width: 150px;
            box-shadow: none;
            border-radius: 0;
            margin-bottom: 0;
          }
        }
      }

      .link-media {
        overflow: hidden;
        margin-top: 23px;

        input {
          border-radius: 0;
          border-right: 0;
          box-shadow: none;
          float: left;
        }

        .btn {
          height: 36px;
          line-height: 28px;

          i {
            margin-right: 5px;
          }
        }
      }

      .btn-apply,
      .btn-cancel {
        background: @green;
        border-radius: 2px;
        box-shadow: none;
        border-color: @green;
        color: @white;
        height: 36px;
        line-height: 26px;
        text-shadow: none;
        margin-top: 23px;

        i {
          margin-right: 5px;
        }
      }

      .btn-cancel {
        background: @red;
        border-color: @red;
      }
    }

    .ui-placeholder {
      border: 2px dashed @border-color;
      padding: @global-padding / 2;
      padding-bottom: 0;
      min-height: 50px;
      margin-bottom: @global-margin;
    }

    ul.chzn-choices {
      border: 1px solid #aaa;
      margin-bottom: 0 !important;
      margin-right: @global-margin;

      li {
        padding-top: 4px;
        padding-bottom: 4px;

        &.search-choice {
          margin-top: 5px;
        }
      }
    }

    div.chzn-drop ul.chzn-results {
      margin-bottom: 0;

      li {
        display: block;
        float: none;
        padding: 5px 10px;
        margin-right: 0;
      }
    }
  }

  // Add custom link form
  .add-link-form {
    background-color: lighten(@grayLight, 5%);
    border-bottom: 1px solid @border-color;
    list-style: none;
    margin: 0;
    padding: 0;
    .clearfix();

    li {
      display: block;
      float: left;
      margin-right: 10px;

      label {
        font-weight: 600;
        font-size: 12px;
        color: @gray;
      }

      .link-media {
        overflow: hidden;
        margin-top: 23px;

        input {
          border-radius: 0;
          border-right: 0;
          box-shadow: none;
          float: left;
        }

        .btn {
          height: 36px;
          line-height: 28px;

          i {
            margin-right: 5px;
          }
        }
      }

      .btn-addlink,
      .btn-cancel {
        margin-top: 23px;
        height: 36px;
        line-height: 26px;
      }

      .btn-cancel {
        background: @red;
        border-color: @red;
        color: @white;
        text-shadow: none;
      }
    }
  }


  @media (max-width: @screen-md-max) {
    .group-header {
      h3 {
        font-size: 13px;
        border-bottom: 0;
      }
    }

    #group-dis .group-body {
      height: calc(~"100% - 110px"); 
    }

    #group-dis .group-header {
      padding-bottom: 60px;
      position: relative;

      .searchLink {
        position: absolute;
        left: @gridGutterWidth/2;
        right: @gridGutterWidth/2;
        bottom: @gridGutterWidth/2;
        margin-right: 0;

        #searchLink {
          width: calc(~"100% - 48px"); 
        }
      }
    }

    .group-body li.link-item .link-title {
      width: calc(~"100% - 110px"); 
      .text-overflow();
    }
  }
}


// Dashboard menus
#dashboard-menus {
  .group-header {
    // Add menu form
    #addMenuForm.in {
      background-color: @grayLighter;
      border: 1px solid @border-color;
      padding: @global-padding;
      position: relative;
      margin-top: @global-margin / 2;
      margin-bottom: @global-margin;
      overflow: visible;

      &:before, &:after {
        display: block;
        content: "";
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid @border-color;
        position: absolute;
        top: -7px;
        left: 20px;
      }

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        .clearfix();

        li {
          display: block;
          float: left;
          margin-right: @global-margin / 2;

          .link-media {
            margin-top: 23px;

            #image_url {
              margin-bottom: 0;
            }

            .btn {
              border-radius: 0;
              margin-top: 0;
              margin-left: -1px;
            }
          }

          .btn {
            border-radius: 2px;
            float: none;
            margin-top: 23px;
          }
        }
      }
    }
  }

  .group-body {
    // Menu group tab
    // --------------
    ul.menu-group {
      list-style: none;
      margin: @global-margin 0 0;
      padding: 0;

      li {
        &.group-quicklinks {
          margin-bottom: @global-margin / 2;
        }

        .group-title {
          border: 1px solid #ddd;
          border-left-width: 2px;
          border-radius: 2px;
          padding: (@global-padding / 2);

          &:hover {
            border-left-color: @blue;
          }

          &.active {
            border-left-color: @blue;
          }

          .handle {
            color: @grayLight;
            display: inline-block;
            padding: 0 7px;
            text-align: center;

            i {
              margin-right: 0;
            }

            &:hover {
              cursor: move;
              color: @blue;
            }
          }
        }

        // Link in group title
        .group-title > a {
          color: @gray;
          display: inline-block;
          font-weight: 600;
          font-size: 13px;
          min-width: 150px;

          &:hover, &:focus, &:active {
            color: @blue;
            text-decoration: none;
          }
        }

        // Show on
        .mn-show-on {
          display: inline-block;

          h6 {
            display: inline-block;
            margin: 0 @global-margin / 2 0 0;
            color: @grayLight;
          }
        }

        .group-title .mn-icon {
          display: inline-block;
          font-size: 16px;
        }

        .mn-group-edit,
        .mn-item-actions {
          float: right;
          position: relative;
          transition: none;

          .edit-mn-group.in,
          .mn-edit-item.in {
            overflow: visible;
            display: block;
            z-index: 100;

            &.under {
              top: 40px;
              bottom: auto;

              ul {
                &:before {
                  border-bottom: 7px solid #ddd;
                  border-top: 0;
                  top: -7px;
                  bottom: auto;
                }

                &:after {
                  border-bottom: 5px solid @white;
                  border-top: 0;
                  top: -5px;
                  bottom: auto;
                }                
              }
            }
          }

          .edit-mn-group,
          .mn-edit-item {
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
            height: auto !important;
            position: absolute;
            right: 35px;
            bottom: 40px;
            top: auto;
            left: auto;
            overflow: hidden;
            display: none;

            ul {
              border-color: #ddd;
              position: relative;
              min-width: 260px;

              &:before,
              &:after {
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                content: "";
                display: block;
                position: absolute;
                bottom: -7px;
              }

              &:before {
                border-top: 7px solid #ddd;
                right: 10px;
              }

              &:after {
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 5px solid @white;
                bottom: -5px;
                right: 12px;
              }
            }

            // Title, link, icon
            .edit-mn-title,
            .edit-mn-link,
            .edit-mn-icon {
              label {
                display: inline-block;
              }

              input {
                width: 173px;
              }
            }

            input {
              border-radius: 0;
              box-shadow: none;
            }

            .link-media {
              overflow: hidden;

              input {
                float: left;
              }

              #image_url {
                width: 166px;
              }

              a {
                background-color: @grayLighter;
                border-radius: 0;
                border-left: 0;
              }
            }

            .btn-cancel {
              float: none;

              &:hover, &:focus, &:active {
                line-height: 26px;
              }
            }
          }

          ul {
            background-color: @white;
            border: 1px solid @border-color;
            list-style: none;
            margin: 0;
            padding: @global-padding;
          }

          & > a,
          & > button {
            background-color: @grayLighter;
            border: 1px solid @border-color;
            border-radius: 2px;
            color: @gray;
            display: inline-block;
            float: left;
            margin: 0 0 0 5px;
            padding: 0;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;

            &:hover, &:focus, &:active {
              color: @blue;
            }
          }
        }

        // Sub navigation
        .links {
          list-style: none;
          margin: 0;
          padding: 0;

          &.in {
            margin-top: @global-margin;
            overflow: visible !important;
          }

          .ja-menu-item {
            background-color: @white;
            border-bottom: 1px solid #ddd;
            margin-bottom: @global-margin / 2;

            .mn-item-inner {
              border-left-width: 2px;
              border-radius: 2px;
              padding: (@global-padding / 2) @global-padding (@global-padding / 2) 12px;

              &:after {
                content: "";
                display: table;
                clear: both;
              }

              .handle {
                color: @grayLight;
                display: block;
                float: left;
                padding: 8px 7px 0;
                text-align: center;

                &:hover {
                  cursor: move;
                  color: @blue;
                }
              }
            }

            &.item-child {
              .mn-item-title {
                margin-left: @global-margin;
              }
            }

            .leaf {
              color: #999;
              display: inline-block;
              font-size: 14px;
              margin-left: @global-margin;
              padding-right: 5px;
            }

            .mn-item-title {
              display: inline-block;
              float: left;
              min-width: 250px;

              h4 {
                font-weight: normal;
                margin-top: 0;
                margin-bottom: 3px;
              }

              small {
                color: @grayLight;
                font-size: 12px;
              }

              .mn-icon {
                margin-right: 6px;
              }
            }

            .mn-show-on {
              display: block;
              position: absolute;
              left: 50%;
              padding: 0 10px;
            }

            &:last-child {
              border: 0;
            }
          }
        }
      }
    }
  }
}

.ui-sortable-placeholder {
  border: 2px dashed @grayLight !important;
  height: 36px;
  visibility: visible !important;
}


// User list table
// ----------------
#userList {
  .btn {
    background: @white;
    border-radius: 2px;
    box-shadow: none;
    border-color: lighten(@grayLight, 20%);
    display: inline-block;
    margin-top: 3px;

    &:hover {
      border-color: lighten(@grayLight, 10%);
    }
  }
}

.add-quicklink {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: @global-padding;
  margin-bottom: @global-margin;

  input[type="text"] {
    border-radius: 2px;
    margin-bottom: 0;
    box-shadow: none;
  }

  .btn {
    border-radius: 2px;
    height: 36px;
    line-height: 26px;
  }
}

// MODAL
// -------------
div.modal {
  width: auto;
  left: 2%;
  right: 2%;
  margin-left: 0;

  &.fade.in {
    top: 2%;
    bottom: 2%;
  }

  .modal-header {
    background-color: @grayLighter;
    border-radius: 3px 3px 0 0;
    padding-top: 15px;
    padding-bottom: 15px;

    .modal-title {
      font-size: 18px;
    }

    .close {
      background-color: @white;
      border: 1px solid #999;
      border-radius: 3px;
      display: inline-block;
      font-size: 23px;
      height: 28px;
      text-align: center;
      width: 28px;
      padding: 0;
      line-height: 26px;
    }
  }

  .modal-body {
    max-height: none;
    height: calc(~"100% - 120px");
    padding: 20px 30px;

    .manager-dashboard-desc {
      margin-bottom: 30px;
    }

    .nav-tabs {
      margin-top: 20px;
    }
  }

  // Fix for default joomla
  &.jviewport-width80 {
    margin-left: 0;
    width: auto;
  }
}

// Edit Module Modal
#jabktmp-module {
  .modal-dialog,
  .modal-content {
    height: 100%;
  }

  .modal-body {
    width: 100%;
  }
}

#ja-md-edit html {
  overflow: auto;
}


// Alert message
// -------------
.navbar-vertical #system-message-container {
  border-radius: 3px;
  float: none;
  padding: 0;
  margin: 0 @global-margin;

  .alert-success {
    border-radius: 3px;
  }

  button.close {
    margin: 5px 5px 0 0;
  }
}

// Debug
.navbar-vertical #system-debug {
  margin-left: 240px;
  margin-bottom: 50px;
}

// MISC
// -----------------
iframe[name*="oauth2relay"] {
  display: none;
}

// Sidebar Menu
.navbar-horizontal .sidebar {
	#menu > li > a + .dropdown-menu {
		@media (max-width: @screen-md-max) {
      		position: static;
      		top: 0;
    	}
	}
	&.sidebar-close {
		@media (max-width: @screen-md-max) {
      		.menu-title {
      			display: none;
      		}
      		#menu > li > a {
      			text-indent: 0;
      		}
    	}
	}
} 