body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
    font-family: 'Source Sans Pro', "Segoe UI","Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-header {
  display: none;
  background-color: #ffffff;
  position: relative;
  width: calc(100vw - 250px);
  height: 70px;
  margin-left: 250px;
  z-index: 300;
  padding: 0;
  transition: margin-left 0.3s ease-in;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.24); }
  .main-header .navbar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end; }
    .main-header .navbar .top-navigation-languages {
      margin: 0 10px;
      border: 1px solid rgba(242, 242, 242, 0.5);
      color: #a4afb7;
      padding: 5px 20px 5px 5px;
      font-size: 14px;
      background-color: #ffffff;
      cursor: pointer;
      outline: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      transition: all 0.15s ease-in; }
      .main-header .navbar .top-navigation-languages:hover {
        border: 1px solid #cacaf2;
        text-shadow: 0 0 0 #a4afb7; }
    .main-header .navbar div {
      position: relative;
      margin: 0 10px; }
      .main-header .navbar div .notifications-img {
        position: relative;
        top: 3px;
        cursor: pointer; }
      .main-header .navbar div .notifications-circle {
        position: absolute;
        bottom: 18px;
        border: 2px solid #ffffff;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background-color: #ffc06a;
        cursor: pointer; }
        .main-header .navbar div .notifications-circle.no-notifications {
          display: none; }
    .main-header .navbar .top-navigation-username {
      margin: 0 10px;
      color: #43425d;
      text-shadow: 0px 1px 0 #cccccc;
      padding: 6px 15px 8px 15px;
      border-left: 1px solid #ebebf2;
      cursor: pointer;
      transition: all 0.15s ease-in; }
      .main-header .navbar .top-navigation-username.heighlate-username {
        background-color: rgba(235, 235, 242, 0.5);
        border-radius: 4px;
        border-left: 1px solid rgba(235, 235, 242, 0); }
  .main-header .modal-panel-haeder {
    display: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden; }
  .main-header *::selection {
    background-color: #a6a6a6;
    color: #ffffff;
    text-shadow: 1px 1px 4px #1a1a1a; }
  .main-header .haeder-panel-logout {
    position: fixed;
    right: 12px;
    height: 50px;
    width: 100px;
    background-color: #565577;
    top: 52px;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.18); }
    .main-header .haeder-panel-logout .arrow-up {
      position: relative;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #565577;
      bottom: 7px;
      left: 70px; }
    .main-header .haeder-panel-logout button {
      height: 26px;
      padding: 0 3px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      outline: none;
      font-family: 'Source Sans Pro', sans-serif;
      width: 76px;
      background-color: #43425d;
      color: #ffffff;
      cursor: pointer;
      transition: all 0.15s ease-in;
      transform: translate(12px, 2px); }
      .main-header .haeder-panel-logout button:hover {
        background-color: #565577;
        box-shadow: 0px 0px 5px 1px rgba(225, 228, 234, 0.8); }
    .main-header .haeder-panel-logout.hide-logout {
      display: none; }
    .main-header .haeder-panel-logout.show-logout {
      display: block; }

.short-left-header {
  margin-left: 50px;
  width: calc(100vw - 50px);
  transition: margin-left 0.3s ease-in; }

.left-navigation {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 250px;
  background-color: #478e48;
  color: #ffffff;
  padding: 0;
  margin: 0;
  overflow: hidden;
  transition: width 0.3s ease-in;
  box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.18);
  z-index: 200; }
  .left-navigation .navigation-header {
    background-color: #4f9d50;
    height: 70px;
    width: 100%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.24); }
    .left-navigation .navigation-header .logo-nav-wraper {
      position: relative;
      top: 15px;
      left: 15px;
      width: 73px;
      height: 40px; }
      .left-navigation .navigation-header .logo-nav-wraper span.hide {
        display: none; }
    .left-navigation .navigation-header .small-nav-logo-wraper {
      display: none;
      position: fixed;
      width: 48px;
      height: 27px;
      top: 23px; }
    .left-navigation .navigation-header #clickBtn {
      position: absolute;
      right: 6px;
      top: 18px;
      border-radius: 5px;
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0);
      padding: 3px 6px 1px 6px;
      transition: border-color 0.15s ease-in;
      background-color: transparent;
      font-size: 28px;
      cursor: pointer;
      outline: none; }
      .left-navigation .navigation-header #clickBtn:hover {
        border: 1px solid rgba(255, 255, 255, 0.3); }
  .left-navigation .navigation-body {
    height: 100%; }
    .left-navigation .navigation-body ul {
      list-style: none;
      margin: 10px 0 0 0;
      padding: 0;
      width: 100%;
      overflow: hidden;
      height: 100%; }
      .left-navigation .navigation-body ul li {
        position: relative;
        margin: 0;
        padding: 0;
        height: 50px;
        width: 100%;
        cursor: pointer;
        z-index: 1; }
        .left-navigation .navigation-body ul li .navigation-icon-wraper {
          position: relative;
          left: 13px;
          top: 15px;
          width: 22px;
          height: 22px;
          cursor: pointer; }
        .left-navigation .navigation-body ul li a {
          text-decoration: none;
          color: #ffffff; }
        .left-navigation .navigation-body ul li.active {
          background-color: #4f9d50;
          border-left: 5px solid #ffffff;
          text-shadow: 1px 1px 0 #444;
          font-weight: bold;
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); }
          .left-navigation .navigation-body ul li.active span {
            position: relative;
            left: 50px; }
        .left-navigation .navigation-body ul li:hover {
          background-color: #55aa57;
          text-shadow: 1px 1px 0 #444;
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
          z-index: 2; }
        .left-navigation .navigation-body ul li span {
          position: relative;
          left: 53px;
          bottom: 7px; }
          .left-navigation .navigation-body ul li span.hidden {
            display: none; }
  .left-navigation *::selection {
    background-color: #cce5cd;
    color: #ffffff;
    text-shadow: 1px 1px 4px #808080; }

#logoDisabledButton {
  width: 48px; }

@media screen and (max-width: 1312px) {
  .navigation-header span {
    display: none; }
  #clickBtn {
    display: none; }
  #logoDisabledButton {
    display: block; } }

.short-left-navigation {
  width: 50px;
  transition: width 0.3s ease-in; }

.main-content {
  position: relative;
  margin-left: 250px;
  height: calc( 100vh - 70px);
  /*width: 100%;*/
  color: #1a331a;
  overflow-y: hidden;
  padding: 0;
  transition: margin-left 0.3s ease-in; }
  .main-content *::selection {
    background-color: #c4c3d5;
    color: #ffffff;
    text-shadow: 1px 1px 4px #1a1a1a; }
  .main-content.login-main {
    margin-left: 0;
    height: 100vh; }
  .main-content.logout-main {
    margin-left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 300;
    background-color: #fff;
    position: fixed;
    top: 0; }

.login-page {
  display: flex;
  position: relative; }
  .login-page .login-aside-image {
    width: 50%;
    height: 100vh; }
    .login-page .login-aside-image .green-bcg-img {
      width: 100%;
      height: 100vh; }
    .login-page .login-aside-image .image-group488 {
      position: absolute;
      top: calc(45vh - 240px);
      left: calc(25vw - 378px);
      width: 755px;
      height: 480px; }
    .login-page .login-aside-image .image-group488-mini {
      display: none;
      position: absolute;
      top: calc(45vh - 127px);
      left: calc(25vw - 200px);
      width: 400px;
      height: 254px; }
    .login-page .login-aside-image .image-group-bcg {
      position: absolute;
      top: 45vh;
      right: 50vw;
      width: 1067px;
      height: 724px; }
    .login-page .login-aside-image .image-group-bcg-mini {
      display: none;
      position: absolute;
      top: 45vh;
      right: 50vw;
      width: 534px;
      height: 363px; }
  .login-page .login-body {
    position: relative;
    top: calc(30vh - 74px);
    width: 50vw;
    color: #43425d;
    overflow: hidden; }
    .login-page .login-body .login-logo-wraper {
      width: 153px;
      position: relative;
      left: calc(25vw - 78px);
      height: 74px; }
    .login-page .login-body p {
      position: relative;
      color: #4d4f5c;
      opacity: 0.5;
      font-size: 16px;
      top: 35px;
      left: calc(25vw - 138px); }
    .login-page .login-body #account {
      position: relative;
      left: calc(25vw - 175px);
      top: 80px; }
      .login-page .login-body #account input {
        width: 350px;
        outline: none;
        border: none;
        border-bottom: 2px solid rgba(77, 79, 92, 0.2);
        height: 30px;
        color: #43425d;
        border-radius: 4px;
        padding-left: 20px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0; }
        .login-page .login-body #account input::-webkit-input-placeholder, .login-page .login-body #account input:-ms-input-placeholder, .login-page .login-body #account input::placeholder {
          color: #43425d; }
        .login-page .login-body #account input.password-input {
          position: relative;
          top: 20px; }
        .login-page .login-body #account input:-webkit-autofill, .login-page .login-body #account input:-webkit-autofill:hover, .login-page .login-body #account input:-webkit-autofill:focus, .login-page .login-body #account input:-webkit-autofill:active {
          -webkit-box-shadow: 0 0 0px 1000px white inset;
          -webkit-text-fill-color: #43425d; }
        .login-page .login-body #account input::selection {
          background-color: #a5a5c0;
          color: #43425d;
          text-shadow: 0px 0px 4px #7979a0; }
    .login-page .login-body .login-btn {
      position: relative;
      left: 20px;
      top: 90px;
      height: 35px;
      padding: 0;
      background-color: #43425d;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      font-size: 15px;
      outline: none;
      font-family: 'Source Sans Pro', sans-serif;
      cursor: pointer;
      width: 122px;
      min-width: 120px;
      transition: background-color 0.15s ease-in; }
      .login-page .login-body .login-btn:hover {
        background-color: #565577; }
      .login-page .login-body .login-btn.disabled-class {
        opacity: 0.7;
        pointer-events: none; }
      .login-page .login-body .login-btn::selection {
        background-color: #20202d;
        color: #ffffff;
        text-shadow: 0px 0px 4px #0b0b0f; }
    .login-page .login-body .disabled-span-astx {
      color: #cc0000;
      visibility: hidden;
      position: relative;
      top: 90px;
      left: 20px; }
      .login-page .login-body .disabled-span-astx.astrx-visibility {
        visibility: visible; }
    .login-page .login-body footer {
      position: fixed;
      left: 75vw;
      transform: translate(-50%);
      bottom: calc(5vh - 14px);
      font-size: 10px; }
  .login-page *::selection {
    background-color: #478e48;
    color: #ffffff;
    text-shadow: 0px 0px 4px #2a5016; }

@media screen and (max-width: 1624px) {
  .login-page .login-aside-image .image-group488 {
    width: 630px;
    height: 400px;
    top: calc(45vh - 200px);
    left: calc(25vw - 315px); }
  .login-page .login-aside-image .image-group-bcg {
    width: 900px;
    height: 613px; } }

@media screen and (max-width: 1308px) {
  .login-page .login-aside-image .image-group488 {
    display: none; }
  .login-page .login-aside-image .image-group488-mini {
    display: block; } }

@media screen and (max-width: 828px) {
  .login-page .login-aside-image .image-group488-mini {
    top: calc(45vh - 63px);
    left: calc(25vw - 100px);
    width: 200px;
    height: 127px; }
  .login-page .login-aside-image .image-group-bcg {
    display: none; }
  .login-page .login-aside-image .image-group-bcg-mini {
    display: block; }
  .login-page .login-body p {
    font-size: 13px;
    left: calc(25vw - 120px);
    top: 15px; }
  .login-page .login-body #account {
    left: calc(25vw - 110px);
    top: 25px; }
    .login-page .login-body #account input {
      width: 200px; }
  .login-page .login-body .login-btn {
    top: 60px; }
  .login-page .login-body .disabled-span-astx {
    top: 60px; } }

@media screen and (max-width: 599px) {
  .login-body p {
    display: none; } }

@media screen and (max-width: 499px) {
  .login-page .login-aside-image .image-group488-mini {
    top: calc(45vh - 36px);
    left: calc(25vw - 50px);
    width: 100px;
    height: 63px; }
  .login-page .login-body #account {
    left: 0; }
    .login-page .login-body #account input {
      width: 40vw;
      right: 0; } }

