:root {
    --color-primary: 30 64 175;
    --color-secondary: 226 232 240;
    --color-success: 132 204 22;
    --color-info: 6 182 212;
    --color-warning: 250 204 21;
    --color-pending: 249 115 22;
    --color-danger: 220 38 38;
    --color-light: 241 245 249;
    --color-dark: 30 41 59;
    --color-slate-50: 248 250 252;
    --color-slate-100: 241 245 249;
    --color-slate-200: 226 232 240;
    --color-slate-300: 203 213 225;
    --color-slate-400: 148 163 184;
    --color-slate-500: 100 116 139;
    --color-slate-600: 71 85 105;
    --color-slate-700: 51 65 85;
    --color-slate-800: 30 41 59;
    --color-slate-900: 15 23 42
}

.dark {
    --color-primary: 29 78 216;
    --color-slate-500: 148 163 184;
    --color-darkmode-50: 87 103 132;
    --color-darkmode-100: 74 90 121;
    --color-darkmode-200: 65 81 114;
    --color-darkmode-300: 53 69 103;
    --color-darkmode-400: 48 61 93;
    --color-darkmode-500: 41 53 82;
    --color-darkmode-600: 40 51 78;
    --color-darkmode-700: 35 45 69;
    --color-darkmode-800: 27 37 59;
    --color-darkmode-900: 15 23 42
}

.theme-1 {
    --color-primary: 6 78 59;
    --color-secondary: 226 232 240;
    --color-success: 5 150 105;
    --color-info: 6 182 212;
    --color-warning: 250 204 21;
    --color-pending: 245 158 11;
    --color-danger: 225 29 72;
    --color-light: 241 245 249;
    --color-dark: 30 41 59
}

.theme-1.dark {
    --color-primary: 6 95 70
}

.theme-2 {
    --color-primary: 30 58 138;
    --color-secondary: 226 232 240;
    --color-success: 13 148 136;
    --color-info: 6 182 212;
    --color-warning: 245 158 11;
    --color-pending: 249 115 22;
    --color-danger: 185 28 28;
    --color-light: 241 245 249;
    --color-dark: 30 41 59
}

.theme-2.dark {
    --color-primary: 30 64 175
}

.theme-3 {
    --color-primary: 22 78 99;
    --color-secondary: 226 232 240;
    --color-success: 13 148 136;
    --color-info: 6 182 212;
    --color-warning: 245 158 11;
    --color-pending: 217 119 6;
    --color-danger: 185 28 28;
    --color-light: 241 245 249;
    --color-dark: 30 41 59
}

.theme-3.dark {
    --color-primary: 21 94 117
}

.theme-4 {
    --color-primary: 49 46 129;
    --color-secondary: 226 232 240;
    --color-success: 5 150 105;
    --color-info: 6 182 212;
    --color-warning: 234 179 8;
    --color-pending: 234 88 12;
    --color-danger: 185 28 28;
    --color-light: 241 245 249;
    --color-dark: 30 41 59
}

.theme-4.dark {
    --color-primary: 67 56 202
}

