.sidebar {
  position: relative;
  z-index: 100;
  right: 20px;
  top: -20px;
  background-color: var(--ds-color-neutral-background-default);
  border: 1px solid var(--ds-color-neutral-border-subtle);
  box-shadow: 0px 0px 60px 10px rgba(0, 0, 0, 0.1);
  width: 420px;
  flex-basis: 410px;
  flex-grow: 1;
  border-radius: 8px;
  margin-top: -170px;
  height: calc(100vh - 200px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  & > div:first-child {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
}

@media screen and (max-height: 1080px) {
  .showSidebar {
    height: calc(100vh - 40px);
  }
}

.sticky {
  position: fixed;
  margin-top: 0;
  top: 20px;
}

.tabContent {
  flex: 1;
  min-height: 0;
}

.tabPanel {
  height: 100%;
  overflow-y: auto;
  padding: var(--ds-size-7);
}

.showSidebar {
  display: block !important;
  top: 12px;
  margin-top: 0;
  right: 12px;
  bottom: 12px;
  position: fixed;
}

.bottom {
  border-radius: 0 0 8px 8px;
  border-top: 1px solid var(--ds-color-neutral-border-subtle);
  background-color: var(--ds-color-neutral-background-default);
  flex-shrink: 0;

  & > div {
    padding: var(--ds-size-7);
  }
}

.appearance {
  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
  background-color: var(--ds-color-neutral-background-tinted);

  & h4 {
    margin-bottom: var(--ds-size-2);
  }
}

.toggle {
  position: fixed;
  top: 120px;
  right: 20px;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  border: 1px solid var(--ds-color-neutral-border-subtle);
  display: none;
  background-color: var(--ds-color-neutral-background-default);
  cursor: pointer;
  place-items: center;
  z-index: 1;
}

@media screen and (max-width: 1900px) {
  .sidebar {
    display: none;
  }
  .toggle {
    display: grid;
  }
  .toggleOpen {
    right: 440px;
  }
}

.modal {
  /* --dsc-dialog-spacing: var(--ds-size-2); */

  min-height: 90vh;
  flex-direction: column;

  & .modalBottom {
    margin-top: auto;
    padding: var(--ds-size-7);
  }

  & .tabsWrapper {
    display: flex;
    flex-direction: column;
    height: 80vh;
    padding: 0;
  }

  & .tabContent {
    overflow-x: none;
    overflow-y: none;
  }

  /* & .tabPanel {
    padding: var(--ds-size-4) 0;
  } */
}
