/* 

*/

@import url('./fullcalendar.css?_=2.1');
@import url('https://fonts.googleapis.com/css?family=Oxygen');


body {
  font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.42857143;
  color: #292929;
}

*:focus {
  outline: 0 !important;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}



small,
.small {
  font-size: 13px;
}
.text-small {
  font-size: 85%;
}

.badge,
.label {
  font-weight: bold;
}

.badge.bg-light,
.label.bg-light {
  text-shadow: none;
}

.badge {
  background-color: #cfdadd;
}

.badge.up {
  position: relative;
  top: -10px;
  padding: 3px 6px;
  margin-left: -10px;
}

.badge-sm {
  padding: 2px 5px !important;
  font-size: 85%;
}

.label-sm {
  padding-top: 0;
  padding-bottom: 1px;
}

.label-xs {
  padding: 1px 2px !important;
  font-size: .833em;
  font-weight: bold;
}

.label-xxs {
  padding-top: 0;
  padding-bottom: 1px;
  padding-left: 1px;
  padding-right: 1px;
  font-size: .75em;
  font-weight: normal;
}

.badge-white {
  padding: 2px 6px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.badge-empty {
  color: inherit;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.badge.badge-lg,
.label.label-lg {
  font-size: .83333em;
}
.badge.badge-lger,
.label.label-lger {
  font-size: 1em;
}

blockquote {
  border-color: #dee5e7;
}

.caret-white {
  border-top-color: #fff;
  border-top-color: rgba(255, 255, 255, 0.65);
}

a:hover .caret-white {
  border-top-color: #fff;
}

.thumbnail {
  border-color: #dee5e7;
}

.progress {
  background-color: #edf1f2;
}

.progress-xxs {
  height: 2px;
}

.progress-xs {
  height: 6px;
}

.progress-sm {
  height: 12px;
}

.progress-sm .progress-bar {
  font-size: 10px;
  line-height: 1em;
}

.progress,
.progress-bar {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.progress-bar-primary {
  background-color: #7266ba;
}

.progress-bar-info {
  background-color: #23b7e5;
}

.progress-bar-success {
  background-color: #27c24c;
}

.progress-bar-warning {
  background-color: #fad733;
}

.progress-bar-danger {
  background-color: #f05050;
}

.progress-bar-black {
  background-color: #053257;
}

.progress-bar-white {
  background-color: #fff;
}

.accordion-group,
.accordion-inner {
  border-color: #dee5e7;
  border-radius: 2px;
}

.alert {
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.alert .close i {
  display: block;
  font-size: 12px;
  font-weight: normal;
}

.form-control {
  border-color: #cfdadd;
  border-radius: 2px;
}

.form-control,
.form-control:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.form-control:not(.rounded):focus {
    box-shadow: 0 0 5px rgb(35, 112, 160);
    border: 1px solid rgb(41, 138, 199);
}

input[type='checkbox'].form-control  {
  width: 25px;
}

input[type='date'].form-control {
  /* fixes misalignment on safari */
  display: flex;
}

.form-horizontal .control-label.text-left {
  text-align: left;
}

.form-control-spin {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  margin-top: -7px;
}

.input-group-addon {
  background-color: #edf1f2;
  border-color: #cfdadd;
}

.list-group {
  border-radius: 2px;
}

.list-group.no-radius .list-group-item {
  border-radius: 0 !important;
}

.list-group.no-borders .list-group-item {
  border: none;
}

.list-group.no-border .list-group-item {
  border-width: 1px 0;
}

.list-group.no-bg .list-group-item {
  background-color: transparent;
}

.list-group-item {
  padding-right: 15px;
  border: 1px solid #ddd;
}

a.list-group-item:hover,
a.list-group-item:focus,
a.list-group-item.hover {
  background-color: #f6f8f8;
}

.list-group-item.media {
  margin-top: 0;
}

.list-group-item.active {
  color: #fff;
  background-color: #23b7e5;
  border-color: #23b7e5;
}

.list-group-item.active .text-muted {
  color: #ace4f5 !important;
}

.list-group-item.active a {
  color: #fff;
}

.list-group-item.focus {
  background-color: #e4eaec !important;
}

.list-group-item.select {
  position: relative;
  z-index: 1;
  background-color: #dbeef9 !important;
  border-color: #c5e4f5;
}

.list-group-alt .list-group-item:nth-child(2n+2) {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.list-group-lg .list-group-item {
  padding-top: 15px;
  padding-bottom: 15px;
}

.list-group-sm .list-group-item {
  padding: 6px 10px;
}

.list-group-sp .list-group-item {
  margin-bottom: 5px;
  border-radius: 3px;
}

.list-group-item > .badge {
  margin-right: 0;
}

.list-group-item > .fa-chevron-right {
  float: right;
  margin-top: 4px;
  margin-right: -5px;
}

.list-group-item > .fa-chevron-right + .badge {
  margin-right: 5px;
}

.nav-pills.no-radius > li > a {
  border-radius: 0;
}

.nav-pills > li.active > a {
  color: #fff !important;
  background-color: #23b7e5;
}

.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:active {
  background-color: #19a9d5;
}

.nav > li > a:hover,
.nav > li > a:focus {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav.nav-lg > li > a {
  padding: 20px 20px;
}

.nav.nav-md > li > a {
  padding: 15px 15px;
}

.nav.nav-sm > li > a {
  padding: 6px 12px;
}

.nav.nav-xs > li > a {
  padding: 4px 10px;
}

.nav.nav-xxs > li > a {
  padding: 1px 10px;
}

.nav.nav-rounded > li > a {
  border-radius: 20px;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-tabs {
  border-color: #dee5e7;
}

.nav-tabs > li > a {
  border-bottom-color: #dee5e7;
  border-radius: 2px 2px 0 0;
}

.nav-tabs > li:hover > a,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  border-color: #dee5e7;
  color:white;
}

.nav-tabs > li.active > a {
  border-bottom-color: #fff !important;
}

.nav-tabs-alt .nav-tabs.nav-justified > li {
  display: table-cell;
  width: 1%;
}

.nav-tabs-alt .nav-tabs > li > a {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: #dee5e7 !important;
  border-radius: 0;
}

.nav-tabs-alt .nav-tabs > li.active > a {
  border-bottom-color: #23b7e5 !important;
}

.nav-tabs-themed .nav-tabs > li:hover > a,
.nav-tabs-themed .nav-tabs > li.active > a,
.nav-tabs-themed .nav-tabs > li.active > a:hover {
  border-color: #dee5e7;
  color: #555;
}

.tab-container {
  margin-bottom: 15px;
}

.tab-container .tab-content {
  padding: 15px;
  background-color: #fff;
  border: 1px solid #dee5e7;
  border-top-width: 0;
  border-radius: 0 0 2px 2px;
}

.pagination > li > a {
  border-color: #dee5e7;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
  background-color: #edf1f2;
  border-color: #dee5e7;
}

.panel {
  border-radius: 2px;
}

.panel-grey {
  color: black;	
  background-color: #EFEFEF!important;
}

.panel-black > .panel-heading {
  color: #E3F2FD; 
  background-color: #131e26;
}

.panel .accordion-toggle {
  display: block;
  font-size: 14px;
  cursor: pointer;
}

.panel .list-group-item {
  border-color: #edf1f2;
}

.panel.no-borders {
  border-width: 0;
}

.panel.no-borders .panel-heading,
.panel.no-borders .panel-footer {
  border-width: 0;
}

.panel-heading {
  border-radius: 2px 2px 0 0;
}

.panel-default .panel-heading {
  background-color: #f6f8f8;
}

.panel-heading.no-border {
  margin: -1px -1px 0 -1px;
  border: none;
}

.panel-heading .nav {
  margin: -10px -15px;
}

.panel-heading .list-group {
  background: transparent;
}

.panel-footer {
  background-color: #ffffff;
  border-color: #edf1f2;
  border-radius: 0 0 2px 2px;
}

.panel-default {
  border-color: #dee5e7;
}

.panel-default > .panel-heading,
.panel-default > .panel-footer {
  border-color: #edf1f2;
}

.panel-group .panel-heading + .panel-collapse .panel-body {
  border-top: 1px solid #eaedef;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 5px 10px;
  border-top: 1px solid #eaeff0;
}

.table > thead > tr > th,
table.dataTable thead > tr > th {
  padding: 5px 10px !important;
  border-bottom: 1px solid #eaeff0;
}

.table-condensed > thead > tr > th, 
.table-condensed > tbody > tr > th, 
.table-condensed > tfoot > tr > th, 
.table-condensed > thead > tr > td, 
.table-condensed > tbody > tr > td, 
.table-condensed > tfoot > tr > td {
    padding: 5px !important;
}

.table-bordered {
  border-color: #eaeff0;
}

.table-bordered > tbody > tr > td {
  border-color: #eaeff0;
}

.table-bordered > thead > tr > th {
  border-color: #eaeff0;
}

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

.table-striped > thead > th {
  background-color: #fafbfc;
  border-right: 1px solid #eaeff0;
}

.table-striped > thead > th:last-child {
  border-right: none;
}

.table.table-dark > tbody > tr > td {
    border: 1px solid #999;
}

.well,
pre {
  background-color: #edf1f2;
  border-color: #dee5e7;
}

.dropdown-menu {
  border: 1px solid #dee5e7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-menu.pull-left {
  left: 100%;
}

.dropdown-menu > .panel {
  margin: -5px 0;
  border: none;
}

.dropdown-menu > li > a {
  padding: 5px 15px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #58666e;
  background-color: #edf1f2 !important;
  background-image: none;
  filter: none;
}

.dropdown-header {
  padding: 5px 15px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  color: #58666e;
  background-color: #edf1f2 !important;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus > .dropdown-menu {
  display: block;
}

.dropdown-submenu.pull-left {
  float: none !important;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}

.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
}

.btn-group > .btn {
  margin-left: -1px;
}

/*cols*/

.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0 {
  clear: left;
}

.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 1440px) {
  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    float: left;
  }
  .col-xl-12 {
    width: 100%;
  }
  .col-xl-11 {
    width: 91.66666667%;
  }
  .col-xl-10 {
    width: 83.33333333%;
  }
  .col-xl-9 {
    width: 75%;
  }
  .col-xl-8 {
    width: 66.66666667%;
  }
  .col-xl-7 {
    width: 58.33333333%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-5 {
    width: 41.66666667%;
  }
  .col-xl-4 {
    width: 33.33333333%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-2 {
    width: 16.66666667%;
  }
  .col-xl-1 {
    width: 8.33333333%;
  }
  .col-xl-pull-12 {
    right: 100%;
  }
  .col-xl-pull-11 {
    right: 91.66666667%;
  }
  .col-xl-pull-10 {
    right: 83.33333333%;
  }
  .col-xl-pull-9 {
    right: 75%;
  }
  .col-xl-pull-8 {
    right: 66.66666667%;
  }
  .col-xl-pull-7 {
    right: 58.33333333%;
  }
  .col-xl-pull-6 {
    right: 50%;
  }
  .col-xl-pull-5 {
    right: 41.66666667%;
  }
  .col-xl-pull-4 {
    right: 33.33333333%;
  }
  .col-xl-pull-3 {
    right: 25%;
  }
  .col-xl-pull-2 {
    right: 16.66666667%;
  }
  .col-xl-pull-1 {
    right: 8.33333333%;
  }
  .col-xl-pull-0 {
    right: auto;
  }
  .col-xl-push-12 {
    left: 100%;
  }
  .col-xl-push-11 {
    left: 91.66666667%;
  }
  .col-xl-push-10 {
    left: 83.33333333%;
  }
  .col-xl-push-9 {
    left: 75%;
  }
  .col-xl-push-8 {
    left: 66.66666667%;
  }
  .col-xl-push-7 {
    left: 58.33333333%;
  }
  .col-xl-push-6 {
    left: 50%;
  }
  .col-xl-push-5 {
    left: 41.66666667%;
  }
  .col-xl-push-4 {
    left: 33.33333333%;
  }
  .col-xl-push-3 {
    left: 25%;
  }
  .col-xl-push-2 {
    left: 16.66666667%;
  }
  .col-xl-push-1 {
    left: 8.33333333%;
  }
  .col-xl-push-0 {
    left: auto;
  }
  .col-xl-offset-12 {
    margin-left: 100%;
  }
  .col-xl-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xl-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xl-offset-9 {
    margin-left: 75%;
  }
  .col-xl-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xl-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xl-offset-6 {
    margin-left: 50%;
  }
  .col-xl-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xl-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xl-offset-3 {
    margin-left: 25%;
  }
  .col-xl-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xl-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xl-offset-0 {
    margin-left: 0;
  }
}

.row.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter [class*="col"] {
  padding: 0;
}

.row-sm {
  margin-right: -10px;
  margin-left: -10px;
}

.row-sm > div {
  padding-right: 10px;
  padding-left: 10px;
}

.modal-backdrop {
  background-color: #3a3f51;
}

.modal-backdrop.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.modal-over {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal-center {
  position: absolute;
  top: 50%;
  left: 50%;
}

/*layout*/

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  overflow: visible;
}

.app {
  /*position: relative;*/
  width: 100%;
  height: auto;
  min-height: 100%;
}

.login {
  background: #0d1925;
}

.app:before {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  width: inherit;
  border: inherit;
  content: "";
}

#panellistview{
  overflow-y: auto;
  max-height: 75%;
}
.highlight {
    font-weight: 600px;
    margin-left: 10px;
    background-color: yellow;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
}

.app-header-fixed {
  padding-top: 50px;
}

.app-header-fixed .app-header {
  z-index:1000;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: solid 2px #1a3d55;
  background-color: #091F2D;
}

.app-header {
  z-index: 1025;
  border-radius: 0;
}

.app-aside {
  float: left;
}

.app-aside:before {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: inherit;
  color: #7793a7;
  background: #131e26;
  border: inherit;
  content: "";
}

.app-aside-footer {
  position: absolute;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  max-width: 200px;
}

.app-aside-folded .app-aside-footer {
  max-width: 60px;
}

.app-aside-footer ~ div {
  padding-bottom: 50px;
}

.app-aside-right {
  padding-bottom: 50px;
}

.app-content {
  /*height: 100%;*/
}

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

.app-content:after {
  clear: both;
}

.app-content-full {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: auto !important;
  height: auto;
  padding: 0 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-content-full.h-full {
  bottom: 0;
  height: auto;
}

.app-aside-dock .app-content-full {
  top: 114px;
}
.app-aside-dock .app-content-full,
.app-aside-folded .app-content-full {
  bottom: 0px;
}

.app-content-body {
  float: left;
  width: 100%;
}

.app-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1005;
}

.app-footer.app-footer-fixed {
  position: fixed;
}

.hbox {
  display: table;
  width: 100%;
  height: 100%;
  border-spacing: 0;
  table-layout: fixed;
}

.hbox .col {
  display: table-cell;
  float: none;
  height: 100%;
  vertical-align: top;
}

.v-middle {
  vertical-align: middle !important;
}

table.v-middle td {
  vertical-align: middle !important;
}

.v-top {
  vertical-align: top !important;
}

.v-bottom {
  vertical-align: bottom !important;
}

.vbox {
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
  min-height: 240px;
  border-spacing: 0;
}

.vbox .row-row {
  display: table-row;
  height: 100%;
}

.vbox .row-row .cell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ie .vbox .row-row .cell {
  display: table-cell;
}

.vbox .row-row .cell .cell-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.navbar {
  margin: 0;
  border-width: 0;
  border-radius: 0;
}

.navbar .navbar-form-sm {
  margin-top: 10px;
  margin-bottom: 10px;
}

.navbar-md {
  min-height: 60px;
}

.navbar-md .navbar-btn {
  margin-top: 13px;
}

.navbar-md .navbar-form {
  margin-top: 15px;
}

.navbar-md .navbar-nav > li > a {
  padding-top: 20px;
  padding-bottom: 20px;
}

.navbar-md .navbar-brand {
  line-height: 60px;
}

.navbar-header > button {
  padding: 10px 17px;
  font-size: 16px;
  line-height: 30px;
  text-decoration: none;
  background-color: transparent;
  border: none;
}

.navbar-brand {
  display: inline-block;
  float: none;
  height: auto;
  padding: 0 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
}

.navbar-brand:hover {
  text-decoration: none;
}

.navbar-brand img {
  display: inline;
  max-height: 50px;
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
  .app-aside,
  .navbar-header {
    width: 200px;
    transition: width .2s ease;    
  }
  .navbar-collapse,
  .app-content,
  .app-footer {
    margin-left: 200px;
  }
  .app-aside-right {
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 0;
    z-index: 1000;
  }
  .app-aside-right.pos-fix {
    z-index: 1010;
  }
  .visible-folded {
    display: none;
  }
  .app-aside-folded .hidden-folded {
    display: none !important;
  }
  .app-aside-folded .visible-folded {
    display: inherit;
  }
  .app-aside-folded .text-center-folded {
    text-align: center;
  }
  .app-aside-folded .pull-none-folded {
    float: none !important;
  }
  .app-aside-folded .w-auto-folded {
    width: auto;
  }
  .app-aside-folded .app-aside,
  .app-aside-folded .navbar-header {
    width: 60px;
    transition: width .2s ease;    
  }
  .app-aside-folded .navbar-collapse,
  .app-aside-folded .app-content,
  .app-aside-folded .app-footer {
    margin-left: 60px;
  }
  .app-aside-folded .app-header .navbar-brand {
    display: block;
    padding: 0;
  }
  .app-aside-fixed .app-aside:before {
    position: fixed;
  }
  .app-aside-fixed .app-header .navbar-header {
    position: fixed;
  }
  .app-aside-fixed .aside-wrap {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 199px;
    overflow: hidden;
  }
  .app-aside-fixed .aside-wrap .navi-wrap {
    position: relative;
    width: 217px;
    /*height: 100%;*/
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar:vertical {
    width: 17px;
  }
  .app-aside-fixed .aside-wrap .navi-wrap > * {
    width: 200px;
  }
  .smart .app-aside-fixed .aside-wrap .navi-wrap {
    width: 200px;
  }
  .app-aside-fixed.app-aside-folded .app-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1010;
  }
  .app-aside-fixed.app-aside-folded .aside-wrap {
    width: 59px;
  }
  .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap {
    width: 77px;
  }
  .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap > * {
    width: 60px;
  }
  .smart .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap {
    width: 60px;
  }
  .bg-auto:before {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: inherit;
    background-color: inherit;
    border: inherit;
    content: "";
  }
  .bg-auto.b-l:before {
    margin-left: -1px;
  }
  .bg-auto.b-r:before {
    margin-right: -1px;
  }
  .col.show {
    display: table-cell !important;
  }
  .header-toolbar.pull-right {
    position: relative;
    top: -3px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .hbox-auto-sm {
    display: block;
  }
  .hbox-auto-sm > .col {
    display: block;
    width: auto;
    height: auto;
  }
  .hbox-auto-sm > .col.show {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  .app-aside {
    float: none;
  }
  .app-content-full {
    width: 100% !important;
  }
  .hbox-auto-xs {
    display: block;
  }
  .hbox-auto-xs > .col {
    display: block;
    width: auto;
    height: auto;
  }
  .navbar-nav {
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li > a {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
  .navbar-nav > li > a .up {
    top: 0;
  }
  .navbar-nav > li > a .avatar {
    width: 30px;
    margin-top: -5px;
  }
  .navbar-nav .open .dropdown-menu {
    background-color: #fff;
  }
  .navbar-form {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
  }
  .navbar-form .form-group {
    margin-bottom: 0;
  }
}

html.bg {
  background: url('../img/bg.jpg');
  background-attachment: fixed;
  background-size: cover;
}

.app.container {
  padding-right: 0;
  padding-left: 0;
}

@media screen and (min-width: 768px) {
  .app.container {
    width: 750px;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  }
  .app.container .app-aside {
    overflow-x: hidden;
  }
  .app.container.app-aside-folded .app-aside {
    overflow-x: visible;
  }
  .app.container.app-aside-fixed .aside-wrap {
    left: inherit;
  }
  .app.container.app-aside-fixed.app-aside-folded .app-aside > ul.nav {
    position: absolute;
  }
  .app.container .app-header,
  .app.container .app-aside {
    max-width: 750px;
  }
  .app.container .app-footer-fixed {
    right: auto;
    left: auto;
    width: 100%;
    max-width: 550px;
  }
  .app.container.app-aside-folded .app-footer-fixed {
    max-width: 690px;
  }
  .app.container.app-aside-dock .app-footer-fixed {
    max-width: 750px;
  }
}

@media screen and (min-width: 992px) {
  .app.container {
    width: 970px;
  }
  .app.container .app-header,
  .app.container .app-aside {
    max-width: 970px;
  }
  .app.container .app-footer-fixed {
    max-width: 770px;
  }
  .app.container.app-aside-folded .app-footer-fixed {
    max-width: 910px;
  }
  .app.container.app-aside-dock .app-footer-fixed {
    max-width: 970px;
  }
}

@media screen and (min-width: 1200px) {
  .app.container {
    width: 1170px;
  }
  .app.container .app-header,
  .app.container .app-aside {
    max-width: 1170px;
  }
  .app.container .app-footer-fixed {
    max-width: 970px;
  }
  .app.container.app-aside-folded .app-footer-fixed {
    max-width: 1110px;
  }
  .app.container.app-aside-dock .app-footer-fixed {
    max-width: 1170px;
  }
}

.nav-sub {
  height: 0;
  margin-left: -20px;
  overflow: hidden;
  opacity: 0;
}

.nav-sub li {
    color: white;
}
.nav-sub .bg-light.lter li a {
  color: #58666e;
  background-color: #f6f8f8;
}
.nav-sub .bg-light.lter li:hover a,
.nav-sub .bg-light.lter li a:hover {
  background-color: #ffffff;
}

.active-wrapper {
  width: 95%;
}

.active > .nav-sub,
.app-aside-folded li:hover > .nav-sub,
.app-aside-folded li:focus > .nav-sub,
.app-aside-folded li:active > .nav-sub {
  height: auto !important;
  margin-left: 0;
  overflow: auto;
  opacity: 1;
}


.nav-sub-header {
  display: none !important;
}

.nav-sub-header a {
  padding: 15px 20px;
}

.navi ul.nav li {
  position: relative;
  display: block;
}

.navi ul.nav li li a {
  <!-- padding-left: 55px; -->
}

.navi ul.nav li li ul {
  display: none;
}

.navi ul.nav li li.active > ul {
  display: block;
}

.navi ul.nav li a {
  position: relative;
  display: block;
  padding: 10px 20px;
  font-weight: normal;
  text-transform: none;
  -webkit-transition: background-color 0.2s ease-in-out 0s,
                      color 0.2s ease-in-out 0s;
          transition: background-color 0.2s ease-in-out 0s,
                      color 0.2s ease-in-out 0s;
}

.navi ul.nav li a .badge,
.navi ul.nav li a .label {
  padding: 2px 5px;
  margin-top: 2px;
  font-size: 11px;
}

.navi ul.nav li a > i {
  position: relative;
  float: left;
  width: 40px;
  margin: -10px -10px;
  margin-right: 5px;
  overflow: hidden;
  line-height: 40px;
  font-size: 22px;
  text-align: center;
}

.navi ul.nav li a > i:before {
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .app-aside-folded .nav-sub-header {
    display: block !important;
  }
  .app-aside-folded .nav-sub-header a {
    padding: 15px 20px !important;
  }
  .app-aside-folded .navi > ul > li > a {
    position: relative;
    height: 50px;
    padding: 0;
    text-align: center;
    border: none;
  }
  .app-aside-folded .navi > ul > li > a span {
    display: none;
  }
  .app-aside-folded .navi > ul > li > a span.pull-right {
    display: none !important;
  }
  .app-aside-folded .navi > ul > li > a i {
    display: block;
    float: none;
    width: auto;
    margin: 0;
    font-size: 16px;
    line-height: 50px;
    border: none !important;
  }
  .app-aside-folded .navi > ul > li > a i b {
    left: 0 !important;
  }
  .app-aside-folded .navi > ul > li > a .badge,
  .app-aside-folded .navi > ul > li > a .label {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 3;
  }
  .app-aside-folded .navi > ul > li > ul {
    position: absolute;
    top: 0 !important;
    left: 100%;
    z-index: 1050;
    width: 200px;
    height: 0 !important;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  .app-aside-folded .navi li li a {
    padding-left: 20px !important;
  }
  .app-aside-folded.app-aside-fixed .app-aside > ul.nav {
    position: fixed;
    left: 80px;
    z-index: 1010;
    display: block;
    width: 260px;
    height: auto;
    overflow: visible;
    overflow-y: auto;
    opacity: 1;
    -webkit-overflow-scrolling: touch;
  }
  .app-aside-folded.app-aside-fixed .app-aside > ul.nav:before {
    position: absolute;
    top: 0;
    left: -60px;
    width: 60px;
    height: 50px;
    content: "";
  }
  .app-aside-folded.app-aside-fixed .app-aside > ul.nav a {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
}

@media screen and (max-width: 767px) {
  .app.app-admin {
    overflow-x: hidden;
  }
  .app-content {
    -webkit-transition: -webkit-transform 0.2s ease;
       -moz-transition: -moz-transform 0.2s ease;
         -o-transition: -o-transform 0.2s ease;
            transition: transform 0.2s ease;
  }
  .off-screen {
    position: absolute;
    top: 50px;
    bottom: 0;
    z-index: 1010;
    display: block !important;
    width: 75%;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: visible;
    -webkit-overflow-scrolling: touch;
  }
  .off-screen + * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1015;
    width: 100%;
    padding-top: 50px;
    overflow: hidden;
    background-color: #f0f3f4;
    -webkit-transform: translate3d(75%, 0, 0px);
            transform: translate3d(75%, 0, 0px);
    -webkit-transition: -webkit-transform 0.2s ease;
       -moz-transition: -moz-transform 0.2s ease;
         -o-transition: -o-transform 0.2s ease;
            transition: transform 0.2s ease;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .off-screen + * .off-screen-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
    display: block !important;
  }
  .off-screen.pull-right {
    right: 0;
  }
  .off-screen.pull-right + * {
    -webkit-transform: translate3d(-75%, 0, 0px);
            transform: translate3d(-75%, 0, 0px);
  }
}

@media screen and (min-width: 992px) {
  .app-aside-dock .app-content,
  .app-aside-dock .app-footer {
    margin-left: 0;
  }
  .app-aside-dock .app-aside-footer ~ div {
    padding-bottom: 0;
  }
  .app-aside-dock.app-aside-fixed.app-header-fixed {
    padding-top: 115px;
  }
  .app-aside-dock.app-aside-fixed .app-aside {
    position: fixed;
    top: 50px;
    z-index: 1000;
    width: 100%;
  }
  .app-aside-dock .app-aside,
  .app-aside-dock .aside-wrap,
  .app-aside-dock .navi-wrap {
    position: relative;
    top: 0;
    float: none;
    width: 100% !important;
    overflow: visible !important;
  }
  .app-aside-dock .navi-wrap > * {
    width: auto !important;
  }
  .app-aside-dock .app-aside {
    bottom: auto !important;
  }
  .app-aside-dock .app-aside.b-r {
border-bottom: 1px solid #7E8E92;
    border-right-width: 0;
  }
  .app-aside-dock .app-aside:before {
    display: none;
  }
  .app-aside-dock .app-aside nav > .nav {
    float: left;
  }
  .app-aside-dock .app-aside .hidden-folded,
  .app-aside-dock .app-aside .line,
  .app-aside-dock .app-aside .navi-wrap > div {
    display: none !important;
  }
  .app-aside-dock .app-aside .navi > ul > li {
    position: relative;
    display: inline-block;
    float: left;
  }
  .app-aside-dock .app-aside .navi > ul > li > a {
    height: auto;
    padding: 10px 15px 12px 15px;
    text-align: center;
  }
  .app-aside-dock .app-aside .navi > ul > li > a > .badge,
  .app-aside-dock .app-aside .navi > ul > li > a > .label {
    position: absolute;
    top: 5px;
    right: 8px;
    padding: 1px 4px;
  }
  .app-aside-dock .app-aside .navi > ul > li > a > i {
    display: block;
    float: none;
    width: 40px;
    margin-top: -10px;
    margin-right: auto;
    margin-bottom: -7px;
    margin-left: auto;
    font-size: 14px;
    line-height: 40px;
  }
  .app-aside-dock .app-aside .navi > ul > li > a > span.pull-right {
    position: absolute;
    bottom: 2px;
    left: 50%;
    display: block !important;
    margin-left: -6px;
    line-height: 1;
  }
  .app-aside-dock .app-aside .navi > ul > li > a > span.pull-right i {
    width: 12px;
    font-size: 12px;
    line-height: 12px;
  }
  .app-aside-dock .app-aside .navi > ul > li > a > span.pull-right i.text {
    line-height: 14px;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .app-aside-dock .app-aside .navi > ul > li > a > span {
    display: block;
    font-weight: normal;
  }
  .app-aside-dock .app-aside .navi > ul > li .nav-sub {
    position: absolute;
    top: auto !important;
    left: 0;
    z-index: 1050;
    display: none;
    width: 200px;
    height: auto !important;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  .app-aside-dock .app-aside .navi > ul > li .nav-sub-header {
    display: none !important;
  }
  .app-aside-dock .app-aside .navi li li a {
    padding-left: 15px;
  }
  .app-aside-dock .app-aside .navi li:hover > .nav-sub,
  .app-aside-dock .app-aside .navi li:focus > .nav-sub,
  .app-aside-dock .app-aside .navi li:active > .nav-sub {
    display: block;
    height: auto !important;
    margin-left: 0;
    overflow: auto;
    opacity: 1;
  }
}

.arrow {
  z-index: 10;
  border-width: 9px;
}

.arrow,
.arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.arrow:after {
  border-width: 8px;
  content: "";
}

.arrow.top {
  top: -9px;
  left: 50%;
  margin-left: -9px;
  border-bottom-color: rgba(0, 0, 0, 0.1);
  border-top-width: 0;
}

.arrow.top:after {
  top: 1px;
  margin-left: -8px;
  border-bottom-color: #ffffff;
  border-top-width: 0;
}

.arrow.top.arrow-primary:after {
  border-bottom-color: #7266ba;
}

.arrow.top.arrow-info:after {
  border-bottom-color: #23b7e5;
}

.arrow.top.arrow-success:after {
  border-bottom-color: #27c24c;
}

.arrow.top.arrow-danger:after {
  border-bottom-color: #f05050;
}

.arrow.top.arrow-warning:after {
  border-bottom-color: #fad733;
}

.arrow.top.arrow-light:after {
  border-bottom-color: #edf1f2;
}

.arrow.top.arrow-dark:after {
  border-bottom-color: #3a3f51;
}

.arrow.top.arrow-black:after {
  border-bottom-color: #053257;
}

.arrow.right {
  top: 50%;
  right: -9px;
  margin-top: -9px;
  border-left-color: rgba(0, 0, 0, 0.1);
  border-right-width: 0;
}

.arrow.right:after {
  right: 1px;
  bottom: -8px;
  border-left-color: #ffffff;
  border-right-width: 0;
}

.arrow.right.arrow-primary:after {
  border-left-color: #7266ba;
}

.arrow.right.arrow-info:after {
  border-left-color: #23b7e5;
}

.arrow.right.arrow-success:after {
  border-left-color: #27c24c;
}

.arrow.right.arrow-danger:after {
  border-left-color: #f05050;
}

.arrow.right.arrow-warning:after {
  border-left-color: #fad733;
}

.arrow.right.arrow-light:after {
  border-left-color: #edf1f2;
}

.arrow.right.arrow-dark:after {
  border-left-color: #3a3f51;
}

.arrow.right.arrow-black:after {
  border-left-color: #053257;
}

.arrow.bottom {
  bottom: -9px;
  left: 50%;
  margin-left: -9px;
  border-top-color: rgba(0, 0, 0, 0.1);
  border-bottom-width: 0;
}

.arrow.bottom:after {
  bottom: 1px;
  margin-left: -8px;
  border-top-color: #ffffff;
  border-bottom-width: 0;
}

.arrow.bottom.arrow-primary:after {
  border-top-color: #7266ba;
}

.arrow.bottom.arrow-info:after {
  border-top-color: #23b7e5;
}

.arrow.bottom.arrow-success:after {
  border-top-color: #27c24c;
}

.arrow.bottom.arrow-danger:after {
  border-top-color: #f05050;
}

.arrow.bottom.arrow-warning:after {
  border-top-color: #fad733;
}

.arrow.bottom.arrow-light:after {
  border-top-color: #edf1f2;
}

.arrow.bottom.arrow-dark:after {
  border-top-color: #3a3f51;
}

.arrow.bottom.arrow-black:after {
  border-top-color: #053257;
}

.arrow.left {
  top: 50%;
  left: -9px;
  margin-top: -9px;
  border-right-color: rgba(0, 0, 0, 0.1);
  border-left-width: 0;
}

.arrow.left:after {
  bottom: -8px;
  left: 1px;
  border-right-color: #ffffff;
  border-left-width: 0;
}

.arrow.left.arrow-primary:after {
  border-right-color: #7266ba;
}

.arrow.left.arrow-info:after {
  border-right-color: #23b7e5;
}

.arrow.left.arrow-success:after {
  border-right-color: #27c24c;
}

.arrow.left.arrow-danger:after {
  border-right-color: #f05050;
}

.arrow.left.arrow-warning:after {
  border-right-color: #fad733;
}

.arrow.left.arrow-light:after {
  border-right-color: #edf1f2;
}

.arrow.left.arrow-dark:after {
  border-right-color: #3a3f51;
}

.arrow.left.arrow-black:after {
  border-right-color: #053257;
}

.arrow.pull-left {
  left: 19px;
}

.arrow.pull-right {
  right: 19px;
  left: auto;
}

.arrow.pull-up {
  top: 19px;
}

.arrow.pull-down {
  top: auto;
  bottom: 19px;
}

.btn {
    -webkit-transition: background .2s;
    transition: background .2s;
    text-align: center;
}

.btn-link {
  color: #58666e;
}

.btn-link.active {
  box-shadow: none;
  webkit-box-shadow: none;
}

.btn-default {
  color: #58666e !important;
  background-color: #fcfdfd;
  background-color: #fff;
  border-color: #dee5e7;
  border-bottom-color: #d8e1e3;
  -webkit-box-shadow: 0 1px 1px rgba(90, 90, 90, 0.1);
          box-shadow: 0 1px 1px rgba(90, 90, 90, 0.1);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  color: #58666e !important;
  background-color: #edf1f2;
  border-color: #c7d3d6;
}

.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  background-image: none;
}

.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: #fcfdfd;
  border-color: #dee5e7;
}

.btn-default.btn-bg {
  border-color: rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}

.btn-primary {
  color: #ffffff !important;
  background-color: #00BCD4;
  border-color: #00BCD4;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #ffffff !important;
  background-color: #00838F;
  border-color: #00838F;
}

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}

.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 {
  background-color: #7266ba;
  border-color: #7266ba;
}

.btn-success {
  color: #ffffff !important;
  background-color: #27c24c;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  color: #ffffff !important;
  background-color: #23ad44;
}

.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}

.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: #27c24c;
  border-color: #27c24c;
}

.btn-info {
  color: #ffffff !important;
  background-color: #167592;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  color: #ffffff !important;
  background-color: #19a9d5;
  border-color: #189ec8;
}

.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-image: none;
}

.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: #23b7e5;
  border-color: #23b7e5;
}

.btn-warning {
  color: #ffffff !important;
  background-color: #fad733;
  border-color: #fad733;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  color: #ffffff !important;
  background-color: #f9d21a;
  border-color: #f9cf0b;
}

.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-image: none;
}

.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: #fad733;
  border-color: #fad733;
}

.btn-danger {
  color: #ffffff !important;
  background-color: #f05050;
  border-color: #f05050;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  color: #ffffff !important;
  background-color: #ee3939;
  border-color: #ed2a2a;
}

.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-image: none;
}

.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: #f05050;
  border-color: #f05050;
}

