/* Theme Variables */
$canvas-color: #000000;     //Can change this variable color
$canvas-font-color: #eee;   //Can change this variable color
$primary-color: #3693cf;    //Can change this variable color
$primary-font-color: #fff;  //Can change this variable color


/* Optional Variables  Ex- Success, Error, Info, Warning */
$goGreen: #74b749;        //Can change this variable color
$lemonYellow: #ffb400;    //Can change this variable color
$nagpurOrange: #ed6d49;   //Can change this variable color
$jetBlue: #3693cf;        //Can change this variable color
$rubyRed: #f63131;        //Can change this variable color



$info: #47759e;
$danger: #eb4343;
$warning: #b5799e;
$success: #1e825e;
$brown: #926546;
$teal: #008080;
$orange: #EC7343;
$yellow: #F5B544;



//Social Colors
$facebook: #3b5999;
$twitter: #00acee;
$linkedin: #1a85bd;
$gplus: #dc4937;


/* Default Black and White Colors */
$white: #fff;               //White Color - Should not change
$black: #000;               //Black Color - Should not change



/*   Mixins  */

/*  Gradients  */
@mixin linear-gradient($fromColor, $toColor) {
  background-color: $toColor; /* Fallback Color */
  background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, $fromColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, $fromColor, $toColor); /* FF3.6 */
  background-image: -ms-linear-gradient(top, $fromColor, $toColor); /* IE10 */
  background-image: -o-linear-gradient(top, $fromColor, $toColor); /* Opera 11.10+ */
  background-image: linear-gradient(top, $fromColor, $toColor);
}
@mixin gradient-ver-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
  background-color: mix($midColor, $endColor, 80%);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-repeat: no-repeat;
}
@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
  background-color: $outerColor;
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
  background-repeat: no-repeat;
}

/*  Transition  */
@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -ms-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}
@mixin transition-twice($transition-property, $transition-time, $method, $transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method, $transition-property $transition-time $method ;
  -moz-transition: $transition-property $transition-time $method, $transition-property $transition-time $method ;
  -ms-transition: $transition-property $transition-time $method, $transition-property $transition-time $method ;
  -o-transition: $transition-property $transition-time $method, $transition-property $transition-time $method ;
  transition: $transition-property $transition-time $method, $transition-property $transition-time $method ;
}

/*  Box Sizing  */
@mixin box-sizing($string){
  -webkit-box-sizing: $string;
  -moz-box-sizing: $string;
  box-sizing: $string;
}

/*  Box Shadow  */
@mixin box-shadow($off-y, $off-x, $blur, $color){
  -moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */
  -webkit-box-shadow: $off-y $off-x $blur $color; /* Saf3.0+, Chrome */
  box-shadow: $off-y $off-x $blur $color; /* Opera 10.5, IE9 */
}
@mixin box-shadow-inset($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color $inset;
  -moz-box-shadow: $top $left $blur $color $inset;
  box-shadow: $top $left $blur $color $inset;
}
@mixin box-shadow-twice($val1, $val2, $val3, $val4, $val5, $val6, $val7, $val8, $val9) {
  -webkit-box-shadow: $val1 $val2 $val3 $val4 $val5 $val6 $val7 $val8 $val9;
  -moz-box-shadow: $val1 $val2 $val3 $val4 $val5 $val6 $val7 $val8 $val9;
  box-shadow: $val1 $val2 $val3 $val4 $val5 $val6 $val7 $val8 $val9;
}

/*  Border Radius  */
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
@mixin border-radius-all-val($radius1, $radius2, $radius3, $radius4) {
  -webkit-border-radius: $radius1 $radius2 $radius3 $radius4;
  -moz-border-radius: $radius1 $radius2 $radius3 $radius4;
  border-radius: $radius1 $radius2 $radius3 $radius4;
}

/*  Opacity  */
@mixin opacity($opacity) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}



body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: lighten($black, 20%);
  background: lighten($canvas-color, 15%);
}

a {
  color: $black;
  text-decoration: none;
  @include transition(All, 0.5s, ease);
  &:hover {
    color: $nagpurOrange;
    text-decoration: none;
  }
}

@media (min-width: 980px) {
  .nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }
}

@media (min-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px; 
  } 
}
@media (min-width: 992px) {
  .container {
    width: 100%;
    padding: 0 15px; 
  } 
}
@media (min-width: 1200px) {
  .container {
    width: 100%;
    padding: 0 15px; 
  } 
}


//Reusable class names
.no-margin{
  margin: 0!important;
}
.no-border{
  border: none !important;
}
.no-padding{
  padding: 0!important;
}
.less-bottom-margin{
  margin-bottom: 5px!important;
}
.center-align-text{
  text-align: center!important;
}
.right-align-text{
  text-align: right!important;
}
.left-align-text{
  text-align: left!important;
}
.text-justify{
  text-align: justify!important;
}

//Progress Bar
.progress-lg{
  height: 9px;
  margin-bottom: 7px;
}
.progress-sm{
  height: 6px;
  margin-bottom: 7px;
}
.progress-mini{
  height: 3px;
  margin-bottom: 5px;
}
.progress-mini-x{
  height: 1px;
  margin-bottom: 5px;
}

//BG Colors
.success-bg{
  background: $goGreen !important;
  color: $white !important;
}
.danger-bg{
  background: $rubyRed !important;
  color: $white !important;
}
.info-bg{
  background: $jetBlue !important;
  color: $white !important;
}
.warning-bg{
  background: $nagpurOrange !important;
  color: $white !important;
}
.facebook-bg{
  background: $facebook !important;
  color: $white !important;
}
.twitter-bg{
  background: $twitter !important;
  color: $white !important;
}
.gplus-bg{
  background: $gplus !important;
  color: $white !important;
}
.linkedin-bg{
  background: $linkedin !important;
  color: $white !important;
}
.grey-bg{
  background: #999 !important;
  color: $white !important;
}
.semi-grey-bg{
  background: #ccc !important;
  color: #666 !important;
}
.light-grey-bg{
  background: #f7f7f7 !important;
  color: #666 !important;
}

.lg-border-radius{
  @include border-radius(6px);
}
.md-border-radius{
  @include border-radius(4px);
}
.sm-border-radius{
  @include border-radius(2px);
}

.lg-padding{
  padding: 20px;
}
.md-padding{
  padding: 10px;
}
.sm-padding{
  padding: 5px;
}

.no-border{
  border: none !important;
}

.btn{
  @include border-radius(2px);
  &:focus{
    outline: none;
  }
}
@media (max-width: 767px) {
  .btn{
    margin: 2px;
  }
}

iframe.wysihtml5-sandbox {
  width: 100% !important;
  border: 1px solid darken($white, 10%) !important;
  height: 200px !important;
  @include border-radius(2px);
  margin-bottom: 20px !important;
}

//Text Colors
.text-success{
  color: $goGreen !important;
}
.text-danger{
  color: $rubyRed !important;
}
.text-info{
  color: $jetBlue !important;
}
.text-warning{
  color: $lemonYellow !important;
}
.text-facebook{
  color: #4c66a4 !important;
}
.text-twitter{
  color: #00abf0 !important;
}
.text-gplus{
  color: #cd3d2b !important;
}

.jumbotron{
  padding: 10px;
  p{
    font-size: 12px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  .container .jumbotron {
    padding: 20px;
    @include border-radius(2px); 
  }
}

//Blockquotes
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 4px solid darken($white,8%);
  p {
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 300;
    line-height: 24px;
  }
  .title{
   color: $nagpurOrange;
   font-weight: bold;
   font-size: 14px;
 }
 small {
  display: block;
  line-height: 20px;
  color: lighten($black, 60%);
    &:before {
      content: '\2014 \00A0';
    }
  }
  &.pull-right {
    float: right;
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid darken($white, 6.5%);
    border-left: 0;
    p {
      text-align: right;
    }
    small {
      text-align: right;
      &:before {
        content: '';
      }
      &:after {
        content: '\00A0 \2014';
      }
    }
  }
}

// Stylish Lists
.stylish-lists{
  .upper-alpha {
    list-style: upper-alpha;
  }
  .lower-alpha{
    list-style: lower-alpha;
  }
  .roman-list {
    list-style: upper-roman;
  }
  .decimal-leading-zero{
    list-style: decimal-leading-zero;
  }
  ul, ol {
    padding: 0;
    margin: 0 0 10px 25px;
    list-style: disc;
  }

  ul {
    ul, ol {
      margin-bottom: 0;
    }
  }

  ol {
    ol, ul {
      margin-bottom: 0;
    }
  }

  li {
    line-height: 20px;
  }

  ul.unstyled, ol.unstyled, ul.inline, ol.inline {
    margin-left: 0;
    list-style: none;
  }

  ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
  }

  dl {
    margin-bottom: 20px;
  }

  dt, dd {
    line-height: 20px;
  }

  dt {
    font-weight: bold;
  }

  dd {
    margin-left: 20px;
  }

  .dl-horizontal {
    *zoom: 1;
    &:before {
      display: table;
      content: "";
      line-height: 0;
    }
    &:after {
      display: table;
      content: "";
      line-height: 0;
      clear: both;
    }
    dt {
      float: left;
      width: 160px;
      clear: left;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    dd {
      margin-left: 180px;
    }
  }
}

