/*
 * Custom CSS style for Phonon components
 * It is also possible to use Stylus
 * by changing values in _variables.styl
 * then execute gulp css-all
 */
/*
 * App Pages
 */
.app-page, select, input {
  background-color: #efeff4 !important;
}
/*
 * Header Bars
 */
.header-bar {
  background-color: #0b5392;
}
.header-bar .title {
  color: #fff;
}
.header-bar .btn {
  color: #fff;
}
/*
 * Dialogs
 */
.dialog {
  background-color: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 4px #8a8a8a;
          box-shadow: 0 2px 4px #8a8a8a;
}
/*
 * Tabs
 */
.tabs {
  background-color: #fff;
}
.tabs .tab-items .tab-item {
  color: #0b5392;
}
.tabs .tab-indicator {
  margin-bottom: -3px;
  height: 3px;
  background-color: #0b5392;
}
/*
 * Panels
 */
.panel,
.panel-full {
  background-color: #fff;
}
/*
 * Side Panels
 */
.side-panel {
  background-color: #333;
}
.side-panel .list li {
  border-color: #444;
}
.side-panel .list a,
.side-panel .list li,
.side-panel .list .title,
.side-panel .list .body {
  color: #fff;
}
.side-panel .list a:active,
.side-panel .list li:active,
.side-panel .list .title:active,
.side-panel .list .body:active {
  background-color: item-background-active;
}
.side-panel .header-bar {
  background-color: transparent;
}
.side-panel .header-bar .title {
  color: side-panel-title-color;
}
.side-panel .header-bar .btn {
  color: #fff;
}
.checkbox span,
.radio span {
  border: 2px solid #ddd;
}
.checkbox :checked + span,
.radio :checked + span {
  border-color: #0b5392;
}
/*
 * Preloaders
 */
.circle-progress {
  width: 36px;
  height: 36px;
  margin-left: -18px;
}
.circle-progress.active .spinner {
  border-top: 3px solid #0b5392;
  border-right: 3px solid #0b5392;
  border-bottom: 3px solid #0b5392;
  border-left: 3px solid #eee;
  -webkit-animation: circleLoading 900ms infinite linear;
          animation: circleLoading 900ms infinite linear;
}
.circle-progress.primary .spinner {
  border-top: 3px solid #0b5392;
  border-right: 3px solid #0b5392;
  border-bottom: 3px solid #0b5392;
}
.circle-progress.negative .spinner {
  border-top: 3px solid #f40b00;
  border-right: 3px solid #f40b00;
  border-bottom: 3px solid #f40b00;
}
.circle-progress.positive .spinner {
  border-top: 3px solid #0ae700;
  border-right: 3px solid #0ae700;
  border-bottom: 3px solid #0ae700;
}
.progress {
  height: 6px;
}
.progress .determinate {
  background-color: #0b5392;
}
.progress.primary .determinate {
  background-color: #0067b5 !important;
}
.progress.negative .determinate {
  background-color: #c20900 !important;
}
.progress.positive .determinate {
  background-color: #08b500 !important;
}
/*
 * Notifications
 */
.notification {
  width: notification-width;
  min-height: 48px;
  line-height: 54px;
  padding: 0 24px;
  color: #fff;
  background-color: #333;
  -webkit-transform: translate3d(0, 72px, 0);
          transform: translate3d(0, 72px, 0);
  -webkit-transition: opacity 200ms, -webkit-transform 0.3s;
  transition: opacity 200ms, -webkit-transform 0.3s;
  -o-transition: transform 0.3s, opacity 200ms;
  transition: transform 0.3s, opacity 200ms;
  transition: transform 0.3s, opacity 200ms, -webkit-transform 0.3s;
}
.notification .btn {
  top: 6px;
  height: 42px;
  line-height: 42px;
}
/*
 * Colors
 */
.btn.primary,
.btn.positive,
.btn.negative {
  color: #fff !important;
}
.primary {
  background-color: #0b5392 !important;
}
.primary.btn-flat {
  color: #0b5392 !important;
  background-color: transparent !important;
}
.positive {
  background-color: #0ae700 !important;
}
.positive.btn-flat {
  color: #0ae700 !important;
  background-color: transparent !important;
}
.negative {
  background-color: #f40b00 !important;
}
.negative.btn-flat {
  color: #f40b00 !important;
  background-color: transparent !important;
}
.light-primary {
  background-color: #b9d3e7 !important;
}
.light-positive {
  background-color: #bbe7b9 !important;
}
.light-negative {
  background-color: #f4c5c3 !important;
}
.dark-primary {
  background-color: #0067b5 !important;
}
.dark-positive {
  background-color: #08b500 !important;
}
.dark-negative {
  background-color: #c20900 !important;
}

/* change sizes to tabs items */
.tabs {
    border-top: solid 1px #ddd;
}
.tabs .tab-items .top {
    line-height: 10px;
    white-space: normal;
    display: inline-grid;
    padding-top: 5px
}
.tabs .tabs-item .top i{
    line-height: 30px;
}
/* allow center icons */
.tabs .tab-items .top .icon {
    width: auto;
    height: 0px;
}

.flot_tooltip{
    position: absolute;
    display: none;
    padding: 5px;
    background-color: #000;
    opacity: 0.6;
    z-index: 5000;
    color: white;
    border-radius: 5px;
    font-size: 12px;
    width: 150px;
}

span.money-value {
    width: 100px !important;
    white-space: pre;
}

.money-value{
    font-family: monospace;
    text-align: right;
}

.chart-container{
    background: #efeff4;
    padding: 15px 15px 60px 15px;
}

.floating-label {
    color: #0b5392
}

input, select {
    color: #333 !important;
    border-bottom: 1px solid #888 !important;
}

h3{
    color: #0b5392;
    padding: 20px 10px;
    text-align: center;
    text-shadow: .5px .5px 0px #999;
}

table.table{
    width: 100%;
}

table.table td {
    padding: 10px;
}

table.table thead td {
    text-align: center;
    font-weight: bold;
    background: #0b5392;
    color: white
}

table.table tr:nth-of-type(odd) {
    background: #fefefe;
}

table.table tr:nth-of-type(even) {
    background: #deeaf7;
}

.legendLabel{
    background: #efeff4 !important;
}
.input-hint{
    font-size: 12px;
    color: #aaa;
}