.btn-dark {
  color: #ffffff !important;
  background-color: #3a3f51;
  border-color: #3a3f51;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
  color: #ffffff !important;
  background-color: #2f3342;
  border-color: #292d39;
}

.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
  background-image: none;
}

.btn-dark.disabled,
.btn-dark[disabled],
fieldset[disabled] .btn-dark,
.btn-dark.disabled:hover,
.btn-dark[disabled]:hover,
fieldset[disabled] .btn-dark:hover,
.btn-dark.disabled:focus,
.btn-dark[disabled]:focus,
fieldset[disabled] .btn-dark:focus,
.btn-dark.disabled:active,
.btn-dark[disabled]:active,
fieldset[disabled] .btn-dark:active,
.btn-dark.disabled.active,
.btn-dark[disabled].active,
fieldset[disabled] .btn-dark.active {
  background-color: #3a3f51;
  border-color: #3a3f51;
}

.btn-black {
  color: #ffffff !important;
  background-color: #053257;
  border-color: #053257;
}

.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.open .dropdown-toggle.btn-black {
  color: #ffffff !important;
  background-color: #131e25;
  border-color: #0e161b;
}

.btn-black:active,
.btn-black.active,
.open .dropdown-toggle.btn-black {
  background-image: none;
}

.btn-black.disabled,
.btn-black[disabled],
fieldset[disabled] .btn-black,
.btn-black.disabled:hover,
.btn-black[disabled]:hover,
fieldset[disabled] .btn-black:hover,
.btn-black.disabled:focus,
.btn-black[disabled]:focus,
fieldset[disabled] .btn-black:focus,
.btn-black.disabled:active,
.btn-black[disabled]:active,
fieldset[disabled] .btn-black:active,
.btn-black.disabled.active,
.btn-black[disabled].active,
fieldset[disabled] .btn-black.active {
  background-color: #053257;
  border-color: #053257;
}

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  text-align: center;
}

.btn-icon i {
  position: relative;
  top: -1px;
  line-height: 34px;
}

.btn-icon.btn-xs {
  width: 20px;
  height: 20px;
}

.btn-icon.btn-xs i {
  line-height: 20px;
}

.btn-icon.btn-sm {
  width: 30px;
  height: 30px;
}

.btn-icon.btn-sm i {
  line-height: 30px;
}

.btn-icon.btn-lg {
  width: 45px;
  height: 45px;
}

.btn-icon.btn-lg i {
  line-height: 45px;
}

.btn-rounded {
  padding-right: 15px;
  padding-left: 15px;
  border-radius: 50px;
}

.btn-rounded.btn-lg {
  padding-right: 25px;
  padding-left: 25px;
}

.btn > i.pull-left,
.btn > i.pull-right {
  line-height: 1.42857143;
}

.btn-block {
  padding-right: 12px;
  padding-left: 12px;
}

.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 2px;
}

.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-bottom-left-radius: 2px;
}

.btn-addon i {
  position: relative;
  float: left;
  width: 34px;
  height: 34px;
  margin: -7px -12px;
  margin-right: 12px;
  line-height: 34px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px 0 0 2px;
}

.btn-addon i.pull-right {
  margin-right: -12px;
  margin-left: 12px;
  border-radius: 0 2px 2px 0;
}

.btn-addon.btn-sm i {
  width: 30px;
  height: 30px;
  margin: -6px -10px;
  margin-right: 10px;
  line-height: 30px;
}

.btn-addon.btn-sm i.pull-right {
  margin-right: -10px;
  margin-left: 10px;
}

.btn-addon.btn-lg i {
  width: 45px;
  height: 45px;
  margin: -11px -16px;
  margin-right: 16px;
  line-height: 45px;
}

.btn-addon.btn-lg i.pull-right {
  margin-right: -16px;
  margin-left: 16px;
}

.btn-addon.btn-xs i {
  width: 20px;
  height: 22px;
  margin: -6px -5px;
  margin-right: 5px;
  line-height: 22px;
  top: 4px;
  font-size: 10px;
}

.btn-addon.btn-xs i.pull-right {
  margin-right: -10px;
  margin-left: 10px;
}

.btn-addon.btn-default i {
  background-color: transparent;
  border-right: 1px solid #dee5e7;
}

.btn-groups .btn {
  margin-bottom: 5px;
}

.btn-flat {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  background: transparent;
  border: 0;
  text-align: center;
  transition: background .1s ease-in-out;
  }
  .btn-flat i {
    line-height: 24px;
  }
  .btn-flat:hover {
    background: #fefefe;
    background: rgba(0, 0, 0, 0.05);
  }
  .btn-flat:active {
    background: #cecece;
    background: rgba(0, 0, 0, 0.2);
  }

.list-icon i {
  display: inline-block;
  width: 40px;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  -webkit-transition: font-size 0.2s;
          transition: font-size 0.2s;
}

.list-icon div {
  line-height: 40px;
  white-space: nowrap;
}

.list-icon div:hover i {
  font-size: 26px;
}

.settings {
  position: fixed;
  top: 120px;
  right: -240px;
  z-index: 1050;
  width: 240px;
  -webkit-transition: right 0.2s;
          transition: right 0.2s;
}

.settings.active {
  right: -1px;
}

.settings > .btn {
  position: absolute;
  top: -1px;
  left: -42px;
  padding: 10px 15px;
  background: #f6f8f8 !important;
  border-color: #dee5e7;
  border-right-width: 0;
}

.settings .i-checks span b {
  display: inline-block;
  float: left;
  width: 50%;
  height: 20px;
}

.settings .i-checks span b.header {
  height: 10px;
}

.streamline {
  position: relative;
  border-color: #dee5e7;
}

.streamline .sl-item:after,
.streamline:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  background-color: #fff;
  border-color: inherit;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  content: '';
}

.sl-item {
  position: relative;
  padding-bottom: 1px;
  border-color: #dee5e7;
}

.sl-item:before,
.sl-item:after {
  display: table;
  content: " ";
}

.sl-item:after {
  clear: both;
}

.sl-item:after {
  top: 6px;
  bottom: auto;
}

.sl-item.b-l {
  margin-left: -1px;
}

.timeline {
  padding: 0;
  margin: 0;
}

.tl-item {
  display: block;
}

.tl-item:before,
.tl-item:after {
  display: table;
  content: " ";
}

.tl-item:after {
  clear: both;
}

.visible-left {
  display: none;
}

.tl-wrap {
  display: block;
  padding: 15px 0 15px 20px;
  margin-left: 6em;
  border-color: #dee5e7;
  border-style: solid;
  border-width: 0 0 0 4px;
}

.tl-wrap:before,
.tl-wrap:after {
  display: table;
  content: " ";
}

.tl-wrap:after {
  clear: both;
}

.tl-wrap:before {
  position: relative;
  top: 15px;
  float: left;
  width: 10px;
  height: 10px;
  margin-left: -27px;
  background: #edf1f2;
  border-color: inherit;
  border-style: solid;
  border-width: 3px;
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 4px #f0f3f4;
}

.tl-wrap:hover:before {
  background: transparent;
  border-color: #fff;
}

.tl-date {
  position: relative;
  top: 10px;
  display: block;
  float: left;
  width: 4.5em;
  margin-left: -7.5em;
  text-align: right;
}

.tl-content {
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
}

.tl-content.block {
  display: block;
  width: 100%;
}

.tl-content.panel {
  margin-bottom: 0;
}

.tl-header {
  display: block;
  width: 12em;
  margin-left: 2px;
  text-align: center;
}

.timeline-center .tl-item {
  margin-left: 50%;
}

.timeline-center .tl-item .tl-wrap {
  margin-left: -2px;
}

.timeline-center .tl-header {
  width: auto;
  margin: 0;
}

.timeline-center .tl-left {
  margin-right: 50%;
  margin-left: 0;
}

.timeline-center .tl-left .hidden-left {
  display: none !important;
}

.timeline-center .tl-left .visible-left {
  display: inherit;
}

.timeline-center .tl-left .tl-wrap {
  float: right;
  padding-right: 20px;
  padding-left: 0;
  margin-right: -2px;
  border-right-width: 4px;
  border-left-width: 0;
}

.timeline-center .tl-left .tl-wrap:before {
  float: right;
  margin-right: -27px;
  margin-left: 0;
}

.timeline-center .tl-left .tl-date {
  float: right;
  margin-right: -8.5em;
  margin-left: 0;
  text-align: left;
}

.i-switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  background-color: #27c24c;
  border-radius: 30px;
}

.i-switch input {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}

.i-switch input:checked + i:before {
  top: 50%;
  right: 5px;
  bottom: 50%;
  left: 50%;
  border-width: 0;
  border-radius: 5px;
}

.i-switch input:checked + i:after {
  margin-left: 16px;
}

.i-switch i:before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 30px;
  content: "";
  -webkit-transition: all 0.2s;
          transition: all 0.2s;
}

.i-switch i:after {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 18px;
  background-color: #fff;
  border-radius: 50%;
  content: "";
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
          box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  -webkit-transition: margin-left 0.3s;
          transition: margin-left 0.3s;
}

.i-switch-md {
  width: 40px;
  height: 24px;
}

.i-switch-md input:checked + i:after {
  margin-left: 17px;
}

.i-switch-md i:after {
  width: 22px;
}

.i-switch-lg {
  width: 50px;
  height: 30px;
}

.i-switch-lg input:checked + i:after {
  margin-left: 21px;
}

.i-switch-lg i:after {
  width: 28px;
}

.i-checks {
  padding-left: 20px;
  cursor: pointer;
}

.i-checks input {
  position: absolute;
  margin-left: -20px;
  opacity: 0;
}

.i-checks input:checked + i {
  border-color: #23b7e5;
}

.i-checks input:checked + i:before {
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  background-color: #23b7e5;
}

.i-checks input:checked + span .active {
  display: inherit;
}

.i-checks input[type="radio"] + i,
.i-checks input[type="radio"] + i:before {
  border-radius: 50%;
}

.i-checks input[disabled] + i,
fieldset[disabled] .i-checks input + i {
  border-color: #dee5e7;
}

.i-checks input[disabled] + i:before,
fieldset[disabled] .i-checks input + i:before {
  background-color: #dee5e7;
}

.i-checks > i {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: -2px;
  margin-right: 4px;
  margin-left: -20px;
  line-height: 1;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #cfdadd;
}

.i-checks > i:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: transparent;
  content: "";
  -webkit-transition: all 0.2s;
          transition: all 0.2s;
}

.i-checks > span {
  margin-left: -20px;
}

.i-checks > span .active {
  display: none;
}

.i-checks-sm input:checked + i:before {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
}

.i-checks-sm > i {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  margin-left: -18px;
}

.i-checks-lg input:checked + i:before {
  top: 8px;
  left: 8px;
  width: 12px;
  height: 12px;
}

.i-checks-lg > i {
  width: 30px;
  height: 30px;
}

.datepicker-input {
    background: #fff !important;
    cursor: text !important;
}

.datepicker .btn-default {
  border-width: 0;
  box-shadow: none;
}

.datepicker .btn[disabled] {
  opacity: 0.4;
}

.datepicker .btn-info .text-info {
  color: #fff !important;
}

/*Charts*/

.jqstooltip {
  max-height: 12px;
  padding: 5px 10px !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: solid 1px #000 !important;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

.easyPieChart {
  position: relative;
  text-align: center;
}

.easyPieChart > div {
  position: relative;
  z-index: 1;
}

.easyPieChart > div .text {
  position: absolute;
  top: 60%;
  width: 100%;
  line-height: 1;
}

.easyPieChart > div img {
  margin-top: -4px;
}

.easyPieChart canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

#flotTip {
  z-index: 100;
  padding: 4px 10px;
  font-size: 12px;  
  color: #000000;
  background-color: rgba(0, 0, 0, 0.8);
  border: solid 1px #000 !important;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.legendColorBox > div {
  margin: 5px;
  border: none !important;
}

.legendColorBox > div > div {
  border-radius: 10px;
}

.sortable-placeholder {
  min-height: 50px;
  margin-bottom: 5px;
  list-style: none;
  border: 1px dashed #CCC;
}

.panel .dataTables_wrapper {
  padding-top: 10px;
}

.panel .dataTables_wrapper > .row {
  margin: 0;
}

.panel .dataTables_wrapper > .row > .col-sm-12 {
  padding: 0;
}

.st-sort-ascent:before {
  content: '\25B2';
}

.st-sort-descent:before {
  content: '\25BC';
}

.st-selected td {
  background: #f0f9ec !important;
}

.chosen-choices,
.chosen-single,
.bootstrap-tagsinput {
  border-color: #cfdadd !important;
  border-radius: 2px !important;
}

.bootstrap-tagsinput {
  padding: 5px 12px !important;
}

.item {
  position: relative;
}

.item .top {
  position: absolute;
  top: 0;
  left: 0;
}

.item .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

.item .center {
  position: absolute;
  top: 50%;
}

.item-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

.item-overlay.active,
.item:hover .item-overlay {
  display: block;
}

.form-validation .form-control.ng-dirty.ng-invalid {
  border-color: #f05050;
}

.form-validation .form-control.ng-dirty.ng-valid,
.form-validation .form-control.ng-dirty.ng-valid:focus {
  border-color: #27c24c;
}

.form-validation .i-checks .ng-invalid.ng-dirty + i {
  border-color: #f05050;
}

.ng-animate .bg-auto:before {
  display: none;
}

[ui-view].ng-leave {
  display: none;
}

[ui-view].ng-leave.smooth {
  display: block;
}

