/* body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    } */

  .container {
      max-width: none
  }

  #navBar .container {
      justify-content: flex-start;
  }

  #button-bar {
      flex-direction: column;
      gap: 3px;
      display: flex;
  }
  #button-bar button:disabled {
    background-color: grey;
    border-color: grey;
  }

  #left-side {
      margin-right: 20px
  }

  #title-box {
      display: flex
  }

  #menu {
      display: none;
      position: absolute;
      width: 60px;
      background-color: white;
      box-shadow: 0 0 5px grey;
      border-radius: 3px;
  }

  #menu button {
      width: 100%;
      background-color: white;
      border: none;
      margin: 0;
      padding: 10px;
  }

  #menu button:hover {
      background-color: lightgray;
  }

  .ui-autocomplete {
      max-height: 500px;
      overflow-y: auto;
      /* prevent horizontal scrollbar */
      overflow-x: hidden;
  }

  .wrapper {
      display: block;
  }

  #sidebar {
      min-width: 250px;
      max-width: 250px;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      /* top layer */
      z-index: 9999;
  }

  .overlay {
      display: none;
      position: fixed;
      /* full screen */
      width: 100vw;
      height: 100vh;
      /* transparent black */
      background: rgba(0, 0, 0, 0.7);
      /* middle layer, i.e. appears below the sidebar */
      z-index: 998;
      opacity: 0;
      /* animate the transition */
      transition: all 0.5s ease-in-out;
  }

  /* display .overlay when it has the .active class */
  .overlay.active {
      display: block;
      opacity: 1;
  }

  #dismiss {
      width: 35px;
      height: 35px;
      position: absolute;
      /* top right corner of the sidebar */
      top: 10px;
      right: 10px;
  }

  /*
        DEMO STYLE
    */

  @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

  body {
      font-family: 'Poppins', sans-serif;
      background: #fafafa;
  }

  /* p {
        font-family: 'Poppins', sans-serif;
        font-size: 1.1em;
        font-weight: 300;
        line-height: 1.7em;
        color: #999;
    } */

  a,
  a:hover,
  a:focus {
      color: inherit;
      text-decoration: none;
      transition: all 0.3s;
  }

  .navbar {
      padding: 15px 10px;
      background: #fff;
      border: none;
      border-radius: 0;
      margin-bottom: 40px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  }

  .navbar-btn {
      box-shadow: none;
      outline: none !important;
      border: none;
  }

  .line {
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #ddd;
      margin: 40px 0;
  }

  /* ---------------------------------------------------
        SIDEBAR STYLE
    ----------------------------------------------------- */

  #sidebar {
      width: 250px;
      position: fixed;
      top: 0;
      left: -250px;
      height: 100vh;
      z-index: 999;
      background: #7386D5;
      color: #fff;
      transition: all 0.3s;
      /* overflow-y: scroll; */
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  }

  #sidebar.active {
      left: 0;
  }

  #dismiss {
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: #7386D5;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      -webkit-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
  }

  #dismiss:hover {
      background: #fff;
      color: #7386D5;
  }

  .overlay {
      display: none;
      position: fixed;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      z-index: 998;
      opacity: 0;
      transition: all 0.5s ease-in-out;
  }

  .overlay.active {
      display: block;
      opacity: 1;
  }

  #sidebar .sidebar-header {
      padding: 20px;
      background: #6d7fcc;
  }

  #sidebar ul.components {
      padding: 20px 0;
      /* border-bottom: 1px solid #47748b; */
  }

  #sidebar ul p {
      color: #fff;
      padding: 10px;
  }

  #sidebar ul li a {
      padding: 10px;
      font-size: 1.1em;
      display: block;
  }

  /* #sidebar div a{
        padding: 10px;
        font-size: 1.1em;
        display: block;
    } */

  #sidebar div {
      padding: 10px;
      font-size: 1.1em;
      display: block;
  }

  #sidebar ul li a:hover {
      color: #7386D5;
      background: #fff;
  }

  #sidebar ul li.active>a,
  a[aria-expanded="true"] {
      color: #fff;
      background: #6d7fcc;
  }

  a[data-toggle="collapse"] {
      position: relative;
  }

  .dropdown-toggle::after {
      display: block;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
  }

  ul ul a {
      font-size: 0.9em !important;
      padding-left: 30px !important;
      background: #6d7fcc;
  }

  ul.CTAs {
      padding: 20px;
  }

  ul.CTAs a {
      text-align: center;
      font-size: 0.9em !important;
      display: block;
      border-radius: 5px;
      margin-bottom: 5px;
  }

  a.download {
      background: #fff;
      color: #7386D5;
  }

  a.article,
  a.article:hover {
      background: #6d7fcc !important;
      color: #fff !important;
  }

  /* ---------------------------------------------------
        CONTENT STYLE
    ----------------------------------------------------- */

  #content {
      width: 100%;
      padding: 20px;
      min-height: 100vh;
      transition: all 0.3s;
      position: absolute;
      top: 0;
      right: 0;
  }


  /* slider */
  .slidecontainer {
      width: 100%;
      /* Width of the outside container */
  }

  /* The slider itself */
  .slider {
      -webkit-appearance: none;
      appearance: none;
      /* width: 100%; */
      height: 15px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
  }

  /* Mouse-over effects */
  .slider:hover {
      opacity: 1;
      /* Fully shown on mouse-over */
  }

  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #04AA6D;
      cursor: pointer;
  }


  .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #04AA6D;
      cursor: pointer;
  }



  /* ---------------------------------------------------
        Scrollbar STYLE
    ----------------------------------------------------- */


  /* width */
  ::-webkit-scrollbar {
      width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
      background: auto;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
      background: #555;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
      background: #555;
  }

  /* ---------------------------------------------------
        No Scrolling on Mobile STYLE
    ----------------------------------------------------- */

  @media screen and (max-width: 600px) {

      html,
      body {
          overflow-x: hidden;
          overflow-y: hidden;
      }

      body {
          position: relative;
      }
  }