*,::before,::after {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}
.btn-close {
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-800) / var(--tw-text-opacity));
}
.btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-weight: 500;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, fill, stroke,
    opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
    -webkit-backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.btn:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity));
  --tw-ring-opacity: 0.2;
}
.dark .btn {
  transition-property: none;
}
.dark .btn:focus {
  --tw-ring-color: rgb(var(--color-slate-700) / var(--tw-ring-opacity));
  --tw-ring-opacity: 0.5;
}
.btn:hover:not(:disabled) {
  --tw-border-opacity: 0.9;
  --tw-bg-opacity: 0.9;
}
.btn:not(button) {
  text-align: center;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.btn-sm {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
.btn-lg {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.btn-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
}
.btn-secondary {
  border-color: rgb(var(--color-secondary) / 0.7);
  background-color: rgb(var(--color-secondary) / 0.7);
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-500) / var(--tw-text-opacity));
}
.dark .btn-secondary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-darkmode-400) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-400) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.btn-secondary:hover:not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-slate-100) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}
.dark .btn-secondary:hover:not(:disabled) {
  border-color: rgb(var(--color-darkmode-300) / 0.8);
  background-color: rgb(var(--color-darkmode-300) / 0.8);
}
.btn-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-900) / var(--tw-text-opacity));
}
.dark .btn-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
}
.btn-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-900) / var(--tw-text-opacity));
}
.dark .btn-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
}
.btn-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-pending) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
}
.btn-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
}
.btn-dark {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-dark) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-dark) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-dark {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.dark .btn-dark:hover:not(:disabled) {
  background-color: rgb(var(--color-darkmode-800) / 0.7);
}
.btn-elevated-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-elevated-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
}
.btn-elevated-primary {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-elevated-secondary {
  border-color: rgb(var(--color-secondary) / 0.7);
  background-color: rgb(var(--color-secondary) / 0.7);
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-500) / var(--tw-text-opacity));
}
.dark .btn-elevated-secondary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-darkmode-400) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-400) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.btn-elevated-secondary:hover:not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-slate-100) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}
.dark .btn-elevated-secondary:hover:not(:disabled) {
  border-color: rgb(var(--color-darkmode-300) / 0.8);
  background-color: rgb(var(--color-darkmode-300) / 0.8);
}
.btn-elevated-secondary {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-elevated-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-900) / var(--tw-text-opacity));
}
.dark .btn-elevated-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
}
.btn-elevated-success {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-elevated-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-900) / var(--tw-text-opacity));
}
.dark .btn-elevated-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
}
.btn-elevated-warning {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-elevated-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-pending) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-elevated-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
}
.btn-elevated-pending {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-elevated-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-elevated-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
}
.btn-elevated-danger {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-elevated-dark {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-dark) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-dark) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-elevated-dark {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.dark .btn-elevated-dark:hover:not(:disabled) {
  background-color: rgb(var(--color-darkmode-800) / 0.7);
}
.btn-elevated-dark {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-rounded {
  border-radius: 9999px;
}
.btn-rounded-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-rounded-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
}
.btn-rounded-primary {
  border-radius: 9999px;
}
.btn-rounded-secondary {
  border-color: rgb(var(--color-secondary) / 0.7);
  background-color: rgb(var(--color-secondary) / 0.7);
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-500) / var(--tw-text-opacity));
}
.dark .btn-rounded-secondary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-darkmode-400) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-400) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.btn-rounded-secondary:hover:not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-slate-100) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}
.dark .btn-rounded-secondary:hover:not(:disabled) {
  border-color: rgb(var(--color-darkmode-300) / 0.8);
  background-color: rgb(var(--color-darkmode-300) / 0.8);
}
.btn-rounded-secondary {
  border-radius: 9999px;
}
.btn-rounded-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-900) / var(--tw-text-opacity));
}
.dark .btn-rounded-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
}
.btn-rounded-success {
  border-radius: 9999px;
}
.btn-rounded-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-900) / var(--tw-text-opacity));
}
.dark .btn-rounded-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
}
.btn-rounded-warning {
  border-radius: 9999px;
}
.btn-rounded-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-pending) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-rounded-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
}
.btn-rounded-pending {
  border-radius: 9999px;
}
.btn-rounded-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-rounded-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
}
.btn-rounded-danger {
  border-radius: 9999px;
}
.btn-rounded-dark {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-dark) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-dark) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-rounded-dark {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.dark .btn-rounded-dark:hover:not(:disabled) {
  background-color: rgb(var(--color-darkmode-800) / 0.7);
}
.btn-rounded-dark {
  border-radius: 9999px;
}
.btn-elevated-rounded-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-elevated-rounded-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
}
.btn-elevated-rounded-primary {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 9999px;
}
.btn-elevated-rounded-secondary {
  border-color: rgb(var(--color-secondary) / 0.7);
  background-color: rgb(var(--color-secondary) / 0.7);
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-500) / var(--tw-text-opacity));
}
.dark .btn-elevated-rounded-secondary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-darkmode-400) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-400) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.btn-elevated-rounded-secondary:hover:not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-slate-100) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}
.dark .btn-elevated-rounded-secondary:hover:not(:disabled) {
  border-color: rgb(var(--color-darkmode-300) / 0.8);
  background-color: rgb(var(--color-darkmode-300) / 0.8);
}
.btn-elevated-rounded-secondary {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 9999px;
}
.btn-elevated-rounded-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-900) / var(--tw-text-opacity));
}
.dark .btn-elevated-rounded-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
}
.btn-elevated-rounded-success {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 9999px;
}
.btn-elevated-rounded-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-900) / var(--tw-text-opacity));
}
.dark .btn-elevated-rounded-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
}
.btn-elevated-rounded-warning {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 9999px;
}
.btn-elevated-rounded-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-pending) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-elevated-rounded-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
}
.btn-elevated-rounded-pending {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 9999px;
}
.btn-elevated-rounded-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-elevated-rounded-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
}
.btn-elevated-rounded-danger {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 9999px;
}
.btn-elevated-rounded-dark {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-dark) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-dark) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-elevated-rounded-dark {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.dark .btn-elevated-rounded-dark:hover:not(:disabled) {
  background-color: rgb(var(--color-darkmode-800) / 0.7);
}
.btn-elevated-rounded-dark {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 9999px;
}
.btn-facebook {
  --tw-border-opacity: 1;
  border-color: rgb(59 89 152 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(59 89 152 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-facebook {
  --tw-border-opacity: 1;
  border-color: rgb(59 89 152 / var(--tw-border-opacity));
}
.btn-twitter {
  --tw-border-opacity: 1;
  border-color: rgb(74 179 244 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(74 179 244 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-twitter {
  --tw-border-opacity: 1;
  border-color: rgb(74 179 244 / var(--tw-border-opacity));
}
.btn-instagram {
  --tw-border-opacity: 1;
  border-color: rgb(81 127 164 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(81 127 164 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-instagram {
  --tw-border-opacity: 1;
  border-color: rgb(81 127 164 / var(--tw-border-opacity));
}
.btn-linkedin {
  --tw-border-opacity: 1;
  border-color: rgb(0 119 181 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(0 119 181 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .btn-linkedin {
  --tw-border-opacity: 1;
  border-color: rgb(0 119 181 / var(--tw-border-opacity));
}
.btn-outline-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}
.dark .btn-outline-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
}
.btn-outline-primary:hover:not(:disabled) {
  background-color: rgb(var(--color-primary) / 0.1);
}
.btn-outline-secondary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-secondary) / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-500) / var(--tw-text-opacity));
}
.dark .btn-outline-secondary {
  border-color: rgb(var(--color-darkmode-100) / 0.4);
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.btn-outline-secondary:hover:not(:disabled) {
  background-color: rgb(var(--color-secondary) / 0.2);
}
.dark .btn-outline-secondary:hover:not(:disabled) {
  background-color: rgb(var(--color-darkmode-100) / 0.1);
}
.btn-outline-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-success) / var(--tw-text-opacity));
}
.dark .btn-outline-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
}
.btn-outline-success:hover:not(:disabled) {
  background-color: rgb(var(--color-success) / 0.1);
}
.btn-outline-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning) / var(--tw-text-opacity));
}
.dark .btn-outline-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
}
.btn-outline-warning:hover:not(:disabled) {
  background-color: rgb(var(--color-warning) / 0.1);
}
.btn-outline-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-pending) / var(--tw-text-opacity));
}
.dark .btn-outline-pending {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
}
.btn-outline-pending:hover:not(:disabled) {
  background-color: rgb(var(--color-pending) / 0.1);
}
.btn-outline-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity));
}
.dark .btn-outline-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
}
.btn-outline-danger:hover:not(:disabled) {
  background-color: rgb(var(--color-danger) / 0.1);
}
.btn-outline-dark {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-dark) / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity));
}
.dark .btn-outline-dark {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-darkmode-800) / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.btn-outline-dark:hover:not(:disabled) {
  background-color: rgb(var(--color-darkmode-800) / 0.3);
}
.dark .btn-outline-dark:hover:not(:disabled) {
  --tw-bg-opacity: 0.3;
}
.btn-primary-soft {
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-border-opacity: 0.05;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}
.dark .btn-primary-soft {
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-border-opacity: 1;
  --tw-bg-opacity: 0.2;
}
.btn-primary-soft:hover:not(:disabled) {
  --tw-border-opacity: 0.1;
  --tw-bg-opacity: 0.1;
}
.dark .btn-primary-soft:hover:not(:disabled) {
  --tw-border-opacity: 0.6;
}
.btn-secondary-soft {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-secondary) / var(--tw-border-opacity));
  background-color: rgb(var(--color-slate-300) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-500) / var(--tw-text-opacity));
}
.dark .btn-secondary-soft {
  border-color: rgb(var(--color-darkmode-100) / 0.3);
  background-color: rgb(var(--color-darkmode-100) / 0.2);
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.btn-secondary-soft:hover:not(:disabled) {
  --tw-bg-opacity: 0.1;
}
.dark .btn-secondary-soft:hover:not(:disabled) {
  border-color: rgb(var(--color-darkmode-100) / 0.2);
  background-color: rgb(var(--color-darkmode-100) / 0.1);
}
.btn-success-soft {
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
  --tw-border-opacity: 0.05;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  --tw-text-opacity: 1;
  color: rgb(var(--color-success) / var(--tw-text-opacity));
}
.dark .btn-success-soft {
  border-color: rgb(var(--color-success) / var(--tw-border-opacity));
  --tw-border-opacity: 0.2;
}
.btn-success-soft:hover:not(:disabled) {
  --tw-border-opacity: 0.1;
  --tw-bg-opacity: 0.1;
}
.btn-warning-soft {
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
  --tw-border-opacity: 0.05;
  background-color: rgb(var(--color-warning) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning) / var(--tw-text-opacity));
}
.dark .btn-warning-soft {
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
  --tw-border-opacity: 0.2;
}
.btn-warning-soft:hover:not(:disabled) {
  --tw-border-opacity: 0.1;
  --tw-bg-opacity: 0.1;
}
.btn-pending-soft {
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
  --tw-border-opacity: 0.05;
  background-color: rgb(var(--color-pending) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  --tw-text-opacity: 1;
  color: rgb(var(--color-pending) / var(--tw-text-opacity));
}
.dark .btn-pending-soft {
  border-color: rgb(var(--color-pending) / var(--tw-border-opacity));
  --tw-border-opacity: 0.2;
}
.btn-pending-soft:hover:not(:disabled) {
  --tw-border-opacity: 0.1;
  --tw-bg-opacity: 0.1;
}
.btn-danger-soft {
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
  --tw-border-opacity: 0.05;
  background-color: rgb(var(--color-danger) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity));
}
.dark .btn-danger-soft {
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
  --tw-border-opacity: 0.2;
}
.btn-danger-soft:hover:not(:disabled) {
  --tw-border-opacity: 0.1;
  --tw-bg-opacity: 0.1;
}
.btn-dark-soft {
  border-color: rgb(var(--color-dark) / var(--tw-border-opacity));
  --tw-border-opacity: 0.05;
  background-color: rgb(var(--color-dark) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  --tw-text-opacity: 1;
  color: rgb(var(--color-dark) / var(--tw-text-opacity));
}
.dark .btn-dark-soft {
  border-color: rgb(var(--color-darkmode-800) / 0.6);
  background-color: rgb(var(--color-darkmode-800) / 0.3);
  --tw-text-opacity: 1;
  color: rgb(var(--color-slate-300) / var(--tw-text-opacity));
}
.btn-dark-soft:hover:not(:disabled) {
  --tw-border-opacity: 0.1;
  --tw-bg-opacity: 0.1;
}
.dark .btn-dark-soft:hover:not(:disabled) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-darkmode-800) / var(--tw-border-opacity));
  background-color: rgb(var(--color-darkmode-800) / 0.5);
}
.dropdown .dropdown-menu {
  transform: translate3d(-10000px, 0, 0) !important;
}
.dropdown-menu {
  z-index: 9999;
  inset: 0 auto auto 0;
  transition: visibility 0s ease-in-out 0.2s, opacity 0.2s 0s;
  visibility: hidden;
  position: absolute;
  opacity: 0;
}
.dropdown-menu.show {
  transition: visibility 0s ease-in-out 0s, opacity 0.2s 0s;
  visibility: visible;
  opacity: 1;
}
.dropdown-menu.show > .dropdown-content {
  margin-top: 0.25rem;
}
.dropdown-menu.show > .dropdown-content .tab-content .tab-pane {
  visibility: visible;
}
.dropdown-menu .dropdown-content {
  transition: margin-top 0.2s;
  box-shadow: 0px 3px 10px #00000017;
  position: relative;
  margin-top: 1.25rem;
  width: 100%;
  border-radius: 0.375rem;
  padding: 0.5rem;
}
.dropdown-menu .dropdown-content .dropdown-header {
  padding: 0.5rem;
  font-weight: 500;
}
.dropdown-menu .dropdown-content .dropdown-divider {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.dropdown-menu .dropdown-content .dropdown-item {
  display: flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.5rem;
  transition-property: color, background-color, border-color, fill, stroke,
    opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
    -webkit-backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-menu .dropdown-content .dropdown-footer {
  display: flex;
  padding: 0.25rem;
}
.dropdown-menu .dropdown-content .tab-content .tab-pane {
  visibility: hidden;
}
.dropdown-content {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .dropdown-content {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-600) / var(--tw-bg-opacity));
}
.dropdown-divider {
  border-color: rgb(var(--color-slate-200) / 0.6);
}
.dark .dropdown-divider {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-darkmode-400) / var(--tw-border-opacity));
}
.dropdown-item:hover {
  background-color: rgb(var(--color-slate-200) / 0.6);
}
.dark .dropdown-item {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-600) / var(--tw-bg-opacity));
}
.dark .dropdown-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-400) / var(--tw-bg-opacity));
}
.file .file__icon {
  position: relative;
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.file .file__icon.file__icon--empty-directory {
  background-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ xmlns:xlink=\'http://www.w3.org/1999/xlink\'\ width=\'786\'\ height=\'786\'\ viewBox=\'0\ 0\ 786\ 786\'%3E%3Cdefs%3E%3ClinearGradient\ id=\'linear-gradient\'\ x1=\'0.5\'\ x2=\'0.5\'\ y2=\'1\'\ gradientUnits=\'objectBoundingBox\'%3E%3Cstop\ offset=\'0\'\ stop-color=\'%238a97ac\'/%3E%3Cstop\ offset=\'1\'\ stop-color=\'%235d6c83\'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg\ id=\'Group_2\'\ data-name=\'Group\ 2\'\ transform=\'translate\(-567\ -93\)\'%3E%3Crect\ id=\'Rectangle_4\'\ data-name=\'Rectangle\ 4\'\ width=\'418\'\ height=\'681\'\ rx=\'40\'\ transform=\'translate\(896\ 109\)\'\ fill=\'%2395a5b9\'/%3E%3Crect\ id=\'Rectangle_3\'\ data-name=\'Rectangle\ 3\'\ width=\'433\'\ height=\'681\'\ rx=\'40\'\ transform=\'translate\(606\ 93\)\'\ fill=\'%23a0aec0\'/%3E%3Crect\ id=\'Rectangle_2\'\ data-name=\'Rectangle\ 2\'\ width=\'786\'\ height=\'721\'\ rx=\'40\'\ transform=\'translate\(567\ 158\)\'\ fill=\'url\(%23linear-gradient\)\'/%3E%3C/g%3E%3C/svg%3E%0A);
}
.file .file__icon.file__icon--directory {
  background-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ xmlns:xlink=\'http://www.w3.org/1999/xlink\'\ width=\'786\'\ height=\'786\'\ viewBox=\'0\ 0\ 786\ 786\'%3E%3Cdefs%3E%3ClinearGradient\ id=\'linear-gradient\'\ x1=\'0.5\'\ x2=\'0.5\'\ y2=\'1\'\ gradientUnits=\'objectBoundingBox\'%3E%3Cstop\ offset=\'0\'\ stop-color=\'%238a97ac\'/%3E%3Cstop\ offset=\'1\'\ stop-color=\'%235d6c83\'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg\ id=\'Group_3\'\ data-name=\'Group\ 3\'\ transform=\'translate\(-567\ -93\)\'%3E%3Crect\ id=\'Rectangle_4\'\ data-name=\'Rectangle\ 4\'\ width=\'418\'\ height=\'681\'\ rx=\'40\'\ transform=\'translate\(896\ 109\)\'\ fill=\'%2395a5b9\'/%3E%3Crect\ id=\'Rectangle_3\'\ data-name=\'Rectangle\ 3\'\ width=\'433\'\ height=\'681\'\ rx=\'40\'\ transform=\'translate\(606\ 93\)\'\ fill=\'%23a0aec0\'/%3E%3Crect\ id=\'Rectangle_2\'\ data-name=\'Rectangle\ 2\'\ width=\'742\'\ height=\'734\'\ rx=\'40\'\ transform=\'translate\(590\ 145\)\'\ fill=\'%23bec8d9\'/%3E%3Crect\ id=\'Rectangle_5\'\ data-name=\'Rectangle\ 5\'\ width=\'786\'\ height=\'692\'\ rx=\'40\'\ transform=\'translate\(567\ 187\)\'\ fill=\'url\(%23linear-gradient\)\'/%3E%3C/g%3E%3C/svg%3E%0A);
}
.file .file__icon.file__icon--file {
  background-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ xmlns:xlink=\'http://www.w3.org/1999/xlink\'\ width=\'628.027\'\ height=\'786.012\'\ viewBox=\'0\ 0\ 628.027\ 786.012\'%3E%3Cdefs%3E%3ClinearGradient\ id=\'linear-gradient\'\ x1=\'0.5\'\ x2=\'0.5\'\ y2=\'1\'\ gradientUnits=\'objectBoundingBox\'%3E%3Cstop\ offset=\'0\'\ stop-color=\'%238a97ac\'/%3E%3Cstop\ offset=\'1\'\ stop-color=\'%235d6c83\'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg\ id=\'Group_5\'\ data-name=\'Group\ 5\'\ transform=\'translate\(-646\ -92.988\)\'%3E%3Cpath\ id=\'Union_2\'\ data-name=\'Union\ 2\'\ d=\'M40,786A40,40,0,0,1,0,746V40A40,40,0,0,1,40,0H501V103h29v24h98V746a40,40,0,0,1-40,40Z\'\ transform=\'translate\(646\ 93\)\'\ fill=\'url\(%23linear-gradient\)\'/%3E%3Cpath\ id=\'Intersection_2\'\ data-name=\'Intersection\ 2\'\ d=\'M.409,162.042l.058-109.9c31.605,29.739,125.37,125.377,125.37,125.377l-109.976.049A20.025,20.025,0,0,1,.409,162.042Z\'\ transform=\'translate\(1147\ 42\)\'\ fill=\'%23bec8d9\'\ stroke=\'%23bec8d9\'\ stroke-width=\'1\'/%3E%3C/g%3E%3C/svg%3E%0A);
}
.file .file__icon.file__icon--image .file__icon--image__preview {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.file .file__icon.file__icon--image .file__icon--image__preview img {
  border-radius: 0.375rem;
}
.file .file__icon .file__icon__file-name {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.file .file__icon:before {
  content: "";
  padding-top: 100%;
  display: block;
  width: 100%;
}
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity));
}
.form-check {
  display: flex;
  align-items: center;
}
.form-check-label {
  margin-left: 0.5rem;
  cursor: pointer;
}
.form-check-input {
  transition-property: all;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.form-check-input[type="radio"] {
  cursor: pointer;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.form-check-input[type="radio"]:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity));
  --tw-ring-opacity: 0.2;
  --tw-ring-offset-width: 0;
}
.dark .form-check-input[type="radio"] {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity));
}
.dark .form-check-input[type="radio"]:focus {
  --tw-ring-color: rgb(var(--color-slate-700) / var(--tw-ring-opacity));
  --tw-ring-opacity: 0.5;
}
.form-check-input[type="radio"]:checked {
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-border-opacity: 0.1;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
}
.form-check-input[type="radio"]:disabled:not(:checked) {
  cursor: not-allowed;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}