/*  Login  */
.sign-in-container{
  margin: 30px auto;
  .login-wrapper{
    background: darken($white, 1%);
    @include border-radius (4px);
    -webkit-box-shadow: 0 18px 6px -8px lighten($black, 7%), 0 0 0 lighten($black, 20%);
    -moz-box-shadow: 0 18px 6px -8px lighten($black, 7%), 0 0 0 lighten($black, 20%);
    box-shadow: 0 18px 6px -8px lighten($black, 7%), 0 0 0 lighten($black, 20%);
    border: 2px solid lighten($black, 85%);
    position: relative;
    .header {
      padding: 30px 20px 10px 20px;
      margin: 0;
      h3{
        line-height: 40px;
        margin: 0;
        padding: 0;
        color: $rubyRed;
      }
      p{
        font-size: 12px;
        text-align: left;
        line-height: 18px;
        color: darken($white, 50%);
        padding: 10px 0;
        margin: 0;
      }
      .logo img{
        max-width: 80px;
        float: right;
      }
    }

    .content {
      padding: 10px 20px;
      .input{
        height: 30px;
        font-weight: normal;
        color: darken($white, 20%);
        box-shadow: none;
        @include border-radius (2px);
      }
      .input:hover, select:hover {
        background: darken($white, 2%);
      }
    }

    .actions {
      padding: 10px 20px;
      background: $white;
      border-radius: 0 0 4px 4px;
      .btn {
        float: right;
      }
      .link {
        float: right;
        padding: 8px;
        margin-right: 10px;
        color: lighten($black, 45%);
      }
    }
  }
}

.input-group .input-group-addon i{
  display: block;
  cursor: pointer;
  width: 18px;
  height: 20px;
  @include border-radius(2px);
}

/*  Tiny Scrollbar CSS  */
#scrollbar, #scrollbar-one, #scrollbar-two, #scrollbar-three{
  width: 100%;
  clear: both;
  margin: 0;
  .viewport {
    width: 98%;
    height: 270px;
    overflow: hidden;
    position: relative;
  }
  .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .thumb {
    .end {
      background-color: $nagpurOrange;
    }
    background-color: $nagpurOrange;
  }
  .scrollbar {
    position: relative;
    float: right;
    width: 3px;
  }
  .track {
    background-color: darken($white, 20%);
    height: 100%;
    width: 3px;
    position: relative;
    padding: 0;
  }
  .thumb {
    height: 20px;
    width: 3px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    .end {
      overflow: hidden;
      height: 5px;
      width: 13px;
    }
  }
  .disable {
    display: none;
  }
}

#scrollbar-one, #scrollbar-two {
  .thumb {
    .end {
      background-color: $jetBlue;
    }
    background-color: $jetBlue;
  }
}

.noSelect {
  user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

.info-fade{
  color: lighten($black, 50%);
}

.right-align-text{
  text-align: right !important;
}

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

/* Tab style */
#scrollUp {
  bottom: 17px;
  right: 30px;
  width: 48px;
  height: 36px;
  line-height: 36px;
  font-size: 12px;
  text-align: center;
  color: $white;
  background: $goGreen;
  @include border-radius(4px);
  @include transition(bottom, 150ms, linear);
}
@media (max-width: 767px) {
  #scrollUp {
    display: none !important;
  }
}

// Nav Tabs
.nav-tabs{
  border: 1px solid darken($white, 10%);
  padding: 4px 4px 0 4px;
  @include linear-gradient(darken($white, 3%), darken($white, 7%));
  @include border-radius-all-val(2px, 2px, 0, 0);
}
.tab-content{
  padding: 15px;
  border: 1px solid darken($white, 10%);
  background: $white;
  border-top: 0;
  @include border-radius-all-val(0, 0, 2px, 2px);
}

.breadcrumb{
  background: darken($white, 8%);
  a{
    color: lighten($black, 20%);
    font-weight: 600;
  }
}
.actions-button{
  [data-icon]:before{
    font-size: 13px;
  }
  li{
    float: left;
    margin-right: 10px;
    &:last-child{
      margin-right: 0;
    }
    a{
      color: lighten($black, 40%);
    }
  }
}

/*  Next-prev Buttons  */
.next-prev-btn-container{
  margin-left: 10px;
  .button {
    display: inline-block;
    position: relative;
    color: $white;
    text-shadow: 0 1px 0 rgba(000, 000, 000, 0.7);
    text-align: center;
    padding: 4px 17px;
    font-size: 12px;
    font-weight: bold;
    @include border-radius(4px);
    border: 1px solid darken($nagpurOrange, 10%);
    background: $nagpurOrange;
    &:hover {
      color: darken($white, 15%);
      text-shadow: 0 1px 0 rgba(000, 000, 000, 0.5);
    }
    &.prev {
      border-left: none;
      &:after {
        background: $nagpurOrange;
        content: '';
        position: absolute;
        height: 50%;
        width: 15px;
        border-left: 1px solid darken($nagpurOrange, 10%);
        left: -5px;
        top: 1px;
        -webkit-transform: skew(-40deg, 0);
        -moz-transform: skew(-40deg, 0);
        -o-transform: skew(-40deg, 0);
        -ms-transform: skew(-40deg, 0);
        transform: skew(-40deg, 0);
      }
      &:before {
        background: $nagpurOrange;
        content: '';
        position: absolute;
        height: 48%;
        width: 15px;
        border-left: 1px solid darken($nagpurOrange, 10%);
        bottom: 1px;
        left: -5px;
        -webkit-transform: skew(40deg, 0);
        -moz-transform: skew(40deg, 0);
        -o-transform: skew(40deg, 0);
        -ms-transform: skew(40deg, 0);
        transform: skew(40deg, 0);
      }
    }
    &.next {
      border-right: none;
      &:after {
        background: $nagpurOrange;
        content: '';
        position: absolute;
        height: 48%;
        width: 15px;
        border-right: 1px solid darken($nagpurOrange, 10%);
        right: -5px;
        bottom: 1px;
        -webkit-transform: skew(-40deg, 0);
        -moz-transform: skew(-40deg, 0);
        -o-transform: skew(-40deg, 0);
        -ms-transform: skew(-40deg, 0);
        transform: skew(-40deg, 0);
      }
      &:before {
        background: $nagpurOrange;
        content: '';
        position: absolute;
        height: 50%;
        width: 15px;
        border-right: 1px solid darken($nagpurOrange, 10%);
        top: 1px;
        right: -5px;
        -webkit-transform: skew(40deg, 0);
        -moz-transform: skew(40deg, 0);
        -o-transform: skew(40deg, 0);
        -ms-transform: skew(40deg, 0);
        transform: skew(40deg, 0);
      }
    }
  }
}

/*  Horizontal Rule Styles  */
.hr-stylish {
  padding: 0;
  border: none;
  line-height: 0;
  border-top: medium double lighten($black, 70%);
  color: lighten($black, 70%);
  text-align: center;
  &:after {
    content: "";
    display: inline-block;
    position: relative;
    top: -12px;
    font-size: 14px;
    padding: 0 10px;
    background: darken($white, 3%);
  }
}

.hr-stylish-1 {
  padding: 0;
  border: none;
  height: 1px;
  background-image: -webkit-linear-gradient(left, darken($white, 3%), darken($white, 30%), darken($white, 50%), darken($white, 30%), darken($white, 3%)); 
  background-image: -moz-linear-gradient(left, darken($white, 3%), darken($white, 30%), darken($white, 50%), darken($white, 30%), darken($white, 3%)); 
  background-image: -ms-linear-gradient(left, darken($white, 3%), darken($white, 30%), darken($white, 50%), darken($white, 30%), darken($white, 3%)); 
  background-image: -o-linear-gradient(left, darken($white, 3%), darken($white, 30%), darken($white, 50%), darken($white, 30%), darken($white, 3%)); 
  color: darken($white, 50%);
  text-align: center;
  &:after {
    content: "";
    display: inline-block;
    position: relative;
    top: -12px;
    font-size: 14px;
    padding: 0 10px;
    background: darken($white, 3%);
  }
}