#googleMap {
  height: calc(100vh - 70px);
  width: calc(100vw - 250px);
  overflow: hidden;
  pointer-events: none; }

.zoom-btn {
  position: fixed;
  right: 10px;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  border: none;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  background-color: #ffffff;
  color: rgba(71, 142, 72, 0.5);
  transition: color 0.3s ease-in, background-color 0.3s ease;
  cursor: pointer;
  outline: none;
  pointer-events: none; }
  .zoom-btn.zoom-plus {
    bottom: 78px;
    z-index: 300; }
  .zoom-btn.zoom-minus {
    bottom: 20px;
    z-index: 300; }
  .zoom-btn.map-settings {
    position: absolute;
    bottom: 30px;
    left: 10px;
    cursor: pointer; }
    .zoom-btn.map-settings img {
      transform: rotate(90deg);
      transition: transform 0.3s ease-in; }
    .zoom-btn.map-settings.hide-settings-img img {
      display: none; }
    .zoom-btn.map-settings:hover img {
      transform: rotate(0deg); }
  .zoom-btn:hover {
    color: #478e48; }
  .zoom-btn.aktiv {
    background-color: #aad4ab;
    color: #478e48; }
  .zoom-btn.caqi-button {
    display: none;
    position: absolute;
    left: 10px;
    top: 130px;
    width: 120px;
    z-index: 300;
    color: #4f9d50;
    cursor: default; }
    .zoom-btn.caqi-button span {
      position: absolute;
      left: 10px;
      bottom: 17px;
      font-weight: 600; }
    .zoom-btn.caqi-button:hover span {
      text-shadow: 0 0 0 rgba(71, 142, 72, 0.7); }
    .zoom-btn.caqi-button .switch {
      position: absolute;
      top: -10px;
      right: -68px;
      display: inline-block;
      width: 60px;
      height: 34px; }
    .zoom-btn.caqi-button .switch input {
      opacity: 0;
      width: 0;
      height: 0; }
    .zoom-btn.caqi-button .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s; }
    .zoom-btn.caqi-button .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s; }
    .zoom-btn.caqi-button input:checked + .slider {
      background-color: #66b268; }
    .zoom-btn.caqi-button input:focus + .slider {
      box-shadow: 0 0 1px #2196F3; }
    .zoom-btn.caqi-button input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px); }
    .zoom-btn.caqi-button .slider.round {
      border-radius: 34px; }
    .zoom-btn.caqi-button .slider.round:before {
      border-radius: 50%; }

.map-Type-Id-control {
  display: none;
  position: relative;
  bottom: 86px;
  outline: none; }
  .map-Type-Id-control.map-Type-Id-btn {
    color: rgba(67, 66, 93, 0.7);
    font-weight: bold;
    cursor: pointer; }
    .map-Type-Id-control.map-Type-Id-btn:hover {
      text-decoration-line: underline; }
    .map-Type-Id-control.map-Type-Id-btn.active {
      color: rgba(67, 66, 93, 0.9);
      text-decoration-line: underline; }
    .map-Type-Id-control.map-Type-Id-btn.roadmap-btn {
      left: 40px; }
    .map-Type-Id-control.map-Type-Id-btn.terrain-btn {
      left: 59px; }
    .map-Type-Id-control.map-Type-Id-btn.satellite-btn {
      left: 79px; }
  .map-Type-Id-control.map-Type-Id-link {
    color: rgba(67, 66, 93, 0.7);
    font-weight: bold; }
    .map-Type-Id-control.map-Type-Id-link.link-span {
      left: 50px; }
    .map-Type-Id-control.map-Type-Id-link.link-span-two {
      left: 70px; }

