/*-----------------------------------------------------------------------*/
/*                       Dashboard Section Title                         */
/*-----------------------------------------------------------------------*/
.myspace .section-title {
  color: @dashboard-section-title-color;
  text-align: @dashboard-section-title-alignment;
}
.myspace .section-title:after when (@dashboard-section-title-alignment = center) and (@dashboard-section-title-display-subline = true){
  .fa;
  display: block;
  content: @fa-var-caret-up;
  margin-top: 10px;
  font-size: 24px;
  border-bottom: solid 1px @dashboard-section-title-color;
  line-height: 8px;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}


/*-----------------------------------------------------------------------*/
/*                     Dashboard specific form style                     */
/*-----------------------------------------------------------------------*/
.myspace form {
  label {
    font-size: 13px;
    font-weight: 600;
    margin: 10px 0px;
  }

  input {
    border:0px;
    box-shadow:none;
    height:45px;
  }

  .input-group-addon {
    border:0px;
  }
}


/*-----------------------------------------------------------------------*/
/*                  Dashboard Company Select Box (top right)             */
/*-----------------------------------------------------------------------*/
.myspace .company-select-box {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: @dashboard-cpy-select-bg-color;
  color: @dashboard-cpy-select-header-text-color;
  font-size: @dashboard-cpy-select-header-text-size;
  padding: @dashboard-cpy-select-padding;
  .border-bottom-radius(@dashboard-cpy-select-border-radius);
  z-index: 10;
  
  // Change company button
  .btn.switch-company {
    color: @dashboard-cpy-select-header-text-color;
    background-color: @dashboard-cpy-select-switch-btn-bg-color;
    margin-left: 15px;
  }
  .btn.switch-company i {
    @dashboard-cpy-select-switch-btn-icon();
  }
  .btn.switch-company i.active {
    @dashboard-cpy-select-switch-btn-icon-active();
  }
  
  // Section always visible
  .box-header {
    text-align: right;
  }
  
  // Section visible when change company is clicked
  .box-content {
    margin-top: 10px;
    border-top: solid 1px @dashboard-cpy-select-link-color;
    .border-bottom-radius(5px);
  }
  .box-content ul {
    list-style: none;
    padding-top: 15px;
    max-height: 400px;
    min-width: 250px;
    overflow-y: auto;
  }
  .box-content ul li a {
    color: @dashboard-cpy-select-link-color;
    line-height: 25px;
    display: block;
    padding-left: 5px;

    &:hover {
      text-decoration: none;
      color: @dashboard-cpy-select-link-hover-color;
      background-color: @dashboard-cpy-select-link-hover-bg-color;
    }
  }
  
  // Circle next to company name
  // Indicate which company is currently viewed on dashboard
  .box-content ul li a i.fa {
    width: 13px;
    margin-right: 6px;
    text-align: center;
    color: @dashboard-cpy-select-link-color;
  }

  // Create new company
  .box-content .create-new, .box-content .admin-link {
    text-align: center;
  }
  .box-content .create-new a {
    color: @dashboard-cpy-select-link-create-color;
  }

  // Admin platform link
  .box-content .admin-link {
    margin-top: 3px;

    a {
      color: @dashboard-cpy-select-link-admin-color;
    }
  }

  // Play well with menu at the top in responsive mode
  @media (max-width: @screen-sm-min) { top: 46px; }
}

/*-----------------------------------------------------------------------*/
/*                         Impersonate top bar                           */
/*-----------------------------------------------------------------------*/
#impersonate-bar {
  border-bottom: 2px solid #A0A0A0;
  padding: 5px 0 5px 95px;

  @media (max-width: @screen-xs-max) {
    padding: 46px 0 5px 0;
  }

  button {
    margin-top: 3px;
  }
}