.smooth.ng-animate {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fade-in-right-big.ng-enter {
  -webkit-animation: fadeInRightBig 0.5s;
          animation: fadeInRightBig 0.5s;
}

.fade-in-right-big.ng-leave {
  -webkit-animation: fadeOutLeftBig 0.5s;
          animation: fadeOutLeftBig 0.5s;
}

.fade-in-left-big.ng-enter {
  -webkit-animation: fadeInLeftBig 0.5s;
          animation: fadeInLeftBig 0.5s;
}

.fade-in-left-big.ng-leave {
  -webkit-animation: fadeOutRightBig 0.5s;
          animation: fadeOutRightBig 0.5s;
}

.fade-in-up-big.ng-enter {
  -webkit-animation: fadeInUpBig 0.5s;
          animation: fadeInUpBig 0.5s;
}

.fade-in-up-big.ng-leave {
  -webkit-animation: fadeOutUpBig 0.5s;
          animation: fadeOutUpBig 0.5s;
}

.fade-in-down-big.ng-enter {
  -webkit-animation: fadeInDownBig 0.5s;
          animation: fadeInDownBig 0.5s;
}

.fade-in-down-big.ng-leave {
  -webkit-animation: fadeOutDownBig 0.5s;
          animation: fadeOutDownBig 0.5s;
}

.fade-in.ng-enter {
  -webkit-animation: fadeIn 0.5s;
          animation: fadeIn 0.5s;
}

.fade-in.ng-leave {
  -webkit-animation: fadeOut 0.5s;
          animation: fadeOut 0.5s;
}

.fade-in-right.ng-enter {
  -webkit-animation: fadeInRight 0.5s;
          animation: fadeInRight 0.5s;
}

.fade-in-right.ng-leave {
  -webkit-animation: fadeOutLeft 0.5s;
          animation: fadeOutLeft 0.5s;
}

.fade-in-left.ng-enter {
  -webkit-animation: fadeInLeft 0.5s;
          animation: fadeInLeft 0.5s;
}

.fade-in-left.ng-leave {
  -webkit-animation: fadeOutRight 0.5s;
          animation: fadeOutRight 0.5s;
}

.fade-in-up.ng-enter {
  -webkit-animation: fadeInUp 0.5s;
          animation: fadeInUp 0.5s;
}

.fade-in-up.ng-leave {
  -webkit-animation: fadeOutUp 0.5s;
          animation: fadeOutUp 0.5s;
}

.fade-in-down.ng-enter {
  -webkit-animation: fadeInDown 0.5s;
          animation: fadeInDown 0.5s;
}

.fade-in-down.ng-leave {
  -webkit-animation: fadeOutDown 0.5s;
          animation: fadeOutDown 0.5s;
}

.bg-gd {
  background-image: -webkit-gradient(linear, left 0, left 100%, from(rgba(40, 50, 60, 0)), to(rgba(40, 50, 60, 0.075)));
  background-image: -webkit-linear-gradient(top, rgba(40, 50, 60, 0), 0, rgba(40, 50, 60, 0.075), 100%);
  background-image: -moz-linear-gradient(top, rgba(40, 50, 60, 0) 0, rgba(40, 50, 60, 0.075) 100%);
  background-image: linear-gradient(to bottom, rgba(40, 50, 60, 0) 0, rgba(40, 50, 60, 0.075) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0028323c', endColorstr='#1328323c', GradientType=0);
  filter: none;
}

.bg-gd-dk {
  background-image: -webkit-gradient(linear, left 10%, left 100%, from(rgba(40, 50, 60, 0)), to(rgba(40, 50, 60, 0.5)));
  background-image: -webkit-linear-gradient(top, rgba(40, 50, 60, 0), 10%, rgba(40, 50, 60, 0.5), 100%);
  background-image: -moz-linear-gradient(top, rgba(40, 50, 60, 0) 10%, rgba(40, 50, 60, 0.5) 100%);
  background-image: linear-gradient(to bottom, rgba(40, 50, 60, 0) 10%, rgba(40, 50, 60, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0028323c', endColorstr='#8028323c', GradientType=0);
  filter: none;
}

.bg-light {
  color: #58666e;
  background-color: #edf1f2;
}

.bg-light.lt,
.bg-light .lt {
  background-color: #f3f5f6;
}

.bg-light.lter,
.bg-light .lter {
  background-color: #DDE6E9;
}

.bg-light.dk,
.bg-light .dk {
  background-color: #e4eaec;
}

.bg-light.dker,
.bg-light .dker {
  background-color: #dde6e9;
}

.bg-light.dkest,
.bg-light .dkest {
  background-color: #d7dee0;
}

.bg-light.bg,
.bg-light .bg {
  background-color: #edf1f2;
}

.bg-dark {
  color: #353535;
  background-color: white;
}

.bg-dark.lt,
.bg-dark .lt {
  background-color: #12405c;
  color: #C5E2FC;
}

.bg-dark.lter,
.bg-dark .lter {
  background-color: #0c2f45;
  color: #C5E2FC;
}

.bg-dark.dk,
.bg-dark .dk {
  background-color: #042B4D;
}

.bg-dark.dker,
.bg-dark .dker {
  background-color: #03203A;
}

.bg-dark.bg,
.bg-dark .bg {
  background-color: #053056;
}

.bg-dark a {
  color: #c1c3c9;
}

.bg-dark a:hover {
  color: #ffffff;
}

.bg-dark a.list-group-item:hover,
.bg-dark a.list-group-item:focus {
  background-color: inherit;
}

.bg-dark .nav > li:hover > a,
.bg-dark .nav > li:focus > a,
.bg-dark .nav > li.active > a {
  color: #ffffff;
  background-color: #053056;
}

.bg-dark .nav > li > a {
  color: #B2D9FB;
}

.bg-dark .nav > li > a:hover,
.bg-dark .nav > li > a:focus {
  background-color: #042B4D;
}

.bg-dark .nav .open > a {
  background-color: #053056;
}

.bg-dark .caret {
  border-top-color: #a6a8b1;
  border-bottom-color: #a6a8b1;
}

.bg-dark.navbar .nav > li.active > a {
  color: #ffffff;
  background-color: #053056;
}

.bg-dark .open > a,
.bg-dark .open > a:hover,
.bg-dark .open > a:focus {
  color: #ffffff;
}

.bg-dark .text-muted {
  color: #8b8e99 !important;
}

.bg-dark .text-lt {
  color: #eaebed !important;
  text-shadow: 0px 2px 0px rgb(37, 37, 37);
}

.bg-dark.auto .list-group-item,
.bg-dark .auto .list-group-item {
  background-color: transparent;
  border-color: #2f3342 !important;
}

.bg-dark.auto .list-group-item:hover,
.bg-dark .auto .list-group-item:hover,
.bg-dark.auto .list-group-item:focus,
.bg-dark .auto .list-group-item:focus,
.bg-dark.auto .list-group-item:active,
.bg-dark .auto .list-group-item:active,
.bg-dark.auto .list-group-item.active,
.bg-dark .auto .list-group-item.active {
  background-color: #2e3344 !important;
}

.bg-black {
  color: #7793a7;
  background:#131e26;
}

.bg-black.lt,
.bg-black .lt {
  background-color: #053056;
}

.bg-black.lter,
.bg-black .lter {
  background-color: #314554;
}

.bg-black.dk,
.bg-black .dk {
  background-color: #131e26;
}

.bg-black.dker,
.bg-black .dker {
  background-color: #0a1015;
}

.bg-black.bg,
.bg-black .bg {
  background-color: #053257;
}

.bg-black a {
  color: #96abbb;
}

.bg-black a:hover {
  color: #ffffff;
}

.bg-black a.list-group-item:hover,
.bg-black a.list-group-item:focus {
  background-color: inherit;
}

.bg-black .nav > li:hover > a,
.bg-black .nav > li:focus > a,
.bg-black .nav > li.active > a {
  color: #fff;
  background-color: #131e26;
}

.bg-black .nav > li > a {
  color: #869fb1;
}

.bg-black .nav > li > a:hover,
.bg-black .nav > li > a:focus {
  background-color: #16232d;
}

.bg-black .nav .open > a {
  background-color: #131e26;
}

.bg-black .caret {
  border-top-color: #7793a7;
  border-bottom-color: #7793a7;
}

.bg-black.navbar .nav > li.active > a {
  color: #ffffff;
  background-color: #131e26;
}

.bg-black .open > a,
.bg-black .open > a:hover,
.bg-black .open > a:focus {
  color: #ffffff;
}

.bg-black .text-muted {
  color: #5c798f !important;
}

.bg-black .text-lt {
  color: #c4d0d9 !important;
}

.bg-black.auto .list-group-item,
.bg-black .auto .list-group-item {
  background-color: transparent;
  border-color: #131e25 !important;
}

.bg-black.auto .list-group-item:hover,
.bg-black .auto .list-group-item:hover,
.bg-black.auto .list-group-item:focus,
.bg-black .auto .list-group-item:focus,
.bg-black.auto .list-group-item:active,
.bg-black .auto .list-group-item:active,
.bg-black.auto .list-group-item.active,
.bg-black .auto .list-group-item.active {
  background-color: #131e26 !important;
}

.bg-grey {
    color: #ffffff;
    background-color: #9E9E9E;
}

.bg-primary {
  color: #f4f3f9;
  background-color: #7266ba;
}

.bg-primary.lt,
.bg-primary .lt {
  background-color: #847abf;
}

.bg-primary.lter,
.bg-primary .lter {
  background-color: #958dc6;
}

.bg-primary.dk,
.bg-primary .dk {
  background-color: #6051b5;
}

.bg-primary.dker,
.bg-primary .dker {
  background-color: #5244a9;
}

.bg-primary.bg,
.bg-primary .bg {
  background-color: #7266ba;
}

.bg-primary a {
  color: #ffffff;
}

.bg-primary a:hover {
  color: #ffffff;
}

.bg-primary a.list-group-item:hover,
.bg-primary a.list-group-item:focus {
  background-color: inherit;
}

.bg-primary .nav > li:hover > a,
.bg-primary .nav > li:focus > a,
.bg-primary .nav > li.active > a {
  color: #ffffff;
  background-color: #6051b5;
}

.bg-primary .nav > li > a {
  color: #f2f2f2;
}

.bg-primary .nav > li > a:hover,
.bg-primary .nav > li > a:focus {
  background-color: #6658b8;
}

.bg-primary .nav .open > a {
  background-color: #6051b5;
}

.bg-primary .caret {
  border-top-color: #f4f3f9;
  border-bottom-color: #f4f3f9;
}

.bg-primary.navbar .nav > li.active > a {
  color: #ffffff;
  background-color: #6051b5;
}

.bg-primary .open > a,
.bg-primary .open > a:hover,
.bg-primary .open > a:focus {
  color: #ffffff;
}

.bg-primary .text-muted {
  color: #d6d3e6 !important;
}

.bg-primary .text-lt {
  color: #ffffff !important;
}

.bg-primary.auto .list-group-item,
.bg-primary .auto .list-group-item {
  background-color: transparent;
  border-color: #6254b2 !important;
}

.bg-primary.auto .list-group-item:hover,
.bg-primary .auto .list-group-item:hover,
.bg-primary.auto .list-group-item:focus,
.bg-primary .auto .list-group-item:focus,
.bg-primary.auto .list-group-item:active,
.bg-primary .auto .list-group-item:active,
.bg-primary.auto .list-group-item.active,
.bg-primary .auto .list-group-item.active {
  background-color: #6051b5 !important;
}

.bg-success {
  color: #c6efd0;
  background-color: #27c24c;
}

.bg-success.lt,
.bg-success .lt {
  background-color: #31d257;
}

.bg-success.lter,
.bg-success .lter {
  background-color: #48d46a;
}

.bg-success.dk,
.bg-success .dk {
  background-color: #20af42;
}

.bg-success.dker,
.bg-success .dker {
  background-color: #1a9c39;
}

.bg-success.bg,
.bg-success .bg {
  background-color: #27c24c;
}

.bg-success a {
  color: #eefaf1;
}

.bg-success a:hover {
  color: #ffffff;
}

.bg-success a.list-group-item:hover,
.bg-success a.list-group-item:focus {
  background-color: inherit;
}

.bg-success .nav > li:hover > a,
.bg-success .nav > li:focus > a,
.bg-success .nav > li.active > a {
  color: #ffffff;
  background-color: #20af42;
}

.bg-success .nav > li > a {
  color: #daf5e0;
}

.bg-success .nav > li > a:hover,
.bg-success .nav > li > a:focus {
  background-color: #22b846;
}

.bg-success .nav .open > a {
  background-color: #20af42;
}

.bg-success .caret {
  border-top-color: #c6efd0;
  border-bottom-color: #c6efd0;
}

.bg-success.navbar .nav > li.active > a {
  color: #ffffff;
  background-color: #20af42;
}

.bg-success .open > a,
.bg-success .open > a:hover,
.bg-success .open > a:focus {
  color: #ffffff;
}

.bg-success .text-muted {
  color: #9ee4af !important;
}

.bg-success .text-lt {
  color: #ffffff !important;
}

.bg-success.auto .list-group-item,
.bg-success .auto .list-group-item {
  background-color: transparent;
  border-color: #23ad44 !important;
}

.bg-success.auto .list-group-item:hover,
.bg-success .auto .list-group-item:hover,
.bg-success.auto .list-group-item:focus,
.bg-success .auto .list-group-item:focus,
.bg-success.auto .list-group-item:active,
.bg-success .auto .list-group-item:active,
.bg-success.auto .list-group-item.active,
.bg-success .auto .list-group-item.active {
  background-color: #20af42 !important;
}

.bg-info {
  color: #dcf2f8;
  background-color: #23b7e5;
}

.bg-info.lt,
.bg-info .lt {
  background-color: #3dbde5;
}

.bg-info.lter,
.bg-info .lter {
  background-color: #55c3e6;
}

.bg-info.dk,
.bg-info .dk {
  background-color: #16aad8;
}

.bg-info.dker,
.bg-info .dker {
  background-color: #1199c4;
}

.bg-info.bg,
.bg-info .bg {
  background-color: #23b7e5;
}

.bg-info a {
  color: #ffffff;
}

.bg-info a:hover {
  color: #ffffff;
}

.bg-info a.list-group-item:hover,
.bg-info a.list-group-item:focus {
  background-color: inherit;
}

.bg-info .nav > li:hover > a,
.bg-info .nav > li:focus > a,
.bg-info .nav > li.active > a {
  color: #ffffff;
  background-color: #16aad8;
}

.bg-info .nav > li > a {
  color: #f2f2f2;
}

.bg-info .nav > li > a:hover,
.bg-info .nav > li > a:focus {
  background-color: #17b2e2;
}

.bg-info .nav .open > a {
  background-color: #16aad8;
}

.bg-info .caret {
  border-top-color: #dcf2f8;
  border-bottom-color: #dcf2f8;
}

.bg-info.navbar .nav > li.active > a {
  color: #ffffff;
  background-color: #16aad8;
}

.bg-info .open > a,
.bg-info .open > a:hover,
.bg-info .open > a:focus {
  color: #ffffff;
}

.bg-info .text-muted {
  color: #b0e1f1 !important;
}

.bg-info .text-lt {
  color: #ffffff !important;
}

.bg-info.auto .list-group-item,
.bg-info .auto .list-group-item {
  background-color: transparent;
  border-color: #19a9d5 !important;
}

.bg-info.auto .list-group-item:hover,
.bg-info .auto .list-group-item:hover,
.bg-info.auto .list-group-item:focus,
.bg-info .auto .list-group-item:focus,
.bg-info.auto .list-group-item:active,
.bg-info .auto .list-group-item:active,
.bg-info.auto .list-group-item.active,
.bg-info .auto .list-group-item.active {
  background-color: #16aad8 !important;
}

.bg-warning {
  color: #fffefa;
  background-color: #fad733;
}

.bg-warning.lt,
.bg-warning .lt {
  background-color: #f8da4e;
}

.bg-warning.lter,
.bg-warning .lter {
  background-color: #f7de69;
}

.bg-warning.dk,
.bg-warning .dk {
  background-color: #fcd417;
}

.bg-warning.dker,
.bg-warning .dker {
  background-color: #face00;
}

.bg-warning.bg,
.bg-warning .bg {
  background-color: #fad733;
}

.bg-warning a {
  color: #ffffff;
}

.bg-warning a:hover {
  color: #ffffff;
}

.bg-warning a.list-group-item:hover,
.bg-warning a.list-group-item:focus {
  background-color: inherit;
}

.bg-warning .nav > li:hover > a,
.bg-warning .nav > li:focus > a,
.bg-warning .nav > li.active > a {
  color: #ffffff;
  background-color: #fcd417;
}

.bg-warning .nav > li > a {
  color: #f2f2f2;
}

.bg-warning .nav > li > a:hover,
.bg-warning .nav > li > a:focus {
  background-color: #fcd621;
}

.bg-warning .nav .open > a {
  background-color: #fcd417;
}

.bg-warning .caret {
  border-top-color: #fffefa;
  border-bottom-color: #fffefa;
}

.bg-warning.navbar .nav > li.active > a {
  color: #ffffff;
  background-color: #fcd417;
}

.bg-warning .open > a,
.bg-warning .open > a:hover,
.bg-warning .open > a:focus {
  color: #ffffff;
}

.bg-warning .text-muted {
  color: #fbf2cb !important;
}

.bg-warning .text-lt {
  color: #ffffff !important;
}

.bg-warning.auto .list-group-item,
.bg-warning .auto .list-group-item {
  background-color: transparent;
  border-color: #f9d21a !important;
}

.bg-warning.auto .list-group-item:hover,
.bg-warning .auto .list-group-item:hover,
.bg-warning.auto .list-group-item:focus,
.bg-warning .auto .list-group-item:focus,
.bg-warning.auto .list-group-item:active,
.bg-warning .auto .list-group-item:active,
.bg-warning.auto .list-group-item.active,
.bg-warning .auto .list-group-item.active {
  background-color: #fcd417 !important;
}

.bg-danger {
  color: #ffffff;
  background-color: #f05050;
}

.bg-danger.lt,
.bg-danger .lt {
  background-color: #f06a6a;
}

.bg-danger.lter,
.bg-danger .lter {
  background-color: #f18282;
}

.bg-danger.dk,
.bg-danger .dk {
  background-color: #f13636;
}

.bg-danger.dker,
.bg-danger .dker {
  background-color: #f21b1b;
}

.bg-danger.bg,
.bg-danger .bg {
  background-color: #f05050;
}

.bg-danger a {
  color: #ffffff;
}

.bg-danger a:hover {
  color: #ffffff;
}

.bg-danger a.list-group-item:hover,
.bg-danger a.list-group-item:focus {
  background-color: inherit;
}

.bg-danger .nav > li:hover > a,
.bg-danger .nav > li:focus > a,
.bg-danger .nav > li.active > a {
  color: #ffffff;
  background-color: #f13636;
}

.bg-danger .nav > li > a {
  color: #f2f2f2;
}

.bg-danger .nav > li > a:hover,
.bg-danger .nav > li > a:focus {
  background-color: #f13f3f;
}

.bg-danger .nav .open > a {
  background-color: #f13636;
}

.bg-danger .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

.bg-danger.navbar .nav > li.active > a {
  color: #ffffff;
  background-color: #f13636;
}

.bg-danger .open > a,
.bg-danger .open > a:hover,
.bg-danger .open > a:focus {
  color: #ffffff;
}

.bg-danger .text-muted {
  color: #e6e6e6 !important;
}

.bg-danger .text-lt {
  color: #ffffff !important;
}

.bg-danger.auto .list-group-item,
.bg-danger .auto .list-group-item {
  background-color: transparent;
  border-color: #ee3939 !important;
}

.bg-danger.auto .list-group-item:hover,
.bg-danger .auto .list-group-item:hover,
.bg-danger.auto .list-group-item:focus,
.bg-danger .auto .list-group-item:focus,
.bg-danger.auto .list-group-item:active,
.bg-danger .auto .list-group-item:active,
.bg-danger.auto .list-group-item.active,
.bg-danger .auto .list-group-item.active {
  background-color: #f13636 !important;
}

.bg-white {
  color: #58666e;
  background-color: #fff;
}

.bg-white a {
  color: inherit;
}

.bg-white a:hover {
  color: inherit;
}

.bg-white .text-muted {
  color: #98a6ad !important;
}

.bg-white .lt,
.bg-white .lter,
.bg-white .dk,
.bg-white .dker {
  background-color: #fff;
}

.bg-white-only {
  background-color: #ffffff;
}

.bg-white-opacity {
  background-color: rgba(255, 255, 255, 0.5);
}

.bg-black-opacity {
  background-color: rgba(32, 43, 54, 0.5);
}

a.bg-light:hover {
  color: inherit;
}

a.bg-primary:hover {
  background-color: #6254b2;
}

a.text-primary:hover {
  color: #6254b2;
}

.text-primary {
  color: #7266ba;
}

.text-primary-lt {
  color: #8278c2;
}

.text-primary-lter {
  color: #9289ca;
}

.text-primary-dk {
  color: #6254b2;
}

.text-primary-dker {
  color: #564aa3;
}

a.bg-info:hover {
  background-color: #19a9d5;
}

a.text-info:hover {
  color: #19a9d5;
}

.text-info {
  color: #23b7e5;
}

.text-info-lt {
  color: #3abee8;
}

.text-info-lter {
  color: #51c6ea;
}

.text-info-dk {
  color: #19a9d5;
}

.text-info-dker {
  color: #1797be;
}

a.bg-success:hover {
  background-color: #23ad44;
}

a.text-success:hover {
  color: #23ad44;
}

.text-success {
  color: #27c24c;
}

.text-success-lt {
  color: #2ed556;
}

.text-success-lter {
  color: #43d967;
}

.text-success-dk {
  color: #23ad44;
}

.text-success-dker {
  color: #1e983b;
}

a.bg-warning:hover {
  background-color: #f9d21a;
}

a.text-warning:hover {
  color: #f9d21a;
}

.text-warning {
  color: #fad733;
}

.text-warning-lt {
  color: #fbdc4c;
}

.text-warning-lter {
  color: #fbe165;
}

.text-warning-dk {
  color: #f9d21a;
}

.text-warning-dker {
  color: #f4ca06;
}

a.bg-danger:hover {
  background-color: #ee3939;
}

a.text-danger:hover {
  color: #ee3939;
}

.text-danger {
  color: #f05050;
}

.dropdown-menu > li > a.text-danger {
  color: #f05050;
}

.text-danger-lt {
  color: #f26767;
}

.text-danger-lter {
  color: #f47f7f;
}

.text-danger-dk {
  color: #ee3939;
}

.text-danger-dker {
  color: #ec2121;
}

a.bg-dark:hover {
  background-color: #2f3342;
}

a.text-dark:hover {
  color: #2f3342;
}

.text-dark {
  color: #3a3f51;
}

.text-dark-lt {
  color: #454b60;
}

.text-dark-lter {
  color: #4f566f;
}

.text-dark-dk {
  color: #2f3342;
}

.text-dark-dker {
  color: #252833;
}

a.bg-#000000:hover {
  background-color: #131e25;
}

a.text-#000000:hover {
  color: #131e25;
}

.text-#000000 {
  color: #053257;
}

.text-#000000-lt {
  color: #253847;
}

.text-#000000-lter {
  color: #2d4658;
}

.text-#000000-dk {
  color: #131e25;
}

.text-#000000-dker {
  color: #0b1014;
}

.text-white {
  color: #fff;
}

.text-black {
  color: #000;
}

.text-muted {
  color: #98a6ad;
}

.bg {
  background-color: #f0f3f4;
}

.pos-rlt {
  position: relative;
}

.pos-stc {
  position: static !important;
}

.pos-abt {
  position: absolute;
}

.pos-fix {
  position: fixed;
}

.show {
  visibility: visible;
}

.line {
  width: 100%;
  height: 2px;
  margin: 10px 0;
  overflow: hidden;
  font-size: 0;
}

.line-xs {
  margin: 0;
}

.line-lg {
  margin-top: 15px;
  margin-bottom: 15px;
}

.line-dashed {
  background-color: transparent;
  border-style: dashed !important;
  border-width: 0;
}

.no-line {
  border-width: 0;
}

.no-border,
.no-borders {
  border-color: transparent;
  border-width: 0;
}

.no-radius {
  border-radius: 0;
}

.radius-sm {
  border-radius: 3px;
}

.block {
  display: block;
}

.block.hide {
  display: none;
}

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

.none {
  display: none;
}

.pull-none {
  float: none;
}

.rounded {
  border-radius: 500px;
}

.clear {
  display: block;
  overflow: hidden;
}

.no-bg {
  color: inherit;
  background-color: transparent;
}

.no-select {
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}

.l-h {
  line-height: 1.42857143;
}

.l-h-0x {
  line-height: 0;
}

.l-h-1x {
  line-height: 1.2;
}

.l-h-2x {
  line-height: 2em;
}

.l-s-1x {
  letter-spacing: 1;
}

.l-s-2x {
  letter-spacing: 2;
}

.l-s-3x {
  letter-spacing: 3;
}

.font-normal {
  font-weight: normal;
}

.font-thin {
  font-weight: 300;
}

.font-bold {
  font-weight: 700;
}

.text-3x {
  font-size: 3em;
}

.text-2x {
  font-size: 2em;
}

.text-1-6x {
  font-size: 1.666em;
}

.text-lg {
  font-size: 18px;
}

.text-md {
  font-size: 16px;
}

.text-base {
  font-size: 14px;
}

.text-sm {
  font-size: 13px;
}

.text-xs {
  font-size: 12px;
}

.text-10 {
  font-size: 10px;
}

.text-extrasmall {
  font-size: 8px;
}

.text-xxs {
  text-indent: -9999px;
}

.text-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-u-c {
  text-transform: uppercase;
}

.text-l-t {
  text-decoration: line-through;
}

.text-u-l {
  text-decoration: underline;
}

.text-active,
.active > .text,
.active > .auto .text {
  display: none !important;
}

.active > .text-active,
.active > .auto .text-active {
  display: inline-block !important;
}

.box-shadow {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}

.box-shadow-lg {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05);
}

.text-shadow {
  font-size: 170px;
  text-shadow: 0 1px 0 #dee5e7, 0 2px 0 #fcfdfd, 0 5px 10px rgba(0, 0, 0, 0.125), 0 10px 20px rgba(0, 0, 0, 0.2);
}

