/* Primary Color */

:root {
	--color-sf-border: var(--tw-gray-300);

	--color-sf-primary: var(--tw-primary);
    --color-sf-primary-light: var(--tw-primary-dark-light);
    --color-sf-primary-lighter: var(--tw-brand-dark-light);
    --color-sf-primary-dark: var(--tw-primary-light-active);
    --color-sf-primary-darker: var(--tw-brand-light-active);

	--color-sf-primary-bg-color: var(--tw-primary);

	/* Buttons */

	--color-sf-primary-text-color: var(--tw-dark);
	--color-sf-primary-text-hover: var(--tw-dark);
	--color-sf-primary-text-pressed: var(--tw-dark);
	--color-sf-primary-text-focus: var(--tw-dark);
	--color-sf-primary-bg-color: var(--tw-primary-light);
    --color-sf-primary-border-color: var(--tw-primary-light);
	--color-sf-primary-bg-color-hover: var(--tw-primary);
    --color-sf-primary-border-color-hover: var(--tw-primary);
	--color-sf-primary-bg-color-pressed: var(--tw-primary-active);
    --color-sf-primary-border-color-pressed: var(--tw-primary-active);
    --color-sf-primary-bg-color-focus: var(--tw-primary-light);
    --color-sf-primary-border-color-focus: var(--tw-primary);
    --color-sf-primary-bg-color-disabled: var(--tw-primary-clarity);
    --color-sf-primary-border-color-disabled: var(--tw-primary-clarity);

	--color-sf-success-text: var(--tw-dark);
	--color-sf-success-text-hover: var(--tw-dark);
	--color-sf-success-text-pressed: var(--tw-dark);
	--color-sf-success-text-focus: var(--tw-dark);
	--color-sf-success-bg-color: var(--tw-success-light);
	--color-sf-success-border-color: var(--tw-success-light);
	--color-sf-success-bg-color-hover: var(--tw-success);
	--color-sf-success-border-color-hover: var(--tw-success);
	--color-sf-success-bg-color-pressed: var(--tw-success-active);
    --color-sf-success-border-color-pressed: var(--tw-success-active);
    --color-sf-success-bg-color-focus: var(--tw-success-light);
    --color-sf-success-border-color-focus: var(--tw-success);
    --color-sf-success-bg-color-disabled: var(--tw-success-clarity);
    --color-sf-success-border-color-disabled: var(--tw-success-clarity);

	--color-sf-info-text: var(--tw-dark);
	--color-sf-info-text-hover: var(--tw-dark);
	--color-sf-info-text-pressed: var(--tw-dark);
    --color-sf-info-text-focus: var(--tw-dark);
	--color-sf-info-bg-color: var(--tw-info-light);
    --color-sf-info-border-color: var(--tw-info-light);
	--color-sf-info-bg-color-hover: var(--tw-info);
    --color-sf-info-border-color-hover: var(--tw-info);
	--color-sf-info-bg-color-pressed: var(--tw-info-active);
    --color-sf-info-border-color-pressed: var(--tw-info-active);
    --color-sf-info-bg-color-focus: var(--tw-info-light);
    --color-sf-info-border-color-focus: var(--tw-info);
    --color-sf-info-bg-color-disabled: var(--tw-info-clarity);
    --color-sf-info-border-color-disabled: var(--tw-info-clarity);

	--color-sf-warning-text: var(--tw-dark);
	--color-sf-warning-text-hover: var(--tw-dark);
	--color-sf-warning-text-pressed: var(--tw-dark);
    --color-sf-warning-text-focus: var(--tw-dark);
	--color-sf-warning-bg-color: var(--tw-warning-light);
    --color-sf-warning-border-color: var(--tw-warning-light);
	--color-sf-warning-bg-color-hover: var(--tw-warning);
    --color-sf-warning-border-color-hover: var(--tw-warning);
	--color-sf-warning-bg-color-pressed: var(--tw-warning-active);
    --color-sf-warning-border-color-pressed: var(--tw-warning-active);
    --color-sf-warning-bg-color-focus: var(--tw-warning-light);
    --color-sf-warning-border-color-focus: var(--tw-warning);
    --color-sf-warning-bg-color-disabled: var(--tw-warning-clarity);
    --color-sf-warning-border-color-disabled: var(--tw-warning-clarity);

	--color-sf-danger-text: var(--tw-dark);
	--color-sf-danger-text-hover: var(--tw-dark);
	--color-sf-danger-text-pressed: var(--tw-dark);
    --color-sf-danger-text-focus: var(--tw-dark);
	--color-sf-danger-bg-color: var(--tw-danger-light);
    --color-sf-danger-border-color: var(--tw-danger-light);
	--color-sf-danger-bg-color-hover: var(--tw-danger);
    --color-sf-danger-border-color-hover: var(--tw-danger);
	--color-sf-danger-bg-color-pressed: var(--tw-danger-active);
    --color-sf-danger-border-color-pressed: var(--tw-danger-active);
    --color-sf-danger-bg-color-focus: var(--tw-danger-light);
    --color-sf-danger-border-color-focus: var(--tw-danger);
    --color-sf-danger-bg-color-disabled: var(--tw-danger-clarity);
    --color-sf-danger-border-color-disabled: var(--tw-danger-clarity);
}

