/***********LEFT SIDEBAR**************/
#bip-sidebar {
    box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 300px;
    background: #6C2621;
    background: #303946;
    border-right: 1px solid #e6e6e6;
    z-index: 1000;
    overflow-y: auto;
    height: 100%;
    padding-bottom: 30px;
}

#bip-content-wrapper {
    margin: 0px 15px 0 315px;
}

@media (max-width: 767px) {
    #bip-sidebar {
        top: 58px;
    }
}


/*************LEFT SIDEBAR -MENU***************/
#bip-menu-wrapper {
    padding: 0;
    margin-bottom: 60px;
    margin-top: 5px;
    margin-top: 1px;
}

    #bip-menu-wrapper > li {
        position: relative;
        line-height: 0px;
    }

        #bip-menu-wrapper > li > a {
            color: white;
            position: relative;
            display: block;
            text-decoration: none;
            font-size: 13px;
            padding-left: 0;
            border-bottom: dotted 1px #303946;
            height: 45px;
            display: table;
            width: 100%;
        }

            #bip-menu-wrapper > li > a .title {
                margin-left: 65px;
                display: block;
                padding-left: 6px;
                opacity: 1;
                text-shadow: none;
                -webkit-transition: all 0.5s cubic-bezier(0.15, 0.99, 0.18, 1.01);
                -o-transition: all 0.5s cubic-bezier(0.15, 0.99, 0.18, 1.01);
                transition: all 0.5s cubic-bezier(0.15, 0.99, 0.18, 1.01);
                color: white;
                display: table-cell;
                vertical-align: middle;
                padding-left: 65px;
            }

            #bip-menu-wrapper > li > a:hover {
                background-color: #262d37;
            }

                #bip-menu-wrapper > li > a:hover .menu-icon {
                    background-color: white;
                    color: #262d37;
                }

                #bip-menu-wrapper > li > a:hover .title {
                    color: white;
                }

        #bip-menu-wrapper > li.active > a {
            background-color: #262d37;
        }

    #bip-menu-wrapper li.active .menu-icon,
    #bip-menu-wrapper li.active .menu-icon:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #303946;
    }

    #bip-menu-wrapper li.active > a .title {
        color: white;
        font-weight: 500;
    }

    #bip-menu-wrapper > li ul > li > a:hover {
        background-color: #7F8FA5;
    }


.menu-icon .fa:first-child, .menu-icon .md:first-child, .menu-icon .glyphicon:first-child {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 40px;
    width: 1em;
}

.menu-icon {
    position: absolute;
    left: 12px;
    top: 2px;
    width: 40px;
    height: 40px;
    color: #535858;
    font-size: 18px;
    overflow: hidden;
    border-radius: 999px;
    -webkit-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
    color: white;
}

.menu-icon-active {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0aa89e;
}

.menubar-visible #bip-menu-wrapper li .title {
    left: 0;
    opacity: 1;
}

#bip-menu-wrapper > li.opened > a {
    color: white;
    position: relative;
    display: block;
    text-decoration: none;
    font-size: 13px;
    padding-left: 0;
    border-bottom: none;
    height: 45px;
    display: table;
    width: 100%;
}

#bip-menu-wrapper > li ul {
    padding: 0;
}

    #bip-menu-wrapper > li ul > li {
        position: relative;
    }

        #bip-menu-wrapper > li ul > li > a {
            position: relative;
            display: block;
            text-decoration: none;
            padding: 7px 17px;
            font-size: 12px;
            /*line-height: normal;*/
            border-radius: 0;
            padding-left: 57px;
            color: #ddd;
            line-height: 19px;
        }

#bip-menu-wrapper li ul li:before {
    content: "";
}

#bip-menu-wrapper li ul {
    /*display:none;*/
}

    #bip-menu-wrapper li ul > a {
        height: 45px;
    }

#bip-menu-wrapper > li ul > li > a::before {
    content: "";
    border: 1px solid #8b929a;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    float: left;
    margin-top: 6px;
    left: 26px;
    position: absolute;
    z-index: 12;
    background-color: #1c2128;
    transition: border-color;
    transition-duration: 0.4s;
}

