:root {
    --v-border-radius: 8px;
    --v-primary-base: #834cff;
    --v-anchor-base: #834cff;
    --v-error-base: #ef4444;
    --v-success-base: #16a34a;
    --v-secondary-base: #b0bec5;
    --v-info-base: #0369a1;
    --v-warning-base: #f97316;
    --v-background-base: #e3e3eb;
    --v-background-base-1: #fff;
    --v-background-fill: #f9f7ff;
    /* --v-background-fill: #181818; */
    --v-text-main: #222;
    --v-text-base: #333;
    --v-text-contrast: #fff;
    --v-icon-color: #fff;
    --v-container-width: 1200px;
}

.theme--dark {
    --v-background-base: #0a0a0a;
    --v-background-base-1: #131313;
    --v-background-base-2: #131313;
    --v-background-fill: #0f0f0f;
    /* --v-background-base: #0C1011;
    --v-background-base-1: #313536;
    --v-background-fill: #1E2122; */
    /* --v-background-fill: #181818; */
    --v-text-base: #ccc;
    --v-text-base-1: #bbb;
    --v-text-main: #ccc;
    --v-text-contrast: #fff;
    --v-icon-color: #fff;
}

@font-face {
    font-family: Jost;
    src: url('/fonts/jost.ttf')
}

html {
    overflow: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: var(--v-background-base) !important;
    color: var(--v-text-base) !important;
}

.v-application {
    color: var(--v-text-base) !important;
}

::-webkit-scrollbar {
    width: 0;
    /* Remove scrollbar space */
    background: transparent;
    /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

body,
html {
    font-family: Jost !important;
}

.v-data-table-header.v-data-table-header-mobile {
    display: none !important;
}

.v-application *:not([class*="icon"]),
*:not([class*="icon"]) {
    font-family: Jost !important;
}

.clickable {
    cursor: pointer !important;
}

.page-enter-active,
.page-leave-active {
    transition: opacity .2s;
}

.page-enter,
.page-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.15s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.progress {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 2px;
    width: 0%;
    transition: width 0.2s, opacity 0.4s;
    opacity: 1;
    background-color: var(--v-primary-base) !important;
    z-index: 999999;
}

.no-decoration {
    color: var(--v-text-base) !important;
}

.v-btn--has-bg,
.v-chip:not(.v-chip--active) {
    color: var(--v-text-contrast) !important;
    background-color: var(--v-primary-base) !important;
}

.error--text,
.red--text {
    color: var(--v-error-base) !important;
}

.success--text,
.green--text {
    color: var(--v-success-base) !important;
}

.secondary--text {
    color: var(--v-secondary-base) !important;
}

.info--text {
    color: var(--v-info-base) !important;
}

.warning--text {
    color: var(--v-warning-base) !important;
}

.error,
.red {
    background-color: var(--v-error-base) !important;
}

.success,
.green {
    background-color: var(--v-success-base) !important;
}

.secondary {
    background-color: var(--v-secondary-base) !important;
}

.info {
    background-color: var(--v-info-base) !important;
}

.no-decoration {
    text-decoration: none !important;
}

.warning {
    background-color: var(--v-warning-base) !important;
    border-color: var(--v-warning-base) !important;
}

.v-application .primary,
.primary {
    background-color: var(--v-primary-base) !important;
    border-color: var(--v-primary-base) !important;
    color: var(--v-text-contrast) !important;
}

.primary--text {
    color: var(--v-primary-base) !important;
}


.v-list--nav .v-list-item,
.v-list--nav .v-list-item::before,
.v-card,
.v-text-field--outlined,
.v-text-field--solo,
.v-btn:not(.v-btn--rounded):not(.v-btn--round),
.v-application .rounded,
/* [class*="rounded"]:not(.v-btn--rounded):not(.v-btn--round), */
.v-sheet.v-snack__wrapper,
.v-skeleton-loader,
.v-menu__content,
.v-tooltip,
.v-alert:not(.v-sheet--tile) {
    border-radius: var(--v-border-radius) !important;
}

.v-application,
/* .v-dialog__content.v-dialog__content--active, */
.v-toolbar.v-sheet,
.v-navigation-drawer,
.v-app-bar.v-toolbar.v-sheet,
.v-tabs>.v-tabs-bar,
.v-skeleton-loader .v-skeleton-loader__list-item-two-line {
    background: var(--v-background-base) !important;
}

.v-card,
.v-stepper,
.v-text-field--outlined>.v-input__control>.v-input__slot,
.v-card .v-toolbar.v-sheet,
.v-list.v-select-list {
    background: var(--v-background-base-1) !important;
}

/* .v-card,
.v-card .v-toolbar.v-sheet,
.v-list.v-select-list {
    --v-background-fill: var(--v-background-base-1);
} */

.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
    color: var(--v-text-base) !important;
}

.v-text-field--outlined fieldset {
    --v-border-color: transparent;
    border-color: var(--v-border-color);
}

.v-text-field--outlined.v-input--is-focused fieldset {
    --v-border-color: var(--v-primary-base);
}

.v-dialog--fullscreen .v-card {
    border-radius: 0 !important;
}

.v-sheet .v-text-field--outlined>.v-input__control>.v-input__slot,
.v-card .v-text-field--outlined>.v-input__control>.v-input__slot {
    background: var(--v-background-base) !important;
}

.v-menu__content .v-list {
    background: var(--v-background-base-1) !important;
}

.v-divider {
    border-color: var(--v-warning-base);
}

.c-bg-base {
    background: var(--v-background-base) !important;
}

.c-bg-base-1 {
    background: var(--v-background-base-1) !important;
}

.c-bg-base-2 {
    background: var(--v-background-base-2) !important;
}

.c-bg-fill {
    background: var(--v-background-fill) !important;
}

.c-bg-gradient {
    background: #030303 !important;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #030303, #121212) !important;
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(91.7deg, rgb(50, 25, 79) -4.3%, rgb(98, 66, 146) 101.8%) !important;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.second-toolbar .v-toolbar__content {
    background: var(--v-background-base-1);
}

.v-dialog--fullscreen .v-card>.container.container--fluid {
    padding-top: 40px;
    max-width: var(--v-container-width) !important;
}

.transparent {
    --v-background-base: transparent;
    --v-background-base-1: transparent;
}