// Body 
// ----------
*::before, *::after {
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%; 
  overflow: auto;
}

body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 50px;
  font-size: 14px;

  &.contentpane {
    height: auto;
    padding-top: 0;
  }
}

// Container
// ------------
.admin-container-fluid {
  > .sidebar {
    float: left;
    min-height: calc(~"100% - 81px");
    left: 0;
    position: fixed;
    top: 50px;
    width: 220px;
    z-index: 1000;
    .transition(width 350ms);

    &.sidebar-close {
      width: @gridGutterWidth*2 + @fontSizeLarge;
    }

    @media (max-width: @screen-sm-max) {
      .transition(none);
    }

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

  > .main-content {
    float: left;
    padding-left: 220px;
    width: 100%;
    .transition(padding-left 350ms);
  }

  // Full width layout
  > .layout-full {
    padding-left: 0;
  }

  > .sidebar-close + .main-content {
    padding-left: @gridGutterWidth*2 + @fontSizeLarge;
  }

  > .sidebar-close + .main-content #sidebar .sidebar-nav {
    left: @gridGutterWidth*3 + @fontSizeLarge;
  }

  @media (max-width: @screen-sm-max) {
    > .sidebar-close + .main-content #sidebar .sidebar-nav {
      left: @gridGutterWidth*2.5 + @fontSizeLarge;
    }
  }

  @media (max-width: @screen-xs-max) {
    > .main-content {
      padding-left: 210px;
    }

    > .sidebar-close + .main-content {
      padding-left: @gridGutterWidth*1.5 + @fontSizeLarge;
    }
  }
}

.sidebar {
  background-color: @grayDarker;
}

.j-toggle-button-wrapper {
  display: none !important;
}

// Header
// ------------
.header {
  background-color: @headerBackground;
  border-top: 0;
  height: 50px;
  display: block !important;
  padding: (@global-padding / 2) @gridGutterWidth !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: @zindexFixedNavbar;

  &.affix {
    width: 100%;
    top: 0;
    left: 0;
  }

  .container-logo {
    background-color: rgba(0,0,0,0.1);
    box-sizing: border-box;
    float: left;
    margin: -(@global-padding / 2) @gridGutterWidth -(@global-padding / 2) -@gridGutterWidth;
    padding: (@global-padding / 2) @gridGutterWidth;
    width: 221px;

    img {
      max-height: 100%;
    }

    .admin-logo {
      background-size: auto 100%;    
      display: block;
      height: 32px;
      width: 100%;
    }

    @media (max-width: @screen-sm-max) {
      width: 56.25px;
      padding-right: (@global-padding / 2);
      padding-left: (@global-padding / 2); 
      
      .admin-logo {
        background-position: center center;
        background-size: 100% auto;
      }

      .admin-logo-sm {
        background-size: auto;
      }
    }
  }

  .container-title {
    float: left;

    [class^="icon-"], [class*=" icon-"] {
      height: 22px;
      line-height: 22px;
      margin-right: 5px;
      width: 22px;

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

    h1 {
      color: @grayLight;
      font-size: 22px;
      font-weight: normal;
      margin: 0;

      @media (max-width: @screen-md-max) {
        font-size: @baseFontSize;
      }
    }
  }

  // Site preview
  .site-preview {
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(255,255,255,0.1);
    color: @white;
    line-height: 50px;
    margin-top: -9px;
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    opacity: 0.5;

    &:hover, &:focus, &:active {
      opacity: 1;
    }
  }


  .pm-message {
    border-right: 1px solid rgba(255,255,255,0.1);
    color: @white;
    line-height: 50px;
    margin-top: -9px;
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-align: center;

    i {
      opacity: 0.5;
      font-size: 16px;
    } 

    span {
      background-color: @red;
      border-radius: 3px;
      color: @white;
      position: absolute;
      font-size: 10px;
      font-weight: 600;
      height: 14px;
      text-align: center;
      line-height: 14px;
      padding-left: 4px;
      padding-right: 4px;
      right: 5px;
      top: 8px;
      opacity: 1;
    }

    span.all-readed {
      background-color: @green;
    }

    &:hover, &:focus, &:active {
      i {
        opacity: 1;
      }
    }
  }

  .notifications {
    color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    font-size: @fontSizeLarge;
    padding-right: @gridGutterWidth/2;
    padding-left: @gridGutterWidth/2;

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

  .comments {
    color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    height: 32px;
    font-size: @fontSizeLarge;
    line-height: 32px;
    padding-right: @gridGutterWidth/2;
    padding-left: @gridGutterWidth/2;

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

  .search {
    margin-top: 3px;
    float: right;

    input {
      background-color: @grayDark;
      border-color: @grayDark;
      border-radius: 3px 0 0 3px;
      box-shadow: none;
      color: @grayLight;
      height: 18px;
      overflow: hidden;
      width: 150px;
      -webkit-border-radius: @borderRadiusSmall 0 0 @borderRadiusSmall;
      .transition(width 350ms);

      &:focus {
        box-shadow: none;
        color: @white;
      }
    }

    .btn {
      background: @grayDark;
      border-color: @grayDark;
      border-radius: 0 3px 3px 0;
      color: @white;
      height: 28px;
      min-height: 28px;
      line-height: 18px;
      float: right;
      text-shadow: none;
    }
  }
}


// Sub head
.subhead div:empty {
  display: none !important;
}

// Cpanel
// -----------
// Cpanel Manager
.dashboard-home {
  .dashboard-links {
    margin-bottom: @global-margin;
  }
}

#dashboard-manage {
  #modules {
    > .row-fluid {
      margin-bottom: 2.127659574%;
    }

    .module {
      background-color: @wellBackground;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: @gridGutterWidth;
      position: relative;
    }

    .module-title {
      margin-top: 0;
      font-size: @fontSizeLarge;
      text-transform: capitalize;
    }
  }

  .tab-content {
    height: calc(~"100% - 150px");
  }

  #quicklinks {
    height: 100%;
  }
}