/*  Beautiful Breadcrumb  */
.breadcrumb-beauty {
  list-style: none;
  overflow: hidden;
  font-size: 12px;
  background: darken($white, 10%);
  @include border-radius(2px);
  border: 1px solid darken($white, 15%);
  li {
    float: left;
    a {
      background: darken($white, 10%);
      color: lighten($black, 30%);
      padding: 4px 0 4px 48px;
      position: relative;
      display: block;
      float: left;
      &:after{
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 30px solid darken($white, 10%);
        position: absolute;
        top: 50%;
        margin-top: -50px;
        left: 100%;
        z-index: 2;
      }
    }
    &:first-child a {
      padding-left: 10px;
      @include border-radius-all-val(2px, 0, 0,  2px);
    }
    &:nth-child(2) a {
      background: darken($white, 15%);
      &:after {
        border-left-color: darken($white, 15%);
      }
    }
    &:nth-child(3) a {
      background: darken($white, 18%);
      &:after {
        border-left-color: darken($white, 18%);
      }
    }
    &:nth-child(4) a {
      background: darken($white, 21%);
      &:after {
        border-left-color: darken($white, 21%);
      }
    }
    &:nth-child(5) a {
      background: darken($white, 24%);
      &:after {
        border-left-color: darken($white, 24%);
      }
    }

    &:last-child a {
      background: transparent !important;
      color: $black;
      pointer-events: none;
      cursor: default;
      &:after {
        border-left-color: transparent;
      }
    }
  }
}

//Header
header{
  @include gradient-ver-three-colors(lighten($canvas-color, 20%), lighten($canvas-color, 15%), 85%, lighten($canvas-color, 5%));
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  vertical-align: middle;
  .logo{
    width: 180px;
    float: left;
    img{
      max-width: 140px;
    }
  }
}
@media(max-width:767px){
  header{
    .logo{
      width: 100px;
      img{
        max-width: 90px;
      }
    }
  }
}

// Header mini nav
ul#mini-nav{
  padding: 0;
  list-style-type: none;
  margin: 0;
  li.list-box{
    position: relative;
    cursor: pointer;
    float: left;
    margin-left: 7px;
    text-align: center;
    line-height: 100%;
    vertical-align: middle;
    a{
      padding: 20px 15px;
      line-height: 18px;
      display: block;
      color: $white;
      span{
        margin-top: 0;
      }
      i{
        color: $white;
        font-size: 17px;
      }
      &:focus{
        outline: none;
        text-decoration: none;
      }
    }
    &:hover{
      a i{
        color: lighten($primary-color, 40%);
      }
    }
    .info-label{
      position: absolute;
      top: 8px;
      right: 4px;
      color: $white;
      font-size: 10px;
      text-align: center;
      line-height: 16px;
      width: 16px;
      height: 16px;
    }
    .info-label-opc{
      opacity: 0.4;
    }
    &.user-profile{
      padding: 0;
      margin: 8px 0 0 20px;
      background-color: transparent;
      .user-avtar{
        width: 44px;
        height: 44px;
        float: left;
        padding: 0;
        img{
          border: 2px solid lighten($black, 20%);
          width: 44px;
          height: 44px;
          @include border-radius(100%);
        }
      }
      .account-details{
        float: left;
        width: 120px;
        h5.user-name{
          text-align: right;
          font-weight: 400;
          margin: 0 0 4px 0;
          padding: 0;
          color: $white;
          font-size: 12px;
          font-style: italic;
        }
        ul.settings{
          float: left;
          width: 120px;
          margin-right: 32px;
          margin: 0 2px 0 0;
          list-style-type: none;
          padding: 0;
          li{
            text-align: left;
            background-color: lighten($primary-color, 5%);
            height: 18px;
            line-height: 14px;
            margin-bottom: 2px;
            a{
              color: $white;
              font-size: 10px;
              padding: 2px 5px;
            }
            &:last-child{
              margin-bottom: 0;
            }
            &:hover{
              background-color: lighten($primary-color, 10%);
            }
          }
        }
        .logout{
          background-color: lighten($rubyRed, 5%);
          height: 48px;
          width: 48px;
          float: left;
          a{
            padding: 0;
          }
          i{
            text-align: center;
            line-height: 48px;
            font-size: 16px;
            color: $white;
          }
          &:hover{
            background-color: darken($rubyRed, 5% );
          }
        }
      }
    }
    &:first-child{
      margin-left: 0;
    }
  }

  .dropdown-menu{
    min-width: 320px;
    float: left;
    position: absolute;
    right: 0 !important;
    top: 45px;
    left: inherit;
    border: none;
    border-top: 3px solid lighten($primary-color, 10%);
    &:before{
      content: "";
      position: absolute;
      top: -10px;
      right: 12px;
      border-bottom: 7px solid lighten($primary-color, 10%);
      border-right: 7px solid transparent;
      border-left: 7px solid transparent;
    }
  }
  #mob-nav{
    background-color: $rubyRed;
    padding: 10px;
    margin: 6px 0;
    a{
      padding: 0;
      line-height: 18px;
      color: $white;
      font-size: 14px;
    }
  }
}


// Stats Widget
ul.stats-widget{
  margin: 0;
  padding: 0;
  list-style-type: none;
  li{
    padding: 10px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid darken($white, 5%);
    h5{
      font-size: 18px;
      font-weight: 400;
      text-transform: uppercase;
      margin: 0;
      padding: 0;
      color: $rubyRed;
      margin-bottom: 3px;
    }
    p{
      margin: 0 0 5px 0;
      padding: 0;
      font-size: 11px;
      line-height: 100%;
      span{
        float: right;
        font-weight: 700;
      }
    }
    .progress{
      margin-bottom: 0;
    }
    &:last-child{
      border-bottom: 0 solid darken($white, 5%);
    }
    &:hover{
      background-color: darken($white, 3%);
    }
  }
}

//Activity List
ul.server-activity{
  padding: 10px 15px;
  margin: 0;
  list-style-type: none;
  li {
    padding: 6px 0px;
    border-bottom: 1px solid darken($white, 5%);
    p {
      font-size: 12px;
      padding: 0;
      margin: 0;
      i {
        height: 30px;
        width: 30px;
        background: darken($white, 5%);
        @include border-radius(50px);
        line-height: 30px;
        text-align: center;
        margin-right: 10px;
      }
      .time {
        text-align: right;
        color: $jetBlue;
        float: right;
        line-height: 30px;
        font-weight: 700;
      }
    }
    &:last-child {
      border-bottom: 0;
    }
  }
}

//Project Activity
ul.project-activity {
  margin: 0;
  padding: 0;
  list-style: none;
  li.activity-list {
    position: relative;
    border-left: 2px solid darken($white, 15%);
    &:after {
      background-color: $white;
      border-color: $rubyRed;
      border-radius: 10px;
      border-style: solid;
      border-width: 2px;
      bottom: 0;
      content: "";
      height: 9px;
      left: 0;
      margin-left: -6px;
      position: absolute;
      width: 9px;
    }
    .detail-info {
      margin: 0 0 0 15px;
      padding-bottom: 10px;
    }
    p.message{
      padding: 0;
      margin: 0;
    }
    &.success {
      border-left-color: $goGreen;
      &:after {
        border-color: $goGreen;
      }
    }
    &.danger {
      border-left-color: $rubyRed;
      &:after {
        border-color: $rubyRed;
      }
    }
    &.info {
      border-left-color: $jetBlue;
      &:after {
        border-color: $jetBlue;
      }
    }
    &.warning {
      border-left-color: $lemonYellow;
      &:after {
        border-color: $lemonYellow;
      }
    }
    &:before {
      content: " ";
      display: table;
    }
    &:after {
      content: " ";
      display: table;
      clear: both;
      bottom: auto;
      top: 5px;
    }
    &:last-child .detail-info{
      padding-bottom: 0;
    }
  }
}

//Messages
.messages-list {
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    position: relative;
    clear: both;
    display: inline-block;
    padding: 16px 15px;
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 16px;
    font-family: Arial;
    border-radius: 30px;
    &:before {
      position: absolute;
      top: 0;
      width: 48px;
      height: 48px;
      border-radius: 48px;
      content: '';
    }
    &:after {
      position: absolute;
      top: 15px;
      content: '';
      width: 0;
      height: 0;
    }
    &:nth-child(odd) {
      float: right;
      margin-right: 80px;
      color: $white;
      background: $nagpurOrange;
      &:before {
        right: -80px;
        background-image: url(../img/user4.png);
      }
      &:after {
        border-right: 25px solid transparent;
        right: -15px;
        border-top: 25px solid $nagpurOrange;
      }
    }
    &:nth-child(even) {
      float: left;
      margin-left: 80px;
      color: $white;
      background: $jetBlue;
      &:before {
        left: -80px;
        background-image: url(../img/user5.png);
      }
      &:after {
        border-left: 25px solid transparent;
        left: -15px;
        border-top: 25px solid $jetBlue;
      }
    }
    &:last-child{
      margin-bottom: 0;
    }
  }
}


//Appointments
ul.appointments{
  margin: 10px 0 0 0;
  padding: 0;
  list-style-type: none;
  li{
    margin-bottom: 5px;
    border-bottom: 1px solid darken($white, 15%);
    padding-bottom: 3px;
    font-size: 11px;
    color: lighten($black, 25%);;
    cursor: pointer;
    &:hover{
      color: $nagpurOrange;
    }
    &:first-child{
      text-decoration: line-through;
    }
  }
}

