Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="navbar navbar-default wds-navbar-1">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-custom-collapse">
      <i class="fa fa-user fa-fw"></i>
      <span class="badge">4</span>
    </button>
    <a class="navbar-brand" href="#">
      <span><strong>Insight</strong>Dashboard</span>
    </a>
    <div class="visible-xs" id="stupid-hack">
      <a href="#" data-toggle="collapse" data-target="#mainNav">Agent IQ <span class="caret"></span></a>
    </div>
  </div>
  
  <div class="navbar-collapse collapse pull-right navbar-custom-collapse">
    <div class="nav navbar-nav navbar-right">
      <div class="navbar-right--wrapper clearfix">
        <span class="user">Lindsay</span>
        <span class="settings">
          <a href="#" class="btn btn-primary"><i class="fa fa-gear"></i> Settings <i class="caret"></i></a>
          <a href="#" class="notification"><i class="fa fa-2x fa-bell"></i> <span class="badge">4</span></a>
        </span>
      </div> 
    </div><!--/.navbar-right-->
    
  </div>
  <div class="navbar-collapse collapse pull-left" id="mainNav">
    <ul class="nav navbar-nav">
      <li class="active" data-toggle="tab">
        <a href="#">
          <span class="nav-icon">
            <i class="fa-2lg fa icon-iq-q fa-fw"></i>
          </span>
          Agent IQ
        </a>
      </li>
      <li data-toggle="tab">
        <a href="#">
          <span class="nav-icon">
            <i class="fa-2lg fa fa-headphones fa-fw"></i>
          </span>
          <span class="compressed-lines">Virtual<br class="hidden-xs" />Agent</span>
        </a>
      </li>
      <li data-toggle="tab">
        <a href="#">
          <span class="nav-icon">
            <i class="fa-2lg fa icon-intelligence-hub fa-fw"></i>
          </span>
          Intelligence <br class="hidden-xs"/>Hub
        </a>
      </li>
    </ul>
  </div>
  
</div><!--/.nav-->