.no-shadow {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.wrapper-xxs {
  padding: 1px 2px;
}

.wrapper-xs {
  padding: 5px;
}

.wrapper-sm {
  padding: 10px;
}

.wrapper {
  padding: 15px;
}

.wrapper-md {
  padding: 20px;
}

.wrapper-lg {
  padding: 30px;
}

.wrapper-xl {
  padding: 50px;
}

.padder-lg {
  padding-right: 30px;
  padding-left: 30px;
}

.padder-md {
  padding-right: 20px;
  padding-left: 20px;
}

.padder {
  padding-right: 15px;
  padding-left: 15px;
}

.padder-sm {
  padding-right: 10px;
  padding-left: 10px;
}

.padder-v {
  padding-top: 15px;
  padding-bottom: 15px;
}

.no-padder {
  padding: 0 !important;
}

.pull-in {
  margin-right: -15px;
  margin-left: -15px;
}

.pull-out {
  margin: -10px -15px;
}

.pull-up-md {
    position: relative;
    top: -5px;
}

.pull-up-sm {
    position: relative;
    top: -2px;
}

.pull-up-xs {
    position: relative;
    top: -1px;
}

.b {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.b-a {
  /*border: 1px solid #dee5e7;*/
}

.b-t {
  border-top: 1px solid #dee5e7;
}

.b-r {
  border-right: 1px solid #dee5e7;
}

.b-b {
  border-bottom: 1px solid #dee5e7;
}

.b-l {
  border-left: 1px solid #dee5e7;
}

.b-light {
  border-color: #edf1f2;
}

.b-dark {
  border-color: #3a3f51;
}

.b-black {
  border-color: #3a3f51;
}

.b-primary {
  border-color: #7266ba;
}

.b-success {
  border-color: #27c24c;
}

.b-info {
  border-color: #23b7e5;
}

.b-warning {
  border-color: #fad733;
}

.b-danger {
  border-color: #f05050;
}

.b-white {
  border-color: #ffffff;
}

.b-dashed {
  border-style: dashed !important;
}

.b-l-light {
  border-left-color: #edf1f2;
}

.b-l-dark {
  border-left-color: #3a3f51;
}

.b-l-black {
  border-left-color: #3a3f51;
}

.b-l-primary {
  border-left-color: #7266ba;
}

.b-l-success {
  border-left-color: #27c24c;
}

.b-l-info {
  border-left-color: #23b7e5;
}

.b-l-warning {
  border-left-color: #fad733;
}

.b-l-danger {
  border-left-color: #f05050;
}

.b-l-white {
  border-left-color: #ffffff;
}

.b-l-2x {
  border-left-width: 2px;
}

.b-l-3x {
  border-left-width: 3px;
}

.b-l-4x {
  border-left-width: 4px;
}

.b-l-5x {
  border-left-width: 5px;
}

.b-2x {
  border-width: 2px;
}

.b-3x {
  border-width: 3px;
}

.b-4x {
  border-width: 4px;
}

.b-5x {
  border-width: 5px;
}

.r {
  border-radius: 2px 2px 2px 2px;
}

.r-2x {
  border-radius: 4px;
}

.r-3x {
  border-radius: 6px;
}

.r-l {
  border-radius: 2px 0 0 2px;
}

.r-r {
  border-radius: 0 2px 2px 0;
}

.r-t {
  border-radius: 2px 2px 0 0;
}

.r-b {
  border-radius: 0 0 2px 2px;
}

.m-xxs {
  margin: 2px 4px;
}

.m-xs {
  margin: 5px;
}

.m-sm {
  margin: 10px;
}

.m {
  margin: 15px;
}

.m-md {
  margin: 20px;
}

.m-lg {
  margin: 30px;
}

.m-xl {
  margin: 50px;
}

.m-n {
  margin: 0 !important;
}

.m-l-none {
  margin-left: 0 !important;
}

.m-l-xs {
  margin-left: 5px;
}

.m-l-sm {
  margin-left: 10px;
}

.m-l {
  margin-left: 15px;
}

.m-l-md {
  margin-left: 20px;
}

.m-l-lg {
  margin-left: 30px;
}

.m-l-xl {
  margin-left: 40px;
}

.m-l-xxl {
  margin-left: 50px;
}

.m-l-n-xxs {
  margin-left: -1px;
}

.m-l-n-xs {
  margin-left: -5px;
}

.m-l-n-sm {
  margin-left: -10px;
}

.m-l-n {
  margin-left: -15px;
}

.m-l-n-md {
  margin-left: -20px;
}

.m-l-n-lg {
  margin-left: -30px;
}

.m-l-n-xl {
  margin-left: -40px;
}

.m-l-n-xxl {
  margin-left: -50px;
}

.m-t-none {
  margin-top: 0 !important;
}

.m-t-xxs {
  margin-top: 1px;
}

.m-t-xs {
  margin-top: 5px;
}

.m-t-sm {
  margin-top: 10px;
}

.m-t {
  margin-top: 15px;
}

.m-t-md {
  margin-top: 20px;
}

.m-t-lg {
  margin-top: 30px;
}

.m-t-xl {
  margin-top: 40px;
}

.m-t-xxl {
  margin-top: 50px;
}

.m-t-n-xxs {
  margin-top: -1px;
}

.m-t-n-xss {
  margin-top: -3px;
}

.m-t-n-xs {
  margin-top: -5px;
}

.m-t-n-sm {
  margin-top: -10px;
}

.m-t-n {
  margin-top: -15px;
}

.m-t-n-md {
  margin-top: -20px;
}

.m-t-n-lg {
  margin-top: -30px;
}

.m-t-n-xl {
  margin-top: -40px;
}

.m-t-n-xxl {
  margin-top: -50px;
}

.m-r-none {
  margin-right: 0 !important;
}

.m-r-xxs {
  margin-right: 1px;
}

.m-r-xs {
  margin-right: 5px;
}

.m-r-sm {
  margin-right: 10px;
}

.m-r {
  margin-right: 15px;
}

.m-r-md {
  margin-right: 20px;
}

.m-r-lg {
  margin-right: 30px;
}

.m-r-xl {
  margin-right: 40px;
}

.m-r-xxl {
  margin-right: 50px;
}

.m-r-n-xxs {
  margin-right: -1px;
}

.m-r-n-xs {
  margin-right: -5px;
}

.m-r-n-sm {
  margin-right: -10px;
}

.m-r-n {
  margin-right: -15px;
}

.m-r-n-md {
  margin-right: -20px;
}

.m-r-n-lg {
  margin-right: -30px;
}

.m-r-n-xl {
  margin-right: -40px;
}

.m-r-n-xxl {
  margin-right: -50px;
}

.m-b-none {
  margin-bottom: 0 !important;
}

.m-b-xxs {
  margin-bottom: 1px;
}

.m-b-xs {
  margin-bottom: 5px;
}

.m-b-sm {
  margin-bottom: 10px;
}

.m-b {
  margin-bottom: 15px;
}

.m-b-md {
  margin-bottom: 20px;
}

.m-b-lg {
  margin-bottom: 30px;
}

.m-b-xl {
  margin-bottom: 40px;
}

.m-b-xxl {
  margin-bottom: 50px;
}

.m-b-n-xxs {
  margin-bottom: -1px;
}

.m-b-n-xs {
  margin-bottom: -5px;
}

.m-b-n-sm {
  margin-bottom: -10px;
}

.m-b-n {
  margin-bottom: -15px;
}

.m-b-n-md {
  margin-bottom: -20px;
}

.m-b-n-lg {
  margin-bottom: -30px;
}

.m-b-n-xl {
  margin-bottom: -40px;
}

.m-b-n-xxl {
  margin-bottom: -50px;
}

.avatar {
  position: relative;
  display: block;
  white-space: nowrap;
  border-radius: 500px;
}

.avatar img {
  width: 100%;
  border-radius: 500px;
}

.avatar i {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: 2px;
  border-style: solid;
  border-width: 2px;
  border-radius: 100%;
}

.avatar i.right {
  right: 0;
  left: auto;
}

.avatar i.bottom {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}

.avatar i.left {
  top: auto;
  bottom: 0;
}

.avatar i.on {
  background-color: #27c24c;
}

.avatar i.off {
  background-color: #98a6ad;
}

.avatar i.busy {
  background-color: #f05050;
}

.avatar i.away {
  background-color: #fad733;
}

.avatar.thumb-md i {
  width: 12px;
  height: 12px;
  margin: 3px;
}

.avatar.thumb-sm i {
  margin: 1px;
}

.avatar.thumb-sm i.share {
    margin: -2px;
}
.avatar i.share {
    width: 15px;
    height: 16px;
    margin: 2px;
    border-radius: 2px;
    background: #333;
}

.avatar.thumb-xs i {
  margin: 0;
}

.w-1x {
  width: 1em;
}

.w-2x {
  width: 2em;
}

.w-3x {
  width: 3em;
}

.w-20 {
  width: 20px;
}

.w-tiny {
  width: 30px;
}

.w-xxs {
  width: 60px;
}

.w-xs {
  width: 90px;
}

.w-s {
  width: 120px;
}

.w-sm {
  width: 150px;
}

.w {
  width: 200px;
}

.w-md {
  width: 240px;
}

.w-lg {
  width: 280px;
}

.w-xl {
  width: 320px;
}

.w-xxl {
  width: 360px;
}

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-md {
  height: 175px;
}

.thumb-xl {
  display: inline-block;
  width: 128px;
}

.thumb-lg {
  display: inline-block;
  width: 96px;
}

.thumb-md {
  display: inline-block;
  width: 64px;
}

.thumb {
  display: inline-block;
  width: 50px;
}

.thumb-sm {
  display: inline-block;
  width: 40px;
}

.thumb-xs {
  display: inline-block;
  width: 34px;
}

.thumb-xxs {
  display: inline-block;
  width: 30px;
}

.thumb-wrapper {
  padding: 2px;
  border: 1px solid #dee5e7;
}

.thumb img,
.thumb-xs img,
.thumb-sm img,
.thumb-md img,
.thumb-lg img,
.thumb-btn img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.img-full {
  width: 100%;
}

.img-full img {
  width: 100%;
}

.scrollable {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.scrollable.hover {
  overflow-y: hidden !important;
}

.scrollable.hover:hover {
  overflow: visible !important;
  overflow-y: auto !important;
}

.smart .scrollable {
  overflow-y: auto !important;
}

.scroll-x,
.scroll-y {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.scroll-y {
  overflow-y: auto;
}

.scroll-x {
  overflow-x: auto;
}

.hover-action {
  display: none;
}

.hover-rotate {
  -webkit-transition: all 0.2s ease-in-out 0.1s;
          transition: all 0.2s ease-in-out 0.1s;
}

.hover-anchor:hover > .hover-action,
.hover-anchor:focus > .hover-action,
.hover-anchor:active > .hover-action {
  display: inherit;
}

.hover-anchor:hover > .hover-rotate,
.hover-anchor:focus > .hover-rotate,
.hover-anchor:active > .hover-rotate {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
}

.backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}

.backdrop.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

/*desktop*/

@media screen and (min-width: 992px) {
  .col-lg-2-4 {
    float: left;
    width: 20.000%;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .hidden-sm.show {
    display: inherit !important;
  }
  .no-m-sm {
    margin: 0 !important;
  }
}

/*phone*/

@media screen and (max-width: 767px) {
  .w-auto-xs {
    width: auto;
  }
  .w-full-xs {
    width: 100%;
  }
  .row-2 [class*="col"] {
    float: left;
    width: 50%;
  }
  .row-2 .col-0 {
    clear: none;
  }
  .row-2 li:nth-child(odd) {
    margin-left: 0;
    clear: left;
  }
  .text-center-xs {
    text-align: center;
  }
  .text-left-xs {
    text-align: left;
  }
  .text-right-xs {
    text-align: right;
  }
  .no-border-xs {
    border-width: 0;
  }
  .pull-none-xs {
    float: none !important;
  }
  .pull-right-xs {
    float: right !important;
  }
  .pull-left-xs {
    float: left !important;
  }
  .dropdown-menu.pull-none-xs {
    left: 0;
  }
  .hidden-xs.show {
    display: inherit !important;
  }
  .wrapper-lg,
  .wrapper-md {
    padding: 15px;
  }
  .padder-lg,
  .padder-md {
    padding-right: 15px;
    padding-left: 15px;
  }
  .no-m-xs {
    margin: 0 !important;
  }
  .m-b-sm-xs {
    margin-bottom: 10px !important;
  }
}

.butterbar {
  position: relative;
  height: 3px;
  margin-bottom: -3px;
}

.butterbar .bar {
  position: absolute;
  width: 100%;
  height: 0;
  text-indent: -9999px;
  background-color: #23b7e5;
}

.butterbar .bar:before {
  position: absolute;
  right: 50%;
  left: 50%;
  height: 3px;
  background-color: inherit;
  content: "";
}

.butterbar.active {
  -webkit-animation: changebar 2.25s infinite 0.75s;
     -moz-animation: changebar 2.25s infinite 0.75s;
          animation: changebar 2.25s infinite 0.75s;
}

.butterbar.active .bar {
  -webkit-animation: changebar 2.25s infinite;
     -moz-animation: changebar 2.25s infinite;
          animation: changebar 2.25s infinite;
}

.butterbar.active .bar:before {
  -webkit-animation: movingbar 0.75s infinite;
     -moz-animation: movingbar 0.75s infinite;
          animation: movingbar 0.75s infinite;
}

/* Moving bar */

@-webkit-keyframes movingbar {
  0% {
    right: 50%;
    left: 50%;
  }
  99.9% {
    right: 0;
    left: 0;
  }
  100% {
    right: 50%;
    left: 50%;
  }
}

@-moz-keyframes movingbar {
  0% {
    right: 50%;
    left: 50%;
  }
  99.9% {
    right: 0;
    left: 0;
  }
  100% {
    right: 50%;
    left: 50%;
  }
}

@keyframes movingbar {
  0% {
    right: 50%;
    left: 50%;
  }
  99.9% {
    right: 0;
    left: 0;
  }
  100% {
    right: 50%;
    left: 50%;
  }
}

/* change bar */

@-webkit-keyframes changebar {
  0% {
    background-color: #23b7e5;
  }
  33.3% {
    background-color: #23b7e5;
  }
  33.33% {
    background-color: #fad733;
  }
  66.6% {
    background-color: #fad733;
  }
  66.66% {
    background-color: #7266ba;
  }
  99.9% {
    background-color: #7266ba;
  }
}

@-moz-keyframes changebar {
  0% {
    background-color: #23b7e5;
  }
  33.3% {
    background-color: #23b7e5;
  }
  33.33% {
    background-color: #fad733;
  }
  66.6% {
    background-color: #fad733;
  }
  66.66% {
    background-color: #7266ba;
  }
  99.9% {
    background-color: #7266ba;
  }
}

@keyframes changebar {
  0% {
    background-color: #23b7e5;
  }
  33.3% {
    background-color: #23b7e5;
  }
  33.33% {
    background-color: #fad733;
  }
  66.6% {
    background-color: #fad733;
  }
  66.66% {
    background-color: #7266ba;
  }
  99.9% {
    background-color: #7266ba;
  }
}


/* Carry over from OLD CBS STYLESHEET THEME */



/************ CALENDAR STYLES *****************/
/************ calendar.html ******************/

#external-events p { font-size: 11px; }
#external-events.shift-list .external-event {
    color: #000;
}
.external-event {
    background: #F5EB76; color: #fff; padding: 5px 10px; margin-bottom: 5px; font-weight: bold;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: pointer;
    position: relative;
}
#external-events .external-event.hide-event {
    background: #ccc;
    color: #999;
}

#external-events.resource-list a.ajax-delete {
    width: 31px;
    height: 29px;
    position: absolute;
    right: 0px;
    background: #EEE;
    border: 1px solid #CCC;
    top: 0px;
}
#external-events.resource-list a.ajax-delete:hover {
    background: #fff;
    border-color: #999;
}
#external-events.resource-list a.ajax-delete img {
    position: relative;
    top: 6px;
    left: 8px;
}
#external-events.shift-list a.ajax-delete {
    width: 16px;
    height: 16px;
    float: right;
    margin-top: 3px;
}
#external-events.shift-list a.shift-edit {
    width: 16px;
    height: 16px;
    float: right;
    margin-right: 10px;
    margin-top: 3px;
}
#external-events.shift-list a.shift-edit img, #external-events.shift-list a.ajax-delete img {
    float: right;
}
.fc-header-left span.fc-state-active {
background: #404B50;
    color: #fff;
    border: 1px solid #333;
    -moz-box-shadow: inset 1px 1px 1px #333;
    -webkit-box-shadow: insest 1px 1px 1px #333;
}
.fc-header-title { font-size: 18px; }
.fc-header-title h2 { font-size: 24px; }
.fc-button-prev:hover, .fc-button-next:hover { color: #fff; background: #404B50!important; border-color: #333; }
.fc-button-today:hover { background: #404B50; border-color: #333; color: #fff; }
.fc-event-vacation {
    background: #ccc !important;
}

.fc-event-callback {
    background: #DDD !important;
    color: #3B4650 !important;
}
.fc-event-misc {
    background: #FFFFCF !important;
    border-color: #3B4650 !important;
}
.fc-event-trade {
    background: #ccc !important;
    color: #111;
    border-color: #c00 !important;
}
.fc-event.fc-event-other {
    border-top-width: 6px;
}
.fc-event.fc-event-incomplete .fc-event-count {
  box-shadow: none;
  font-weight: 700;
  color: #F44336;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.fc-event-other .fc-event-other-note, 
.fc-event-callback .fc-event-other-note {
    display: inline-block;
    width: 92%;
    font-size: .8333em;
    margin: 3px 4%;
    padding-top: 3px;
    font-weight: normal;
}
.fc-event-callback .fc-event-other-note {
  margin: -2px 4% 6px 4%;
  padding: 2px 5px;
  background: #eaeaea;
  border-left: 3px solid #aaa;
  font-style: italic;
  color: #666;
}
.fc-event-callback .fc-event-other-note:before {
  font-family: FontAwesome;
  content: '\f10e';
  color: #aaa;
  margin-right: 5px;
  font-size: .83333em;
}
.fc-event-other .fc-event-users {
  display: none;
}
.fc-event .smaller {
    font-size: 10px;
}
.fc-event-vacation .fc-event-user {
    position: relative;
}
a.delete-timeoff, a.delete-misc-event, a.delete-timeoff-recurring {
    width: 31px;
    height: 29px;
    position: absolute;
    right: 5px;
    background: #EEE;
    border: 1px solid #CCC;
    top: 5px;
    display: none;
}
a.delete-timeoff:hover, a.delete-misc-event:hover, a.delete-timeoff-recurring:hover {
    background: #fff;
    border-color: #999;
}
a.delete-timeoff img, a.delete-misc-event img, a.delete-timeoff-recurring img {
    position: relative;
    top: 6px;
    left: 8px;
}
a.delete-timeoff-recurring {
    background: #F35353;
    border: 1px solid #900;
    right: 43px;
}
a.delete-timeoff-recurring span {
    color: #fff;
    display: inline-block;
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 9px;
}
.fc-event-vacation .fc-event-user:hover a.delete-timeoff,
.fc-event-vacation .fc-event-user:hover a.delete-timeoff-recurring,
.fc-event-misc .fc-event-user:hover a.delete-misc-event {
    display: inline;
}
a.delete-timeoff-recurring:hover span {
    color: #333;
}

.fc-event-user.pending,
#event-calendar .fc-event.pending {
    border: 1px dashed #ccc !important;
    opacity: .5;
    transition: opacity .2s ease;
}
.fc-event-user.pending:hover,
#event-calendar .fc-event.pending:hover {
    opacity: 1;
}
.fc-event-user.pending .timeoff-deny-ajax,
.fc-event-user.pending .timeoff-approve-ajax {
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.6);
    font-weight: 900;
}
.fc-event-user.pending .timeoff-deny-ajax {
    color: #F00;
}
.fc-event-user.pending .timeoff-approve-ajax {
    color: #57a957;
}

body.enduser .fc-event-misc .fc-event-user:hover a.delete-misc-event,
body.enduser .fc-event-vacation .fc-event-user:hover a.delete-timeoff,
body.enduser .fc-event-vacation .fc-event-user:hover a.delete-timeoff-recurring {
    display: none;
}
.expand-event, .collapse-event {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 11px;
    display: none;
}
.fc-event:hover .expand-event, .fc-event:hover .collapse-event {
    display: block;
}
.expand-event {
    background: url(../img/expand-collapse.png) no-repeat top left;
}
.collapse-event {
    background: url(../img/expand-collapse.png) no-repeat 0px -11px;
}
.fc-event-user {
    position: relative;
}
.fc-event-user.moving {
    background: #fff !important;
    color: #F44336 !important;
    border: 1px dashed #F44336 !important;
    border-left: 3px solid #F44336 !important;
    font-weight: bold;
    text-decoration: line-through;
}
.add-overtime {
    width: 18px;
    height: 21px;
    display: none;
    background-position: -54px -160px;
    position: absolute;
    top: 6px;
    right: -2px;
    font-size:14px;
}

.add-overtime-options {
    width: 18px;
    height: 21px;
    background: #ccc url(../images/icons/default/sprites.png) no-repeat;
    background-position: -54px -160px;
    position: absolute;
}
body.adminuser .fc-event-user:hover .add-overtime {
    display: block;
}
body.supervisor .add-overtime,
body.supervisor .fc-event-user:hover .add-overtime {
    display: none;
}
.overtime-count {
    font-size: .8em;
    background: #0b0;
    padding: 1px 3px;
    font-weight: normal;
    position: relative;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
    -moz-box-shadow: 1px 1px 1px #000; -webkit-box-shadow: 1px 1px 1px #000; box-shadow: 1px 1px 1px #000;
}
.hours-count {
    font-size: .8em;
    background: #f00;
    color: #fff;
    padding: 1px 3px;
    font-weight: normal;
    position: relative;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
    -moz-box-shadow: 1px 1px 1px #000; -webkit-box-shadow: 1px 1px 1px #000; box-shadow: 1px 1px 1px #000;
}
body.enduser .fc-event-vacation .unscheduled, body.enduser .fc-event-misc .unscheduled {
    display: none;
}
.fc-event-user.notFullShift {
    background: #F35353;
    border-left: solid 3px rgb(19, 135, 180);
}
.scheduler-label {
    margin-left: 4px;
    font-size: .8em;
    background: #ccc;
    color: #333;
    padding: 1px 2px;
    font-weight: normal;
    position: relative;
    top: 0px;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
    -moz-box-shadow: 1px 1px 1px #000; -webkit-box-shadow: 1px 1px 1px #000; box-shadow: 1px 1px 1px #000;
}
.fc-event .unscheduled.active {
  background: #ffffff;
}
.fc-event .unscheduled.loading {
  background: #eeeeee;
  color: #bdbdbd;
}
.fc-event .unscheduled.hidden-slot {
    display: none;
    background: #CCCCCC;
}
.fc-event:hover .unscheduled.hidden-slot {
    display: inline-block;
}
body.enduser .fc-event:hover .unscheduled.hidden-slot {
    display: none;
}
.fc-event .add-open-slot.hidden-slot {
    display: none;
    background: #FFFFFF;
    color: #62c462;
}
.fc-event .add-open-slot.hidden-slot:hover {
    color: #111;
}
.fc-event:hover .add-open-slot.hidden-slot {
    display: inline-block;
}
body.enduser .fc-event:hover .add-open-slot.hidden-slot {
    display: none;
}
.fc-event-user .remove-open-slot {
    padding: 0 6px;
    border-left: 1px solid #ccc;
    position: absolute;
    right: 0;
    top: 0px;
    font-size: 14px;
    display: none;
    height: 100%;
}
.fc-event-user:hover .remove-open-slot {
    display: inline-block;
}
.fc-event-user:hover .remove-open-slot i.fa {
    position: relative;
    top: 5px;
}
.fc-event-user:hover .remove-open-slot:hover {
    background: #FF6666;
}
.fc-event-user .merge-open-slot {
	padding: 0 6px;
	--border-left: 1px solid #ccc;
	position: absolute;
	right: 0;
  margin-right: 20px;
	top: 5px;
	font-size: 14px;
	--display: none;
	height: 100%;
}
.fc-event-user:hover .merge-open-slot {
	display: inline-block;
}
.fc-event-user:hover .merge-open-slot i.fa {
	position: relative;
	top: 5px;
}
body.enduser .fc-event-user:hover .remove-open-slot {
    display: none;
}
.fc-event.active {
  background: #E0E0E0;
  border-color: #000;
}
.fc-event {
  overflow: hidden;
}
.fc-event:hover {
    z-index: 11 !important;
}
.fc-event-user .fa.fa-file-text {
    font-size: 14px;
    margin-right: 20px;
    /* opacity: .5; */
}
.fc-event .fa.fa-exchange {
    font-size: 11px;
}

.fc-event .self-scheduling-icon {
    /* float: right;
    position: relative; */
    top: 30px;
    /*right: 5px;*/
    font-size: 12px;
    color: #a4a4a4;
}

.fc-view-basicWeek,
.fc-view-month,
.fc-view-agendaDay,
.fc-view-agendaWeek {
  box-sizing: content-box;
}

.fc-today {
  background: #DDE6E9;
}

.fc-event-qualifiers {
    position: absolute;
    top: -10px;
    left: 0px;
}
.fc-event-qualifier {
    padding: 0px 2px;
    font-size: 9px;
    line-height: 10px;
    font-weight: 900;
    color: #666;
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #9C9C9C;
    border-radius: 3px;
    margin-right: 1px;
}
.fc-credential-indicator {
    font-size: 11px;
    vertical-align: middle;
    margin-left: 1px;
}

/* SCHED-24113: qualifier chips render fully inside the shift tile (instead of straddling
   the top edge) with credential-status icons moved to the left and given a contrast border,
   per the ts-credentials mockups. Scoped to #calendar.ts-cred-ui, which init.schedule.js
   toggles from crewSchedulerSettings.credential_visibility_enabled (FeatureFlag::FLAG_TS_
   CREDENTIAL_VISIBILITY) — customers without that flag keep the legacy layout above. */
/* SCHED-24456: the qualifier row sits on its own line directly above the name.
   The negative left margin cancels the leading pill's own left inset so the
   pill's text box lines up with the name's first letter (the pill background
   bleeds that far left of the text column). KEEP THIS IN SYNC with the
   horizontal padding PLUS border-width on .fc-event-qualifier below — the two
   must stay equal and opposite (currently 3px padding + 1px border = -4px). */
