html:root,html:root[theme-mode="light"] {
  --td-component-border: var(--td-gray-color-3);
}

html:root[theme-mode="dark"] {
  --td-component-border: var(--td-gray-color-11);
}

:root {
  --scrollbar-background: #f5f5f5;
  --scrollbar-thumb: #888;
}

[theme-mode='dark'] {
  --scrollbar-background: #333;
  --scrollbar-thumb: #aaa;
}

html {
  @apply overflow-hidden;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 6px;
  border: 3px solid var(--scrollbar-background);
}

.app-modal.t-dialog--default {
  padding: 0;
}

.app-modal .t-dialog__body {
  padding: 0;
}

.app-modal.app-modal-padding .t-dialog__body {
  padding: var(--td-comp-paddingTB-m);
}

.app-modal .t-dialog__header {
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingTB-l);
  @apply border-b border-component;
}

.app-modal .t-dialog__footer {
  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingTB-l);
  @apply border-t border-component;
}

.app-modal .t-dialog__body .t-upload__dragger {
  @apply w-full;
}

.t-form .t-input-number.t-is-controls-right, .t-form .t-date-picker {
  @apply w-full;
}

.t-input__extra, .t-input__help {
  @apply mt-2 text-sm;
}

.t-form .t-upload__flow {
  @apply w-full min-w-auto max-w-full;
}

.t-table__pagination {
  @apply px-0 pb-0;
}

.t-dropdown, .t-popup__content {
  @apply bg-white/70 dark:bg-black/30 backdrop-blur-md;
}

.app-code {
  @apply flex-grow rounded-lg p-2 bg-gray-12 text-white-1;
}

.app-mobile-header .t-button {
  @apply w-full;
}

.app-mobile-header .t-radio-group {
  @apply w-full;
}


.app-filter {
  @apply flex flex-col gap-4 md:flex-row flex-wrap;
}

.app-filter .t-form__label {
 @apply min-w-100px;
}

.app-filter .t-form__item {
  @apply m-0 min-w-50 p-0 mb-0;
}

.app-menu-drawer .t-drawer__body {
  @apply p-0;
}

.app-file-manage .t-upload .t-upload__trigger {
  @apply block;
}

.app-card-tabs > .t-card__body {
  @apply p-0;
}
.app-card-tabs > .t-card__body > .t-form > .t-tabs > .t-tabs__content {
  @apply px-6 py-6;
}

.app-card-tabs > .t-card__body > .t-form > .t-tabs {
  @apply bg-transparent;
}

.app-pagination {
  
}

.app-upload-file .t-upload__trigger{
  @apply block;
}

.page {
  position: absolute;
  left: 15px;
  right: 15px;
}

.page-enter {
  opacity: 0;
}

.page-enter-active {
  opacity: 1;
  transition: all 300ms ease-in;
}

.page-exit {
  opacity: 1;
}

.page-exit-active {
  opacity: 0;
  transition: all 300ms ease-in;
}