/* ==========================================================================
Base Mixins
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Variables for colors
 *  2.
 *  3. 
 *  4.
 *  5.
 *  6.
 *  7.
 *  8.
 *  9.
 *  10. 
 *  11.
 *  12.
 *  13.
 *  14.
 *  15.
 *  16.
 *  17.
 *  18.
 *  19.
 *  20.
 *  21.
 *  22.
 *  23.
 *  24.
 */
/* 1. Mixins
   ========================================================================== */
/*when used ALLWAYS use in this order 
       @include phones {
                bottom: 117px;
            }

            @include tablets {
                bottom: 190px;
            }

            @include desktops {
                bottom: 300px;
            }
*/
/* ========================================================================*/
/*fade*/
/*darker*/
/* ========================================================================== */
/* ========================================================================
   Component: layout
 ========================================================================== */
body,
.wrapper > section {
  background-color: #fff; }

body {
  font-size: 16px; }

.fa {
  font-size: 22px !important;
  vertical-align: bottom; }

.input-group-addon .fa {
  font-size: 14px !important; }

.btn {
  font-size: 16px;
  /*opacity: 0.8;*/ }
  .btn .fa {
    width: 22px;
    height: 22px;
    text-align: center; }

.btn.btn-xs {
  font-size: 12px; }
  .btn.btn-xs .fa {
    font-size: 14px !important;
    vertical-align: middle;
    height: 15px;
    width: 15px; }

.btn-warning, .btn-warning:hover {
  border-color: #ffab5e;
  background-color: #ffab5e; }

.btn-danger, .btn-danger:hover {
  border-color: #f47f7f;
  background-color: #f47f7f; }

.btn-success, .btn-success:hover {
  border-color: #43d967;
  background-color: #43d967; }

.btn-primary, .btn-primary:hover {
  border-color: #8bb8f1;
  background-color: #8bb8f1; }

.btn-info, .btn-info:hover {
  border-color: #51c6ea;
  background-color: #51c6ea; }

.wrapper > .aside {
  background-color: #54747a; }

/* ========================================================================
   buttons
 ========================================================================== */
.btn-label {
  padding: 4px 16px 4px 16px; }

@media only screen and (max-width: 767px) {
  body .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 6px !important; } }

/* ========================================================================
   Input
 ========================================================================== */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper select {
  height: 36px; }

/* ========================================================================
   Component: top-navbar
 ========================================================================== */
.topnavbar-wrapper {
  height: 55px; }
  .topnavbar-wrapper .nav-wrapper {
    height: 55px; }

.topnavbar {
  background-color: #fff; }

.topnavbar .navbar-header {
  background-color: transparent;
  background-image: -webkit-linear-gradient(left, #82c8c1 0%, #9cccc7 100%);
  background-image: -o-linear-gradient(left, #82c8c1 0%, #9cccc7 100%);
  background-image: linear-gradient(to right, #82c8c1 0%, #9cccc7 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec2121', endColorstr='#fff05050', GradientType=1); }

@media only screen and (min-width: 768px) {
  .topnavbar .navbar-header {
    background-image: none; } }

.topnavbar .navbar-nav > li > .navbar-text {
  color: #82c8c1; }

.topnavbar .navbar-nav > li > a,
.topnavbar .navbar-nav > .open > a {
  color: #82c8c1; }

.topnavbar .navbar-nav > li > a:hover,
.topnavbar .navbar-nav > .open > a:hover,
.topnavbar .navbar-nav > li > a:focus,
.topnavbar .navbar-nav > .open > a:focus {
  color: #9a0d0d; }

.topnavbar .navbar-nav > .active > a,
.topnavbar .navbar-nav > .open > a,
.topnavbar .navbar-nav > .active > a:hover,
.topnavbar .navbar-nav > .open > a:hover,
.topnavbar .navbar-nav > .active > a:focus,
.topnavbar .navbar-nav > .open > a:focus {
  background-color: transparent; }

.topnavbar .navbar-nav > li > [data-toggle='navbar-search'] {
  color: #fff; }

.topnavbar .nav-wrapper {
  background-color: #54747a;
  background-image: -webkit-linear-gradient(left, #54747a 0%, #678f96 100%);
  background-image: -o-linear-gradient(left, #54747a 0%, #678f96 100%);
  background-image: linear-gradient(to right, #54747a 0%, #678f96 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec2121', endColorstr='#fff05050', GradientType=1); }

@media only screen and (min-width: 768px) {
  .topnavbar {
    background-color: #82c8c1;
    background-image: -webkit-linear-gradient(left, #82c8c1 0%, #9cccc7 100%);
    background-image: -o-linear-gradient(left, #82c8c1 0%, #9cccc7 100%);
    background-image: linear-gradient(to right, #82c8c1 0%, #9cccc7 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec2121', endColorstr='#fff05050', GradientType=1); }
  .topnavbar .navbar-nav > .open > a,
  .topnavbar .navbar-nav > .open > a:hover,
  .topnavbar .navbar-nav > .open > a:focus {
    box-shadow: 0 -3px 0 rgba(255, 255, 255, 0.5) inset; }
  .topnavbar .navbar-nav > li > .navbar-text {
    color: #fff; }
  .topnavbar .navbar-nav > li > a,
  .topnavbar .navbar-nav > .open > a {
    color: #fff; }
  .topnavbar .navbar-nav > li > a:hover,
  .topnavbar .navbar-nav > .open > a:hover,
  .topnavbar .navbar-nav > li > a:focus,
  .topnavbar .navbar-nav > .open > a:focus {
    color: #9a0d0d; } }

.navbar-header .navbar-brand {
  background-color: #fff; }
  .navbar-header .navbar-brand .brand-logo {
    padding: 10px 28px; }
    @media only screen and (max-width: 767px) {
      .navbar-header .navbar-brand .brand-logo img {
        max-height: 40px; } }

footer .navbar-brand {
  padding: 0;
  float: none; }
  @media only screen and (max-width: 767px) {
    footer .navbar-brand .brand-logo {
      display: none; } }
  footer .navbar-brand .brand-logo img {
    max-width: 210px; }
    @media only screen and (max-width: 767px) {
      footer .navbar-brand .brand-logo img {
        max-height: 40px; } }
  @media only screen and (min-width: 768px) {
    footer .navbar-brand .brand-logo-collapsed {
      display: none; } }
  footer .navbar-brand .brand-logo-collapsed img {
    max-width: 210px; }
    @media only screen and (max-width: 767px) {
      footer .navbar-brand .brand-logo-collapsed img {
        max-height: 40px; } }

.header-text {
  display: inline-block;
  padding-top: 15px;
  padding-left: 20px; }
  .header-text span {
    font-size: 24px;
    line-height: 1.1;
    color: white; }

/* ========================================================================
   Component: sidebar
 ========================================================================== */
.sidebar {
  background-color: #689097; }
  .sidebar .nav-heading {
    color: #e1e2e3; }

.sidebar .nav > li > a,
.sidebar .nav > li > .nav-item {
  color: #e1e2e3;
  padding: 12px; }

.sidebar .nav > li > a:focus,
.sidebar .nav > li > .nav-item:focus {
  color: #d8673a; }
  .sidebar .nav > li > a:focus span,
  .sidebar .nav > li > .nav-item:focus span {
    color: #33AECC; }

.sidebar .nav > li > a:hover,
.sidebar .nav > li > .nav-item:hover {
  color: #9cccc7; }
  .sidebar .nav > li > a:hover span,
  .sidebar .nav > li > .nav-item:hover span {
    color: #9cccc7; }

.sidebar .nav > li > a > em,
.sidebar .nav > li > .nav-item > em {
  color: inherits; }

.sidebar .nav > li.active,
.sidebar .nav > li.open,
.sidebar .nav > li.active > a,
.sidebar .nav > li.open > a,
.sidebar .nav > li.active .nav,
.sidebar .nav > li.open .nav {
  background-color: #49666b;
  color: #9cccc7; }

.sidebar .nav > li > a:hover {
  background-color: #49666b; }

.sidebar .nav > li > a.header {
  font-size: 13px;
  color: #e1e2e3; }

.sidebar .nav > li > a.header em.chev {
  font-size: 10px !important;
  vertical-align: top;
  margin-top: 3px; }

.sidebar .nav > li.active > a > em,
.sidebar .nav > li.open > a > em {
  color: #9cccc7; }

.sidebar .nav > li.active {
  border-left-color: #d8673a; }

.sidebar .nav > li:hover {
  border-left-color: #9cccc7 !important; }

.sidebar-subnav {
  background-color: #689097;
  /*$grey-blue;*/ }

.sidebar-subnav > .sidebar-subnav-header {
  color: #e1e2e3; }

.sidebar-subnav > li > a,
.sidebar-subnav > li > .nav-item,
.sidebar .nav > li > .sidebar-subnav > li > a,
.sidebar .nav > li > .sidebar-subnav > li > .nav-item {
  color: #e1e2e3;
  padding: 12px 20px; }

.sidebar-subnav > li > a > em,
.sidebar-subnav > li > .nav-item > em {
  margin: 0;
  width: 1em;
  margin-right: 10px; }

.sidebar-subnav > li > a:focus,
.sidebar-subnav > li > .nav-item:focus,
.sidebar-subnav > li > a:hover,
.sidebar-subnav > li > .nav-item:hover,
.sidebar .nav > li > .sidebar-subnav > li > a:focus,
.sidebar .nav > li > .sidebar-subnav > li > .nav-item:focus,
.sidebar .nav > li > .sidebar-subnav > li > a:hover,
.sidebar .nav > li > .sidebar-subnav > li > .nav-item:hover {
  color: #9cccc7;
  background-color: #49666b !important; }

.sidebar-subnav > li.active > a,
.sidebar-subnav > li.active > .nav-item,
.sidebar .nav > li > .sidebar-subnav > li.active > a,
.sidebar .nav > li > .sidebar-subnav > li.active > .nav-item {
  color: #9cccc7; }

.sidebar-subnav > li.active > a,
.sidebar-subnav > li.active > .nav-item {
  color: #9cccc7; }

.sidebar-subnav > li.active > a:after,
.sidebar-subnav > li.active > .nav-item:after {
  border-color: #9cccc7;
  background-color: #9cccc7; }

/* ========================================================================
   Component: offsidebar
 ========================================================================== */
.offsidebar {
  border-left: 1px solid #cccccc;
  background-color: #fff;
  color: #515253; }
  .offsidebar .account-sidebar .account-user-row {
    margin-top: 10px; }
    .offsidebar .account-sidebar .account-user-row .account-user-header {
      font-size: 12px; }
    .offsidebar .account-sidebar .account-user-row .account-user-value {
      font-size: 18px;
      margin-top: -5px; }

.aside-inner .sidebar ul li .nav-open-close-icon {
  color: #e1e2e3;
  text-align: left;
  padding-left: 12px; }
  .aside-inner .sidebar ul li .nav-open-close-icon.navbar-collapsed {
    text-align: center;
    padding-left: 0; }

.aside-inner .sidebar ul li .nav-collapseall-icon {
  top: 0;
  right: 0;
  position: absolute;
  color: #e1e2e3;
  text-align: center;
  width: 60px;
  display: block; }

.aside-collapsed .aside-inner .sidebar ul li .nav-collapseall-icon {
  display: none; }

/* ========================================================================
   Login form
 ========================================================================== */
.login-form {
  /*background: red;*/
  /*max-width:500px;
    margin-left:0;
    margin-right:0;*/ }
  .login-form .block-center {
    max-width: 500px;
    width: 100%; }
    .login-form .block-center .panel {
      margin-top: 30vh !important; }
      @media only screen and (max-width: 767px) {
        .login-form .block-center .panel {
          margin-top: 30px !important; } }
      .login-form .block-center .panel .panel-body {
        padding-top: 0 !important; }

/* ========================================================================
   content-heading
 ========================================================================== */
.content-heading .open-close-action {
  position: absolute;
  right: 20px;
  top: 25px; }

.content-heading .action-wrapper {
  padding-top: 15px;
  text-align: right; }
  @media only screen and (min-width: 768px) {
    .content-heading .action-wrapper {
      position: absolute;
      top: 10px;
      right: 25px; } }
  .content-heading .action-wrapper .form-group {
    text-align: right; }

.content-heading .action-wrapper-visible {
  display: block !important; }

/* ========================================================================
   resource-selector
 ========================================================================== */
ras-resource-selector .form-group {
  min-width: 250px; }

ras-resource-selector .form-inline .form-control, ras-resource-selector .form-control {
  width: 100%; }

ras-resource-selector .ui-select-toggle {
  width: 100%; }

ras-resource-selector .ui-select-bootstrap .ui-select-toggle {
  width: 100%; }

ras-resource-selector .ui-select-bootstrap .ui-select-search {
  width: 100%; }

/* ========================================================================
   spinner
 ========================================================================== */
.ras-spinner {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  padding-top: 100px; }
  .ras-spinner .row-fluid {
    z-index: 101; }

.action-column {
  white-space: nowrap; }

/* ========================================================================
   Department image
 ========================================================================== */

.departmentImg {
    height: 400px;
}

.hoverable {
    text-align: center;
    position: relative;
    display: block;
    cursor: pointer;
    height: 400px;
}

    .hoverable .hover-text {
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .hoverable .background {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.5);
        pointer-events: none;
        z-index: 1;
    }

    .hoverable:hover .hover-text {
        display: block;
    }

    .hoverable:hover .background {
        display: block;
    }

#fileInput {
    display: none;
}

/* ========================================================================
   Readingsheet
 ========================================================================== */

.readingsheet-subindex-parent {
    display: inline-block;
    position: relative;
}

.readingsheet-subindex-unit {
    position: absolute;
    left: 32px;
    top: 8px;
    color: #555;
    padding-left: 5px;
    font-size: 14px;
    pointer-events: none;
}

/* ========================================================================
   Departmentoverview
 ========================================================================== */
.departmentoverview-header {
    display: flex;
}

    .departmentoverview-header .offSet {
        width: 10%;
        background-color: #689097;
    }

    .departmentoverview-header .currentYear {
        width: 54%;
        text-align: center;
        background-color: #54747a;
    }

    .departmentoverview-header .forecast {
        width: 36%;
        text-align: center;
        background-color: #689097;
    }

    .departmentoverview-header .forecast a, .departmentoverview-header .currentYear a{
        color: white
    }

.department-header-label {
    width: 10%;
}

.table-bordered .department-info-label {
    width: 9%;
    color: #656565;
    padding-top: 8px;
    vertical-align: top;
}

.department-body {
    width: 10%;
    cursor: pointer;
}

.department-body-info {
    width: 9%;
    text-align: right;
    cursor: help
}

.department-meter-label {
    width: 10%;
    cursor: pointer;
}

.department-meter-info {
    width: 9%;
    text-align: right
}

    .department-meter-info.help {
        cursor: help;
    }

/* ========================================================================
   Departmentprogress
 ========================================================================== */

.departmentProgress-header {
    display: flex;
}

    .departmentProgress-header .offSet {
        width: 40%;
        background-color: #689097;
    }

    .departmentProgress-header .water {
        width: 20%;
        text-align: center;
        background-color: #54747a;
    }

    .departmentProgress-header .heat {
        width: 20%;
        text-align: center;
        background-color: #689097;
    }

    .departmentProgress-header .power {
        width: 20%;
        text-align: center;
        background-color: #54747a;
    }

    .departmentProgress-header .water a, .departmentProgress-header .heat a, .departmentProgress-header .power a{
        color: white
    }

.departmentProgress-body-content {
    width: 10%;
    cursor: pointer;
}

.departmentProgress-body-depNumber {
    width: 20%;
    cursor: pointer;
}