/* Sub Navigation starts  */
.sub-nav{
  @include gradient-ver-three-colors(darken($primary-color, 5%), $primary-color, 85%,darken($primary-color, 20%));
  @include border-radius-all-val(0, 4px, 0, 0);
  height: 54px;
  line-height: 54px;
  li{
    float: left;
    margin-top: 18px;
    line-height: 100%;
    border-right: 1px solid rgba(0, 0, 0, .2);
    a{
      color: $primary-font-color;
      font-size: 12px;
      text-shadow: none;
      line-height: 18px;
      height: 18px;
      padding: 2px 20px;
      &:hover{
        opacity: 0.7;
      }
    }
    &:last-of-type{
      border-right: none;
    }
    &:first-of-type{
      border-right: none;
    }
    .selected{
      color: #FFFC00;
    }
    .heading{
      font-size: 16px;
      line-height: 16px;
      padding-right: 10px;
      color: $primary-font-color;
      opacity: 1;
    }
  }
}

// Custom Search
.custom-search {
  position: relative;
  float: right;
  padding: 0;
  margin: 0 20px 0 0;
  ::-webkit-input-placeholder{
    color: lighten($primary-color, 50%);
  }
  :-moz-placeholder{
    color: lighten($primary-color, 50%);  
  }
  ::-moz-placeholder{
    color: lighten($primary-color, 50%);  
  }
  :-ms-input-placeholder{  
    color: lighten($primary-color, 50%);  
  }
  .search-query {
    margin: 0;
    padding: 6px 10px;
    color: lighten($primary-color, 50%);
    font-style: italic;
    background: lighten($primary-color, 5%);
    border: 1px solid lighten($primary-color, 10%);
    width: 210px;
    @include transition(all, 0.5s, ease);
    line-height: 20px;
    @include border-radius(30px);
    &:focus{
      outline: none;
      border: 0;
      width: 260px;
      border: 1px solid lighten($primary-color, 15%);
      background: $primary-color;
    }
  }
  i{
    padding: 21px 0 0 15px;
    cursor: pointer;
    top: 0;
    position: absolute;
    right: 12px;
    color: lighten($primary-color, 35%);
  }
}

// Notifications
.notice {
  position: relative;
  margin: 10px;
  background: darken($white, 5%);
  padding: 12px 12px 12px 25px;
  border-left: 4px solid darken($white, 10%);
  &:before {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: -17px;
    background-color: darken($white, 5%);
    color: $white;
    width: 30px;
    height: 30px;
    @include border-radius(20%);
    text-align: center;
    line-height: 30px;
  }
  p{
    margin: 0;
  }
  &.blue {
    border-color: $jetBlue;
    &:before {
      font-family: "FontAwesome";
      content: "\f14a";
      background-color: $jetBlue;
    }
  }
  &.green {
    border-color: $goGreen;
    &:before {
      content: "\f121";
      font-family: "FontAwesome";
      background-color: $goGreen;
    }
  }
  &.yellow {
    border-color: $lemonYellow;
    &:before {
      font-family: "FontAwesome";
      content: "\f101";
      background-color: $lemonYellow;
    }
  }
  &.red {
    border-color: $rubyRed;
    &:before {
      font-family: "FontAwesome";
      content: "\f129";
      background-color: $rubyRed;
    }
  }
}

/*  DASHBOARD CSS Starts here  */

.dashboard-container{
  margin-top: 15px;
}
.dashboard-wrapper{
  position: relative;
  background: darken($white, 3%);
  min-height: 680px;
  padding: 15px;
}/*  Dashboard Wrapper Ends Here  */

.dashboard-wrapper-lg{
  position: relative;
  background: darken($white, 3%);
  min-height: 680px;
  padding: 20px;
}
/*  Left Sidebar Container Starts Here  */
.left-sidebar{
  margin-right: 260px;
}
@media (max-width: 767px) {
  .left-sidebar{
    margin-right: 0px;
  }
}
/*  Left Sidebar Container Ends Here  */

// Widget starts
.widget{
  background: darken($white, 2%);
  border: 1px solid darken($white, 19%);
  clear: both;
  margin-top: 0px;
  margin-bottom: 30px;
  @include border-radius(3px);
  .widget-header {
    @include linear-gradient(darken($white, 1%), darken($white, 9%));
    @include border-radius-all-val(2px, 2px, 0, 0);
    border-bottom: 1px solid darken($white, 19%);
    height: 42px;
    padding: 0 15px;
    line-height: 42px;
    .title {
      color: lighten($black, 20%);
      float: left;
      font-weight: bold;
      font-size: 16px;
      .attribution, .mini-title{
        font-size: 11px;
        padding-left: 4px;
        color: lighten($black, 70%);
        font-weight: normal;
        a{
          color: lighten($black, 70%);
        }
      }
    }
    span.tools {
      padding: 0;
      float: right;
      margin: 0;
      > a {
        display: inline-block;
        margin-right: 5px;
        color: lighten($black, 40%);
        margin-top: 3px;
        &:hover {
          text-decoration: none;
          opacity: .6;
        }
      }
      > a.btn{
        color: $white;
        margin-top: 0;
      }
    }
    @media (max-width: 767px) {
      span.tools {
        display: none;
      }
      .tools{
        display: none;
      }
    }
  }
  .widget-body{
    padding: 15px;
    border-bottom: 1px solid darken($white, 30%);
    @include border-radius-all-val(0, 0, 2px, 2px);

  }
}
//Widget ends

// Mini Widget starts
.mini-widget {
  margin: 0 0 25px 0;
  display: block;
  @include border-radius (2px);
  .mini-widget-heading {
    padding: 7px 15px;
    @include border-radius-all-val(2px, 2px, 0, 0);
    text-transform: uppercase;
    text-align: center;
    background: $primary-color;
    color: $white;
    .pull-right {
      color: $white;
      opacity: 0.7;
      @include transition(All, 0.5s, ease-in);
      i{
        line-height: 100%;
        margin-right: 2px;
      }
    }
  }
  .mini-widget-body {
    padding: 10px 15px;
    font-size: 36px;
    font-weight: 300;
    background: darken($primary-color, 10%);
    i {
      color: lighten($primary-color, 10%);
      @include transition(All, 0.5s, ease-in);
      font-size: 60px;
      line-height: 60px;
    }
    .number{
      font-size: 36px;
      line-height: 60px;
      color: $white;
    }
  }
  .mini-widget-footer {
    color: $white;
    background: darken($primary-color, 15%);
    padding: 5px 15px;
    @include border-radius-all-val(0, 0, 2px, 2px);
    position: relative;
    i {
      float: right;
      position: relative;
      top: 2px;
      display: none;
    }
  }
}
.mini-widget-red {
  .mini-widget-heading {
    background: $rubyRed;
    color: $white;
    .pull-right {
      color: $white;
    }
  }
  .mini-widget-body {
    background: darken($rubyRed, 10%);
    i {
      color: lighten($rubyRed, 10%);
    }
    .number{
      color: $white;
    }
  }
  .mini-widget-footer {
    color: $white;
    background: darken($rubyRed, 15%);
  }
}
.mini-widget-green {
  .mini-widget-heading {
    background: $goGreen;
    color: $white;
    .pull-right {
      color: $white;
    }
  }
  .mini-widget-body {
    background: darken($goGreen, 10%);
    i {
      color: lighten($goGreen, 10%);
    }
    .number{
      color: $white;
    }
  }
  .mini-widget-footer {
    color: $white;
    background: darken($goGreen, 15%);
  }
}
.mini-widget-grey {
  .mini-widget-heading {
    background: lighten($black, 40%);
    color: $white;
    .pull-right {
      color: $white;
    }
  }
  .mini-widget-body {
    background: lighten($black, 30%);
    i {
      color: lighten($black, 50%);
    }
    .number{
      color: $white;
    }
  }
  .mini-widget-footer {
    color: $white;
    background: lighten($black, 25%);
  }
}
// Mini Widget ends

// Social Stats
.social-stats{
  text-align: center;
  .social-icon{
    padding: 15px;
    height: 60px;
    width: 60px;
    line-height: 45px;
    margin: 0 auto 10px auto;
    @include border-radius-all-val(50%, 50%, 50%, 0);
    i{
      color: $white;
    }
  }
  .stats-details{
    h6{
      font-weight: 600;
      margin: 0 0 7px 0;
      font-size: 13px;
    }
    h3{
      color: lighten($black, 20%);
      font-weight: 500;
      margin: 0 0 3px 0;
      font-size: 22px;
    }
    h5{
      padding-top: 5px;
      margin-top: 5px;
      border-top: 1px solid darken($white, 10%);
      color: lighten($black, 30%);
      font-weight: 500;
      margin: 0;
      font-size: 14px;
    }
  }
}

/*  Right Sidebar Container Starts Here  */
.right-sidebar{
  width: 240px;
  margin-left: 20px;
  position: absolute;
  right: 15px;
  top: 15px;
  .wrapper{
    margin-bottom: 10px;
    padding: 5px;
    background: darken($white, 10%);
    @include border-radius(2px);

  }
}
@media (max-width: 767px) {
  .right-sidebar{
    display: none;
  }
}
/*  Right Sidebar Container Ends Here  */