#bip-menu-wrapper > li ul > li > a:hover::before {
    content: "";
    border: 1px solid #1c2128;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    float: left;
    margin-top: 6px;
    left: 26px;
    position: absolute;
    z-index: 12;
    background-color: #8b929a;
    transition: border-color;
    transition-duration: 0.4s;
}


#bip-menu-wrapper > li ul > li > a::after {
    content: "";
    height: 54px;
    width: 1px;
    background-color: #8b929a;
    position: absolute;
    top: 0;
    left: 29px;
    z-index: 10;
}


#bip-menu-wrapper > li ul > li:last-child a:after {
    height: 18px;
}


#bip-menu-wrapper li ul li:first-child:before {
    /*content: "";
    left: 30px;
    top: 0px;
    bottom: 16px;
    position: absolute;
    display: block;
    width: 1px;
    border-left: 1px dashed white;
    z-index: 1;*/
}


#bip-menu-wrapper li ul li:last-child:before {
    /*content: "";
    left: 30px;
    top: 15px;
    bottom: 16px;
    position: absolute;
    display: block;
    width: 1px;
    border-left: 1px dashed white;
    z-index: 1;*/
}


.cursorpointer{
    cursor:pointer;
}





/*uniLogo Indicator*/
@keyframes rotate1 {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes rotate2 {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

#bip_indicatorLoader {
  background: rgba(0, 0, 0, 0.51);
  height: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000000000;
  display: none;
}

.indicatorLoader .indicator-message {
  position: absolute;
  margin: auto;
  top: 10%;
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.79);
  border: 0px solid;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.57);
}

.indicatorLoaderContainer img {
  width: 85%;
  height: 85%;
  display: block;
  margin: 0 auto;
  top: 7px;
  position: relative;
  /* opacity: 0.7; */
}

.indicatorLoaderContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -60px 0 0 -60px;
  /* background: #fff; */
  width: 100px;
  height: 100px;
  border-radius: 100%;
  /* border: 10px solid #262d37; */
}

  .indicatorLoaderContainer:after {
    content: '';
    background: trasparent;
    width: 110%;
    height: 110%;
    position: absolute;
    border-radius: 100%;
    top: -15%;
    left: -15%;
    opacity: 0.7;
    /*box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;*/
    box-shadow: rgba(255, 255, 255, 0.6) 7px 3px 3px -3px;
    animation: rotate1 2s infinite linear;
  }



.indicatorLoaderContainer2 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -60px 0 0 -60px;
  background: #fff;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 5px solid #4F5154;
  box-shadow: 0px 5px 10px rgba(76, 74, 74, 0.64);
  background: url(/images/uniLogo.png);
  background-position: center;
  background-size: cover;
}

  .indicatorLoaderContainer2:after {
    content: '';
    background: trasparent;
    width: 140%;
    height: 140%;
    position: absolute;
    border-radius: 100%;
    top: -20%;
    left: -20%;
    opacity: 0.7;
    box-shadow: rgba(255, 255, 255, 0.6) 7px 3px 3px -3px;
    animation: rotate2 2s infinite linear;
    animation-direction: reverse;
  }

/*END of uniLogo Indicator*/





.mapcontainer {
    height: 400px;
    position: relative;
}

@media (max-width: 991px) {
    .mapcontainer {
        height: 200px;
    }
}

li.boxcard {
    border: solid 1px #ddd;
    border-radius: 3px;
    padding: 5px;
    margin-bottom: 5px;
}

    li.boxcard i {
        width: 35px;
        height: 35px;
        border: solid 1px #535858;
        border-radius: 90px;
        line-height: 30px;
        background-color: #303946;
        color: white;
    }

    li.boxcard:hover {
        background-color: #7F8FA5;
        color: white;
        -webkit-box-shadow: 0px 4px 20px 1px rgba(171,171,196,0.75);
        -moz-box-shadow: 0px 4px 20px 1px rgba(171,171,196,0.75);
        box-shadow: 0px 4px 20px 1px rgba(171,171,196,0.75);
        cursor: pointer;
    }

/*.chzn-container, .chzn-container .chzn-container-single {
    width: 100% !important;
}*/