.ts-cred-ui .fc-event-qualifiers {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    /* SCHED-24456 (#4): -4px, not -3px — the chip now carries a 1px border on
       top of its 3px padding, so the background bleeds 4px left of the text. */
    margin: 0 0 0 -4px;
}
.ts-cred-ui .fc-event-qualifiers:empty {
    display: none;
}
.ts-cred-ui .fc-event-qualifiers .fc-event-qualifier {
    display: inline-flex;
    align-items: center;
    /* vertical-align:middle forces every chip to align by its middle regardless
       of intrinsic content. Without it, an inline-flex chip's baseline depends
       on its contents — a chip with only text (e.g. "ED") baselines against the
       text line, while a chip that also contains an SVG credential icon
       (missing/expired/expiring) baselines against the last flex-line box. The
       two chips then sit at visibly different vertical positions when placed
       side-by-side on the same row (~2px offset). Aligning by middle removes
       the ambiguity because it doesn't depend on the chip's internal baseline. */
    vertical-align: middle;
    /* SCHED-24456: horizontal padding (plus the 1px border below) is mirrored by
       the -4px left margin on .fc-event-qualifiers above (first-letter
       alignment). Change both or neither. */
    padding: 0 3px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 400;
    /* SCHED-24456 (#4): thin black outline + drop shadow, per the Station 4
       mockup. Shared verbatim with .scheduler-label below so qualifier chips,
       employee labels and group labels keep reading as one pill spec. */
    border: 1px solid #000;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    margin: 0;
    flex-wrap: nowrap;
}
.ts-cred-ui .fc-credential-indicator {
    vertical-align: middle;
    margin-right: 3px;
    flex: 0 0 auto;
}
/* SCHED-24456: the overlap ("conflict") flag shipped at 18px while the
   missing-credential dot next to it is ~12px (1em of an 11px font plus its 1px
   white ring), so the flag read as an oversized blob on the name row. Size is
   set on the svg via width/height ATTRIBUTES in crewscheduler.js, which these
   properties override without !important — the wrapper span's inline
   display/margin/vertical-align are left alone deliberately, since
   vertical-align:middle is already what centres the flag against the name (see
   .fc-event-user-name below). display:block removes the inline-svg baseline
   descender, which otherwise pushes the glyph a couple of px off that centre.
   Scoped to ts-cred-ui: the legacy calendar keeps the 18px flag. */
.ts-cred-ui .fc-event-user .overlap-indicator svg {
    /* 14px, not 12px: at 12px the flag glyph inside the circle was too small to
       read at a glance. Still close to the credential dot's ~12px so the two
       indicators remain a matched pair, just with the conflict flag marginally
       more prominent — which is correct, it is the higher-severity signal. */
    width: 14px;
    height: 14px;
    display: block;
}
/* Missing/expired and expiring-soon are both drawn as inline SVG (see crewscheduler.js
   buildCredentialIndicator()) instead of FontAwesome glyphs, so each shape's fill/stroke can
   be controlled exactly rather than only uniformly scaled. Missing/expired is ringed with a
   white border via box-shadow on the wrapping span (a real `border` would bump the circle's
   box out of round); expiring-soon's black outline is baked into its own SVG stroke instead. */
.ts-cred-ui span.fc-credential-indicator {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #fff;
}
.ts-cred-ui .fc-credential-indicator-svg {
    display: block;
    width: 1em;
    height: 1em;
}

/* Shift-user labels (rendered via labelSpan in crewscheduler.js, distinct from
   .fc-event-qualifier chips) shipped as tiny legacy boxes with a drop shadow —
   ~14px tall, border-radius 2px, box-shadow — while credential-era qualifier
   chips are 18px tall pills. On rows carrying both (a labeled certification
   like HMT/EMT sitting next to a qualifier pill), the mismatch reads as a
   mess: chips at different heights, different corners, different shadows.
   Under ts-cred-ui, harmonize label styling to the qualifier pill so mixed
   rows look like one system. Inline background/color from the label config
   is preserved by not touching those properties. */
.ts-cred-ui .fc-event-user .scheduler-label {
    display: inline-flex;
    align-items: center;
    /* SCHED-24456: centre the copy in the pill. Group labels used to carry an
       inline padding-right:5px (crewscheduler.js) that beat this shorthand on the
       right side only, leaving 6px/5px and pushing the text ~1px right of centre.
       That inline style is gone; keep this padding symmetric. */
    justify-content: center;
    vertical-align: middle;
    /* SCHED-24456: same horizontal padding as .fc-event-qualifier so labels and
       qualifier chips read as one system (the mockup uses a single pill spec for
       both). Wider padding here made adjacent labels look far apart. */
    padding: 0 3px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 400;
    /* SCHED-24456 (#4): matches .fc-event-qualifier above. This replaces the
       earlier border:none/box-shadow:none, which had stripped the legacy
       .scheduler-label drop shadow; the mockup wants it back on labels and
       group labels alike, now with an explicit outline and a softer shadow
       than the legacy opaque `1px 1px 1px #000`. */
    border: 1px solid #000;
    border-radius: 3px;
    margin: 0;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    top: 0;
    position: static;
}

/* SCHED-24456: group labels were italic via an inline style while employee labels
   were upright, so the two rendered in different type styles side by side. The
   italic now lives here, applied only when ts-cred-ui is OFF, so the legacy UI is
   unchanged and the credential UI renders both label kinds identically. */
#calendar:not(.ts-cred-ui) .scheduler-label-group {
    font-style: italic;
}

/* SCHED-24456: align the name line to the LEFT EDGE of the first qualifier chip
   rather than to that chip's first letter. .fc-event-qualifiers above is pulled
   -4px so the chip's text column lands on the name's first letter; the chip's
   background/border therefore bleeds 4px further left than any text on the row.
   Matching that bleed with the name reclaims those 4px as usable width for the
   trailing .fc-event-user-labels, and squares the row's left edge visually.
   KEEP -4px IN SYNC with .fc-event-qualifiers' margin-left (3px padding + 1px
   border on .fc-event-qualifier).

   The shift goes on whichever element LEADS the name line, not unconditionally on
   the name: the concurrent-time-off badge and the overlap flag are both emitted
   before it (crewscheduler.js, in that fixed order). notesSpan is pull-right and
   signupEventSpan precedes the qualifier row, so neither can lead this line. */
.ts-cred-ui .fc-event-user > .concurrent-time-off,
.ts-cred-ui .fc-event-user > .overlap-indicator,
.ts-cred-ui .fc-event-user > .fc-event-user-name {
    margin-left: -4px;
}
/* ...then cancel it on anything that turned out not to be first. Order is fixed,
   so a general-sibling cancel is sufficient and needs no :first-child support. */
.ts-cred-ui .fc-event-user > .concurrent-time-off ~ .overlap-indicator,
.ts-cred-ui .fc-event-user > .concurrent-time-off ~ .fc-event-user-name,
.ts-cred-ui .fc-event-user > .overlap-indicator ~ .fc-event-user-name {
    margin-left: 0;
}

/* SCHED-24456: the trailing chips (CallBack + group/employee labels) sit tight
   together as one group after the name, mirroring the qualifier row's spacing. */
.ts-cred-ui .fc-event-user-labels {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-left: 3px;
    vertical-align: middle;
}

/* SCHED-24456: name is a touch larger than the chips around it, and unbolded
   along with them. */
.ts-cred-ui .fc-event-user-name {
    /* SCHED-24456: no font-family override — the name inherits the page's Source
       Sans Pro stack like every other chip on the tile. The Open Sans override that
       used to sit here rendered optically heavier than its neighbours, which read as
       bold rather than regular; Source Sans Pro's own 400 face is the regular weight
       the mockup asks for. */
    font-size: 13px;
    /* SCHED-24456: 400, not 300. The earlier 300 rendered Source Sans Pro's real
       Light face, and against the dark #3d4852 user chip those thin strokes read as
       noticeably less legible than the mockup — which uses a regular-weight face
       throughout. dailyview.twig loads Source Sans Pro :300,400 so this resolves to
       a real Regular face rather than a synthesised or Light one.
       The -webkit-font-smoothing:antialiased / -moz-osx-font-smoothing:grayscale
       pair that used to sit here is deliberately gone with it — it existed only to
       counteract Light text looking optically heavy, and at 400 it does the
       opposite, thinning the glyphs and undoing the legibility gain. */
    font-weight: 400;
    /* SCHED-24456: the tile's inherited line-height (~18.6px) left ~1.8px of
       half-leading above a 15px glyph box, which read as a gap under the
       qualifier row. Tightening to the glyph height closes it without moving
       the qualifier row itself. */
    line-height: 1.15;
    /* SCHED-24456: the name was the only child of .fc-event-user still aligned
       on the text baseline, while .fc-event-user-labels (and the overlap flag)
       align by middle. Two axes on one line made every trailing chip — group
       and employee labels alike — sit visibly below the name. Middle-aligning
       the name puts all of them on a single axis. */
    vertical-align: middle;
}

.day-label {
    background-color: #efefef;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0px 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: black;
    border: solid 1px black;
    left: 5px;
    top: 4px;
    position: absolute;
  font-size: 13px;
  font-weight: 500;
}

#day-color label.ridisplay {
    float: none;
    width: auto;
}
#day-color .rimain {
    top: 4px;
    position: relative;
}

.fc-event.full-view {
    padding-bottom: 5px;
}

/*** DUAL BOX ***/
.dualselect { display: block; }
.dualselect select { height: 200px; width: 40%; }
.dualselect .ds_arrow { display: inline-block; vertical-align: top; padding-top: 60px; margin: 0 10px; }
.dualselect .ds_arrow .ds_prev, .dualselect .ds_arrow .ds_next {
    display: block; padding: 5px 10px 7px 10px; border: 1px solid #ccc; margin-bottom: 5px; font-size: 16px; font-weight: bold;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #eee;
}
.dualselect .ds_arrow .ds_prev:hover, .dualselect .ds_arrow .ds_next:hover {
    background: #444; color: #fff; border-color: #333; cursor: pointer;
}