/* Buttons */

.e-btn, .e-css.e-btn {
	border-radius: 20px;
	padding: 6.45px 12px;
}

/* Dark Mode */

:root.e-dark-mode {

	--color-sf-transparent: rgba(255, 255, 255, .0);

	--color-sf-border-light: var(--tw-gray-300);

	--color-sf-content-bg-color: var(--tw-coal-300);
	--color-sf-content-bg-color-hover: var(--tw-gray-200);
	--color-sf-content-bg-color-alt1: var(--tw-coal-200);

	--color-sf-table-bg-color-selected: var(--tw-coal-100);
	--color-sf-table-bg-color-hover: var(--tw-coal-200);

	--color-sf-flyout-bg-color: var(--tw-coal-300);
	--color-sf-flyout-bg-color-hover: var(--tw-coal-200);
	--color-sf-flyout-bg-color-selected: var(--tw-coal-100);

	/* Buttons - Dark Mode */

	--color-sf-primary-text-color: var(--tw-dark);
	--color-sf-primary-text-hover: var(--tw-dark);
	--color-sf-primary-text-pressed: var(--tw-dark);
	--color-sf-primary-text-focus: var(--tw-dark);
	--color-sf-primary-bg-color: var(--tw-primary-active);
    --color-sf-primary-border-color: var(--tw-primary-active);
	--color-sf-primary-bg-color-hover: var(--tw-primary-active-light);
    --color-sf-primary-border-color-hover: var(--tw-primary-active-light);
	--color-sf-primary-bg-color-pressed: var(--tw-primary-light);
    --color-sf-primary-border-color-pressed: var(--tw-primary-light);
    --color-sf-primary-bg-color-focus: var(--tw-primary-light);
    --color-sf-primary-border-color-focus: var(--tw-primary);
    --color-sf-primary-bg-color-disabled: var(--tw-primary-clarity);
    --color-sf-primary-border-color-disabled: var(--tw-primary-clarity);

	--color-sf-success-text: var(--tw-dark);
	--color-sf-success-text-hover: var(--tw-dark);
	--color-sf-success-text-pressed: var(--tw-dark);
	--color-sf-success-text-focus: var(--tw-dark);
	--color-sf-success-bg-color: var(--tw-success-active);
	--color-sf-success-border-color: var(--tw-success-active);
	--color-sf-success-bg-color-hover: var(--tw-success);
	--color-sf-success-border-color-hover: var(--tw-success);
	--color-sf-success-bg-color-pressed: var(--tw-success-light);
    --color-sf-success-border-color-pressed: var(--tw-success-light);
    --color-sf-success-bg-color-focus: var(--tw-success);
    --color-sf-success-border-color-focus: var(--tw-success-active);
    --color-sf-success-bg-color-disabled: var(--tw-success-clarity);
    --color-sf-success-border-color-disabled: var(--tw-success-clarity);

	--color-sf-info-text: var(--tw-dark);
	--color-sf-info-text-hover: var(--tw-dark);
	--color-sf-info-text-pressed: var(--tw-dark);
    --color-sf-info-text-focus: var(--tw-dark);
	--color-sf-info-bg-color: var(--tw-info-active);
    --color-sf-info-border-color: var(--tw-info-active);
	--color-sf-info-bg-color-hover: var(--tw-info);
    --color-sf-info-border-color-hover: var(--tw-info);
	--color-sf-info-bg-color-pressed: var(--tw-info-light);
    --color-sf-info-border-color-pressed: var(--tw-info-light);
    --color-sf-info-bg-color-focus: var(--tw-info);
    --color-sf-info-border-color-focus: var(--tw-info-active);
    --color-sf-info-bg-color-disabled: var(--tw-info-clarity);
    --color-sf-info-border-color-disabled: var(--tw-info-clarity);

	--color-sf-warning-text: var(--tw-dark);
	--color-sf-warning-text-hover: var(--tw-dark);
	--color-sf-warning-text-pressed: var(--tw-dark);
    --color-sf-warning-text-focus: var(--tw-dark);
	--color-sf-warning-bg-color: var(--tw-warning-active);
    --color-sf-warning-border-color: var(--tw-warning-active);
	--color-sf-warning-bg-color-hover: var(--tw-warning);
    --color-sf-warning-border-color-hover: var(--tw-warning);
	--color-sf-warning-bg-color-pressed: var(--tw-warning-light);
    --color-sf-warning-border-color-pressed: var(--tw-warning-light);
    --color-sf-warning-bg-color-focus: var(--tw-warning);
    --color-sf-warning-border-color-focus: var(--tw-warning-active);
    --color-sf-warning-bg-color-disabled: var(--tw-warning-clarity);
    --color-sf-warning-border-color-disabled: var(--tw-warning-clarity);

	--color-sf-danger-text: var(--tw-dark);
	--color-sf-danger-text-hover: var(--tw-dark);
	--color-sf-danger-text-pressed: var(--tw-dark);
    --color-sf-danger-text-focus: var(--tw-dark);
	--color-sf-danger-bg-color: var(--tw-danger-active);
    --color-sf-danger-border-color: var(--tw-danger-active);
	--color-sf-danger-bg-color-hover: var(--tw-danger);
    --color-sf-danger-border-color-hover: var(--tw-danger);
	--color-sf-danger-bg-color-pressed: var(--tw-danger-light);
    --color-sf-danger-border-color-pressed: var(--tw-danger-light);
    --color-sf-danger-bg-color-focus: var(--tw-danger);
    --color-sf-danger-border-color-focus: var(--tw-danger-active);
    --color-sf-danger-bg-color-disabled: var(--tw-danger-clarity);
    --color-sf-danger-border-color-disabled: var(--tw-danger-clarity);
}