/*  Metro nav */
.metro-nav{
  text-align: center;
  .metro-nav-block {
    display: inline-block;
    height: 70px;
    width: 26%;
    cursor: pointer;
    text-decoration: none;
    color: $white;
    overflow: hidden;
    position: relative;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 20px;
    text-align: left;
    margin: auto;
    overflow: hidden;
    z-index: 1;
    @include border-radius(4px);
    .fa{
      font-size: 32px;
      color: $white;
      line-height: 36px;
    }
    a {
      height: 100%;
      vertical-align: top;
      padding: 5px 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      position: absolute;
      font-weight: 400;
      color: $white;
      font-size: 16px;
      line-height: 16px;
      width: 100%;
    }
    &.double {
      width: 47%;
    }
    &:hover {
      opacity: 0.8;
    }
    .info{
      position: absolute;
      top: 20px;
      right: 10px;
      font-size: 24px;
    }
    .brand, .tile-status {
      position: absolute;
      bottom: -10px;
      left: 10px;
      min-height: 30px;
      background-color: transparent;
      *zoom: 1;
      font-size: 14px;
    }
    .tile-status{
      right: 10px;
    }
  }
  * {
    @include box-sizing(border-box);
    &:after, &:before {
      @include box-sizing(border-box);
    }
  }
  .nav-block-orange{
    background: $nagpurOrange;
  }
  .nav-block-green{
    background: $goGreen;
  }
  .nav-block-yellow{
    background: $lemonYellow;
  }
  .nav-block-blue{
    background: $jetBlue;
  }
  .nav-block-red{
    background: $rubyRed;
  }
}
@media (max-width: 767px) {
  .metro-nav{
    .metro-nav-block{
      width: 49%;
      &:hover {
        outline: none;
        opacity: 0.8;
      }
      &.double{
        width: 99%;
      }
    }
  }
}

/*  Chats starts here  */
.chats {
  margin: 0;
  padding: 0;
  margin-top: -15px;
  li {
    padding: 5px 0;
    margin: 10px auto;
    img.avatar {
      height: 60px;
      width: 60px;
      @include border-radius(60%);
    }
    &.in img.avatar {
      margin-right: 10px;
      float: left;
    }
    .name {
      color: $nagpurOrange;
      font-size: 13px;
      font-weight: 400;
    }
    .date-time {
      color: lighten($black, 10%);
      font-size: 11px;
      font-weight: 400;
    }
    &.out img.avatar {
      float: right;
      margin-left: 10px;
    }
    .message {
      display: block;
      padding: 5px 10px;
      position: relative;
    }
    &.in .message {
      text-align: left;
      border-left: 3px solid $nagpurOrange;
      margin-left: 80px;
      background: darken($white, 4%);
      .arrow {
        display: block;
        position: absolute;
        top: 7px;
        left: -8px;
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid $nagpurOrange;
      }
    }
    &.out {
      .message {
        .arrow {
          display: block;
          position: absolute;
          top: 7px;
          right: -8px;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-left: 8px solid $jetBlue;
        }
        border-right: 3px solid $jetBlue;
        margin-right: 80px;
        background: darken($white, 4%);
        text-align: right;
      }
      .name{
        color: $jetBlue
      }
      .name, .date-time {
        text-align: right;
      }
    }
    .message .body {
      display: block;
    }
  }
}

.chat-form {
  margin-top: 15px;
  padding: 10px;
  background: darken($white, 12%);
  clear: both;
  .input-cont {
    margin-right: 55px;
    input {
      width: 100%;
      margin-top: 0;
    }
  }
}


/*  Todo Container  */
.todo-container{
  width: 100%;
  .todo-list{
    margin-bottom: 10px;
    min-height: 180px;
    li {
      background: darken($white, 4%); 
      border-bottom: 1px dotted darken($white, 20%);
      line-height: 34px;
      &:last-child{
        border-bottom: 0;
      }
      input[type="checkbox"]{
        margin: 0 2px 0 10px;           
        &:checked + label{
          text-decoration: line-through;
          color: darken($white, 40%);
        }
      }
      label{
        display:inline-block;
        cursor:pointer;
        font-size: 12px;
        margin-bottom: 0;
        .date{
          font-size: 10px;
          color: darken($white, 30%);
          padding-left: 5px;
          font-weight: normal;
        }
      }
      &:hover{
        background: darken($white, 2%); 
      }
    }
    .new{
      border-left: 3px solid $nagpurOrange;
      margin: 1px 0;
    }
    .completed{
      border-left: 3px solid $goGreen;
      margin: 1px 0;
    }
    .process{
      border-left: 3px solid $lemonYellow;
      margin: 1px 0;
    }
  }

  .input-append{
    margin-top: 5px;
    margin-bottom: 0;
    width: 90%;
  }
}


/*  Messages Container  */
.message-container{
  .message {
    position: relative;
    margin-bottom: 12px;
    min-height: 90px;
    padding: 10px;
    background: $white;
    border: 1px solid darken($white, 15%);
    @include border-radius(2px);
    overflow: hidden;
  }
  .img-container{
    width: 10%;
    position: absolute;
    padding: 2px;
    img {
      @include border-radius(2px);
      max-height: 80px;
      width: 100%;
    }
  }
  article {
    width: 85%;
    position: absolute;
    left: 13%;
    right: 2%;
    top: 0px;
    padding: 10px;
    border-bottom: 1px solid darken($white, 10%);
    a{
      color: $nagpurOrange;
    }
    h6{
      margin: 0 0 5px 0 !important;
    }
  }

  .icons-nav {
    width: 85%;
    position: absolute;
    left: 13%;
    top: 60px;
    margin-top: 4px;
    ul li .fa{
      float: right;
      display: inline-block;
      margin: 0 0 0 4px;
      color: lighten($black, 30%);
      font-size: 19px;
    }
    li.time {
      float: left;
      color: darken($white, 25%);
    }
  }
}

/*  Easy Pie Charts Container  */
.pie-charts-container{
  text-align: center;
  .pie-chart{
    margin-right: 20px;
    display: inline-block;
    .name{
      text-align: center;
      padding-top: 10px;
    }
  }
}

/*  Icomoon Icons Container  */
.icons-container{
  text-align: center;
  li{
    background: $white;
    border: 1px solid darken($white, 5%);
    color: lighten($black, 40%);
    display: inline-block;
    margin: 0px;
    padding: 10px;
    height: 64px;
    width: 20%;
    float: left;
    .fa{
      display: block;
      font-size: 25px;
    }
    &:hover{
      background: darken($white, 3%);
      cursor: pointer;
    }
  }
}
@media (max-width: 767px) {
  .icons-container {
    li{
      width: 100%;
    }
  }
}

//Data tables
#dt_example{
  .dataTables_length{
    display: none;
  }
  .dataTables_filter{
    float: right;
    input{
      width: 160px;
      margin-bottom: 0;
      outline: none;
      border: 1px solid darken($white, 10%);
    }
  }
  .dataTables_info{
    float: left;
    margin-bottom: 5px;
  }
  .dataTables_paginate{
    margin: 5px 0;
    float: right;
    .first, .previous, .next, .last{
      display: none;
      }
    .paginate_button, .paginate_active{
      background: darken($white, 5%);
      margin: 1px;
      padding: 5px 10px;
      &:hover{
        background: darken($white, 10%);
        cursor: pointer;
      }
    }
    .paginate_active{
      background: $jetBlue;
      color: $white;
    }
  }

  /* Sorting */
  .dataTable .sorting {
    cursor: pointer;
    background: url(../img/sorting.png) no-repeat center right;
  }

  .dataTable .sorting_asc {
    cursor: pointer;
    background: url(../img/sorting_asc.png) no-repeat center right;
  }

  .dataTable .sorting_desc {
    cursor: pointer;
    background: url(../img/sorting_desc.png) no-repeat center right;
  }
}


/*  Featured Articles  */
.featured-articles-container{
  background: darken($white, 3%);
  padding: 10px;
  .heading, .heading-blue{
    margin-top: 0;
    color: $nagpurOrange;
    padding-bottom: 8px;
    border-bottom: 1px dotted darken($white, 15%);
  }
  .heading-blue{
    color: $jetBlue;
  }
  .articles{
    a{
      position: relative;
      border-bottom: 1px dotted darken($white, 15%);
      color: lighten($black, 5%);
      display: block;
      font-size: 12px;
      font-weight: 500;
      line-height: 30px;
      padding-left: 20px;
      margin-bottom: 1px;
      &:hover{
        color: lighten($black, 45%);
      }
      .label-bullet, .label-bullet-blue{
        position: absolute;
        left: 1px;
        top: 10px;
        width: 0;
        height: 0;
        border-top: 9px solid lighten($nagpurOrange, 5%);
        border-left: 9px solid transparent;
      }
      .label-bullet-blue{
        border-top: 9px solid lighten($jetBlue, 5%);
      }
      .date{
        font-size: 10px;
        padding-left: 2px;
        color: lighten($black, 70%);
        font-weight: normal;
      }
    }
    &:hover{
      opacity: 1;
      cursor: default;
    }
    .phone{
      text-align: right;
      font-size: 12px;
      padding-top: 5px;
    }
  }
}