.markerstyle {
    font-size: 25px;
    /* border: solid 1px black; */
    height: 35px;
    width: 35px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    border-radius: 90px;
    background-color: #262d37;
    color: white;
}


.markerstylebig1000 {
    background-color: #0074d9;
}

.markerstylebw500-1000 {
    background-color: #AF689A;
}

.markerstylebw250-500 {
    /*background-color:#BFC9AD;*/
    background-color: #f1b658;
}

.markerstylebw100-250{
    background-color: #7d337f;
}


.markerstyleless100 {
    background-color: #D4DD74;
}


.fillstylebig1000 {
    fill: #0074d9;
}

.fillstylebw500-1000 {
    fill: #AF689A;
}

.fillstylebw100-250 {
    fill: #7d337f;
}

.fillstylebw250-500 {
    /*fill:#BFC9AD;*/
    fill: #f1b658;
}

.fillstyleless100 {
    fill: #D4DD74 !important;
}




.toolbarbutton {
    border: solid 1px #ddd;
    border-radius: 90px;
    width: 55px;
    /* font-size: 12px; */
    position: relative;
    margin-left: 10px;
    line-height: 50px;
    height: 50px;
}


    .toolbarbutton i {
        position: absolute;
        font-size: 22px;
        margin: 0;
        left: 16px;
        top: 14px;
    }

