epam-assets/theme/customThemeTemplate.css

.uui-theme-myTheme {
    /* REQUIRED TO FILL PART */
    /* Theme semantic colors variables. Required to set according to your brand colors */
    --uui-accent-5:#F3FBF7;
    --uui-accent-10:#CDEEDD;
    --uui-accent-20:#97D9B7;
    --uui-accent-50:#07A956;
    --uui-accent-60:#06984D;
    --uui-accent-70:#068745;
    --uui-accent-contrast:#FFFFFF;
    --uui-critical-5:#FEF6F6;
    --uui-critical-10:#FDE1E1;
    --uui-critical-20:#FBB6B6;
    --uui-critical-50:#FF4242;
    --uui-critical-60:#E22A2A;
    --uui-critical-70:#AD0000;
    --uui-critical-contrast:#FFFFFF;
    --uui-error-5:#FEF6F6;
    --uui-error-10:#FDE1E1;
    --uui-error-20:#FBB6B6;
    --uui-error-50:#FF4242;
    --uui-error-60:#E22A2A;
    --uui-error-70:#AD0000;
    --uui-error-contrast:#FFFFFF;
    --uui-info-5:#F3F8FE;
    --uui-info-10:#CEE1FC;
    --uui-info-20:#85B4F8;
    --uui-info-50:#0A68F1;
    --uui-info-60:#095ED9;
    --uui-info-70:#0853C1;
    --uui-info-contrast:#FFFFFF;
    --uui-primary-5:#F3F8FE;
    --uui-primary-10:#CEE1FC;
    --uui-primary-20:#85B4F8;
    --uui-primary-50:#0A68F1;
    --uui-primary-60:#095ED9;
    --uui-primary-70:#0853C1;
    --uui-primary-contrast:#FFFFFF;
    --uui-secondary-5:#F5F6FA;
    --uui-secondary-10:#EBEDF5;
    --uui-secondary-20:#E1E3EB;
    --uui-secondary-50:#6C6F80;
    --uui-secondary-60:#474A59;
    --uui-secondary-70:#303240;
    --uui-secondary-contrast:#FFFFFF;
    --uui-success-5:#F3FBF7;
    --uui-success-10:#CDEEDD;
    --uui-success-20:#97D9B7;
    --uui-success-50:#07A956;
    --uui-success-60:#06984D;
    --uui-success-70:#068745;
    --uui-success-contrast:#FFFFFF;
    --uui-warning-5:#FFFCF5;
    --uui-warning-10:#FFEDC9;
    --uui-warning-20:#FFD785;
    --uui-warning-50:#FCAA00;
    --uui-warning-60:#FF9000;
    --uui-warning-70:#BD5800;
    --uui-warning-contrast:var(--uui-neutral-80);
    --uui-neutral-0:#FFFFFF;
    --uui-neutral-5:#FAFAFC;
    --uui-neutral-10:#F5F6FA;
    --uui-neutral-20:#EBEDF5;
    --uui-neutral-30:#E1E3EB;
    --uui-neutral-40:#CED0DB;
    --uui-neutral-50:#ACAFBF;
    --uui-neutral-60:#6C6F80;
    --uui-neutral-70:#474A59;
    --uui-neutral-80:#303240;
    --uui-neutral-90:#1D1E26;
    --uui-neutral-95:#111111;
    --uui-neutral-100:#000000;
    /* End Theme semantic variables */

    --uui-font:"Source Sans Pro", sans-serif; /* Your brand font */
    /* REQUIRED TO FILL PART END */


    /* Core variables. It's already filled based on semantic color values. It's not necessary to change it upfront, but you could tweak it if needed*/
    --uui-app-bg:var(--uui-neutral-10);
    --uui-divider:var(--uui-neutral-40);
    --uui-divider-light:var(--uui-neutral-30);
    --uui-overlay:#1D1E26CC;
    --uui-surface-higher:var(--uui-neutral-10);
    --uui-surface-highest:var(--uui-neutral-20);
    --uui-surface-main:var(--uui-neutral-0);
    --uui-surface-sunken:var(--uui-neutral-20);
    --uui-control-bg:var(--uui-surface-main);
    --uui-control-bg-disabled:var(--uui-neutral-5);
    --uui-control-bg-hover:var(--uui-neutral-60);
    --uui-control-border:var(--uui-neutral-40);
    --uui-control-border-disabled:var(--uui-neutral-30);
    --uui-control-border-focus:var(--uui-primary-50);
    --uui-control-border-hover:var(--uui-neutral-60);
    --uui-control-icon:var(--uui-neutral-50);
    --uui-control-icon-disabled:var(--uui-neutral-50);
    --uui-control-placeholder:var(--uui-neutral-50);
    --uui-control-placeholder-disabled:var(--uui-text-disabled);
    --uui-control-text:var(--uui-neutral-95);
    --uui-control-text-disabled:var(--uui-text-tertiary);
    --uui-icon:var(--uui-neutral-95);
    --uui-icon-active:var(--uui-neutral-100);
    --uui-icon-disabled:var(--uui-neutral-50);
    --uui-icon-hover:var(--uui-neutral-100);
    --uui-link:var(--uui-primary-50);
    --uui-link-hover:var(--uui-primary-60);
    --uui-link-visited:var(--purple-60);
    --uui-link-visited-hover:var(--purple-70);
    --uui-outline-focus:#0A68F17F;
    --uui-skeleton:var(--uui-neutral-40);
    --uui-text-bg-highlight:var(--uui-warning-10);
    --uui-text-critical:var(--uui-critical-70);
    --uui-text-disabled:var(--uui-neutral-50);
    --uui-text-info:var(--uui-info-70);
    --uui-text-primary:var(--uui-neutral-95);
    --uui-text-secondary:var(--uui-neutral-70);
    --uui-text-success:var(--uui-success-70);
    --uui-text-tertiary:var(--uui-neutral-60);
    --uui-text-warning:var(--uui-warning-70);

    --uui-font-mono:"Roboto Mono", monospace;
    --gradient-1:linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
    --gradient-2:linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
    --gradient-3:linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%);
    --gradient-4:linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
    --gradient-5:linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
    --uui-shadow-level-1:0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);
    --uui-shadow-level-2:0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
    --uui-shadow-level-3:0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);
}

