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

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

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

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

.tbq-theme-primary-color-bg {
    background: var(--ui-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-primary-color-bg-80 {
    background-color: var(--ui-color-alpha-80) !important;
}

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

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

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

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

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

.tbq-theme-primary-color-bg-20 {
    background-color: var(--ui-color-alpha-20) !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-color) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Border */
.tbq-theme-primary-border-color {
    border-color: var(--ui-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 {
    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:focus {
    box-shadow: 0 0 0 2px #ffffff, 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-primary-color) !important;
    border-color: var(--button-background-primary-color) !important;
}

.tbq-theme-outline-button:focus {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--button-background-primary-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: var(--button-background-color) !important;
    color: var(--button-text-color) !important;
}

.tbq-theme-info-topbar {
    color: var(--question-text-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-text-color) !important;
    box-shadow: 0 0 0 0.2rem var(--button-background-color) !important;
}

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

.tbq-theme-link-button:focus {
    background: transparent !important;
    box-shadow: unset !important;
}

/* Modal */
/* .p-dialog {
    width: 100% !important;
}

.p-dialog .p-dialog-header {
    padding: 2dvmin 2dvmin 0 2dvmin !important;
}

.p-dialog .p-dialog-header .p-dialog-title {
    font-size: 3.3333333333333335dvmin !important;
}

.p-dialog .p-dialog-header .p-dialog-header-icon {
    width: 4dvmin !important;
    height: 4dvmin !important;
}

.p-dialog .p-dialog-header .p-dialog-header-icon .p-icon {
    width: 2dvmin !important;
    height: 2dvmin !important;
}

.p-dialog .p-dialog-content {
    padding: 2dvmin !important;
}

.p-dialog .p-dialog-footer {
    padding: 0 2dvmin 2dvmin 2dvmin !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 {
    color: var(--button-text-primary-color) !important;
    background: var(--button-background-primary-color) !important;
    border: none !important;
}

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

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

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

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

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

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