/*** QUICK FORM ***/
.quickform { margin: 10px; }
.quickform p { margin: 10px 0; }
.quickform label { display: block; margin-bottom: 5px; color: #333; font-weight: bold; width: 100px; }
.quickform .smallinput { width: 60px; }
.quickform .action { margin-left: 120px; }

.customform h4 {
    margin-bottom: 5px;
}
.customform p {
    margin-bottom: 20px;
}


/************** RIGHT PANEL STYLES *****************/
/**************	used by some pages *****************/

.mainright { width: 300px; position: absolute; top: 0; right: 0; }
.mainrightinner { margin-bottom: 20px; }


/************** WIDGET BOX *************************/
/************** widget.html, dashboard.html ********/

.widgetbox {
    background: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin-bottom: 10px;
    -moz-box-shadow: 1px 1px 2px #eee; -webkit-box-shadow: 1px 1px 2px #eee; box-shadow: 1px 1px 2px #eee;
}
.widgetbox .title {
    background: rgb(28, 43, 54); -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
}

.widgetbox.uncollapsible .title {
    background: rgb(28, 43, 54);
}
.widgetbox .title h2 {
    font-size: 18px; margin: 0px; letter-spacing: 0.8px; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-weight: normal;
    background-repeat: no-repeat; padding: 0 0 0 10px; color: #fff; background-image: url(../images/icons/default/sprites.png);
}
.widgetbox .title h2 span {
    display: block; padding: 6px 0 6px 10px; margin-left: 25px; border-left: 1px solid #444;
    -moz-border-radius: 0 2px 0 0; -webkit-border-radius: 0 2px 0 0; border-radius: 0 2px 0 0; text-shadow: 1px 1px #222;
}

.widgetbox .widgetcontent {
    border: 1px solid #ddd; border-top: 0; padding: 10px; line-height: 21px;
    -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
}
.widgetcontent ul.linklist { list-style: none; }
.widgetcontent ul.linklist li { border-bottom: 1px dotted #ddd; padding: 1px 0; }
.widgetcontent ul.linklist li a { display: block; padding: 2px 5px; color: #666; }
.widgetcontent ul.linklist li a:hover { background: #f7f7f7; text-decoration: none; }

.widgetbox .titlehover h2 span {}
.widgetbox .widgettoggle { overflow: hidden; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }

.widgetbox .title h2.chart { background-position: -10px -227px; }
.widgetbox .title h2.calendar { background-position: -82px -155px; }
.widgetbox .title h2.tabbed { background-position: -190px -443px; }
.widgetbox .title h2.general { background-position: -154px -443px; }
.widgetbox .title h2.chat { background-position: -82px -299px; }
.widgetbox .title h2.inboxi { background-position: -154px -335px; }
.widgetbox .title h2.rankings { background-position: -9px -227px; }

.widgetbox .listthumb { list-style: none; margin: 0; }
.widgetbox .listthumb li { padding: 0; margin: 8px 0; }
.widgetbox .listthumb img { vertical-align: middle; }
.widgetbox .thumb { list-style: none; margin: 0; }
.widgetbox .thumb li { display: inline-block; padding: 0; margin-right: 5px; }

.widgetbox .widgetoptions {
    padding: 5px; margin: 0px !important; border: 1px solid #ddd; border-top: 0; background: #f7f7f7; position: relative;
    -moz-box-shadow: inset 0 1px 0 #fff; -webkit-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff;
}
.widgetbox .widgetoptions a {
    padding: 5px 10px; display: inline-block; border: 1px solid #ccc; background: #fff; font-weight: bold; font-size: 11px; color: #333;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #f7f7f7;
    -moz-box-shadow: 0 1px 0 #fff; -webkit-box-shadow: 0 1px 0 #fff; box-shadow: 0 1px 0 #fff;
}
.widgetbox .widgetoptions a:hover {
    text-decoration: none; -moz-box-shadow: 0 0 3px #ccc; -webkit-box-shadow: 0 0 3px #ccc; box-shadow: 0 0 3px #ccc;
    border: 1px solid #bbb;
}
.widgetbox .widgetoptions a.highlighted {
    color: #fff;
    background: #3B4650;
    border: 1px solid #3B4650;
}
.widgetbox .widgetoptions a.highlighted:hover {
    background: #283038;
    border: 1px solid #3B4650;
}
.widgetbox .widgetoptions .right { float: right; }




/******************* WIDGET BOX ********************/
/******************* dashboard.html ****************/

.analytics2 { padding: 5px; background: #eee; border: 1px solid #ccc; text-align: center; }
.analytics small { text-transform: uppercase; font-size: 10px; font-weight: bold; color: #069; }
.analytics h1 { font-size: 24px; color: #333; margin: 2px 0; }
.analytics h2 { font-size: 18px; color: #333; text-align: center; }
.analytics h3 { font-size: 16px; color: #333; }


/************** WYSIWYG EDITOR ******************/
/************** editor.html *********************/

.wysiwyg-dialog-content input.submit, .ui-dialog .wysiwyg input.submit {
    background: #333; color: #ccc; font-weight: bold; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
    cursor: pointer; border: 1px solid #333;
}
.wysiwyg-dialog-content input.submit:hover, .ui-dialog .wysiwyg input.submit:hover { background: #ffdd00; border: 1px solid #ff9900; color: #333; }
.wysiwyg-dialog-content input.reset, .ui-dialog .wysiwyg input.reset {
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: pointer; font-weight: bold; color: #666; background: #f7f7f7;
}
.wysiwyg-dialog-content input.reset:hover, .ui-dialog .wysiwyg input.reset:hover { background: #eee; }


/*************** NOTIFICATION MESSAGE STYLES ******************/
/*************** media.html ***********************************/

.notifyMessage { padding: 7px 10px; font-weight: bold; margin: 10px 0; display: none; }
.notifySuccess { border: 1px solid #C1D779; background: #EFFEB9; display: block; }
.notifyError { border: 1px solid #E18B7C; background: #FAD5CF; display: block; }


/************** WIZARD STYLES ************************/
/************** wizard.html **************************/

.wizard .hormenu { list-style: none; }
.wizard .hormenu li { float: left; width: 33%; }
.wizard .hormenu li a { display: block; }
.wizard .hormenu li a:hover { text-decoration: none; }
.wizard .hormenu li a span.h2 { font-size: 24px; color: #999; text-align: center; display: block; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; }
.wizard .hormenu li a span.dot { display: block; height: 20px; margin-top: 5px; text-align: center; background: url(../images/stepline.png) repeat-x center left; }
.wizard .hormenu li span.label { display: block; text-align: center; font-weight: bold; color: #999; }
.wizard .hormenu li a span.dot span { width: 20px; height: 20px; display: inline-block; background: url(../images/steps.png) no-repeat 0 -40px; }
.wizard .hormenu li:first-child a span.dot { margin-left: 45%; text-align: left; }
.wizard .hormenu li:last-child a span.dot { margin-right: 45%; text-align: right; }
.wizard .hormenu li a.done span.h2,.wizard .hormenu li a.done span.label { color: #333; }
.wizard .hormenu li a.done span.dot span { background-position: 0 -20px; }
.wizard .hormenu li:first-child a.done span.dot span { background-position: 0 0; }
.wizard .hormenu li a.selected span.dot span { background-position: 0 -120px; }
.wizard .hormenu li:first-child a.selected span.dot span { background-position: 0 -100px; }
.wizard .hormenu li a.selected span.h2,.wizard .hormenu li a.selected span.label { color: #333; }


/**************** TABBED WIZARD *******************/
/**************** wizard.html *********************/

.wizard .tabbedmenu { list-style: none; background: #f7f7f7; padding: 10px; padding-bottom: 0; border: 1px solid #ddd; }
.wizard .tabbedmenu.fixed {
    position: fixed;
    top: 0;
    z-index: 100;
}
.wizard .tabbedmenu li { display: inline-block; margin-right: 5px; position: relative; bottom: -1px; }
.wizard .tabbedmenu li a { display: block; padding: 10px 20px; color: #999; border: 1px solid #ddd; background: #eee; }
.wizard .tabbedmenu li a { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.wizard .tabbedmenu li a span { font-weight: bold; }
.wizard .tabbedmenu li a span.h2 { color: #999; display: block; font-size: 24px; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-weight: normal; }
.wizard .tabbedmenu li a:hover { text-decoration: none; }
.wizard .tabbedmenu li a.selected, .wizard .tabbedmenu li a.done { background: #fff; color: #333; border-bottom: 1px solid #fff; }
.wizard .tabbedmenu li a.selected span.h2, .wizard .tabbedmenu li a.selected span { color: #333; }
.wizard .tabbedmenu li a.done span.h2, .wizard .tabbedmenu li a.done span { color: #333; }

.stepContainer .content {
    border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; padding: 0;
}
.stepContainer .content p { border: 1px solid #ddd; border-bottom: 0; }
.stepContainer .content p:last-child, .stepContainer .content p.last { border-bottom: 1px solid #ddd; }
.stepContainer .par p { margin: 10px 0; padding: 0; border: 0; background: none; }
.stepContainer .par p:last-child { border-bottom: 0; }
.actionBar { padding: 10px 0; position: relative; overflow: none; clear: both; }
.actionBar .loader { float: left; display: none; }
.actionBar a {
    float: right; display: inline-block; padding: 5px 15px; background: #333; color: #eee; margin-left: 5px; font-weight: bold; text-shadow: 1px 1px #111;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
.actionBar a:hover { text-decoration: none; background: #000; color: #fff; text-shadow: none; }
.actionBar a.buttonDisabled { background: #ccc; color: #666; text-shadow: 1px 1px #ddd; }
.actionBar a.buttonDisabled:hover { background: #ccc; color: #666; text-shadow: 1px 1px #ddd; cursor: default; }
.actionBar .msgBox { margin: 40px 0 10px 0; position: relative; }
.actionBar .msgBox .content { padding: 7px 10px; background: #fffccc; color: #333; border: 1px solid #FEEA7A; }
.actionBar .msgBox .close {
    padding: 0 2px 2px 2px; background: none; line-height: 10px; text-transform: lowercase; font-size: 10px; position: absolute; top: 5px; right: 7px;
    color: #333; text-shadow: none; font-weight: bold; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px;
}
.actionBar .msgBox .close:hover { background: #333; color: #eee; }

#user-wizard .actionBar {
    display: inline-block;
    }
    #user-wizard .actionBar a {
	float: none;
    }


/*************** VERTICAL WIZARD *********************/
/*************** wizard.html *************************/

.verwizard .verticalmenu { list-style: none; float: left; width: 180px; }
.verwizard .verticalmenu li { margin-bottom: 2px; }
.verwizard .verticalmenu a { display: block; padding: 5px; color: #999; }
.verwizard .verticalmenu a:hover { text-decoration: none; }
.verwizard .verticalmenu a.selected { background: #333; color: #fff; }
.verwizard .verticalmenu a.done { background: #333; color: #aaa; }
.verwizard .verticalmenu a span { font-weight: bold; }
.verwizard .stepContainer { margin-left: 200px; }
.verwizard .actionBar { margin: 10px 0 0 200px; }


/************* MEDIA STYLES **********************/
/************* media.html ************************/

.imagelist { list-style: none; }
.imagelist li {
    float: left; padding: 5px; margin: 0 20px 20px 0; background: #fff; border: 1px solid #ddd; -moz-border-radius: 2px; -webkit-border-radius: 2px;
    border-radius: 2px; -moz-box-shadow: 1px 1px 2px #eee; -webkit-box-shadow: 1px 1px 2px #eee; box-shadow: 1px 1px 2px #eee;
}
.imagelist li img { display: block; margin-bottom: 10px; }
.imagelist li span { display: block; text-align: right;}
.imagelist li span a { vertical-align: middle; }
.imagelist li span a.name { font-weight: bold; float: left; color: #999; }
.imagelist li span a.name:hover { color: #333; text-decoration: none; }
.imagelist li span a.edit, .imagelist li span a.view, .imagelist li span a.delete {
    display: inline-block; width: 16px; height: 16px; cursor: pointer; margin-left: 5px; vertical-align: middle; opacity: 0.5;
}
.imagelist li span a.edit:hover, .imagelist li span a.view:hover, .imagelist li span a.delete:hover { opacity: 1; }
.imagelist li span a.edit { background: url(../images/icons/default/editor.png); }
.imagelist li span a.view { background: url(../images/icons/default/glass.png); }
.imagelist li span a.delete { background: url(../images/icons/default/trash.png); }

.photoEdit { width: 480px; }


/************ ELEMENT STYLES *******************/
/************ element.html **********************/

.colorselector {
    display: inline-block; height: 28px; width: 28x; vertical-align: middle;
    position: relative; vertical-align: middle; margin-left: 5px;
}
.colorselector span {
    display: block; height: 28px; width: 28px; position: absolute; left: 0; top: 0;
    background: #000 url(../../images/colorpicker/select2.png) no-repeat -4px -4px;
}

.h1,h2,h3,h4,h5{
  color: rgb(76, 87, 90);
}

/************** NOTIFICATION MESSAGES ****************/
/************** elements.html *******************************/

.notification {
    height: 51px; overflow: hidden; position: relative; margin-bottom: 20px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
    -moz-box-shadow: 1px 1px 2px #ddd;
}
.notification p { margin: 17px 10px 0 8px; font-size: 13px; color: #333; }
.notification a.close {
    position: absolute; width: 14px; height: 14px; top: 5px; right: 5px; background-image: url(../images/close.png); background-repeat: no-repeat; }
.notification a.close:hover { cursor: pointer; }
.msgalert a.close { background-position: -14px 0; }
.msgalert a.close:hover { background-position: -14px -14px; }
.msginfo a.close { background-position: -42px 0; }
.msginfo a.close:hover { background-position: -42px -14px; }
.msgsuccess a.close { background-position: -28px 0; }
.msgsuccess a.close:hover { background-position: -28px -14px; }
.msgerror a.close { background-position: 0 0; }
.msgerror a.close:hover { background-position: 0 -14px; }

.msgalert {background: #ffe9ad url(../images/notifications.png) no-repeat 0 -52px; }
.msginfo { background: #d1e4f3 url(../images/notifications.png) no-repeat 0 -156px; }
.msgsuccess { background: #effeb9 url(../images/notifications.png) no-repeat 0 -104px; }
.msgerror { background: #fad5cf url(../images/notifications.png) no-repeat 0 0; }
#errorbox { padding: 10px; border: 1px solid #e18b7c; background: #fad5cf; }
#messagebox { padding: 10px; border: 1px solid #eac572; background: #ffe9ad; }


/********** BUTTONS & ICONS ********************/
/********** buttons.html ***********************/

.button_alert { background-image: url(../images/icons/default/alert.png); }

.anchorbutton {
    display: inline-block; border: 1px solid #ccc; color: #333; -moz-border-radius: 2px; -webkit-border-radius: 2px;
    border-radius: 2px; background-position: 7px; background-repeat: no-repeat; background-color: #f7f7f7;
    -moz-box-shadow: 1px 1px 2px #e7e7e7; -webkit-box-shadow: 1px 1px 2px #e7e7e7; box-shadow: 1px 1px 2px #e7e7e7;
}
.anchorbutton:hover { text-decoration: none; }
.anchorbutton span { background-color: #fff; display: block; margin-left: 30px; border-left: 1px solid #ddd; padding: 5px 10px; }

.buttonlist { list-style: none; }
.buttonlist li { display: inline-block; margin-bottom: 15px; margin-right: 10px; }


.stdbtn {
    font-weight: bold; padding: 7px 10px; border: 1px solid #ccc; background: #eee url(../images/buttons.png) repeat-x top left; color: #333;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; cursor: pointer;
}
.stdbtn:hover { text-decoration: none; }

.btn_yellow { background-position: 0 -38px; border-color: #ebb205; color: #ae510d; }
.btn_blue { background-position: 0 -76px; border-color: #0282ce; color: #fff; }
.btn_black { background-position: 0 -114px; border-color: #222; color: #fff; }
.btn_lime { background-position: 0 -152px; border-color: #59bf04; color: #367501; }
.btn_orange { background-position: 0 -190px; border-color: #cd7a03; color: #6e3c17; }
.btn_red { background-position: 0 -228px; border-color: #a31314; color: #fff; }

.btn.grey {
    background-image: none;
}
.btn.grey:active {
    color: #666;
}

.stdbtn:active { background: #eee; }
.btn_yellow:active { background: #ffde06; }
.btn_blue:active { background: #0591e5; }
.btn_black:active { background: #333333; }
.btn_lime:active { background: #6adc0b; }
.btn_orange:active { background: #ff9702; }
.btn_red:active { background: #eb2f30; }

.theme-icon {
    display: inline-block; 
    background-repeat: no-repeat;
    background-image: url(../images/icons/default/sprites.png);
    width: 34px;
    height: 34px;
    vertical-align: middle;
}
.theme-icon.icon_bulb { background-position: -47px -83px; }


/*********** PROGRESS BAR *********************/
/*********** dashboard.html, elements.html ****/

.progress { margin: 5px 0; }
.progress .bar { background: #eee; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; padding: 1px; border: 1px solid #ccc; }
.progress .bar { -moz-box-shadow: inset 2px 2px 3px #fff; -webkit-box-shadow: inset 2px 2px 3px #fff; box-shadow: inset 2px 2px 3px #fff; }
.progress .bar .value { height: 5px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; background-image: url(../images/progress.png); }

.progress .bar2 { background: #eee; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding: 1px; border: 1px solid #ccc; }
.progress .bar2 { -moz-box-shadow: inset 2px 2px 3px #fff; -webkit-box-shadow: inset 2px 2px 3px #fff; box-shadow: inset 2px 2px 3px #fff; }
.progress .bar2 .value { padding: 0; text-align: center; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; color: #fff; }
.progress .bar2 .value { background-image: url(../images/progress.png); background-position: 0 0; font-size: 11px; font-weight: bold; }

.progress .bluebar { background-color: #06f; box-shadow: inset 1px 1px 2px #9af; }
.progress .orangebar { background-color: #F90; }
.progress .redbar { background-color: #cc0000; }


/********** WIDGETS *************************/
/********** widgets.html ********************/

.widgetgrid .widgetbox { display: inline-block; vertical-align: top; margin: 0 20px 20px 0; }

.announcement p { margin: 10px 0; color: #666; font-size: 15px; line-height: 1.5; }
.announcement p:first-child { margin-top: 0; }
.announcement p:last-child { margin-bottom: 0; }
/*.announcement p span { color: #333; background: #999; padding: 1px 10px; color: #fff; font-size: 11px; display: inline-block; }*/

.announcement-info {
    color: #999;
    font-size: 12px;
    max-height: 250px;
    overflow-y: auto;
}
.announcement ol, .announcement ul {
    margin-bottom: 1em;
}
.announcement ol li {
    list-style: decimal;
    margin-left: 40px;
    line-height: 1.5;
    color: #666; font-size: 15px;
}
.announcement ul li {
    list-style: disc;
    margin-left: 40px;
    line-height: 1.5;
    color: #666; font-size: 15px;
}

.system-announcement {
    padding: 10px;
    background: #fffbdb;
    border: 1px solid #dedede;
    border-radius: 5px;
    margin-bottom: 1em;
}

.statement table td { text-align: center; }
.statement table tbody tr td:first-child, .statement table thead tr th:first-child { border-left: 0; }
.statement table tbody tr td:last-child, .statement table thead tr th:last-child { border-right: 0; }
.statement table tbody tr:hover td { background: #fff; }

.activitylist { list-style: none; }
.activitylist li { display: block; border-bottom: 1px solid #eee; }
.activitylist li a { display: block; padding: 7px 5px 8px 40px; color: #666; margin: 0px; background-repeat: no-repeat; background-position: 8px center; }
.activitylist li a:hover { text-decoration: none; background-color: #f7f7f7;  }
.activitylist li a span { font-size: 10px; color: #999; line-height: 10px; }

.activitylist li.message a { background-image: url(../images/icons/default/mail.png); }
.activitylist li.user a { background-image: url(../images/icons/default/users.png); }
.activitylist li.media a { background-image: url(../images/icons/default/media.png); }

.userlistwidget ul { list-style: none; }
.userlistwidget ul li { font-size: 11px; line-height: 18px; border-bottom: 1px dashed #ddd; padding: 10px 0; }
.userlistwidget ul li:first-child { padding-top: 0; }
.userlistwidget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.userlistwidget ul li .avatar { float: left; margin-right: 10px; padding: 2px; border: 1px solid #eee; }
.userlistwidget ul li a { font-weight:  bold; }
.userlistwidget .more {
    display: block; text-align: center; background: #eee; color: #069; padding: 1px 0; font-size: 10px; text-transform: uppercase; font-weight: bold; }
.userlistwidget .more:hover { text-decoration: none; background: #e7e7e7; }

.stdformwidget label { width: 80px; }
.stdformwidget div.par { margin: 13px 0 14px 0; }
.stdformwidget div.field { margin-left: 100px; }


/********** CHAT STYLES ******************/
/********** chat.html ********************/

.contactlist { list-style: none; }
.contactlist li { border-top: 1px solid #eee; position: relative; padding: 1px; }
.contactlist li:first-child { border-top: 0; }
.contactlist li span.msgcount {
    position: absolute; top: 12px; right: 30px; font-size: 10px; padding: 3px 5px; line-height: 10px; color: #fff; background: #dd0000; font-weight: bold;
    -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
.contactlist li a { padding: 8px 10px; display: block; color: #666; }
.contactlist li.online a { background: url(../images/online.png) no-repeat right 16px; }
.contactlist li.new a { font-weight: bold; }
.contactlist li a:hover { background-color: #fcfcfc; text-decoration: none; }
.contactlist li a img { vertical-align: middle; display: inline-block; margin-right: 10px; }

.chatsearch { padding: 5px; background: #eee; border-bottom: 1px solid #ddd; overflow: hidden; }
.chatsearch input {
    float: left; border: 1px solid #ddd; padding: 7px 5px 7px 35px; width: 245px; background: #fff url(../images/search.png) no-repeat left center;
    color: #ccc;
}
.chatsearch input:focus { color: #333; }
.chatbottom { padding: 8px 10px; background: #f7f7f7; border-top: 1px solid #ddd; }
.chatbottom a { color: #666; font-weight: bold; font-size: 11px; border: 1px solid #ddd; background: #fcfcfc; display: inline-block; padding: 2px 10px; }
.chatbottom a:hover { text-decoration: none; border: 1px solid #bbb; -moz-box-shadow: 0 0 1px #ddd; -webkit-box-shadow: 0 0 1px #ddd; box-shadow: 0 0 1px #ddd; }

.chatcontent { height: 500px; position: relative; padding: 0; }
.chatcontent .messagebox { position: absolute; bottom: 0; left: 0; width: 100%; background: #f7f7f7; border-top: 1px solid #ddd; padding: 10px 0; }
.chatcontent .messagebox input {
    border: 1px solid #ccc; padding: 8px 5px 8px 30px; width: 78.6%; display: inline-block; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
    margin-left: 1%; background: #fff url(../images/icons/default/chat.png) no-repeat 8px 8px;
}
.chatcontent .messagebox input:focus { -moz-box-shadow: 0 0 5px #eee; -webkit-box-shadow: 0 0 5px #eee; box-shadow: 0 0 5px #eee; }
.chatcontent .messagebox button {
    border: 0; padding: 7px 0; text-align: center; font-weight: bold; background: #333; color: #fff; display: inline-block; margin-left: 1%;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; width: 13%;
}
.chatcontent .messagebox button:hover { background: #111; color: #fff; cursor: pointer; }
.chatmessage { height: 425px; border: 1px solid #ddd; margin: 10px; overflow: auto; position: relative; }

#chatmessageinner { }
#chatmessageinner p { padding: 10px; border-bottom: 1px dotted #ddd; }


/************* ERROR PAGES ************/
/************* 404.html ***************/

.errorWrapper { width: 700px; text-align: center; margin: 80px auto 0 auto; }
.errorWrapper span { color: #fff; font-size: 14px; font-style: italic; text-shadow: 1px 1px #555; }
.errorWrapper a {
    display: inline-block; padding: 10px 30px; background: #999; color: #222; font-weight: bold; margin-top: 20px;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
.errorWrapper a.default { color: #222; background: #999; }
.errorWrapper a.hover { background: #fff; color: #333; }
.errorWrapper a:hover { text-decoration: none; }
.pageErrorTitle { color: #fff; font-size: 56px; text-shadow: 1px 1px #333; }


/************* BREADCRUMBS ************/
/************* elements.html **********/

.breadcrumbs {
    display: block; list-style: none; border: 1px solid #ccc;
    -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
.breadcrumbs li { display: inline-block; background: url(../images/separator.png) no-repeat right center; margin-right: 5px; font-size: 11px; }
.breadcrumbs li:last-child { background: none; color: #333; }
.breadcrumbs li a { display: block; padding: 5px 20px 5px 5px; }
.breadcrumbs li:first-child a { padding-left: 10px; }

.breadcrumbs2 { background: none; }

/************** FOOTER ***************/
/************** all pages ************/

.footer { 
    font-size: 13px;
    width: auto;
    text-align: center;
    color: #02132F;
}


/************** CUSTOM STYLES **********/
/************** some pages *************/

.center { text-align: center; }
.width50 { width: 50px !important; }
.block { display: block; }
.margintop10 { margin-top: 10px; }
.textright { text-align: right; }
.tooltipflot { font-size: 11px; padding: 5px 10px; background-color:black; color: #eee; }
.noright { margin-right: 0; }
.radiusbottom0 { -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; }
.radius0 { -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }
.padding0 { padding: 0 !important; }
.width60 { width: 60px !important; }
.width70 { width: 70px !important; }
.width80 { width: 80px !important; }
.width100 { width: 100px !important; }
.width150 { width: 150px !important; }
.width200 { width: 200px !important; }
#popwizard { padding: 20px; }
#popwizard .stepContainer { height: 268px !important; }
#popwizard .actionBar { padding-top: 30px; }
.pie { font-size:10px; text-align:center; padding:2px; color:#fff; text-shadow: 1px 1px #444; }
.quickform .notifyMessage  { margin: 0; margin-bottom: 20px; }
.stdform .vsmallinput { width: 60px; }
.borderTop0 { border-top: 0; }
.color333 { color: #333; }
.floatleft { float: left; }
.loaders img { margin-right: 10px; display: inline-block; }

.chartplace { margin-bottom: 10px; height: 150px; }
.average { font-size: 10px; text-transform: uppercase; color: #069; font-weight: bold; border-top: 1px dashed #ccc; padding-top: 5px; }
.average h3 { display: inline-block; vertical-align: bottom; margin-left: 10px; font-size: 16px; }


#dashboard-panel .one_half {
    margin-right: 2%;
    width: 48%;
    float: left;
    }
    #dashboard-panel .one_half:last-child {
	margin-right: 0;
	width: 50%;
    }
    #dashboard-panel .one_half h2, #dashboard-panel .one_half h3 {
	line-height: 1.3;
    }
    #dashboard-panel .one_half h2 {
	margin-top: 1em;
    }
    #dashboard-panel .one_half h2:first-child {
	margin-top: 0;
    }


/***************** MEDIA SCREENS *********************/
/***************** all pages *************************/

@media screen and (max-width: 1024px) {

    .mainright { width: 250px; }
    .contenttitle, .widgetbox .title { height: 32px; overflow: hidden; }
    .contenttitle h2, .widgetbox .title h2 { font-size: 16px; }
    .mainleft { width: 220px; }
    .notification p { }
    .noright { margin-right: 0; }
    .errorWrapper { width: auto; }
    .chatcontent .messagebox input { width: 74.3%; }
    .loginbox {
	margin-top: 100px; 
    }
}


@media screen and (max-width: 700px) {
    .maincontent { margin-right: 0; }
    .mainright { position: relative; margin-top: 10px; width: auto; }
    .mainright .widgetbox { width: 48%; float: left; margin-right: 4%; }
    .mainright .widgetbox:nth-child(even) { margin-right: 0; }
    .footer { clear: both; }
    .searchbox input { width: 150px; }
    .chatcontent .messagebox input { width: 75%; }
    .imagelist li img { width: 240px; }
    .floatright { display: none; }
}

@media screen and (max-width: 650px) {
    #userPanel { border-left: 0; }
    #searchPanel { border-right: 0; }
    .imagelist li img { width: 200px; }

    .stdform p, .stdform div.par { background: none; }
    .stdform label { display: block; text-align: left; float: none; width: auto; }
    .stdform span.field, .stdform div.field, .dualselect,
    .stdform .formwrapper, .stdform .formwrapper { margin-left: 0; }
    .stdform small.desc { margin: 5px 0 0 0; }
    .stdform .stdformbutton { margin-left: 0; }

    .stdform2 p, .stdform2 div.par { background: none; }
    .stdform2 label { display: block; padding: 7px 10px; background: #f7f7f7; border-bottom: 1px solid #ddd; float: none; width: auto; }
    .stdform2 span.field, .stdform2 div.field { display: block; margin-left: 0; border-left: 0; }
    .verwizard .actionBar { margin: 0; }
}

@media screen and (max-width: 580px) {
    .headerinner { border-bottom: 1px solid #222; }

    #dashboard-panel .one_half,
    #dashboard-panel .one_half:last-child {
	width: 100%;
	margin: 10px 0;
	float: none;
    }
}

@media screen and (max-width: 570px) {
    .tablewrapper { width: 100%; overflow: auto; }
    .mainright .widgetbox { float: none; margin-right: 0; width: auto; margin-bottom: 10px; }
    .one_half, .one_third, .two_third, .three_fourth,
    .one_fourth, .one_fifth, .two_fifth, .three_fifth,
    .four_fifth, .one_sixth, .five_sixth {
	float: none; width: auto; margin-right: 0; margin-bottom: 20px; display: block;
    }

    .chartbox .one_half { float: left; margin-right: 3%; width: 48.5%; }

    .searchbox input { width: 200px; }
    .imagelist li { margin: 0 10px 10px 0; }
    .imagelist li img { width: 150px; }
    .imagelist li span a.name { font-size: 11px; }
    .imagelist li span a.edit, .imagelist li span a.view, .imagelist li span a.delete { display: none; }

    /* CALENDAR STYLES */
  .fc-header-left { font-size: 11px; }
    /*.fc-button, .fc-button-content { height: auto; }*/
    .fc-button-month .fc-button-content,
    .fc-button-agendaWeek .fc-button-content,
    .fc-button-agendaDay .fc-button-content,
    .fc-button-today .fc-button-content { padding: 2px 5px; }
    /*.fc-header-title h2 { font-size: 14px; }*/

    .maintabmenu li a { padding: 8px 10px; font-size: 16px; }
    .verwizard .verticalmenu { font-size: 11px; width: auto; float: none; }
    .verwizard .stepContainer { margin-left: 0; margin-top: 20px; }
    .wizard .tabbedmenu li a { padding: 5px; }
    .wizard .tabbedmenu li a h2 { font-size: 16px; }
    .wizard .tabbedmenu li a span { font-weight: normal; font-size: 11px; }

}

@media screen and (max-width: 480px) {

    .maincontent { margin-right: 0; }
    .mainright .widgetbox {  }
    .widgetlist li { width: 48%; margin-right: 4%; }
    .widgetlist li:nth-child(even) { margin-right: 0; }
    .widgetlist li a { width: auto; display: block; }
    .headerinner2 .searchbox { border-right: 0; }
    .headerinner2 .searchbox input { width: 150px; }
    .searchbox input { width: 150px; }
    .stdtable td, .stdtable th { font-size: 11px; }
    .chatcontent .messagebox input { width: 70%; }
    .wizard .tabbedmenu li a { padding: 10px 20px; }
    .wizard .tabbedmenu li a h2 { font-size: 20px; }
    .wizard .tabbedmenu li a span { display: none; }
    .widgetgrid .widgetbox { width: auto !important; display: block; margin-right: 0; }
    .loginbox { width: auto; margin: 0 -10px; }
    #login-footer {
	margin-top: 30px;
	font-size: 11px;
	margin-bottom: 15px;
    }
}

@media screen and (max-width: 430px) {

    /*body { font-size: 11px; }*/
    button, input, select, textarea { font-size: 11px; }

    .loginbox { width: auto; }
    .loginbox input { width: 100%; }
    .loginbox button { width: 100%; }

    .userinfomenu .userinfo { font-size: 11px; }
    .userdrop ul li a { font-size: 11px; }
    .headerinner2 .searchbox input { width: 70px; font-size: 11px; }
    .notibox { width: 250px; }
    .tabmenu li a, .widgetlist li a { font-size: 11px; }
    .dataTables_wrapper input { width: 70px; }
    .deletebutton { display: none; }
    .tableoptions select { padding: 2px; }
    .tableoptions button { padding: 2px 5px; }
    .stdtablecb thead th:first-child, .stdtablecb tbody tr td:first-child { display: none; }
    .flatmode { display: none; }
    .vs2 { margin-left: 0 !important; }
    .imagelist li img { width: 210px; }
    .multipletabmenu li a {
	width: auto; padding: 5px; font-size: 11px; font-weight: bold; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0;
    }
    .dualselect select { 30%; }
    .dualselect .ds_arrow { margin: 0; }
    .stdform button, .stdform input[type="reset"] { padding: 5px; }
    .stdform2 span.field, .stdform2 div.field, .stdform2 .stdformbutton { padding: 10px; }
    .stepContainer h2 { font-size: 16px; }
    .fc-header-left .fc-button-prev, .fc-header-left .fc-button-next, .fc-button-today { display: none; }
    .fc-header-title h2 { font-size: 20px; margin: 0; }
    .fc-header-center { text-align: left; }
    .chatcontent .messagebox input { width: 150px; }
    .chatcontent .messagebox button { margin-left: 5px; width: 60px; }
    .errorWrapper a { display: block; margin-top: 0; padding: 20px 0; font-size: 12px; }
    .errorWrapper span { display: block; margin-bottom: 20px; }
    .footer { font-size: 10px; }

}

.padded-div {
    padding-bottom: 20px;
    overflow: auto;
}

#time-off-table tr.approved td,
#time-off-process-table tr.approved td {
    background: #effeb9;
}
#time-off-table tr.denied td,
#time-off-process-table tr.denied td {
    background: #fad5cf;
}

/* Calendar styles */
#calendar-wrapper {
    height: 750px;
}

#calendar { 
 padding-bottom:10px; 
}

#confirm-dialog p span {
    font-weight: bold;
}

.statusBlack { color: black; }
.statusRed { color: red; }
.statusBlue { color: blue; }
.statusGreen { color: green; }

.stdtable.colorcoded td {
    background: transparent;
}
.stdtable.colorcoded tr:hover {
    background: #FFF;
}

table#callbacks tbody tr {
}
table#callbacks tr td {
    border-top: none;
    border-bottom: 1px solid #ededed;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.colorcoded tr.active,
.historykey-div .active {
    background: #FFF6A7;
}
.colorcoded tr.filled,
.historykey-div .filled {
    background: #9AFF5A;
}

.colorcoded tr.partiallyfilled,
.historykey-div .partiallyfilled {
    background: #b2ff59;
}

.colorcoded tr.notfilled,
.historykey-div .notfilled {
    background: #FD7369;
    text-decoration: bold;
    color: #353535;
}
.colorcoded tr.cancelled,
.historykey-div .cancelled {
    background: #efefef;
    color: #999;
}
.colorcoded tr.scheduled,
.historykey-div .scheduled {
    background: #2196f3;
}
.historykey-div {
    display: inline-block;
}
.historykey-div div {
    font-size: .8em;
    margin: 0 1px;
    position: relative;
    top: -1px;
    padding: 2px 4px;
    border-radius: 4px;
    display: inline-block;
    color: #000;
}
.recurrence-cell input {
    margin: 2px;
    width: auto;
}

table#callbacks tbody tr {
    min-height: 34px;
}

#tagedit-input {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: none;
    -moz-border-radius: none;
    -webkit-border-radius: none;
}

/* Color-coded history detail table */
#callback-details tr.noanswer td,
#callback-details tr.notcontacted td {
    background: #eee;
    color: #666;
}
#callback-details tr.accepted td {
    background: #C3FF9C;
}
#callback-details tr.candidate td {
    background: #FAF49D;
}
#callback-details tr.denied td, #callback-details tr.acceptedbutremoved td {
    background: #FFD5CF;
}
#callback-details tr.optedout td,
#callback-details tr.manuallyexcluded td,
#callback-details tr.alreadyworking td,
#callback-details tr.alreadyoffered td,
#callback-details tr.timeoff td,
#callback-details tr.filtered td,
#callback-details tr.inexcludedgroup td,
#callback-details tr.overweeklyworklimit td,
#callback-details tr.overmonthlyworklimit td,
#callback-details tr.overyearlyworklimit td,
#callback-details tr.nomoreopportunities td,
#callback-details tr.donotdisturb td,
#callback-details tr.onmilitaryleave td,
#callback-details tr.unqualified td,
#callback-details tr.overmaxconsecutivehourslimit td,
#callback-details tr.overweeklyworklimit td,
#callback-details tr.overmonthlyworklimit td,
#callback-details tr.overquarterlyworklimit td,
#callback-details tr.overyearlyworklimit td,
#rankings-table tr.optedout td,
#rankings-table tr.manuallyexcluded td,
#rankings-table tr.alreadyworking td,
#rankings-table tr.alreadyoffered td,
#rankings-table tr.timeoff td,
#rankings-table tr.filtered td,
#rankings-table tr.inexcludedgroup td,
#rankings-table tr.overweeklyworklimit td,
#rankings-table tr.overmonthlyworklimit td,
#rankings-table tr.overyearlyworklimit td,
#rankings-table tr.nomoreopportunities td,
#rankings-table tr.donotdisturb td,
#rankings-table tr.onmilitaryleave td,
#rankings-table tr.unqualified td,
#rankings-table tr.overmaxconsecutivehourslimit td,
#rankings-table tr.overweeklyworklimit td,
#rankings-table tr.overmonthlyworklimit td,
#rankings-table tr.overquarterlyworklimit td,
#rankings-table tr.overyearlyworklimit td {
    background: #ccc;
    color: #999;
}

#callback-details tr.highlight td,
#rankings-table tr.highlight td {
    font-weight: bold;
    border-top: 1px solid #333;
  color: #212121;
    border-bottom: 1px solid #333;
}

.am-pm {
    text-transform: lowercase;
    font-variant: small-caps;
}
.response-speed {
    color: #aaa;
    color: rgba(0, 0, 0, 0.5);
    font-size: .8333em;
}

.secondary {
    color: #999;
    margin-left: 10px;
    font-size: 11px;
}
h2 .secondary {
    font-size: 14px;
}

#dialog-form2 label.error {
    top: 57px;
    left: 20px;
    position: absolute;
}

/* File manager styles */
#file-manager .ui-widget-header {
    background: #cecece;
    border: 1px solid #999;
}
#file-manager .ui-widget-header a:hover {
    background: #333;
}
#documents-functions {
    font-size: 13px;
}

/* Availability calendar */
.fc-event.unavailable,
.fc-event.available,
.fc-event.auto-accept {
  padding: 0px 5px;
}
.fc-event.unavailable .fc-event-title,
.fc-event.available .fc-event-title,
.fc-event.auto-accept .fc-event-title {
  color: #fff;
  padding: 5px 35px 5px 8px;
  font-size: 13px;
}
.fc-event.fc-event-vert.unavailable .fc-event-title,
.fc-event.fc-event-vert.available .fc-event-title,
.fc-event.fc-event-vert.auto-accept .fc-event-title {
  color: #fff;
  padding: 5px 8px;
  font-size: 13px;
}
.fc-event.unavailable .fc-event-inner,
.fc-event.available .fc-event-inner,
.fc-event.auto-accept .fc-event-inner {
  margin: 0 -6px;
}
.fc-event.unavailable {
  background-color: #d9534f;
  border-color: #d43f3a;
}
.fc-event.unavailable.by-user {
  background-color: #630F0F;
  border-color: #190303;
}
.fc-event.available {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.fc-event.auto-accept {
    background: #27c24c;
    border-color: #4cae4c;
}
.delete-event {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    text-align: right;
    color: #fff;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.1);
    padding: 1px 8px;
    font-size: 18px;
    font-weight: 700;
}
.delete-event:hover {
  background: rgba(0, 0, 0, 0.2);
}
.fc-event-vert .delete-event {
  background: none;
  top: -2px;
}
.fc-event.unavailable .fc-event-head,
.fc-event.available .fc-event-head,
.fc-event.auto-accept .fc-event-head {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.fc-event.unavailable .fc-event-time,
.fc-event.available .fc-event-time,
.fc-event.auto-accept .fc-event-time {
  font-size: 13px;
  color: #fff;
}

.help-icon {
    width: 16px;
    height: 16px;
    color: #687b8d;
    cursor: help;
    display: inline-block;
    position: relative;
    margin-left: 10px;
}
label .help-icon {
    /*vertical-align: bottom;*/
}

.hide-help p .help-icon {
    visibility: hidden;
}
.hide-help p:hover .help-icon {
    visibility: visible;
}

.caution-icon {
    width: 16px;
    height: 16px;
    background: url(../images/icons/default/caution.png?_=2) no-repeat top left;
    background-size: 16px 16px;
    cursor: help;
    display: inline-block;
    position: relative;
    margin-left: 10px;
}

.finalized-icon {
    position: absolute;
    left: 4px;
    top: 2px;
    color: green;
    font-size: 16px;
    display: none;
}

.fc-event-shift-finalized .fc-event-title{
    margin-left: 14px !important; 
}

.fc-event-shift-finalized .finalized-icon{
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

/** Options page **/
.options-container .ui-widget-header, .has-tabs .ui-widget-header {
    background: #eee;
    border-top: none;
    border-left: none;

}
.options-container .ui-state-default,
.options-container .ui-widget-content .ui-state-default,
.options-container .ui-widget-header .ui-state-default,
.has-tabs .ui-state-default,
.has-tabs .ui-widget-content .ui-state-default,
.has-tabs .ui-widget-header .ui-state-default {
    /*border: none;*/
}
.options-container .ui-state-active,
.options-container .ui-widget-content .ui-state-active,
.options-container .ui-widget-header .ui-state-active,
.has-tabs .ui-state-active,
.has-tabs .ui-widget-content .ui-state-active,
.has-tabs .ui-widget-header .ui-state-active  {
   /* border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: none;*/
}
.options-container li.ui-state-default a,
.has-tabs li.ui-state-default a {
    border-bottom: none;
}
.options-container li.ui-state-active a,
.has-tabs li.ui-state-active a {
    /*border-top: 3px solid #283038;*/
}
.options-container .ui-tabs-panel ul.ui-tabs-nav li {
    padding-left: 0px;
  position: relative;
}
.options-container .ui-tabs-panel ul.ui-tabs-nav {
    margin: 0;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#babbbc',GradientType=0 ); /* IE6-8 */
}
.options-container .ui-tabs-panel label.inline {
    display: inline-block;
    cursor: pointer;
}

.options-container .ui-tabs-panel > h3:first-child {
  margin-top: 0;
}

/** Rankings page **/
.stdtable tbody tr.current-user td {
    font-weight: bold;
    background: #333;
    color: #fff;
    border: 1px solid #333;
}
.stdtable tbody tr.current-user:hover td {
    border: 1px solid #eee;
    background: #fffccc;
    color: #111;
}
.stdtable tbody tr.opt-out td {
    color: #aaa !important;
}
#ranking-title {
    padding: 2px;
    font-size: 15px;
    color: black;
    width:12%;
}

#preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    display: none;
    z-index: 10001;
    }
    #preloader div {
        margin: 250px auto;
        width: 600px;
        text-align: center;
    }
    #preloader div h2 {
        font-size: 60px;
        color: #ffffff !important;
        margin-bottom: 20px;
        text-transform: uppercase;
    }
    #preloader div p {
        font-size: 18px;
    }

#options-1 .checkbox {
    display: none;
}
#options-1 h2 {
    margin-bottom: 10px;
}
.stdform label.ui-button {
    text-align: left;
}

.text-message {
    display: inline-block;
    padding: 10px;
    background: #efefef;
    border-radius: 4px;
    max-width: 400px;
    }
    .text-message .text-callback-id {
        color: #ccc;
    }

#calendar {
    margin-top: 10px;
}

#calendar .fc-event-inner {
    overflow: visible;
}

.disabled {
    color: #999;
}

.datatable {
  font-size:12px;
  
}

#growl-tools {
    margin-top: 10px;
    margin-bottom: -5px;
    text-align: center;
}

/* Crew Scheduler note feature */
.set-day-notes {
    right: 22px;
    margin-right: 3px;
    position: absolute;
    display: inline;
    bottom: 0px;
    text-shadow: 1px 0px #151515;    
    color:rgb(232, 186, 49);
    font-size: 20px;
}
.set-day-notes.active {
    color:rgb(204, 0, 0);
}
.set-day-notes:hover {
    background-position: 0px 1px;
    cursor: pointer;
}

/* Set up colors for days */
.set-day-color {
    color:rgb(19, 19, 19);
    text-shadow: 1px 0px white;
    font-size: 20px;
    bottom: 0px;
    right: 5px;
    position: absolute;
    display: inline;
}

.set-day-color:hover {
    background-position: -54px -378px;
    cursor: pointer;
}

.set-day-notes.active {
    display: inline;
}

/* Crew Scheduler send notification icon */
.send-text-message {
    background: transparent url(../images/icons/textmessage.png) no-repeat 0px 0px;
    width: 24px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}
.send-text-message:hover {
    background: transparent url(../images/icons/textmessageactive.png) no-repeat 0px 0px;
    cursor: pointer;
}


.available-users p {
    margin: .5em 0 .5em 0;
    font-size: 16px;
}

.colorpicker-widget {
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.colorpicker-widget:active {
    position: relative;
    top: 4px;
    left: 1px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.headcell-date {
    cursor: pointer;
}


#forgot-password:link, #forgot-password:visited {
    color: #aaa;
    text-decoration: none;
}

#forgot-password-dialog .error {
    color: #F00;
}
body.login .modal-body p, body.login .modal-body h2 {
    color: #212121;
}

#user-calendar:link, #user-calendar:visited {
    background: rgb(70, 236, 110);
    padding: 8px 6px 8px 6px;
    -moz-box-shadow: 0 1px 0 #404d58; -webkit-box-shadow: 0 1px 0 #404d58; box-shadow: 0 1px 0 #404d58;
    display: inline-block;
}
#user-calendar:hover {
    background: rgb(136, 207, 255);
}
#file-cabinet:link, #file-cabinet:visited {
    background: #696565;
    padding: 8px 6px 8px 6px;
    -moz-box-shadow: 0 1px 0 #404d58; -webkit-box-shadow: 0 1px 0 #404d58; box-shadow: 0 1px 0 #404d58;
    display: inline-block;
}
#file-cabinet:hover {
    background: rgb(136, 207, 255);
}

#self-schedule-users-dialog .dualselect .ds_arrow {
    padding-top: 50px;
}

.preview-users {
    /*width: 450px;
    float: right;
    margin-left: 20px;*/
}
.preview-users th {
    background: #111;
    color: #fff;
}
.preview-users tbody tr td {
    color: #999;
}
.preview-users tbody tr.contact td {
    color: #111;
}
.preview-users td {
    padding: 5px;
}

#confirm-dialog p {
    line-height: 1.8;
}

#spot-rankings .one_fourth {
    float: left;
}

.spot-rankings .spot-user {
    padding: 6px;
    border-radius: 3px;
    background: #f7f7f7;
    border: 1px solid #eee;
    margin: 5px 0;
    font-size: 14px;
    cursor: move;
    z-index: 98;
}

.fc-notes {
    background: rgb(255, 255, 207);
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    padding: 10px 1% 0px 1%;
    overflow: hidden;
    position: relative;
    border-left: solid 5px rgba(12, 47, 69, 0.34);
    }
    .fc-notes span.notes-title {
        display: block;
        position: relative;
	top: -5px;
        color: #eb5541;
        font-size: 1.3em;
    }
    .fc-notes-half {
	width:49%;
	margin-right: 1%;
	float: left;
    }
    .fc-notes.fc-activities span.notes-title {
	color: #FD6767;
    }
    .fc-activities.fc-notes-half {
	width: 50%;
	margin-right: 0;
    }

    .fc-notes ol li {
	list-style: decimal;
	margin-left: 20px;
    }
    .fc-notes ul li {
	list-style: disc;
	margin-left: 20px;
    }


hr {
    background-color:#fff;
    color:#fff;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid #bbb;
    border-top: 1px solid #bbb;
    height:1px;
    line-height:0;
    margin: .5em 0px 1.8571em 0px;
    page-break-after:always;
}

table.black-and-white {
    border: 1px solid #111;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

table.black-and-white th, table.black-and-white tbody tr td {
    padding: 5px 8px;
    vertical-align: middle;
}
table.black-and-white.top-aligned tbody tr td {
    vertical-align: top;
}

table.black-and-white thead th {
    background: #C7C7C7;
    color: #000;
    font-weight: bold;
    padding: 8px;
    border: none;
}
table.black-and-white thead th:first-child, 
table.black-and-white tfoot th:first-child, 
table.black-and-white thead td:first-child, 
table.black-and-white tfoot td:first-child {
    border-left: none;
}


.fc-header-title #jump_to_date {
    display: none;
}
.fc-header-title h2 span {
    margin-left: 10px;
    cursor: pointer;
}

#request-history tr.highlight td {
    font-weight: bold;
}
#request-history tr.accepted td {
    background: #C3FF9C;
}
#request-history tr td {
    height: 28px;
}

.fc-event-date-notes {
    background: #f7f7d3;
    font-size: 10px;
    line-height: 1.5;
    color: #444;
    display: block;
    width: 92%;
    margin: 10px;
    padding: 1.4% 3%;
    border: solid 1px #e0e09a;    
    clear: both;
    text-align: center;    
}

.fc-event-users {
    display: inline-block;
    width: 100%;
}

#notification-details tr.responding td {
    background: #66E066;
}
#notification-details tr.unavailable td {
    background: #FF6666;
}
#notification-details tr.acknowledged td {
    background: #FFFF66;
}

#position-tabs > ul li, #position-tabs > ul li a {
    float: left;
    position: relative;
}
#position-tabs ul li span.ui-icon {
    position: absolute;
    right: 3px;
    top: 9px;
}

.work-site-position {
    margin-bottom: 5px;
    display: inline-block;
}

.active-callbacks-count {
    position: absolute;
    top: -4px;
    right: -2px;
    background: #E00;
    color: #fff;
    padding: 1px 5px;
    font-size: 12px;
    border: 2px solid #fff;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 1px 1px 3px #999;
}

#monthly-schedule th {
    background: #111;
    color: #fff;
    font-weight: bold;
    padding: 5px 5px;
}

#monthly-schedule td.callback,
#monthly-schedule td.workday,
#monthly-schedule td.trade,
#monthly-schedule td.misc,
#monthly-schedule td.offday {
    cursor: pointer;
    color: #fff;
    font-weight: bold;
}

#monthly-schedule td.current-day {
    background-color: rgb(230, 227, 227);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 8px);
    border: dashed 2px rgb(238, 31, 23);
    border-top: 0px;
    border-bottom: 0px;
}
#monthly-schedule td.weekend {
    background-color: silver;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 8px);
}

#monthly-schedule td.callback {
    background: #999;
}

#monthly-schedule td.workday,
#monthly-schedule td.trade,
#monthly-schedule td.misc {
    background: #3B4650;
}

#monthly-schedule td.offday {
    background: #F35353;
}

#monthly-schedule th {
    cursor: pointer;
}
#monthly-schedule th.day-header span {
    background-color: #efefef;
    padding: 1px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: rgb(43, 43, 43);
    border: solid 1px white;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    width: 18px;
    display: inline-block;
}

#message-bar {
    background: #0c2f45;
    padding: 10px;
    position: fixed;
    top: -50px;
    width: auto!important;
    color:white;
    z-index: 999;
    font-weight: 300;
    font-size: 15px;
    border-radius: 2px;
    box-shadow: 1px 1px 5px #525252;
}

/* Part-time schedule */
#part-time-schedule {
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    border-collapse: collapse;
}

#part-time-schedule td.other-month {
    color: #ccc;
}

#part-time-schedule th {
    background: #333;
    color: #FFF;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    padding: 5px;
}

#part-time-schedule th span {
    background-color: #efefef;
    padding: 1px 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: rgb(43, 43, 43);
    border: solid 1px white;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    display: inline-block;
}

#part-time-schedule .assignment {
    background: #efefef;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    padding: 5px;
    margin: 5px;
    }
    #part-time-schedule .assignment-title {
	font-weight: bold;
	margin-bottom: 10px;
    }
    #part-time-schedule .shift,
    #part-time-schedule .open-slot {
	border-radius: 2px;
	padding: 5px;
	margin: 2px 0;
	font-weight: bold;
	cursor: pointer;
    }
    #part-time-schedule .shift {
	background: #3B4650;
	color: #fff;
	border: 1px solid transparent;
    }
    #part-time-schedule .open-slot {
	background: #FAF49D;
	border: 1px dashed #999;
    }
    #part-time-schedule .open-slot.self-schedule-slot {
        color: #43a047;
    }
    .fc-event-user.unscheduled.self-schedule-slot {
        color: #43a047;
    }
    #part-time-schedule .open-slot:hover {
	border: 1px solid #999;
	background: #fff
    }



/**** NEW CREW SCHEDULER ****/
.content.crew-scheduler-content {
    overflow: hidden;
    position: relative;
}
#delete-drop-zone {
    position: absolute;
    top: -200px;
    left: 0px;
    width: 100%;
    background: #e64a19;
    color: white;
    font-family: 'Roboto', sans-serif;
    z-index: 10;
    }
    #delete-drop-zone div {
	padding: 24px;
	font-size: 24px;
	line-height: 48px;
	text-align: center;
	z-index: 11;
    }
    #delete-drop-zone div.active {
	background: #ff5722;
    }
.roboto {
    font-family: 'Roboto', sans-serif;
}
.crew-scheduler {
    background: #efefef;
    position: relative;
    height: auto;
    }
    .crew-scheduler .crew-scheduler-activities {
        background-color: #e8e8b4;
    }
    .crew-scheduler .column {
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	}
	.crew-scheduler .column .column-header {
	    background: #fff;
	    text-transform: uppercase;
	    color: #212121;
	    text-align: center;
	}
	.crew-scheduler .column .column-header .column-date {
	    font-size: 15px;
	    line-height: 28px;
	}
	.crew-scheduler .column-header .column-name {
	    font-size: 15px;
            padding: 4px 20px;
	}
	.crew-scheduler .column .column-content {
	    margin: 0 4px;
	    width: 20%;
	    min-width: 200px;
	}
	.crew-scheduler .column.first .column-content {
	    margin-left: 8px;
	}
	.crew-scheduler .column.last .column-content {
	    margin-right: 8px;
	}
	.crew-scheduler .card {
	    background: white;
	    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	    border-radius: 2px;
	    margin-bottom: 15px;
	}
	.crew-scheduler .card h1 {
            font-size: 15px;
            line-height: 28px;
	}
	.crew-scheduler .assignment header {
	    display: block;
	    position: relative;
	}
	.crew-scheduler .assignment header .assignment-status {
	    display: inline-block;
	    position: absolute;
	    right: 5px;
	    top: 5px;
	    color: #A5D6A7;
	}
        .crew-scheduler .assignment header .assignment-status.incomplete {
            color: #EF9A9A;
        }
        .crew-scheduler .assignment header .assignment-times {
          padding: 3px 8px;
          color: #ffffff;
          background: #1c66a9;
        }
        .crew-scheduler .assignment header .assignment-notes {
        padding: 3px 8px;
        color: #263238;
        background: #e8e8b4;
        text-align: center;
        }
        
    .crew-scheduler .label {
      padding: 1px 2px
    }
    
	.crew-scheduler .assignment h1 {
            background: #164e81;
            color: #fdfdfd;
            padding: 0 8px;
            margin-bottom: 0;
            margin-top: 0;
	}
        .crew-scheduler .assignment.vacation h1 {
            background: #FF5722;
        }
        .crew-scheduler .assignment.trade h1 {
            background: #558B2F;
        }
        .crew-scheduler .assignment.callback h1 {
            background: #795548;
        }
        .crew-scheduler .assignment.misc h1 {
            background: #FFC107;
            color: #212121;
        }
	.crew-scheduler .sub-assignment h2 {
	    color: #757575;
	    font-size: 13px;
	    line-height: 24px;
	    font-family: 'Roboto', sans-serif;
	    padding: 12px 8px 12px 56px;
	    font-weight: bold;
	    text-transform: uppercase;
	    letter-spacing: 1px;
	}
	.crew-scheduler .sub-assignment h2:first-child {
	    margin-top: 8px;
	}
	.crew-scheduler .sub-assignment .shift {
	    padding: 4px;
	    cursor: pointer;
	    transition: background-color .08s ease-in-out, box-shadow .1s ease-in-out;
            border-bottom: solid 1px #d8d8d8;
            position: relative;
            border-top: solid 1px #d8d8d8;
            background-color: #eeeeee;
	}
    .crew-scheduler .sub-assignment .shift .shift-qualifiers {
        position: absolute;
        top: -6px;
        left: 0px;
        font-size: 11px;
    }
    .crew-scheduler .sub-assignment .shift .shift-qualifiers .label {
        font-size: 10px;
        font-weight: 700;
        line-height: 13px;
    }
	.crew-scheduler .sub-assignment .shift-placeholder {
	    background: url(../images/crew-scheduler/shift-placeholder.png) no-repeat 0px 0px;
	    height: 60px;
	    display: block;
	}
	.crew-scheduler .sub-assignment .shift:hover {
	    background: #f5f5f5;
	}
	.crew-scheduler .sub-assignment .shift:active {
	    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.33);
	    background: #f5f5f5;
	}
	.crew-scheduler .sub-assignment .shift .work-type {
	    width: 24px;
	    height: 24px;
	    line-height: 24px;
	    text-align: center;
	    margin: 0 8px;
	    background-color: #3270E3;
	    color: white;
	    border-radius: 12px;
	    display: inline-block;
	    transition: border-color .1s ease-in-out;
	}
	.crew-scheduler .sub-assignment span {
	    vertical-align: middle;
	    display: inline-block;
	}
	.crew-scheduler .sub-assignment .shift-info {
	    margin-left: 8px;
	    }
	    .crew-scheduler .sub-assignment .shift-info .shift-name {
		font-size: 15px;
		line-height: 24px;
	    }
	    .crew-scheduler .sub-assignment .shift-info .shift-label {
		padding: 1px 3px 1px;
		font-size: 10px;
		line-height: 13px;
		font-weight: 700;
		color: #ffffff;
		text-transform: uppercase;
		white-space: nowrap;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		border-radius: 1px;
		display: inline;
	    }
	    .crew-scheduler .sub-assignment .shift-info .shift-badge {
		font-size: 13px;
		line-height: 20px;
                border-radius: 3px;
                padding: 0px 3px;
	    }
            .crew-scheduler .sub-assignment .shift-info .shift-timeframe {
                background-color: #F44336;
                color: #fff;
            }
            .crew-scheduler .sub-assignment .shift-info .shift-traded-with {
                background-color: #558B2F;
                color: #fff;
            }
            .crew-scheduler .sub-assignment .shift-info .shift-misc-data {
                background-color: #d8d8d8;
                color: #212121;
            }
	    .crew-scheduler .sub-assignment .shift-info .shift-timeframe.partial-shift {
		color: #f4511e;
	    }
	.crew-scheduler .sub-assignment .shift .shift-tools {
	    opacity: 0;
	    font-size: 14px;
	    position: absolute;
	    right: 8px;
	    line-height: 36px;
	    padding: 4px 8px;
	    color: #757575;
	    transition: opacity .12s ease-in-out .15s;
	}
	.crew-scheduler .sub-assignment .shift .shift-tools:hover {
	    background-color: #e0e0e0;
	}
	.crew-scheduler .sub-assignment .shift:hover .shift-tools {
	    opacity: 1;
	}
	.crew-scheduler .sub-assignment .shift.open-slot {
            background-color: #FFF8E1;
            color: #da1717;
            cursor: default;
	}
	.crew-scheduler .sub-assignment .shift.open-slot .work-type {
            background-color: #da1717;
            width: 16px;
            height: 16px;
            margin: 0 12px;
            line-height: 16px;
	}

        .crew-scheduler .daily-view-column {
            border-radius: 2px;
            margin-bottom: 10px;
        }
        .crew-scheduler .daily-view-column-header {
            padding: 2px 5px;
            font-size: 18px;
            font-weight: 900;
            text-align: center;
        }
        .crew-scheduler .daily-view-column-assignments {
            padding: 12px;
            background: #fff;
            overflow: auto;
        }

.error-div > div,
.info-div > div {
    padding: 20px;
    line-height: 1.4;
}
.error-div > div p:first-child,
.info-div > div p:first-child {
    margin-top: 0;
}
.error-div > div {
    border: 1px solid #e18b7c;
    background: #fad5cf;
}
.info-div > div {
    background: #0C2F45;
    color: white;
    border-radius: 5px;
}

#start-of-day-time {
    background: #fff;
    font-size: 24px;
    cursor: pointer;
    width: 100px;
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}
#start-of-day-time:hover {
    background: #efefef;
}

/** NEW CONTENT THEME **/
/* SCHED-23456: kept bottom-left (where users expect these messages) but nudged
   right of the ~70px-wide Intercom Fin launcher so the icon no longer covers the
   first characters of each message. */
#snackbar-container {
  position: fixed;
  left: 90px;
  bottom: 0;
  z-index: 99999;
}
.snackbar {
  overflow: hidden;
  clear: both;
  min-width: 288px;
  max-width: 568px;
  cursor: pointer;
  opacity: 0;
}
.snackbar.snackbar-opened {
  height: auto;
  opacity: 1;
}

/* Material design snackbar */
.snackbar {
  background-color: #263238;
  color: #dde6e9;
  font-size: 14px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  height: 0;
  -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
  -moz-transform: translateY(200%);
  -webkit-transform: translateY(200%);
  transform: translateY(200%);
}
.snackbar.snackbar-opened {
  padding: 14px 15px;
  margin-bottom: 20px;
  height: auto;
  -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s;
  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
  -moz-transform: none;
  -webkit-transform: none;
  transform: none;
}
.snackbar.toast {
  border-radius: 200px;
}
.snackbar.error {
  background-color: #F44336;
  color: #fff;
}
.snackbar.warning {
  background-color: #FFEB3B;
  color: #F44336;
}
.snackbar.success {
  background-color: #4CAF50;
  color: #FFF;
}
.snackbar-button {
    color: #EEFF41;
    float: right;
    text-transform: uppercase;
    font-weight: 900;
    transition: color .1s ease;
}
.snackbar-button:hover {
    color: #fff;
}
@media screen and (max-width: 767px) {
  #snackbar-container {
    left: 0px !important;
    right: 0px;
    width: 100%;
  }
  #snackbar-container .snackbar {
    min-width: 100%;
  }
  #snackbar-container [class="snackbar snackbar-opened"] ~ .snackbar.toast {
    margin-top: 20px;
  }
  #snackbar-container [class="snackbar snackbar-opened"] {
    border-radius: 0;
    margin-bottom: 0;
  }
}

.new-theme {
}

/** LISTS **/
.list-container {
    width: 20%;
    margin-right: 1%;
    float: left;
    opacity: 1;
    position: relative;
    left: 0;
    transition: left .25s ease, opacity .15s ease .1s;
}
.list-container.inactive {
    left: 10%;
    opacity: 0;
    transition: left .15s ease .1s, opacity .25s ease;
}
    .list-container ul {
        padding-left: 0;
	}
	.list-container ul li {
	    border-bottom: 1px solid #ddd; 
	}
	.list-container ul li a:link,
	.list-container ul li a:visited {
	    padding: 15px 15px;
	    font-size: 16px;
	    line-height: 19px;
	    color: #0C2F45;
	    display: block;
	    border-radius: 2px;
	    position: relative;
	    overflow: hidden;
	    transition: background .1s ease, color .1s ease;
	}
	.list-container ul li a:hover,
	.list-container ul li a.active {
	    text-decoration: none;
	}
	.list-container ul li a.active {
	    background: #131e26;
	    color: #fff;
	}
	.list-container ul li.add-item a {
	    color: #777;
	}
	.list-container ul li.add-item a:hover {
	    color: #111;
	    background: #CDDC39;
	}
	.list-container ul li a i.item-icon {
	    opacity: 0;
	    position: absolute;
	    right: 30px;
	    top: 17px;
	    transition: right .2s ease, opacity .1s ease;
	}
	.list-container ul li a:hover i.item-icon,
	.list-container ul li a.active i.item-icon {
	    opacity: 1;
	    right: 15px;
	}
	.list-container ul li.separator {
	    color: #9E9E9E;
	    padding-top: 15px;
	    padding-bottom: 14px;
	    font-size: 14px;
	    text-transform: uppercase;
	    letter-spacing: 2px;
	    font-weight: 900;
	    text-align: center;
	    border-top: 1px solid #ddd; 
	}

	.list-container ul li a.function-button {
	    transition: padding-left .1s ease;
	}
	.list-container ul li a.function-button:hover {
	    padding-left: 20px;
	}

	.new-theme a.delete {
	    color: #F44336
	}
	.new-theme a.primary {
	    color: #3F51B5
	}
	.new-theme ul li a.delete.active,
	.new-theme ul li a.primary.active {
	    color: #ffffff !important;
	}
.content-container {
    width: 55%;
    margin-right: 0;
    margin-left: 0;
    float: left;
    opacity: 1;
    position: relative;
    left: 0;
    transition: left .25s ease, opacity .15s ease .1s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
.content-container.inactive {
    left: 10%;
    opacity: 0;
    transition: left .15s ease .1s, opacity .25s ease;
    }
    .content-container h2 {
	padding-top: 7px;
	margin-bottom: 20px;
    margin-top: 0;
	padding-left: 13px;
	padding-bottom: 10px;
	background: #131e26;
	color: #fff;
	border-radius: 2px;
    }
    .content-container h2 button.pull-right {
	position: relative;
	top: -7px;
	border-radius: 0 2px 2px 0;
	padding-bottom: 17px;
    }
.list-container ul li a.add-item {
    transition: padding-top .3s ease .2s, padding-left .1s ease;
}
.list-container ul li a.add-item.active {
    padding-top: 40px;
}
.add-item-container {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: relative;
    top: 50px;
    height: 0;
    transition: height .3s ease, top .3s ease .1s, opacity .3s ease;
}
.add-item-container.active {
    top: 0;
    opacity: 1;
    height: auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    transition: height .3s ease, top .3s ease, opacity .3s ease .1s;
}

/** FORMS **/
.new-theme form {
    box-sizing: border-box;
    font-size: 16px;
    }
    .new-theme form * {
	box-sizing: inherit;
    }
    .new-theme label {
	font-weight: bold;
    }
    .new-theme label.inline {
	display: inline-block;
	font-weight: normal;
	cursor: pointer;
	padding: 6px inherit;
	transition: background .15s ease;
	}
	.new-theme label.inline:hover {
	    background: rgba(0, 0, 0, 0.05);
	}
    .new-theme input,
    .new-theme button,
    .new-theme select {
	padding: 15px;
	color: #666;
	font-size: 16px;
	border: 1px solid #ddd;
	background: white;
    }

    .new-theme input[type="submit"],
    .new-theme input[type="button"],
    .new-theme button {
	color: #fff;
	border: none;
	border-radius: 2px;
	background: #212121;
	text-shadow: none;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 14px;
	line-height: 19px;
	letter-spacing: 2px;
	cursor: pointer;
	transition: color .1s ease, background-color .1s ease;
    }
    .new-theme input.smaller,
    .new-theme button.smaller,
    .new-theme select.smaller {
	padding: 8px 12px;
        vertical-align: inherit;
        height: auto;
    }
    .new-theme input.xs,
    .new-theme button.xs,
    .new-theme select.xs {
	padding: 5px 8px;
	font-size: 12px;
    }
    .new-theme input.inline,
    .new-theme button.inline,
    .new-theme select.inline {
	margin-left: 5px;
	margin-right: 5px;
    }
    .new-theme input.primary,
    .new-theme button.primary {
	color: #fff;
	background: #3F51B5;
    }
    .new-theme input.success,
    .new-theme button.success  {
	color: #fff;
	background: #8BC34A;
    }
    .new-theme input.danger,
    .new-theme button.danger  {
	color: #fff !important;
	background: #F44336;
    }
    .new-theme input.light,
    .new-theme button.light  {
	color: #212121;
	background: #E0E0E0;
    }
    .new-theme input[type="submit"]:active,
    .new-theme input[type="button"]:active,
    .new-theme button:active {
	background: #424242;
    }
    .new-theme input.primary:active,
    .new-theme button.primary:active {
	background: #5C6BC0;
    }
    .new-theme input.success:active,
    .new-theme button.success:active {
	background: #9CCC65;
    }
    .new-theme input.danger:active,
    .new-theme button.danger:active {
	background: #EF5350;
    }
    .new-theme input.light:active,
    .new-theme button.light:active {
	background: #EEEEEE;
    }
    .new-theme input[type="submit"]:hover,
    .new-theme input[type="button"]:hover,
    .new-theme button:hover {
	background: #000000;
    }
    .new-theme input.primary:hover,
    .new-theme button.primary:hover {
	background: #3949AB;
    }
    .new-theme input.success:hover,
    .new-theme button.success:hover {
	background: #7CB342;
    }
    .new-theme input.danger:hover,
    .new-theme button.danger:hover {
	background: #E53935;
    }
    .new-theme input.light:hover,
    .new-theme button.light:hover {
	background: #FFFFFF;
    }
    .new-theme input[type="submit"]:disabled,
    .new-theme input[type="button"]:disabled,
    .new-theme button:disabled {
	background: #BDBDBD;
	color: #757575;
    }
    .new-theme .full-width  {
	width: 100%;
    }
    .new-theme label.full-width  {
	display: block;
	padding: 15px;
	line-height: 19px;
	cursor: pointer;
	font-weight: normal;
	transition: background-color .1s ease, color .1s ease;
	}
	.new-theme label.full-width:hover {
	    background: #EEEEEE;
	}
	.new-theme label.full-width:active {
	    background: #E0E0E0;
	}

    .new-theme .button-group {

	}
	.new-theme .button-group button {
	    border-radius: 0;
	    margin-left: -4px;
	}
	.new-theme .button-group button:first-child {
	    border-radius: 2px 0 0 2px;
	    margin-left: 0;
	}
	.new-theme .button-group button:last-child {
	    border-radius: 0 2px 2px 0;
	}

    .new-theme p.small {
	padding: 15px;
	font-size: 12px;
	font-family: inherit;
	color: #7986CB;
	}
	.new-theme p.small i.fa {
	    font-size: 14px;
	}

.new-theme label.error {
    position: absolute;
    left: auto;
    padding: 3px;
    margin-left: 10px;
    border-radius: 2px;
    border: 1px solid #E18B7C;
    background: #FAD5CF;
    color: red;
    opacity: .8;
}

/** TIME OFF ACCRUAL **/
.accrual-profiles .profile-info {
    font-size: 11px;
    color: #9E9E9E;
    line-height: 16px;
    display: block;
    height: 0;
    opacity: 0;
    transition: all .1s ease;
}
.accrual-profiles ul li a.active .profile-info {
    height: 11px;
    opacity: 1;
}

.edit-accrued-time-off {
    margin-left: 10px;
    padding: 2px 4px !important;
}
.edit-accrued-time-off.ui-button .fa {
    font-size: 10px;
}


span.clickable {
    display: inline-block;
    padding: 3px;
    border-radius: 2px;
    transition: background .15s ease;
}
span.clickable:hover {
    cursor: pointer;
    background: #efefef;
}

.ui-datepicker-calendar tbody tr td.ui-datepicker-current-day {
    border: 2px solid #ffffff;
}
.ui-datepicker-calendar tbody tr td:hover a {
    background: rgba(255, 255, 255, 0.2);
}

.sticky-bar {
    padding: 10px 20px;
    font-size: 15px;
}
.sticky-error {
    background: #D50000;
    color: #fff;
    }
    .sticky-error a {
	color: #FFF59D;
    }
    .sticky-error a:hover {
	color: #ffffff;
	text-decoration: underline;
    }
.sticky-warning {
    background: #FFC107;
    color: #212121;
}
.sticky-info {
    background: #1E88E5;
    color: #fff;
}


/* Misc visuals
----------------------------------*/

.ui-state-disabled {
  opacity: .4;
  color: black;
  cursor: default;
}

/* Overlays */
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  background-color: rgb(103, 103, 103);
  opacity: .6;
  z-index: 9999;
}
/* Calendar Container */
#ui-datepicker-div {
  z-index:9999!important;
    width: auto!important;
    height: auto;
    margin: 5px auto 0;
    font: 9pt Arial, sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
#ui-datepicker-div a {
    text-decoration: none;
}
/* Date Picker Header */
.ui-datepicker-header {
    background: black;
    color: #e0e0e0;
  padding:4px;
    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
    -moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
    box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
    text-shadow: 1px -1px 0px #000;
    filter: dropshadow(color=#000, offx=1, offy=-1);
    line-height: 30px;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #111;
}
.ui-datepicker-header select.ui-datepicker-month,
.ui-datepicker-header select.ui-datepicker-year {
  color: #333;
}
.ui-datepicker-title {
    text-align: center;	
}
.ui-datepicker-prev {
    float: left;
    background-position: center -30px;
}
.ui-datepicker-next {
    float: right;
}
.ui-datepicker-prev, .ui-datepicker-next {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    background-repeat: no-repeat;
    overflow: hidden;
}
/* Date Picker Table */
.ui-datepicker table {
    width: 100%;
}

.ui-datepicker-close {
  background-color: #3BABF0;
    border: 0px;
    color: white;
    border-radius: 3px;
    margin: 5px;
    padding: 4px;
  
}

.ui-datepicker-current { 
  background-color: #071722;
    border: 0px;
    color: white;
    border-radius: 3px;
    margin: 5px;
    padding: 4px;
}

.ui-datepicker thead {
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top,  #f7f7f7 0%, #f1f1f1 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f1f1f1));
    background-image: -webkit-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
    background-image: -o-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
    background-image: -ms-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
    background-image: linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1',GradientType=0 );
    border-bottom: 1px solid #bbb;
}
.ui-datepicker th {
    text-transform: uppercase;
    font-size: 6pt;
    padding: 5px 0;
    color: #666666;
    text-shadow: 1px 0px 0px #fff;
    filter: dropshadow(color=#fff, offx=1, offy=0);
}
.ui-datepicker tbody td {
    padding: 0;
    border-right: 1px solid #bbb;
}
.ui-datepicker tbody td:last-child {
    border-right: 0px;
}
.ui-datepicker tbody tr {
    border-bottom: 1px solid #bbb;
}
.ui-datepicker tbody tr:last-child {
    border-bottom: 0px; 
}
.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
    filter: dropshadow(color=#fff, offx=1, offy=1);
}

.ui-datepicker-calendar { 
      background-color: white!important;
}

/* Date Picker Hover & Active */
.ui-datepicker-calendar .ui-state-default {
  font-size:10px;
    background: #ededed;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );
    -webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
    -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
    box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}
.ui-datepicker-calendar .ui-state-hover {
    background: #f7f7f7;
}
.ui-datepicker-calendar .ui-state-active {
    background: #6eafbf;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    color: #e0e0e0;
    text-shadow: 0px 1px 0px #4d7a85;
    filter: dropshadow(color=#4d7a85, offx=0, offy=1);
    position: relative;
    margin: -1px;
}
.ui-datepicker-calendar td:first-child .ui-state-active {
    width: 29px;
    margin-left: 0;
}
.ui-datepicker-calendar td:last-child .ui-state-active {
    width: 29px;
    margin-right: 0;
}
.ui-datepicker-calendar tr:last-child .ui-state-active {
    height: 29px;
    margin-bottom: 0;
}
.ui-datepicker-unselectable .ui-state-default {
    background: #f4f4f4;
    color: #b4b3b3;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
    width: auto;
    background-color: white;
  padding: 10px;
  border-radius: 10px;
}
.ui-datepicker-multi .ui-datepicker-group {
    float: left;
    background-color: white;
    border: 0px;
  border-radius: 3px;
  padding: 0;
}
.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
  margin-right: 10px;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
    padding: 10px;
    background-color: #F3F3F3;
}


.ui-datepicker-buttonpane {
  padding: 10px;
    background-color: #F3F3F3;
  
}
.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0;
}

.ui-autocomplete { 
    z-index: 1031 !important;
    padding: 0;
    margin: 0;
}
.ui-autocomplete li.ui-menu-item {
    padding: 5px;
    margin: 0;
}
.ui-autocomplete li.ui-menu-item:hover {
    cursor: pointer;
    background: #DDE6E9;
}


/**
 * Company information page
 */
#logo-preview {
    display: inline-block; 
    background: #eeeeee; 
    border: 1px solid #dedede;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    }
    #logo-preview img {
	max-width: 200px;
    }


#company-form.stdform label {
    width: auto;
    float: none;
}
#company-form.stdform span.field {
    margin-left: 0;
    margin-top: 5px;
}
#company-form.stdform small.desc {
    margin-left: 0;
}
a.white:link, a.white:visited, a.white:active, a.white:hover {
    color: white;
}

/** DIALOGS CONTAINING FORMATTED TEXT **/
.text-dialog h2 {
    margin-bottom: 10px;
}
.text-dialog p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.text-dialog p:first-child {
    margin-top: 0;
}
.text-dialog ol {
    list-style: decimal;
    margin-bottom: 10px;
}
.text-dialog li {
    font-size: 15px;
    line-height: 1.5;
    margin-left: 20px;
    }
    .text-dialog ol li {
	list-style: decimal;
    }
    .text-dialog ul li {
	list-style: disc;
    }
.text-dialog pre {
    background: #efefef;
    background: rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin: 10px 0;
    border-left: 3px solid #E91E63;
}

.stdform.user-profile-form label {
    float: none;
    width: auto;
    padding: 10px 0 5px 20px;
    display: block;
    text-align: left;
}
.stdform.user-profile-form .row [class*="span"] label {
    padding-left: 0;
}
.stdform.user-profile-form #first_name, 
.stdform.user-profile-form #last_name {
    font-size: 16px;
}
.stdform.user-profile-form select.medium {
    width: 162px;
}
.stdform.user-profile-form h3 {
    margin-top: 20px;
}
.stdform.user-profile-form label.error {
    left: 700px;
    position: absolute;
}

.stdform.user-profile-form h5 {
    margin-top: 20px;
    font-size: 11px;
    text-align: left;
    padding-bottom: 5px;
    border-bottom: 1px solid #BDBDBD;
}
.stdform.user-profile-form .span3 p {
    margin-top: 5px;
    text-align: left;
}

.savebutton {
  padding:10px;
  background-color: rgb(43, 179, 75);
  color: white;
  border-radius: 5px;
}

/*********** LOGIN PAGE STYLES *************/
/*********** index.html (login page) *******/

.loginbox { 
    position: relative;
    width: 400px;
    margin-left: 8px;
    padding: 13px 13px 10px;
    font-weight: normal;
    background: #fff;
    -moz-box-shadow: rgba(200,200,200,0.7) 0 8px 16px -4px;
    -webkit-box-shadow: rgba(200, 200, 200, 0.7) 0 8px 16px -4px;
    box-shadow: rgba(2, 2, 2, 0.7) 0 8px 16px -4px;
    margin: auto;
    margin-top: 40px;
    text-align: center;
}
.loginboxinner {
    padding: 20px;
    position: relative;
}
.loginform { margin-top: 20px; color: #757575; }

.loginbox .logo { margin-bottom: 20px; }
.loginbox p { margin: 10px 0; }
.loginbox label { display: block; color: #ccc; letter-spacing: 1px; font-size: 18px; }
.loginbox label.ie {
    display: none;
    display: block\9; /* Visible in IE 8 */
    *display: block; /* Visible in IE 7 */
    color: #666;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.loginbox input {
    box-sizing: border-box;
    padding: 12px 10px; background: #282828 url(../images/loginputbg.png) repeat-x top left; color: #ccc;
    font-family: Arial, Helvetica, sans-serif; margin-top: 8px; font-size: 15px; border: 0; width: 100%;
    -moz-box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, 0.2); outline: none;
    border: 1px solid #999\9;
    *border: 1px solid #999;
}
.loginbox button {
    background: #999; padding: 10px 20px; font-size: 18px; border: 0; letter-spacing: 1px; color: #333; width: 100%;
    -moz-box-shadow: 1px 1px 3px #222; -webkit-box-shadow: 1px 1px 3px #222; box-shadow: 1px 1px 3px #222; cursor: pointer;
    transition: background-color .1s ease; margin-top: 20px;
}
/*
.loginbox button.default { background: #999; color: #333; }
.loginbox button.hover { background: #ccc; color: #000; }
.loginbox button:active { background: #111; color: #fff; }*/
.loginerror { color: #990000; background: #fbe3e3; padding: 0 10px; overflow: hidden; margin: 10px 0; /*display: none;*/}
.loginerror { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.loginerror p { margin: 10px 0; }

#login-footer {
    width: 100%; 
    margin-top: 20px;
    text-align: center;
    color: #9E9E9E;
    padding: 10px;
    font-size: 16px;
    box-sizing: border-box;
    line-height: 1.5;
    }
    #login-footer a {
	transition: color .1s ease;
    }
    #login-footer a:link,
    #login-footer a:visited {
	color: #7986CB;
    }
    #login-footer a:hover {
	color: #212121;
    }

#popup_container {
  font-size: 12px;
  min-width: 300px; /* Dialog will be no smaller than this */
  max-width: 600px; /* Dialog will wrap after this width */
  background: #ddd;
  padding: 7px !important;
  color: #666;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

#popup_title {
  font-size: 18px;
  line-height: 21px;
  font-weight: normal;
  color: #333;
  background: #eee;
  border: solid 1px #ccc;
  cursor: default;
  padding: 10px;
  margin: 0em;
}

#popup_content {
  /*background: 16px 16px no-repeat url(../../images/info.gif);*/
  padding: 10px; 
  margin: 0em;
  background: #fcfcfc;
  border: 1px solid #ccc;
  border-top: 0;
}
#popup_message {
  margin: 10px 0;
}

#popup_panel {
  text-align: center;
  margin: 1em 0em 0em 1em;
}

#popup_prompt {
  margin: 5px 0;
  padding: 7px 5px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
  -moz-box-shadow: inset 1px 1px 1px #eee; -webkit-box-shadow: inset 1px 1px 2px #eee; box-shadow: inset 1px 1px 2px #eee;
  color: #666;
}
#popup_prompt:focus { background: #fff; }
#popup_overlay { background: #000 !important; opacity: 0.5 !important; }
#popup_prompt { width: 270px !important; }

form {
    background-color: white;
    padding: 10px;
    border-radius: 5px!important;
}

.nobg {
  background-color: rgba(0, 0, 0, 0);
      padding: 10px;
}

button.btn.app-login-button {
    background-color: #252525;
    border-color: #A1A1A1;
}

#online-form-creator.online-form-creator-view #master-container{
    width: auto;
}

#online-form-creator.online-form-creator-view #tabs-container{
    float: none;
    width: auto;
    right: auto;
}

#online-form-creator.online-form-creator-view .left-col{
    display: none;
}

#online-form-creator.online-form-creator-view .right-col{
    width: 100%;
    left: auto;
}

#online-form-creator.online-form-creator-view #save{
    display: none;
}

@media (max-width: 1096px) {
    .mydevices .container{
        width: auto;
    }
}

.mydevices .device{
    border: 1px solid #dee5e7; 
}

.mydevices .device table{
    width: 100%;
}

.mydevices .device .panel-body th {
    vertical-align: top;
    width: 30px;
    text-align: center;
}

.mydevices .device .panel-body th i {
    font-size: 72px;
    position: relative;
    top: -5px;
}

.mydevices .device .panel-body{
    min-height: 145px;
}

.mydevices .device .panel-body td{
    padding-left: 15px;
}

.mydevices .device .panel-title{
    overflow: hidden;
    height: 22px;
    width: 90%;
}

[disabled]{
    opacity: 0.5;
}

.announcement-req-read .panel-title{
    color: #fff !important;
}

.announcement-req-read .panel{
    min-width: 400px;
}

#userpermissions{
    margin: 0;
}

