.chartsContainer p:not(:last-child) {
  margin: 0 0 20px;
}
.chartsContainer section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}
main label {
  display: inline-block;
  margin: 0 0 -1px;
  cursor: pointer;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}
main label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}
/*label[for*='tab1']:before { content: '\f1cb'; }
label[for*='tab2']:before { content: '\f17d'; }
label[for*='tab3']:before { content: '\f16c'; }
label[for*='tab4']:before { content: '\f201'; }
label[for*='tab5']:before { content: '\f080'; }*/
main label:hover {
  color: #789;
  cursor: pointer;
  border-top: 1px solid #337ab7;
  border-left: 1px solid #808080;
  border-right: 1px solid #808080;
}
button.multiselect{
    width:200px;
    overflow:hidden;
}
.multiselect-container.dropdown-menu{
    max-height:400px;
    /*position:relative;*/
    overflow:auto;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}
@media screen and (max-width: 800px) {
  .chartsContainer label {
    font-size: 0;
  }
  .chartsContainer label:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 500px) {
  .chartsContainer label {
    padding: 15px;
  }
}
/* Style tab links */
.tablink {
  background-color: rgb(201, 201, 201);
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}
/* Styles for the svg doughnuts drawn with normal svg canvas methods*/
.circle-chart__circle {
  transform: rotate(-90deg);
  transform-origin: center;
}
.tablink:hover {
  background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
.dashboardPanel{
    margin-top: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #EFEFEF;
}
.dashboardPanelLast{
    margin-top: 15px;
    border-radius: 5px;
    border: 1px solid #EFEFEF;
}
.dashboardPanelDefault
{
    border-top: 2px solid #DDDDDD;
}

.dashboardPanelDanger
{
    border-top: 2px solid #E61D2B;
}
.dashboardPanelGen
{
    border-top: 2px solid #0498a9;
}
.dashboardPanelDark
{
    padding: 8px;
    border-top: 2px solid #424242;
}
.tabLabel{
    text-align:center; 
    padding:15px; 
    width:49%; 
}
.dashboardTitle{
    margin: 10px !important;
    font-size: 16px;
    font-weight: bold;
}

.dashboardTitleRed
{
    color: #990000;
}
.dashboardTitleBlue
{
    color: #000099;
}
.dashboardTitleGreen
{
    color: #009900;
}

.chartCanvas{
    width: 100%;
} 
.chartsContainer p:not(:last-child) {
  margin: 0 0 20px;
}
.chartsContainer section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}
.chartsContainer text {
    text-decoration: none !important;
}

.chartsContainer{
    border:1px #c1c1c1 solid; 
    overflow:hidden; 
    background-color:#FFF;
    height: 400px;
}
.top-title
{
    text-align:center;
    color:#808080;
    font-weight: bold;
    size: 26px;
    font-size: 26px;
}
.top-card-footer
{
    text-align:center;
    font-weight: bold;
}
.top-card-category-sml
{
    height:25px;
    overflow:hidden;
    text-align:center;
    font-size:12px;
}
.chartsContainerSmall{
    border:1px #c1c1c1 solid; 
    overflow:hidden; 
    background-color:#FFF;
    padding:5px;
    height: 170px;
}        
.mainPage{
    margin-bottom: 0px;
    background: none;
    box-shadow: 0 0 0 rgba(0,0,0,0.08);
}

.dashboardTitle {
    padding-left:10px;
}    
.dashboardPanel {
   /*background-colors:#fff;*/
}
.dashboardPanelDark {
   background-color:rgba(80, 80, 80, .5);
  filter: alpha(opacity=70);
}   
.dashboardBigTitle{
        font-size:28px;
}
.card-footer {
 padding:.75rem 1.25rem;
 background-color:rgba(0,0,0,.03);
 border-top:1px solid rgba(0,0,0,.125)
}
.box
{
   color:#fff; 
    border-radius: 5px;
    color:#FFF;
    word-wrap:break-word;
    overflow:hidden; 
}
.box1
{
    background-color:#B22222;
}
.box2
{
     background-color:#B30101;
}
.box3
{
     background-color:#E61D2B;
}
.box4
{
     background-color:#610000;
}
.box5
{
     background-color:#960101;
}
.box6
{
     background-color:#B30101;
}
.box7
{
     background-color:#D30202;
}
.box8
{
     background-color:#616161;
}
.box9
{
     background-color:#DF0404;
}
.box10
{
     background-color:#EA1C1C;
}
.box11
{
     background-color:#E73434;
}
.box12
{
     background-color:#fE8C8C;
}
.box13
{
     background-color:#FdA4A4;
}

