#klchart{
  transition: height  1s;
  height: calc(100% - 130px);
}

#kltimebar{
  height: 130px;
  display: block;
}

.awesomeGloom {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0;
    margin: 0;
    font-size: 28px;
    z-index: 9001;
  }
  
  .awesomeGloom ul {
    list-style-type: none;
    margin-top:18px;
    margin-left:15px;
  }
  
  .awesomeGloom li {
    margin-bottom: 5px;
    text-align: center;
  }
  
  .awesomeGloom a i {
    text-decoration: none;
    cursor: pointer;
  }

  .awesomeGloomNav{
    color: #f0f4c3;
  }

  .awesomeGloomNav:hover{
    color: #d9e368;
  }

  .minimalist{
    position: absolute;
    font-size: 25px;
    right: 20px;
    top: 15px;
}

  #timeBar{
    color: black;
    cursor: pointer;
  }

  .timeBarZoom{
    position: absolute;
    font-size: 20px;
    left: 20px;
    top: 15px;
    width: 24px;
    border-right: 2px solid black;
    border-left: 2px solid black;
}

  #timeBarZoom{
    color: black;
    cursor: pointer;
  }

  .theme-descr{
    margin-top: 30px;
    display: block;
  }

  .form-inline{
    margin-bottom: 20px
  }
  .lightMonochrome{
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0;
    margin: 0;
    font-size: 28px;
    z-index: 9001;
  }

  .lightMonochrome ul {
    list-style-type: none;
    margin-top:18px;
    margin-left:15px;
  }
  
  .lightMonochrome li {
    margin-bottom: 5px;
    text-align: center;
  }
  
  .lightMonochrome a i {
    text-decoration: none;
    cursor: pointer;
  }

  .lightMonochromeNav{
    color: #cc3333;
  }

  .lightMonochromeNav:hover{
    color: #a65959;
  }
  .timeBarHidden #klchart {
    height: 100% !important;
  }

  .timeBarHidden #kltimebar {
    display: none;
  }