.container-records:not(.norecords) .container-records-msgnorecords{
    display: none;
}

.container-records.norecords .container-records-table{
    display: none;
}

#timeclock-mini-timer {
    font-size: 60px;
    line-height: 150px;
    background: #D9EDF7;
    padding: 2px 20px;
    font-weight: 300;
    text-align: center;
    margin-bottom: -1px;
    transition: background 1s ease,
                color 1s ease;
  }
  #timeclock-mini-timer.inactive {
      background: #E0E0E0;
      color: #9E9E9E;
  }

.container-timeclock-filters{
    position: absolute;
    top: 90px;
    right: 30px;
    z-index: 1;
}

.clockpicker-popover{
    z-index: 2000;
}

@media all and (max-width: 992px) {
  #timeclock-mini-timer {
    font-size: 40px;
    line-height: 100px;
  }
}

@media all and (max-width: 480px) {
  .container-timeclock-filters{
      position: relative;
      top: 0;
      right: 0;
      margin: -15px 0 5px 0;
  }
}

.loggedin_spot,
.loggedout_spot,
.reminder_spot {
    width: 8px;
    height: 8px;
    background: #f00;
    display: inline-block;
    border-radius: 10px;
    margin: 3px 0 0 6px;
}

.loggedin_spot{
    background: #0f0;
}

