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

::-webkit-scrollbar-track {
    background: var(--background-color) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--button-background-color) !important;
    border-radius: 1rem;
}

a,
a:active {
    color: var(--button-background-color) !important;
}

/* Background */
.tbq-theme-background {
    background: var(--background-color) !important;
}

.tbq-theme-primary-color-bg {
    background: var(--ui-primary-color) !important;
}

.tbq-theme-secondary-color-bg {
    background: var(--ui-secondary-color) !important;
}

.tbq-theme-button-color-bg {
    background: var(--button-background-color) !important;
}

.tbq-theme-button-text-color-bg {
    background: var(--button-text-color) !important;
}

.tbq-theme-background-content {
    background: var(--content-background-color) !important;
}

/* Color */

/*from old system*/
.system-primary-text-color {
    color: var(--ui-primary-color) !important;
}

.tbq-theme-background-text-color {
    color: var(--background-color) !important;
}

.tbq-theme-primary-color {
    color: var(--ui-primary-color) !important;
}

.tbq-theme-secondary-color {
    color: var(--ui-secondary-color) !important;
}

.tbq-theme-text-color {
    color: var(--system-text-color) !important;
}

.tbq-theme-button-color {
    color: var(--button-background-color) !important;
}

.tbq-theme-button-text-color {
    color: var(--button-text-color) !important;
}

/* Fill */
.tbq-theme-primary-fill {
    fill: var(--ui-primary-color) !important;
}

.tbq-theme-secondary-fill {
    fill: var(--ui-secondary-color) !important;
}

.tbq-theme-text-fill {
    fill: var(--system-text-color) !important;
}

/* Box Shadow */
.tbq-theme-box-shadow {
    box-shadow: var(--text-shadow) !important;
}

/* Drop Shadow */
.tbq-theme-drop-shadow {
    filter: drop-shadow(var(--text-shadow)) !important;
}

/* Text Shadow */
.tbq-theme-text-shadow {
    text-shadow: var(--text-shadow) !important;
}

/* Border */
.tbq-theme-primary-border-color {
    border-color: var(--ui-primary-color) !important;
}

.tbq-theme-primary-border {
    border: 1px solid var(--ui-primary-color) !important;
}

.tbq-theme-button-border-color {
    border-color: var(--button-background-color) !important;
}

/* Bundle Set */
.tbq-theme-button:not(.p-button-outlined) {
    background: var(--button-background-color) !important;
    color: var(--button-text-color) !important;
    border: none !important;
}

.tbq-theme-button:hover {
    background: var(--button-background-color-hover) !important;
}

.tbq-theme-button:active {
    box-shadow: 0 0 0 2px var(--button-text-color), 0 0 0 4px var(--button-background-color), 0 1px 2px 0 black !important;
}

.tbq-theme-button:enabled:focus {
    box-shadow: 0 0 0 2px var(--button-text-color), 0 0 0 4px var(--button-background-color), 0 1px 2px 0 black !important;
}

.tbq-theme-button:disabled {
    cursor: not-allowed !important;
}

.tbq-theme-button-active {
    background: var(--button-background-color-hover) !important;
}

.tbq-theme-outline-button {
    background-color: transparent !important;
    color: var(--button-background-color) !important;
    border-color: var(--button-background-color) !important;
}

.tbq-theme-outline-button:focus {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--button-background-color), 0 1px 2px 0 black !important;
}

.tbq-theme-outline-button:disabled,
.tbq-theme-primary-outline-button:disabled {
    cursor: not-allowed !important;
}

.tbq-theme-button .p-button-label,
.tbq-theme-outline-button .p-button-label,
.tbq-theme-primary-outline-button .p-button-label {
    transition-duration: 0s !important;
}

.tbq-theme-topbar {
    background: #fff !important;
    color: var(--ui-primary-color) !important;
}

.tbq-theme-info-topbar {
    color: var(--ui-primary-color) !important;
}

.tbq-theme-radio.p-highlight {
    border-color: var(--button-background-color) !important;
    background: var(--button-background-color) !important;
}

.tbq-theme-radio .p-radiobutton-icon {
    background-color: var(--button-text-color) !important;
}

.tbq-theme-radio:hover {
    border-color: var(--button-background-color) !important;
}

.tbq-theme-radio.p-focus {
    box-shadow: 0 0 0 0.2rem var(--button-text-color) !important;
}

.tbq-theme-checkbox .p-checkbox-box.p-highlight {
    border-color: var(--button-background-color) !important;
    background: var(--button-background-color) !important;
}

.tbq-theme-checkbox .p-checkbox-box.p-highlight svg {
    color: var(--button-text-color) !important;
}

.tbq-theme-checkbox .p-checkbox-box:hover {
    border-color: var(--button-background-color) !important;
}

.tbq-theme-checkbox .p-checkbox-box.p-focus {
    border-color: var(--button-background-color) !important;
    box-shadow: 0 0 0 0.2rem var(--button-text-color) !important;
}

/* Primary theme */
.tbq-theme-primary-checkbox .p-checkbox-box.p-highlight {
    border-color: var(--button-background-primary-color) !important;
    background: var(--button-background-primary-color) !important;
}

.tbq-theme-primary-checkbox .p-checkbox-box.p-highlight svg {
    color: var(--button-text-primary-color) !important;
}

.tbq-theme-primary-checkbox .p-checkbox-box:hover {
    border-color: var(--button-background-primary-color) !important;
}

.tbq-theme-primary-checkbox .p-checkbox-box.p-focus {
    border-color: var(--button-text-primary-color) !important;
    box-shadow: 0 0 0 0.2rem var(--button-background-primary-color) !important;
}

.tbq-theme-primary-button {
    background: var(--button-background-color) !important;
    color: var(--button-text-color) !important;
    border: none !important;
}

.tbq-theme-primary-button:hover {
    background: var(--button-background-color-hover) !important;
}

.tbq-theme-primary-button:focus {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--button-background-color), 0 1px 2px 0 black !important;
}

.tbq-theme-primary-button:enabled:focus {
    box-shadow: 0 0 0 2px var(--button-text-color), 0 0 0 4px var(--button-background-color), 0 1px 2px 0 black !important;
}

.tbq-theme-primary-outline-button {
    background-color: transparent !important;
    color: var(--button-background-color) !important;
    border-color: var(--button-background-color) !important;
}

.tbq-theme-primary-outline-button:focus {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--button-background-color), 0 1px 2px 0 black !important;
}

/* NProgress */
#nprogress .bar {
    background: var(--button-background-color) !important;
}