.dark .form-check-input[type="radio"]:disabled:not(:checked) {
  background-color: rgb(var(--color-darkmode-800) / 0.5);
}
.form-check-input[type="radio"]:disabled:checked {
  cursor: not-allowed;
  opacity: 0.7;
}
.dark .form-check-input[type="radio"]:disabled:checked {
  background-color: rgb(var(--color-darkmode-800) / 0.5);
}
.form-check-input[type="checkbox"] {
  cursor: pointer;
  border-radius: 0.25rem;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.form-check-input[type="checkbox"]:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity));
  --tw-ring-opacity: 0.2;
  --tw-ring-offset-width: 0;
}
.dark .form-check-input[type="checkbox"] {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-800) / var(--tw-bg-opacity));
}
.dark .form-check-input[type="checkbox"]:focus {
  --tw-ring-color: rgb(var(--color-slate-700) / var(--tw-ring-opacity));
  --tw-ring-opacity: 0.5;
}
.form-check-input[type="checkbox"]:checked {
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-border-opacity: 0.1;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
}
.form-check-input[type="checkbox"]:disabled:not(:checked) {
  cursor: not-allowed;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity));
}
.dark .form-check-input[type="checkbox"]:disabled:not(:checked) {
  background-color: rgb(var(--color-darkmode-800) / 0.5);
}
.form-check-input[type="checkbox"]:disabled:checked {
  cursor: not-allowed;
  opacity: 0.7;
}
.dark .form-check-input[type="checkbox"]:disabled:checked {
  background-color: rgb(var(--color-darkmode-800) / 0.5);
}
.form-switch .form-check-input {
  width: 38px;
  height: 24px;
  padding: 1px;
  position: relative;
  border-radius: 9999px;
  background-image: none;
}
.form-switch .form-check-input:before {
  content: "";
  width: 20px;
  height: 20px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  transition-property: margin-left;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 9999px;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .form-switch .form-check-input:before {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-darkmode-600) / var(--tw-bg-opacity));
}
.form-switch .form-check-input:checked {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
}
.form-switch .form-check-input:checked::before {
  margin-left: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.table {
    width: 100%;
    text-align: left
}

.table thead.table-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-dark) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.dark .table thead.table-dark {
    background-color: rgb(0 0 0 / 0.3)
}