/*-----------------------------------------------------------------------*/
/*                         Dashboard Left Navbar                         */
/*-----------------------------------------------------------------------*/
.myspace .menu {

  a:hover { text-decoration: none; }

  // Dashboard Button > Active State
  .dashboard-button.active, .dashboard-button.active:hover {
    color: @dashboard-side-menu-link-active-color;
    background-color: @dashboard-side-menu-link-active-bg-color;
  }

  // Dashboard Button Content > Active State
  .dashboard-button.active .content, .dashboard-button.active:hover .content {
    color: @dashboard-side-menu-link-active-color;
    background-color: @dashboard-side-menu-link-active-bg-color;
  }

  // Dashboard Button Content > Normal State
  .dashboard-button, 
  .dashboard-button .content {
    color: @dashboard-side-menu-link-color;
    background-color: @dashboard-side-menu-link-bg-color;
  }

  // Dashboard Button Content > Normal State Hover
  .dashboard-button:hover, .dashboard-button:hover .content {
    color: @dashboard-side-menu-link-hover-color;
    background-color: @dashboard-side-menu-link-hover-bg-color;
  }
  
  // Vertical menu
  &.vertical {
    z-index:100;
    position:fixed;
    left:0px;
    top:0px;
    padding: @dashboard-side-menu-padding;
    width:80px;
    min-height:100%;
    height:99%;

    // Dashboard Button > Normal State
    .dashboard-button {
      .border-radius(5px);
      width: 51px;
      height: 51px;
      padding-top: 7px;
      padding-left: 9px;
    }
    
    &:hover .dashboard-button {
      width: 250px;
    }
    
    // Dashboard Button Content > Normal State
    .dashboard-button .content {
      display: none;
    }
    &:hover .dashboard-button .content {
      display: block;
      white-space: nowrap;
      position: absolute;
      margin: 8px 0px 0px 55px;
      font-size: 15px;
    }

    // Side menu brand logo
    .brand-logo {
      height: 90px;
      background-repeat: no-repeat;
      background-image: asset-url(@dashboard-side-menu-brand-logo-img);
      background-size: 100%;
      @dashboard-side-menu-brand-logo();
    }
    .brand-logo.expanded {
      @dashboard-side-menu-brand-logo-expanded();
    }
  }

  // Horizontal menu
  &.horizontal {
    @dashboard-side-menu-horizontal();
    z-index:100;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    // Side menu brand logo
    .brand-logo {
      height: 70px;
      background-repeat: no-repeat;
      background-image: asset-url(@dashboard-side-menu-brand-logo-img);
      background-size: 100%;
      @dashboard-side-menu-brand-logo();
    }
    .brand-logo.expanded {
      @dashboard-side-menu-brand-logo-expanded();
    }

    // Dashboard Button
    .dashboard-button {
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      font-weight: bold;
    }

    // Dashboard Buttons > Links
    .dashboard-button a {
      padding: 10px;
      display: block;
      text-decoration: none;
      min-width: 100px;
    }
  }
  
  overflow-x:hidden;
  overflow-y:auto;

  background-color: @dashboard-side-menu-bg-color;
  
  hr {
    border-top:2px dashed darken(@dashboard-side-menu-bg-color,5%);
    margin-right:11px;
  }
  
  // Dashboard Button Icon > Normal State
  // .dashboard-button .fa {
  //   font-size: 31px;
  //   margin-top: 4px;
  //   color: @dashboard-side-menu-link-color;
  // }
  
  // Dashboard Button Icon > Active State
  // .dashboard-button.active .fa,
  // &:hover .dashboard-button.active .fa {
  //   color: @dashboard-side-menu-link-active-color;
  // }
  
  
  // Icon configuration for each dashboard button
  .dashboard-button i.dhb-icon-dashboard { 
    @dashboard-side-menu-btn-dashboard(); 
  };
  .dashboard-button:hover i.dhb-icon-dashboard,
  .dashboard-button.active i.dhb-icon-dashboard { 
    @dashboard-side-menu-btn-dashboard-active(); 
  };
  
  .dashboard-button i.dhb-icon-impac { 
    @dashboard-side-menu-btn-impac(); 
  };
  .dashboard-button.active i.dhb-icon-impac,
  .dashboard-button:hover i.dhb-icon-impac { 
    @dashboard-side-menu-btn-impac-active(); 
  };
  
  .dashboard-button i.dhb-icon-account { 
    @dashboard-side-menu-btn-account(); 
  };
  .dashboard-button:hover i.dhb-icon-account,
  .dashboard-button.active i.dhb-icon-account { 
    @dashboard-side-menu-btn-account-active(); 
  };
  
  .dashboard-button i.dhb-icon-company { 
    @dashboard-side-menu-btn-company(); 
  };
  .dashboard-button:hover i.dhb-icon-company,
  .dashboard-button.active i.dhb-icon-company { 
    @dashboard-side-menu-btn-company-active(); 
  };
  
  .dashboard-button i.dhb-icon-marketplace { 
    @dashboard-side-menu-btn-marketplace(); 
  };
  .dashboard-button:hover i.dhb-icon-marketplace,
  .dashboard-button.active i.dhb-icon-marketplace { 
    @dashboard-side-menu-btn-marketplace-active(); 
  };
  
  .dashboard-button i.dhb-icon-logout { 
    @dashboard-side-menu-btn-logout(); 
  };
  .dashboard-button:hover i.dhb-icon-logout,
  .dashboard-button.active i.dhb-icon-logout { 
    @dashboard-side-menu-btn-logout-active(); 
  };
}