<div class="flex-container">
  <div class="flex-side">
    <div class="navside-topbar">
      <a href="#" class="btn btn-default pull-right" id="hamburger-btn"><i class="fa fa-bars"></i></a>
      <div class="input-group collapsed-content">
        <span class="input-group-addon"><div class="fa fa-search"></div></span>
        <input class="form-control" type="text" placeholder="Search reports">
      </div>
    </div><!--/.topbar-->
    <div class="panel-group wds-panel-group-1 collapsed-content" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel wds-panel panel-default">
        <div class="panel-heading active" role="tab" id="headingOne">
          <p class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Main Nav 1</a></p>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <ul class="panel-body list-group wds-list-menu-1">
            <a href="#" class="list-group-item wds-active">Sub Nav 1</a>
            <a href="#" class="list-group-item">Sub Nav 2</a>
            <a href="#" class="list-group-item">Sub Nav 3</a>
          </ul>
        </div>
      </div>
      <div class="panel wds-panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <p class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Main Nav 2</a></p>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <ul class="panel-body list-group wds-list-menu-1">
            <a href="#" class="list-group-item">Sub Nav 1</a>
            <a href="#" class="list-group-item">Sub Nav 2</a>
            <a href="#" class="list-group-item">Sub Nav 3</a>
          </ul>
        </div>
      </div>
      <div class="panel wds-panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <p class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Main Nav 3</a></p>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <ul class="panel-body list-group wds-list-menu-1">
            <a href="#" class="list-group-item">Active Sub Category 3a</a>
            <a href="#" class="list-group-item">Sub Category 3b</a>
            <a href="#" class="list-group-item">Sub Category 3c</a>
          </ul>
        </div>
      </div>
    </div>
  </div><!--/.flexside-->
  <div class="flex-content">
    
    <div class="the-main-chart__title-wrapper">
      <h3 class="the-main-chart__title">Agent IQ Reporting &amp; Dashboard</h3>
      <div class="the-main-chart__tool">
        <a href="#"><i class="fa fa-upload"></i> Export</a>
        <a href="#" class="btn btn-default wds-btn-dropdown" style="display:inline-block;">01/01/2014 to 31/12/2014 <span class="caret"></span></a>
      </div>
    </div>


    <div class="the-main-chart ">
      <span class="pull-right">
        <a href="#" class="btn btn-default btn-xs"><i class="fa fa-line-chart"></i></a>
        <a href="#" class="btn btn-link btn-xs"><i class="fa fa-bar-chart"></i></a>
      </span>
      <a href="#" class="btn btn-default wds-btn-dropdown ">Unique Count <span class="caret"></span></a>
      <div class="flot-wrapper" id="IQ-interaction">
        <div class="text-center y-axis">Unique Count</div>
        <div class="flot-placeholder"></div>
        <div class="text-center">Log Datetime (month)</div>
      </div>
    </div>

    <div class="well wds-well secondary-chart">
      <div class="row">
        <div class="col-md-4">
          <div class="donut-chart__wrapper">
            <div id="successful-interaction-chart" class="donut-chart" data-percent="80">
              <div class="donut-chart__text">
                <div class="donut-chart__number">900</div>
                <div class="donut-chart__description">session</div>
              </div>
            </div>
            <div class="chart-title">
              Virtual Agent <br /> <strong>Successful</strong> Interaction
              <div class="legend">
                <div class="legend__item"><span class="legend__description">Yes</span>75%</div>
                <div class="legend__item"><span class="legend__description">No</span>15%</div>
                <div class="legend__item"><span class="legend__description">None</span>5%</div>
              </div>
            </div>
          </div>
        </div><!--/.span-->
        <div class="col-md-8 nested-cols-wrapper">
          <div class="col-md-4">
            <p class="fancy"><span class="fancy-percent">5%</span>Solutions encountered <br /><b>Without a fix</b></p>
            <p class="fancy"><span class="fancy-percent">61</span> NKI requests <br /><b>15% of all transactions</b></p>
          </div><!--/.span-->
          <div class="col-md-4">
            <div class="wrap-small-chart">
              <div class="h1" style="margin-top:0"><b class="text-muted">4:32</b></div>
              <div class="flot-placeholder-small" id="drop-off-rate"></div>
            </div>
            <b>-40 Seconds</b>
            <p>Average Handling Time</p>
          </div><!--/.span-->
          <div class="col-md-4 text-center">
            <div class="chart-gauge__wrapper">
              <div class="ct-chart"></div>
              <div class="chart-gauge__title">Number of <b>Agent IQ</b> vs <b>Agent Expert</b></div>
            </div>
          </div><!--/.span-->
        </div>

      </div> 
    </div>
    
    <div class="row ">
      <div class="col-md-4">
        <div class="card__wrapper">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Solutions
          </div>
          <div class="card__content">
            <ul class="top-list">
              <li>
                <span class="chart-progress-indicator chart-progress-indicator--increase">
                  <span class="chart-progress-indicator__number">280</span>
                </span> 
                Incorrect or no APN
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 95%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">268</span>
                </span> 
                Mobile data connection disabled
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 90%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">260</span>
                </span> 
                No network selected
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 70%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">245</span>
                </span> 
                Possible software issues
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 60%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">140</span>
                </span> 
                Device has developed faulty software
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 30%;"></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
      <div class="col-md-4">
        <div class="card__wrapper">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Symptoms
          </div>
          <div class="card__content">
            <ul class="top-list">
              <li>
                <span class="chart-progress-indicator ">
                  <span class="chart-progress-indicator__number">280</span>
                </span> 
                Incorrect or no APN
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 95%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">268</span>
                </span> 
                Mobile data connection disabled
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 90%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator chart-progress-indicator--increase">
                  <span class="chart-progress-indicator__number">260</span>
                </span> 
                No network selected
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 70%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">245</span>
                </span> 
                Possible software issues
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 60%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">140</span>
                </span> 
                Device has developed faulty software
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 30%;"></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
      <div class="col-md-4">
        <div class="card__wrapper">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Issues
          </div>
          <div class="card__content">
            <ul class="top-list">
              <li>
                <span class="chart-progress-indicator ">
                  <span class="chart-progress-indicator__number">280</span>
                </span> 
                Incorrect or no APN
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 95%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">268</span>
                </span> 
                Mobile data connection disabled
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 90%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">260</span>
                </span> 
                No network selected
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 70%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator">
                  <span class="chart-progress-indicator__number">245</span>
                </span> 
                Possible software issues
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 60%;"></div>
                </div>
              </li>
              <li>
                <span class="chart-progress-indicator chart-progress-indicator--increase">
                  <span class="chart-progress-indicator__number">140</span>
                </span> 
                Device has developed faulty software
                <div class="progress wds-progress progress-bar-blue">
                  <div class="progress-bar" style="width: 30%;"></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
    </div><!--/.row-->
    
    <div class="row ">
      <div class="col-md-12">
        <div class="card__wrapper">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Products
          </div>
          <div id="container" class="card__content"></div>
        </div>
      </div><!--/.span-->
    </div><!--/.row-->
    
    <div class="row">
      <div class="col-md-4">
        <div class="card__wrapper card--grey">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Agents
          </div>
          <div class="card__content">
            <div class="rank rank--top">
              <span class="rank__number">1st</span>
              <div class="rank__person">Andy White</div>
              <div class="rank__position">Team Leader</div>
              <div class="rank__record">
                <div class="rank__record__label">Fixes</div>
                <span class="rank__record__stats">100 <i class="fa fa-thumbs-o-up"></i> 5 <i class="fa fa-thumbs-o-down"></i></span>
                <div class="rank__record__time">
                  <span>4.25</span> hrs
                </div>
              </div>
            </div>
            <ul class="rank--rest">
              <li class="rank">
                <div class="rank__number">2nd</div>
                <div class="rank__person">Sally Ewings</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">3rd</div>
                <div class="rank__person">Sally Ewings</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">4th</div>
                <div class="rank__person">Sally Ewings</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">5th</div>
                <div class="rank__person">Sally Ewings</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
      <div class="col-md-4">
        <div class="card__wrapper card--grey">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Top Team
          </div>
          <div class="card__content">
            <div class="rank rank--top">
              <span class="rank__number">1st</span>
              <div class="rank__person">Acorn</div>
              <div class="rank__record">
                <div class="rank__record__label">Fixes</div>
                <span class="rank__record__stats">100 <i class="fa fa-thumbs-o-up"></i> 5 <i class="fa fa-thumbs-o-down"></i></span>
                <div class="rank__record__time">
                  <span>4.25</span> hrs
                </div>
              </div>
            </div>
            <ul class="rank--rest">
              <li class="rank">
                <div class="rank__number">2nd</div>
                <div class="rank__person">Coco</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">3rd</div>
                <div class="rank__person">Pea</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">4th</div>
                <div class="rank__person">Unicorn</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
              <li class="rank">
                <div class="rank__number">5th</div>
                <div class="rank__person">Phoenix</div>
                <div class="rank__record">
                  <span class="rank__record__label">Fixes</span>
                  <span class="rank__record__stats">98 <i class="fa fa-thumbs-o-up"></i> 2 <i class="fa fa-thumbs-o-down"></i></span>
                  <span class="rank__record__time"><span>3.12</span> hrs</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div><!--/.span-->
      <div class="col-md-4">
        <div class="card__wrapper card--grey">
          <div class="card__title">
            <a href="#" class="pull-right"><i class="fa fa-ellipsis-h"></i></a>
            Interactions Virtual Agent with Root Cause vs. not having a Root Cause
          </div>
          <div class="card__content text-center">
            <div id="piechart"></div>
            <div id="piechart__legend"></div>
          </div>
        </div>
      </div><!--/.span-->
    </div><!--/.row-->
    
  </div><!--/.flex-content-->