.rowwithbgimage {
    background-image: url('../images/pnlheader-back.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}

.panel-bip > .panel-heading h1, .panel-bip > .panel-heading .h1 {
    margin-top: -10px !important;
    margin-bottom: 0;
    font-size: 70px;
    margin-bottom: 0;
}



/******************************POPULATION CHART************************************/
.populationChart {
    margin: 0 25px;
}

    .populationChart .singleBar {
        width: 16%;
        display: block;
        margin: 0 2% 0% 2%;
        float: left;
    }

        .populationChart .singleBar .bar {
            position: relative;
            height: 250px;
            background: #f9f9f9;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

            .populationChart .singleBar .bar .value {
                position: absolute;
                bottom: 0;
                width: 100%;
                background-color: #505D6F;
                background: #9A082F;
                color: #fff;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                overflow: visible !important;
            }

                .populationChart .singleBar .bar .value span {
                    position: absolute;
                    font-size: 12px;
                    bottom: 0;
                    width: 100%;
                    height: 20px;
                    color: #fff;
                    text-shadow: 0px -1px 0px #FA603D, 0px 1px 0px #9A082F, 1px 0px 0px #9A082F, -1px 0px 0px #9A082F, -1px -1px 0px #9A082F,-1px 1px 0px #FA603D, 1px 1px 0px #9A082F, 1px -1px 0px #9A082F;
                    display: none;
                    text-align: center;
                }

        .populationChart .singleBar .title {
            margin-top: 5px;
            text-align: center;
            font-size: 11px;
        }
/******************************POPULATION CHART************************************/



.tableheader h5 {
    display: none;
}

/*******************************DONUT CHART*******************************/
.donutChartClass {
    width: 200px;
    float: left;
    margin: 6px;
}

.donutChartHeader {
    text-align: center;
    height: 35px;
    color: #747171;
    font-size: 12px;
}
/*******************************DONUT CHART*******************************/

hr.type_10 {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

.selectedMapIndicator {
    background-color: #7F8FA5;
    color: white;
    ;
    opacity: 0.8;
}

.mapTable tr {
    cursor: pointer;
}

/*.table-responsive {
overflow-x:scroll;
}*/

.pdzero {
    padding: 0 !important;
}

.mr15 {
    margin-right: 15px;
}

.ml5 {
    margin-left: 5px;
}

.subDetailsTable{
    padding:0 !important;
}

.selectedTableRow{
    background-color:#B4BECC !important;
}
.selectedTableRow:hover{
    background-color:#B4BECC !important;
}


.floating_btn {
    background-color: #F44336;
    width: 55px;
    height: 55px;
    border-radius: 100%;
    background: #651813;
    border: none;
    outline: none;
    color: white;
    font-size: 30px;
    box-shadow: 0 3px 6px white, 0 3px 6px rgba(0,0,0,0.23);
    transition: .3s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    position: absolute;
    /*top: 15px;*/
    bottom:-25px;
    right: 25px;
}
    .floating_btn:hover {
        box-shadow: 0 0px 1px white, 0 0px 7px white;
    }

    .floating_btn i{
        opacity:0.7;
    }




    @import url(https://fonts.googleapis.com/css?family=Open+Sans:100,400,300,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);
/*-----------------------------------------

Table of Contents:

General Layout Style
Page Title and Breadcrumb    
Typography
Page Loading Progress Bar (PACE)
Page Top Bar
Sidebar Main Menu 
Sidebar User Profile
Sidebar Fixed Bottom Graphs
Section or Content Box
Sortable / Drag n Drop panels(section boxes)
FORM ELEMENTS
BUTTONS
ICHECK (Checkboxes and Radios)
jQery UI Settings
Modals
Alert Notifications
Dropdown menu
Datepicker, Daterangepicker,  Datetimepicker & Colorpicker
Progress Bars
General Animation Settings
Tooltips
Popovers
Nestable list
Accordions
Tabs
UI Grid
UI Calendar
Timeline Centered Style
Timeline Left Aligned Style
Image Cropper
Pricing Tables 
Tocify
FAQ
Portfolio gallery
jVector Maps
Tables
Data Tables
Form Editors
DropZone File Uploader (Drag n Drop)
UI Icons
Team Members
Login and Registration Page - Transparent Background Style
Display Code Wrappers
List Group
Breadcrumbs
Pagination
Labels
Badges
UI AJAX TREE
Flot Charts
Easy PIE Charts
Sparkline Charts
Page Layout - Sidebar, Chat API toggle interactions
COLLAPSED MENU
CHAT API
CHAT API Windows
Mailbox
Rickshaw Graph Charts
Dashboard
Notification Widget (Dashboard)
Error pages 404, 505
UI Sliders
Typeahead Suggestions
UI Lockscreen
Form Validations
Form Wizard
Carousel
Visibility Animation in Elements (Viewport)
Widget - Tile Counter
Widget - Tile Progress widget 
Navigation Bars
Search page
Blogs
Invoice
Logo
Profile Page
Widget - To Do Task List
Widget - Social Media
Widget - Blogs
Widget - Sparkline Graphs
Widget - Vector Map
Widget - Weather
Widget - User Profile Tile
Form Spinners
UI Dropdowns
Mobile Menu Settings - Since 3.1
------------------------------------------
/*----------------------------------------
  General Layout Style
------------------------------------------*/

html {
    font-size: 100%;
    height: 100%;
    background-color: white;
    font-size:12px;
}

html.boxed{
    background: #E0E0E0;
}


body.boxed {
    margin: 0 5% !important;
    max-width: 90%;
    width: 90%;
    min-height: 100%;
    box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -o-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -ms-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -moz-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -webkit-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
}
body.boxed .page-topbar {
    max-width: 90%;
    width: 90%;
    margin-left: 5% !important;
}
/*body *{  vertical-align: top; }*/

.paddingLeft0 {
    padding-left: 0px;
}
.paddingRight0 {
    padding-right: 0px;
}
.bottom5 {
    margin-bottom: 5px;
}
.bottom10 {
    margin-bottom: 10px;
}
.bottom15 {
    margin-bottom: 15px;
}
.bottom30 {
    margin-bottom: 30px;
}
.bottom45 {
    margin-bottom: 45px;
}
.top15 {
    margin-top: 15px;
}
.right15 {
    margin-right: 15px;
}
.left15 {
    margin-left: 15px;
}

.padding-15{
    padding: 15px;
}

.padding-30{
    padding: 30px;
}
.marginBottom30{
    margin-bottom: 30px;
}
section.box.marginBottom0,
.marginBottom0{
    margin-bottom: 0px;
}

.page-container.container-fluid{
    padding: 0px;
}

.spacer20{
    height: 20px;
    width: 100%;
    display: block;
    clear:both;
}
.spacer10{
    height: 10px;
    width: 100%;
    display: block;
    clear:both;
}







/*----------------------------------------
  Sidebar Main Menu
------------------------------------------*/

.page-sidebar {
    height: auto;
    width: 260px;
    position: fixed;
    padding: 0px;
    background-color: #ffffff;
    margin-top: 60px;
    overflow: hidden;
    box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    -webkit-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    -moz-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    -o-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    -ms-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    min-height: 100%;
    height: auto;
}

.page-sidebar.fixedscroll {
    position: fixed;
}

.page-sidebar.pagescroll {
    position: absolute;
}

.fixedscroll #main-menu-wrapper{
    padding-top: 0px;
    overflow: hidden;
    position: relative;
}

#main-menu-wrapper ul {
    padding: 0px;
    margin: 0px;
    padding-left: 0px;
    list-style-type: none;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 14px;
}
#main-menu-wrapper ul.wraplist {
    padding-bottom: 0px;
    margin-top: -10px;
}
#main-menu-wrapper li ul.sub-menu {
    padding-left: 0px;
}
#main-menu-wrapper li ul.sub-menu ul.sub-menu {
    padding-left: 20px;
}
#main-menu-wrapper li ul.sub-menu {
    display: none;
    list-style-type: none;
    font-size: 14px;
    width: 100%;
}
#main-menu-wrapper li a {
    display: block;
    line-height: 42px;
    min-height: 42px;
    height: auto;
    color: #f1f1f1;
    color: #424242;
    text-decoration: none;
    padding-left: 5px;
    clear: both;
    border-left: 4px solid transparent;
    white-space: nowrap;
}
#main-menu-wrapper li .sub-menu a {
    line-height: 36px;
    min-height: 36px;
}
#main-menu-wrapper li .sub-menu a {
    color: rgba(174, 178, 183, 1.0);
    margin-bottom: 1px;
    padding-left: 55px;
    border-left: 4px solid transparent;
}
#main-menu-wrapper li.open .sub-menu a.active, #main-menu-wrapper li.open .sub-menu a:hover, #main-menu-wrapper li .sub-menu a:hover {
    background-color: rgba(33, 33, 33, 0.1);
    border-left: 4px solid #3F51B5;
}