/*  Status  */
.stats{
  li{
    padding: 10px;
    background: darken($white, 3%);
    @include border-radius(2px);
    @include transition(All, 0.5s, ease);
    border: 1px solid darken($white, 15%);
    height: 64px;
    margin-bottom: 4px;
    &:last-child {
      margin-bottom: 0px;
    }
    &:hover{
      opacity: 0.7;
      cursor: pointer;
    }
    .left {
      border-right: 1px solid darken($white, 10%);
      float: left;
      display: inline-block;
      text-align: left;
      width: 120px;
      margin-right: 10px;
      h4{
        margin-top: 0;
        margin-bottom: 6px;
        color: lighten($black, 30%);
      }
      p{
        font-size: 11px;
        color: $nagpurOrange;
        text-transform: uppercase;
        margin-bottom: 0;
      }
    }
    &:nth-child(2){
      p{
        color: $goGreen;
      }
    }
    &:nth-child(3){
      p{
        color: $lemonYellow;
      }
    }
    &:nth-child(4){
      p{
        color: $jetBlue;
      }
    }
    &:nth-child(5){
      p{
        color: $rubyRed;
      }
    }
    .chart{
      width: 70px;
      margin-top: 10px;
      margin-left: 5px;
      float: left;
    }
  }
}

/*  Month Income  */
.month-income{
  li{
    padding: 5px;
    background: darken($white, 3%);
    @include border-radius(2px);
    @include transition(All, 0.5s, ease);
    border: 1px solid darken($white, 15%);
    height: 50px;
    margin-bottom: 4px;
    &:last-child {
      margin-bottom: 0px;
    }
    &:hover{
      opacity: 0.7;
      cursor: pointer;
    }
    .icon-block{
      width: 38px;
      height: 38px;
      line-height: 38px;
      float: left;
      margin-top: 0;
      color: $white;
      text-align: center;
      vertical-align: middle;
      @include border-radius(2px);
    }
    h5{
      margin: 0 0 3px 45px;
      padding: 0;
      color: lighten($black, 50%);
      small{
        font-size: 11px;
      }
    }
    p{
      font-size: 11px;
      margin-bottom: 0;
      margin-left: 45px;
      color: lighten($black, 70%);
    }
    .yellow-block{
      background: $lemonYellow;
    }
    .orange-block{
      background: $nagpurOrange;
    }
    .green-block{
      background: $goGreen;
    }
    .blue-block{
      background: $jetBlue;
    }
    .red-block{
      background: $rubyRed;
    }
  }
}

/*  Mini Dashboard  */
.mini-dashboard {
  padding: 5px;
  background: darken($white, 3%);
  @include border-radius(2px);
  border: 1px solid darken($white, 15%);
  margin-bottom: 4px;
  .graph-container {
    .city{
      margin: 5px 0 15px 0;
      font-size: 18px;
      color: lighten($black, 30%);
      .time {
        font-size: 11px;
        padding-left: 7px;
        color: lighten($black, 50%);
      }
    }
    .graph{
      margin: 10px 0;
      width: 100%;
      height: 34px;
    }

    .info-container{
      padding: 5px 0;
      color: $jetBlue;
      .blocks-container{
        .block {
          position: relative;
          background: darken($white, 10%);
          text-align: center;
          width: 108px;
          @include border-radius(2px);
          float: left;
          height: 40px;
          line-height: 40px;
          font-size: 18px;
          font-weight: bold;
          &.last {
            margin-left: 2px;
          }
        }
        .arrow {
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid darken($nagpurOrange, 10%);
          position: absolute;
          top: 18px;
          width: 0; 
          height: 0;
          left: 10px;
        }
      }
    }
  }
}

/*  Progress statistics  */
.progress-stats {
  li{
    padding: 5px;
    background: darken($white, 3%);
    @include border-radius(2px);
    @include transition(All, 0.5s, ease);
    border: 1px solid darken($white, 15%);
    margin-bottom: 5px;
    &:last-child {
      margin-bottom: 0px;
    }
    &:hover{
      opacity: 0.7;
      cursor: pointer;
    }
  }
}

/*  Doc icons  */
.doc-icons-container{
  position: relative;
  line-height: 100%;
  .icon {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 50px;
    background: darken($white, 15%);
    margin: 0 15px 0 0;
    &:before {
      position: absolute;
      content: "";
      top: 0px;
      right: -10px;
      width: 0;
      height: 50px;
      border-left: 10px solid darken($white, 15%);
      border-top: 10px solid transparent;
    }
    &:after {
      position: absolute;
      content: "";
      top: 0px;
      right: -10px;
      width: 0;
      height: 0;
      border-right: 10px solid transparent;
      border-bottom: 10px solid rgba(0, 0, 0, 0.2);
    }

    &.light-blue {
      background: lighten($jetBlue, 10%);
      color: darken($jetBlue, 20%);
      &:before {
        border-left-color: lighten($jetBlue, 10%);
      }
    }

    &.light-green {
      background: lighten($goGreen, 10%);
      color: darken($goGreen, 20%);
      &:before {
        border-left-color: lighten($goGreen, 10%);
      }
    }

    &.light-yellow {
      background: lighten($lemonYellow, 10%);
      color: darken($lemonYellow, 20%);
      &:before {
        border-left-color: lighten($lemonYellow, 10%);
      }
    }

    &.light-orange {
      background: lighten($nagpurOrange, 10%);
      color: darken($nagpurOrange, 20%);
      &:before {
        border-left-color: lighten($nagpurOrange, 10%);
      }
    }
  }
  .doc-icon {
    position: absolute;
    top: 10px;
    width: 50px;
    height: 20px;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
  }
  .doc-type {
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 16px;
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
    line-height: 8px;
  }
}

/*  INVOICE  */
.invoice {
  border: 1px solid lighten($black, 80%);
  padding: 15px;
  .invoice-head {
    border-bottom: 1px solid lighten($black, 80%);
    height: 48px;
    .logo {
      margin: 0;
    }
    .invoice-info {
      float: right;
      margin-top: 8px;
      text-align: right;
      span {
        color: $nagpurOrange;
        font-weight: bold;
        font-size: 12px;
        float: right;
        text-align: right;
      }
      .date{
        color: $jetBlue;
        font-size: 11px;
        font-weight: 500;
      }
    }
  }
  .invoice-data-container {
    padding: 20px 0;
    .from{
      width: 40%;
      h5{
        color: lighten($black, 30%);
        margin: 0 0 10px 0;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
      }
      span {
        color: lighten($nagpurOrange, 5%);
        display: block;
        font-size: 12px;
        margin-bottom: 3px;
      }
    }
  }
}

/*  page not found - 404 -500  */
.page-not-found{
  margin-top: 80px;
  color: lighten($black, 70%);
  .number{
    font-size: 150px;
    color: $nagpurOrange;
    line-height: 100%;
  }
}

footer{
  background: $primary-color;
  color: $primary-font-color;
  font-weight: normal;
  line-height: 30px;
  font-size: 11px;
  padding: 10px 15px;
  margin-bottom: 10px;
  z-index: 1;
  @include border-radius-all-val(0, 0, 4px, 4px);
  p{
    margin-bottom: 0;
  }
}

.chart-height-lg {
  position: relative;
  height: 270px;
}
.chart-height {
  position: relative;
  height: 180px;
}
.chart-height-md {
  position: relative;
  height: 139px;
}

.legent div{
  background: #FAFAFA;
}
.legendColorBox div {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background: #FAFAFA;
}
.legendLabel{
  background: #FAFAFA;
  padding-left: 10px;
}


// Demo Button Group
.demo-btn-group{
  .btn{
    min-width: 80px;
    margin: 2px;
  }
  a{
    display: block;
    margin: 2px;
    float: left;
    padding: 0 !important;
  }
}
.icon-rounded {
  width: 32px;
  height: 32px;
  @include border-radius(100%);
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  line-height: 28px !important;
  color: $white;
}