// Cpanel Toolbar
.dashboard-toolbox {
  margin-bottom: @global-margin;

  select {
    margin-bottom: 0;
  }
}

// Cpanel Modules 
.sortable-wrap {
  .clearfix();

  .sortable-list {
    cursor: pointer;
    position: relative;

    &.list-top {
      margin-bottom: @gridGutterWidth;

      .sortable-item:last-child {
        margin-bottom: 0;
      }
    }

    &.item-list {
      overflow: auto;
      height: 200px;
    }

    &.list-left {
      margin-left: 0;
    }

    .sortable-item {
      margin-bottom: 2.127659574%;

      &.ui-sortable-placeholder {
        border: 2px dashed rgba(0, 0, 0, 0.5);
        visibility: visible !important;
      }
    }

    &.ex-over {
      &::before {
        border: 2px dashed rgba(0, 0, 0, 0.5);
        content: "";
        top: 0;
        bottom: 0;
        left: @gridGutterWidth/2;
        position: absolute;
        right: @gridGutterWidth/2;
      }
    }

    @media (max-width: @screen-sm-max) {
      width: 100%;
      &.list-right {
        margin-left: 0;
      }
    }
  }
}

.dragdrop-inner {
  background-color: @white;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom-width: 2px;
  padding: @gridGutterWidth;
  position: relative;

  > .module-title,
  .feed > h2 {
    background-color: @grayLighter;
    border-bottom: 2px solid lighten(@grayLight, 25%);
    font-size: @fontSizeLarge;
    margin: -20px -20px 20px;
    padding: 0 20px 0 0;
    text-transform: uppercase;

    span, a {
      background-color: @blue;
      border-bottom: 2px solid darken(@blue,10%);
      color: @white;
      display: inline-block;
      font-size: 14px;
      height: 42px;
      line-height: 42px;
      padding-left: @global-padding;
      padding-right: @global-padding;
      margin-bottom: -2px;
      margin-top: -1px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 0 darken(@blue, 5%);
    }
  }

  .row-striped .row-fluid {
    width: 100%;
  }

  > .actions {
    height: 41px;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;

    a, span {
      border-left: 1px solid #ddd;
      color: @grayLight;
      display: block;
      float: left;
      height: 41px;
      line-height: 41px;
      text-align: center;
      width: 41px;

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

    .fa {
      display: inline-block;
      margin-left: 5px;

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

  & + .dragdrop-inner {
    margin-top: @gridGutterWidth;
  }
}

.gu-unselectable .dragdrop-wrap {
  .dragdrop {
    &::before {
      border: 2px dashed rgba(0, 0, 0, 0.5);
      bottom: 0;
      content: "";
      position: absolute;
      top: 0;
      left: @gridGutterWidth / 2;
      right: @gridGutterWidth / 2;
    }
  }
}

.cpanel-top {
  .cpanel-top-module {
  }
}


// Modules Grid
// -------------
.modules-grid {
  margin-top: @global-margin;
  margin-left: -@gridGutterWidth/2;
  margin-right: -@gridGutterWidth/2;
  .clearfix();

  .position-warpper {
    margin-bottom: @gridGutterWidth;
    float: left;
    width: 25%;
    padding-left: @gridGutterWidth/2;
    padding-right: @gridGutterWidth/2;

    .position-inner {
      background: @white;
      border: 1px solid lighten(@grayLight, 20%);
      border-radius: 3px;
      cursor: pointer;
      padding: @global-padding;
      position: relative;
      .clearfix();
    }

    @media (max-width: @screen-md-max) {
      width: 33.333%;
    }

    @media (max-width: @screen-sm-max) {
      width: 50%;
    }

    @media (max-width: @screen-xs-max) {
      width: 100%;
    }

    // Position name
    .position-name {
      margin-bottom: @global-margin * 1.5;

      h3 {
        margin: 0;
      }

      span {
        font-size: @fontSizeSmall;
        margin-left: 5px;
      }
    }

    .global-actions {
      border-top: 1px solid @border-color;
      color: @grayLight;
      padding: 10px 0 10px 12px;

      input {
        margin: 0 8px 1px 0;
        vertical-align: middle;
      }
    }

    &:hover {
      .position-inner {
        border: 1px solid #b9b9b9;
        box-shadow: 0 0 2px 1px #ccc;
      }
    }
  }

  .sortable-list {
    position: unset;
    
    .sortable-item {
      background: lighten(@grayLighter, 2%);
      border: 1px solid #ccc;
      padding: 0;
      overflow: hidden;

      span {
        display: block;
        float: left;
        height: 36px;
        line-height: 36px;
        text-align: center;
      }

      .item-select,
      .item-status,
      .sortable-handler {
        border-right: 1px solid #ddd;
        margin: 0;
        width: 36px;
        opacity: 1;

        a.btn {
          box-shadow: none;
        }

        span {
          font-size: 14px;
        }

        &:hover {
          background-color: @white;
        }
      }

      .item-status {
        a {
          color: @red;

          &.active {
            color: @green;
          }
        }

        span {
          line-height: 1;
        }
      }

      .sortable-handler {
        color: @grayLight;

        &:hover {
          color: @gray;
        }
      }

      .item-name { 
        display: block;
        font-weight: 600;
        margin: 0;
        padding-left: 10px;
        vertical-align: middle;
        width: calc(~"100% - 150px");   
        .text-overflow();
      }

      span.item-edit {
        border-left: 1px solid #ddd;
        float: right;
        padding-right: 10px;
        padding-left: 10px;

        a {
          .icon-edit {
            color: @grayLight;
            margin-right: 0;            
          }

          &:hover .icon-edit {
            color: @blue;
          }
        }

        &:hover {
          background-color: @white;
        }
      }

      // Item hover
      &:hover, &:focus, &:active {
        border-color: @blue;
        cursor: default;

        .sortable-handler.inactive {
          opacity: 1;

          .icon-menu {
            color: @blue;
          }
        }
      }
    }
  }

  .btn-block {
    text-align: left;
    padding-left: 0;
    padding-right: @global-padding;

    & + .btn-block {
      margin-top: 10px;
    }
  }

  .btn-success {
    background: #ddd;
    border-color: #ccc;
    box-shadow: none;
    color: @grayDark;
    float: right;
    height: 32px;
    line-height: 25px;
    position: absolute;
    top: 15px;
    right: @global-margin;
    text-shadow: none;

    &:hover, &:focus, &:active {
      background-color: #3d8f3d;
      border-color: #3d8f3d;
      color: @white;

      span {
        color: @white;
      }
    }

    span {
      color: @grayLight;
      margin-right: 6px;
    }
  }

  .module-name {
    input[type="checkbox"] {
      margin-top: 0;
    }

    .btn-micro {
      padding-top: 0;
      padding-bottom: 0;
      background: none;
      border: 0;
    }

    .sortable-handler {
      margin-top: 2px;
      display: inline-block;
      cursor: move;
      width: @global-padding;
      text-align: center;

      .icon-menu {
        margin-right: 0;
      }
    }
  }
}


// Footer
// -----------
#status {
  background: #ebebeb;
  border-top: 1px solid #d4d4d4;
  color: #626262;
  padding: 2px 10px 4px 10px;

  .btn-toolbar {
    padding: 0;
    margin: 0;
  }

  .btn-toolbar, p {
    margin: 0px;
  }

  .btn-toolbar, .btn-group {
    font-size: 12px;
  }

  a {
    color: #626262;
  }
}


.navbar-horizontal {

  .admin-container-fluid > .main-content.layout-full {
    padding-left: 0 !important;
  }
  
  // Subhead
  .subhead #toolbar,
  .has-j-sidebar.navbar-horizontal {
    background-color: @grayLighter;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid darken(@grayLighter, 5%);
    margin: 0 -@gridGutterWidth @global-margin * 2;

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

  .main-content {
    padding-top: 0 !important;
  }

}

// Has left sidebar
.has-j-sidebar.navbar-horizontal {

  // Container
  .container-main {
    padding-left: 270px;
    position: relative;
  }

  // JSidebar
  #j-sidebar-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;

    .sidebar-nav {
      top: 0;
    }

    .sidebar-nav #submenu.nav {
      border: 0;

      & > li {
        display: block;
        float: none;

        & > a {
          background-color: @grayLighter;
          border-bottom: 1px solid darken(@grayLighter, 5%);
          color: @gray;
          display: block;
          position: relative;
          transition: all 0.35s;

          &:before {
            background-color: lighten(@grayLight, 25%);
            content: "";
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            width: 3px;
          }

          &:hover, &:focus, &:active {
            background-color: darken(@grayLighter, 5%);
            color: @grayDark;

            &:before {
              background-color: darken(@grayLight, 3%);
            }
          }
        }

        &.active > a {
          color: @blue;

          &:before {
            background-color: @blue;
          }
        }

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

  @media (max-width: @screen-sm-max) {
    .admin-container-fluid > .sidebar + .main-content #sidebar .sidebar-nav {
      left: 0;
    }

    .subhead #toolbar {
      margin-right: 0;
      margin-left: 0;
    }

    #j-sidebar-container {
      width: 100%;
      position: relative;

      #sidebar {
        background-color: transparent;

        .sidebar-nav {
          position: relative;
          padding-right: 0;
          padding-left: 0;

          #submenu.nav {
            .clearfix()
          }

          #submenu.nav > li {
            float: left;
          }

          #submenu.nav > li a {
            border-bottom: 0;
          }
        }
      }
    }

    .container-main {
      padding-left: @gridGutterWidth;
    }

    .hidden-phone,
    .hidden-tablet {
      display: none;
    }
  }

  @media (max-width: @screen-xs-max) {
    .container-main {
      padding-left: 0;
    }
  }
}

