.sidebar {
    display: flex;
    position: fixed;
    top: 65px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 16;
  }
  
  @media (min-width: 992px) {
    .sidebar {
      margin-bottom: 3rem;
      margin-top: 1rem;
      position: relative;
      right: -175px;
      top: 0;
      transform: translateX(0);
      transition: right 0.3s ease-in-out;
      width: 25px;
      z-index: inherit;
    }
  }
  
  @media (min-width: 992px) {
    .sidebar.open {
      animation: widthClose 0.3s forwards;
    }
  }
  
  .sidebar.active {
    transform: translateX(0);
  }
  
  @media (min-width: 992px) {
    .sidebar.active {
      animation: widthOpen 0.3s forwards;
      right: 0;
    }
  }
  
  .sidebar-main {
    flex-shrink: 0;
    max-width: 320px;
    position: relative;
    width: 100vw;
  }
  
  @media (min-width: 992px) {
    .sidebar-main {
      max-width: inherit;
      width: 200px;
    }
  }
  
  @keyframes widthClose {
    from {
      width: 200px;
    }
  
    to {
      width: 25px;
    }
  }
  
  @keyframes widthOpen {
    from {
      width: 25px;
    }
  
    to {
      width: 200px;
    }
  }
  
  .sidebar-close {
    cursor: pointer;
    margin-bottom: 2rem;
  }
  
  .sidebar-wrapper {
    align-items: center;
    background-color: var(--primary-100);
    border-radius: 22px 0px 0px 22px;
    color: var(--white);
    height: 100%;
    padding: 35px 0 35px 12px;
    position: relative;
  }
  
  @media (min-width: 992px) {
    .sidebar-wrapper {
      display: flex;
      padding: 20px 0 20px 12px;
    }
  }
  
  .sidebar-wrapper::before {
    background-color: var(--primary-100);
    border-radius: 22px 0px 0px 22px;
    content: "";
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: visible;
    width: 100%;
  }
  
  .sidebar.active .sidebar-wrapper::before {
    opacity: 0;
    visibility: hidden;
  }
  
  @media (min-width: 992px) {
    .sidebar-button {
      align-items: center;
      background-color: var(--white);
      border-radius: 50%;
      box-shadow: 4px 4px 9px rgba(var(--black-rgb), 0.16);
      cursor: pointer;
      display: flex;
      height: 25px;
      justify-content: center;
      left: -15px;
      position: absolute;
      top: 20%;
      transform: translateY(-50%);
      width: 25px;
      z-index: 12;
    }
  
    .sidebar-button::before {
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='17' viewBox='0 0 12 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3563 1.01951C11.9199 1.65929 11.8638 2.63991 11.2311 3.20979L5.35789 8.5L11.2311 13.7902C11.8638 14.3601 11.9199 15.3407 11.3563 15.9805C10.7927 16.6203 9.82299 16.6769 9.1903 16.1071L0.744873 8.5L9.1903 0.892938C9.82299 0.323059 10.7927 0.379726 11.3563 1.01951Z' fill='%23824199'/%3E%3C/svg%3E%0A");
      content: "";
      height: 16px;
      width: 11px;
    }
  
    .sidebar.active .sidebar-button::before {
      position: relative;
      right: -2px;
      transform: rotate(-180deg);
    }
  }
  
  .sidebar a {
    color: var(--white);
  }
  
  .sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .sidebar ul li {
    margin-bottom: 5px;
    margin-top: 5px;
  }
  
  .sidebar ul li a {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    display: flex;
    padding: 10px 15px 10px 10px;
  }
  
  .sidebar ul li a:hover,
  .sidebar ul li.active a {
    background-color: var(--primary-400);
    color: var(--primary);
    font-weight: 500;
  }
  
  .sidebar-icon {
    margin-left: 10px;
    text-align: center;
    width: 31px;
  }
  
  .sidebar ul li a:hover img,
  .sidebar ul li.active a img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(38%) saturate(954%)
      hue-rotate(239deg) brightness(99%) contrast(95%);
  }
  
  .sidebar-footer {
    border-top: 1px solid var(--white);
    line-height: 1.1;
    padding-top: 15px;
  }
  
  .sidebar-shadow {
    background-color: rgba(var(--black-rgb), 0.7);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 14;
  }
  
  .sidebar-shadow.active {
    display: block;
  }
  
  @media (min-width: 992px) {
    .sidebar-shadow.active {
      display: none;
    }
  }

  
  
/* cstm css */
.cstm-sidebar .wrapper {
    flex-flow: row;
}

.cstm-sidebar .wrapper > .display-lg-flex {
    width: 100%;
    left: 0;
    right: 0;
    padding: 0 3rem;
    position: absolute;
}

.cstm-sidebar .wrapper .sidebar {
    margin-top: 100px;
    margin-left: 12px !important
}

.cstm-sidebar .wrapper .sidebar.active {
    right: -30px;
}

.cstm-sidebar .wrapper > .row {
    margin-top: 90px !important;
    width: 100%;
}

.cstm-sidebar .wrapper .row.mb-4 {
    justify-content: center;
}

.cstm-sidebar .wrapper .row.mb-4 .col-lg-2 {
    display: flex;
    gap: 5px;
}

.txt-bannner {
    text-align: right;
}


/*cstm*/
.sidebar-content {    
  height: 100%;
  padding: 35px 0 35px 12px;
  position: relative;
}