</div><!--/.flex-container-->
              
            
!

CSS

              
                $grey: #34495E;
$stroke: tint($grey,80%);
$brand-primary: #3498DB;

/*NAV STUFF*/
@media(min-width:768px){
  li[data-toggle="tab"] > a{
    line-height: 1.1;
    text-align: center;
  }
  .wds-navbar-1 .navbar-nav .active>a, 
  .wds-navbar-1 .navbar-nav,
  .wds-navbar-1 .navbar-brand,
  .wds-navbar-1 .navbar-brand:before{
    min-height: 85px;
  }
  .navbar-right--wrapper{
    &:after{
      display:inline-block;
      content:"";
      height:85px;
      vertical-align: middle;
    }
  }
}
.navbar-right--wrapper{
  padding:0 10px;
  @media(max-width:767px){
    .user{
      position: relative;
      top:8px;
    }
    .settings{
      float:right;
    }
  }
}
.wds-navbar-1{
  border-bottom: 1px solid $stroke;
  margin-bottom: 0;
}
.wds-navbar-1 .navbar-header .navbar-brand span{
  padding-left: 0;
}
.navbar-brand{
  padding-left:20px;
}


.notification{
  position: relative;
  top:6px;
  .badge{
    position: absolute;
    right:0;
    bottom:0;
    font-size: 0.5em;
  }
}
/*END OF NAV*/

/*FLEXBOX FLEX-SIDE AND FLEX-CONTENT*/
#hamburger-btn{
  margin-left: 5px;
}