.state-panels {
  display: none; }
  .state-panels .state-indicator-panel {
    position: absolute;
    top: 30px;
    height: 80px;
    width: calc( (100% - 0px) * 0.24);
    background-color: #ffffff;
    color: #4d4f5c;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.18);
    pointer-events: auto; }
    .state-panels .state-indicator-panel .state-indicator-circle {
      position: absolute;
      top: 18px;
      left: 22px; }
    .state-panels .state-indicator-panel .state-indicator-main {
      position: absolute;
      top: 15px;
      left: 85px;
      cursor: default; }
    .state-panels .state-indicator-panel .state-indicator-panel-header {
      font-size: 18px;
      margin-bottom: 2px;
      padding: 2px 0; }
    .state-panels .state-indicator-panel .state-indicator-panel-body {
      padding-left: 2px;
      font-size: 14px; }
    .state-panels .state-indicator-panel .state-indicator-settings-icon {
      position: absolute;
      top: 15px;
      right: 15px;
      height: 50px;
      width: 50px;
      border: 1px solid rgba(242, 242, 242, 0);
      border-radius: 25px;
      background-color: #ffffff;
      transition: border-color 0.3s ease-in;
      outline: none;
      cursor: pointer;
      pointer-events: none; }
      .state-panels .state-indicator-panel .state-indicator-settings-icon .icon-image {
        position: relative;
        top: 16px;
        left: 24px;
        transform: rotate(90deg);
        transition: transform 0.3s ease-in;
        pointer-events: none;
        cursor: pointer; }
      .state-panels .state-indicator-panel .state-indicator-settings-icon:hover {
        background-color: #fcfcfc;
        z-index: 2; }
        .state-panels .state-indicator-panel .state-indicator-settings-icon:hover .icon-image {
          transform: rotate(0deg); }
      .state-panels .state-indicator-panel .state-indicator-settings-icon.hide-state-settings-img .icon-image {
        display: none; }
      .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel {
        display: none;
        position: absolute;
        top: 24px;
        left: 15px;
        height: 154px;
        width: 165px;
        background-color: rgba(252, 252, 252, 0);
        z-index: 3;
        overflow: auto;
        scrollbar-width: thin; }
        .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel::-webkit-scrollbar {
          width: 5px; }
        .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel::-webkit-scrollbar-track {
          background: transparent; }
        .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          font-size: 14px; }
          .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul li {
            padding: 5px 10px 5px 20px;
            cursor: pointer; }
            .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul li .pin-image, .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul li label {
              margin-right: 8px;
              pointer-events: none; }
            .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul li .pin-image {
              position: relative;
              top: 2px; }
            .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul li label {
              position: relative;
              bottom: 1px; }
            .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul li:hover {
              border-radius: 5px;
              text-shadow: 0 0 0 #444; }
            .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul li.no-data-state-list {
              font-style: italic;
              color: #8c8c8c; }
              .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul li.no-data-state-list:hover {
                text-decoration: none;
                cursor: default;
                background-color: transparent; }
  .state-panels .good-state-panel {
    left: calc( (100vw - 250px) * 0.07);
    transition: left 0.3s ease-in; }
    .state-panels .good-state-panel .state-indicator-panel-header {
      color: rgba(122, 206, 78, 0.8); }
    .state-panels .good-state-panel .state-indicator-settings-icon:hover {
      border-color: #7ace4e; }
    .state-panels .good-state-panel .state-indicator-list-panel {
      scrollbar-color: rgba(122, 206, 78, 0.5) rgba(252, 252, 252, 0); }
      .state-panels .good-state-panel .state-indicator-list-panel::-webkit-scrollbar-thumb {
        background: rgba(122, 206, 78, 0.5); }
      .state-panels .good-state-panel .state-indicator-list-panel::-webkit-scrollbar-thumb:hover {
        background: #7ace4e; }
      .state-panels .good-state-panel .state-indicator-list-panel ul li:hover {
        background-color: #c3e9af; }
    .state-panels .good-state-panel *::selection {
      background-color: #5fb431;
      color: #ffffff;
      text-shadow: 0px 0px 4px #2a5016; }
  .state-panels .moderate-state-panel {
    left: calc( (100vw - 250px) * 0.38);
    transition: left 0.3s ease-in; }
    .state-panels .moderate-state-panel .state-indicator-panel-header {
      color: #eec20a; }
    .state-panels .moderate-state-panel .state-indicator-settings-icon:hover {
      border-color: #eec20a; }
    .state-panels .moderate-state-panel .state-indicator-list-panel {
      scrollbar-color: rgba(238, 194, 10, 0.5) rgba(252, 252, 252, 0); }
      .state-panels .moderate-state-panel .state-indicator-list-panel::-webkit-scrollbar-thumb {
        background: rgba(238, 194, 10, 0.5); }
      .state-panels .moderate-state-panel .state-indicator-list-panel::-webkit-scrollbar-thumb:hover {
        background: #eec20a; }
      .state-panels .moderate-state-panel .state-indicator-list-panel ul li:hover {
        background-color: #f9dd6c; }
    .state-panels .moderate-state-panel *::selection {
      background-color: #dcb209;
      color: #ffffff;
      text-shadow: 0px 0px 4px #493b03; }
  .state-panels .unhealthy-state-panel {
    left: calc( (100vw - 250px) * 0.69);
    transition: left 0.3s ease-in; }
    .state-panels .unhealthy-state-panel .state-indicator-panel-header {
      color: #ff6565; }
    .state-panels .unhealthy-state-panel .state-indicator-settings-icon:hover {
      border-color: #ff6565; }
    .state-panels .unhealthy-state-panel .state-indicator-list-panel {
      scrollbar-color: rgba(255, 101, 101, 0.5) rgba(252, 252, 252, 0); }
      .state-panels .unhealthy-state-panel .state-indicator-list-panel::-webkit-scrollbar-thumb {
        background: rgba(255, 101, 101, 0.5); }
      .state-panels .unhealthy-state-panel .state-indicator-list-panel::-webkit-scrollbar-thumb:hover {
        background: #ff6565; }
      .state-panels .unhealthy-state-panel .state-indicator-list-panel ul li:hover {
        background-color: #ffb3b3; }
    .state-panels .unhealthy-state-panel *::selection {
      background-color: #ff6565;
      color: #ffffff;
      text-shadow: 0px 0px 4px #800000; }

.info-panel {
  position: fixed;
  bottom: 20px;
  width: 350px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  pointer-events: none; }
  .info-panel .info-panel-header {
    position: absolute;
    top: 0;
    height: 57px;
    width: 350px;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #f2f2f2; }
    .info-panel .info-panel-header .header-left {
      width: 190px; }
      .info-panel .info-panel-header .header-left p {
        margin-left: 14px;
        color: #4d4f5c;
        font-size: 18px; }
        .info-panel .info-panel-header .header-left p img {
          position: relative;
          top: 1px; }
        .info-panel .info-panel-header .header-left p span {
          margin-left: 10px; }
    .info-panel .info-panel-header .header-right {
      position: absolute;
      top: 10px;
      right: 10px;
      margin-left: 10px;
      color: rgba(77, 79, 92, 0.6); }
      .info-panel .info-panel-header .header-right p span.time-span {
        font-weight: 600;
        font-size: 15px; }
      .info-panel .info-panel-header .header-right p span.ago-span {
        position: absolute;
        top: -5px;
        right: 1px;
        font-size: 12px;
        font-weight: 800;
        color: rgba(77, 79, 92, 0.6); }
  .info-panel .info-panel-body {
    position: absolute;
    top: 58px;
    width: 350px;
    padding: 0;
    margin: 0;
    background-color: #fafafa;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; }
    .info-panel .info-panel-body .info-panel-card {
      background-color: #fafafa;
      height: 58px;
      width: 170px;
      border-top: 1px solid #f2f2f2;
      border-bottom: 1px solid #f2f2f2; }
      .info-panel .info-panel-body .info-panel-card .info-card-parameter {
        position: relative;
        top: -6px;
        left: 30px;
        color: #4d4f5c;
        font-weight: bold;
        font-size: 14px; }
      .info-panel .info-panel-body .info-panel-card .info-card-value {
        position: relative;
        top: -16px;
        left: 30px;
        color: #4d4f5c;
        font-size: 14px; }
      .info-panel .info-panel-body .info-panel-card .info-card-state-color {
        position: relative;
        height: 38px;
        width: 5px;
        top: -68px;
        left: 10px; }

@media screen and (max-width: 823px) {
  .info-panel {
    position: fixed;
    bottom: 5px; }
    .info-panel .info-panel-header {
      height: 47px; }
      .info-panel .info-panel-header .header-left {
        width: 190px; }
        .info-panel .info-panel-header .header-left p {
          margin-left: 15px;
          font-size: 18px; }
          .info-panel .info-panel-header .header-left p span {
            margin-left: 10px; }
      .info-panel .info-panel-header .header-right {
        position: absolute;
        top: 7px; }
    .info-panel .info-panel-body {
      position: absolute;
      top: 48px;
      width: 350px; }
      .info-panel .info-panel-body .info-panel-card {
        height: 40px; }
        .info-panel .info-panel-body .info-panel-card .info-card-parameter {
          position: relative;
          top: -12px;
          font-size: 14px; }
        .info-panel .info-panel-body .info-panel-card .info-card-value {
          position: relative;
          top: -24px;
          font-size: 14px; }
        .info-panel .info-panel-body .info-panel-card .info-card-state-color {
          position: relative;
          height: 28px;
          top: -74px; } }

@media screen and (max-width: 499px) {
  .info-panel {
    position: fixed;
    bottom: 5px;
    width: 175px; }
    .info-panel .info-panel-header {
      position: absolute;
      width: 175px;
      height: 47px; }
      .info-panel .info-panel-header .header-left {
        width: 175px; }
        .info-panel .info-panel-header .header-left p {
          margin-left: 10px;
          font-size: 18px; }
          .info-panel .info-panel-header .header-left p span {
            margin-left: 8px; }
      .info-panel .info-panel-header .header-right {
        display: none; }
    .info-panel .info-panel-body {
      top: 48px;
      width: 175px; }
      .info-panel .info-panel-body .info-panel-card {
        height: 38px;
        width: 170px; }
        .info-panel .info-panel-body .info-panel-card .info-card-parameter {
          position: relative;
          top: -10px;
          font-size: 12px; }
        .info-panel .info-panel-body .info-panel-card .info-card-value {
          position: relative;
          top: -20px;
          font-size: 12px; }
        .info-panel .info-panel-body .info-panel-card .info-card-state-color {
          position: relative;
          top: -60px; } }

.modal-panel-background {
  display: none;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 400;
  overflow: hidden; }
  .modal-panel-background .modal-panel {
    position: fixed;
    top: 50vh;
    left: calc(50vw + 125px);
    height: 400px;
    width: 60vw;
    background-color: #ffffff;
    transform: translate(-50%, -50%);
    transition: left 0.3s ease-in; }
    .modal-panel-background .modal-panel .modal-panel-header {
      display: flex;
      height: 57px;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      margin: 0 10px;
      border-bottom: 1px solid #f2f2f2; }
      .modal-panel-background .modal-panel .modal-panel-header .modal-panel-header-left p {
        color: #4d4f5c;
        font-size: 20px;
        cursor: default; }
        .modal-panel-background .modal-panel .modal-panel-header .modal-panel-header-left p img {
          position: relative;
          top: 1px; }
        .modal-panel-background .modal-panel .modal-panel-header .modal-panel-header-left p span {
          margin-left: 10px; }
      .modal-panel-background .modal-panel .modal-panel-header .modal-panel-header-right {
        color: rgba(77, 79, 92, 0.6); }
        .modal-panel-background .modal-panel .modal-panel-header .modal-panel-header-right p {
          width: 140px; }
          .modal-panel-background .modal-panel .modal-panel-header .modal-panel-header-right p span.time-span {
            font-size: 15px;
            font-weight: 600;
            cursor: default; }
      .modal-panel-background .modal-panel .modal-panel-header .close-modal-btn {
        background-color: transparent;
        height: 40px;
        width: 40px;
        border: 1px solid rgba(242, 242, 242, 0);
        border-radius: 5px;
        color: rgba(77, 79, 92, 0.6);
        transition: color 0.15s ease-in;
        cursor: pointer;
        outline: none; }
        .modal-panel-background .modal-panel .modal-panel-header .close-modal-btn i {
          transform: rotate(45deg); }
        .modal-panel-background .modal-panel .modal-panel-header .close-modal-btn:hover {
          border-color: rgba(242, 242, 242, 0.3);
          color: #4d4f5c; }
    .modal-panel-background .modal-panel .modal-panel-body {
      position: fixed;
      top: 58px;
      height: 342px;
      width: 60vw;
      background-color: #fafafa; }
      .modal-panel-background .modal-panel .modal-panel-body .button-h {
        position: fixed;
        top: 68px;
        height: 18px;
        background-color: #ffffff;
        color: #4d4f5c;
        border: 1px solid #d3d6df;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0px 0px 5px 1px rgba(225, 228, 234, 0.8);
        transition: all 0.1s ease-in; }
        .modal-panel-background .modal-panel .modal-panel-body .button-h.button-1h {
          width: 22px;
          right: 82px;
          padding: 6px 8px;
          border-bottom-left-radius: 5px;
          border-top-left-radius: 5px;
          border-right: none; }
        .modal-panel-background .modal-panel .modal-panel-body .button-h.button-24h {
          right: 48px;
          width: 22px;
          padding: 6px 9px 6px 6px;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px; }
        .modal-panel-background .modal-panel .modal-panel-body .button-h:hover {
          background-color: #fdfdfd;
          text-shadow: 0 0 1px #3e3c4f;
          box-shadow: inset 0px 0px 4px 1px rgba(9, 37, 95, 0.1); }
        .modal-panel-background .modal-panel .modal-panel-body .button-h.selecedActive {
          color: #3e3c4f;
          text-shadow: 0 0 1px #3e3c4f;
          box-shadow: inset 0px 0px 4px 1px rgba(9, 37, 95, 0.2);
          background-color: #e6e6e6; }
      .modal-panel-background .modal-panel .modal-panel-body #modalPanelChart {
        position: fixed;
        top: 100px;
        height: calc(100% - 100px);
        width: 100%; }
        .modal-panel-background .modal-panel .modal-panel-body #modalPanelChart .no-station-data {
          position: absolute;
          top: 80px;
          left: 50%;
          transform: translate(-50%);
          font-style: italic;
          font-weight: bold;
          color: rgba(77, 79, 92, 0.7); }
      .modal-panel-background .modal-panel .modal-panel-body .custom-select-wrapper {
        position: relative;
        user-select: none;
        left: 50%;
        width: 180px;
        transform: translate(-50%);
        top: 10px; }
      .modal-panel-background .modal-panel .modal-panel-body .custom-select {
        position: relative;
        display: flex;
        flex-direction: column;
        border: 0; }
      .modal-panel-background .modal-panel .modal-panel-body .custom-select__trigger {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        font-size: 15px;
        color: #4d565c;
        height: 30px;
        line-height: 30px;
        background-color: #fdfdfd;
        cursor: pointer;
        border: 1px solid #d7dae2;
        border-radius: 5px;
        font-weight: 600;
        font-family: 'Source Sans Pro', sans-serif;
        box-shadow: 0px 0px 5px 1px rgba(225, 228, 234, 0.8); }
        .modal-panel-background .modal-panel .modal-panel-body .custom-select__trigger i.params-arrow-down {
          font-size: 18px;
          position: absolute;
          right: 10px;
          top: 8px;
          color: rgba(77, 86, 92, 0.8); }
          .modal-panel-background .modal-panel .modal-panel-body .custom-select__trigger i.params-arrow-down.hide-params-arrow-down {
            display: none; }
        .modal-panel-background .modal-panel .modal-panel-body .custom-select__trigger i.params-arrow-up {
          transform: rotate(180deg);
          font-size: 18px;
          position: absolute;
          right: 10px;
          top: 7px;
          color: rgba(77, 86, 92, 0.8); }
          .modal-panel-background .modal-panel .modal-panel-body .custom-select__trigger i.params-arrow-up.hide-params-arrow-up {
            display: none; }
      .modal-panel-background .modal-panel .modal-panel-body .select-options-wrapper {
        display: none;
        position: relative;
        left: 0px;
        width: 178px;
        height: 189px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding-bottom: 4px;
        border: 1px solid #d7dae2;
        border-top: 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #fafafa;
        box-shadow: 1px 1px 6px 1px rgba(150, 150, 150, 0.3);
        scrollbar-width: thin;
        scrollbar-color: #9ea7ae #fafafa; }
        .modal-panel-background .modal-panel .modal-panel-body .select-options-wrapper.show-list {
          display: block; }
        .modal-panel-background .modal-panel .modal-panel-body .select-options-wrapper::-webkit-scrollbar-thumb {
          background: #9ea7ae; }
        .modal-panel-background .modal-panel .modal-panel-body .select-options-wrapper::-webkit-scrollbar-thumb:hover {
          background: #74828b; }
        .modal-panel-background .modal-panel .modal-panel-body .select-options-wrapper::-webkit-scrollbar {
          width: 8px; }
        .modal-panel-background .modal-panel .modal-panel-body .select-options-wrapper::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
          background: white; }
      .modal-panel-background .modal-panel .modal-panel-body .custom-options {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        width: 178px;
        font-weight: 600;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 2;
        color: #4d565c;
        background-color: #ffffff; }
      .modal-panel-background .modal-panel .modal-panel-body .custom-select.open .custom-options {
        opacity: 1;
        visibility: visible;
        pointer-events: all; }
      .modal-panel-background .modal-panel .modal-panel-body .custom-option {
        position: relative;
        display: block;
        padding: 0 10px 0 10px;
        font-size: 15px;
        color: #4d565c;
        line-height: 26px;
        cursor: pointer;
        height: 30px;
        border-bottom: 1px solid rgba(215, 218, 226, 0.7); }
        .modal-panel-background .modal-panel .modal-panel-body .custom-option:hover {
          cursor: pointer;
          background-color: rgba(215, 218, 226, 0.7);
          text-shadow: 0 0 0 #444; }
        .modal-panel-background .modal-panel .modal-panel-body .custom-option.selected {
          background-color: #e9e9f0;
          border-left: 3px solid rgba(0, 0, 0, 0.3) !important;
          text-shadow: 0 0 0 #444; }

.short-left-main {
  margin-left: 50px;
  transition: margin-left 0.3s ease-in; }
  .short-left-main .state-panels .good-state-panel {
    left: calc( (100vw - 50px) * 0.07);
    transition: left 0.3s ease-in;
    width: calc( (100vw - 50px) * 0.24); }
  .short-left-main .state-panels .moderate-state-panel {
    left: calc( (100vw - 50px) * 0.38);
    transition: left 0.3s ease-in;
    width: calc( (100vw - 50px) * 0.24); }
  .short-left-main .state-panels .unhealthy-state-panel {
    left: calc( (100vw - 50px) * 0.69);
    transition: left 0.3s ease-in;
    width: calc( (100vw - 50px) * 0.24); }
  .short-left-main .modal-panel-background .modal-panel {
    left: calc(50vw + 25px);
    transition: left 0.3s ease-in; }

@media screen and (max-width: 1099px) {
  .modal-panel-header .modal-panel-header-left p span {
    font-size: 15px; }
  .modal-panel-background .modal-panel .modal-panel-header .modal-panel-header-left p span {
    margin-left: 5px; }
  .modal-panel-background .modal-panel .modal-panel-header .modal-panel-header-right p {
    width: 133px; }
    .modal-panel-background .modal-panel .modal-panel-header .modal-panel-header-right p span.time-span {
      font-size: 13px; } }

@media screen and (max-width: 1012px) {
  .state-indicator-circle {
    display: none; }
  .state-panels .state-indicator-panel .state-indicator-main {
    left: 15px; } }

@media screen and (max-width: 865px) {
  .state-panels .state-indicator-panel .state-indicator-settings-icon .state-indicator-list-panel ul {
    font-size: 13px; } }

@media screen and (max-width: 702px) {
  .state-panels .state-indicator-panel {
    top: 10px;
    height: 50px; }
    .state-panels .state-indicator-panel .state-indicator-settings-icon {
      display: none; }
    .state-panels .state-indicator-panel .state-indicator-main {
      display: flex; }
      .state-panels .state-indicator-panel .state-indicator-main .state-indicator-panel-header {
        font-size: 13px; }
      .state-panels .state-indicator-panel .state-indicator-main .state-indicator-panel-body {
        position: relative;
        top: 2px;
        left: 8px;
        font-size: 13px; }
  .zoom-btn.caqi-button {
    top: 65px;
    width: 90px; }
    .zoom-btn.caqi-button span {
      left: 4px;
      font-size: 12px; }
    .zoom-btn.caqi-button .switch {
      right: -53px;
      width: 50px; }
    .zoom-btn.caqi-button input:checked + .slider:before {
      -webkit-transform: translateX(16px);
      -ms-transform: translateX(16px);
      transform: translateX(16px); }
  .modal-panel-background .modal-panel {
    width: 515px; }
    .modal-panel-background .modal-panel .modal-panel-body {
      width: 515px; } }

@media screen and (max-width: 576px) {
  .modal-panel-background .modal-panel {
    width: 355px;
    /*.modal-panel-header .modal-panel-header-right {
            top: 7px;
            right: 60px;
            width: 160px;

            p span.ago-span {
                display: none;
            }
        }*/ }
    .modal-panel-background .modal-panel .modal-panel-body {
      width: 355px; }
      .modal-panel-background .modal-panel .modal-panel-body .custom-select-wrapper {
        left: 27px;
        transform: none; } }

@media screen and (max-width: 499px) {
  .short-left-main {
    margin-left: 50px;
    transition: margin-left 0.3s ease-in; }
    .short-left-main .state-panels .state-indicator-panel {
      box-shadow: none; }
      .short-left-main .state-panels .state-indicator-panel.good-state-panel {
        position: absolute;
        left: 0;
        width: calc( (100vw - 50px) / 3); }
      .short-left-main .state-panels .state-indicator-panel.moderate-state-panel {
        position: absolute;
        left: calc( (100vw - 50px) / 3);
        width: calc( (100vw - 50px) / 3); }
      .short-left-main .state-panels .state-indicator-panel.unhealthy-state-panel {
        position: absolute;
        left: calc( 2 * (100vw - 50px) / 3);
        width: calc( (100vw - 50px) / 3); } }

.spinner-background {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(140, 140, 140, 0.5);
  z-index: 400;
  overflow: hidden;
  cursor: pointer; }
  .spinner-background .spinner-loader {
    position: fixed;
    top: 40vh;
    left: calc(50vw - 10vh + 125px);
    font-size: 20vh;
    color: #ffffff;
    transition: left 0.3s ease-in; }
    .main-content.short-left-main .spinner-background .spinner-loader {
      left: calc(50vw - 10vh + 25px);
      transition: left 0.3s ease-in; }
  .spinner-background.finish-spin {
    display: none; }

.warning-caqi {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  height: 40px;
  width: 168px;
  border-radius: 3px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.18); }
  .warning-caqi p {
    font-weight: bold;
    color: #ffffff;
    position: relative;
    left: 10px;
    top: -6px; }
  .warning-caqi.caqi-on {
    background-color: #66b268; }
  .warning-caqi.caqi-off {
    background-color: #ff6565; }

.caqi-legend {
  display: none;
  position: absolute;
  flex-wrap: nowrap;
  justify-content: space-around;
  left: 20%;
  top: 35px;
  width: 60%;
  padding: 2px 0;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.18); }
  .caqi-legend img {
    height: 46px;
    width: 46px;
    position: relative;
    top: 3px; }
  .caqi-legend span {
    position: relative;
    top: -16px;
    color: #43425d;
    text-shadow: 0 0 #43425d;
    font-size: 14px; }

@media screen and (max-width: 958px) {
  .caqi-legend {
    width: 80%;
    left: 10%; } }

@media screen and (max-width: 768px) {
  .caqi-legend {
    width: 90%;
    left: 5%; } }

@media screen and (max-width: 702px) {
  .caqi-legend {
    width: 98%;
    left: 1%;
    top: 5px; }
    .caqi-legend span {
      font-size: 13px; } }

@media screen and (max-width: 567px) {
  .caqi-legend {
    display: none !important; } }

.history-page-main {
  display: none;
  height: 100%;
  width: calc(100vw - 250px);
  padding: 0;
  margin: 0;
  background-color: #f3f5f7;
  position: relative;
  top: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: initial;
  scrollbar-color: #4f9d50 #fafafa; }
  .history-page-main::-webkit-scrollbar-thumb {
    background: #4f9d50;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(116, 130, 139, 0.8);
    border-radius: 3px; }
  .history-page-main::-webkit-scrollbar-thumb:hover {
    background: #478e48; }
  .history-page-main::-webkit-scrollbar {
    width: 15px; }
  .history-page-main::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    background: white; }
  .history-page-main .history-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    margin: 40px 35px 10px 35px; }
  .history-page-main .history-graph-panel {
    display: none;
    position: relative;
    margin: 40px 50px;
    padding: 0;
    background-color: #f3f5f7;
    color: #4d4f5c; }
    .history-page-main .history-graph-panel span {
      font-size: 18px;
      font-style: italic; }
    .history-page-main .history-graph-panel p.history-no-data {
      font-style: italic;
      font-weight: 600;
      color: #43425d; }
    .history-page-main .history-graph-panel .history-graphicon-title {
      display: none;
      position: relative; }
      .history-page-main .history-graph-panel .history-graphicon-title p.history-params-graph-title {
        position: absolute;
        font-size: 18px;
        font-weight: 600;
        z-index: 1;
        left: 50%;
        top: -10px;
        background-color: #ffffff;
        padding: 0 5px;
        transform: translate(-50%);
        font-family: 'Source Sans Pro', sans-serif; }
    .history-page-main .history-graph-panel .history-graphicon {
      background-color: #ffffff;
      width: calc(100vw - 250px - 100px);
      position: relative;
      margin: 20px 0;
      box-shadow: 4px 4px 8px 2px rgba(210, 210, 210, 0.3); }
      .short-left-main .history-page-main .history-graph-panel .history-graphicon {
        width: calc(100vw - 50px - 100px); }

.reports-page-main {
  display: none;
  height: 100%;
  width: calc(100vw - 250px);
  padding: 0;
  margin: 0;
  background-color: #f3f5f7;
  position: relative;
  top: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: initial;
  scrollbar-color: #4f9d50 #fafafa; }
  .reports-page-main::-webkit-scrollbar-thumb {
    background: #4f9d50;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(116, 130, 139, 0.8);
    border-radius: 3px; }
  .reports-page-main::-webkit-scrollbar-thumb:hover {
    background: #478e48; }
  .reports-page-main::-webkit-scrollbar {
    width: 15px; }
  .reports-page-main::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    background: white; }
  .reports-page-main .reports-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    margin: 40px 35px 10px 35px; }
  .reports-page-main .reports-table-panel {
    display: none;
    position: absolute;
    margin: 25px 35px 30px 35px;
    padding: 0;
    background-color: #ffffff;
    box-shadow: 4px 4px 8px 2px rgba(210, 210, 210, 0.3); }
  .reports-page-main #reportsTablePanel table {
    margin: 16px;
    font-size: 13px;
    border-collapse: collapse;
    text-align: center; }
    .reports-page-main #reportsTablePanel table tr:first-child {
      border: 1px solid #f5f6fa;
      background-color: #f5f6fa;
      color: #a3a6b4; }
    .reports-page-main #reportsTablePanel table td {
      background-color: #ffffff;
      color: #4d4f5c;
      padding: 10px;
      border-radius: 2px;
      transition: all 0.15s linear;
      cursor: default; }
      .reports-page-main #reportsTablePanel table td:first-child {
        font-weight: bold; }
    .reports-page-main #reportsTablePanel table th {
      border-radius: 2px;
      padding: 10px;
      font-size: 12px;
      cursor: default; }
      .reports-page-main #reportsTablePanel table th.header-table-column {
        cursor: pointer;
        transition: all 0.15s linear;
        position: relative; }
        .reports-page-main #reportsTablePanel table th.header-table-column span {
          display: none;
          background-color: #43425d;
          color: #ffffff;
          position: absolute;
          top: 0px;
          font-size: 12px;
          line-height: 10px;
          right: 0px;
          padding: 0px 5px 1px 5px;
          border-radius: 2px;
          transition: background-color 0.15s linear; }
          .reports-page-main #reportsTablePanel table th.header-table-column span:hover {
            background-color: #615f86; }
  .reports-page-main #reportsTablePanel p {
    font-style: italic;
    font-weight: 600;
    color: #43425d; }
  .reports-page-main #reportsTablePanel .table-columns-show-btn {
    display: none;
    position: relative;
    right: 9px;
    cursor: pointer;
    color: #43425d;
    font-weight: bold;
    margin-top: 16px;
    transition: all 0.15s linear;
    height: 25px;
    padding: 0 6px;
    border-radius: 2px; }
    .reports-page-main #reportsTablePanel .table-columns-show-btn:hover {
      background-color: #f0f0f4;
      color: #15151e; }

.choose-stations-container {
  display: flex;
  flex-wrap: wrap;
  position: relative; }
  .choose-stations-container .algorithm-container {
    display: flex;
    padding: 2px; }
    .choose-stations-container .algorithm-container .custom-select {
      position: relative;
      width: 190px; }
      .choose-stations-container .algorithm-container .custom-select select {
        display: none; }
    .choose-stations-container .algorithm-container .select-selected {
      background-color: #43425d;
      border-radius: 5px;
      font-size: 15px;
      color: #ffffff;
      padding: 6px 16px 8px 16px;
      border: 1px solid transparent;
      border-color: transparent transparent rgba(255, 255, 255, 0.1) transparent;
      cursor: pointer;
      transition: background-color 0.15s ease-in;
      min-width: 156px; }
      .choose-stations-container .algorithm-container .select-selected:hover {
        background-color: #565577; }
      .choose-stations-container .algorithm-container .select-selected:after {
        position: absolute;
        content: "";
        top: 15px;
        right: 10px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #fff transparent transparent transparent; }
      .choose-stations-container .algorithm-container .select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 8px; }
    .choose-stations-container .algorithm-container .select-items {
      position: absolute;
      background-color: #4b4a68;
      top: 35px;
      left: 0;
      right: 0;
      z-index: 99;
      font-size: 14px;
      font-family: 'Source Sans Pro', sans-serif;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px; }
      .choose-stations-container .algorithm-container .select-items.select-hide {
        display: none; }
      .choose-stations-container .algorithm-container .select-items div {
        color: #ffffff;
        padding: 8px 16px;
        border: 1px solid transparent;
        border-color: transparent transparent rgba(255, 255, 255, 0.1) transparent;
        cursor: pointer; }
        .choose-stations-container .algorithm-container .select-items div:hover {
          background-color: rgba(255, 255, 255, 0.2);
          text-shadow: 1px 1px 0 #444; }
    .choose-stations-container .algorithm-container .same-as-selected {
      background-color: rgba(255, 255, 255, 0.1);
      border-left: 3px solid rgba(255, 255, 255, 0.75) !important;
      font-weight: 600;
      text-shadow: 1px 1px 0 #444; }
    .choose-stations-container .algorithm-container input[name="quantity"] {
      visibility: hidden;
      height: 33px;
      padding: 0 10px 0 15px;
      margin-left: 10px;
      width: 40px;
      color: #43425d;
      font-size: 14px;
      font-weight: 600;
      background-color: #ffffff;
      border: 1px solid #43425d;
      border-radius: 5px;
      outline: none;
      font-family: 'Source Sans Pro', sans-serif; }
      .choose-stations-container .algorithm-container input[name="quantity"]:focus {
        box-shadow: inset 1px 0px 2px rgba(67, 66, 93, 0.3), 1px 0px 5px rgba(67, 66, 93, 0.3); }
  .choose-stations-container .select-stations-container {
    display: flex;
    padding: 2px; }
    .choose-stations-container .select-stations-container img {
      position: relative;
      top: 10px;
      height: 16px;
      width: 12px; }
    .choose-stations-container .select-stations-container .select-choose-stations {
      position: relative;
      margin-left: 10px;
      width: 200px;
      font-size: 15px;
      font-family: 'Source Sans Pro', sans-serif;
      transition: background-color 0.15s ease-in; }
      .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-header {
        position: relative;
        top: 0px;
        left: -10px;
        height: 35px;
        width: 220px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.15s ease-in; }
        .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-header:hover {
          background-color: #565577; }
        .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-header span {
          position: relative;
          top: 7px;
          left: 15px; }
        .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-header i.arrow-down {
          font-size: 18px;
          position: absolute;
          right: 10px;
          top: 9px; }
          .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-header i.arrow-down.hide-arrow-down {
            display: none; }
        .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-header i.arrow-up {
          transform: rotate(180deg);
          font-size: 18px;
          position: absolute;
          right: 10px;
          top: 8px; }
          .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-header i.arrow-up.hide-arrow-up {
            display: none; }
      .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel {
        width: 220px;
        height: 170px;
        position: relative;
        left: -10px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #4b4a68;
        z-index: 4; }
        .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel.choose-stations-panel-hide {
          display: none; }
        .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls {
          height: 34px;
          border-top: 1px solid rgba(255, 255, 255, 0.1); }
          .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls i {
            position: relative;
            top: 7px;
            left: 10px;
            cursor: pointer;
            color: #f2f2f2; }
            .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls i.hide {
              display: none; }
          .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"] {
            font-family: 'Source Sans Pro', sans-serif, FontAwesome;
            outline: none;
            color: #43425d;
            width: 172px;
            font-weight: 600;
            text-shadow: 0px 0px 0 rgba(67, 66, 93, 0.3);
            border-radius: 5px;
            border: none;
            padding: 2px 1px 2px 5px;
            position: relative;
            top: 6px;
            left: 19px; }
            .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]:focus {
              box-shadow: inset 1px 0px 2px rgba(67, 66, 93, 0.5); }
            .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::-webkit-input-placeholder {
              /* Edge */
              color: #a4afb7;
              font-weight: 400;
              text-shadow: 0px 0px 0 rgba(67, 66, 93, 0); }
            .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]:-ms-input-placeholder {
              /* Internet Explorer 10-11 */
              color: #a4afb7;
              font-weight: 400;
              text-shadow: 0px 0px 0 rgba(67, 66, 93, 0); }
            .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::placeholder {
              color: #a4afb7;
              font-weight: 400;
              text-shadow: 0px 0px 0 rgba(67, 66, 93, 0); }
            .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::-webkit-search-cancel-button {
              position: relative;
              right: 1px;
              -webkit-appearance: none;
              height: 10px;
              width: 10px;
              border-radius: 5px;
              background-color: rgba(75, 74, 104, 0.5);
              cursor: pointer;
              transition: background-color 0.15s ease-in; }
              .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::-webkit-search-cancel-button:hover {
                background-color: rgba(75, 74, 104, 0.8); }
        .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body {
          position: relative;
          left: 0px;
          width: 219px;
          height: 130px;
          font-size: 14px;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          overflow-x: hidden;
          overflow-y: scroll;
          scrollbar-width: thin;
          scrollbar-color: #4b4a68 #f1f1f1;
          z-index: 5; }
          .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar-thumb {
            background: #7a79a0; }
          .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar-thumb:hover {
            background: #9897b5; }
          .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar {
            width: 7px; }
          .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
            background: transparent; }
          .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul {
            list-style: none;
            margin: 0;
            padding: 0; }
            .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li {
              height: 30px;
              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
              overflow: hidden;
              width: 320px;
              cursor: pointer; }
              .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li input[type="checkbox"] {
                display: none;
                position: relative;
                top: 5px;
                left: 7px;
                pointer-events: none;
                cursor: pointer; }
              .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li i {
                position: relative;
                top: 5px;
                left: 10px;
                pointer-events: none;
                cursor: pointer;
                color: #f2f2f2; }
                .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li i.hide {
                  display: none; }
              .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li span {
                position: relative;
                top: 5px;
                left: 17px; }
              .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li.active {
                background-color: rgba(255, 255, 255, 0.1);
                border-left: 3px solid rgba(255, 255, 255, 0.75) !important;
                font-weight: 600;
                text-shadow: 1px 1px 0 #444; }
                .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li.active input[type="checkbox"] {
                  left: 4px; }
                .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li.active i {
                  left: 7px;
                  text-shadow: none;
                  background-color: #4b4a68; }
                .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li.active span {
                  left: 14px; }
              .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li:hover {
                background-color: rgba(255, 255, 255, 0.2);
                text-shadow: 1px 1px 0 #444; }
                .choose-stations-container .select-stations-container .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li:hover i {
                  text-shadow: none; }
  .choose-stations-container .date-range-picker {
    height: 33px;
    width: 205px;
    padding: 0 6px;
    color: #43425d;
    font-weight: 600;
    text-shadow: 0px 0px 0 rgba(67, 66, 93, 0.3);
    background-color: #ffffff;
    border: 1px solid #43425d;
    border-radius: 5px;
    outline: none;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 2px; }
    .choose-stations-container .date-range-picker:focus {
      box-shadow: inset 1px 0px 2px rgba(67, 66, 93, 0.3), 1px 0px 5px rgba(67, 66, 93, 0.3); }

.choose-stations-btn {
  height: 35px;
  padding: 0 10px;
  background-color: #43425d;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  outline: none;
  font-family: 'Source Sans Pro', sans-serif; }

.show-data-btn {
  cursor: pointer;
  width: 94px;
  min-width: 90px;
  transition: background-color 0.15s ease-in;
  margin: 2px; }
  .show-data-btn:hover {
    background-color: #565577; }
  .show-data-btn:disabled {
    background-color: #6b6a95;
    cursor: not-allowed; }

div button.save-as-csv, div button.save-as-excel {
  display: none;
  height: 35px;
  width: 115px;
  min-width: 115px;
  padding: 0 2px;
  background-color: #43425d;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  outline: none;
  font-family: 'Source Sans Pro', sans-serif;
  cursor: pointer;
  transition: background-color 0.15s ease-in;
  margin: 2px; }
  div button.save-as-csv:hover, div button.save-as-excel:hover {
    background-color: #565577; }
  div button.save-as-csv img, div button.save-as-excel img {
    position: relative;
    top: 3px;
    margin-right: 5px; }
  div button.save-as-csv:disabled, div button.save-as-excel:disabled {
    background-color: #6b6a95;
    cursor: not-allowed; }

@media screen and (max-width: 1500px) {
  .reports-page-main .reports-page-header, .history-page-main .history-page-header {
    margin: 20px 15px 10px 15px; }
  .reports-page-main .reports-table-panel {
    margin: 15px 20px 20px 20px; }
  .history-page-main .history-graph-panel {
    margin: 35px 40px; }
    .history-page-main .history-graph-panel .history-graphicon {
      width: calc(100vw - 250px - 80px); }
      .short-left-main .history-page-main .history-graph-panel .history-graphicon {
        width: calc(100vw - 50px - 80px); } }

@media screen and (max-width: 900px) {
  .reports-page-main .reports-page-header, .history-page-main .history-page-header {
    margin: 12px; }
  .reports-page-main .reports-table-panel {
    margin: 10px 10px 15px 12px; }
  .history-page-main .history-graph-panel {
    margin: 25px 30px; }
    .short-left-main .history-page-main .history-graph-panel .history-graphicon {
      width: calc(100vw - 50px - 60px); } }

@media screen and (max-width: 823px) {
  .reports-page-main .reports-page-header, .history-page-main .history-page-header {
    margin: 10px; }
  .reports-page-main .reports-table-panel {
    margin: 5px 10px; }
  .history-page-main .history-graph-panel {
    margin: 15px 20px; }
    .short-left-main .history-page-main .history-graph-panel .history-graphicon {
      width: calc(100vw - 50px - 40px); } }

.drp-calendar, .drp-buttons, .calendar-time, .hourselect,
.minuteselect, .secondselect, .applyBtn, .cancelBtn {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600 !important;
  color: #43425d; }
  .drp-calendar *::selection, .drp-buttons *::selection, .calendar-time *::selection, .hourselect *::selection,
  .minuteselect *::selection, .secondselect *::selection, .applyBtn *::selection, .cancelBtn *::selection {
    background-color: #c4c3d5;
    color: #ffffff;
    text-shadow: 1px 1px 4px #1a1a1a; }

.applyBtn {
  height: 25px;
  width: 53px;
  background-color: #565577;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  transition: background-color 0.15s ease; }
  .applyBtn:hover {
    background-color: #6b6a95;
    text-shadow: 0px 0px 0 rgba(255, 255, 255, 0.5); }

.cancelBtn {
  height: 25px;
  width: 53px;
  background-color: #bfbfbf;
  color: #43425d;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease; }
  .cancelBtn:hover {
    background-color: #cccccc;
    border: 1px solid #999999;
    text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.5); }

.table-condensed .active {
  background-color: #6b6a95 !important;
  transition: background-color 0.15s ease; }
  .table-condensed .active:hover {
    background-color: #8888aa !important; }

.daterangepicker .ranges {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #43425d; }
  .daterangepicker .ranges li.active {
    background-color: #6b6a95 !important;
    transition: background-color 0.15s ease;
    border-left: 3px solid #8888aa;
    border-right: 1px solid #8888aa;
    text-shadow: 1px 1px 0 #444;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); }
    .daterangepicker .ranges li.active:hover {
      background-color: #8888aa !important; }

.caqi-page-main {
  display: none;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #f3f5f7;
  position: relative;
  top: 0;
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: initial;
  scrollbar-color: #4f9d50 #fafafa; }
  .caqi-page-main::-webkit-scrollbar-thumb {
    background: #4f9d50;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(116, 130, 139, 0.8);
    border-radius: 3px; }
  .caqi-page-main::-webkit-scrollbar-thumb:hover {
    background: #478e48; }
  .caqi-page-main::-webkit-scrollbar {
    width: 15px; }
  .caqi-page-main::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    background: white; }
  .caqi-page-main .caqi-page-header {
    position: relative;
    padding: 0 25px;
    height: 104px;
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .caqi-page-main .caqi-page-header .select-choose-stations {
      height: 35px;
      padding: 0 10px;
      background-color: #43425d;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      font-size: 15px;
      outline: none;
      font-family: 'Source Sans Pro', sans-serif;
      position: relative;
      margin-left: 15px;
      width: 190px;
      font-size: 15px;
      font-family: 'Source Sans Pro', sans-serif;
      transition: background-color 0.15s ease-in; }
      .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-header {
        position: relative;
        top: 0px;
        left: -10px;
        height: 35px;
        width: 210px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.15s ease-in; }
        .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-header:hover {
          background-color: #565577; }
        .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-header span {
          position: relative;
          top: 7px;
          left: 15px; }
        .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-header i.arrow-down {
          font-size: 18px;
          position: absolute;
          right: 10px;
          top: 9px; }
          .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-header i.arrow-down.hide-arrow-down {
            display: none; }
        .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-header i.arrow-up {
          transform: rotate(180deg);
          font-size: 18px;
          position: absolute;
          right: 10px;
          top: 8px; }
          .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-header i.arrow-up.hide-arrow-up {
            display: none; }
      .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel {
        width: 210px;
        height: 170px;
        position: relative;
        left: -10px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #4b4a68;
        z-index: 4; }
        .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel.choose-stations-panel-hide {
          display: none; }
        .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls {
          height: 34px;
          border-top: 1px solid rgba(255, 255, 255, 0.1); }
          .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"] {
            font-family: 'Source Sans Pro', sans-serif, FontAwesome;
            outline: none;
            color: #43425d;
            width: 180px;
            font-weight: 600;
            text-shadow: 0px 0px 0 rgba(67, 66, 93, 0.3);
            border-radius: 5px;
            border: none;
            padding: 2px 1px 2px 5px;
            position: relative;
            top: 6px;
            left: 14px; }
            .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]:focus {
              box-shadow: inset 1px 0px 2px rgba(67, 66, 93, 0.5); }
            .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::-webkit-input-placeholder {
              /* Edge */
              color: #a4afb7;
              font-weight: 400;
              text-shadow: 0px 0px 0 rgba(67, 66, 93, 0); }
            .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]:-ms-input-placeholder {
              /* Internet Explorer 10-11 */
              color: #a4afb7;
              font-weight: 400;
              text-shadow: 0px 0px 0 rgba(67, 66, 93, 0); }
            .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::placeholder {
              color: #a4afb7;
              font-weight: 400;
              text-shadow: 0px 0px 0 rgba(67, 66, 93, 0); }
            .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::-webkit-search-cancel-button {
              position: relative;
              right: 1px;
              -webkit-appearance: none;
              height: 10px;
              width: 10px;
              border-radius: 5px;
              background-color: rgba(75, 74, 104, 0.5);
              cursor: pointer;
              transition: background-color 0.15s ease-in; }
              .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::-webkit-search-cancel-button:hover {
                background-color: rgba(75, 74, 104, 0.8); }
        .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body {
          position: relative;
          left: 0px;
          width: 209px;
          height: 130px;
          font-size: 14px;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          overflow-x: hidden;
          overflow-y: scroll;
          scrollbar-width: thin;
          scrollbar-color: #4b4a68 #f1f1f1;
          z-index: 5; }
          .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar-thumb {
            background: #7a79a0; }
          .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar-thumb:hover {
            background: #9897b5; }
          .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar {
            width: 7px; }
          .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
            background: transparent; }
          .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul {
            list-style: none;
            margin: 0;
            padding: 0; }
            .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li {
              height: 30px;
              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
              overflow: hidden;
              width: 270px;
              cursor: pointer; }
              .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li span {
                position: relative;
                top: 5px;
                left: 17px; }
              .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li.active {
                background-color: rgba(255, 255, 255, 0.1);
                border-left: 3px solid rgba(255, 255, 255, 0.75) !important;
                font-weight: 600;
                text-shadow: 1px 1px 0 #444; }
                .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li.active span {
                  left: 14px; }
              .caqi-page-main .caqi-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li:hover {
                background-color: rgba(255, 255, 255, 0.2);
                text-shadow: 1px 1px 0 #444; }
    .caqi-page-main .caqi-page-header .date-range-picker {
      height: 33px;
      width: 205px;
      padding: 0 6px;
      color: #43425d;
      font-weight: 600;
      text-shadow: 0px 0px 0 rgba(67, 66, 93, 0.3);
      background-color: #ffffff;
      border: 1px solid #43425d;
      border-radius: 5px;
      margin-left: 15px;
      outline: none;
      font-family: 'Source Sans Pro', sans-serif; }
      .caqi-page-main .caqi-page-header .date-range-picker:focus {
        box-shadow: inset 1px 0px 2px rgba(67, 66, 93, 0.3), 1px 0px 5px rgba(67, 66, 93, 0.3); }
    .caqi-page-main .caqi-page-header .show-caqi-data-btn {
      height: 35px;
      padding: 0 10px;
      background-color: #43425d;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      font-size: 15px;
      outline: none;
      font-family: 'Source Sans Pro', sans-serif;
      margin-left: 15px;
      cursor: pointer;
      width: 94px;
      min-width: 90px;
      transition: background-color 0.15s ease-in; }
      .caqi-page-main .caqi-page-header .show-caqi-data-btn:hover {
        background-color: #565577; }
      .caqi-page-main .caqi-page-header .show-caqi-data-btn:disabled {
        background-color: #6b6a95;
        cursor: not-allowed; }


.opc-page-main {
    display: none;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #f3f5f7;
    position: relative;
    top: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: initial;
    scrollbar-color: #4f9d50 #fafafa;
}

    .opc-page-main::-webkit-scrollbar-thumb {
        background: #4f9d50;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(116, 130, 139, 0.8);
        border-radius: 3px;
    }

        .opc-page-main::-webkit-scrollbar-thumb:hover {
            background: #478e48;
        }

    .opc-page-main::-webkit-scrollbar {
        width: 15px;
    }

    .opc-page-main::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
        background: white;
    }

    .opc-page-main .opc-page-header {
        position: relative;
        padding: 0 25px;
        height: 104px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

        .opc-page-main .opc-page-header .select-choose-stations {
            height: 35px;
            padding: 0 10px;
            background-color: #43425d;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 15px;
            outline: none;
            font-family: 'Source Sans Pro', sans-serif;
            position: relative;
            margin-left: 15px;
            width: 190px;
            font-size: 15px;
            font-family: 'Source Sans Pro', sans-serif;
            transition: background-color 0.15s ease-in;
        }

            .opc-page-main .opc-page-header .select-choose-stations .choose-stations-header {
                position: relative;
                top: 0px;
                left: -10px;
                height: 35px;
                width: 210px;
                border-radius: 5px;
                cursor: pointer;
                transition: background-color 0.15s ease-in;
            }

                .opc-page-main .opc-page-header .select-choose-stations .choose-stations-header:hover {
                    background-color: #565577;
                }

                .opc-page-main .opc-page-header .select-choose-stations .choose-stations-header span {
                    position: relative;
                    top: 7px;
                    left: 15px;
                }

                .opc-page-main .opc-page-header .select-choose-stations .choose-stations-header i.arrow-down {
                    font-size: 18px;
                    position: absolute;
                    right: 10px;
                    top: 9px;
                }

                    .opc-page-main .opc-page-header .select-choose-stations .choose-stations-header i.arrow-down.hide-arrow-down {
                        display: none;
                    }

                .opc-page-main .opc-page-header .select-choose-stations .choose-stations-header i.arrow-up {
                    transform: rotate(180deg);
                    font-size: 18px;
                    position: absolute;
                    right: 10px;
                    top: 8px;
                }

                    .opc-page-main .opc-page-header .select-choose-stations .choose-stations-header i.arrow-up.hide-arrow-up {
                        display: none;
                    }

            .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel {
                width: 210px;
                height: 170px;
                position: relative;
                left: -10px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                background-color: #4b4a68;
                z-index: 4;
            }

                .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel.choose-stations-panel-hide {
                    display: none;
                }

                .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls {
                    height: 34px;
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                }

                    .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"] {
                        font-family: 'Source Sans Pro', sans-serif, FontAwesome;
                        outline: none;
                        color: #43425d;
                        width: 180px;
                        font-weight: 600;
                        text-shadow: 0px 0px 0 rgba(67, 66, 93, 0.3);
                        border-radius: 5px;
                        border: none;
                        padding: 2px 1px 2px 5px;
                        position: relative;
                        top: 6px;
                        left: 14px;
                    }

                        .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]:focus {
                            box-shadow: inset 1px 0px 2px rgba(67, 66, 93, 0.5);
                        }

                        .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::-webkit-input-placeholder {
                            /* Edge */
                            color: #a4afb7;
                            font-weight: 400;
                            text-shadow: 0px 0px 0 rgba(67, 66, 93, 0);
                        }

                        .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]:-ms-input-placeholder {
                            /* Internet Explorer 10-11 */
                            color: #a4afb7;
                            font-weight: 400;
                            text-shadow: 0px 0px 0 rgba(67, 66, 93, 0);
                        }

                        .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::placeholder {
                            color: #a4afb7;
                            font-weight: 400;
                            text-shadow: 0px 0px 0 rgba(67, 66, 93, 0);
                        }

                        .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::-webkit-search-cancel-button {
                            position: relative;
                            right: 1px;
                            -webkit-appearance: none;
                            height: 10px;
                            width: 10px;
                            border-radius: 5px;
                            background-color: rgba(75, 74, 104, 0.5);
                            cursor: pointer;
                            transition: background-color 0.15s ease-in;
                        }

                            .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-controls input[type="search"]::-webkit-search-cancel-button:hover {
                                background-color: rgba(75, 74, 104, 0.8);
                            }

                .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body {
                    position: relative;
                    left: 0px;
                    width: 209px;
                    height: 130px;
                    font-size: 14px;
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                    overflow-x: hidden;
                    overflow-y: scroll;
                    scrollbar-width: thin;
                    scrollbar-color: #4b4a68 #f1f1f1;
                    z-index: 5;
                }

                    .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar-thumb {
                        background: #7a79a0;
                    }

                        .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar-thumb:hover {
                            background: #9897b5;
                        }

                    .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar {
                        width: 7px;
                    }

                    .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body::-webkit-scrollbar-track {
                        -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
                        background: transparent;
                    }

                    .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul {
                        list-style: none;
                        margin: 0;
                        padding: 0;
                    }

                        .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li {
                            height: 30px;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                            overflow: hidden;
                            width: 270px;
                            cursor: pointer;
                        }

                            .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li span {
                                position: relative;
                                top: 5px;
                                left: 17px;
                            }

                            .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li.active {
                                background-color: rgba(255, 255, 255, 0.1);
                                border-left: 3px solid rgba(255, 255, 255, 0.75) !important;
                                font-weight: 600;
                                text-shadow: 1px 1px 0 #444;
                            }

                                .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li.active span {
                                    left: 14px;
                                }

                            .opc-page-main .opc-page-header .select-choose-stations .choose-stations-panel .choose-stations-panel-body ul li:hover {
                                background-color: rgba(255, 255, 255, 0.2);
                                text-shadow: 1px 1px 0 #444;
                            }

        .opc-page-main .opc-page-header .date-range-picker {
            height: 33px;
            width: 205px;
            padding: 0 6px;
            color: #43425d;
            font-weight: 600;
            text-shadow: 0px 0px 0 rgba(67, 66, 93, 0.3);
            background-color: #ffffff;
            border: 1px solid #43425d;
            border-radius: 5px;
            margin-left: 15px;
            outline: none;
            font-family: 'Source Sans Pro', sans-serif;
        }

            .opc-page-main .opc-page-header .date-range-picker:focus {
                box-shadow: inset 1px 0px 2px rgba(67, 66, 93, 0.3), 1px 0px 5px rgba(67, 66, 93, 0.3);
            }

        .opc-page-main .opc-page-header .show-opc-data-btn {
            height: 35px;
            padding: 0 10px;
            background-color: #43425d;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 15px;
            outline: none;
            font-family: 'Source Sans Pro', sans-serif;
            margin-left: 15px;
            cursor: pointer;
            width: 94px;
            min-width: 90px;
            transition: background-color 0.15s ease-in;
        }

            .opc-page-main .opc-page-header .show-opc-data-btn:hover {
                background-color: #565577;
            }

            .opc-page-main .opc-page-header .show-opc-data-btn:disabled {
                background-color: #6b6a95;
                cursor: not-allowed;
            }


        .opc-page-main .opc-page-header .show-opc-csv-btn {
            height: 35px;
            padding: 0 10px;
            background-color: #43425d;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 15px;
            outline: none;
            font-family: 'Source Sans Pro', sans-serif;
            margin-left: 15px;
            cursor: pointer;
            width: 115px;
            min-width: 115px;
            transition: background-color 0.15s ease-in;
        }

            .opc-page-main .opc-page-header .show-opc-csv-btn:hover {
                background-color: #565577;
            }

            .opc-page-main .opc-page-header .show-opc-csv-btn:disabled {
                background-color: #6b6a95;
                cursor: not-allowed;
            }


    .opc-page-main .opc-graph-panel {
        display: none;
        margin: 25px 35px 30px 35px;
    }


.caqi-page-main .caqi-graph-panel {
    display: none;
}
    .caqi-page-main .caqi-graph-panel .caqi-graph-title {
      position: relative;
      display: none; }
      .caqi-page-main .caqi-graph-panel .caqi-graph-title p {
        position: absolute;
        font-size: 17px;
        font-weight: 600;
        color: #43425d;
        z-index: 1;
        top: -10px;
        left: 50%;
        background-color: #fafafa;
        padding: 0 5px;
        transform: translate(-50%);
        font-family: 'Source Sans Pro', sans-serif; }
  .caqi-page-main .caqi-graph {
    display: none;
    position: relative;
    margin: 20px 0 20px 50px;
    width: calc(100vw - 250px - 100px);
    /*height: 250px;*/
    font-family: 'Source Sans Pro', sans-serif;
    box-shadow: 4px 4px 8px 2px rgba(210, 210, 210, 0.3); }
    .caqi-page-main .caqi-graph.short-navigation {
      width: calc(100vw - 50px - 100px); }
  .caqi-page-main .caqi-table-panel {
    display: none;
    position: relative; }
    .caqi-page-main .caqi-table-panel table {
      cursor: default;
      margin: 20px 40px;
      padding: 20px;
      text-align: center;
      box-shadow: 4px 4px 8px 2px rgba(210, 210, 210, 0.3);
      background-color: #fafafa;
      font-family: 'Source Sans Pro', sans-serif; }
      .caqi-page-main .caqi-table-panel table th {
        border-radius: 12px;
        border: 2px solid #fafafa; }
      .caqi-page-main .caqi-table-panel table td {
        border-radius: 12px;
        padding: 1px 30px;
        border: 2px solid #fafafa; }
    .caqi-page-main .caqi-table-panel p {
      font-style: italic;
      font-weight: 600;
      color: #4d4f5c;
      margin-left: 40px;
      width: 160px; }
  .caqi-page-main .head-switch {
    display: none; }
    .caqi-page-main .head-switch p {
      position: relative;
      top: 2px;
      display: none;
      color: #4d4f5c;
      margin: 0 0 0 45px;
      font-weight: 600; }
    .caqi-page-main .head-switch button {
      height: 25px;
      padding: 0 10px;
      border-radius: 5px;
      font-size: 14px;
      outline: none;
      font-family: 'Source Sans Pro', sans-serif;
      width: 94px;
      background-color: #ffffff;
      color: #4d4f5c;
      border: 1px solid #d3d6df;
      cursor: pointer;
      box-shadow: 0px 0px 5px 1px rgba(225, 228, 234, 0.8);
      transition: all 0.15s ease-in; }
      .caqi-page-main .head-switch button:hover {
        background-color: #fdfdfd;
        text-shadow: 0 0 1px #3e3c4f;
        box-shadow: inset 1px 1px 4px 1px rgba(9, 37, 95, 0.1); }
      .caqi-page-main .head-switch button.activeBtn {
        color: #3e3c4f;
        text-shadow: 0 0 1px #3e3c4f;
        background-color: #e6e6e6;
        pointer-events: none;
        box-shadow: inset 1px 1px 4px 1px rgba(9, 37, 95, 0.2); }
      .caqi-page-main .head-switch button#graphBtn {
        margin-left: 45px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0; }
      .caqi-page-main .head-switch button#tableBtn {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0; }
  .caqi-page-main .recommendations-wrapper {
    cursor: default;
    margin: 40px;
    background-color: #fafafa;
    box-shadow: 4px 4px 8px 2px rgba(210, 210, 210, 0.3);
    max-width: 1300px;
    padding: 20px 0 30px 0; }
    .caqi-page-main .recommendations-wrapper table#recommendationsTable {
      border-collapse: collapse;
      font-family: 'Source Sans Pro', sans-serif;
      color: #555555;
      margin: 0 40px; }
      .caqi-page-main .recommendations-wrapper table#recommendationsTable caption {
        font-weight: 600;
        margin-bottom: 10px; }
      .caqi-page-main .recommendations-wrapper table#recommendationsTable thead {
        border-bottom: 2px solid #959697; }
      .caqi-page-main .recommendations-wrapper table#recommendationsTable th {
        text-align: left;
        border: 1px solid #959697;
        padding: 8px;
        background-color: #ddd; }
        .caqi-page-main .recommendations-wrapper table#recommendationsTable th:first-child {
          width: 150px; }
      .caqi-page-main .recommendations-wrapper table#recommendationsTable td {
        border: 1px solid #959697;
        padding: 8px;
        font-size: 15px; }
        .caqi-page-main .recommendations-wrapper table#recommendationsTable td:first-child {
          color: #333333;
          font-size: 16px;
          text-shadow: 0 0 0 #999999; }
        .caqi-page-main .recommendations-wrapper table#recommendationsTable td.very-low-reommendations {
          background-color: #94ca88; }
        .caqi-page-main .recommendations-wrapper table#recommendationsTable td.low-reommendations {
          background-color: #d1de89; }
        .caqi-page-main .recommendations-wrapper table#recommendationsTable td.medium-reommendations {
          background-color: #f2cf3b; }
        .caqi-page-main .recommendations-wrapper table#recommendationsTable td.high-reommendations {
          background-color: #f5a935; }
        .caqi-page-main .recommendations-wrapper table#recommendationsTable td.very-high-reommendations {
          background-color: #ee668c; }

@media screen and (max-width: 868px) {
  .caqi-page-main .caqi-table-panel table {
    margin: 20px 0px;
    padding: 0px;
    font-size: 12px; }
    .caqi-page-main .caqi-table-panel table td {
      padding: 3px 25px;
      border: 1px solid #fafafa; }
  .caqi-page-main .recommendations-wrapper {
    margin: 20px;
    padding: 15px 0 20px 0; }
    .caqi-page-main .recommendations-wrapper table#recommendationsTable {
      margin: 0 20px; } }

@media screen and (max-width: 697px) {
  .caqi-page-main .recommendations-wrapper {
    margin: 0; }
    .caqi-page-main .recommendations-wrapper table#recommendationsTable {
      margin: 3px;
      font-size: 14px; }
      .caqi-page-main .recommendations-wrapper table#recommendationsTable td {
        padding: 5px; }
        .caqi-page-main .recommendations-wrapper table#recommendationsTable td:first-child {
          font-size: 14px; } }

@media screen and (max-width: 667px) {
  .caqi-page-main .caqi-page-header {
    padding: 0 25px 0 15px; }
  .caqi-page-main .caqi-table-panel table td {
    padding: 2px 16px; } }

@media screen and (max-width: 587px) {
  .caqi-page-main .recommendations-wrapper table#recommendationsTable {
    margin: 2px;
    font-size: 13px; }
    .caqi-page-main .recommendations-wrapper table#recommendationsTable td {
      padding: 3px; }
      .caqi-page-main .recommendations-wrapper table#recommendationsTable td:first-child {
        font-size: 13px; } }

@media screen and (max-width: 537px) {
  .caqi-page-main .caqi-page-header {
    padding: 0 15px 0 0; }
    .caqi-page-main .caqi-page-header .recommendations-wrapper table#recommendationsTable {
      font-size: 11px; }
      .caqi-page-main .caqi-page-header .recommendations-wrapper table#recommendationsTable td {
        font-size: 11px; }
        .caqi-page-main .caqi-page-header .recommendations-wrapper table#recommendationsTable td:first-child {
          font-size: 11px; } }

@media screen and (max-width: 537px) {
    .opc-page-main .opc-page-header {
        padding: 0 15px 0 0;
    }

        .opc-page-main .opc-page-header .recommendations-wrapper table#recommendationsTable {
            font-size: 11px;
        }

            .opc-page-main .opc-page-header .recommendations-wrapper table#recommendationsTable td {
                font-size: 11px;
            }

                .opc-page-main .opc-page-header .recommendations-wrapper table#recommendationsTable td:first-child {
                    font-size: 11px;
                }
}

@media screen and (max-width: 497px) {
  .caqi-page-main .recommendations-wrapper {
    display: none; } }


@media screen and (max-width: 375px) {
  .caqi-page-main .caqi-page-header .date-range-picker {
    height: 25px;
    width: 204px;
    padding: 0 3px; }
  .caqi-page-main .head-switch {
    margin-top: 5px; }
    .caqi-page-main .head-switch button {
      width: 80px; }
      .caqi-page-main .head-switch button#graphBtn {
        margin-left: 15px; }
  .caqi-page-main .caqi-table-panel table {
    margin: 15px 0px;
    font-size: 10px; }
    .caqi-page-main .caqi-table-panel table td {
      padding: 1px 5px;
      border: 0px solid #fafafa; } }


@media screen and (max-width: 320px) {
  .caqi-page-main .head-switch button#graphBtn,
  .caqi-page-main .head-switch p {
    margin-left: 15px; }
  .caqi-page-main .caqi-table-panel table {
    margin: 20px 0px;
    font-size: 9px; }
    .caqi-page-main .caqi-table-panel table td {
      padding: 1px 2px; } }

.widget-main {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  height: 100vh;
  width: 100vw;
  overflow: hidden; }
  .widget-main .widget-header {
    padding: 2vh 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .widget-main .widget-header div {
      color: #121421;
      line-height: 5px; }
      .widget-main .widget-header div p.main-caqi-widget-heading {
        font-size: 22px; }
      .widget-main .widget-header div p.caqi-widget-subheading {
        margin-left: 5vw;
        font-size: 16px; }
    .widget-main .widget-header button {
      height: 45px;
      width: 45px;
      cursor: pointer;
      background-color: #ffffff;
      outline: none;
      transition: all 0.1s ease;
      border: none; }
      .widget-main .widget-header button img.volume-off {
        position: relative;
        left: 1px; }
      .widget-main .widget-header button img.hide-widget-button-img {
        display: none; }
    .widget-main .widget-header.hide-widget-header {
      display: none; }
  .widget-main .caqi-widget-body {
    display: flex;
    color: #121421;
    margin: 1vh 0 3vh 10vw; }
    .widget-main .caqi-widget-body .caqi-widget-body-heading {
      display: none;
      padding: 0 2vw 2vh 1vw;
      font-weight: 600;
      border-bottom: 1px solid #121421;
      font-size: 15px; }
    .widget-main .caqi-widget-body .caqi-widget-body-place {
      display: none;
      margin-left: 3vw; }
      .widget-main .caqi-widget-body .caqi-widget-body-place img {
        position: relative;
        top: 1px; }
      .widget-main .caqi-widget-body .caqi-widget-body-place span {
        margin-left: 2px;
        font-size: 16px; }
  .widget-main .widget-graph {
    height: 50vh;
    width: 90vw;
    margin: 2vh 5vw; }
  .widget-main .caqi-legend-widget-wrapper {
    position: fixed;
    bottom: 0;
    width: 100vw;
    background-color: #eeeff6; }
    .widget-main .caqi-legend-widget-wrapper .caqi-legend-widget {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      margin: 2vh 10vw 1vh 10vw; }
      .widget-main .caqi-legend-widget-wrapper .caqi-legend-widget img {
        height: 30px;
        width: 30px; }
      .widget-main .caqi-legend-widget-wrapper .caqi-legend-widget span {
        position: relative;
        top: -11px;
        color: #43425d;
        text-shadow: 0 0 #43425d;
        font-size: 13px; }
  .widget-main *::selection {
    background-color: #a6a6a6;
    color: #ffffff;
    text-shadow: 1px 1px 4px #1a1a1a; }

@media screen and (max-width: 500px) {
  .widget-main .widget-header div p.main-caqi-widget-heading {
    font-size: 16px; }
  .widget-main .widget-header div p.caqi-widget-subheading {
    font-size: 12px; } }

.flip-box {
  background-color: transparent;
  perspective: 1000px;
  cursor: text; }

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d; }

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg); }

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.flip-box-back {
  transform: rotateY(180deg); }

.row {
    margin-right: -15px;
    margin-left: -15px;
}

    .row h1 {
        font-family: "Segoe UI","Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 500;
        line-height: 1.1;
        margin-top: 20px;
        margin-bottom: 10px;
    }

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

    .row:after {
        clear: both;
    }

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

    .row:after {
        clear: both;
    }

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

@media (min-width: 992px) {

    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11 {
        float: left;
    }

    .col-md-1 {
        width: 8.333333333333332%;
    }

    .col-md-2 {
        width: 16.666666666666664%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.33333333333333%;
    }

    .col-md-5 {
        width: 41.66666666666667%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-7 {
        width: 58.333333333333336%;
    }

    .col-md-8 {
        width: 66.66666666666666%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-10 {
        width: 83.33333333333334%;
    }

    .col-md-11 {
        width: 91.66666666666666%;
    }

    .col-md-12 {
        width: 100%;
    }
}

@media (min-width: 1200px) {

    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11 {
        float: left;
    }

    .col-lg-1 {
        width: 8.333333333333332%;
    }

    .col-lg-2 {
        width: 16.666666666666664%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-4 {
        width: 33.33333333333333%;
    }

    .col-lg-5 {
        width: 41.66666666666667%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-7 {
        width: 58.333333333333336%;
    }

    .col-lg-8 {
        width: 66.66666666666666%;
    }

    .col-lg-9 {
        width: 75%;
    }

    .col-lg-10 {
        width: 83.33333333333334%;
    }

    .col-lg-11 {
        width: 91.66666666666666%;
    }

    .col-lg-12 {
        width: 100%;
    }
}

.col-md-10 p {
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
}