#main-menu-wrapper li.open .sub-menu a{
    border-left: 4px solid transparent;
}

#main-menu-wrapper li a:hover {
    background-color: rgba(33, 33, 33, 0.1);
    border-left: 4px solid #3F51B5;
    /*color: #ffffff;*/
}
#main-menu-wrapper li.open a {
    background-color: rgba(33, 33, 33, 0.1);
    border-left: 4px solid #3F51B5;
}
#main-menu-wrapper li a:hover .arrow:before, #main-menu-wrapper li.open a .arrow:before {
    color: #757575;
}
#main-menu-wrapper li .sub-menu a:hover .arrow:before, #main-menu-wrapper li.open .sub-menu a .arrow:before {
    color: rgba(194, 198, 203, 0.65);
}
#main-menu-wrapper li.open .sub-menu a {
    background-color: transparent;
    color: #616161;
}
#main-menu-wrapper li a i {
    display: inline-block;
    width: 45px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    top: 0px;
    position: relative;
}
#main-menu-wrapper li a .arrow:before {
    float: right;
    margin-top: 1px;
    margin-right: 20px;
    display: inline;
    font-size: 16px;
    font-family: FontAwesome;
    height: auto;
    content: "\f104";
    font-weight: 300;
    text-shadow: none;
    color: #757575;
}
#main-menu-wrapper li.open a .arrow.open:before {
    content: "\f107";
}
#main-menu-wrapper li a .arrow {
    float: right;
    position: absolute;
    right: 0px;
}
#main-menu-wrapper .fa {
    font-size: 14px;
}

#main-menu-wrapper li .label{
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 3px 7px;
    float: right;
    margin: 15px 15px 0 0;
    position: absolute;
    right: 30px;
}

#main-menu-wrapper li .label.nosubmenu{
    right: 25px;
    margin-top: 13px;
}


.page-sidebar.chat_shift #main-menu-wrapper li .label,
.page-sidebar.collapseit #main-menu-wrapper li .label{
    display: none;
}

.page-sidebar.chat_shift #main-menu-wrapper li:hover .label,
.page-sidebar.collapseit #main-menu-wrapper li:hover .label{
    display: inline-block;
    margin-top: 13px;
    right: 0px;
}