.flex-container{
  display:flex;
  min-height: 100vh;
  .flex-side, .flex-content{
    padding:10px 20px;
  }
  .flex-side{
    width: 280px;
    background:tint($grey,97%);
    border-right:1px solid $stroke;
    padding-right: 15px;
    transition: width 0.3s;
    .navside-topbar{
      padding-bottom: 10px;
    }
    .collapsed-content{
      opacity:1;
      visibility:visible;
      transition:all 0.3s 0.3s;
    }
    &.collapsed{
      width: 70px;
      
      .collapsed-content{
        opacity:0;
        visibility:hidden;
        transition:all 0.001s 0s;
      }
    }
  }
  .flex-content{
    padding-left: 15px;
    flex:1;
  }
  @media(max-width:610px){
    flex-direction:column;
    .flex-content{
      padding: 10px;
    }
    .flex-side{
      width: 100%;
      border-right:none;
      border-bottom:1px solid $stroke;
      padding:10px;
      &.collapsed{
        width: inherit;
        height:60px;
      }
    }
  }
}
/*END OF FLEXBOX*/

.flot-wrapper{
  $height:250px;
  padding-left: 20px;
  margin-bottom: 20px;
  .y-axis{
    width: $height;
    transform-origin:0 0;
    transform: rotateZ(-90deg) translateX(-100%) translateY(-100%);

  }
  .flot-placeholder{
    width: 100%;
    height:$height;
    text-align: center;
    margin-bottom: 10px;
    padding-left: 50px;
    position: relative;
  }
}

.fancy{
  padding-left:3em;
  position: relative;
  .fancy-percent{
    position: absolute;
    top:3px;
    left:0;
    font-size: 14px;
    font-weight: 200  ;
    background:#60A9D7;
    border-radius:50% 50% 0 50%;
    color:#fff;
    display:inline-block;
    min-width: 2.5em;
    padding:0.5em 0;
    text-align: center;
  }
}

//Trying BEM
.donut-chart{
  position: absolute;
  left:0;
  &__text{
    position: absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
  }
  &__number{
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    color:tint($grey,30%);
  }
  &__description{
    font-size: 12px;
  }
  &__wrapper{
    padding-left: 110px;
    min-height:110px;
  }
}


.inline-block{
  display:inline-block;
}

.chart-title{
  font-size: 18px;
  font-weight: 200;
}

.legend{
  font-size: 12px;
  &__item{
    display:inline-block;
    background: #fff;
    padding:7px;
    border:1px solid $stroke;
    font-weight: 600;
    margin-top: 3px;
  }
  &__description{
    background: #71B7E6;
    color:#fff;
    padding: 0 5px;
    margin-right: 3px;
  }
}

.secondary-chart{
  @media(max-width:991px){
    .nested-cols-wrapper>div{
      margin-top: 10px;
      border-top:1px solid $stroke;
      padding-top: 10px;
    }
  }
}

.flot-placeholder-small{
  height:50px;
}

.wrap-small-chart{
  position: relative;
  padding-top: 20px;
  .h1{
    position: absolute;
    top:0;
    z-index:1;
  }
}

.chart-gauge{
  &__wrapper{
    position: relative;
    display:inline-block;
    height:110px;
    overflow:hidden;
    //background:red;
  }
  &__title{
    position: absolute;
    display:block;
    top:70%;
    left:50%;
    text-align: center;
    padding:0 0;
    transform:translate(-50%, -50%);
    font-size: 11px;
    line-height: 1;
    b{
      font-size: 14px;
    }
  }
}

.ct-series-a .ct-slice-donut{
  stroke:#99CBED;
  fill: transparent;
  &:hover{
    cursor: pointer;
  }
}
.ct-series-b .ct-slice-donut{
  stroke:#1C84C6;
  fill: transparent;
  &:hover{
    cursor: pointer;
  }
}

.card{
  &__title{
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 2px solid $stroke;
    margin-bottom: 15px;
  }
  &--grey{
    background:tint($grey, 97%);
    border:1px solid $stroke;
    padding:10px;
    margin-bottom: 15px;
    .card__title{
      border-bottom: none;
      margin-bottom: 5px;
      >a{
        margin-left: 10px;
      }
    }
    @media(min-width:991px){
      min-height:300px;
    }
  }
}

.top-list{
  list-style:none;
  padding:0;
  .progress{
    margin-top: 2px;
  }
}

.progress-bar-blue>.progress-bar{
  background: #81BBDE;
}

