@charset "utf-8";
 
/* ========================================================================
 * IMPORTS AND BODY
 * ======================================================================== */

/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
@import url("font-awesome.css");
@import url("entypo.css");

/* Vendors */
@import url("vendors/datatables/datables.css");
@import url("vendors/steps/jquery.steps.css");
@import url("vendors/sumernote/summernote.css");
@import url("vendors/animate/animate.css");
@import url("bootstrap.min.css");
@import url("vendors/fullcalendar/fullcalendar.css");

html,
body {
    background-color: #33383D;
    color: #555555;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 100%;
    margin: 0;
    padding:0;
    width: 100%!important;
}

body > .row {margin-left: 0; margin-right: 0;}

/* ========================================================================
 * TYPOGRAPHY
 * ======================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: inherit;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    line-height: 1em;
    margin-top: 10px;
    text-shadow: 0 0 1px rgba(51, 51, 51, 0.2);
}

h1, h2, h3,
.page-header h1,
.page-header h2,
.page-header h3 {letter-spacing: -1px;}

a {
    color: #3b8dbd;
    text-decoration: none;
    -webkit-transition: All 0.25s ease;
    -moz-transition: All 0.25s ease;
    -ms-transition: All 0.25s ease;
    -o-transition: All 0.25s ease;
    transition: All 0.25s ease;
}

a:hover, a:focus {color: #33383D; text-decoration: none;}

.page-header {margin-top: 10px; border-bottom: 5px solid #DDDDDB;}

.page-header h1 {margin: 0; color: #858689; text-transform: uppercase;}
.page-header h2, .page-header h3 {margin: 0;}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
    color: #949FB2;
    font-size: 75%;
    font-weight: 400;
    letter-spacing:0;
    text-transform: none;
}

h1 small:before,
h2 small:before,
h3 small:before,
h4 small:before,
h5 small:before,
h6 small:before,
.h1 small:before,
.h2 small:before,
.h3 small:before,
.h4 small:before,
.h5 small:before,
.h6 small:before,
h1 .small:before,
h2 .small:before,
h3 .small:before,
h4 .small:before,
h5 .small:before,
h6 .small:before,
.h1 .small:before,
.h2 .small:before,
.h3 .small:before,
.h4 .small:before,
.h5 .small:before,
.h6 .small:before {content: "\0000a0 \7c \0000a0";}

h1.colossal {font-size: 3.5em; letter-spacing: -2px;}
h1.colossal i {font-size: 50%; vertical-align: middle; padding: 0 5px;}

p a {text-decoration: underline;}

a.btn {text-decoration: none;}

.label {text-transform: uppercase; font-weight: 700}

blockquote {border-left: 5px solid #C0C2C7;}

.dropcap {
    background: #F1F1F1;
    color: #555555;
    display: block;
    float: left;
    font-size: 50px;
    font-weight: 700;
    line-height: 40px;
    margin-right: 10px;
    padding: 8px;
    padding-bottom: 12px;
}

.dark-block {
    background: #555555;
    color: #FFFFFF;
    font-size: .95em;
    margin-left: 10px;
    padding: 20px;
    width: 150px;
}

.scissors-block {
    border: 2px dotted #999999;
    border-radius: 5px;
    margin: 20px 15px;
    padding: 20px;
    position: relative;
}

.scissors-block:before {
    background: #FFFFFF;
    color: #999999;
    content: "\f0c4";
    font-family: 'FontAwesome';
    font-size: 15px;
    height: 30px;
    position: absolute;
    right: 49%;
    text-align: center;
    top: -20px;
    width: 30px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.scissors-block:after {
    background: #FFFFFF;
    bottom: -20px;
    color: #999999;
    content: "\f0c4";
    font-family: 'FontAwesome';
    font-size: 15px;
    height: 30px;
    position: absolute;
    right: 49%;
    text-align: center;
    width: 30px;
}

.icon-block {
    display: block;
    float: left;
    width: 120px;
    text-align: center;
    height: 120px;
    background: #F1F1F1;
    border-radius: 50%;
    padding: 20px;
    font-style: italic;
    margin: 0 10px;
    color: #999999;
}

/* ========================================================================
 * 4. ORB WIDGETS
 * ======================================================================== */
 
/* Main */
.powerwidget {
    margin: 0 0 20px 0;
    position: relative;
    border-radius: 3px;
    padding: 0;
}

/* Header */
.powerwidget > header {height: 40px; padding: 0 0 0 10px; line-height: 40px;}

.ui-sortable .powerwidget-sortable > header {cursor: move;}

.powerwidget > header h2 {
    height: 100%;
    letter-spacing: normal;
    width: auto;
    float: left;
    font-size: 1.2em;
    position: relative;
    margin: 0;
    line-height: 40px;
}

.powerwidget > header .powerwidget-icon {
    width: 16px;
    height: 16px;
    float: left;
    margin: 12px 5px 0 0;
    display: block;
    zoom: 1;
    z-index: 4000;
    text-align: center;
    line-height: 16px;
    font-size: 13px;
}

.powerwidget-ctrls {
    width: auto;
    float: right;
    padding: 10px 2px 0 0;
    margin: 0;
}

.powerwidget-ctrls .button-icon {
    float: left;
    position: relative;
    margin: 0 5px 5px 0;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
}

.powerwidget-ctrls .button-icon i {width: 18px; text-align: center;}
.powerwidget-ctrls .button-icon:hover { text-decoration: none; }

/* Content */
.powerwidget > div {
    float: left;
    width: 100%;
    min-height: 20px;
    position: relative;
    margin: 0;
}