.fc-event-user-changing-selected{
    background-color: #0286FF !important;
    color: #FFFFFF !important;
}
#assignment-group-change{
    float: right;
    display: block;
    height: 20px;
}
#assignment-group-change small{
    display: block;
    margin-bottom: -10px;
    text-align: center;
}
#assignment-group-change-start{
    display: block;
    margin: 0;
}
#assignment-group-change-change,
#assignment-group-change-cancel{
    display: none;
}
.container-group-change.active #assignment-group-change-start{
    display: none;
}
.container-group-change.active #assignment-group-change-change,
.container-group-change.active #assignment-group-change-cancel{
    display: block;
}
.container-group-change.active .btn-group-change{
    float: right;
    margin-left: 10px;
    position: relative;
    top: 10px; 
}
.container-bo-second-step>div{
    display: none;
}

.form-inline-xs{
    position: relative;
    display: table;
    border-collapse: separate;
}

.form-inline-xs .input-group,
.form-inline-xs .form-control{
    display: inline-table;
    vertical-align: middle;
}
.form-inline-xs .input-group{
    padding-top: 10px;
}
.clearfix{
    clear: both;
}

.btn-modal{
    display: none;
}


#preload-bg {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #131e26;
    z-index: 99999;
    overflow: hidden;
    }
    #preload-bg img {
        max-width: 350px;
        position: relative;
    }
    #preload-bg .progress {
        position: relative;
        background: #16222b;
        top: 15px;        
    }

.scheduler-preload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;

}

#scheduler-preload .long-query {
  font-size: 24px;
  display: none;
}

.timeline-progress-bar {
  transition-duration: 15s;
}

.preload-text {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    position: relative;
    left: 0px;
}

.cube1, .cube2 {
  background-color: #55b3d9;
  width: 15px;
  height: 15px;
  opacity: .6;
  z-index: 99999;
  position: absolute;
  left: 10px;
  
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  background-color: #f69221;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

.modal-backdrop{
    display: none;
}

.modal{
    background:  rgba(58, 63, 81, 0.8)
}

#titlediv {
display: none!important;  
}

#schedule-options-form{
    overflow: hidden;
}

.container-allrrule-options > div{
    cursor: pointer;
    background: #ddd;
    padding: 2px;
    margin: 1px 0;
}
.container-allrrule-options > div:hover{
    background: #eee;
}

.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

table#callbacks tr td {
    border-top: none;
    border-bottom: 0px;
}

table#callbacks tr:hover {
  background: #efefef;
}

.fc-view-basicDay-block {
    margin-bottom: 5px;
    overflow: hidden;
    padding: 3px 10px 3px 3px;
    position: relative;
}

.fc-view-basicDay-block .btn-editdaynote,
.fc-view-basicDay-block .btn-deletedaynote {
    position: absolute;
    display: block;
    right: 3px;
    top: 3px;
    width: 15px;
    height: 15px;
    padding: 3px;
    color: #888A85;
}
.fc-view-basicDay-block .btn-deletedaynote {
    top: 23px;
}

.fc-view-basicDay-block:hover .btn-editdaynote,
.fc-view-basicDay-block:hover .btn-deletedaynote {
    color: #f00;
}
.fc-view-basicDay-block:hover .btn-editdaynote:hover,
.fc-view-basicDay-block:hover .btn-deletedaynote:hover {
    color: #222;
}

.fc-view-basicDay-block:hover{
    background: rgb(245, 245, 199);
}
.fc-view-basicDay-block-header.fc-view-basicDay-block:hover {
    background: inherit;
}
@media (min-width: 992px) {
    .modal-ledger-addnew .modal-lg {
        width: 910px;
    }
}

.fc-event-vacation.restrict-height .fc-event-inner .fc-event-users {
    max-height: 450px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block;
}
.fc-event-vacation.restrict-height .fc-event-inner .fc-event-users .fc-event-user.unscheduled {
    margin-bottom: 40px;
}
.fc-event.full-view.fc-event-vacation.restrict-height {
    padding-bottom: 0;
}
.fc-event-vacation.restrict-height:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    width:100%;
    height:40px;
    z-index: 3;
    -webkit-box-shadow: inset 0px -25px 15px -11px rgba(255,255,255,0.75);
    -moz-box-shadow: inset 0px -25px 15px -11px rgba(255,255,255,0.75);
    box-shadow: inset 0px -25px 15px -11px rgba(255,255,255,0.75);
}
#container-debug-messages .nav-tabs > li.active > a {
    color: #000 !important;
}

/* hide salesforce chat unintented white line, because of default form styling in this file */
#fileUploadForm {
  padding: 0;
}

.angular-module {
  position: absolute;
  height: 100%;
  width: 100%;
  /* Accounts for the header overlapping content. */
  padding-top: 3px;
  box-sizing: border-box;
  border: none;
}

@media screen and (max-width: 1024px) {
  .angular-module {
    position: unset !important;
    height: calc(100vh - 55px) !important;
    min-height: 1015px;
  }
}

.select2-override-wrapper {
  display: flex;
  flex-direction: column;
}

.select2-override-wrapper .select2-container {
  width: 100% !important;
}

.select2-override-wrapper .select2-selection {
  border-radius: 2px !important;
  border-color: #cfdadd !important;
}

.select2-override-wrapper .select2-selection__rendered {
  color: #555555 !important;
}

.list-striped {
  padding-inline-start: 0;
}

.list-striped li {
  padding: 0.25em 0 0.5em 0.5em;
  border-top: 1px solid #eaeff0;
}

.list-striped li:nth-child(odd) {
  background-color: #fafbfc;
}

.button-unstyled {
  background: transparent;
  border: unset;
  padding: unset;
}

#filter-employees-that-poseess-qualifier-settings-wrapper,
#partial-matches-filter-employees-that-poseess-qualifier-settings-wrapper {
  margin-left: 20px;
}

@media screen and (min-width: 768px) {
  #filter-employees-that-poseess-qualifier-to-fill-shift-label {
    position: relative;
    left: 20px;
  }

  #filter-employees-that-poseess-qualifier-settings-wrapper,
  #partial-matches-filter-employees-that-poseess-qualifier-settings-wrapper {
    margin-left:40px;
  }
}

/* use form field sets in any of the column based forms like the callback rules form or the assistant settings form */
.column-form-fieldset legend {
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-bottom: unset;
}

.column-form-fieldset__fields {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
}

.column-form-fieldset__fields label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 220px;
  flex-basis: 0;
}

/* SCHED-22833: Credential Status Legend */
/* SCHED-22833: Legend — header fixed at viewport bottom, panel fixed above it */
.cs-legend-header {
  position: fixed;
  bottom: 0;
  left: 50px;
  z-index: 10010;
  padding: 7px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  background: #fff;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
  white-space: nowrap;
}
.cs-legend-header:hover { background: #f5f5f5; }
.cs-legend-chevron { font-size: 11px; color: #777; }
.cs-legend-panel-body {
  position: fixed;
  bottom: 34px;
  left: 50px;
  z-index: 10009;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  font-size: 13px;
  min-width: 280px;
  max-width: 480px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.10);
}
.cs-legend-section {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  border-top: 1px solid #eee;
  gap: 10px;
  white-space: nowrap;
}
.cs-legend-label {
  color: #555;
  font-size: 12px;
  min-width: 120px;
  font-weight: 400;
}
.cs-legend-items {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cs-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #333;
}
.cs-legend-item-plain {
  font-size: 12px;
  color: #333;
}
/* Credential status icons */
.cs-cred-icon { font-size: 14px; }
.cs-cred-icon--warning { color: #f39c12; }
.cs-cred-icon--expired { color: #e74c3c; }
/* Badge type chips */
.cs-legend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}
.cs-legend-badge--engine { background: #8B0000; color: #fff; border-radius: 12px; }
.cs-legend-badge--label  { background: #444;    color: #fff; border-radius: 12px; }