.chart-progress-indicator{
  font-weight: bold;
  float:right;
  color:tint($grey, 30%);
  
  &__number{
    padding:0 10px;
  }
  &--increase{
    &:before{
      content:"\f148";
      font-family: 'FontAwesome';
    }
    & .chart-progress-indicator__number{
      background: #FFBDBD;
    }
  }
}

.rank{
  position: relative;
  padding-left: 40px;
  &__number{
    position: absolute;
    left:0;
    top:0;
    display:inline-block;
    text-align: center;
    background:#99CBED;
    width: 35px;
    font-size: 10px;
    padding:0.6em 0;
    border-radius:50%;
    &:first-letter{
      font-size: 14px;
      font-weight: 800;
    }
  }
  &__person{
    font-size: 14px;
  }
  &__position{
    font-size: 12px;
    color:tint($grey,50%);
    margin-top: -5px;
    margin-bottom: 5px;
  }
  &__record{
    font-size: 12px;
    font-weight: bold;
    &__label{
      font-weight: 600;
      margin-bottom: -5px;
      color:tint($grey,50%);
    }
    &__time{
      font-weight: normal;
      color:tint($grey,50%);
      span{
        color:$grey;
      }
    }
    &__stats{
      i{
        color:tint($grey,50%);
      }
    }
  }
}
.rank--rest{
  display:inline-block;
  padding:0;
  list-style:none;
  vertical-align: top;
}
.rank--top{
  display:inline-block;
  padding-right: 10px;
  .rank__person{
    font-size: 18px;
  }
  .rank__position{
    font-size: 12px;
    color:tint($grey,50%);
    margin-top: -5px;
    margin-bottom: 5px;
  }
  .rank__record{
    font-size: 18px;
    font-weight: bold;
    .rank__record__label{
      font-size: 11px;
      color:$grey;
      font-weight: 600;
      margin-bottom: -5px;
    }
    .rank__record__time{
      font-size: 11px;
      font-weight: 200;
      span{
        font-size: 18px;
      }
    }
  }
}

#piechart{
  height:175px;
  width: 175px;
  display:inline-block;
  vertical-align: middle;
  margin-right: 5px;
  margin-bottom: 5px;
}
#piechart__legend{
  display:inline-block;
  vertical-align: middle;
}


@media(max-width:767px){
  #mainNav{
    width:100%;
  }
  .navbar-custom-collapse{
    width: 100%;
  }
}

@media(max-width:390px){
  .navbar-brand{
    font-size: 1.2em!important;
  }
}

.navbar-header>button{
  position: relative;
  .badge{
    position: absolute;
    right:0;
    bottom:0;
    font-size: 0.6em;
  }
}

.navbar-default{
  .navbar-toggle{
    background: $brand-primary;
    border-color:$brand-primary;
    color:#fff;
    margin-top: 25px;
    &:hover,
    &:focus{
      background: tint($brand-primary,20%);
      border-color: tint($brand-primary,20%);
    }
  }
  .navbar-brand{
    float:none;
    padding-left: 15px!important;
  }
}
#stupid-hack{
  margin-top: -20px;
  margin-left: 20px;
  padding-bottom: 15px;
}

.the-main-chart{
  &__title-wrapper{
    display:flex;
    flex-wrap:wrap;
    margin: 20px 0;
  }
  &__title{
    flex-grow:1;
    margin-top:3px;
    margin-right: 10px;
  }
}

              
            
!

JS

              
                $("#hamburger-btn").on('click',function(e){
  e.preventDefault();
  $(this).closest('.flex-side').toggleClass('collapsed');
  console.log($(this).closest('.flex-side'));
});

// jQuery Flot Chart
var visits = [[1, 50], [2, 40], [3, 45], [4, 23],[5, 55],[6, 65],[7, 61],[8, 70],[9, 65],[10, 75],[11, 57],[12, 59]];
var visitors = [[1, 25], [2, 50], [3, 23], [4, 48],[5, 38],[6, 40],[7, 47],[8, 55],[9, 43],[10,50],[11,47],[12, 39]];
var bigChartOptions = {
  series: {
    lines: { show: true,
      lineWidth: 1,
      fill: true, 
      fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] }
    },
    points: { show: true, 
      lineWidth: 2,
      radius: 3
    },
    shadowSize: 0,
    stack: true
  },
  grid: { hoverable: true, 
    clickable: true, 
    tickColor: "#EBEDEF",
    borderWidth: 0
  },
  legend: {
    labelBoxBorderColor: "#fff"
  },  
  colors: ["#30a0eb"],
  xaxis: {
    ticks: [[1, "JAN"], [2, "FEB"], [3, "MAR"], [4,"APR"], [5,"MAY"], [6,"JUN"], 
      [7,"JUL"], [8,"AUG"], [9,"SEP"], [10,"OCT"], [11,"NOV"], [12,"DEC"]],
    font: {
      size: 10,
      family: "Open Sans, Arial",
      variant: "small-caps",
      color: "#697695"
    }
  },
  yaxis: {
    ticks:3, 
    tickDecimals: 0,
    font: {size:10, color: "#9da3a9"}
  }
}