.navbar-vertical.has-j-sidebar {
  .j-sidebar-containe {
    #submenu {
      li {
        margin: 5px;
      }
    }
  }
}

// Comconfigure
.com_config.navbar-horizontal,
.com_config.navbar-vertical {

  // Container
  .container-main {
    padding-left: 270px;
    position: relative;
  }

  #component-form #sidebar,
  #application-form #sidebar {
    background-color: @grayLighter;
    border: 1px solid darken(@grayLighter, 5%);
    position: absolute;
    top: 0;
    left: @global-padding;
    width: 230px;
    padding-bottom: @gridGutterWidth;

    .sidebar-nav {
      position: relative;
      top: 0;
      left: 0;

      .nav-list > li {
        display: block;
        float: none;

        a {
          padding-top: @global-padding / 3;
          padding-bottom: @global-padding / 3;

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

        &.active a {
          color: @linkColorHover;
        }
      }
    }
  }
}

.com_config .admin-container-fluid > .main-content {
  padding-top: 0 !important;
} 

// Media 
.modal-body iframe[name="field-media-modal"] {
  min-height: 100%;
}

.field-media-wrapper .modal .modal-body {
  width: 100%;
}

.com_media.navbar-horizontal,
.com_media.navbar-vertical {

  // Container
  .container-main {
    padding-left: 270px;
    position: relative;
  }

  .j-toggle-sidebar-header > h3 {
    padding-left: 15px !important;
  }

  #treeview {
    background-color: @grayLighter;
    border: 1px solid darken(@grayLighter, 5%);
    position: absolute;
    top: 46px;
    left: @global-padding;
    width: 230px;
    padding-bottom: @gridGutterWidth;
    padding-top: @gridGutterWidth;

    .sidebar-nav {
      position: relative;
      top: 0;
      left: 0;

      .nav-list > li {
        display: block;
        float: none;

        a {
          padding-top: @global-padding / 3;
          padding-bottom: @global-padding / 3;
          padding-right: 0;

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

        &.active a {
          color: @linkColorHover;
        }
      }

      .nav-list {
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;

        [class^="icon-"], 
        [class*=" icon-"] {
          padding-right: 5px;
        }
      }
    }
  }
}

// Thumbnails
#mediamanager-form .manager.thumbnails {
  .imgOutline {
    .small {
      margin-top: -11px;
    }
  }
}

// MISC
// --------
.com_installer {
  #system-message-container.j-toggle-main {
    width: 100%;
    margin-left: 0;
  }
}