#main-menu-wrapper .menusection{
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 40px;
    padding-left: 24px;
    margin: 10px 0 0px 0;
    color: #9e9e9e;
    text-transform: uppercase;
}

.page-sidebar.chat_shift #main-menu-wrapper .menusection, 
.page-sidebar.collapseit #main-menu-wrapper .menusection{
    color: transparent;
    height: 1px;
    background: rgba(33,33,33,0.1);
    width: 44px;
    overflow: hidden;
    margin: 10px 8px 10px 8px;
}

.page-sidebar.chat_shift #main-menu-wrapper .menusection:first-child, 
.page-sidebar.collapseit #main-menu-wrapper .menusection:first-child{
    background-color: transparent;
}

.page-sidebar .menustats{
    padding: 15px 15px 15px 20px;
}

.page-sidebar .menustats h5{
    font-size: 13px;
}

.page-sidebar .menustats .progress{
    height: 5px;
    background-color: #eeeeee;
    margin-bottom: 25px;
}

.page-sidebar.chat_shift .menustats, 
.page-sidebar.collapseit .menustats{
    content: " ";
    height: 50px;
    overflow: hidden;
    color: transparent;
    opacity: 0;
}



/*----------------------------------------
  Sidebar Fixed Bottom Graphs
------------------------------------------*/

.page-sidebar .project-info {
    position: relative;
    bottom: 0px;
    height: 40px;
    background-color: rgba(70, 70, 78, 1.0);
    width: 100%;
    display: block;
    overflow: hidden;
}
.page-sidebar .project-info .block1 {
    display: inline-block;
    height: 40px;
    padding: 8px 0 5px 30px;
}
.page-sidebar .project-info .block2 {
    display: inline-block;
    height: 40px;
    padding: 8px 0 5px 15px;
}
.page-sidebar .project-info .graph {
    float: left;
    width: 55px;
    padding: 5px 5px 5px 5px;
}
.page-sidebar .project-info .data {
    float: left;
    font-size: 10px;
    color: #aaaaaa;
    width: auto;
    white-space: nowrap;
    display: inline-block;
    padding-right: 5px;
}
.page-sidebar .project-info .data .title {
    display: block;
    line-height: 15px;
}
.page-sidebar .project-info .data .total {
    color: #dddddd;
    line-height: 12px;
    display: block;
    font-size: 11px;
}


#main-content, .page-chatapi, .page-topbar, .page-sidebar, .page-topbar .logo-area, .page-topbar .quick-area .pull-right, .collapse-wraplist, .profile-info, .wraplist, .chatapi-windows {
    -webkit-transition: 600ms;
    -moz-transition: 600ms;
    -o-transition: 600ms;
    transition: 600ms;
}

.main-wrapper{
    margin-top:60px;
    display:inline-block;
    width:100%;
    padding:15px 15px 0 15px;
    margin-left: 0px;
    margin-right: 0px;
}


.page-sidebar.collapseit {
    width: 60px;
    margin-left: 0px !important;
    z-index: 99;
}
.page-sidebar.chat_shift {
    width: 60px;
    margin-left: 0px !important;
    z-index: 99;
}
#main-content {
    margin-left: 260px;
    display: block;
}
#main-content.hor_menu {
    margin-left: 0px;
}
#main-content.chat_shift {
    margin-left: 60px !important;
    margin-right: 260px !important;
}
#main-content.sidebar_shift {
    margin-left: 60px;
    margin-right: 0px;
}
#main-content.sidebar_shift.hor_menu {
    margin-left: 0px;
}
.page-topbar.chat_shift {
    margin-left: -200px !important;
}
.page-topbar.chat_shift .quick-area .pull-right {
    margin-right: 60px !important;
}
/*.page-topbar.chat_shift .chat-toggle-wrapper{
  background-color: #333333;
}

.page-topbar .quick-area .pull-right .info-menu{
  padding: 0px;
}
*/

.page-topbar.sidebar_shift .logo-area {
    width: 60px;
}
.page-topbar.chat_shift .logo-area {
    width: 260px;
}

.boxed .page-topbar.chat_shift .logo-area{
    width: 60px;
}

