mat-toolbar{--mat-toolbar-container-background-color: var(--mat-sys-primary-container)}mat-toolbar{--mat-toolbar-container-text-color: var(--mat-sys-on-primary)}body{background:var(--mat-sys-primary);color:var(--mat-sys-on-surface);font-family:Roboto,Helvetica Neue,sans-serif;margin:0;font-size:16px;line-height:1.4;height:100vh;-webkit-font-smoothing:antialiased;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}body.dark-mode{color-scheme:dark}body.dark-mode mat-card{--mdc-elevated-card-container-color: none}body.dark-mode .mat-mdc-card{border-color:#fff;border-width:1px}h3{background-color:#cdb295}div{box-sizing:border-box}.small-demo{min-height:128px;padding-bottom:40px;display:block;background-color:#eee}mat-card{background-color:#fff}.colorNested,.colored,.coloredContainerX{height:200px}.taller{height:300px}div.coloredContainerX>div,div.colorNested>div>div{padding:8px;box-shadow:0 2px 5px #342f33a1;opacity:.9;color:#fff;text-align:center}div.coloredContainerX>div:nth-child(10n+1),div.colorNested>div>div:nth-child(10n+1),div.box1{background-color:#009688}div.coloredContainerX>div:nth-child(10n+2),div.colorNested>div>div:nth-child(10n+2),div.box2{background-color:#3949ab}div.coloredContainerX>div:nth-child(10n+3),div.coloredChildren>div:nth-child(10n+3),div.colorNested>div>div:nth-child(10n+3),div.box3{background-color:#9c27b0}div.coloredContainerX>div:nth-child(10n+4),div.coloredChildren>div:nth-child(10n+4),div.colorNested>div>div:nth-child(10n+4){background-color:#b08752}div.coloredContainerX>div:nth-child(10n+5),div.coloredChildren>div:nth-child(10n+5),div.colorNested>div>div:nth-child(10n+5){background-color:#5ca6b0}div.coloredContainerX>div:nth-child(10n+6),div.coloredChildren>div:nth-child(10n+6),div.colorNested>div>div:nth-child(10n+6){background-color:#8bc34a}div.coloredContainerX>div:nth-child(10n+7),div.coloredChildren>div:nth-child(10n+7),div.colorNested>div>div:nth-child(10n+7){background-color:#9c27b0}div.coloredContainerX>div:nth-child(10n+8),div.coloredChildren>div:nth-child(10n+8),div.colorNested>div>div:nth-child(10n+8){background-color:#c9954e}div.coloredContainerX>div:nth-child(10n+9),div.coloredChildren>div:nth-child(10n+9),div.colorNested>div>div:nth-child(10n+9){background-color:#ff5722}div.coloredContainerX>div:nth-child(10n),div.coloredChildren>div:nth-child(10n),div.colorNested>div>div:nth-child(10n){background-color:#03a9f4}div.colored>div{padding:8px;box-shadow:0 2px 5px #342f33a1;opacity:.9;color:#fff;text-align:center}div.colored>div:nth-child(10n+1),.one{background-color:#009688}div.colored>div:nth-child(10n+2),.two{background-color:#3949ab}div.colored>div:nth-child(10n+3),.three{background-color:#9c27b0}div.colored>div:nth-child(10n+4),.four{background-color:#8bc34a}div.colored>div:nth-child(10n+5),.five{background-color:#03a9f4}div.colored>div:nth-child(10n+6),.six{background-color:#c9954e}div.colored>div:nth-child(10n+7),.seven{background-color:#ff5722}.hint{margin:5px 5px 0 20px;font-size:.9em;color:#fff;background-color:#292929;padding:20px;border-radius:5px;width:50%}.title{margin:5px;font-size:.9em;color:#5c5c5c}button.mat-primary{margin-left:25px}.demo-content{background-color:#f8f8ff}mat-toolbar-row button{min-width:150px}div.colored.box.nopad>div{padding:0}.intro{margin-top:-52px;margin-left:15px;color:#5c5c5c}.blocks{display:flex;justify-content:center;align-items:center;min-width:75px;min-height:50px;border-radius:3px}.black{display:flex;justify-content:center;align-items:center;border-radius:5px;min-width:75px;min-height:50px;color:#fff;background-color:#292929;padding:8px;box-shadow:0 2px 5px #342f33a1;text-align:center}.target{background-color:#05ffb0;color:#310736;cursor:pointer}.two_h{min-height:100px}.two_w{min-width:125px}.four_h{min-height:75px}.four_w{min-width:100px}.bigger{padding:0 20px 30px}mat-toolbar .mat-toolbar-layout mat-toolbar-row{flex-direction:column;align-content:flex-start;align-items:flex-start;min-height:40px}.demo-content .small-demo:first-child{margin-top:40px}mat-card-content pre{font-size:12px;white-space:pre-wrap}.fxClass-all{font-style:italic}.fxClass-xs{font-size:10px;color:#00f!important}.fxClass-sm{font-size:20px;color:#add8e6!important}.fxClass-md{font-size:30px;color:orange!important}.fxClass-md2{font-weight:700}.fxClass-lg{font-size:40px;color:#90ee90!important}.fxClass-lg2{text-shadow:#5c5c5c}.fixed{height:275px}.ngx-split.row-split>.ngx-split-handle .ngx-split-button{top:50%;left:50%;cursor:col-resize;transform:translate(-50%,-50%)}.ngx-split.column-split>.ngx-split-handle .ngx-split-button{left:50%;cursor:row-resize;top:-3px;transform:translate(-50%) rotate(270deg)}.ngx-split .ngx-split-area{overflow:auto}.ngx-split .ngx-split-handle{position:relative}.ngx-split .ngx-split-handle .ngx-split-button{line-height:0;font-size:32px;position:absolute;display:block;padding:0}.card-demo mat-card,.card-demo mat-card-content{margin-bottom:24px}.card-demo mat-card-title,.card-demo mat-card-content-title{margin-top:15px;margin-left:15px;margin-bottom:15px}.card-demo mat-card-footer{left:24px;margin-bottom:24px}.containerX{box-sizing:content-box!important}.forceAbove{margin-top:-275px}.large{height:200px}.large div.one,.large div.two{color:#fff}.card-demo .mat-card-content>:last-child,.card-demo>:last-child{margin-bottom:6px}html{color-scheme:light;--mat-sys-primary: light-dark(#8b32b9, #e8b3ff);--mat-sys-on-primary: light-dark(#ffffff, #500074);--mat-sys-primary-container: light-dark(#f6d9ff, #710c9f);--mat-sys-on-primary-container: light-dark(#310049, #f6d9ff);--mat-sys-inverse-primary: light-dark(#e8b3ff, #8b32b9);--mat-sys-primary-fixed: light-dark(#f6d9ff, #f6d9ff);--mat-sys-primary-fixed-dim: light-dark(#e8b3ff, #e8b3ff);--mat-sys-on-primary-fixed: light-dark(#310049, #310049);--mat-sys-on-primary-fixed-variant: light-dark(#710c9f, #710c9f);--mat-sys-secondary: light-dark(#764f88, #e4b6f7);--mat-sys-on-secondary: light-dark(#ffffff, #442157);--mat-sys-secondary-container: light-dark(#f6d9ff, #5d386f);--mat-sys-on-secondary-container: light-dark(#2e0940, #f6d9ff);--mat-sys-secondary-fixed: light-dark(#f6d9ff, #f6d9ff);--mat-sys-secondary-fixed-dim: light-dark(#e4b6f7, #e4b6f7);--mat-sys-on-secondary-fixed: light-dark(#2e0940, #2e0940);--mat-sys-on-secondary-fixed-variant: light-dark(#5d386f, #5d386f);--mat-sys-tertiary: light-dark(#ab276f, #ffb0d0);--mat-sys-on-tertiary: light-dark(#ffffff, #63003c);--mat-sys-tertiary-container: light-dark(#ffd8e6, #8b0257);--mat-sys-on-tertiary-container: light-dark(#3d0023, #ffd8e6);--mat-sys-tertiary-fixed: light-dark(#ffd8e6, #ffd8e6);--mat-sys-tertiary-fixed-dim: light-dark(#ffb0d0, #ffb0d0);--mat-sys-on-tertiary-fixed: light-dark(#3d0023, #3d0023);--mat-sys-on-tertiary-fixed-variant: light-dark(#8b0257, #8b0257);--mat-sys-background: light-dark(#fff7fc, #171119);--mat-sys-on-background: light-dark(#201922, #ebdfeb);--mat-sys-surface: light-dark(#fff7fc, #171119);--mat-sys-surface-dim: light-dark(#e2d6e2, #171119);--mat-sys-surface-bright: light-dark(#fff7fc, #3e3740);--mat-sys-surface-container-lowest: light-dark(#ffffff, #120c14);--mat-sys-surface-container: light-dark(#f7eaf6, #241d26);--mat-sys-surface-container-high: light-dark(#f1e4f0, #2e2830);--mat-sys-surface-container-highest: light-dark(#ebdfeb, #39323b);--mat-sys-on-surface: light-dark(#201922, #ebdfeb);--mat-sys-shadow: light-dark(#000000, #000000);--mat-sys-scrim: light-dark(#000000, #000000);--mat-sys-surface-tint: light-dark(#8b32b9, #e8b3ff);--mat-sys-inverse-surface: light-dark(#352e37, #ebdfeb);--mat-sys-inverse-on-surface: light-dark(#faedf9, #352e37);--mat-sys-outline: light-dark(#807383, #9a8c9d);--mat-sys-outline-variant: light-dark(#d1c2d3, #4e4352);--mat-sys-neutral10: light-dark( #201922, #201922 );--mat-sys-error: light-dark(#ba1a1a, #ffb4ab);--mat-sys-on-error: light-dark(#ffffff, #690005);--mat-sys-error-container: light-dark(#ffdad6, #93000a);--mat-sys-on-error-container: light-dark(#410002, #ffdad6);--mat-sys-surface-variant: light-dark(#eeddf0, #4e4352);--mat-sys-on-surface-variant: light-dark(#4e4352, #d1c2d3);--mat-sys-neutral-variant20: light-dark( #372d3b, #372d3b );--mat-sys-brand-font-family: Roboto;--mat-sys-plain-font-family: Roboto;--mat-sys-bold-font-weight: 700;--mat-sys-medium-font-weight: 500;--mat-sys-regular-font-weight: 400;--mat-sys-body-large: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font);--mat-sys-body-large-font: var(--mat-sys-plain-font-family);--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: .031rem;--mat-sys-body-large-weight: var(--mat-sys-regular-font-weight);--mat-sys-body-medium: var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font);--mat-sys-body-medium-font: var(--mat-sys-plain-font-family);--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: .875rem;--mat-sys-body-medium-tracking: .016rem;--mat-sys-body-medium-weight: var(--mat-sys-regular-font-weight);--mat-sys-body-small: var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font);--mat-sys-body-small-font: var(--mat-sys-plain-font-family);--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: .75rem;--mat-sys-body-small-tracking: .025rem;--mat-sys-body-small-weight: var(--mat-sys-regular-font-weight);--mat-sys-display-large: var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height) var(--mat-sys-display-large-font);--mat-sys-display-large-font: var(--mat-sys-brand-font-family);--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -.016rem;--mat-sys-display-large-weight: var(--mat-sys-regular-font-weight);--mat-sys-display-medium: var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font);--mat-sys-display-medium-font: var(--mat-sys-brand-font-family);--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: var(--mat-sys-regular-font-weight);--mat-sys-display-small: var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height) var(--mat-sys-display-small-font);--mat-sys-display-small-font: var(--mat-sys-brand-font-family);--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: var(--mat-sys-regular-font-weight);--mat-sys-headline-large: var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font);--mat-sys-headline-large-font: var(--mat-sys-brand-font-family);--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: var(--mat-sys-regular-font-weight);--mat-sys-headline-medium: var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height) var(--mat-sys-headline-medium-font);--mat-sys-headline-medium-font: var(--mat-sys-brand-font-family);--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: var(--mat-sys-regular-font-weight);--mat-sys-headline-small: var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font);--mat-sys-headline-small-font: var(--mat-sys-brand-font-family);--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: var(--mat-sys-regular-font-weight);--mat-sys-label-large: var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font);--mat-sys-label-large-font: var(--mat-sys-plain-font-family);--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: .875rem;--mat-sys-label-large-tracking: .006rem;--mat-sys-label-large-weight: var(--mat-sys-medium-font-weight);--mat-sys-label-large-weight-prominent: var(--mat-sys-bold-font-weight);--mat-sys-label-medium: var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height) var(--mat-sys-label-medium-font);--mat-sys-label-medium-font: var(--mat-sys-plain-font-family);--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: .75rem;--mat-sys-label-medium-tracking: .031rem;--mat-sys-label-medium-weight: var(--mat-sys-medium-font-weight);--mat-sys-label-medium-weight-prominent: var(--mat-sys-bold-font-weight);--mat-sys-label-small: var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font);--mat-sys-label-small-font: var(--mat-sys-plain-font-family);--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: .688rem;--mat-sys-label-small-tracking: .031rem;--mat-sys-label-small-weight: var(--mat-sys-medium-font-weight);--mat-sys-title-large: var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font);--mat-sys-title-large-font: var(--mat-sys-brand-font-family);--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: var(--mat-sys-regular-font-weight);--mat-sys-title-medium: var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height) var(--mat-sys-title-medium-font);--mat-sys-title-medium-font: var(--mat-sys-plain-font-family);--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: .009rem;--mat-sys-title-medium-weight: var(--mat-sys-medium-font-weight);--mat-sys-title-small: var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font);--mat-sys-title-small-font: var(--mat-sys-plain-font-family);--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: .875rem;--mat-sys-title-small-tracking: .006rem;--mat-sys-title-small-weight: var(--mat-sys-medium-font-weight);--mat-sys-umbra-color: color-mix( in srgb, var(--mat-sys-shadow), transparent 80% );--mat-sys-penumbra-color: color-mix( in srgb, var(--mat-sys-shadow), transparent 86% );--mat-sys-ambient-color: color-mix( in srgb, var(--mat-sys-shadow), transparent 88% );--mat-sys-level0: 0px 0px 0px 0px var(--mat-sys-umbra-color), 0px 0px 0px 0px var(--mat-sys-penumbra-color), 0px 0px 0px 0px var(--mat-sys-ambient-color);--mat-sys-level1: 0px 2px 1px -1px var(--mat-sys-umbra-color), 0px 1px 1px 0px var(--mat-sys-penumbra-color), 0px 1px 3px 0px var(--mat-sys-ambient-color);--mat-sys-level2: 0px 3px 3px -2px var(--mat-sys-umbra-color), 0px 3px 4px 0px var(--mat-sys-penumbra-color), 0px 1px 8px 0px var(--mat-sys-ambient-color);--mat-sys-level3: 0px 3px 5px -1px var(--mat-sys-umbra-color), 0px 6px 10px 0px var(--mat-sys-penumbra-color), 0px 1px 18px 0px var(--mat-sys-ambient-color);--mat-sys-level4: 0px 5px 5px -3px var(--mat-sys-umbra-color), 0px 8px 10px 1px var(--mat-sys-penumbra-color), 0px 3px 14px 2px var(--mat-sys-ambient-color);--mat-sys-level5: 0px 7px 8px -4px var(--mat-sys-umbra-color), 0px 12px 17px 2px var(--mat-sys-penumbra-color), 0px 5px 22px 4px var(--mat-sys-ambient-color);--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: .16;--mat-sys-focus-state-layer-opacity: .12;--mat-sys-hover-state-layer-opacity: .08;--mat-sys-pressed-state-layer-opacity: .12}