.outlet_missed
{
     background-color:#DF0404;
}
.outlet_without_new_order
{
     background-color:#A6D96A;
}
.outlet_new_order
{
     background-color:#1A9641;
}
.outlet_pending
{
     background-color:#FFFFBF;
}
.outlet_exception
{
     background-color:#FDAE61;
}
#employee_breakdown
{    
     background-color:#FFFFFF;
}
#employee_breakdown_charts
{
    background-color:#f0f2f4;
    margin-top:5px;
}
.top-card-title
{
    text-align:center;
    color:#808080;
    font-weight: bold;
}
.top-card-title-sml
{
    text-align:center;
    color:#808080;
    font-weight: bold;
    font-size:8px;
}
.top-title
{
    text-align:center;
    color:#808080;
    font-weight: bold;
    size: 26px;
    font-size: 26px;
}
.top-card-footer
{
    text-align:center;
    font-weight: bold;
}
.card-category
{
    height:50px;
    overflow:hidden;
    padding-top:10px;
    text-align:center;
}
.top-card-category-sml
{
    height:25px;
    overflow:hidden;
    text-align:center;
    font-size:12px;
}
.card-title
{
    padding:3px;
    font-size:35px;
    width:200px;
    float:left;
    margin-bottom:.75rem;
} 
.stats{
    font-size:20px;
}         
.col-lg-2
{
    width: 14%;
}
.column
{
    position:relative;
    float:left;
}

.circle-chart__circle {
            transform: rotate(-90deg);
            transform-origin: center;
            margin-top:-10px
        }
        .doughnut_inside {
            position:relative; 
            margin-bottom:-110px; 
            margin-top:50px; 
            text-align:center;
            vertical-align:middle;
        }
        .redTitleBar{
            background-color:#cf000f; 
            color:#fff; 
            width:100%; 
            font-size:12px; 
            text-align:center;
        }
        .whiteTitleBar{
            background-color:#ffffff; 
            color:#345; 
            width:100%; 
            font-size:12px; 
            text-align:center;
        }
        #static, .static {
            padding:0px;
        }
        .icon-big  {
            font-size:80px;
            margin-top:40px;
            opacity:0.3;
            color:#FFFFFF;
            position:absolute;
                left:105px;
        }   
        .stats{
            font-size:20px;
        }  
        .col-lg-2
        {
                max-width:205px;
        }

        .dashboardTitle {
                padding-left:10px;
        }    
        #result {
            text-align: right;
            color: gray;
            min-height: 2em;
        }
        #tbody-sparkline tr td 
        {
            overflow: visible !important; 
        }
        #table-sparkline {
            margin: 0 auto;
            border-collapse: collapse;
        }
        th {
            font-weight: bold;
            text-align: left;
        }
        .highcharts-tooltip>span {
            background: white;
            border: 1px solid silver;
            border-radius: 3px;
            box-shadow: 1px 1px 2px #888;
            padding: 8px;
        }        
        .numberCirclebig {
          border-radius: 50%;
          behavior: url(PIE.htc);
          /* remove if you don't care about IE8 */
          width: 38px;
          height: 38px;
          padding: 3px;
          background: #fff;
          border: 2px solid #666;
          color: #666;
          text-align: center;
          font: 16px Arial, sans-serif;
        }
        .numberCircleMedium {
          border-radius: 50%;
          behavior: url(PIE.htc);
          /* remove if you don't care about IE8 */
          width: 27px;
          height: 27px;
          padding: 2px;
          background: #fff;
          border: 2px solid #666;
          color: #666;
          text-align: center;
          font: 12px Arial, sans-serif;
        }
        .numberCircle {
          border-radius: 50%;
          behavior: url(PIE.htc);
          /* remove if you don't care about IE8 */
          width: 18px;
          height: 18px;
          padding: 2px;
          background: #fff;
          border: 2px solid #666;
          color: #606060;
          text-align: center;
          font: 16px Arial, sans-serif;
        } 
        .labelPercentage {
          font-size: x-large;
        }

        .labelText {
          font-size: small;
          color: #808080;
        }

        .labelContainer {
          display: block;
          text-align: center;
          width: 100px;
          font-family: Helvetica;
        }

        .circleRed {
          background: #FF4136;
          margin:5px 5px 0px 5px;
          float:left;
          width: 13px;
          height: 13px;
          border-radius: 50%;
        }
        .circleRingRed {
          margin:0 auto;
          background-color:#FFFFFF;
          width: 160px;
          vertical-align:middle;
          display: table-cell;
          height: 160px;
          border-radius: 50%;
          color:#808080;
          border: 35px solid #cf000f;
        }

        .circleGrey {
          background: #cccccc;
          margin:5px 5px 0px 5px;
          float:left;
          width: 13px;
          height: 13px;
          border-radius: 50%;
        }
        .chartTabs
        {
            z-index:4000; 
            cursor:pointer;
            padding:10px; 
            background-color:#FFF; 
            border:1px solid #c1c1c1; 
            float:left;
        }
        .tabOrders{
          padding-left:3px;
        }
        .grey_text_label {
            color:#345;  
            vertical-align: middle; 
            float:left;
        }
        #numbers
        {
            align-content: center;
            text-align: center;
        }
        .btn-grey
        {
            background-color:#808080;
            color:#ffffff;
            min-width: 120px;
        }
        .btn-grey{color:#fff;background-color:#909090;border-color:#789}
        .btn-grey.focus,.btn-grey:focus{color:#fff;background-color:#707070;border-color:#789}
        .btn-grey:hover{color:#fff;background-color:#707070;border-color:#789}