.page-chatapi.hideit {
    width: 0px;
    height: 658px;
}
.page-chatapi.showit {
    width: 260px;
    height: 100%;
}
.page-chatapi.hideit .contact-list .user-status{
    display: none;
}

.page-chatapi {
    height: auto;
    position: fixed;
    padding: 0px;
    background-color: #ffffff;
    margin-top: 0px;
    top: 0px;
    right: 0px;
    z-index: 9999;
    box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    -webkit-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    -moz-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    -o-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    -ms-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
}

.boxed .page-chatapi{
    right: 5%;
    overflow: hidden;
}

.boxed .page-topbar.chat_shift{
    padding-right: 240px;
}

.chatapi-windows {
    position: fixed;
    bottom: 0px;
    right: 260px;
    height: 300px;
    max-height: 300px;
    display: inline-block;
    z-index: 9999;
}

.boxed .chatapi-windows{
    right: 370px;
}
/*collapsed menu and chat open states*/

.page-topbar.sidebar_shift .logo-area {
    background-color: #3f51b5;
}
.page-topbar.chat_shift .logo-area {
    background-color: #3f51b5;
}
.chatapi-windows.hideit {
    bottom: -300px;
}
.chatapi-windows.showit {
    height: 300px;
    bottom: 0px !important;
}


.page-sidebar.chat_shift .wraplist, .page-sidebar.collapseit .wraplist {
    background-color: #ffffff;
    width: 60px;
}
.page-sidebar.chat_shift .wraplist .sub-menu, .page-sidebar.collapseit .wraplist .sub-menu {
    display: none;
}
.page-sidebar.chat_shift .wraplist li, .page-sidebar.collapseit .wraplist li {
    position: relative !important;
}
.page-sidebar.chat_shift .wraplist li .title, .page-sidebar.collapseit .wraplist li .title, .page-sidebar.chat_shift .wraplist li .arrow, .page-sidebar.collapseit .wraplist li .arrow {
    display: none;
}
.page-sidebar.chat_shift .wraplist li:hover, .page-sidebar.collapseit .wraplist li:hover {
    background: rgba(33,33,33,0.1);
}
.page-sidebar.chat_shift .wraplist .sub-menu li:hover, .page-sidebar.collapseit .wraplist .sub-menu li:hover {
    background: transparent;
}
.page-sidebar.chat_shift #main-menu-wrapper .wraplist .sub-menu li a:hover, .page-sidebar.collapseit #main-menu-wrapper .wraplist .sub-menu li a:hover {
    background-color: #212026;
    border-left: 3px solid #3f51b5;
    color: rgba(174, 178, 183, 1.0);
}
.page-sidebar.chat_shift #main-menu-wrapper .wraplist .sub-menu li.open a, .page-sidebar.collapseit #main-menu-wrapper .wraplist .sub-menu li.open a, .page-sidebar.chat_shift #main-menu-wrapper .wraplist .sub-menu li.open .sub-menu a, .page-sidebar.collapseit #main-menu-wrapper .wraplist .sub-menu li.open .sub-menu a {
    background-color: transparent;
    border-left: 3px solid transparent;
    color: rgba(174, 178, 183, 1.0);
}
.page-sidebar.chat_shift .profile-info, .page-sidebar.collapseit .profile-info {
    width: 60px;
    margin: 0;
    padding: 10px 12px 25px 0px;
}
.page-sidebar.chat_shift .profile-info .profile-image, .page-sidebar.collapseit .profile-info .profile-image {
    width: 100%;
    padding: 0;
}
.page-sidebar.chat_shift .profile-info .profile-image img, .page-sidebar.collapseit .profile-info .profile-image img {
    height: 40px;
    width: 40px;
    top: 10px;
}
.page-sidebar.chat_shift .profile-details, .page-sidebar.collapseit .profile-details {
    display: none;
}
.page-sidebar.chat_shift .project-info, .page-sidebar.collapseit .project-info {
    display: none;
}