// Navigation
#cssmenu {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    li {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      line-height: 1;
      display: block;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      a {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        line-height: 1;
        display: block;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
    }
  }
  #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  &:after, > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  #menu-button {
    display: none;
  }
  font-family: Arial;
  > ul > li {
    &.active {
      background: darken($primary-color, 5%);
      a {
        color: $white;
        i {
          color: $white;
        }
      }
      &:hover {
        background: darken($primary-color, 5%);
      }
    }
    float: left;
    @include gradient-ver-three-colors(darken($white, 5%), darken($white, 8%), 85%, darken($white, 20%));
    border-radius: 3px 3px 0 0;
    width: 102px;
    text-align: center;
    margin-right: 1px;
    border-radius: 3px 3px 0 0;
    &:hover {
      background: darken($primary-color, 5%);
    }
    > a i {
      color: lighten($black, 30%);
      text-align: center;
      display: block;
      margin-bottom: 5px;
      font-size: 16px;
    }
  }
  &.align-center {
    > ul {
      font-size: 0;
      text-align: center;
      > li {
        display: inline-block;
        float: none;
      }
    }
    ul ul {
      text-align: left;
    }
  }
  &.align-right > ul > li {
    float: right;
  }
  > ul > li {
    > a {
      padding: 15px 4px;
      font-size: 11px;
      text-decoration: none;
      color: lighten($black, 30%);
      text-align: center;
      font-weight: 300;
      text-transform: uppercase;
    }
    &:hover > a {
      color: $white;
      i {
        color: $white;
      }
    }
    &.has-sub {
      > a {
        &:after {
          position: absolute;
          top: 22px;
          right: 11px;
          width: 8px;
          height: 2px;
          display: block;
          background: darken($white, 25%);
          content: '';
        }
        &:before {
          position: absolute;
          top: 19px;
          right: 14px;
          display: block;
          width: 2px;
          height: 8px;
          background: darken($white, 25%);
          content: '';
          -webkit-transition: all .25s ease;
          -moz-transition: all .25s ease;
          -ms-transition: all .25s ease;
          -o-transition: all .25s ease;
          transition: all .25s ease;
        }
      }
      &:hover > a {
        &:before {
          top: 23px;
          height: 0;
        }
        &:after {
          background: $white;
        }
      }
    }
  }
  ul ul {
    position: absolute;
    left: -9999px;
    z-index: 10000;
  }
  &.align-right ul ul {
    text-align: right;
  }
  ul ul li {
    background: darken($primary-color, 5%);
    height: 0;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
  }
  li:hover > ul {
    left: auto;
  }
  &.align-right li:hover > ul {
    left: auto;
    right: 0;
  }
  li:hover > ul > li {
    height: 35px;
    &:hover {
      background: darken($primary-color, 10%);
    }
  }
  ul ul ul {
    margin-left: 100%;
    top: 0;
  }
  &.align-right ul ul ul {
    margin-left: 0;
    margin-right: 100%;
  }
  ul ul {
    ul li {
      background: darken($primary-color, 10%);
      &:hover {
        background: darken($primary-color, 12%) !important;
      }
    }
    li {
      a {
        padding: 11px 15px;
        width: 170px;
        font-size: 12px;
        text-decoration: none;
        color: $white;
        font-weight: 400;
        text-align: left;
      }
      &:last-child > a, &.last-item > a {
        border-bottom: 0;
      }
      &:hover > a, a:hover {
        color: $white;
      }
      &.has-sub > a:after {
        position: absolute;
        top: 16px;
        right: 11px;
        width: 8px;
        height: 2px;
        display: block;
        background: #dddddd;
        content: '';
      }
    }
  }
  &.align-right ul ul li.has-sub > a:after {
    right: auto;
    left: 11px;
  }
  ul ul li.has-sub > a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
  }
  &.align-right ul ul li.has-sub > a:before {
    right: auto;
    left: 14px;
  }
  ul ul > li.has-sub:hover > a:before {
    top: 17px;
    height: 0;
  }
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
    border-radius: 2px 2px 0 0;
    @include gradient-ver-three-colors($primary-color, $primary-color, 85%,darken($primary-color, 20%));
    ul {
      width: 100%;
      display: none;
    }
    &.align-center > ul {
      text-align: left;
    }
    ul {
      li {
        width: 100%;
        border-top: 1px solid #4C4C4C;
        background: #444444;
        &:hover {
          width: 100%;
          background: #474747;
        }
      }
      ul li {
        height: auto;
        background: #555555;
      }
    }
    li:hover > ul > li {
      height: auto;
      background: #555555;
    }
    ul ul li:hover, li:hover > ul > li:hover {
      height: auto;
      background: #575757;
    }
    ul {
      li a {
        width: 100%;
        border-bottom: 0;
        text-align: left;
        color: #eee;
        border-radius: 0;
        padding: 15px;
      }
      ul {
        li a {
          width: 100%;
          border-bottom: 0;
          text-align: left;
          color: #eee;
          border-radius: 0;
          padding: 15px;
          padding-left: 25px;
        }
        ul li {
          background: #666666;
          border-top: 1px solid #585858;
          &:hover {
            background: #646464 !important;
            border-top: 1px solid #676767;
          }
          a {
            padding-left: 35px;
          }
        }
        li {
          a {
            color: $white;
            background: none;
          }
          &:hover > a, &.active > a {
            color: $white;
          }
        }
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
        ul {
          position: relative;
          left: 0;
          width: 100%;
          margin: 0;
          text-align: left;
        }
      }
    }
    > ul > li {
      > a i {
        color: #eee;
        text-align: center;
        display: inline;
        margin-right: 5px;
        margin-bottom: 0;
        font-size: 16px;
      }
      float: none;
      border-radius: 0;
    }
    &.align-right ul ul {
      position: relative;
      left: 0;
      width: 100%;
      margin: 0;
      text-align: left;
    }
    > ul > li.has-sub > a {
      &:after, &:before {
        display: none;
      }
    }
    ul ul > li.has-sub > a {
      &:after, &:before {
        display: none;
      }
    }
    #menu-button {
      display: block;
      padding: 20px 17px;
      color: $white;
      cursor: pointer;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 700;
      &:after {
        position: absolute;
        top: 22px;
        right: 17px;
        display: block;
        height: 4px;
        width: 20px;
        border-top: 2px solid $white;
        border-bottom: 2px solid $white;
        content: '';
        -webkit-box-sizing: initial;
        -moz-box-sizing: initial;
        box-sizing: initial;
      }
      &:before {
        position: absolute;
        top: 16px;
        right: 17px;
        display: block;
        height: 2px;
        width: 20px;
        background: $white;
        content: '';
      }
      &.menu-opened {
        &:after {
          top: 23px;
          border: 0;
          height: 2px;
          width: 15px;
          background: $white;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
        }
        &:before {
          top: 23px;
          background: $white;
          width: 15px;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
        }
      }
    }
    .submenu-button {
      position: absolute;
      z-index: 99;
      right: 0;
      top: 0;
      display: block;
      border-left: 1px solid rgba(120, 120, 120, 0.2);
      height: 46px;
      width: 46px;
      cursor: pointer;
    }
    ul {
      .submenu-button.submenu-opened {
        background: #555;
      }
      ul .submenu-button {
        &.submenu-opened {
          background: #666;
        }
        height: 42px;
        width: 42px;
      }
    }
    .submenu-button:after {
      position: absolute;
      top: 22px;
      right: 19px;
      width: 8px;
      height: 2px;
      display: block;
      background: $white;
      content: '';
    }
    ul ul .submenu-button:after {
      top: 20px;
      right: 16px;
    }
    .submenu-button {
      &.submenu-opened:after {
        background: $white;
      }
      &:before {
        position: absolute;
        top: 19px;
        right: 22px;
        display: block;
        width: 2px;
        height: 8px;
        background: $white;
        content: '';
      }
    }
    ul ul .submenu-button:before {
      top: 17px;
      right: 19px;
    }
    .submenu-button.submenu-opened:before {
      display: none;
    }
  }
}




// Panels
//Panels
.panel {
  margin-bottom: 25px;
  background-color: $white;
  @include border-radius(0);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.panel-body {
  padding: 15px;
  position: relative;
}

.panel-heading {
  position: relative;
  padding: 12px 15px;
  border-bottom: 0;
  @include border-radius(0px);
}

h4.panel-title {
  font-size: 15px;
  font-weight: 600;
  .icon{
    margin-right: 4px;
    font-size: 20px;
  }
}

.panel-footer{
  padding: 0;
  border: 0;
  margin-top: -1px;
  background: transparent;
  border-top: 0;
  ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: 1px solid darken($white, 12%);
    li{
      width: 25%;
      text-align: center;
      padding: 10px 0;
      float: left;
      height: 60px;
      background: transparent;
      h4{
        font-size: 18px;
        margin: 2px 0 0 0;
        padding: 0;
        text-align: center;
        small{
          color: inherit;
        }
      }
      p{
        color: lighten($black, 50%);
        font-size: 12px;
        margin: 0;
        padding: 0;
        text-align: center;
      }
    }
  }
}

.panel-default {
  border: 1px solid darken($white, 15%);
  > {
    .panel-heading {
      border-color: darken($white, 9%);
      background: darken($white, 4%);
      h4.panel-title{
        color: lighten($black, 35%);
        font-size: 14px;
      }
    }
    .panel-body{
      padding: 15px;
    }
    .panel-footer{
      border-color: darken($white, 9%);
      background: darken($white, 3%);
      a{
        color: lighten($black, 40%);
        &:hover{
          color: lighten($black, 30%);
        }
      }
    }
  }
}

.panel-success {
  border: 1px solid lighten($success, 45%);
  > {
    .panel-heading {
      color: $success;
      background: lighten($success, 60%);
      h4.panel-title{
        color: $success;
        font-size: 14px;
      }
    }
    .panel-body{
      padding: 15px;
    }
    .panel-footer{
      color: $success;
      background: lighten($success, 40%);
      border-color: lighten($success, 30%);
      a{
        color: lighten($success, 10%);
        &:hover{
          color: lighten($success, 20%);
        }
      }
    }
  }
}