/* Color classes. Component variables overrides. Advanced and fine tuning customization part. */
.uui-theme-myTheme .uui-color-primary{
    --uui-color-5:var(--uui-primary-5);
    --uui-color-10:var(--uui-primary-10);
    --uui-color-20:var(--uui-primary-20);
    --uui-color-50:var(--uui-primary-50);
    --uui-color-60:var(--uui-primary-60);
    --uui-color-70:var(--uui-primary-70);
    --uui-color-contrast:var(--uui-primary-contrast);
}
.uui-theme-myTheme .uui-color-secondary{
    --uui-color-5:var(--uui-secondary-5);
    --uui-color-10:var(--uui-secondary-10);
    --uui-color-20:var(--uui-secondary-20);
    --uui-color-50:var(--uui-secondary-50);
    --uui-color-60:var(--uui-secondary-60);
    --uui-color-70:var(--uui-secondary-70);
    --uui-color-contrast:var(--uui-secondary-contrast);
}
.uui-theme-myTheme .uui-color-accent{
    --uui-color-5:var(--uui-accent-5);
    --uui-color-10:var(--uui-accent-10);
    --uui-color-20:var(--uui-accent-20);
    --uui-color-50:var(--uui-accent-50);
    --uui-color-60:var(--uui-accent-60);
    --uui-color-70:var(--uui-accent-70);
    --uui-color-contrast:var(--uui-accent-contrast);
}
.uui-theme-myTheme .uui-color-info{
    --uui-color-5:var(--uui-info-5);
    --uui-color-10:var(--uui-info-10);
    --uui-color-20:var(--uui-info-20);
    --uui-color-50:var(--uui-info-50);
    --uui-color-60:var(--uui-info-60);
    --uui-color-70:var(--uui-info-70);
    --uui-color-contrast:var(--uui-info-contrast);
}
.uui-theme-myTheme .uui-color-success{
    --uui-color-5:var(--uui-success-5);
    --uui-color-10:var(--uui-success-10);
    --uui-color-20:var(--uui-success-20);
    --uui-color-50:var(--uui-success-50);
    --uui-color-60:var(--uui-success-60);
    --uui-color-70:var(--uui-success-70);
    --uui-color-contrast:var(--uui-success-contrast);
}
.uui-theme-myTheme .uui-color-warning{
    --uui-color-5:var(--uui-warning-5);
    --uui-color-10:var(--uui-warning-10);
    --uui-color-20:var(--uui-warning-20);
    --uui-color-50:var(--uui-warning-50);
    --uui-color-60:var(--uui-warning-60);
    --uui-color-70:var(--uui-warning-70);
    --uui-color-contrast:var(--uui-warning-contrast);
}
.uui-theme-myTheme .uui-color-error{
    --uui-color-5:var(--uui-error-5);
    --uui-color-10:var(--uui-error-10);
    --uui-color-20:var(--uui-error-20);
    --uui-color-50:var(--uui-error-50);
    --uui-color-60:var(--uui-error-60);
    --uui-color-70:var(--uui-error-70);
    --uui-color-contrast:var(--uui-error-contrast);
}
.uui-theme-myTheme .uui-color-critical{
    --uui-color-5:var(--uui-critical-5);
    --uui-color-10:var(--uui-critical-10);
    --uui-color-20:var(--uui-critical-20);
    --uui-color-50:var(--uui-critical-50);
    --uui-color-60:var(--uui-critical-60);
    --uui-color-70:var(--uui-critical-70);
    --uui-color-contrast:var(--uui-critical-contrast);
}
.uui-theme-myTheme .uui-color-white{
    --uui-color-5:color-mix(in srgb, #FFFFFF 15%, transparent);
    --uui-color-10:color-mix(in srgb, #FFFFFF 22%, transparent);
    --uui-color-20:color-mix(in srgb, #FFFFFF 29%, transparent);
    --uui-color-50:var(--uui-neutral-0);
    --uui-color-60:var(--uui-neutral-10);
    --uui-color-70:var(--uui-neutral-20);
    --uui-color-contrast:var(--uui-neutral-70);
}
.uui-theme-myTheme .uui-color-neutral{
    --uui-color-5:var(--uui-secondary-5);
    --uui-color-10:var(--uui-secondary-10);
    --uui-color-20:var(--uui-secondary-20);
    --uui-color-50:var(--uui-secondary-50);
    --uui-color-60:var(--uui-secondary-60);
    --uui-color-70:var(--uui-secondary-70);
    --uui-color-contrast:var(--uui-secondary-contrast);
}
.uui-theme-myTheme{
    --uui-border-radius:3px;
}

.uui-theme-myTheme .uui-accordion-container{
    --uui-accordion-border-radius:6px;
}
.uui-theme-myTheme .uui-file_card{
    --uui-file_card-border-radius:6px;
}
.uui-theme-myTheme .uui-badge.uui-color-white.uui-fill-solid{
    --uui-badge-bg-hover:var(--uui-neutral-30);
    --uui-badge-border-hover:var(--uui-neutral-30);
}
.uui-theme-myTheme .uui-badge.uui-color-white.uui-fill-outline{
    --uui-badge-bg:var(--uui-neutral-0);
    --uui-badge-border:var(--uui-neutral-30);
    --uui-badge-bg-hover:var(--uui-neutral-10);
    --uui-badge-border-hover:var(--uui-neutral-30);
    --uui-badge-caption:var(--uui-neutral-70);
    --uui-badge-caption-hover:var(--uui-neutral-70);
}
.uui-theme-myTheme .uui-badge.uui-color-white.uui-fill-outline .uui-count_indicator{
    --uui-count_indicator-bg:color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
    --uui-count_indicator-border:color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
}
.uui-theme-myTheme .uui-badge.uui-color-neutral{
    --uui-badge-caption:var(--uui-neutral-95);
}
.uui-theme-myTheme .uui-badge.uui-color-neutral.uui-fill-solid{
    --uui-badge-bg:var(--uui-neutral-30);
    --uui-badge-bg-hover:var(--uui-neutral-40);
    --uui-badge-border:var(--uui-neutral-30);
    --uui-badge-border-hover:var(--uui-neutral-40);
    --uui-color-contrast:var(--uui-neutral-80);
}
.uui-theme-myTheme .uui-badge.uui-color-neutral.uui-fill-solid .uui-count_indicator{
    --uui-count_indicator-bg:var(--uui-neutral-0);
    --uui-count_indicator-border:var(--uui-neutral-0);
}
.uui-theme-myTheme .uui-badge.uui-color-neutral.uui-fill-outline{
    --uui-badge-bg:var(--uui-neutral-20);
    --uui-badge-border:var(--uui-neutral-40);
    --uui-badge-border-hover:var(--uui-neutral-40);
    --uui-badge-bg-hover:var(--uui-neutral-30);
    --uui-badge-caption-hover:var(--uui-neutral-80);
}
.uui-theme-myTheme .uui-badge.uui-color-night100.uui-fill-solid{
    --uui-badge-bg-hover:var(--uui-neutral-20);
    --uui-badge-border-hover:var(--uui-neutral-20);
}
.uui-theme-myTheme .uui-badge.uui-color-night100.uui-fill-outline{
    --uui-badge-bg:var(--uui-neutral-10);
    --uui-badge-bg-hover:var(--uui-neutral-20);
    --uui-badge-border:var(--uui-neutral-30);
    --uui-badge-border-hover:var(--uui-neutral-30);
    --uui-badge-caption:var(--uui-neutral-70);
    --uui-badge-caption-hover:var(--uui-neutral-70);
}
.uui-theme-myTheme .uui-badge.uui-color-night100.uui-fill-outline .uui-count_indicator{
    --uui-count_indicator-bg:color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
    --uui-count_indicator-border:color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
}
.uui-theme-myTheme .uui-badge.uui-color-night600.uui-fill-outline{
    --uui-badge-border:var(--uui-neutral-60);
    --uui-badge-border-hover:var(--uui-neutral-60);
    --uui-badge-caption:var(--uui-neutral-95);
    --uui-badge-caption-hover:var(--uui-neutral-80);
}
.uui-theme-myTheme .uui-badge.uui-color-yellow.uui-fill-outline{
    --uui-badge-border:var(--yellow-20);
}
.uui-theme-myTheme .uui-button:is(.uui-color-secondary, .uui-color-neutral):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost){
    --uui-btn-caption:var(--uui-neutral-70);
}
.uui-theme-myTheme .uui-icon_button.uui-color-white{
    --uui-icon_btn-hover:var(--uui-neutral-20);
    --uui-icon_btn-active:var(--uui-neutral-30);
}
.uui-theme-myTheme .uui-link_button.uui-color-contrast{
    --uui-link_btn-text:var(--uui-neutral-5);
    --uui-link_btn-text-hover:var(--uui-neutral-10);
    --uui-link_btn-text-active:var(--uui-neutral-20);
}
.uui-theme-myTheme .uui-link_button.uui-color-white{
    --uui-link_btn-text:var(--uui-neutral-5);
    --uui-link_btn-text-hover:var(--uui-neutral-30);
    --uui-link_btn-text-active:var(--uui-neutral-40);
    --uui-link_btn-text-disabled:color-mix(in srgb, var(--white) 40%, transparent);
}
.uui-theme-myTheme .uui-count_indicator.uui-color-neutral{
    --uui-count_indicator-bg:var(--uui-neutral-30);
    --uui-count_indicator-border:var(--uui-neutral-30);
}
.uui-theme-myTheme .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning){
    --uui-count_indicator-caption:var(--uui-neutral-70);
}
.uui-theme-myTheme .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator-dot{
    background-color:color-mix(in srgb, var(--white) 20%, transparent);
    border:1px solid var(--uui-neutral-40);
}
.uui-theme-myTheme .uui-main_menu{
    --uui-main_menu-bg:var(--uui-neutral-95);
    --uui-main_menu-hover:var(--uui-neutral-90);
    --uui-main_menu-border-active-gradient:var(--gradient-1);
}
.uui-theme-myTheme .uui-main_menu-dropdown{
    --uui-main_menu-dropdown-bg-hover:var(--uui-neutral-95);
}
.uui-theme-myTheme .uui-burger{
    --uui-burger_menu-bg:var(--uui-neutral-95);
    --uui-burger_menu-bg-hover:var(--uui-neutral-95);
    --uui-burger_menu-item:var(--uui-neutral-95);
}
.uui-theme-myTheme .uui-tag.uui-fill-outline{
    --uui-tag-fill:var(--uui-neutral-95);
    --uui-tag-caption:var(--uui-text-primary);
}
.uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-solid{
    --uui-tag-fill:var(--uui-neutral-95);
}
.uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-solid .uui-count_indicator{
    --uui-count_indicator-bg:var(--uui-neutral-30);
    --uui-count_indicator-border:var(--uui-neutral-30);
}
.uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-outline{
    --uui-tag-bg:var(--uui-neutral-0);
    --uui-tag-border:var(--uui-neutral-30);
    --uui-tag-bg-hover:var(--uui-neutral-10);
    --uui-tag-border-hover:var(--uui-neutral-30);
}
.uui-theme-myTheme .uui-tag.uui-color-white.uui-fill-outline .uui-count_indicator{
    --uui-count_indicator-bg:var(--uui-neutral-30);
    --uui-count_indicator-border:var(--uui-neutral-30);
}
.uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-solid{
    --uui-tag-fill:var(--uui-neutral-95);
}
.uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-solid .uui-count_indicator{
    --uui-count_indicator-bg:var(--uui-neutral-30);
    --uui-count_indicator-border:var(--uui-neutral-30);
    --uui-count_indicator-caption:var(--uui-neutral-70);
}
.uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-outline{
    --uui-tag-bg:var(--uui-neutral-5);
    --uui-tag-bg-hover:var(--uui-neutral-10);
    --uui-tag-border:var(--uui-neutral-30);
    --uui-tag-border-hover:var(--uui-neutral-30);
}
.uui-theme-myTheme .uui-tag.uui-color-night100.uui-fill-outline .uui-count_indicator{
    --uui-count_indicator-bg:var(--uui-neutral-30);
    --uui-count_indicator-border:var(--uui-neutral-30);
}
.uui-theme-myTheme .uui-tag.uui-color-night700.uui-fill-solid .uui-count_indicator{
    --uui-count_indicator-border:color-mix(in srgb, var(--uui-neutral-0) 50%, transparent);
    --uui-count_indicator-bg:color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
}
.uui-theme-myTheme .uui-tag.uui-color-night700.uui-fill-outline{
    --uui-tag-bg:var(--uui-neutral-20);
    --uui-tag-bg-hover:var(--uui-neutral-30);
    --uui-tag-border:var(--uui-neutral-50);
    --uui-tag-border-hover:var(--uui-neutral-50);
}
.uui-theme-myTheme .uui-tag.uui-color-warning, .uui-theme-myTheme .uui-tag.uui-color-sun{
    --uui-tag-fill:var(--uui-neutral-100);
}
.uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-solid, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-solid{
    --uui-tag-caption:var(--uui-neutral-80);
}
.uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-solid .uui-count_indicator, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-solid .uui-count_indicator{
    --uui-count_indicator-bg:color-mix(in srgb, var(--uui-neutral-90) 5%, transparent);
    --uui-count_indicator-border:color-mix(in srgb, var(--uui-neutral-90) 30%, transparent);
    --uui-count_indicator-caption:var(--uui-neutral-80);
}
.uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-outline, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-outline{
    --uui-tag-caption:var(--uui-neutral-95);
}
.uui-theme-myTheme .uui-tag.uui-color-warning.uui-fill-outline .uui-count_indicator, .uui-theme-myTheme .uui-tag.uui-color-sun.uui-fill-outline .uui-count_indicator{
    --uui-count_indicator-bg:var(--uui-neutral-0);
    --uui-count_indicator-border:var(--uui-neutral-40);
}
.uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-solid{
    --uui-tag-bg:var(--uui-neutral-30);
    --uui-tag-bg-hover:var(--uui-neutral-40);
    --uui-tag-border:var(--uui-neutral-30);
    --uui-tag-border-hover:var(--uui-neutral-40);
    --uui-tag-caption:var(--uui-text-primary);
    --uui-tag-fill:var(--uui-neutral-95);
}
.uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-solid .uui-count_indicator{
    --uui-count_indicator-bg:var(--uui-neutral-0);
    --uui-count_indicator-border:var(--uui-neutral-0);
    --uui-count_indicator-caption:var(--uui-neutral-70);
}
.uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-outline{
    --uui-tag-bg:var(--uui-neutral-20);
    --uui-tag-bg-hover:var(--uui-neutral-30);
    --uui-tag-fill:var(--uui-neutral-95);
}
.uui-theme-myTheme .uui-tag.uui-color-neutral.uui-fill-outline .uui-count_indicator{
    --uui-count_indicator-bg:var(--uui-neutral-30);
    --uui-count_indicator-border:var(--uui-neutral-30);
}
.uui-theme-myTheme .uui-typography h1{
    font-weight:400;
}
.uui-theme-myTheme .uui-typography h2, .uui-theme-myTheme .uui-typography h3, .uui-theme-myTheme .uui-typography h4, .uui-theme-myTheme .uui-typography h5{
    font-weight:600;
}

.uui-theme-myTheme .uui-typography h1.promo-header{
    font-size:72px;
    font-weight:400;
}
.uui-theme-myTheme .uui-typography h2.promo-header{
    font-size:44px;
    font-weight:600;
}
.uui-theme-myTheme .uui-typography h3.promo-header{
    font-size:36px;
}
.uui-theme-myTheme .uui-typography h4.promo-header{
    font-size:30px;
}
.uui-theme-myTheme .uui-typography h5.promo-header{
    font-size:24px;
}
.uui-theme-myTheme .uui-typography h6.promo-header{
    font-size:18px;
}
.uui-theme-myTheme{
    --uui-grid-unit:6px;
    --uui-focus-outline-width:2px;
    --uui-focus-outline-offset:2px;
    --uui-focus-radius:2px;
    --uui-tab-line-width:3px;
    --uui-notify-size:6px;
}
.uui-theme-myTheme .uui-size-12{
    --uui-size:12px;
    --uui-border-width:1px;
    --uui-horizontal-gap:6px;
    --uui-vertical-gap:3px;
    --uui-horizontal-padding:6px;
    --uui-vertical-padding:3px;
    --uui-icon-size:12px;
    --uui-line-height:12px;
    --uui-font-size:12px;
    --uui-dot-size:6px;
}
.uui-theme-myTheme .uui-size-18{
    --uui-size:18px;
    --uui-border-width:1px;
    --uui-horizontal-gap:3px;
    --uui-vertical-gap:3px;
    --uui-horizontal-padding:3px;
    --uui-vertical-padding:3px;
    --uui-icon-size:12px;
    --uui-line-height:12px;
    --uui-font-size:10px;
    --uui-dot-size:6px;
}
.uui-theme-myTheme .uui-size-24{
    --uui-size:24px;
    --uui-border-width:1px;
    --uui-horizontal-gap:6px;
    --uui-vertical-gap:3px;
    --uui-horizontal-padding:6px;
    --uui-vertical-padding:3px;
    --uui-icon-size:12px;
    --uui-line-height:18px;
    --uui-font-size:12px;
    --uui-dot-size:8px;
}
.uui-theme-myTheme .uui-size-30{
    --uui-size:30px;
    --uui-border-width:1px;
    --uui-horizontal-gap:6px;
    --uui-vertical-gap:3px;
    --uui-horizontal-padding:6px;
    --uui-vertical-padding:6px;
    --uui-icon-size:18px;
    --uui-line-height:18px;
    --uui-font-size:14px;
    --uui-dot-size:8px;
}
.uui-theme-myTheme .uui-size-36{
    --uui-size:36px;
    --uui-border-width:1px;
    --uui-horizontal-gap:6px;
    --uui-vertical-gap:3px;
    --uui-horizontal-padding:6px;
    --uui-vertical-padding:9px;
    --uui-icon-size:18px;
    --uui-line-height:18px;
    --uui-font-size:14px;
    --uui-dot-size:8px;
}
.uui-theme-myTheme .uui-size-42{
    --uui-size:42px;
    --uui-border-width:1px;
    --uui-horizontal-gap:6px;
    --uui-vertical-gap:3px;
    --uui-horizontal-padding:12px;
    --uui-vertical-padding:9px;
    --uui-icon-size:18px;
    --uui-line-height:24px;
    --uui-font-size:16px;
    --uui-dot-size:10px;
}
.uui-theme-myTheme .uui-size-48{
    --uui-size:48px;
    --uui-border-width:1px;
    --uui-horizontal-gap:6px;
    --uui-vertical-gap:3px;
    --uui-horizontal-padding:12px;
    --uui-vertical-padding:12px;
    --uui-icon-size:24px;
    --uui-line-height:24px;
    --uui-font-size:16px;
    --uui-dot-size:12px;
}
.uui-theme-myTheme .uui-size-60{
    --uui-size:60px;
    --uui-border-width:1px;
    --uui-horizontal-gap:6px;
    --uui-vertical-gap:3px;
    --uui-horizontal-padding:12px;
    --uui-vertical-padding:18px;
    --uui-icon-size:24px;
    --uui-line-height:24px;
    --uui-font-size:20px;
    --uui-dot-size:12px;
}
.uui-theme-myTheme .uui-input-box.uui-size-42{
    --uui-horizontal-padding:6px;
}
.uui-theme-myTheme .uui-input-box.uui-size-48{
    --uui-horizontal-padding:6px;
}
.uui-theme-myTheme .uui-input-box.uui-textarea{
    --uui-horizontal-padding:12px;
}
.uui-theme-myTheme .uui-input-box.uui-textarea.uui-size-24{
    --uui-line-height:12px;
}
.uui-theme-myTheme .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
    --uui-horizontal-padding:6px;
    --uui-horizontal-gap:3px;
    --uui-icon-size:18px;
    --uui-line-height:18px;
    --uui-font-size:14px;
}
.uui-theme-myTheme .uui-tab-button.uui-vertical-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
    --uui-horizontal-padding:12px;
    --uui-horizontal-gap:6px;
}
.uui-theme-myTheme .uui-tag.uui-size-18{
    --uui-font-size:12px;
}
.uui-theme-myTheme .uui-tag.uui-size-18 .uui-caption{
    --uui-tag-horizontal-gap:0;
}
.uui-theme-myTheme .uui-tag.uui-size-24{
    --uui-icon-size:18px;
}
.uui-theme-myTheme .uui-tag.uui-size-42{
    --uui-icon-size:24px;
}
.uui-theme-myTheme .uui-tag.uui-size-24, .uui-theme-myTheme .uui-tag.uui-size-30, .uui-theme-myTheme .uui-tag.uui-size-36, .uui-theme-myTheme .uui-tag.uui-size-42{
    --uui-horizontal-gap:3px;
}
.uui-theme-myTheme .uui-tag.uui-size-24, .uui-theme-myTheme .uui-tag.uui-size-30{
    --uui-horizontal-padding:3px;
}
.uui-theme-myTheme .uui-tag.uui-size-42, .uui-theme-myTheme .uui-tag.uui-size-48{
    --uui-horizontal-padding:9px;
}
.uui-theme-myTheme .uui-checkbox-container.uui-size-18, .uui-theme-myTheme .uui-radio-input-container.uui-size-18{
    --uui-horizontal-gap:12px;
    --uui-line-height:18px;
    --uui-font-size:14px;
}
.uui-theme-myTheme .uui-switch.uui-size-18{
    --uui-horizontal-gap:12px;
    --uui-line-height:18px;
    --uui-font-size:14px;
}
.uui-theme-myTheme .uui-switch.uui-size-24{
    --uui-horizontal-gap:12px;
    --uui-line-height:24px;
    --uui-font-size:16px;
}
.uui-theme-myTheme .uui-labeled-input.uui-size-30{
    --uui-icon-size:12px;
    --uui-font-size:12px;
}
.uui-theme-myTheme .uui-labeled-input.uui-size-42{
    --uui-line-height:18px;
    --uui-font-size:14px;
}
.uui-theme-myTheme .uui-labeled-input.uui-size-48{
    --uui-icon-size:18px;
    --uui-line-height:18px;
    --uui-font-size:14px;
}
.uui-theme-myTheme .uui-badge.uui-size-18{
    --uui-font-size:12px;
    --uui-horizontal-padding:6px;
    --uui-badge-caption-horizontal-padding:0;
    --uui-badge-indicator-padding:3px;
}
.uui-theme-myTheme .uui-badge.uui-size-24{
    --uui-icon-size:18px;
    --uui-line-height:12px;
}
.uui-theme-myTheme .uui-badge.uui-size-36{
    --uui-horizontal-padding:9px;
}
.uui-theme-myTheme .uui-badge.uui-size-42{
    --uui-icon-size:24px;
    --uui-horizontal-padding:15px;
}
.uui-theme-myTheme .uui-badge.uui-size-48{
    --uui-horizontal-padding:15px;
}
.uui-theme-myTheme .uui-badge.uui-size-24, .uui-theme-myTheme .uui-badge.uui-size-30, .uui-theme-myTheme .uui-badge.uui-size-36, .uui-theme-myTheme .uui-badge.uui-size-42, .uui-theme-myTheme .uui-badge.uui-size-48{
    --uui-horizontal-gap:3px;
}
.uui-theme-myTheme .uui-status_indicator.uui-size-12{
    --uui-horizontal-gap:4px;
}
.uui-theme-myTheme .uui-status_indicator.uui-size-18{
    --uui-horizontal-gap:6px;
    --uui-line-height:18px;
    --uui-font-size:14px;
    --uui-dot-size:8px;
}
.uui-theme-myTheme .uui-status_indicator.uui-size-24{
    --uui-font-size:14px;
    --uui-dot-size:10px;
}
.uui-theme-myTheme .uui-count_indicator.uui-size-12{
    --uui-horizontal-padding:3px;
    --uui-line-height:10px;
    --uui-font-size:8px;
}
.uui-theme-myTheme .uui-count_indicator.uui-size-18{
    --uui-horizontal-padding:6px;
    --uui-line-height:16px;
    --uui-font-size:12px;
}
.uui-theme-myTheme .uui-count_indicator.uui-size-24{
    --uui-line-height:22px;
    --uui-font-size:14px;
}
.uui-theme-myTheme .uui-table-header-cell.uui-size-36{
    --uui-horizontal-gap:12px;
}
.uui-theme-myTheme .uui-table-header-cell.uui-size-48{
    --uui-horizontal-gap:12px;
}
.uui-theme-myTheme .uui-table-header-cell.uui-size-60{
    --uui-horizontal-gap:12px;
}
.uui-theme-myTheme .uui-picker_toggler.uui-size-30, .uui-theme-myTheme .uui-picker_toggler.uui-size-36, .uui-theme-myTheme .uui-picker_toggler.uui-size-42, .uui-theme-myTheme .uui-picker_toggler.uui-size-48{
    --uui-vertical-padding:3px;
}
.uui-theme-myTheme .uui-alert.uui-size-36{
    --uui-alert-indicator-border-width:3px;
    --uui-alert-gap-h:12px;
    --uui-alert-gap-v:3px;
    --uui-alert-padding-h:9px;
    --uui-alert-padding-v:3px;
    --uui-alert-caption-gap-h:9px;
}