//---------------------------------------------------------
// DASHBOARD
//---------------------------------------------------------

.dashboard-view                       { @include position(0, 71px, 0, 0);
                                        overflow: auto;
                                        background-color: #fafbfc;
}

.dashboard-chart-select               { position: absolute;
                                        margin-left: 30px;
                                        margin-top: 28px;
                                        z-index: 1;
}

.dashboard-chart-options              { position: absolute;
                                        top: 23px;
                                        right: 30px;
                                        color: #a1a7b2;
                                        z-index: 1;
  select                              { margin-right: 10px;
  }
  input                               { @include input;
                                        width: 130px;
                                        font-size: 12px;
  }
}

.dashboard-chart-wrapper              { padding: 56px 20px 20px;
                                        background-color: #fff;
                                        border-bottom: 1px solid #d1d6e0;
                                        min-height: 394px;
                                        z-index: 0;
  &:before                            { content: attr(data-title);
                                        display: block;
                                        position: relative;
                                        margin: -28px 0 10px;
                                        @include font;
                                        font-weight: $font_bold;
                                        font-size: 14px;
                                        text-align: center;
                                        text-transform: uppercase;
  }
}

.dashboard-info                       { display: inline-block;
                                        width: 100%;
                                        margin-bottom: 60px;
                                        border-bottom: 1px solid #d1d6e0;
  .left                               { float: left;
                                        width: 50%;
                                        border-right: 1px solid #d1d6e0;
                                        min-height: 400px;
  }
  .right                              { float: right;
                                        width: 50%;
  }
  header                              { border-bottom: 1px solid #d1d6e0;
                                        padding: 20px;
                                        text-transform: uppercase;
                                        @include font;
                                        font-weight: $font_bold;
                                        font-size: 14px;
                                        color: #414d64;
    select                            { float: right;
    }
  }
  aside                               { float: right;
                                        color: #14181a;
  }
  .row                                { padding: 12px 30px 12px 20px;
                                        color: #909699;
                                        font-size: 12px;
                                        font-weight: $font_bold;
    &:nth-child(even)                 { background: #f5f7fa;
    }
  }
  .title                              { color: #414d64;
  }
  .outline                            { margin-top: 10px;
                                        margin-left: 10px;
  }
}

// MORIS CHARTS
// http://morrisjs.github.io/morris.js/

.morris-hover                         { position: absolute;
                                        z-index: 1000;
  &.morris-default-style              { @include font();
                                        border-radius: 4px;
                                        padding: 6px 12px;
                                        color: #666;
                                        background: rgba(255, 255, 255, 0.95);
                                        border: solid 1px rgba(230, 230, 230, 0.8);
                                        font-size: 12px;
                                        text-align: center;
    .morris-hover-row-label           { margin: 0.25em 0;
                                        font-weight: bold;
    }
    .morris-hover-point               { white-space: nowrap;
                                        margin: 0.1em 0;
                                        font-weight: bold;
    }
  }
}









// .dashboard-highlights                 { @include reset-list;
//                                         //border-top: 1px solid #d1d6e0;
//                                         border-bottom: 1px solid #d1d6e0;
//                                         display: inline-block;
//                                         width: 100%;
//                                         background-color: #fff;
//   li                                  { float: left;
//                                         display: block;
//                                         width: 33.3333%;
//                                         height: 128px;
//                                         border-right: 1px solid #d1d6e0;
//                                         padding: 20px;
//                                         text-align: center;
//     &:last-child                      { border-right: 0;
//     }
//     .value                            { color: #414d64;
//                                         font-size: 42px;
//                                         @include font;
//                                         font-weight: $font_bold;
//     }
//     small                             { color: #a8aebb;
//                                         font-size: 16px;
//                                         @include font;
//                                         font-weight: $font_bold;
//                                         display: block;
//     }
//   }
// }