/* Tab Header */

.e-tab .e-tab-header .e-indicator {
	background-color: var(--tw-primary);
}

.e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap {
	background-color: var(--tw-secondary-light);
}

.e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover .e-tab-wrap {
	background-color: var(--tw-page-bg);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
	background-color: var(--tw-page-bg);
}

.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text {
	color: var(--tw-gray-900);
}

.e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-wrap:hover .e-tab-text {
	color: var(--tw-gray-900);
}

/* Tab Header - Dark Mode */

.e-dark-mode .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap {
	background-color: var(--tw-secondary-clarity);
}

.e-dark-mode .e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover .e-tab-wrap {
	background-color: var(--tw-coal-200);
}

.e-dark-mode .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
	background-color: var(--tw-coal-200);
}

/* Blazored Toast  */

html.dark .blazored-toast {
	background-color: var(--tw-coal-100) !important;
}

.blazored-toast {
	color: var(--tw-gray-900) !important;
}

.blazored-toast-success {
    border-top: 6px solid var(--tw-success) !important;
}

.blazored-toast-success .blazored-toast-icon {
    color: var(--tw-success) !important;
}

.blazored-toast-error {
    border-top: 6px solid var(--tw-danger) !important;
}

.blazored-toast-error .blazored-toast-icon {
    color: var(--tw-danger) !important;
}

/* Alternate rows in datagrid */
.e-grid .e-altrow {
	background-color: var(--tw-page-bg);
}

.e-dark-mode .e-grid .e-altrow {
	background-color: var(--tw-page-bg-dark);
}