.myspace .app-dashboard {
  min-height: 280px;
  max-width: 225px;
  margin-left: auto;
  margin-right: auto;
  .border-radius(5px);
  background-color: @dashboard-apps-tile-bg-color;
  text-align: center;
  padding: 30px 0px;
  padding-bottom: 0px;
  margin-top: 15px;

  .btn-change-plan {
    margin-top:50px;
  }

  .title {
    .font(14px,normal,@dashboard-apps-tile-text-color);
    margin-top:10px;
    margin-bottom:10px;
  }

  .app-line {
    .font(12px,normal,@text-inverse-color);
  }

  img.app-logo {
    .border-radius(5px);
    .square(85px);
    border: solid @dashboard-apps-tile-logo-border-size @dashboard-apps-tile-logo-border-color;
  }

  .connector-logo {
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
  }

  .office365-connector-logo {
    height: 32px;
    padding: 2px;
  }

  .tutorial {
    display:block;
    margin-top: 7px;
  }

  // App Tile Settings (top right)
  a.options {
    line-height: 19px;
    .square(20px);
    .border-radius(20px);
    color: @dashboard-apps-tile-settings-color;
    background-color: @dashboard-apps-tile-settings-bg-color;
    float:right;
    margin: -25px 5px 0px 0px;
  }
  
  a.options:hover {
    color: @dashboard-apps-tile-settings-hover-color;
    background-color: @dashboard-apps-tile-settings-hover-bg-color;
  }
  a.options i {
    margin-top: 3px;
  }

  .app-custom-info {
    position: relative;
    top: -10px;
    z-index: 999;
  }
}

// Add application tile (tile with + button)
.myspace .app-dashboard.add-app {
  padding:15px 0px;
  font-size:140px;
  color: @dashboard-apps-tile-add-color;
  background-color: @dashboard-apps-tile-add-bg-color;
}
.myspace .app-dashboard.add-app a {
  color: @dashboard-bg-color;
  
  &:hover {
    color: @brand-warning;
  }
}

/*-----------------------------------------------------------------------*/
/*                   Dashboard Elements (remaining)                      */
/*-----------------------------------------------------------------------*/
.myspace {
  background-color: @dashboard-bg-color;
  min-height:100%;
  padding-top:30px;

  .accordion .panel-group .panel .panel-body p {
    font-weight:normal;
  }

  p {
    font-weight:normal;
  }

  .star-wizard-button-wrapper {
    float:right;
    .star-button {
      float:right;
      margin:4px 198px 0px 0px;
    }
  }

  .panel-group {
    .panel {
      border:0px;
      box-shadow:none;
      margin:25px 0px;
      
      .panel-heading {
        background-color: white;
      }
    }
  }
  .editable-wrap {
    white-space:normal;
    margin:10px 0px;
    button {
      margin-top:7px;
    }
  }

  @media(max-width: 844px) {
    padding-top:40px;
  }
}