.table thead.table-dark tr th {
    border-bottom-width: 0
}

.table thead.table-light {
    background-color: rgb(var(--color-slate-200) / 0.6)
}

.dark .table thead.table-light {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-slate-200) / var(--tw-bg-opacity))
}

.table thead.table-light tr th {
    border-bottom-width: 0;
    --tw-text-opacity: 1;
    color: rgb(var(--color-slate-700) / var(--tw-text-opacity))
}

.table th {
    border-bottom-width: 2px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-weight: 500
}

.dark .table th {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-darkmode-300) / var(--tw-border-opacity))
}

.table td {
    border-bottom-width: 1px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem
}

.dark .table td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-darkmode-300) / var(--tw-border-opacity))
}

.table.table-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-dark) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.dark .table.table-dark {
    background-color: rgb(0 0 0 / 0.3)
}

.table.table-dark th {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-slate-600) / var(--tw-border-opacity))
}

.dark .table.table-dark th {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-darkmode-300) / var(--tw-border-opacity))
}

.table.table-dark td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-slate-600) / var(--tw-border-opacity))
}

.dark .table.table-dark td {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-darkmode-300) / var(--tw-border-opacity))
}

.table.table-bordered th,.table.table-bordered td {
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px
}

.table.table-hover tr:hover td {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity))
}

.dark .table.table-hover tr:hover td {
    background-color: rgb(var(--color-darkmode-300) / var(--tw-bg-opacity));
    --tw-bg-opacity: .5
}

.table.table-striped tr:nth-of-type(odd) td {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-slate-100) / var(--tw-bg-opacity))
}

.dark .table.table-striped tr:nth-of-type(odd) td {
    background-color: rgb(var(--color-darkmode-300) / var(--tw-bg-opacity));
    --tw-bg-opacity: .5
}

.table.table-sm th {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem
}

.table.table-sm td {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem
}