:root {
    --dtc-blocks-white: #fff;
    --dtc-blocks-black: #000;
    --colors-gray-300: var(--dtc-blocks-canvas-lightest);
    --colors-gray-400: var(--dtc-blocks-canvas-lighter);
    --colors-gray-500: var(--dtc-blocks-canvas-light);
    --colors-gray-600: var(--dtc-blocks-canvas);
    --colors-gray-700: var(--dtc-blocks-canvas-dark);
    --colors-gray-800: var(--dtc-blocks-canvas-darker);
    --colors-gray-900: var(--dtc-blocks-canvas-darkest);
    --colors-primary-50: var(--dtc-blocks-primary-color);
    --colors-primary-100: var(--dtc-blocks-primary-color);
    --colors-primary-200: var(--dtc-blocks-primary-color);
    --colors-primary-300: var(--dtc-blocks-primary-color);
    --colors-primary-400: var(--dtc-blocks-primary-color);
    --colors-primary-500: var(--dtc-blocks-primary-color);
    --colors-primary-600: var(--dtc-blocks-primary-color);
    --colors-primary-700: var(--dtc-blocks-primary-color);
    --colors-primary-800: var(--dtc-blocks-primary-color);
    --colors-primary-900: var(--dtc-blocks-primary-color)
}

body {
    background-color: var(--dtc-blocks-body-background-color) !important;
    color: var(--dtc-blocks-body-color) !important;
    font-family: var(--dtc-blocks-body-font-family) !important;
    font-size: var(--dtc-blocks-body-font-size);
    font-style: var(--dtc-blocks-body-font-style) !important;
    font-weight: var(--dtc-blocks-body-font-weight) !important;
    letter-spacing: var(--dtc-blocks-body-letter-spacing) !important;
    line-height: var(--dtc-blocks-body-line-height) !important;
    text-transform: var(--dtc-blocks-body-text-transform) !important
}

[class*=pk-custom-component-button], button[class*=pk-custom-component-default-button] {
    align-items: center;
    background-color: var(--dtc-blocks-button-primary-background-color) !important;
    background-image: var(--dtc-blocks-button-primary-icon-background-image);
    background-position: var(--dtc-blocks-button-primary-icon-background-position);
    background-repeat: no-repeat;
    background-size: var(--dtc-blocks-button-primary-icon-background-size) var(--dtc-blocks-button-primary-icon-background-size);
    border: var(--dtc-blocks-button-primary-border);
    border-radius: var(--dtc-blocks-button-border-radius);
    box-shadow: var(--dtc-blocks-button-primary-box-shadow);
    color: var(--dtc-blocks-button-primary-color) !important;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--dtc-blocks-button-font-family);
    font-size: var(--dtc-blocks-button-font-size);
    font-weight: var(--dtc-blocks-button-font-weight);
    height: auto !important;
    justify-content: var(--dtc-blocks-button-primary-justify-content);
    letter-spacing: var(--dtc-blocks-button-letter-spacing);
    line-height: var(--dtc-blocks-button-line-height);
    padding: var(--dtc-blocks-button-primary-padding-top) var(--dtc-blocks-button-primary-padding-right) var(--dtc-blocks-button-primary-padding-bottom) var(--dtc-blocks-button-primary-padding-left);
    position: relative;
    -webkit-text-decoration: var(--dtc-blocks-button-text-decoration);
    text-decoration: var(--dtc-blocks-button-text-decoration);
    text-transform: var(--dtc-blocks-button-text-transform);
    transition: var(--dtc-blocks-button-primary-transition)
}

[class*=pk-custom-component-button]:hover, button[class*=pk-custom-component-default-button]:hover {
    background-color: var(--dtc-blocks-button-primary-background-color-hover) !important;
    background-image: var(--dtc-blocks-button-primary-icon-background-image-hover);
    background-position: var(--dtc-blocks-button-primary-icon-background-position-hover);
    border: var(--dtc-blocks-button-primary-border-hover);
    color: var(--dtc-blocks-button-primary-color-hover) !important;
    -webkit-text-decoration: var(--dtc-blocks-button-text-decoration-hover);
    text-decoration: var(--dtc-blocks-button-text-decoration-hover)
}

