.sidebar {
            background: #7386D5;
            color: #fff;
            transition: all 0.3s;
            position: sticky;
            top: 0;
            width: 100%;
        }
        
        .sidebar.active {
            margin-left: -250px;
        }
        
        .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;
            text-decoration: none;
            color: white;
        }
        
        .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;
        }
        
        .sidebar .dropdown-toggle::after {
            display: block;
            position: absolute;
            padding-bottom: 20px;
            right: 20px;
            transform: translateY(-50%);
        }
        
        ul ul a {
            font-size: 0.9em !important;
            padding-left: 30px !important;
            background: #6d7fcc;
        }
        
        ul ul ul a {
            font-size: 0.9em !important;
            padding-left: 50px !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;
        }
@media only screen and (max-width: 600px) {
          aside {
            position: fixed !important;
            width: 80% !important;
            min-width: none !important;
            max-width: none !important;
            top: 0 !important;
            left: 0;
            bottom: 0 !important;
            z-index: 2300 !important;
            background-color: white;
            height: 100vh !important;
          }
          .offcanvas-backdrop{
            display: block;
          }
          #OfcanvasHeader {
            display: flex;
          }
        }
  #sidebarCollapseLeft { position: absolute;margin-left: 230px;margin-top: 10px;z-index:999; }
  # {     width: 100px; }
  #dvwrapper { display: flex; }
  #sidebarleft { min-width: 250px;max-width: 250px;transition: all 0.3s; }
  #OfcanvasHeader { display:none;padding: 5px 5px;background-color: white; }
  #BUTTON { position: relative;left:218px; }
  #divDetailContents { height: fit-content; }    
  @media only screen and (max-width: 600px) {
  }
  @media only screen and (min-width: 601px) and (max-width: 768px)  {
  } 
  @media only screen and (min-width: 769px) and (max-width: 992px) {
  }