body, html {
    height: 100%;
    background: #F0EDEE;
  }

  .text-light {
    color: #F0EDEE;
  }

  .bg-primary, .btn-primary {
    background: #761350;
    border: none;
  }

  .header {
    height: 60px;
    background: #2C666E;
    color: #F0EDEE;
  }

  #content-wrapper {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 60px);
  }

  #sidebar {
    width: 300px;
    height: inherit;
    background: #07393C;
    color: #F0EDEE;
  }

  #content {
    flex: 1;
    height: inherit;
    overflow: auto;
  }

  .invert-svg {
    filter: invert(100%);
  }

  .content-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
  }

  .menu {
    list-style: none;
    padding: 10px;
  }

  .menu li a {
    display: block;
    padding: 10px 20px;
    border: 1px solid rgba(255,255,255,.1);
    margin: 5px 0;
    border-radius: 5px;
    color: #F0EDEEAA;
    text-decoration: none;
  }

  .menu li a.active, .menu li a:hover {
    background: rgba(0,0,0,.1);
    color: #F0EDEE;
  }

  @media (max-width: 768px) {
    #sidebar {
      display: none;
    }
    #sidebar.open {
      display: block;
      position: fixed;
      height: calc(100vh - 60px);
      right: 0;
      top: 60px;
      z-index: 999;
    }
  }

  .form-group {
        margin-bottom: 1rem;
    }

    #slider-range {
        width: 100%;
        margin: 1rem 0;
    }

    .nav-tabs .nav-tabs .nav-link {
        border: 0;
    }

    .nav-tabs .nav-link.active {
        border: 0;
        background: #eee;
    }

    .tab-content {
        background: #eee;
        padding: 20px;
        margin-top: -2px;
    }

    /*slider settings*/
    .ui-widget-header { background: #2C666E; }
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
        background: #38818b;
        border-color: #38818b;
    }