[class*=border-gray-] {
    border-color: var(--dtc-blocks-input-border-color) !important;
    color: var(--dtc-blocks-body-color) !important
}

.checkbox, .checkbox:active, .checkbox:focus, .pk-custom-component-fake-checkbox {
    border-color: var(--dtc-blocks-input-border-color) !important;
    border-width: var(--dtc-blocks-input-border-width) !important;
    box-shadow: var(--dtc-blocks-input-box-shadow) !important
}

.checkbox:active:checked, .checkbox:checked, .checkbox:focus:checked, .pk-custom-component-fake-checkbox:checked {
    background-color: var(--dtc-blocks-vm-checkbox-background-active) !important;
    box-shadow: var(--dtc-blocks-vm-checkbox-box-shadow-active) !important
}

.form-input, .form-select, textarea {
    background-color: var(--dtc-blocks-input-background-color) !important;
    border-color: var(--dtc-blocks-input-border-color) !important;
    color: var(--dtc-blocks-input-color) !important
}

.form-input:active, .form-input:focus, .form-input:hover, .form-select:active, .form-select:focus, .form-select:hover, textarea:active, textarea:focus, textarea:hover {
    background-color: var(--dtc-blocks-input-background-color-hover) !important;
    border-color: var(--dtc-blocks-input-border-color-hover) !important
}

.form-input, .form-select {
    height: var(--dtc-blocks-input-height)
}

.pk-custom-component-select-control .form-select-arrow {
    display: none
}

.link-default {
    color: var(--colors-primary-500)
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dtc-blocks-input-border-color) !important
}

.sidebar-icon {
    color: var(--dtc-blocks-primary-color)
}

.modal [class*=bg-gray-] {
    background-color: var(--dtc-blocks-body-background-color) !important
}

.modal .pk-custom-component-card, header {
    background-color: var(--dtc-blocks-tile-background-color) !important
}

.group:hover [class*=group-hover] {
    background-color: var(--dtc-blocks-button-secondary-background-color) !important;
    color: var(--dtc-blocks-button-secondary-color) !important
}

.pk-custom-component-round-input {
    background-color: var(--dtc-blocks-input-background-color) !important
}

.pk-custom-component-round-input:hover {
    background-color: var(--dtc-blocks-input-background-color-hover) !important;
    border-color: var(--dtc-blocks-input-border-color-hover) !important
}

.pk-custom-component-card, .pk-custom-component-form-tabs {
    background-color: var(--dtc-blocks-tile-background-color) !important
}

.tab-card {
    background-color: inherit !important
}

.tab-card .tab-menu {
    border-color: var(--dtc-blocks-input-border-color) !important
}

.tab-card .tab-item, .tab-card .tab-menu {
    background-color: inherit !important;
    text-decoration: none
}

.tab-card .tab-item .active, .tab-card .tab-menu .active {
    border-bottom-color: var(--dtc-blocks-active-background-color) !important;
    color: var(--dtc-blocks-active-background-color) !important
}

.pk-custom-component-dropdown-menu {
    background-color: var(--dtc-blocks-body-background-color) !important
}

.pk-custom-component-form-key-value-header, .pk-custom-component-form-key-value-table, .pk-custom-component-resource-table-header {
    background-color: inherit !important
}

.pk-custom-component-main-menu button:hover, .pk-custom-component-menu-item:hover {
    background-color: var(--dtc-blocks-accent-background-color) !important;
    color: var(--dtc-blocks-accent-color) !important
}

svg[class*=text-primary] {
    color: var(--dtc-blocks-primary-color) !important
}

.v-popper--theme-tooltip .v-popper__wrapper .v-popper__inner {
    background-color: var(--dtc-blocks-toggle-background-color) !important;
    border: var(--dtc-blocks-toggle-border) !important;
    color: var(--dtc-blocks-toggle-color) !important
}