.ts__table__container {
  .ts-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // min-height: 2.5rem;
    background-color: #fff;

    .right-section {
      display: flex;
      justify-content: center;
      // gap: 0.4rem;  // All icons gap
      .search-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end; //
        position: relative;
        margin-right: 0.1rem;

        .search-icon {
          cursor: pointer;
          // padding: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          // z-index: 2;
          margin-bottom: 1.2rem;
        }

        .search-input {
          width: 0;
          opacity: 0;
          margin-left: 8px;
          padding: 6px 8px;
          font-size: 0.875rem;
          border: 1px solid #ccc;
          border-radius: 4px;
          background-color: #f5f5f5;
          color: #000;
          transition: width 0.3s ease, opacity 0.3s ease;
          // position: absolute;
          // right: 40px;
          // top: 50%;
          // transform: translateY(-50%);

          &:focus {
            outline: none;
            border-color: #000;
          }
        }

        .search-input.expanded {
          width: 200px;
          opacity: 1;
        }
      }

      .ts--button {
        margin-right: 0.6rem;
        margin-top: 1rem;
        cursor: pointer;
      }

      .change-layout {
        margin-top: 0.99rem;
        cursor: pointer;
      }

      .sort {
        margin-top: 1rem;
      }

      // .add-new-button {
      //   margin-right: 0.9rem;
      //   margin-bottom: 0.5rem;
      //   border-radius: 2px;
      //   // padding: 4px 14px;
      //   background-color: #505050;
      //   cursor: pointer;
      // }

      .fullscreen-toggle {
        margin-right: 0.5rem;
        margin-top: 0.9rem;
      }

      .hide-column {
        margin-top: 0.9rem;
        position: relative;

        .ts-dropdown {
          .ts-dropdown-content {
            .toggle-all {
              cursor: pointer;
              width: inherit;
              background-color: #fff;
              padding: 0.25rem 1rem;
              border-radius: 0.25rem;
              border: 1px solid #dbdbdb;

              &:hover {
                box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
              }
            }

            .switches {
              margin-top: 1rem;
              display: flex;
              flex-direction: column;
              gap: 0.5rem;

              .ts-column-visible {
                display: flex;
                // align-items: center;
                gap: 0.5rem;

                .ts-column-visible-label {
                  font-size: 0.875rem;
                  font-weight: 500;
                }
              }
            }
          }
        }
      }
    }
  }
}

.MuiDrawer-root {
  display: block !important;
  transform: none !important;
}