.panel-warning {
  border: 1px solid lighten($warning, 25%);
  > {
    .panel-heading {
      color: $warning;
      background-color: lighten($warning, 35%);
      h4.panel-title{
        color: $warning;
        font-size: 14px;
      }
    }
    .panel-body{
      padding: 15px;
    }
    .panel-footer{
      color: $warning;
      background-color: lighten($warning, 40%);
      border-color: lighten($warning, 30%);
      a{
        color: lighten($warning, 10%);
        &:hover{
          color: lighten($warning, 20%);
        }
      }
    }
  }
}

.panel-danger {
  border: 1px solid lighten($danger, 28%);
  > {
    .panel-heading {
      color: $danger;
      background: lighten($danger, 35%);
      h4.panel-title{
        color: $danger;
        font-size: 14px;
      }
    }
    .panel-body{
      padding: 15px;
    }
    .panel-footer{
      color: $danger;
      background: lighten($danger, 32%);
      border-color: lighten($danger, 28%);
      a{
        color: lighten($danger, 10%);
        &:hover{
          color: lighten($danger, 20%);
        }
      }
    }
  }
}

.panel-info {
  border: 1px solid lighten($info, 36%);
  > {
    .panel-heading {
      color: $info;
      background: lighten($info, 45%);
      h4.panel-title{
        color: $info;
        font-size: 14px;
      }
    }
    .panel-body{
      padding: 15px;
    }
    .panel-footer{
      color: $info;
      background: lighten($info, 32%);
      border-color: lighten($info, 28%);
      a{
        color: lighten($info, 10%);
        &:hover{
          color: lighten($info, 20%);
        }
      }
    }
  }
}

.panel-yell {
  border: 1px solid lighten($yellow, 21%);
  > {
    .panel-heading {
      color: $yellow;
      background: lighten($yellow, 34%);
      h4.panel-title{
        color: $yellow;
        font-size: 14px;
      }
    }
    .panel-body{
      padding: 15px;
    }
    .panel-footer{
      color: $yellow;
      background: lighten($yellow, 32%);
      border-color: lighten($yellow, 28%);
      a{
        color: lighten($yellow, 10%);
        &:hover{
          color: lighten($yellow, 20%);
        }
      }
    }
  }
}

// Panel Full Background
.panel-grey{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: lighten($black, 30%);
  padding: 15px;
  position: relative;
  color: lighten($black, 70%);
  border: 1px solid lighten($black, 20%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($black, 40%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-white{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: darken($white, 5%);
  padding: 15px;
  color: lighten($black, 30%);
  position: relative;
  border: 1px solid darken($white, 7%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid darken($white, 10%);
    margin-bottom: 10px;
    color: $black;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-red{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $danger;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($danger, 10%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($danger, 10%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-blue{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $info;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($info, 15%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($info, 10%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-brown{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $brown;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($brown, 12%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($brown, 10%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-green{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $success;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($success, 6%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($success, 10%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-teal{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $teal;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($teal, 4%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($teal, 10%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-yellow{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $yellow;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($yellow, 12%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($yellow, 10%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-orange{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $orange;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($orange, 9%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($orange, 10%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-fb{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $facebook;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($facebook, 8%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($facebook, 10%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-twitter{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $twitter;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($twitter, 6%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($twitter, 5%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

.panel-linkedin{
  margin-bottom: 20px;
  @include border-radius(2px);
  background: $linkedin;
  padding: 15px;
  color: $white;
  position: relative;
  border: 1px solid darken($success, 2%);
  h4.heading{
    margin: 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid lighten($linkedin, 5%);
    margin-bottom: 10px;
  }
  .panel-body{
    padding: 0;
    border: 0;
  }
}

//Panel Group
.panel-group {
  .panel{
    @include border-radius(0);
  }
  .panel-heading{
    border-bottom: 1px solid lighten($primary-color, 28%);
  }
  .panel-heading + .panel-collapse .panel-body{
    border-top: 0;
  }
}

//Callouts
.callout {
  margin: 0 0 3px 0;
  padding: 10px 20px;
  background-color: darken($white, 5%);
  border-left: 3px solid lighten($white, 10%);
}
.callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.callout p:last-child {
  margin-bottom: 0;
}

.callout-danger {
  border-color: $danger;
}
.callout-danger h4 {
  color: $danger;
}
.callout-warning {
  border-color: $warning;
}
.callout-warning h4 {
  color: $warning;
}
.callout-info {
  border-color: $info;
}
.callout-info h4 {
  color: $info;
}
.callout-success {
  border-color: $success;
}
.callout-success h4 {
  color: $success;
}



// V6


// Timeline
.timeline {
  list-style: none;
  position: relative;
  max-width: 1000px;
  padding: 20px 10px;
  margin: 0 auto;
  overflow: hidden;
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2px;
    background-color: lighten($lemonYellow, 20%);
    height: 100%;
    width: 1px;
    display: block;
  }
  .timeline-row {
    padding-left: 50%;
    position: relative;
    z-index: 10;
    .timeline-time {
      position: absolute;
      right: 50%;
      top: 31px;
      text-align: right;
      margin-right: 40px;
      font-size: 16px;
      line-height: 1.3;
      font-weight: 600;
      small {
        display: block;
        color: $success;
        font-size: 11px;
        font-weight: 600;
      }
    }
    .timeline-icon {
      position: absolute;
      top: 30px;
      left: 50%;
      margin-left: -20px;
      width: 38px;
      height: 38px;
      background-color: darken($white, 10%);
      box-shadow: 0 0 10px darken($white, 40%);
      @include border-radius(100%);
      text-align: center;
      overflow: hidden;
      padding: 2px;
      color: white;
      font-size: 14px;
      z-index: 100;
      > div {
        line-height: 34px;
        font-size: 16px;
        @include border-radius(100%);
      }
    }
    .timeline-content {
      margin-left: 40px;
      position: relative;
      background-color: $white;
      color: #333333;
      &:after {
        content: "";
        position: absolute;
        top: 48px;
        left: -41px;
        height: 1px;
        width: 40px;
        background-color: lighten($danger, 20%);
        z-index: -1;
      }
      .panel-body {
        padding: 15px 15px 2px;
        position: relative;
        z-index: 10;
        @include linear-gradient(darken($white, 1%), darken($white, 9%));
        border: 1px solid darken($white, 11%);
        @include border-radius(3px);
      }
      h2 {
        margin-bottom: 12px;
        margin-top: 0;
        line-height: 1.2;
        color: lighten($black, 20%) !important;
        font-size: 18px;
      }
      p, img {
        margin-bottom: 15px;
      }
      img{
        @include border-radius(30%);
      }
      img.less-round{
        @include border-radius(4px);
      }
    }
    &:nth-child(odd) {
      padding-left: 0;
      padding-right: 50%;
      .timeline-time {
        right: auto;
        left: 50%;
        text-align: left;
        margin-right: 0;
        margin-left: 30px;
      }
      .timeline-content {
        margin-right: 40px;
        margin-left: 0;
        &:after {
          left: auto;
          right: -41px;
        }
      }
    }
  }
  &.animated .timeline-row {
    .timeline-content {
      opacity: 0;
      left: 20px;
      -webkit-transition: all 0.8s;
      -moz-transition: all 0.8s;
      transition: all 0.8s;
    }
    &:nth-child(odd) .timeline-content {
      left: -20px;
    }
    &.active {
      .timeline-content {
        opacity: 1;
        left: 0;
      }
      &:nth-child(odd) .timeline-content {
        left: 0;
      }
    }
  }
}

@media (max-width: 1200px) {
  .timeline {
    padding: 15px 10px;
    &:after {
      left: 28px;
    }
    .timeline-row {
      padding-left: 0;
      margin-bottom: 16px;
      .timeline-time {
        position: relative;
        right: auto;
        top: 0;
        text-align: left;
        margin: 0 0 6px 56px;
        strong {
          display: inline-block;
          margin-right: 10px;
        }
      }
      .timeline-icon {
        top: 52px;
        left: -2px;
        margin-left: 0;
      }
      .timeline-content {
        margin-left: 56px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        position: relative;
        &:after {
          right: auto !important;
          left: -20px !important;
          top: 32px;
        }
      }
      &:nth-child(odd) {
        padding-right: 0;
        .timeline-time {
          position: relative;
          right: auto;
          left: auto;
          top: 0;
          text-align: left;
          margin: 0 0 6px 56px;
        }
        .timeline-content {
          margin-right: 0;
          margin-left: 55px;
        }
      }
    }
    &.animated .timeline-row {
      &:nth-child(odd) .timeline-content {
        left: 20px;
      }
      &.active:nth-child(odd) .timeline-content {
        left: 0;
      }
    }
  }
}



// V7
.google-visualization-table-table{
  width: 100%;
}