.powerwidget .inner-spacer {
    padding: 10px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.powerwidget .inner-spacer-zero-padding {padding: 0;}

/* Edit box */
.powerwidget-editbox input {width: 85%;}

.powerwidget-editbox {display: none; padding: 10px; padding-bottom: 0; background-color: #969FA1;}

.powerwidget-editbox div {width: 100%; float: left; margin-bottom: 10px;}

.powerwidget-editbox label {width: 15%; color: #FFFFFF; float: left; line-height: 25px;}

.powerwidget-editbox span {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    float: left;
    margin: 7px 5px;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

.powerwidget-editbox span:hover {box-shadow: 0 0 0 4px rgba(0,0,0,.1);}

/* Timestamp */
.powerwidget-timestamp {font-size: .9em;}

/* Helpers */
.powerwidget-placeholder {
    border-radius: 3px;
    margin-bottom: 20px;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Fullscreen */
body.nooverflow {overflow: hidden; position: fixed;}

#powerwidget-fullscreen-mode {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}

#powerwidget-fullscreen-mode .powerwidget {margin: 0; border-radius: 0;}
#powerwidget-fullscreen-mode .powerwidget > div {overflow-y: scroll; border-radius: 0;}

#powerwidget-fullscreen-mode > div > header { cursor: default; }

/* Styling */
.powerwidget {background-color: #C4C5C5; border-radius: 3px;}

.powerwidget > header, .powerwidget > header small { color: #FFFFFF; }

.powerwidget-ctrls { margin-right: 5px; }

.powerwidget-ctrls .button-icon {font-size: .9em; color: #FFFFFF; margin: 1px;}

.powerwidget-loader {
    -webkit-animation: spin 3s infinite linear;
    -moz-animation: spin 3s infinite linear;
    -o-animation: spin 3s infinite linear;
    animation: spin 3s infinite linear;
    font-size: 13px;
    margin-right: 5px;
    float: right;
    line-height: 38px;
    display: none;
}

.powerwidget-loader:before {font-family: FontAwesome; content: "\f1ce";}

.powerwidget > div {background-color: #FFFFFF;}

.powerwidget-placeholder {background: url(../images/bg-stripped.png);}

/* Clearfix */
.powerwidget:before,
.powerwidget:after,
.powerwidget > div:before,
.powerwidget > div:after,
.inner-spacer:before,
.inner-spacer:after,
.powerwidget-editbox:before,
.powerwidget-editbox:after,
.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
}

.powerwidget:after,
.powerwidget > div:after,
.inner-spacer:after,
.powerwidget-editbox:after,
.clearfix:after {clear: both;}

.powerwidget,
.powerwidget > div,
.inner-spacer:after,
.powerwidget-editbox,
.clearfix {zoom: 1;}


/* ========================================================================
 * Portlets
 * ======================================================================== */

.powerwidget-as-portlet .inner-spacer {padding-top: 0;}
.powerwidget-as-portlet .inner-spacer.nopadding {padding: 0;}

.portlet-big-icon {
    font-size: 5em;
    padding: 0;
    text-align: center;
    line-height: 0;
}

ul.portlet-bottom-block {
    list-style: none outside none;
    margin-top: 10px;
    padding: 0;
    padding-top: 4px;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

ul.portlet-bottom-block li {
    padding: 0px;
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;
    position: relative;
    background: rgba(0,0,0,.05);
    border: #F0F0ED solid 3px;
    border-right: 0;
}

ul.portlet-bottom-block li:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 8px 8px;
    border-color: #F0F0ED transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -8px;
    top: -8px;
    left: 50%;
}

ul.portlet-bottom-block li:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 9px 9px;
    border-color: #F0F0ED transparent;
    display: block;
    width: 0;
    z-index: 0;
    margin-left: -9px;
    top: -9px;
    left: 50%;
}

ul.portlet-bottom-block li strong {font-size: 1.8em; line-height: 25px; display: block}
ul.portlet-bottom-block li span {font-size: 0.75em; text-transform: uppercase; letter-spacing: 1px;}

ul.portlet-bottom-block li:first-child {border-left: transparent;}
ul.portlet-bottom-block li:last-child {border-right: transparent;}

.weather-current-city {background: url(http://placehold.it/650x150); background-size: cover; padding: 10px;}

.current-city {display: block; font-size: 1.2em; font-weight: 700;}
.current-temp {display: block; font-weight: 700; letter-spacing: -3px; font-size: 5em; line-height: 1.1em;}
.current-day {display: block; font-size: 1.2em; font-weight: 400;}
.current-day-icon {display: block; float: right; font-size: 1.2em; font-weight: 700;}

ul.days {list-style: none outside none; margin-top: 10px; padding: 0 10px;}
ul.days li {text-align: center; padding-bottom: 10px;}
ul.days li strong {font-size: 1.1em; text-transform: uppercase; line-height: 25px; display: block}
ul.days li span {display: block; letter-spacing: -1px; font-size: 1.9em}

.powerwidget-as-portlet .portlet-profile {
    position: absolute;
    text-transform: uppercase;
    left: 50%;
    display: block;
    width: 60%;
    color: #FFFFFF;
    top: 20px;
    margin-left: -30%;
    z-index: 5;
    text-align: center;
    padding: 10px;
}

.powerwidget-as-portlet .portlet-profile h1 {
    font-size: 2.3em;
    text-transform: none;
    letter-spacing: -1px;
    font-weight: 700;
    padding: 0;
    margin: 10px 0 5px;
}

.powerwidget-as-portlet .portlet-profile .user-img {
    margin: 0 auto;
    display: block;
    max-width: 120px;
}

.powerwidget-as-portlet .portlet-profile .user-img img {
    display: inline-block;
    max-width: 100%;
    padding: 6px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.6);
}

/* ========================================================================
 * Bootstrap Modal
 * ======================================================================== */

.modal {overflow: hidden; overflow-y: hidden;}

.modal-content {
    position: relative;
    border: 0;
    border: 0;
    border-radius: 6px;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    outline: none;
    -webkit-box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.1);
}

.modal-header {padding: 15px; border: 0; background: rgba(0, 0, 0, 0.05);}

.modal-header i {
    font-size: 4em;
    color: #FFFFFF;
    line-height: 80px;
    text-align: center;
    width: 80px;
    display: block;
    border-radius: 50%;
    height: 80px;
    margin: 0 auto;
    background: #969FA1;
}

.modal-header .close { margin-top: -2px; }

.modal-title {margin: 0; line-height: 1.42857143;}
.modal-body {position: relative; padding: 20px;}
.modal-footer {
    padding: 10px 20px 20px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-top: 15px;
    text-align: right;
    border: 0;
}

/* ========================================================================
 * Bootstrap Popovers
 * ======================================================================== */

.popover {
    z-index: 1010;
    max-width: 276px;
    padding: 0;
    background-color: #FFFFFF;
    background-clip: padding-box;
    border: 2px solid #C0C2C7;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.popover .popover-title {font-size: 14px; font-weight: 700; border-bottom: 0;}
.popover-tooltip-example {text-align: center;}
ul.popover-tooltip-example {list-style: none; margin:0; padding:0;}
ul.popover-tooltip-example li {display: inline-block; margin-bottom: 5px;}

/* ========================================================================
 * Bootstrap Jumbotron
 * ======================================================================== */

.jumbotron {
    background: url(../images/gallery/1.png);
    border-radius: 3px;
    background-size: 30%;
    padding: 20px;
    color: #FFFFFF;
}

.jumbotron0 {background: url(../images/gallery/0.jpg);}
.jumbotron1 {background: url(../images/gallery/1.png);}
.jumbotron2 {background: url(../images/gallery/2.png);}
.jumbotron3 {background: url(../images/gallery/3.png);}
.jumbotron4 {background: url(../images/gallery/4.png);}
.jumbotron5 {background: url(../images/gallery/5.png);}
.jumbotron6 {background: url(../images/gallery/6.png);}
.jumbotron7 {background: url(../images/gallery/7.png);}
.jumbotron8 {background: url(../images/gallery/8.png);}
.jumbotron9 {background: url(../images/gallery/9.png);}
.jumbotron10 {background: url(../images/gallery/10.png);}
.jumbotron11 {background: url(../images/gallery/11.png);}
.jumbotron12 {background: url(../images/gallery/12.png);}

.jumbotron h1 {font-weight: 300; letter-spacing: -2px; padding: 0;}

.jumbotron small {font-size: 13px; line-height: 16px;} 
    
.jumbotron a {color: #FFFFFF;}  

/* ========================================================================
 * Bootstrap Panels
 * ======================================================================== */

.panel {border: 0; border-radius: 5px;}

.panel-default > .panel-heading {
    color: #FFFFFF;
    background-color: #C4C5C5;
    padding: 10px;
    border: 0;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.panel-danger > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading,
.panel-warning > .panel-heading {color: #FFFFFF;}

.panel-body {padding: 10px;}

.panel > .panel-heading i {
    color: #FFFFFF;
    margin-left: 5px;
    margin-top: 3px;
    font-size: 13px;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
}

.panel-title a {color: #FFFFFF;}

.panel-title a:hover {color: #FFFFFF; text-decoration: none;}

.panel-group .panel-heading + .panel-collapse .panel-body {border-top: 0;}

.panel-heading small {font-weight: 400;}
.panel-heading small:before {font-weight: 400; content: "\0000a0 \7c \0000a0";}

/* ========================================================================
 * Bootstrap Tabs and Modifs
 * ======================================================================== */

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {border-color: transparent;}

.tab-content > .tab-pane {
    background: #FFFFFF;
    padding: 15px;
    border: 2px solid #DDDDDD;
    border-top: 0;
}

.nav-tabs {font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #DDDDDD;}

.nav-tabs > li {float: left; margin-bottom: -2px;}
.nav-tabs > li > a {margin-right: 2px; color: #555555; border: 2px solid transparent; border-radius: 4px 4px 0 0;}
.nav-tabs > li > a:hover {border-color: #DDDDDD;}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    background-color: #FFFFFF;
    border: 2px solid #DDDDDD;
    border-bottom-color: transparent;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {outline: none;}

/*Colored Tabs*/
/*Nav-Tabs Grey*/
.tabs-grey .tab-content > .tab-pane,
.tabs-grey .nav-tabs > li > a:hover {
    background: #DEE4E7;
    border-color: #DEE4E7;
}

.tabs-grey .tab-content > .tab-pane {color: #555555;}

.tabs-grey .nav-tabs {border-color: #DEE4E7;}

.tabs-grey .nav-tabs > li.active > a,
.tabs-grey .nav-tabs > li.active > a:hover,
.tabs-grey .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    background-color: #DEE4E7;
    border-color: #DEE4E7;
}

/*Nav-Tabs White*/
.tabs-white .tab-content > .tab-pane,
.tabs-white .nav-tabs > li > a:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
}

.tabs-white .tab-content > .tab-pane {color: #555555;}

.tabs-white .nav-tabs {border-color: #FFFFFF;}

.tabs-white .nav-tabs > li.active > a,
.tabs-white .nav-tabs > li.active > a:hover,
.tabs-white .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

/*Nav-Tabs Green*/
.tabs-green .tab-content > .tab-pane,
.tabs-green .nav-tabs > li > a:hover {
    background: #82B964;
    color: #FFFFFF;
    border-color: #82B964;
}

.tabs-green .nav-tabs {border-color: #82B964;}

.tabs-green .nav-tabs > li.active > a,
.tabs-green .nav-tabs > li.active > a:hover,
.tabs-green .nav-tabs > li.active > a:focus {
    color: #FFFFFF;
    cursor: default;
    background-color: #82B964;
    border-color: #82B964;
}

/* Сustom inclusion of right, left and below tabs. */
.tabbable .tab-content .tab-pane {border-top: 2px solid #DDDDDD;}

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {border-bottom: 0;}

.tab-content > .tab-pane,
.pill-content > .pill-pane {display: none;}

.tab-content > .active,
.pill-content > .active {display: block;}

.tabs-below > .nav-tabs {border: 0;}
.tabs-below > .nav-tabs > li {margin-top: -2px; margin-bottom: 0;}
.tabs-below > .nav-tabs > li > a {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {border-color: #DDDDDD;}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus { border-color: transparent #DDDDDD #DDDDDD #DDDDDD; }

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {float: none;}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
}

.tabs-left > .nav-tabs {float: left; border: 0;}

.tabs-left > .nav-tabs > li > a {
    margin-right: -2px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {border-color: #DDDDDD;}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus { border-color: #DDDDDD transparent #DDDDDD #DDDDDD; *border-right-color: #FFFFFF;
}

.tabs-right > .nav-tabs {float: right; border: 0;}

.tabs-right > .nav-tabs > li > a {
    margin-left: -2px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {border-color: #DDDDDD;}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {border-color: #DDDDDD #DDDDDD #DDDDDD transparent; *border-left-color: #FFFFFF;}

.tabs-right .tab-content .tab-pane,
.tabs-left .tab-content .tab-pane {overflow: hidden; min-height: 150px;}

/* ========================================================================
 * Bootstrap Colors Override and Resets
 * ======================================================================== */

.table > tbody > tr > td.listlabel {width: 20%;}

.table > tbody > tr > td.listvalue {font-weight: bolder;}

.table > thead > tr > td.primary,
.table > tbody > tr > td.primary,
.table > tfoot > tr > td.primary,
.table > thead > tr > th.primary,
.table > tbody > tr > th.primary,
.table > tfoot > tr > th.primary,
.table > thead > tr.primary > td,
.table > tbody > tr.primary > td,
.table > tfoot > tr.primary > td,
.table > thead > tr.primary > th,
.table > tbody > tr.primary > th,
.table > tfoot > tr.primary > th,
.bg-primary,
.list-group-item-primary {background-color: #DFF3F9;}

.alert-primary,
.progress-bar,
.panel-primary > .panel-heading {background-color: #3B8DBD; color: #FFFFFF;}

.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th,
.bg-success,
a.list-group-item-success,
.list-group-item-success {
    background-color: #D9EAD0;
    color: #82B964;
    font-weight: 700
}

.has-success .input-group-addon,
.alert-success,
.progress-bar-success,
.panel-success > .panel-heading,
.label-success {background-color: #82B964; color: #FFFFFF;}

.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th,
.list-group-item-info,
a.list-group-item-info,
.bg-info {background-color: #DFF3F9; color: #5BC0DE; font-weight: 700;}

.alert-info,
.progress-bar-info,
.label-info,
.panel-info > .panel-heading {background-color: #5BC0DE; color: #FFFFFF;}

.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th,
.list-group-item-warning,
a.list-group-item-warning,
.bg-warning {background-color: #FFF4E1; color: #FDC153; font-weight: 700;}

.alert-warning,
.progress-bar-warning,
.panel-warning > .panel-heading {background-color: #F0AD4E; color: #FFFFFF;}

.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th,
.bg-danger,
a.list-group-item-danger,
.list-group-item-danger {background-color: #F7E0DB; color: #D24D33; font-weight: 700;}

.alert-danger,
.progress-bar-danger,
.panel-danger > .panel-heading {background-color: #D24D33; color: #FFFFFF;}

a.list-group-item-success:hover,
a.list-group-item-success:focus,
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr.success:hover > th {background-color: #82B964; color: #FFFFFF;}

a.list-group-item-warning:hover,
a.list-group-item-warning:focus,
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr.warning:hover > th {background-color: #F0AD4E; color: #FFFFFF;}

a.list-group-item-info:hover,
a.list-group-item-info:focus,
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr.info:hover > th {background-color: #5BC0DE; color: #FFFFFF;}

a.list-group-item-danger:hover,
a.list-group-item-danger:focus,
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr.danger:hover > th {background-color: #D24D33; color: #FFFFFF;}

.text-primary,
.btn-link,
.btn-primary .badge,
.pagination > li > a,
.pagination > li > span {color: #C0C2C7;}

.bg-primary,
.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active,
.btn-primary .badge,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.label-primary,
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge,
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active,
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {background-color: #3B8DBD;}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {background-color: #666666;}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {background-color: #D3D4D6;}

.btn-success,
.label-success,
.progress-bar-success,
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {background-color: #82B964;}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {color: #FFFFFF; background-color: #6CA94B;}

.btn-warning,
.label-warning,
.progress-bar-warning,
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {background-color: #F0AD4E;}

.btn-info,
.label-info,
.progress-bar-info,
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {background-color: #5BC0DE;}

.btn-danger,
.label-danger,
.progress-bar-danger,
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {background-color: #D24D33;}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {background-color: #BC4329;}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {border-color: #3B8DBD;}

/* ========================================================================
 * Bootstrap List Groups
 * ======================================================================== */

.list-group-item {margin-bottom: -2px; border: 2px solid #ddd;}

.list-group-item-danger {border-color: #F7E0DB;}
.list-group-item-info {border-color: #DFF3F9;}
.list-group-item-success {border-color: #D9EAD0;}
.list-group-item-warning {border-color: #FFF4E1;}

a.list-group-item-danger:hover,
a.list-group-item-danger:focus {border-color: #D24D33;}

a.list-group-item-info:hover,
a.list-group-item-info:focus {border-color: #5BC0DE;}

a.list-group-item-success:hover,
a.list-group-item-success:focus {border-color: #82B964;}

a.list-group-item-warning:hover,
a.list-group-item-warning:focus {border-color: #F0AD4E;}

/* ========================================================================
 * Bootstrap Buttons and Modifs
 * ======================================================================== */

.big-icons-buttons i {
    font-size: 30px;
    padding: 3px;
    display: block;
    clear: both;
}

.big-icons-buttons .btn {font-size: .85em; padding: 4px 7px;}

.btn {
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    transition: background .2s;
    padding: 9px 12px;
    border: 0;
}

.btn-toolbar {margin-bottom: 10px;}

.btn-lg, .btn-group-lg > .btn {padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px;}
.btn-sm, .btn-group-sm > .btn {padding: 5px 7px; font-size: 12px; line-height: 1.5; border-radius: 3px;}
.btn-xs, .btn-group-xs > .btn {padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px;}

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {margin-left: 0;}

.input-group-btn > .btn + .btn {margin-left: 0;}

.btn-group-vertical .btn {margin-bottom: 0;}

.btn-toolbar {margin-left: -5px; border: 0;}

.btn-toolbar .btn-group,
.btn-toolbar .input-group {float: left; border: 0;}

.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {margin-left: 5px; border: 0;}

.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {margin-right: 0;}

.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {margin-left: 0;}

.btn-default {
    color: #FFFFFF;
    border: 0;
    background-color: #C0C2C7;
    border-color: #C0C2C7;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    color: #FFFFFF;
    background-color: #A7AAB1;
    border-color: #C0C2C7;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {outline: none;}

.btn i {font-weight: 300;}

/*Pagination*/
.pagination > li > a,
.pagination > li > span {
    font-weight: 600;
    margin-left: -2px;
    border: 2px solid #DDDDDD;
}

/* ========================================================================
 * Bootstrap Progress Bars
 * ======================================================================== */

.progress-bar {font-weight: 700; font-size: .85em;}

.progress .progressbar-back-text {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.progress .progressbar-front-text {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.progress.right .progress-bar {right: 0;}

.progress.right .progressbar-front-text {position: absolute; right: 0;}

.progress.vertical {
    width: 20px;
    height: 100%;
    float: left;
    margin-right: 20px;
}

.progress.vertical.bottom {position: relative;}

.progress.vertical.bottom .progressbar-front-text {position: absolute; bottom: 0;}

.progress.vertical .progress-bar {
    width: 100%;
    height: 0;
    -webkit-transition: height .6s ease;
    transition: height .6s ease;
}

.progress.vertical.bottom .progress-bar {position: absolute; bottom: 0;}

.progress .progress-bar.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

.progress.vertical .progress-bar.six-sec-ease-in-out {
    -webkit-transition: height 6s ease-in-out;
    -moz-transition: height 6s ease-in-out;
    -ms-transition: height 6s ease-in-out;
    -o-transition: height 6s ease-in-out;
    transition: height 6s ease-in-out;
}

.progress.wide {width: 50px;}

.vertical-progressbars {height: 150px;}

/* ========================================================================
 * Bootstrap Alerts
 * ======================================================================== */

.alert {border: 0}

.alert a {color: #FFFFFF; text-decoration: underline;}

.alert a:hover {color: #FFFFFF;}

.alert strong {text-transform: uppercase; font-weight: 700; font-size: .9em;}

.alert i {font-size: .8em;}

/* ========================================================================
 * Bootstrap Badge
 * ======================================================================== */

.badge {padding: 3px 7px; font-size: 10px; font-weight: 700;}

/* ========================================================================
 * Bootstrap Dropdowns
 * ======================================================================== */

.dropdown-menu {
    font-size: 13px;
    border: 0;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* ========================================================================
 * Bootstrap Navbars
 * ======================================================================== */

.navbar {
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    min-height: 50px;
    border: 0;
    padding: 0;
}

.navbar-form {margin: 5px;}

.navbar-default {background-color: #FFFFFF; border-bottom: 0;}

.navbar-brand {
    color: #555555;
    font-weight: 800;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 28px;
    line-height: 22px;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.navbar-brand a {color: #555555;}

.nav.navbar-nav .open > a,
.nav.navbar-nav .open > a:hover,
.nav.navbar-nav .open > a:focus {background-color: #FFFFFF; border: 0;}

.nav.navbar-nav > li > a:hover,
.nav.navbar-nav > li > a:focus {border: 0;}

.navbar-default .navbar-nav > li > .dropdown-menu {background: #81C1D9; border: 0;}

.navbar-default .navbar-nav > li > a .badge {background-color: #000000;}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {color: #FFFFFF; background-color: #81C1D9;}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {color: #FFFFFF; background-color: #81C1D9;}

.navbar-default .navbar-nav .dropdown-menu > li > a {color: #FFFFFF; padding: 10px 15px; transition: all .05s ease-in;}

.navbar-default .navbar-nav .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .dropdown-menu > li > a:focus {color: #FFFFFF; background-color: #5BC0DE;}

.navbar-default .navbar-nav .dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #6AB6D2;
}

.navbar-inverse {background-color: #33383D; border-color: #080808;}

/* ========================================================================
 * Boostrap Tables
 * ======================================================================== */

.table h1,
.table h2,
.table h3,
.table h4,
.table h5 {margin: 0; margin-bottom: 2px;}

.table {border-top: 0; background: #FFFFFF;}

.table .num {
    font-size: 0.8em;
    display: inline-block;
    padding: 7px;
    width: 29px;
    text-align: center;
    border-radius: 35px;
    color: #FFFFFF;
    font-weight: 700;
    background-color: #D3D3D3;
}

.table .label {font-size: .75em; display: inline-block; margin: 2px;}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {padding: 6px 8px; vertical-align: middle; border-top: 1px solid #E2EAE9;}

.table > thead > tr > th {
    background: #858689;
    color: #FFFFFF;
    font-size: .87em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid #8b8c8d;
    padding: 7px 10px;
    border-bottom: 7px solid #DDDDDD
}

.table > tfoot > tr > th {
    background: #DDDDDD;
    color: #999999;
    font-size: .87em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid #DDDDDD;
    padding: 7px 10px;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {background-color: #D8E3E6;}

.table-hover > tbody > tr:hover > td .num,
.table-hover > tbody > tr:hover > th .num {background-color: #858689;}

/*Tables with Transparent thead and tfoot - the r air like*/
.table.airtable > thead > tr > th {
    color: #858689;
    background: transparent;
    font-size: .87em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid #FFFFFF;
    padding: 7px 10px;
    border-bottom: 7px solid #DDDDDD
}

.table.airtable > tfoot > tr > th {
    background: transparent;
    color: #999;
    font-size: .87em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid #FFFFFF;
    border-top: 7px solid #DDDDDD;
    padding: 7px 10px;
}

/*Dark Tables*/
.table.table-dark {border-top: 0;}

.table.table-dark .num {color: #FFFFFF; background-color: #595F66;}

.table.table-dark > thead > tr > th,
.table.table-dark > tfoot > tr > th {
    background: #595F66;
    color: #FFFFFF;
    font-size: .87em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid #595F66;
    padding: 7px 10px;
    border-bottom: 7px solid #33383D;
}

.table.table-dark > tbody > tr > td {background: #33383D; border-top: 1px solid #33363B; color: #FFFFFF;}

.table-striped.table-dark > tbody > tr:nth-child(odd) > td,
.table-striped.table-dark > tbody > tr:nth-child(odd) > th {background-color: #454B52;}

.table-hover.table-dark > tbody > tr:hover > td,
.table-hover.table-dark > tbody > tr:hover > th {
    background-color: #595F66;
    transition: background .2s ease-in-out;
}

.table-hover.table-dark > tbody > tr:hover > td .num,
.table-hover.table-dark > tbody > tr:hover > th .num {background-color: #3C4250;}

.table-bordered.table-dark > tbody > tr > th,
.table-bordered.table-dark > tfoot > tr > th,
.table-bordered.table-dark > tbody > tr > td,
.table-bordered.table-dark > tfoot > tr > td {border: 1px solid #454B52;}

/* ========================================================================
 * PAGES GLOBALS
 * ======================================================================== */

.smooth-overflow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    overflow-x: hidden;
    /* smooth overscroll on ios 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;*/
}

/* Main Wrap With Menu, Content Wrapper and Right User Sidebars */
.main-wrap {
    position: absolute;
    width: 100% !important;
    left: 0;
    bottom: 0;
    right: 0;
    top: 62px;
}

/* Main Menu */
.responsive-admin-menu {
    position: absolute;
    width: 200px;
    height: auto;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
}

/* Fixed Footer Bar */
.footer-bar {
    background-color: #33383D;
    bottom: 0;
    padding: 10px 0px;
    overflow: none;
    position: fixed;
    width: 100%;    
}

.footer-bar p {float: right; color: #FFFFFF; font-size: 11px; margin: 0px 20px 0px 0px;}
.footer-bar p a {text-decoration: none;}
.footer-bar p a:hover {color: #3B8DBD;}

/* Center Block With All Content */
.content-wrapper {
    position: relative;
    overflow-x: hidden;
    top: 0px;
    padding: 15px;
    padding-bottom: 30px;
    margin: 0 10px 0 0;
    margin-left: 200px;
    height: auto !important;
    height: 100%;
    /*min-height: 1100px;*/
    min-height: 100%;
    right: 0px;
    background: #F0F0ED;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 0 3px 3px rgba(0,0,0,0.2)
}

/*Toggle Screen Classes*/
.sidebar-toggle {margin-left: -210px;}

.main-content-toggle-left {margin-left: 10px;}

.responsive-admin-menu {transition: all .2s ease-in-out 0s;}

.content-wrapper {transition: all .3s ease-in-out 0s;}

/*Toggle Userbar Classes*/
.userbar-toggle {left: -200px; right: 190px;}

.main-wrap {transition: all .3s ease-in-out 0s;}

.responsive-admin-menu {transition: all .2s ease-in-out 0s;}

video {max-width: 100%; height: auto;}

iframe, embed, object {max-width: 100%;}

/* ========================================================================
 * Top Horizontal Menu With Sparklines Charts
 * ======================================================================== */

/* Main menu wrapper */
.cbp-hsmenu-wrapper {position: relative; margin: 0 -15px;}

/* Common style for all lists */
.cbp-hsmenu-wrapper ul {
    list-style: none;
    padding: 0;
    text-align: center;
    margin: 0 auto;
}

/* 100% width bar for menu */
.cbp-hsinner {
    background: transparent;
    margin-top: -16px;
    margin-bottom: 6px;
    position: relative;
    z-index: 7;
}

.cbp-hsinner .icon-bar {
    display: block;
    background: #969FA1;
    width: 60px;
    height: 8px;
    border-radius: 4px;
}

/* Main menu style */
.cbp-hsmenu-wrapper .cbp-hsmenu {margin: 0 auto;}

/* Main menu link style */
.cbp-hsmenu > li > a {
    color: #FFFFFF;
    display: inline-block;
    position: relative;
    z-index: 10000;
    outline: none;
}

/* Submenu style */
.cbp-hssubmenu {
    position: absolute;
    background: #D8E3E6;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 0;
    text-align: center; /* for aligning the sub items */
    visibility: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.cbp-hssubmenu:before, .cbp-hssubmenu:after {content: " "; display: table;}

.cbp-hssubmenu:after {clear: both;}

.cbp-hssubmenu > li {
    width: 16.2%;
    display: inline-block;
    vertical-align: top;
    box-shadow: -28px 0 0 -27px #A7B6BC, 0 -28px 0 -27px #A7B6BC;
    opacity: 0;
    -webkit-transition: opacity .1s 0s;
    -moz-transition: opacity .1s 0s;
    transition: opacity .1s 0s;
}

.cbp-hssubmenu > li:nth-child(-n+6) {box-shadow: -28px 0 0 -27px #A7B6BC;}
.cbp-hssubmenu > li:nth-child(6n+1) {box-shadow: 0 -28px 0 -27px #A7B6BC;}
.cbp-hssubmenu > li:first-child {box-shadow: none;}

.cbp-hssubmenu > li a {
    display: block;
    text-align: center;
    color: #444444;
    outline: none;
    padding: 2em 1em 1em 1em;
}

.cbp-hssubmenu > li a canvas {
    outline: none;
    display: inline-block;
    margin: 5px auto;
    max-width: 100%;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s;
}

.cbp-hssubmenu > li a span {display: block; margin-top: 0.4em;}

.cbp-hssubmenu > li a:hover {text-decoration: none;}

.cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu {z-index: 1000; visibility: visible;}
.cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu > li {
    opacity: 1;
    -webkit-transition: opacity .5s .1s;
    -moz-transition: opacity .5s .1s;
    transition: opacity .5s .1s;
}

.cbp-hsmenubg {
    background: #f7f7f7;
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 0;
    height: 0;
}

.sparkle-name {display: block; font-size: .65em; text-transform: uppercase; letter-spacing: 2px;}

.sparkle-amount {display: block; font-size: 1.5em; text-transform: uppercase;}

.sparkle-dropdown {display: block; border-radius: 3px; padding: 10px 0;}

.sparkle-dropdown p {font-family: 'Open Sans', sans-serif; font-weight: 800; line-height: 10px;}

/*Media Queries for Horizontal Menu*/
@media screen and (max-width: 65em) {

    .cbp-hsinner {
        background: transparent;
        margin-top: -13px;
        margin-bottom: 7px;
        position: relative;
        z-index: 7;
    }

    .cbp-hsmenu-wrapper {font-size: 80%;}

}

@media screen and (max-width: 51.4375em) {

    .cbp-hsmenu-wrapper {font-size: 100%;}

    .cbp-hsmenu-wrapper .cbp-hsmenu {max-width: none; width: 100%;}

    .cbp-hsmenu > li {text-align: center; margin: 0 auto; display: block;}

    .cbp-hsmenu > li:first-child {border-top: none;}

    .cbp-hsmenu > li > a:not(:only-child):before {
        line-height: 1.8;
        right: 0;
        position: absolute;
        font-size: 200%;
    }

    .cbp-hsmenubg {display: none;}

    .cbp-hssubmenu {position: relative; overflow: hidden; height: 0;}

    .cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu {height: auto;}

    .cbp-hssubmenu > li {width: 30%;}

    .cbp-hssubmenu > li:nth-child(-n+6),
    .cbp-hssubmenu > li:nth-child(6n+1) {box-shadow: -28px 0 0 -27px #A7B6BC, 0 -28px 0 -27px #A7B6BC;}
    .cbp-hssubmenu > li:nth-child(-n+3) {box-shadow: -28px 0 0 -27px #A7B6BC;}
    .cbp-hssubmenu > li:nth-child(3n+1) {box-shadow: 0 -28px 0 -27px #A7B6BC;}
}
    
@media screen and (max-width: 25em) {

    .cbp-hsmenu-wrapper {font-size: 100%;}

    .cbp-hsmenu-wrapper .cbp-hsmenu {padding: 0; max-width: none; width: 100%;}

    .cbp-hsmenu > li {text-align: center; margin: 0 auto; display: block;}

    .cbp-hsmenu > li:first-child {border-top: none;}

    .cbp-hsmenu > li > a:not(:only-child):before {
        line-height: 1.8;
        right: 0;
        position: absolute;
        font-size: 200%;
    }

    .cbp-hsmenubg {display: none;}

    .cbp-hssubmenu {position: relative; overflow: hidden; height: 0;}

    .cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu {height: auto;}

    .cbp-hssubmenu > li {width: 49%;}

    /* Reset box shadows */
    .cbp-hssubmenu > li:nth-child(-n+6),
    .cbp-hssubmenu > li:nth-child(6n+1) {box-shadow: -28px 0 0 -27px #A7B6BC, 0 -28px 0 -27px #A7B6BC;}

}

/* ========================================================================
 * Left Main Menu Nav
 * ======================================================================== */

.responsive-admin-menu #menu div a {color: #FFFFFF;}

.responsive-admin-menu .responsive-menu {
    height: 50px;
    display: none;
    line-height: 50px;
    cursor: pointer;
    color: #FFFFFF;
    text-indent: 10px;
}

.responsive-admin-menu .responsive-menu .menuicon {
    color: #FFFFFF;
    font-size: 24px;
    position: absolute;
    right: 10px;
    top: 50px;
}

.responsive-admin-menu ul {list-style: none outside none; margin: 0; padding: 0;}

.responsive-admin-menu #menu li a {width: 100%;}

.responsive-admin-menu ul li a {
    font-size: .85em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
    color: #FFFFFF;
    position: relative;
    padding: 13px 10px 13px 12px;
    overflow: hidden;
    outline: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    transition: background .4s;
}

.responsive-admin-menu ul li a:hover {background: rgba(255, 255, 255, 0.1);}

.responsive-admin-menu #menu ul li a {padding: 8px 10px 8px 12px; height: 37px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}

.responsive-admin-menu #menu ul li li a {padding: 8px 10px 8px 22px;}

.responsive-admin-menu #menu li a.submenu:before {
    font-family: FontAwesome;
    content: "\f105";
    font-weight: 400;
    font-size: 15px;
    display: block;
    height: 50%;
    position: absolute;
    right: 12px;
    top: 25%;
}

.responsive-admin-menu #menu li a.downarrow {background: rgba(255,255,255,.15);}

.responsive-admin-menu #menu li a.downarrow:before {font-family: FontAwesome; content: "\f107";}

.responsive-admin-menu #menu li a.active,
.responsive-admin-menu #menu li a.submenu.active {
    color: #52535A;
    z-index: 1;
    text-shadow: none;
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.6);
    background-color: #F0F0ED;
}

.responsive-admin-menu #menu li a.active .badge,
.responsive-admin-menu #menu li a.submenu.active .badge {background: #5BC0DE; color: #FFFFFF;}

.responsive-admin-menu #menu li:first-child a.active {
    position: relative;
    display: block;
    box-shadow: 5px 0 0 0 #F0F0ED;
}

.responsive-admin-menu #menu ul {
    display: none;
    width: 100%;
    background-color: #5C6064;
    overflow: hidden;
}

.responsive-admin-menu #menu .active:hover {background: #F0F0ED;}

.responsive-admin-menu #menu li i {font-size: 14px; padding-right: 5px;}

.responsive-admin-menu li a .badge {background: #FFFBDB; color: #33383D; font-size: .8em; text-shadow: none;}

/* ========================================================================
 * Breadcrumbs
 * ======================================================================== */

.breadcrumb {
    position: relative;
    font-weight: 700;
    height: 44px;
    border-radius: 3px;
    margin-bottom: 15px;
    margin-top: -5px;
    background-color: #DDDDDB;
}

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

.breadcrumb li {
    float: left;
    font-family: 'Open Sans', sans-serif;
    margin: 0 7px 0 14px;
    text-transform: uppercase;
    font-size: 10px;
    line-height:17px;
    letter-spacing: 1px;
}

.breadcrumb li a {
    background: #FFFFFF;
    display: block;
    height: 28px;
    padding: 5px 10px 8px;
    float: left;
    text-decoration: none;
    color: #555555;
    position: relative;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

.breadcrumb li a:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -14px;
    border-width: 14px 0 14px 9px;
    border-style: solid;
    border-color: #FFFFFF #FFFFFF #FFFFFF transparent;
    left: -9px;
}

.breadcrumb li a:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -14px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 9px solid #FFFFFF;
    right: -9px;
}

.breadcrumb:after {content: ""; clear: both;}

.breadcrumb li:first-child a:before {border: 0;}

.breadcrumb li:first-child a {
    border-radius: 5px 0px 0px 5px;
    padding-left: 15px;
    margin-left: -18px;
}

.breadcrumb li + li:before {content: "";}

.breadcrumb li a:hover {background: #777777; color: #F5F5F5;}

.breadcrumb li a:hover:before {border-color: #777777 #777777 #777777 transparent;}

.breadcrumb li a:hover:after {border-left-color: #777777;}

.breadcrumb .active {margin-top: 5px; margin-left: 9px; color: #777777;}

/* ========================================================================
 * Main Top Menu
 * ======================================================================== */

/*Site Search*/
.site-search {
    float: left;
    position: relative;
    padding: 9px;
    padding-left: 0;
}

.site-search i {
    position: absolute;
    color: #fff;
    font-family: FontAwesome;
    font-size: 16px;
    left: 11px;
    top: 15px;
}

.site-search input[type=search] {
    background: #969FA1;
    width: 15px;
    color: #969FA1;
    cursor: pointer;
    border: 0;
    font-weight: 400;
    padding: 6px 10px 7px 30px;
    width: 55px;
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.site-search input[type=search]:hover {background-color: #454B52;}

.site-search input[type=search]:focus {
    width: 150px;
    padding-left: 30px;
    color: #FFFFFF;
    background-color: #454B52;
    cursor: auto;
}

.main-header {
    background: #FFFFFF;
    position: absolute;
    width: 100%;
    right: 0px;
    left: 0px;
    /*z-index: 999;*/
    display: block;
    padding: 0;
    margin: 0;
}

.main-header .navbar-brand {display: block; text-align: left; float: left;}

.main-header .navbar-content {padding: 10px 7px 5px 0;}

.main-header .btn-default {
    background: #969FA1;
    line-height: 20px;
    font-size: 0.9em;
    padding: 5px 9px;
    color: #FFFFFF;
}

.main-header .btn-default i {font-size: 17px;}

.main-header .btn {border-radius: 20px; margin: 0;}

.main-header .dropdown-toggle {border-radius: 3px;}

.main-header .btn-default {margin-right: 3px;}

.main-header .btn-user {
    color: #33383D;
    width: 42px;
    overflow: hidden;
    line-height: 13px;
    padding-top: 6px;
    height: 42px;
    margin: 0;
    margin-left: 10px;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #33383D;
    margin-right: 3px;
    transition: all 0.2s ease-in;
}

.main-header .btn-dark {background: #595F66;}

.left-toggler {background: #33383D;}
.left-toggler i {color: #FFFFFF;}

.main-header .btn-user i {
    position: absolute;
    top: 7px;
    color: #FFFFFF;
    left: 10px;
    font-size: 1.7em;
}

.main-header .btn-user .logged-as {
    font-size: 9px;
    float: left;
    font-weight: 300;
    display: inline-block;
    text-transform: uppercase;
}

.main-header .btn-user .logged-as-name {
    font-size: 1.2em;
    line-height: 12px;
    float: left;
    width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-weight: 600;
    display: block;
}

.main-header .btn-default:hover,
.main-header .btn-default:active,
.open .dropdown-toggle.btn-default {
    color: #FFFFFF;
    background-color: #6f797c;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.main-header .open .dropdown-toggle.btn-default {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

.main-header .btn-default .badge {
    position: absolute;
    right: -5px;
    top: -3px;
    background-color: #82B964;
    color: #FFFFFF;
}

.main-header .btn-default .new {
    position: absolute;
    width: 10px;
    display: block;
    height: 10px;
    right: -1px;
    border-radius: 50%;
    top: -1px;
    background-color: #82B964;
    color: #FFFFFF;
    animation: opacity-badge 0.6s infinite;
    -webkit-animation: opacity-badge 0.6s infinite;
}

@keyframes opacity-badge {0% {transform: scale(0.5)} 100% {transform: scale(1.2)}}
@-moz-keyframes opacity-badge {0% {transform: scale(0.5)} 100% {transform: scale(1.2)}}
@-webkit-keyframes opacity-badge {0% {transform: scale(0.5)} 100% {transform: scale(1.2)}}

.main-header .dropdown-menu {
    margin-top: -2px;
    text-transform: uppercase;
    background: #969FA1;
    width: 300px;
}

.main-header #settings-dropdown {width: 220px; right: 3px;}

.main-header .dropdown-menu .dropdown-container {height: 220px; overflow: hidden; display: block;}

.main-header .dropdown-menu ul {list-style: none outside none; margin: 0; padding: 0;}

.main-header .dropdown-menu ul > li > a {
    color: #FFFFFF;
    clear: both;
    display: block;
    transition: all 0.05s ease-in;
    box-shadow: 0px -2px rgba(0, 0, 0, 0.15) inset;
}

.main-header .dropdown-menu ul > li > a:hover {text-decoration: none;}

.main-header .dropdown-menu > li:hover,
.main-header .dropdown-menu > li > a:hover,
.main-header .dropdown-menu > li > a:focus {color: #FFFFFF; background-color: #8B9698;}

.main-header .dropdown-menu .dropdown-header {
    padding: 10px 20px;
    font-weight: 300;
    line-height: 25px;
    font-size: 1.9em;
    text-transform: none;
    color: #FFFFFF;
    border-bottom: 3px solid #8B9698;
}

.main-header .dropdown-menu .dropdown-footer {
    padding: 10px 20px;
    font-weight: 300;
    text-transform: none;
    color: #FFFFFF;
    border-top: 3px solid #8B9698;
}

.main-header .dropdown-menu .dropdown-footer .btn {
    border-radius: 3px;
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 0.9em;
    padding: 5px 7px;
    display: inline-block;
    margin: 0;
}

.main-header .dropdown-menu .dropdown-header .badge {
    margin-top: 5px;
    position: relative;
    background: #FFFFFF;
    border-radius: 3px;
    font-size: 0.55em;
    color: #8B9698;
}

.main-header .dropdown-menu .dropdown-header .badge:after {
    content: "";
    position: absolute;
    top: 4px;
    left: -5px;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-color: transparent #FFFFFF;
    display: block;
    width: 0;
    z-index: 1;
}

.main-header .dropdown-menu li {color: #FFFFFF;}

.main-header .dropdown-menu .inbox-dropdown > li > a {position: relative; padding: 10px 40px 10px 75px; height: auto; color: #FFFFFF;}
.main-header .dropdown-menu .inbox-dropdown > li > a p {font-size: 0.85em; margin-bottom: 4px; text-transform: none;}

.main-header .dropdown-menu .inbox-dropdown > li > a .label {font-weight: 600; text-transform: none;}
.main-header .dropdown-menu .inbox-dropdown > li > a .label.label-default {background-color: #FFFFFF; color: #8B9698;}

.main-header .dropdown-menu .inbox-dropdown > li > a h4 {
    margin: 0 0 3px;
    font-size: 1.1em;
    letter-spacing: -1px;
    font-weight: 700;
    line-height: 15px;
    padding: 0;
}

.main-header .dropdown-menu .inbox-dropdown > li > a .delete {
    position: absolute;
    font-size: 1.5em;
    right: 13px;
    top: 20%;
    visibility: hidden;
}

.main-header .dropdown-menu .inbox-dropdown > li > a:hover .delete {
    visibility: visible;
    display: block;
    max-width: 40px;
}

.main-header .dropdown-menu .inbox-dropdown > li > a .user-image {
    position: absolute;
    left: 17px;
    top: 15px;
    display: block;
    max-width: 40px;
}

.main-header .dropdown-menu .inbox-dropdown > li > a .user-image img {
    display: inline-block;
    max-width: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.5)
}

/*Styles for Notifications Dropdown*/
.main-header .dropdown-menu .notification-dropdown > li > a {
    position: relative;
    padding: 10px 10px 10px 60px;
    height: auto;
    white-space: normal;
}

.main-header .dropdown-menu .notification-dropdown > li > a .notification-icon {
    position: absolute;
    display: block;
    background: #fff;
    border-radius: 50%;
    color: #969fa1;
    left: 10px;
    top: 10px;
    width: 40px;
    text-align: center;
    height: 40px;
    font-size: 2.15em;
}

.main-header .dropdown-menu .notification-dropdown > li > a h4 {
    margin: 0 0 3px;
    font-size: 1.1em;
    letter-spacing: -1px;
    font-weight: 700;
    line-height: 15px;
    padding: 0;
}

.main-header .dropdown-menu .notification-dropdown > li > a p {
    font-size: 0.85em;
    margin-bottom: 4px;
    text-transform: none;
}

.main-header .dropdown-menu .notification-dropdown > li.bg-danger > a,
.main-header .dropdown-menu .notification-dropdown > li.bg-danger > a .notification-icon {color: #D24D33;}

.main-header .dropdown-menu .notification-dropdown > li.bg-info > a,
.main-header .dropdown-menu .notification-dropdown > li.bg-info > a .notification-icon {color: #5BC0DE;}

.main-header .dropdown-menu .notification-dropdown > li.bg-warning > a,
.main-header .dropdown-menu .notification-dropdown > li.bg-warning > a .notification-icon {color: #F0AD4E;}

.main-header .dropdown-menu .notification-dropdown > li.bg-success > a,
.main-header .dropdown-menu .notification-dropdown > li.bg-success > a .notification-icon {color: #82B964;}

/*Styles for Settings Dropdown*/
.main-header .dropdown-menu .settings-dropdown > li {padding: 8px 15px; color: #FFFFFF;}
.main-header .dropdown-menu .settings-dropdown > li label {text-transform: none; font-weight: 700;}

/* ========================================================================
 * Social Icons
 * ======================================================================== */

.social-buttons {margin: 20px auto 10px auto; clear: both;}

.social {
    list-style: none;
    line-height: 26px;
    text-align: center;
    font-size: 1.8em;
}

.social-buttons ul {margin: 0px; padding: 0;}

.social li {
    display: inline;
    margin: 0px;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: opacity;
    -moz-transition-duration: 500ms;
}

.social li a {color: #FFFFFF; text-decoration: none; padding: 1px;}

.social:hover li {opacity: 0.2;}

.social li:hover {opacity: 1; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out;}

/* ========================================================================
 * Scroll to Top
 * ======================================================================== */

.scroll-top-wrapper {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    z-index: 99999999;
    background: rgba(89, 95, 102, 0.7);
    color: #EEEEEE;
    width: 40px;
    height: 40px;
    right: 40px;
    bottom: 50px;
    border-radius: 50%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {background: rgba(89, 95, 102, 1); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.7);}
.scroll-top-wrapper.show {visibility: visible; Cursor: pointer; opacity: 1.0;}

.scroll-top-wrapper i {font-size: 20px; line-height: 35px;}

/* ========================================================================
 * Gallery Page
 * ======================================================================== */

.img-rounded {border-radius: 3px;}

ul.thumbnails {list-style: none outside none; margin-bottom: 10px; padding: 0;}

ul.thumbnails li {margin-bottom: 10px;}

.thumbnail {
    display: block;
    padding: 0;
    background-color: #969FA1;
    border: 0;
    border-radius: 3px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.thumbnail .caption, .thumbnail .caption a {color: #FFFFFF;text-align: center;}

.gal-overlay {
    width: 0px;
    height: 0px;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    padding: 0;
    z-index: 10000;
    text-align: center;
    background: rgba(0, 0, 0, 0.85);
}

.gal-overlay > div {
    position: relative;
    color: #FFFFFF;
    margin: 40px auto 0 auto;
    height: 80px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

.gal-overlay a.gal-close {
    z-index: 1001;
    color: #FFFFFF;
    font-size: 40px;
    position: absolute;
    top: 45px;
    left: 50%;
    text-align: center;
    overflow: hidden;
    margin-left: -25px;
    opacity: 0;
    text-decoration: none;
    filter: alpha(opacity=0);
}

.gal-overlay img {
    /* height: 100%; For Opera max-height does not seem to work */
    display: block;
    border-radius: 3px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    -ms-transition: opacity .5s linear;
    transition: opacity .5s linear;
}

.gal-prev,
.gal-next {
    position: absolute;
    top: -32px;
    font-size: 25px;
    width: 25px;
    height: 25px;
    left: 50%;
    color: #fff;
    text-decoration: none;
}

.gal-prev:hover,
.gal-next:hover {opacity: 0, 5;}

.gal-prev {margin-left: -30px;}
.gal-next {margin-left: 5px;}

.gal-overlay:target {
    width: auto;
    height: auto;
    bottom: 0;
    right: 0;
    padding: 100px 30px 120px 30px;
}

.gal-overlay:target img,
.gal-overlay:target a.gal-close {opacity: 1; filter: alpha(opacity=99);}
x:-o-prefocus, .gal-overlay img {height: 100%;}

/*Zoomer*/
.hover-fader { position: relative }

.hover-fader .zoom {
    background-color: rgba(255,255,255,.4);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: center;
    display: none;
    cursor: pointer;
}

.hover-fader i {
    width: 50px;
    line-height: 45px;
    height: 50px;
    border-radius: 50%;
    background: #969FA1;
    overflow: auto;
    margin: auto;
    position: absolute;
    font-size: 2em;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: #FFFFFF;
}

.hover-fader:hover .zoom {display: block;}

/* ========================================================================
 * Search Page
 * ======================================================================== */

/*Styling Ordered List*/
.search-results ol {margin-top: 20px; list-style-type: none; counter-reset: li-counter;}

.search-results ol > li {position: relative; margin-bottom: 10px; border-bottom: 2px solid #DDDDDB;}
.search-results ol > li:before {
    position: absolute;
    top: 0;
    left: -40px;
    font-size: 0.8em;
    display: inline-block;
    padding: 7px;
    width: 29px;
    text-align: center;
    border-radius: 35px;
    color: #FFFFFF;
    font-weight: 700;
    background-color: #D3D3D3;
    content: counter(li-counter);
    counter-increment: li-counter;
}

/* Styling Search Block */
.search-result-block {margin-bottom: 10px;}

.search-result-block h3 {
    font-size: 1.4em;
    font-weight: 400;
    margin: 0;
    margin-bottom: 3px;
}

.search-result-block h3 a {text-decoration: underline;}

.search-result-block .url {position: relative; display: inline-block;}
.search-result-block .url a {color: #333333;}

/*Search Result with Image*/
.search-result-block .content,
.search-result-block .image-block {
    float: left;
    text-align: center;
    margin-top: 3px;
    margin-right: 8px;
    display: block;
    width: 60px;
}

.search-result-block .image-block img {display: inline-block; max-width: 100%; border-radius: 3px;}

/*Search Result with User Image*/
.search-result-block .user-block {
    float: left;
    margin-top: 3px;
    margin-right: 8px;
    display: block;
    max-width: 60px;
}

.search-result-block .user-block img {display: inline-block; max-width: 100%; border-radius: 50%;}

/*Search Result with Dummy Video*/
.search-result-block .video-block {
    float: left;
    position: relative;
    margin-top: 3px;
    margin-right: 8px;
    display: block;
    height: 45px;
    border-radius: 3px;
    overflow: hidden;
    max-width: 60px;
}

.search-result-block .video-block img {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    border-radius: 3px;
}

.search-result-block .badge { background-color: #c4c5c5 }

/*Hover Effect for all images inside search blocks*/
.search-result-block .hover-fader i,
.search-result-block .video-block i {
    width: 50px;
    line-height: 45px;
    height: 50px;
    background: transparent;
    overflow: auto;
    margin: auto;
    position: absolute;
    font-size: 1.6em;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: #FFFFFF;
}

/*Search-Icon with Text*/
.search-result-block .file-type {
    position: relative;
    text-decoration: none;
    color: #969FA1;
    float: left;
    margin-right: 8px;
    width: 60px;
    font-size: 5.5em;
    line-height: 1;
}

.search-result-block .file-type:before {font-family: 'FontAwesome'; content: "\f016";}

.search-result-block .file-type span {
    position: absolute;
    display: block;
    text-align: center;
    width: 55px;
    top: 40px;
    left: 0;
    letter-spacing: -1px;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 16px;
}

/*Search-Icon with Text - Inverted*/
.search-result-block .file-type.inverted {
    position: relative;
    text-decoration: none;
    color: #969FA1;
    float: left;
    margin-right: 8px;
    width: 60px;
    font-size: 5.5em;
    line-height: 1;
}

.search-result-block .file-type.inverted:before {font-family: 'FontAwesome'; content: "\f15b";}

.search-result-block .file-type.inverted span {color: #FFFFFF; font-size: 18px;}

.search-result-block .file-type span i {font-size: 1.6em; line-height: 0;}

.search-result-block .updated {font-size: .85em; font-weight: 600;}

/*Animation*/
.cbp-hsmenu,
.dropdown-menu {
    -webkit-perspective: 3000px;
    -moz-perspective: 3000px;
    perspective: 300px;
}

.cbp-hsitem-open,
.open > .dropdown-menu {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: rotateX(-80deg);
    -moz-transform: rotateX(-80deg);
    transform: rotateX(-80deg);
    -webkit-animation: flip .2s ease-in-out forwards;
    -moz-animation: flip .2s ease-in-out forwards;
    animation: flip .2s ease-in-out forwards;
}

@-webkit-keyframes flip { 100% {-webkit-transform: rotateX(0deg); opacity: 1;}}
@-moz-keyframes flip { 100% {-moz-transform: rotateX(0deg); opacity: 1;}}
@keyframes flip { 100% {transform: rotateX(0deg); opacity: 1;}}

/* ========================================================================
 * User Directory with Switch
 * ======================================================================== */

.items-switcher {padding: 0;}

.items-options {text-align: right; padding-bottom: 10px;}

.items-options a {
    display: inline-block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    margin: 2px;
}

.items-options a:hover,
.items-options a.items-selected {color: #949FB2;}

.items-options a:before {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    text-align: center;
    display: inline-block;
}

/* General style of switch items' list */
.items-switcher ul {list-style: none; padding: 0; margin: 0;}

/* Clear eventual floats */
.items-switcher ul:before,
.items-switcher ul:after {content: ""; display: table;}
.items-switcher ul:after {clear: both;}
.items-switcher ul li {display: block; position: relative;}

/* Common icon styles */
.items-icon:before {
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

.items-grid:before {content: "\f00a";}
.items-list:before {content: "\f00b";}

.items-inner {
    background: #F1F1F1;
    border-radius: 3px;
    text-align: center;
    padding: 10px 10px 15px;
    margin: 0 7px;
}

.items-inner:hover {
    background: #DDDDDD;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.items-inner:hover .control-buttons {color: #33383D; visibility: visible;}

.control-buttons i {font-size: 1.2em; padding: 0 3px;}

.control-buttons a {color: #949FB2;}
.control-buttons a:hover {color: #33383D;}

.items-image {display: block; margin: 0 auto; max-width: 110px;}
.items-image img {display: inline-block; max-width: 100%; border: none;}

.items-title {
    margin: 0;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

.items-details {max-width: 300px; padding: 10px; font-size: .9em; margin: 0 auto;}

.items-price {margin: 10px 0; font-size: 1.5em;}

/* Individual view mode styles */
/* Large grid view */
.items-view-grid ul {text-align: center; margin: 0; padding: 0;}

.items-view-grid ul li {
    width: 20%;
    margin-bottom: 15px;
    display: inline-block;
    float: left;
    vertical-align: top;
}

.items-view-grid .control-buttons {
    position: absolute;
    display: inline-block;
    visibility: hidden;
    background: #FFFFFF;
    color: #949FB2;
    left: 80%;
    display: block;
    width: 40%;
    margin-left: -50%;
    bottom: -15px;
    padding: 5px 8px;
    border-radius: 7px;
}

/* List view */
.items-view-list li {padding: 0; margin-bottom: 15px; white-space: nowrap;}

.items-view-list .items-image,
.items-view-list .items-title,
.items-view-list .items-details,
.items-view-list .items-price,
.items-view-list .items-add {display: inline-block; text-align: left; vertical-align: middle;}

.items-view-list .items-inner {
    background: #F1F1F1;
    border-radius: 3px;
    text-align: left;
    padding: 10px;
    padding-right: 50px;
    margin: 0 7px;
}

.items-view-list .items-image {width: 5%;}

.items-view-list .items-title {font-size: 1.3em; padding: 0 10px; white-space: normal; width: 23%;}

.items-view-list .control-buttons {
    position: absolute;
    display: block;
    right: 15px;
    top: 30%;
    visibility: visible;
    background: #FFFFFF;
    color: #949FB2;
    padding: 5px 8px;
    border-radius: 7px;
}

.items-view-list .items-inner .label {margin: 10px;}

.items-view-list .items-price {font-size: 1.3em; width: 10%;}

.items-view-list .items-details {width: 40%; padding: 10px; overflow: hidden; white-space: normal;}

.items-view-list .items-add {margin: 0;}

/*Media Queries For List Items*/
@media screen and (max-width: 66.7em) {

    .items-view-list .items-details {width: 30%;}

}

@media screen and (max-width: 60em) {

    .items-view-grid ul li {width: 49%;}

    .items-view-list .items-image {display: none;}

}

@media screen and (max-width: 90em) {

    .items-view-grid ul li {width: 33%;}

    .items-view-list .items-image {display: none;}

}

@media screen and (max-width: 47.375em) {

    .items-view-list .items-image {width: 20%;}

    .items-view-list .items-title {width: auto;}

    .items-view-list .items-details {display: block; width: 100%; margin: 10px 0;}

    .items-view-list .items-add {margin: 10px;}

}

@media screen and (max-width: 40.125em) {

    .items-view-grid ul li {width: 100%;}

}

/* ========================================================================
 * Pricing Page
 * ======================================================================== */

.price-blocks {
    text-align: center;
    padding-top: 12px;
    background-color: #F1F1F1;
    border: 2px solid #DDDDDD;
    margin-top: 0;
    margin-bottom: 10px;
    border-radius: 3px;
}

.price-blocks:hover {background: #FFFFFF;}

.price-blocks table td {border-top: 0;}

.price-blocks-hole {
    border-radius: 100px;
    margin: 0 auto;
    width: 30px;
    height: 30px;
    background: #FFFFFF;
    border: 2px solid #DDDDDD;
}

.price-blocks h3 {text-transform: uppercase; font-weight: 800; letter-spacing: -1px;}

.price-blocks table {text-transform: uppercase; margin: 0;}

.price-blocks table td {text-align: center;}

.price-round {
    width: 150px;
    height: 150px;
    color: #FFFFFF;
    border-radius: 50%;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    line-height: 1px;
    background: #82B964;
}

.price-tariff {
    font-size: 60px;
    font-weight: 800;
    text-align: center;
    top: 65px;
    position: relative;
}

.price-value {font-size: 30px; vertical-align: top;}

.price-period {
    top: 110px;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 600;
    position: relative;
}

.price-apply-button-block {background: #DDDDDD; padding: 15px;}

/*Alternative Colors*/
.alternative .price-blocks {text-align: center; border: none; background-color: #595F66;}

.alternative .price-blocks h3 {color: #FFFFFF;}

.alternative .price-blocks:hover {
    background: #999999;
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.alternative .popular {background: #5BC0DE;}
.alternative .popular .price-round {background: #CC6699;}

.alternative .price-blocks table td {border-top: 1px solid #DDDDDD;}

.alternative .price-apply-button-block {background: #C1C1C1; color: #555555; padding: 20px;}

.alternative .price-blocks:hover .price-apply-button-block {background: #A1A1A1;}

/*Price Table */
.pricing-table td.yes {color: #FFFFFF; border: none; text-align: center; background-color: #82B964 !important;}

.pricing-table td.no {text-align: center; background-color: #F9F9F9 !important;}

/*Coupons */
.coupons {
    position: relative;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-radius: 4px;
    min-height: 60px;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    /*background: #c6d5d3;*/
}

.coupons-inner {
    margin-left: 0px;
    font-size: 0.85em;
    font-weight: 600;
    border-left: 5px dashed #FFFFFF;
    padding: 15px;
    background: #DDDDDD;
}

.coupons-code {
    font-size: 1.7em;
    font-weight: 800;
    color: #fff;
    padding: 5px;
    margin-top: 5px;
    background-color: #858689;
}

.coupons .one-time {
    margin-top: 10px;
    color: #999;
    border: 2px solid #999999;
    display: inline-block;
    padding: 3px 7px;
    font-weight: 800;
    font-size: 0.75em
}

/* ========================================================================
 * Inbox Page
 * ======================================================================== */

.mailinbox [class*="col-md-"] {padding: 0; margin: 0;}

.mailinbox {margin: 0; border-radius: 4px;}

.mailinbox .row {
    background: #81C1D9;
    border-radius: 4px;
    padding: 0;
    margin: 0;
}

.mailinbox .left-content {
    background: #81C1D9;
    height: 100%;
    margin: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.mailinbox .right-content {
    background: #FFFFFF;
    min-height: 800px;
    padding: 15px;
    padding-right: 0;
    padding-bottom: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.mailinbox table a {color: #555555;}

.mailinbox small {display: block;}

.mailinbox .left-content a.list-group-item:hover,
.mailinbox .left-content a.list-group-item:focus {background: #6AB6D2; color: #FFFFFF;}

.mailinbox .left-content a.list-group-item i {font-size: 30px;}

.mailinbox .left-content a.list-group-item:hover i,
.mailinbox .left-content a.list-group-item:focus i {color: #FFFFFF;}

.mailinbox .left-content a.list-group-item.active,
.mailinbox .left-content a.list-group-item.active:hover,
.mailinbox .left-content a.list-group-item.active:focus {background-color: #6ab6d2; border-color: #6ab6d2; color: #FFFFFF;}

.mailinbox .left-content a.list-group-item.active i,
.mailinbox .left-content a.list-group-item.active:hover i,
.mailinbox .left-content a.list-group-item.active:focus i {color: #FFFFFF;}

.mailinbox .left-content .list-group-item b {font-size: 0.9em; display: block;}

.mailinbox .left-content .list-group-item {
    border: 0;
    text-align: center;
    background: #81c1d9;
    font-family: 'Open Sans', sans-serif;
    font-size: .99em;
    text-transform: uppercase;
    font-weight: 700;
    color: #FFFFFF;
    padding: 10px 15px;
    border-bottom: 1px solid #6AB6D2;
    border-top: 1px solid #6AB6D2
}

.mailinbox .left-content a.list-group-item.active > .badge,
.mailinbox .left-content .list-group-item .badge {
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    top: 10px;
    right: 10px;
    border-radius: 20px;
    padding: 2px 7px;
    color: #81C1D9;
    background: #FFFFFF;
    font-size: .85em
}

.mailinbox .left-content .list-group-item:first-child {border-top-right-radius: 0; border-top-left-radius: 4px;}

.inbox tbody tr.selected td {background: #FFFBDB;}

/*Checkbox Design - we use here unique style for checkbox and unique marking*/
.mailinbox input[type=checkbox] {display: none;} /* to hide the checkbox itself */

/*Center Checkbox*/
.mailinbox thead th:first-child {text-align: center;}

.mailinbox th input[type=checkbox] + label:before {
    content: "\f0c8";
    color: #fff;
    font-family: FontAwesome;
    text-align: center;
    position: inherit;
    display: block;
    font-weight: 300;
    font-size: 1.3em;
    line-height: 9px;
    padding: 0;
}

.mailinbox th input[type=checkbox] + label:after {display: none;}

/* checked icon for thead */
.mailinbox th input[type=checkbox]:checked + label:before {content: "\f14a"; color: #FFFFFF;}

.mailinbox input[type=checkbox] + label:before {
    content: "\f111";
    color: #D0DAD9;
    font-family: FontAwesome;
    position: absolute;
    top: 25px;
    right: -8px;
    display: block;
    font-weight: 300;
    font-size: 1.3em;
    line-height: .85em;
    padding: 0;
    z-index: 2;
}

.mailinbox input[type=checkbox] + label:after {
    font-family: FontAwesome;
    content: "\f111";
    position: absolute;
    z-index: 1;
    color: #fff;
    font-size: 1.8em;
    top: 15px;
    right: -11px;
    display: block;
}

/* checked icon */
.mailinbox input[type=checkbox]:checked + label:before {content: "\f058"; color: #595F66;}

/*Check and UnCheck Flags*/
.mailinbox .fa-flag.flagged-grey {
    color: #CACAC8;
    font-size: 1.3em;
    margin-top: 4px;
    text-decoration: none;
    cursor: pointer;
    line-height: .85em;
}

.mailinbox .fa-flag.flagged-yellow {
    color: #F4B66D;
    font-size: 1.3em;
    margin-top: 4px;
    text-decoration: none;
    cursor: pointer;
    line-height: .85em;
}

.mailinbox .user-image {
    position: relative;
    margin: 5px;
    display: block;
    width: 40px;
    height: 40px;
}

.mailinbox .user-image img {
    display: block;
    max-width: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #CACBCF;
}

.inbox-new-message {
    position: relative;
    margin-top: 15px;
    background: #F1F1F1;
    border-radius: 3px;
    padding: 15px;
}

.inbox-new-message:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: #F1F1F1 transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.loader-darkener {
    position: absolute;
    top: 0;
    z-index: 3;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

/*Spinner (Appears while page refreshing*/
.dummy-loader {position: absolute; color: #FFFFFF; top: 40%; left: 49%;}
.dummy-loader:after {font-family: FontAwesome; position: relative; font-size: 5em; content: "\f1ce";}

.table-relative {position: relative;}

.mailinbox tbody tr.unread td {background: #FFFFFF; font-weight: 700;}
.mailinbox tbody tr.selected td { background: #FFFBDB; }

/*Media Queries For Inbox*/
@media (min-width: 768px) and (max-width: 991px) {

    .mailinbox .row {background: #F1F1F1;}
    .mailinbox .left-content .list-group-item b {display: inline-block;}
    .mailinbox .left-content a.list-group-item i {font-size: 16px; margin-right: 5px;}
    .mailinbox .left-content .list-group-item {text-align: left;}
    .mailinbox .right-content {background: #FFFFFF; min-height: 700px; padding: 15px 0; box-shadow: none; border-radius: 4px;}
    .mailinbox .left-content {border-radius: 4px;}
    .mailinbox .left-content .list-group-item:first-child {border-top-right-radius: 4px;}

}

@media (max-width: 768px) {

    .mailinbox .row {background: #F1F1F1;}
    .mailinbox .left-content .list-group-item b {display: inline-block;}
    .mailinbox .left-content a.list-group-item i {font-size: 16px; margin-right: 5px;}
    .mailinbox .left-content .list-group-item {text-align: left;}
    .mailinbox .right-content {background: #FFFFFF; min-height: 800px; padding: 15px 0; box-shadow: none; border-radius: 4px;}
    .mailinbox .left-content {border-radius: 4px;}
    .mailinbox .left-content .list-group-item:first-child {border-top-right-radius: 4px;}

}

/* ========================================================================
 * Profile Page
 * ======================================================================== */


.main-info {
    position: absolute;
    text-transform: uppercase;
    left: 50%;
    display: block;
    width: 60%;
    color: #FFFFFF;
    top: 20px;
    margin-left: -30%;
    z-index: 5;
    text-align: center;
    padding: 10px;
}

.main-info h1 {
    font-size: 2.5em;
    text-transform: none;
    letter-spacing: -1px;
    font-weight: 700;
    padding: 0;
    margin: 10px 0 5px;
}

.main-info .user-img {margin: 0 auto; display: block; max-width: 150px;}
.main-info .user-img img {display: inline-block; max-width: 100%; border-radius: 50%; box-shadow: 0 0 0 7px #FFFFFF;}

.user-profile {border-top-left-radius: 3px; border-top-right-radius: 3px;}
.user-profile-info {padding: 10px; background: #CACAC8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}

.profile-header {
    padding-bottom: 5px;
    color: #CACAC8;
    display: block;
    font-weight: 700;
    font-size: 1.6em;
    margin-bottom: 10px;
    margin-top: 5px;
    border-bottom: 4px solid #CACAC8;
}

.tiny-user-block {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    background: #F1F1F1;
    padding-left: 90px;
    border-radius: 3px;
    font-size: .85em;
}

.tiny-user-block h3 {padding: 0; font-size: 1.3em; margin: 0 0 4px;}

.tiny-user-block ul {list-style: none outside none; color: #999999; margin-bottom: 4px; padding: 0;}

.tiny-user-block .user-img {
    position: absolute;
    left: 20px;
    top: 20px;
    margin: 0 auto;
    display: block;
    max-width: 50px;
}

.tiny-user-block .user-img img {display: inline-block; max-width: 100%; border-radius: 50%; box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.2);}

/* Profile Blog */
.user-blog-entry {
    position: relative;
    margin-bottom: 10px;
    padding: 15px;
    padding-left: 85px;
    border-bottom: 1px solid #CACAC8;
}

.user-blog-entry h2 {
    font-weight: 300;
    padding: 0;
    margin: 0;
    margin-top: -20px;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.user-blog-entry .info {
    line-height: 16px;
    position: absolute;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    background: #FFFFFF;
    display: block;
    width: 70px;
    padding: 10px;
    color: #CACAC8;
    top: 0;
    left: 0;
}

.user-blog-entry .info p.month {font-size: 1.4em; letter-spacing: 1px;}
.user-blog-entry .info p.day {font-size: 3.1em; letter-spacing: -1px;}
.user-blog-entry .info p.time {font-size: 1.3em; font-weight: 600;}

/* Blog Tags */
.user-blog-entry .blog-tags {margin-top: 10px;}

.user-blog-entry .blog-tags a {
    position: relative;
    display: inline-block;
    padding: 3px 8px 3px 20px;
    margin: 0 3px 5px 0;
    background: #CACAC8;
    border-radius: 3px;
    text-transform: uppercase;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #FFFFFF;
    font-weight: 700;
    font-size: .75em;
    text-decoration: none;
}

.user-blog-entry .blog-tags a:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 8px;
    width: 6px;
    height: 6px;
    background: #FFFFFF;
    border-radius: 3px;
}

.user-blog-entry .blog-tags a:hover {
    background: #81C1D9;
    color: #FFFFFF;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

.user-profile-chat {background: #F1F1F1;}

/* ========================================================================
 * Invoice Page
 * ======================================================================== */

.invoice-block {padding: 15px; background: #FFFFFF; border-radius: 3px;}

.invoice-block .page-header {border-bottom: 8px solid #F1F1F1;}
.invoice-block .page-header h1 {font-size: 1.7em; font-weight: 700; padding: 10px 0;}

.invoice-block .logo-block {display: block; background: #FFFFFF;}
.invoice-block .logo-block img {display: inline-block; max-width: 100%; border: none;}

.invoice-block .well {background-color: transparent; border: 0;}

.invoice-block .company-details {border-top: 1px solid #CBD2B0;}

.invoice-block address {position: relative; margin-bottom: 0; padding-left: 90px;}

.invoice-block .from-to {
    position: absolute;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
    font-size: 1.5em;
    top: 0;
    left: 15px;
}

.invoice-block table tbody {border-bottom: 5px solid #CBD2B0;}
.invoice-block table tbody h4 {padding: 0; padding-bottom: 3px; margin: 0;}

.invoice-block .product-num {
    position: absolute;
    background: #33383d;
    font-size: 0.9em;
    padding: 7px;
    width: 31px;
    text-align: center;
    border-radius: 35px;
    color: #fff;
    font-weight: 700;
    top: 0;
    left: 15px;
}

.invoice-block .product-name {position: relative; margin-bottom: 0; padding-left: 70px;}

.invoice-block table tfoot td {font-weight: 700; font-size: 1.2em;}
.invoice-block table tbody td {padding: 8px;}
.invoice-block table tfoot td.noborders {border-left: 0; border-bottom: 0;}

.invoice-block .remittance {border-top: 1px solid #CBD2B0;}
.invoice-block .remittance ul {list-style: none outside none; margin-bottom: 10px; padding: 0;}

/* ========================================================================
 * Calendar
 * ======================================================================== */
        
#external-events {padding: 0 -15px; text-align: left; margin-bottom: 15px;}
#external-events h4 {font-size: 16px; margin-top: 0; padding-top: 1em;}

.external-event {
    margin: 10px 0;
    border-radius: 3px;
    padding: 8px 20px 8px 6px;
    background: #1AA0BD;
    color: #FFFFFF;
    font-size: .9em;
    cursor: move;
}

.external-event i {font-size: 1em; position :absolute; right: 10px; top: 30%;}

#external-events p {margin: 1.5em 0; font-size: .85em; color: #666666;}
#external-events p input {margin: 0; vertical-align: middle;}

#calendar {width: 100%;}

/* ========================================================================
 * Timeline
 * ======================================================================== */

.tmtimeline {margin: 0; padding: 0; list-style: none; position: relative;}

/* The line */
.tmtimeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    background: #D8E3E6;
    left: 20%;
    margin-left: -8px;
}

/* The date/time */
.tmtimeline > li .tmtime {display: block; width: 25%; padding-right: 10%; position: absolute;}

.tmtimeline > li .tmtime:before {
    display: block;
    content: '';
    position: absolute;
    top: 21px;
    right: -18px;
    background: #D8E3E6;
    height: 7px;
    width: 20%;
    z-index: 2;
}

.tmtimeline > li .tmtime span {display: block; padding-right: 10px; text-align: right; color: #858689;}
.tmtimeline > li .tmtime span:first-child {font-size: 0.9em;}
.tmtimeline > li .tmtime span:last-child {font-size: 2.1em;}

/* Right content */
.tmtimeline > li .tmlabel {
    margin: -40px 0 15px 25%;
    background: #f1f1f1;
    padding: 15px;
    padding-left: 40px;
    position: relative;
    border: 2px solid #DDDDDD;
    border-radius: 3px;
}

.tmtimeline > li:nth-child(odd) .tmlabel {background: #F9F9F9;}

.tmtimeline > li .tmlabel h2 {margin-top: 0px; font-weight: 700; font-size: 1.2em; padding: 0;}

/* The Round */
.tmtimeline > li .tmlabel:after {
    left: 10px;
    content: "";
    height: 15px;
    background: #D8E3E6;
    box-shadow: 0 0 0 5px #FFFFFF;
    width: 15px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
}

.tmtimeline > li:nth-child(odd) .tmlabel:after {border-right-color: #F9F9F9;}

/* The icons */
.tmtimeline > li .tmicon {
    width: 45px;
    height: 45px;
    font-size: 0;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 0 7px #D8E3E6;
    text-align: center;
    left: 20%;
    padding: 5px;
    border: 5px solid #FFFFFF;
    top: 5px;
    margin: 0 0 0 -27px;
}

.tmtimeline > li .tmicon:after {
    position: absolute;
    content: "";
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.tmtimeline > li .tmicon:before {
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #FFFFFF;
}

/* Media Queries For Timeline */
@media screen and (max-width: 65.375em) {

    .tmtimeline > li .tmtime span:last-child {font-size: 1.5em;}

}

@media screen and (max-width: 47.2em) {

    .tmtimeline:before {display: none;}

    .tmtimeline > li .tmlabel:after {display: none;}
    .tmtimeline > li .tmtime:before {display: none;}

    .tmtimeline > li .tmtime {width: 100%; position: relative; padding: 0 0 20px 0;}

    .tmtimeline > li .tmtime span {text-align: left;}

    .tmtimeline > li .tmlabel {margin: 0 0 30px 0; padding: 1em;}
    .tmtimeline > li .tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #E2EAE9;
        top: -20px;
    }

    .tmtimeline > li:nth-child(odd) .tmlabel:after {border-right-color: transparent; border-bottom-color: #F1F5F5;}

    .tmtimeline > li .tmicon {
        position: relative;
        float: right;
        left: auto;
        margin: -55px 5px 0 0px;
    }

}

/* ========================================================================
 * Font Icons Page
 * ======================================================================== */

.icon-hover {
    display: block;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 10px 5px;
    background: #949FB2;
    margin-bottom: 15px;
    height: 100px;
    text-align: center
}

.glyph-hover {
    display: block;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 10px 5px;
    background: #949FB2;
    margin-bottom: 15px;
    height: 110px;
    text-align: center
}

.icon-hover .text-muted {color: #FFFFFF;}

.glyph-hover .glyphicon {
    font-size: 42px;
    margin: 0 auto 10px;
    text-shadow: 2px 2px 0 rgba(0,0,0,.2);
    display: block;
    clear: both
}

.glyph-hover .glyphicon-class {font-size: .8em;}

.glyph-hover:hover, .icon-hover:hover {background: #33383D;}

.icon-hover i {display: block; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); clear: both;}

.icon-hover span {font-size: .8em;}

/* ========================================================================
 * JS and JQUERY PLUGINS
 * ======================================================================== */
/* ========================================================================
 * Chart JS
 * ======================================================================== */

.chartjs-container {text-align: center; margin-top: 10px;}

/* ========================================================================
 * FlotChart Charts
 * ======================================================================== */

.flotchart-placeholder {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    margin-right: 20px;
    margin-bottom: 15px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.2em;
}

.flotchart-block {display: block; text-align: center;}

.flotchart-container {
    display: block;
    background: #FFFFFF;
    width: 100%;
    height: 250px;
    padding: 20px;
    border-radius: 3px;
    margin: 0 auto 15px;
}

.legendLabel {font-size: 11px; line-height: 20px;}

.legendColorBox div > div {width: 5px; height: 5px; margin-right: 2px; border-radius: 50%;}

.flotchart-container .inner-stuff {
    position: absolute;
    color: #FFFFFF;
    width: 150px;
    top: 20px;
    right: 40px;
    z-index: 5;
    display: block;
}

.flotchart-container .inner-stuff label {text-transform: uppercase; font-weight: 700;}

/* ========================================================================
 * Morris Charts
 * ======================================================================== */

.morrischart {
    height: 300px;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 3px;
}

.morris-hover {position: absolute; z-index: 1000;}

/*Morris ToolTip*/
.morris-hover.morris-default-style {
    border-radius: 10px;
    padding: 6px;
    border-radius: 3px;
    color: #999999;
    background: rgba(0, 0, 0, 0.9);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85em;
    text-align: center
}

.morris-hover.morris-default-style .morris-hover-row-label {font-weight: 900; margin: 0.25em 0;}
.morris-hover.morris-default-style .morris-hover-point {white-space: nowrap; margin: 0.1em 0;}

/* MorrisChart on Dark Background */
.morrischart-dark {height: 300px; padding: 15px; background: #33383D; border-radius: 3px;}
.morrischart-dark .morris-hover.morris-default-style {color: #777777; background: rgba(255, 255, 255, 0.85);}

/* ========================================================================
 * Sparklines Charts
 * ======================================================================== */

/*Sparkline Tooltip*/
.jqstooltip {
    padding: 10px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-radius: 3px;
    z-index: 1000;
}

/* ========================================================================
 * EasyPies In Server Stats Block
 * ======================================================================== */

ul.tiny-stats {
    list-style: none outside none;
    margin-bottom: 10px;
    padding: 0;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

ul.tiny-stats li {border-right: 4px solid #DDDDDB;}

@media (max-width: 767px) {

    /*Remove Borders from All Elements*/
    ul.tiny-stats li { border-right: 0 }

}

@media (min-width: 768px) and (max-width: 991px) {

    /*Remove Border from second li element*/
    ul.tiny-stats li:nth-child(2) {border: transparent;}
}

ul.tiny-stats li:last-child {border: transparent;}

.statistic {display: block; margin-bottom: 5px;}
.statistic ul {margin: 0; padding: 0; list-style: none outside none;}
.statistic ul li {border: 0;}

.statistic .title {
    display: inline-block;
    margin: 7px 6px 0;
    font-size: 1em;
    text-overflow: ellipsis;
    font-weight: 600;
    clear: both;
}
.statistic .title small {display: block;}
.statistic ul li:first-child {margin-top: 6px; margin-bottom: 4px;}

.easy-pie-chart-container {text-align: center; float: left; margin-right: 5px; display: inline-block;}

.chart {position: relative; display: block; width: 50px; height: 50px; text-align: center;}
.chart canvas {position: absolute; top: 0; left: 0;}

.percent {font-weight: 700; color: #969FA1; font-size: .9em; display: inline-block; line-height: 50px; z-index: 2;}
.percent:after {content: '%'; margin-left: 0.1em; font-size: .9em;}

/* ========================================================================
 * DATATABLES.NET COLVIS PLUGIN BUTTON
 * ======================================================================== */

div.ColVis {float: right; margin-bottom: 1em;}

button.ColVis_Button,
ul.ColVis_collection li {
    position: relative;
    float: left;
    margin-left: 3px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 0.88em;
    background: #C0C2C7;
    border-radius: 3px;
    color: #FFFFFF;
    font-weight: 700;
    border: 0;
    white-space: nowrap;
}

.ColVis_Button:hover, ul.ColVis_collection li:hover { text-decoration: none !important; }

button.ColVis_Button {height: 30px; margin-bottom: 4px; padding: 3px 8px;}
button.ColVis_Button::-moz-focus-inner {border: none !important; padding: 0;}
button.ColVis_Button:active {outline: none;}

ul.ColVis_collection {
    width: 135px;
    padding: 8px 8px 4px 8px;
    margin: 0;
    background-color: #F3F3F3;
    overflow: hidden;
    z-index: 2002;
}

ul.ColVis_collection li {
    position: relative;
    height: auto;
    left: 0;
    right: 0;
    padding: 0.5em;
    display: block;
    float: none;
    margin-bottom: 4px;
}

ul.ColVis_collection li {text-align: left;}

ul.ColVis_collection li.ColVis_Button:hover {background-color: #F0F0F0;}

ul.ColVis_collection li span {display: inline-block; padding-left: 0.5em; cursor: pointer;}

span.ColVis_radio {display: inline-block; width: 20px;}

div.ColVis_catcher {position: absolute; z-index: 1101;}

/* ========================================================================
 * Nanoscroller
 * ======================================================================== */

.nano {position : relative; width : 100%; height : 100%; overflow : hidden;}

.nano > .nano-content {
    position : absolute;
    overflow : scroll;
    overflow-x : hidden;
    top : 0;
    right : 0;
    bottom : 0;
    left : 0;
}

.nano > .nano-content:focus { outline: thin dotted; }
.nano > .nano-content::-webkit-scrollbar {visibility: hidden;}

.has-scrollbar > .nano-content::-webkit-scrollbar {visibility: visible;}

.nano > .nano-pane {
    background : rgba(0, 0, 0, 0.25);
    position : absolute;
    width : 10px;
    right : 0;
    top : 0;
    bottom : 0;
    visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
    opacity : .01;
    -webkit-transition : .2s;
    -moz-transition : .2s;
    -o-transition : .2s;
    transition : .2s;
}

.nano > .nano-pane > .nano-slider {background: #FFFFFF; position : relative; margin : 0;}

.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {visibility : visible\9; opacity : 0.99;}

/* ========================================================================
 * Nestable Lists
 * ======================================================================== */

#nestable-menu {padding: 0; margin: 0;}

.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 20px;
}

.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
}

.dd-list:after {clear: both;}

.dd-list .dd-list {padding-left: 30px;}

.dd-collapsed .dd-list {display: none;}

.dd-item,
.dd-empty,
.dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 20px;
    font-size: 13px;
    line-height: 20px;
}

.dd-handle {
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
    color: #333333;
    text-decoration: none;
    font-weight: 700;
    border: 2px solid #DDDDDD;
    background: #FAFAFA;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.dd-handle:hover {background: #FFFFFF;}

.dd-item > button {
    display: block;
    position: relative;
    cursor: pointer;
    float: left;
    width: 25px;
    height: 20px;
    margin: 5px 0;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}

/*Collapse Button*/
.dd-item > button:before {
    content: '\f055';
    font-family: "FontAwesome";
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    text-indent: 0;
}

.dd-item > button[data-action="collapse"]:before {content: '\f056';}

/*Placeholder*/
.dd-placeholder,
.dd-empty {
    margin: 5px 0;
    padding: 0;
    min-height: 30px;
    background: #FFFFFF url(../images/bg-stripped.png);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.dd-empty {border: 1px dashed #BBBBBB; min-height: 100px; background-color: #E5E5E5;}

.dd-dragel {position: absolute; pointer-events: none; z-index: 9999;}

.dd-dragel > .dd-item .dd-handle {margin-top: 0; border: 0;}

.dd-dragel .dd-handle {-webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1); box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);}

/*Nestable Extras*/
.nestable-lists {
    display: block;
    clear: both;
    padding: 30px 0;
    width: 100%;
    border: 0;
    border-top: 2px solid #DDDDDD;
    border-bottom: 2px solid #DDDDDD;
}

#nestable-menu {padding: 0;}

.nestable2 .dd-handle {color: #FFFFFF; border: 2px solid #999999; background: #BBBBBB;}
.nestable2 .dd-handle:hover {background: #BBBBBB;}

.nestable2 .dd-item > button:before {color: #FFFFFF;}

.dd-hover > .dd-handle {background: #2EA8E5 !important;}

.nestable3 .dd-item,
.nestable4 .dd-item {margin: 0;}

.nestable3 .dd-list .dd-list,
.nestable4 .dd-list .dd-list {margin: 0; padding: 0;}

/*Style Inner Content*/
.task-content {
    display: block;
    height: auto;
    margin: 0;
    padding: 10px 10px 5px 40px;
    color: #333;
    text-decoration: none;
    border-top: 2px inset rgba(0, 0, 0, 0.2);
    border-bottom: 2px inset rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

.nestable4 .task-content {padding: 10px 10px 5px 80px;}

.task-content:hover {background: #FFFFFF;}

.task-content h4 {margin: 0; font-size: 1.2em; margin-bottom: 5px; padding: 0;}

.task-content .desc {padding: 0; line-height: 14px; margin: 0; margin-bottom: 0px;}

.task-content.header {display: block; padding: 10px 5px; font-weight: 700; text-transform: uppercase;}

/*Styling Sub Items*/
.nestable3 .dd-item > button,
.nestable4 .dd-item > button {position: absolute; right: 5px; top: 2px;}

.dd-dragel > .task-item > .task-content {margin: 0;}

.task-item > button {margin-left: 30px;}

/*Styling Handle*/

.task-handle {
    position: absolute;
    margin: 0;
    width: 32px;
    background: transparent;
    height: 100%;
    left: 0;
    top: 2px;
    bottom: 2px;
    cursor: move;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 0;
}

.nestable3 .dd-handle,
.nestable4 .dd-handle { border: 0 }

.task-handle:before {
    font-family: "entypo";
    content: '\e8a2';
    display: block;
    border: 0;
    padding: 13px 0px;
    background: #969FA1;
    position: absolute;
    left: 10px;
    top: 21%;
    border-radius: 15px;
    width: 12px;
    text-align: center;
    text-indent: 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: normal;
}

.nestable4 .dd-handle:hover {background: none;}

/*Top Levels - Name of Task Groups*/
.nestable3 ol li, .nestable4 ol li {background: none;}

.task-content.header {display: block; padding: 5px 10px; font-weight: 700; text-transform: uppercase;}

/*Hide handler from main li */
.nestable3 li .dd-handle, .nestable4 li .dd-handle {display: none;}

/*Show handler in child ol li */    
.nestable3 li ol li .dd-handle, .nestable4 li ol li .dd-handle {display: block;}

.task-handle:hover {background: #DDDDDD;}

/*Color Styling*/
.nestable3 .dd-list ol li {background: #F0F0ED;}

.nestable4 .dd-list ol.new li {background: #DFF3F9;}
.nestable4 .dd-list ol.new li:before {
    position: absolute;
    left: 30px;
    top: 21%;
    display: block;
    background: #5BC0DE;
    border-radius: 50%;
    color: #FFFFFF;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 2em;
    font-family: 'FontAwesome';
    content: "\f0eb";
}

.nestable4 .dd-list ol.new li h4 {color: #5BC0DE;}

.nestable4 .dd-list ol.important li {background: #F7E0DB;}

.nestable4 .dd-list ol.important li:before {
    position: absolute;
    left: 30px;
    top: 21%;
    display: block;
    background: #D24D33;
    border-radius: 50%;
    color: #FFFFFF;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 2em;
    font-family: 'FontAwesome';
    content: "\f0e7";
}

.nestable4 .dd-item > button:before {content: '\f13a';}

.nestable4 .dd-item > button[data-action="collapse"]:before {content: '\f139';}

.nestable4 .dd-list ol.important li h4 {color: #D24D33;}

.nestable3 .dd-list ol.completed li {text-decoration: line-through;}

.nestable4 .dd-list ol.completed li {background: #D9EAD0; text-decoration: line-through;}
.nestable4 .dd-list ol.completed li:before {
    position: absolute;
    left: 30px;
    top: 21%;
    display: block;
    background: #82B964;
    border-radius: 50%;
    color: #FFFFFF;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 2em;
    font-family: 'FontAwesome';
    content: "\f00c";
}

.nestable4 .dd-list ol.completed li h4 {color: #82B964;}

/* ========================================================================
 * Tree Menu
 * ======================================================================== */

.tree {min-height: 20px;}

.tree li span a {color: #555555;}

.tree li {list-style-type: none; margin: 0; padding: 10px 5px 0 5px; position: relative;}

.tree li::before, .tree li::after {content: ""; left: -20px; position: absolute; right: auto;}

.tree li::before {border-left: 2px solid #C0C2C7; bottom: 50px; height: 100%; top: 0; width: 1px;}

.tree li::after {border-top: 2px solid #C0C2C7; height: 20px; top: 30px; width: 25px;}

.tree li span {
    border: 2px solid #C0C2C7;
    border-radius: 5px;
    font-size: 0.9em;
    display: inline-block;
    padding: 5px 8px;
    margin-top: 8px;
    text-decoration: none;
}

.tree li .label.label-danger {border: 2px solid #D24D33;}
.tree li .label.label-info {border: 2px solid #5BC0DE;}
.tree li .label.label-warning {border: 2px solid #f0AD4E;}
.tree li .label.label-default {border: 2px solid #999999;}
.tree li .label.label-success {border: 2px solid #82B964;}
.tree li.parent_li > span {cursor: pointer;}

.tree > ul > li::before, .tree > ul > li:after {border: 0;}

.tree li:last-child::before {height: 30px;}

.tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span {background: #969FA1; border: 2px solid #969FA1; color: #FFFFFF;}

/* ========================================================================
 * Bootstrap Forms
 * ======================================================================== */

.form-control {
    display: block;
    width: 100%;
    height: 38px;
    padding: 8px 10px;
    font-size: 13px;
    color: #555555;
    font-weight: 600;
    background-color: #FFFFFF;
    border: 2px solid #C0C2C7;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -ms-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    -webkit-transition: border-color 0.3s;
}

.form-control:focus {border-color: #969FA1; -webkit-box-shadow: none; box-shadow: none;}

.form-control::-moz-placeholder {color: #999999; opacity: 1;}
.form-control:-ms-input-placeholder {color: #999999;}
.form-control::-webkit-input-placeholder {color: #999999;}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {cursor: not-allowed; background-color: #EEEEEE; opacity: 1;}

.input-group-addon {background-color: #EEEEEE; border: 2px solid #C0C2C7; border-radius: 3px;}

.input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn {padding: 4px 10px;}
.input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {padding: 9px 16px;}

.has-feedback .form-control-feedback {top: 25px; width: 38px; height: 38px; line-height: 38px;}

.help-block {display: block; font-size: 11px; margin-top: 6px; padding: 0px 1px; margin-bottom: 0; color: #999999;}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {color: #82B964;}

.has-success .form-control {border-color: #82B964; background: #CAE1BD; -webkit-box-shadow: none; box-shadow: none;}
.has-success .form-control:focus {border-color: #969FA1; -webkit-box-shadow: none; box-shadow: none;}

.has-success .input-group-addon {color: #82B964; background-color: #DFF0D8; border-color: #82B964;}

.has-success .form-control-feedback {color: #82B964;}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {color: #FCB42E;}

.has-warning .form-control {border-color: #FCB42E; background: #FFF4E1; -webkit-box-shadow: none; box-shadow: none;}
.has-warning .form-control:focus {border-color: #969FA1; -webkit-box-shadow: none; box-shadow: none;}

.has-warning .input-group-addon {color: #FCB42E; background-color: #FCF8E3; border-color: #FCB42E;}

.has-warning .form-control-feedback {color: #FCB42E;}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {color: #D24D33;}

.has-error .form-control {border-color: #D24D33; background: #F0C6BD; -webkit-box-shadow: none; box-shadow: none;}
.has-error .form-control:focus {border-color: #969FA1; -webkit-box-shadow: none; box-shadow: none;}

.has-error .input-group-addon {color: #D24D33; background-color: #F2DEDE; border-color: #D24D33;}

.has-error .form-control-feedback {color: #D24D33;}

legend {
    display: block;
    font-weight: 400;
    padding: 0 0 10px;
    margin-bottom: 20px;
    font-size: 1.3em;
    line-height: inherit;
    border-bottom: 5px solid rgba(0, 0, 0, 0.1);
}

/* ========================================================================
 * ORB Forms
 * ======================================================================== */

.orb-form {outline: none;}

.orb-form header {
    display: block;
    letter-spacing:-1px;
    padding: 0 10px 10px;
    margin:0 -10px;
    border-bottom: 5px solid rgba(0, 0, 0, 0.1);
    font-size: 1.7em;
    font-weight: 400;
}

.orb-form fieldset {display: block; padding: 10px 0; border: none;}
.orb-form fieldset + fieldset {border-top: 5px solid rgba(0,0,0,.1);}

.orb-form section {margin-bottom: 10px;}

.orb-form footer {display: block; padding: 10px; border-top: 5px solid rgba(0,0,0,.1); margin: 0 -10px;}

/*Small Hack For Inner Widgets Forms*/
.inner-spacer .orb-form footer {padding-bottom:0;}

.orb-form footer:after {content: ''; display: table; clear: both;}

.orb-form a {color: #969FA1;}

.orb-form .label {display: block; margin-bottom: 6px; line-height: 19px; font-weight: 400;}
.orb-form .label.col {margin: 0; padding-top: 10px;}

.orb-form .note {
    margin-top: 6px;
    padding: 0 1px;
    font-size: 11px;
    line-height: 15px;
    color: #999999;
}

.orb-form .input,
.orb-form .select,
.orb-form .textarea,
.orb-form .radio,
.orb-form .checkbox,
.orb-form .toggle,
.orb-form .button {position: relative; display: block;}

.orb-form .input input,
.orb-form .select select,
.orb-form .textarea textarea {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    font-weight: 600;
    height: 38px;
    padding: 8px 10px;
    outline: none;
    border-width: 2px;
    border-radius: 3px;
    border-style: solid;
    background: #FFFFFF;
    appearance: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.orb-form .progress {
    float: right;
    height:36px;
    font-weight:300;
    font-size:2em;
    color: #82B964;
      background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* file inputs */
.orb-form .input-file .button {
    position: absolute;
    top: 4px;
    right: 4px;
    border-radius: 3px;
    font-weight: 600;
    float: none;
    height: 30px;
    margin: 0;
    padding: 0 20px;
    font-size: 13px;
    line-height: 31px;
}

.orb-form .input-file .button:hover {box-shadow: none;}

.orb-form .input-file .button input {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    font-size: 29px;
    cursor: pointer;
    opacity: 0;
}

/* selects */
.orb-form .select i {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 6px;
    height: 9px;
    background: #FFFFFF;
    box-shadow: 0 0 0 12px #FFFFFF;
    pointer-events: none;
}

.orb-form .select i:after,
.orb-form .select i:before {
    content: '';
    position: absolute;
    right: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.orb-form .select i:after {bottom: 0; border-top: 4px solid #555555;}

.orb-form .select i:before {top: 0; border-bottom: 4px solid #555555;}

.orb-form .select-multiple select {height: auto;}

/* textareas */
.orb-form .textarea textarea {height: auto; resize: none;}
.orb-form .textarea-resizable textarea {resize: vertical;}
.orb-form .textarea-expandable textarea {height: 38px;}
.orb-form .textarea-expandable textarea:focus {height: auto;}

.orb-form .radio,
.orb-form .checkbox {
    margin-bottom: 4px;
    padding-left: 27px;
    line-height: 27px;
    color: #404040;
    cursor: pointer;
}

.orb-form .radio:last-child,
.orb-form .checkbox:last-child {margin-bottom: 0;}

.orb-form .radio input,
.orb-form .checkbox input {position: absolute; left: -9999px;}

.orb-form .radio i,
.orb-form .checkbox i {
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    width: 13px;
    height: 13px;
    outline: none;
    border-width: 2px;
    border-style: solid;
    background: #FFFFFF;
}

.orb-form .radio i {border-radius: 50%;}

.orb-form .radio input + i:after,
.orb-form .checkbox input + i:after {
    position: absolute;
    opacity: 0;
    -ms-transition: opacity .1s;
    -moz-transition: opacity .1s;
    -webkit-transition: opacity .1s;
}

.orb-form .radio input + i:after {
    content: '';
    top: 4px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.orb-form .checkbox input + i:after {
    content: '\f00c';
    top: -1px;
    left: -1px;
    width: 15px;
    height: 15px;
    font: normal 12px/16px FontAwesome;
    text-align: center;
}

.orb-form .radio input:checked + i:after,
.orb-form .checkbox input:checked + i:after {opacity: 1;}

.orb-form .inline-group {margin: 0 -30px -4px 0;}

.orb-form .inline-group:after {content: ''; display: table; clear: both;}

.orb-form .inline-group .radio, .orb-form .inline-group .checkbox {float: left; margin-right: 30px;}

.orb-form .inline-group .radio:last-child, .orb-form .inline-group .checkbox:last-child {margin-bottom: 4px;}

.orb-form .toggle {
    margin-bottom: 4px;
    padding-right: 61px;
    line-height: 27px;
    font-weight: 400;
    cursor: pointer;
}

.orb-form .toggle:last-child {margin-bottom: 0;}

.orb-form .toggle input {position: absolute; left: -9999px;}

.orb-form .toggle i {
    content: '';
    position: absolute;
    top: 4px;
    right: 1px;
    display: block;
    width: 49px;
    height: 17px;
    border-width: 2px;
    border-style: solid;
    border-radius: 12px;
    background: #FFFFFF;
}

.orb-form .toggle i:after {
    content: 'OFF';
    position: absolute;
    top: 2px;
    right: 8px;
    left: 8px;
    font-style: normal;
    font-size: 9px;
    line-height: 13px;
    font-weight: 700;
    text-align: left;
    color: #5F5F5F;
}

.orb-form .toggle i:before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 4px;
    right: 4px;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    opacity: 1;
    -ms-transition: right .2s;
    -moz-transition: right .2s;
    -webkit-transition: right .2s;
}

.orb-form .toggle input:checked + i:after {content: 'ON'; text-align: right;}

.orb-form .toggle input:checked + i:before { right: 36px; }

.orb-form .rating {margin-bottom: 4px; line-height: 27px; color: #404040;}
.orb-form .rating:last-child { margin-bottom: 0; }
.orb-form .rating input {position: absolute; left: -9999px;}
.orb-form .rating label {
    display: block;
    float: right;
    height: 17px;
    margin-top: 5px;
    padding: 0 2px;
    font-size: 17px;
    line-height: 17px;
    cursor: pointer;
}

.orb-form .button {
    float: right;
    height: 39px;
    overflow: hidden;
    margin: 10px 0 0 20px;
    padding: 0 25px;
    outline: none;
    border: 0;
    font: 300 15px/39px 'Open Sans', Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}

.orb-form .button-uploading {position: relative; color: transparent; cursor: default;}

.orb-form .button-uploading:after {
    content: 'Uploading...';
    position: absolute;
    top: 10px;
    left: 5px;
    width: 100px;
    height: 100%;
    color: #FFFFFF;
    -o-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -webkit-animation: blink 1s linear infinite;
}
@-o-keyframes 
blink { 
    0% {opacity: 1}
    50% {opacity: 0.3}
    100% {opacity: 1}
}
@-ms-keyframes 
blink { 
    0% {opacity: 1}
    50% {opacity: 0.3}
    100% {opacity: 1}
}
@-moz-keyframes 
blink { 
    0% {opacity: 1}
    50% {opacity: 0.3}
    100% {opacity: 1}
}
@-webkit-keyframes 
blink { 
    0% {opacity: 1}
    50% {opacity: 0.3}
    100% {opacity: 1}
}

.orb-form .icon-append,
.orb-form .icon-prepend {
    position: absolute;
    top: 2px;
    width: 29px;
    height: 34px;
    font-size: 1.3em;
    line-height: 29px;
    text-align: center;
}

.orb-form .icon-append {right: 5px; padding-left: 3px; border-left-width: 2px; border-left-style: solid;}
.orb-form .icon-prepend {left: 5px; padding-right: 3px; border-right-width: 2px; border-right-style: solid;}

.orb-form .input .icon-prepend + input,
.orb-form .textarea .icon-prepend + textarea {padding-left: 46px;}

.orb-form .input .icon-append + input,
.orb-form .textarea .icon-append + textarea {padding-right: 46px;}

.orb-form .input .icon-prepend + .icon-append + input,
.orb-form .textarea .icon-prepend + .icon-append + textarea {padding-left: 46px;}

.orb-form .row {margin: 0 -15px;}

.orb-form .row:after {content: ''; display: table; clear: both;}

.orb-form .col {
    float: left;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.orb-form .col-1 {width: 8.33%;}
.orb-form .col-2 {width: 16.66%;}
.orb-form .col-3 {width: 25%;}
.orb-form .col-4 {width: 33.33%;}
.orb-form .col-5 {width: 41.66%;}
.orb-form .col-6 {width: 50%;}
.orb-form .col-7 {width: 58.33%;}
.orb-form .col-8 {width: 66.67%;}
.orb-form .col-9 {width: 75%;}
.orb-form .col-10 {width: 83.33%;}
.orb-form .col-11 {width: 91.66%;}

@media screen and (max-width: 600px) {

    .orb-form .col {float: none; width: 100%;}
    
}

.orb-form .tooltip {
    position: absolute;
    z-index: 1;
    left: -9999px;
    padding: 6px 8px 6px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    opacity: 0;
    -ms-transition: margin .3s, opacity .3s;
    -moz-transition: margin .3s, opacity .3s;
    -webkit-transition: margin .3s, opacity .3s;
}

.orb-form .tooltip:after {content: ''; position: absolute;}

.orb-form .input input:focus + .tooltip,
.orb-form .textarea textarea:focus + .tooltip {opacity: 1;}

.orb-form .tooltip-top-right {bottom: 100%; margin-bottom: 15px;}
.orb-form .tooltip-top-right:after {
    top: 100%;
    right: 16px;
    border-top: 4px solid rgba(0, 0, 0, 0.9);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.orb-form .input input:focus + .tooltip-top-right,
.orb-form .textarea textarea:focus + .tooltip-top-right {right: 0; left: auto; margin-bottom: 5px;}

.orb-form .tooltip-top-left {bottom: 100%; margin-bottom: 15px;}

.orb-form .tooltip-top-left:after {
    top: 100%;
    left: 16px;
    border-top: 4px solid rgba(0, 0, 0, 0.9);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.orb-form .input input:focus + .tooltip-top-left,
.orb-form .textarea textarea:focus + .tooltip-top-left {right: auto; left: 0; margin-bottom: 5px;}

.orb-form .tooltip-right {top: 9px; white-space: nowrap; margin-left: 15px;}
.orb-form .tooltip-right:after {
    top: 6px;
    right: 100%;
    border-top: 4px solid transparent;
    border-right: 4px solid rgba(0, 0, 0, 0.9);
    border-bottom: 4px solid transparent;
}

.orb-form .input input:focus + .tooltip-right,
.orb-form .textarea textarea:focus + .tooltip-right {left: 100%; margin-left: 5px;}

.orb-form .tooltip-left {top: 9px; white-space: nowrap; margin-right: 15px;}
.orb-form .tooltip-left:after {
    top: 6px;
    left: 100%;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid rgba(0, 0, 0, 0.9);
}

.orb-form .input input:focus + .tooltip-left,
.orb-form .textarea textarea:focus + .tooltip-left {right: 100%; left: auto; margin-right: 5px;}

.orb-form .tooltip-bottom-right {top: 100%; margin-top: 15px;}

.orb-form .tooltip-bottom-right:after {
    bottom: 100%;
    right: 16px;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(0, 0, 0, 0.9);
    border-left: 4px solid transparent;
}

.orb-form .input input:focus + .tooltip-bottom-right,
.orb-form .textarea textarea:focus + .tooltip-bottom-right {right: 0; left: auto; margin-top: 5px;}

.orb-form .tooltip-bottom-left {top: 100%; margin-top: 15px;}

.orb-form .tooltip-bottom-left:after {
    bottom: 100%;
    left: 16px;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(0, 0, 0, 0.9);
    border-left: 4px solid transparent;
}

.orb-form .input input:focus + .tooltip-bottom-left,
.orb-form .textarea textarea:focus + .tooltip-bottom-left {right: auto; left: 0; margin-top: 5px;}

.orb-form .input input,
.orb-form .select select,
.orb-form .textarea textarea,
.orb-form .radio i,
.orb-form .checkbox i,
.orb-form .toggle i,
.orb-form .icon-append,
.orb-form .icon-prepend {
    border-color: #c0c2c7;
    -ms-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    -webkit-transition: border-color 0.3s;
}

.orb-form .toggle i:before {background-color: #969FA1;}

.orb-form .rating label {
    color: #C0C2C7;
    -ms-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
}

.orb-form .button {
    background-color: #969FA1;
    opacity: 0.8;
    -ms-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
}

.orb-form .button.button-secondary {background-color: #B3B3B3;}

.orb-form .icon-append, .orb-form .icon-prepend {color: #C0C2C7;}

textarea:hover,
input:hover {background: #FFFBDB;}

.orb-form .input:hover input,
.orb-form .select:hover select,
.orb-form .textarea:hover textarea,
.orb-form .radio:hover i,
.orb-form .checkbox:hover i,
.orb-form .toggle:hover i,
.orb-form .ui-slider-handle:hover {background: #FFFBDB;}

.orb-form .rating input + label:hover,
.orb-form .rating input + label:hover ~ label {color: #969FA1;}

.orb-form .button:hover {opacity: 1;}

.orb-form .input input:focus,
.orb-form .select select:focus,
.orb-form .textarea textarea:focus,
.orb-form .radio input:focus + i,
.orb-form .checkbox input:focus + i,
.orb-form .toggle input:focus + i {border-color: #969FA1;}

.orb-form .radio input + i:after {background-color: #969FA1;}
.orb-form .checkbox input + i:after {color: #969FA1;}

.orb-form .radio input:checked + i,
.orb-form .checkbox input:checked + i,
.orb-form .toggle input:checked + i {border-color: #969FA1;}

.orb-form .rating input:checked ~ label {color: #F4CC13;}

.orb-form .state-error input,
.orb-form .state-error select,
.orb-form .state-error textarea,
.orb-form .radio.state-error i,
.orb-form .checkbox.state-error i,
.orb-form .toggle.state-error i {border-color: #E9A89A; background: #F0C6BD;}

.orb-form .state-error .icon-append,
.orb-form .state-error .icon-prepend {border-color: #E9A89A; color: #E9A89A;}

.orb-form .state-error select + i {background: #F0C6BD; box-shadow: 0 0 0 12px #F0C6BD;}

.orb-form .toggle.state-error input:checked + i {background: #F0C6BD;}

.orb-form .state-error + em {
    display: block;
    margin-top: 6px;
    padding: 0 1px;
    font-style: normal;
    font-weight: 400;
    font-size: 0.9em;
    line-height: 15px;
    color: #EE9393;
}

.orb-form .rating.state-error + em {margin-top: -4px; margin-bottom: 4px;}

.orb-form .state-success input,
.orb-form .state-success select,
.orb-form .state-success textarea,
.orb-form .radio.state-success i,
.orb-form .checkbox.state-success i,
.orb-form .toggle.state-success i {border-color: #82B964; background: #CAE1BD;}

.orb-form .state-success .icon-append,
.orb-form .state-success .icon-prepend {border-color: #82B964; color: #82B964;}

.orb-form .state-success select + i {background: #CAE1BD; box-shadow: 0 0 0 12px #CAE1BD;}

.orb-form .toggle.state-success input:checked + i {background: #CAE1BD;}

.orb-form .state-success + em {
    display: block;
    margin-top: 6px;
    padding: 0 1px;
    font-style: normal;
    font-size: 11px;
    line-height: 15px;
    color: #EE9393;
}

.orb-form .note-success {color: #6FB679;}

.orb-form .input.state-disabled input,
.orb-form .select.state-disabled,
.orb-form .textarea.state-disabled {background: #EEEEEE; opacity: 0.5;}

.orb-form .radio.state-disabled,
.orb-form .checkbox.state-disabled,
.orb-form .toggle.state-disabled,
.orb-form .button.state-disabled {opacity: 0.5; cursor: default;}

.orb-form .input.state-disabled:hover input,
.orb-form .select.state-disabled:hover select,
.orb-form .textarea.state-disabled:hover textarea,
.orb-form .radio.state-disabled:hover i,
.orb-form .checkbox.state-disabled:hover i,
.orb-form .toggle.state-disabled:hover i { border-color: #E5E5E5; }

.orb-form .message {display: none; color: #6FB679;}
.orb-form .message i {
    display: block;
    margin: 0 auto 20px;
    width: 81px;
    height: 81px;
    background: #82B964;
    color: #fff;
    border-radius: 50%;
    font-size: 30px;
    line-height: 81px;
}

.orb-form.submited fieldset, .orb-form.submited footer {display: none;}

.orb-form.submited .message {
    display: block;
    padding: 25px 30px;
    background: rgba(255, 255, 255, 0.9);
    font: 300 18px/27px 'Open Sans', Helvetica, Arial, sans-serif;
    text-align: center;
}

/* Datepicker */
.ui-datepicker {
    display: none;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    font: 13px/1.55 'Open Sans', Helvetica, Arial, sans-serif;
    text-align: center;
    color: #666666;
}

.ui-datepicker a {color: #404040;}

.ui-datepicker-header {
    position: relative;
    margin: -10px -12px 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 15px;
    line-height: 27px;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: 0;
    display: block;
    width: 47px;
    height: 47px;
    font-size: 15px;
    line-height: 47px;
    text-decoration: none;
    cursor: pointer;
}

.ui-datepicker-prev {left: 0;}
.ui-datepicker-next {right: 0;}

.ui-datepicker-calendar {border-collapse: collapse; font-size: 13px; line-height: 27px;}

.ui-datepicker-calendar th {color: #999999;}

.ui-datepicker-calendar a,
.ui-datepicker-calendar span {
    display: block;
    width: 26px;
    margin: auto;
    text-decoration: none;
    color: #404040;
}

.ui-datepicker-calendar a:hover {background: rgba(0, 0, 0, 0.05);}
.ui-datepicker-calendar span {color: #BFBFBF;}
.ui-datepicker-today a {font-weight: 700;}
.ui-datepicker-calendar .ui-state-active {background: rgba(0, 0, 0, 0.05); cursor: default;}
.ui-datepicker-inline {border: 2px solid #E5E5E5; background: #FFFFFF; box-shadow: none;}
.ui-datepicker-inline .ui-datepicker-header {line-height: 47px;}
.ui-datepicker-inline .ui-datepicker-calendar {width: 100%;}

/* Slider */
.orb-form .ui-slider {
    position: relative;
    height: 3px;
    border-radius:4px;
    border: 2px solid #ABB2B4;
    background: #C0C2C7;
    margin: 12px 6px 26px;
}

.orb-form .ui-slider-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius:50%;
    margin: -8px 0 0 -8px;
    border: 2px solid #ABB2B4;
    outline: none;
    background: #FFFFFF;
    transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    -webkit-transition: border-color 0.3s;
}

.orb-form .ui-slider-handle:before {
    content: "";
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background: #ABB2B4;
    top: 3px;
    left: 3px;
    z-index: 2;
}

.orb-form *, .orb-form *:after, .orb-form *:before {margin: 0; box-sizing: content-box; -moz-box-sizing: content-box;}

.orb-form .label {
    border-radius: 0;
    font-size: 100%;
    text-align: left;
    white-space: normal;
    color: inherit;
}

.orb-form .radio, .orb-form .checkbox {font-weight: 400;}
.orb-form .radio + .radio, .orb-form .checkbox + .checkbox {margin-top: 0;}

/* ========================================================================
 * Off-canvas Right User Menu
 * ======================================================================== */

.right-toggler {position: relative; font-size: 0.9em;}

.user-menu {
    position: absolute; /* we can't use fixed here :( */
    top: 0;
    right: -200px !important;
    z-index: 1;
    width: 200px;
    padding-right: 10px;
    height: 100%;
}

/*Nav-Tabs Offcanvas*/
/*Override styles from tabs chapter */
.tabs-offcanvas .tab-content > .tab-pane {padding: 10px; padding-top: 2px; height: 500px;}

.tabs-offcanvas .tab-content > .tab-pane,
.tabs-offcanvas .nav-tabs > li > a:hover {background: rgba(255, 255, 255, 0.1); color: #FFFFFF; border-color: transparent;}

.tabs-offcanvas .nav-tabs > li a {color: #FFFFFF; font-size: 1em; padding: 10px 11px;}

.tabs-offcanvas .nav-tabs > li.active > a,
.tabs-offcanvas .nav-tabs > li.active > a:hover,
.tabs-offcanvas .nav-tabs > li.active > a:focus,
.tabs-offcanvas .nav-tabs.nav-justified > .active > a,
.tabs-offcanvas .nav-tabs.nav-justified > .active > a:hover,
.tabs-offcanvas .nav-tabs.nav-justified > .active > a:focus {
    color: #FFFFFF;
    cursor: default;
    background-color: rgba(255, 255, 255, 0.1);
    border: 0;
}

.tabs-offcanvas .nav-tabs.nav-justified > li > a {border-bottom: 0;}

/*User Home Tab*/
/*Override styles from profile page */
.tabs-offcanvas .main-info {
    position: relative;
    text-transform: none;
    left: 0;
    width: 100%;
    top: 0;
    margin-left: 0;
    padding: 7px;
}

.tabs-offcanvas .main-info h1 {
    font-size: 12px;
    margin: 15px 0 10px;
    letter-spacing: 0px;
    font-weight: 700;
}

.tabs-offcanvas .main-info h1 small {
    display: block;
    font-size: 0.6em;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 5px auto;
}

.tabs-offcanvas .main-info h1 small:before {content: "";}

/*Off-canvas User Block*/
.tabs-offcanvas .main-info .user-img {margin: 10px auto 0px auto; display: block; max-width: 120px;}

.tabs-offcanvas .main-info .user-img img {display: inline-block; max-width: 100%; box-shadow: 0 0 0 5px #FFFFFF;}

/*Off-canvas List Group*/
.tabs-offcanvas .list-group-item {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85em;
    padding: 8px;
    padding-left: 30px;
    margin-bottom: -2px;
    background-color: transparent;
    border: 2px solid rgba(0, 0, 0, 0.1);
    transition: background 0.4s;
}

.tabs-offcanvas .list-group-item i {position: absolute; color: #FFFFFF; left: 10px; top: 10px;}

.tabs-offcanvas .list-group-item .badge {background: #FFFBDB; color: #33383D; font-size: 0.8em; text-shadow: none;}

.tabs-offcanvas .list-group .empthy {display: block; height: 3px; background: rgba(0, 0, 0, 0.1);}

.tabs-offcanvas a.list-group-item {color: #F0F0ED;}
.tabs-offcanvas a.list-group-item:hover, .tabs-offcanvas a.list-group-item:focus {text-decoration: none; color: #FFFFFF; background-color: rgba(0, 0, 0, 0.1);}

/*Chat Users Tab*/
/*Override styles from chat chapter */
.tabs-offcanvas .chat-users-menu {
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: transparent;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    overflow-y: auto;
}

.tabs-offcanvas .chat-users-menu .buttons {text-align: center; margin: 10px auto;}
.tabs-offcanvas .chat-users-menu:after {display: none;}

.tabs-offcanvas .chat-users-menu ul li a {
    font-size: 1em;
    height: 60px;
    padding: 5px 10px 10px 55px;
    box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
    font-weight: 600;
    -webkit-transition: background 0.3s, box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s;
}

.tabs-offcanvas .chat-users-menu ul li a .badge {
    position: absolute;
    background: #FFFFFF;
    color: #33383D;
    font-size: 0.8em;
    top: 10px;
    right: 8px;
}

.tabs-offcanvas .chat-users-menu ul li a:hover {background: rgba(0, 0, 0, 0.2); color: #FFFFFF; text-decoration: none;}

.tabs-offcanvas .chat-users-menu ul li a .chat-name {margin-bottom: 1px; font-size: 0.95em;}
.tabs-offcanvas .chat-users-menu ul li a .label {margin-top: 2px; display: inline;}
.tabs-offcanvas .chat-users-menu ul li .user-img {left: 10px; top: 10px; max-width: 35px;}
.tabs-offcanvas .chat-users-menu ul li .user-img img {display: inline-block; max-width: 100%; border-radius: 50%; box-shadow: 0 0 0 4px #FFFFFF;}

/* ========================================================================
 * ToDo List (Inside Rightbar)
 * ======================================================================== */

#todo-list {list-style: none outside none; margin: 10px 0; padding: 0;}

#todo-list li {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    font-size: 0.9;
    font-weight: 400;
    margin-bottom: 5px;
    padding: 7px 35px 10px 35px;
    position: relative;
}

#todo-list li label {font-weight: 400;}

#todo-list li.done label {text-decoration: line-through; font-weight: 400;}

#todo-list .remove {
    cursor: pointer;
    display: none;
    position: absolute;
    right: 0;
    top: 22%;
    width: 25px;
}

#todo-list .remove:after {
    font-family: FontAwesome;
    content: "\f057";
    font-size: 16px;
    right: 10px;
    color: #FFFFFF;
    position: absolute;
}

#todo-list li:hover .remove {display: block;}

#todo-list input[type="checkbox"] {position: absolute; left: 10px; top: 22%;}

/* ========================================================================
 * RESPONSIVE FEATURES (MEDIA QUERIES)
 * ======================================================================== */ 

 @media screen and (max-width: 767px)  {

    .navbar-brand {}

    .responsive-admin-menu {
        float: left;
        width: 45px;
        height: 100%;
        position: relative;
    }

    /* Page Header */
    .page-header h1 {text-align: center; font-size: 2.5em;}
    .page-header h1 i {display: none;}
    .page-header h1 small {display: block; margin-top: 7px; font-size: 0.5em;}
    .page-header h1 small:before {content: "";}
    
    h1 small {font-size: 50%;}
    
    /* Search */
    .panel-search .btn-group {width: 100%;}
    .panel-search .btn {width: 49%;}
    .panel-search input, .panel-search select {margin-bottom: 5px;}

    .responsive-admin-menu #menu li span,
    .responsive-admin-menu #menu li a span {left: 9999px; display: inline-block; position: absolute;}
    .responsive-admin-menu #menu li.opened span {line-height: 20px;}

    /*Adding static to badges inside span*/
    .responsive-admin-menu #menu li.opened span span.badge,
    .responsive-admin-menu #menu li a span span.badge {position: static; line-height: 10px; padding: 3px 7px;}

    .responsive-admin-menu #menu li {width: 45px; transition: width 0.2s;}    

    /*If you have long menu names - change the width*/
    .responsive-admin-menu #menu li a:hover {width: 180px;}
        
    /*Style for opened (hovered) elements*/
    .responsive-admin-menu #menu li.opened,
    .responsive-admin-menu #menu li.opened ul li,
    .responsive-admin-menu #menu li.opened + ul {width: 180px; display: block; background: #5C6064;}

    /*Adding Rounded Corners*/
    .responsive-admin-menu #menu li.opened,
    .responsive-admin-menu #menu li.opened ul li:last-child {border-bottom-right-radius: 3px; border-top-right-radius: 3px;}
    
    /*Arrow*/
    .responsive-admin-menu #menu li a.submenu:before {font-size: 8px; right: 4px;}

    /*Making Arrow Bigger*/
    .responsive-admin-menu #menu li.opened a.submenu:before {font-size: 15px; right: 7px;}  
        
    .responsive-admin-menu #menu li.opened span {left: 35px;}
    
    .content-wrapper {margin-left: 0; border-radius: 0; left: 45px; position: absolute;}

    .main-header {z-index: 100; position: relative;}

    .responsive-admin-menu #menu li a {padding: 13px 10px 13px 12px;}

    /*Hide brand logo*/
    ul.brandlogo {visibility: hidden;}
    
    /*Second Level*/
    .responsive-admin-menu #menu ul li li a {padding: 8px 10px 8px 12px;}
    
    /*Toggle */
    .sidebar-toggle {margin-left: -200px;}
    .main-content-toggle-left {left: 10px;}
    
    .footer-bar p {float: none; text-align: center; color: #FFFFFF; font-size: 11px;}

}

@media screen and (max-width: 480px) {

    .main-header .navbar-brand {display: none;}
    
    /* Page Header */
    .page-header h1 {text-align: center; font-size: 2em;}
    .page-header h1 i {display: none;}
    .page-header h1 small {display: block; margin-top: 7px; font-size: 0.5em;}
    .page-header h1 small:before {content: "";}
    
    /* Search */
    .panel-search .btn-group {width: 100%;}
    .panel-search .btn {width: 48.5%;}
    .panel-search input, .panel-search select {margin-bottom: 5px;}
    
    .left-toggler {display:none}     
    
    .site-search {float: none; padding-left: 9px; clear: both; width: 100%;}
    
    .site-search i {left: 18px; top: 15px;}
    .site-search input[type=search] {background: #969FA1; color: #FFFFFF; width: 100%;}
    .site-search input[type=search]:focus {width: 100%;}
    
    .main-header .navbar-content {float: none; padding: 9px 7px 5px 9px; width: 100%;}
    
    .main-header .btn-user {width: 40px !important; padding: 0px;}
    
    .main-header .btn-user i {top: 11px; left: 10px; position: absolute; font-size: 1.7em;}
    
    .main-header .navbar-header {float: none; width: 100%;}
    
    /*Some handshaking for proper align*/
    .main-header #notification-dropdown {left: auto; right: auto;}
    .main-header #inbox-dropdown {left: -40px; right: auto;}
    .main-header #settings-dropdown {left: auto; right: -50px;}
    
    .responsive-admin-menu {min-height: 50px; width: 100%; float: left; position: relative;}
    
    .sidebar-toggle {margin-left: 0; width: 100%;}
    
    .user-menu {padding-top: 10px; padding-left: 10px; right: 10px;}
    
    .main-content-toggle-left {margin-left: 0px !important;}
    
    .main-wrap {
        position: relative;
        top: 0;
        float: left;
        margin-bottom:0;
        bottom: 0;
        min-height: auto;
        height: auto !important;
    }
    
    .offcanvas-inner {overflow-x: hidden;}
    
    .content-wrapper {
        position: relative;
        float: left;
        width: 100%;
        left: 0;
        margin-left: 0;
        margin-right: 10px;
    }
    
    .responsive-admin-menu .responsive-menu {display: block; top: 0;}
    
    .responsive-admin-menu #menu {display: none;}
    
    .responsive-admin-menu .responsive-menu {
        font-family: 'Varela Round', Arial, sans-serif;
        font-size: 1.9em;
        line-height: 50px;
        font-weight: 450;
        color: #5bc0de;
        letter-spacing: -1px;
    }
    
    .responsive-admin-menu .responsive-menu .menuicon {
        color: #FFFFFF;
        font-size: 24px;
        position: absolute;
        right: 22px;
        top: 0;
    }
    
    .responsive-admin-menu #menu li a span,
    .responsive-admin-menu #menu li.opened a span {left: auto;}
    
    .responsive-admin-menu #menu li a.submenu span {top: 0;}
    
    .responsive-admin-menu #menu li.opened a.submenu:before {right: 15px;}
    
    .responsive-admin-menu #menu li a span {left: auto; position: relative; padding-top: 0;}
    
    .responsive-admin-menu #menu li.opened a span span.badge,
    .responsive-admin-menu #menu li a span span.badge {position: relative; padding: 3px 7px;}
    
    .responsive-admin-menu #menu li {width: auto; transition: none;}
    
    .responsive-admin-menu #menu li a:hover {width: auto;}
    
    /*Style for opened (hovered) elements*/
    .responsive-admin-menu #menu li.opened,
    .responsive-admin-menu #menu li.opened ul li,
    .responsive-admin-menu #menu li.opened + ul {width: auto; display: block; background: #5C6064;}
        
    
    .responsive-admin-menu #menu li a {color: #FFFFFF; padding: 10px; font-size: 0.85em;}
    
    .responsive-admin-menu #menu li a.submenu:before {font-size: 14px; right: 15px; top: 10px;}

}

/* ========================================================================
 * STANDALONE PAGES
 * ======================================================================== */

.standalone-page-wrapper {
    position: absolute;
    background-color: #FFFFFF;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    padding: 0;
}

.colorful-page-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    background-image: url(../images/gallery/1.png);
    background-size: 30%;
}

.error-top-block {
    width: 100%;
    padding: 20px;
    height: 245px;
    background-image: url(../images/gallery/1.png);
    background-size: 30%;
}

.error-bottom-block {padding-top: 10px; width: 100%;}

.error-top-block-image {
    position: relative;
    display: block;
    bottom: -10px;
    margin: 0 auto;
    max-width: 240px;
}

.error-top-block-image img {
    display: inline-block;
    max-width: 100%;
    border: none;
}

.error-description {text-align: center;}

.error-description .error-code {
    font-size: 4em;
    text-transform: uppercase;
    line-height: 70px;
    letter-spacing: -2px;
    font-weight: 800
}

.error-description .error-meaning {font-size: 2em;}
.error-description .todo {margin-top: 5px;}
.error-description .input-group {margin: 20px auto; width: 80%;}

/* Login and Lock Screen Pages */
.center-block {
    width: 50%;
    width: 330px;
    height: 80%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.center-block .using-social-header {
    text-align: center;
    font-size: 0.85em;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase
}

.center-block .social-buttons {margin: 10px auto 10px auto; clear: both;}

.center-block .social {font-size: 2.4em;}

.copyrights {margin-top: 10px; font-size: 0.85em; text-align: center;}

.center-block .copyrights {color: #454B52;}

.login-block, .lock-block {position: relative; padding: 0 20px; margin-bottom: 10px; background: #FFFFFF; border-radius: 11px;}

.login-block header .image-block, .lock-block header .image-block {display: block; margin: 0 auto; max-width: 130px;}

.lock-block header .image-block img {
    display: inline-block;
    max-width: 100%;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5)
}

.login-block header .image-block img {display: inline-block; max-width: 100%; border: none;}

.login-block header,
.lock-block header {
    padding: 15px;
    background: #454B52;
    color: #f4f2ee;
    text-align: center;
    border-bottom: 0;
    font-size: 1.9em;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 -20px 10px -20px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.login-block header small, .lock-block header small {font-size: 12px; display: block;}

.login-block footer, .lock-block footer {margin: 0 -20px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; background: #454B52;}

/* ========================================================================
 * Color Helpers
 * ======================================================================== */

.powerwidget-as-portlet-white, .bg-white, .powerwidget-as-portlet-white .inner-spacer {background: #FFFFFF; color: #555555;}
.powerwidget-as-portlet-white h2, .powerwidget-as-portlet-white h2 small, .powerwidget-as-portlet-white .powerwidget-ctrls .button-icon {color: #555555;}
.powerwidget-as-portlet-pink, .powerwidget-as-portlet-pink .inner-spacer {background: #F87AA0; color: #FFFFFF;}
.powerwidget-as-portlet-blue, .powerwidget-as-portlet-blue .inner-spacer {background: #5BC0DE; color: #FFFFFF;}
.powerwidget-as-portlet-dark-blue, .powerwidget-as-portlet-dark-blue .inner-spacer {background: #3B8DBD; color: #FFFFFF;}
.powerwidget-as-portlet-green, .powerwidget-as-portlet-green .inner-spacer {background: #82B964; color: #FFFFFF;}
.powerwidget-as-portlet-green-alt, .powerwidget-as-portlet-green-alt .inner-spacer {background: #58B868; color: #FFFFFF;}
.powerwidget-as-portlet-acid-green, .powerwidget-as-portlet-acid-green .inner-spacer {background: #CCD600; color: #FFFFFF;}
.powerwidget-as-portlet-yellow, .powerwidget-as-portlet-yellow .inner-spacer {background: #F4CC13; color: #FFFFFF;}
.powerwidget-as-portlet-yellow-muted, .powerwidget-as-portlet-yellow-muted .inner-spacer {background: #F4CC13; color: #FFFFFF;}
.powerwidget-as-portlet-purple, .powerwidget-as-portlet-purple .inner-spacer {background: #A7609A; color: #FFFFFF;}
.powerwidget-as-portlet-grey, .powerwidget-as-portlet-grey .inner-spacer {background: #888888; color: #FFFFFF;}
.powerwidget-as-portlet-cold-grey, .powerwidget-as-portlet-cold-grey .inner-spacer {background: #595F66; color: #FFFFFF;}
.powerwidget-as-portlet-orange, .powerwidget-as-portlet-orange .inner-spacer {background: #F0AD4E; color: #FFFFFF;}
.powerwidget-as-portlet-red, .powerwidget-as-portlet-red .inner-spacer {background: #D24D33; color: #FFFFFF;}
.powerwidget-as-portlet-dark-red, .powerwidget-as-portlet-dark-red .inner-spacer {background: #993838; color: #FFFFFF;}
.powerwidget-as-portlet-black, .powerwidget-as-portlet-black .inner-spacer {background: #000000; color: #FFFFFF;}
.powerwidget-as-portlet-marine, .powerwidget-as-portlet-marine .inner-spacer {background: #00A9AE; color: #FFFFFF;}

.pink-btn, .bg-pink, .powerwidget.pink {background-color: #F87AA0;}
.blue-btn, .bg-blue, .powerwidget.blue {background-color: #5BC0DE;}
.dark-blue-btn, .bg-dark-blue, .powerwidget.dark-blue {background-color: #3B8DBD;}
.green-btn, .bg-green, .powerwidget.green {background-color: #82B964;}
.green-alt-btn, .bg-green-alt, .powerwidget.green-alt {background-color: #58B868;}
.green-acid-btn, .bg-acid-green, .powerwidget.green-acid {background-color: #CCD600;}
.yellow-btn, .bg-yellow, .powerwidget.yellow {background-color: #F4CC13;}
.yellow-muted-btn, .bg-yellow-muted, .powerwidget.yellow-muted {background-color: #FFFBDB;}
.purple-btn, .bg-purple, .powerwidget.purple {background-color: #A7609A;}
.grey-btn, .bg-grey, .powerwidget.grey {background-color: #888888;}
.cold-grey-btn, .bg-cold-grey, .powerwidget.cold-grey {background-color: #595F66;}
.dark-cold-grey-btn, .bg-dark-cold-grey, .powerwidget.dark-cold-grey {background-color: #454B52;}
.orange-btn, .bg-orange, .powerwidget.orange {background-color: #F0AD4E;}
.red-btn, .bg-red, .powerwidget.red {background-color: #D24D33;}
.dark-red-btn, .bg-dark-red, .powerwidget.dark-red {background-color: #993838;}
.black-btn, .bg-black, .powerwidget.black {background-color: #000000;}
.marine-btn, .bg-marine, .powerwidget.marine {background-color: #00A9AE;}

.text-pink {color: #F87AA0;}
.text-blue {color: #5BC0DE;}
.text-dark-blue {color: #3B8DBD;}
.text-green {color: #82B964;}
.text-green-alt {color: #58B868;}
.text-green-acid {color: #CCD600;}
.text-yellow {color: #F4CC13;}
.text-yellow-muted {color: #FFFBDB;}
.text-purple {color: #A7609A;}
.text-grey {color: #888888;}
.text-cold-grey {color: #595F66;}
.text-dark-cold-grey {color: #454B52;}
.text-orange {color: #F0AD4E;}
.text-red {color: #D24D33;}
.text-dark-red {color: #993838;}
.text-cold-grey {color: #969FA1;}
.text-black {color: #000000;}
.text-white {color: #FFFFFF;}
.text-marine {color: #00A9AE;}

/*Paddings and Margins*/
.buttons-margin-bottom .btn {margin-bottom: 5px;}
.buttons-margin-bottom .modal .btn {margin-bottom: 0;}

.zero-padding-margin {padding: 0; margin: 0;}

.padding-0px {padding: 0px;}
.margin-0px {margin: 0;}

.margin-negative-top-10px {margin-top: -10px;}

.padding-10px {padding: 10px;}
.padding-15px {padding: 10px;}
.padding-20px {padding: 10px;}

.margin-bottom,
.margin-bottom-10px {margin-bottom: 10px;}
.margin-bottom-20px {margin-bottom: 20px;}
.margin-top {margin-top: 10px;}
.margin-left {margin-left: 10px;}
.margin-right {margin-right: 10px;}

/* ========================================================================
 * Examples, Code Highlight, CallOuts and other stuff
 * ======================================================================== */

.example {position: relative; padding: 35px 10px 10px; margin: 0 -10px; background-color: #F0F0ED;}

.example:after {
    content: "Example";
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 0.8em;
    font-weight: 700;
    color: #595F66;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.example + .highlight {margin: 0 -10px 15px -10px; border-radius: 0; border-width: 0;}

.highlight {position: relative; padding: 15px; margin-bottom: 14px; background-color: #454B52;}

.highlight:after {
    content: "";
    position: absolute;
    top: -7px;
    left: 5%;
    border-style: solid;
    border-width: 0 7px 7px;
    border-color: #454B52 transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.highlight pre {
    color: #F1F1F1;
    font-weight: 600;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent;
    border: 0;
    white-space: nowrap;
}

.callout {
    position: relative;
    min-height: 60px;
    margin: 10px 0 15px;
    padding: 15px 30px 15px 60px;
    border-left: 5px solid #EEEEEE;
    font-size: 0.9em;
}

.inner-spacer .callout {margin: 10px -10px 15px;}

.callout h4 {margin-top: 0;}

.callout p:last-child {margin-bottom: 0;}

.callout code, .callout .highlight {background-color: #FFFFFF;}

.callout-danger {background-color: #F7E0DB; border-color: #D24D33;}
.callout-danger:before {
    position: absolute;
    left: 10px;
    top: 10px;
    display: block;
    background: #D24D33;
    border-radius: 50%;
    color: #fff;
    width: 40px;
    text-align: center;
    height: 40px;
    font-size: 2.15em;
    font-family: 'FontAwesome';
    content: "\f0e7";
}
.callout-danger h4 {color: #D24D33;}

.callout-warning {background-color: #FFF4E1; border-color: #FDC153;}
.callout-warning:before {
    position: absolute;
    left: 10px;
    top: 10px;
    display: block;
    background: #FDC153;
    border-radius: 50%;
    color: #fff;
    width: 40px;
    text-align: center;
    height: 40px;
    font-size: 2.15em;
    font-family: 'FontAwesome';
    content: "\f071";
}
.callout-warning h4 {color: #FCB42E;}

.callout-info {background-color: #DFF3F9; border-color: #5BC0DE;}
.callout-info:before {
    position: absolute;
    left: 10px;
    top: 10px;
    display: block;
    background: #5BC0DE;
    border-radius: 50%;
    color: #FFFFFF;
    width: 40px;
    text-align: center;
    height: 40px;
    font-size: 2.15em;
    font-family: 'FontAwesome';
    content: "\f0a2";
}

.callout-info h4 {color: #5BC0DE;}