.page-sidebar.chat_shift #main-menu-wrapper .wraplist li:hover .sub-menu, .page-sidebar.collapseit #main-menu-wrapper .wraplist li:hover .sub-menu {
    display: block;
}
.page-sidebar.chat_shift #main-menu-wrapper .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit #main-menu-wrapper .wraplist li:hover .sub-menu .sub-menu {
    display: none;
}
.page-sidebar.chat_shift .wraplist li:hover .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu {
    position: absolute;
    left: 60px;
    top: 0px;
    width: 200px !important;
    background: #eeeeee;
    box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    -webkit-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    -moz-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    -o-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    -ms-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
}

.page-sidebar.chat_shift .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu .sub-menu{
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
}

.page-sidebar.chat_shift .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu .sub-menu {
    position: relative;
    left: 0px;
    top: 0px;
    width: auto !important;
    background: #ffffff;
}
.page-sidebar.chat_shift .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu .sub-menu {
    position: relative;
    margin-top: 0px;
}
.page-sidebar.chat_shift, .page-sidebar.collapseit, .page-sidebar.chat_shift #main-menu-wrapper, .page-sidebar.collapseit #main-menu-wrapper {
    overflow: visible !important;
}
.page-sidebar.chat_shift .ps-scrollbar-y-rail, .page-sidebar.collapseit .ps-scrollbar-y-rail {
    display: none;
}
.page-sidebar.collapseit {
    position: fixed !important;
    margin-top:0px;
}
.page-sidebar.collapseit #main-menu-wrapper, .page-sidebar.chat_shift #main-menu-wrapper .wraplist, .page-sidebar.collapseit #main-menu-wrapper .wraplist {
    /*height: 3000px !important;*/
}
.page-sidebar.chat_shift #main-menu-wrapper, .page-sidebar.collapseit #main-menu-wrapper {
    padding-top: 0px;
    /*top: -79px;*/
}
.page-sidebar.chat_shift .wraplist li:hover .title, .page-sidebar.collapseit .wraplist li:hover .title {
    float: left;
    padding-left: 15px;
    width: 196px;
    background: transparent;
    display: inline-block !important;
    position: relative;
    z-index: 2;
}
.page-sidebar.chat_shift .wraplist li:hover .sub-menu .title, .page-sidebar.collapseit .wraplist li:hover .sub-menu .title {
    padding-left: 0px;
    background: transparent;
    display: inline-block;
    width: auto;
}
.page-sidebar.chat_shift .wraplist li:hover .sub-menu .arrow, .page-sidebar.collapseit .wraplist li:hover .sub-menu .arrow {
    display: inline-block;
}
.page-sidebar.chat_shift #main-menu-wrapper .wraplist li .fa, .page-sidebar.collapseit #main-menu-wrapper .wraplist li .fa {
    float: left;
    font-size: 17px;
    height: 42px;
    line-height: 42px;
    width: 53px;
    top: 0px;
}
.page-sidebar.chat_shift #main-menu-wrapper .wraplist li:hover a, .page-sidebar.collapseit #main-menu-wrapper .wraplist li:hover a {
    width: 260px;
    background: #ffffff;
    box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    -webkit-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    -moz-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    -o-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    -ms-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    position: relative;
    z-index: 2;
}
.page-sidebar.chat_shift #main-menu-wrapper .wraplist li a, .page-sidebar.collapseit #main-menu-wrapper .wraplist li a {
    padding-left: 0px;
}
.page-sidebar.chat_shift #main-menu-wrapper .wraplist li .sub-menu a, .page-sidebar.collapseit #main-menu-wrapper .wraplist li .sub-menu a {
    padding-left: 20px;
}
.page-sidebar.chat_shift .wraplist li:hover .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu {
    padding-top: 42px !important;
    padding-left: 0px !important;
    background: #ffffff;
}



.page-sidebar.chat_shift .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu .sub-menu {
    margin-top: 0px !important;
    padding-left: 0px !important;
    padding-top: 0px !important;
    display: none;
    left: 0px;
}
.page-sidebar.chat_shift #main-menu-wrapper .wraplist li:hover .sub-menu a, .page-sidebar.collapseit #main-menu-wrapper .wraplist li:hover .sub-menu a {
    width: 200px;
    color: #616161;
    background: #ffffff;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    

}



.dataTables_wrapper .dataTables_paginate .paginate_button{
  padding:0 !important;
}

.pagination>li>a, .pagination>li>span{
  padding:6px 7px;
}