var smallChartOptions = {
  series: {
    lines: { 
      show: true,
      lineWidth: 1,
      fill: true, 
      fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] }
    },
    points: { show: false },
    shadowSize: 0
  },
  xaxis: {
    show:false
  },
  yaxis: {
    show:false
  },
  colors: ["#30a0eb"],
  grid: { borderWidth: 0 },
};


var plot1 = $.plot($("#IQ-interaction .flot-placeholder"),
  [ visits], bigChartOptions);
var plot2 = $.plot($("#drop-off-rate"),[visitors], smallChartOptions);


$('#successful-interaction-chart').easyPieChart({
  barColor: '#71B7E6',
  trackColor: '#D6DBDF',
  scaleLength: 0,
  size: 108,
  lineWidth: 5
});

var test = new Chartist.Pie('.ct-chart', {
  series: [135,90]}, {
  donut: true,
  width: '140px',
  height: '140px',
  donutWidth: 20,
  startAngle: 270-22.5,
  total: 360,
  showLabel: false
}).on('created',function(){
  $('.ct-series-b .ct-slice-donut').tooltip({title: '123 sessions (Agent Expert)', container: 'body'});
  $('.ct-series-a .ct-slice-donut').tooltip({title: '800 sessions (Agent IQ)', container: 'body'});
});
 
$('#container').highcharts({
  chart: {
    style: {
      fontFamily: "'Open Sans', sans-serif"
    }
  }, 
  credits:{enabled: false} ,
  series: [{
    type: "treemap",
    borderColor: "#FFFFFF",
    borderWidth: 5,
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    dataLabels:{
      crop: true,
      overflow: "justify",
      padding:5,
      reserveSpace: false,
      style:{
        "color": "#34495E",
        "fontSize": "12px",
        "fontWeight": "normal",
        "textShadow": "none"
      }
    },
    states:{
      hover:{
        enabled: false
      }
    },
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: false
      }
    }],
    data: [{
      id: 'A',
      name: 'Apple',
      color: "#B5E8E0"
    }, {
      id: 'S',
      name: 'Samsung',
      color: "#C5EAF7"
    }, {
      id: 'N',
      name: 'Nokia',
      color: '#FFD3A6'
    }, {
      id: 'B',
      name: 'Blackberry',
      color: '#FFC5C5'
    }, {
      id: 'H',
      name: 'HTC',
      color: '#C9D8F2'
    }, {
      name: 'iPhone 5 (A1429 - iOS 7)',
      parent: 'A',
      value: 4
    }, {
      name: 'iPhone 4S (A1429 - iOS 7)',
      parent: 'A',
      value: 2
    }, {
      name: 'GT-19505 Galaxy S4',
      parent: 'S',
      value: 2
    }, {
      name: 'GT-19305  Galaxy SIII LTE',
      parent: 'S',
      value: 2
    }, {
      name: 'Lumia 930 (RM-1045)',
      parent: 'N',
      value: 2
    }, {
      name: 'Lumia 640',
      parent: 'N',
      value: 2
    }, {
      name: 'Lumia 640 (Win 8.1)',
      parent: 'N',
      value: 1
    }, {
      name: 'BlackBerry  Leap 4G',
      parent: 'B',
      value: 2
    }, {
      name: 'HTC One (M8)',
      parent: 'H',
      value: 1
    }, {
      name: 'HTC One (M9)',
      parent: 'H',
      value: 1
    }]
  }],
  title: false
});

var pieChart = $.plot($('#piechart'),
  [
    { label: "&nbsp; 20% Root Causes Defined",  data: 20, color: '#AED6F1'},
    { label: "&nbsp; 80% Root Causes Defined",  data: 80, color: '#71B7E6'}
  ] , {
  series: {
    pie: {
      show: true,
      stroke: {width: 0}
    }
  },
  legend:{
    position: "sw",
    container: $('#piechart__legend')
  }
});






              
            
!
999px

Console