:root {
    /* Typography */
    /* Font Family */
    --aqua-font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    /* Font Family */
    /* Font Size */
    --aqua-font-size-x-small: 0.75rem;
    --aqua-font-size-small: 0.875rem;
    --aqua-font-size-medium: 1rem;
    --aqua-font-size-large: clamp(1.1075rem, 1.0639rem + 0.2179vw, 1.26rem);
    --aqua-font-size-x-large: clamp(1.2456rem, 1.1696rem + 0.3804vw, 1.5119rem);
    --aqua-font-size-xx-large: clamp(1.4019rem, 1.284rem + 0.5893vw, 1.8144rem);
    --aqua-font-size-xxx-large: clamp(1.5769rem, 1.4053rem + 0.858vw, 2.1775rem);
    --aqua-font-size-display-small: clamp(2.245rem, 1.8114rem + 2.1679vw, 3.7625rem);
    --aqua-font-size-display-medium: clamp(2.5256rem, 1.9572rem + 2.842vw, 4.515rem);
    --aqua-font-size-display-large: clamp(2.8413rem, 2.1052rem + 3.6804vw, 5.4175rem);
    /* Font Size */
    /* Font Weight */
    --aqua-font-weight-thin: 100;
    --aqua-font-weight-extra-light: 200;
    --aqua-font-weight-light: 300;
    --aqua-font-weight-normal: 400;
    --aqua-font-weight-medium: 500;
    --aqua-font-weight-semi-bold: 600;
    --aqua-font-weight-bold: 700;
    --aqua-font-weight-extra-bold: 800;
    --aqua-font-weight-black: 900;
    /* Font Weight */
    /* Letter Spacing */
    --aqua-letter-spacing-dense: -0.015em;
    --aqua-letter-spacing-normal: normal;
    --aqua-letter-spacing-loose: 0.075em;
    /* Letter Spacing */
    /* Line Height */
    --aqua-line-height-dense: 1.4;
    --aqua-line-height-normal: 1.8;
    --aqua-line-height-loose: 2.2;
    /* Line Height */
    /* Spacing */
    --aqua-space-0: 0px;
    --aqua-space-05: 4px;
    --aqua-space-100: 8px;
    --aqua-space-150: 12px;
    --aqua-space-200: 16px;
    --aqua-space-250: 24px;
    --aqua-space-350: 32px;
    --aqua-space-400: 40px;
    --aqua-space-450: 48px;
    --aqua-space-500: 56px;
    --aqua-space-550: 64px;
    --aqua-space-600: 72px;
    --aqua-space-650: 80px;
    --aqua-space-700: 88px;
    --aqua-space-750: 96px;
    --aqua-space-800: 104px;
    /* Spacing */
    /* Border Radius */
    --aqua-border-radius-none: 0;
    --aqua-border-radius-small: 2px;
    --aqua-border-radius-medium: 4px;
    --aqua-border-radius-large: 8px;
    --aqua-border-radius-round: 999px;
    /* Border Radius */
    /* Shadow */
    --aqua-shadow-none: none;
    --aqua-shadow-active: 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    --aqua-shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.10), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
    --aqua-shadow-float: 0px 2px 6px 0px rgba(0, 0, 0, 0.10), 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    /* Shadow */
    /* Color Palette */
    --aqua-color-brand-core-black: #000000;
    --aqua-color-brand-core-white: #FFFFFF;
    --aqua-color-brand-neutral-n1: #333333;
    --aqua-color-brand-neutral-n2: #999999;
    --aqua-color-brand-neutral-n3: #C8C8C8;
    --aqua-color-brand-neutral-n4: #E5E5E5;
    --aqua-color-brand-neutral-n5: #F3F3F3;
    --aqua-color-brand-neutral-n6: #FAFAFA;
    --aqua-color-brand-p1-blue: #231EDC;
    --aqua-color-brand-p2-blue: #0A7DFF;
    --aqua-color-brand-p3-blue: #5AE6FF;
    --aqua-color-brand-p4-blue: #001E55;
    --aqua-color-brand-p1-green: #007D55;
    --aqua-color-brand-p2-green: #0AD287;
    --aqua-color-brand-p3-green: #78FAC8;
    --aqua-color-brand-p4-green: #036949;
    --aqua-color-brand-p1-purple: #6F006E;
    --aqua-color-brand-p2-purple: #A800A8;
    --aqua-color-brand-p3-purple: #D7A5F5;
    --aqua-color-brand-p4-purple: #460F32;
    --aqua-color-brand-p1-red: #D72850;
    --aqua-color-brand-p2-red: #FF465F;
    --aqua-color-brand-p3-red: #FF9191;
    --aqua-color-brand-p4-red: #690A28;
    --aqua-color-brand-p1-yellow: #FFA014;
    --aqua-color-brand-p2-yellow: #FFB41E;
    --aqua-color-brand-p3-yellow: #FFDC78;
    --aqua-color-brand-p4-yellow: #C05C27;
    --aqua-color-brand-p1-orange: #FF6100;
    --aqua-color-brand-p2-orange: #FF8600;
    --aqua-color-brand-p3-orange: #FFCA8F;
    --aqua-color-brand-p4-orange: #922700;
    --aqua-color-interface-neutral100: #FDFDFD;
    --aqua-color-interface-neutral200: #FAFAFA;
    --aqua-color-interface-neutral300: #F7F7F7;
    --aqua-color-interface-neutral400: #F3F3F3;
    --aqua-color-interface-neutral500: #ECECEC;
    --aqua-color-interface-neutral600: #E5E5E5;
    --aqua-color-interface-neutral700: #D7D7D7;
    --aqua-color-interface-neutral800: #C8C8C8;
    --aqua-color-interface-neutral900: #B1B1B1;
    --aqua-color-interface-neutral1000: #999999;
    --aqua-color-interface-neutral1100: #666666;
    --aqua-color-interface-neutral1200: #333333;
    --aqua-color-interface-blue100: #DEF8FF;
    --aqua-color-interface-blue200: #BFEFFF;
    --aqua-color-interface-blue300: #A4E5FF;
    --aqua-color-interface-blue400: #8BDBFE;
    --aqua-color-interface-blue500: #55C7FF;
    --aqua-color-interface-blue600: #4FA8FB;
    --aqua-color-interface-blue700: #468AF3;
    --aqua-color-interface-blue800: #3B6DE6;
    --aqua-color-interface-blue900: #2D52D2;
    --aqua-color-interface-blue1000: #1F3AB5;
    --aqua-color-interface-blue1100: #10288C;
    --aqua-color-interface-blue1200: #001E55;
    --aqua-color-interface-green100: #DBFDED;
    --aqua-color-interface-green200: #BBF9DD;
    --aqua-color-interface-green300: #9FF3CE;
    --aqua-color-interface-green400: #87ECC0;
    --aqua-color-interface-green500: #56E2A8;
    --aqua-color-interface-green600: #3CCA90;
    --aqua-color-interface-green700: #27B17B;
    --aqua-color-interface-green800: #179869;
    --aqua-color-interface-green900: #0A8058;
    --aqua-color-interface-green1000: #036949;
    --aqua-color-interface-green1100: #01523B;
    --aqua-color-interface-green1200: #003C2D;
    --aqua-color-interface-purple100: #F8EDFD;
    --aqua-color-interface-purple200: #F0DBFA;
    --aqua-color-interface-purple300: #E9C9F6;
    --aqua-color-interface-purple400: #D9A6EC;
    --aqua-color-interface-purple500: #CE8BE4;
    --aqua-color-interface-purple600: #C271D1;
    --aqua-color-interface-purple700: #B458BE;
    --aqua-color-interface-purple800: #A440A8;
    --aqua-color-interface-purple900: #912A91;
    --aqua-color-interface-purple1000: #7B1876;
    --aqua-color-interface-purple1100: #620E57;
    --aqua-color-interface-purple1200: #460F32;
    --aqua-color-interface-red100: #FFE9E8;
    --aqua-color-interface-red200: #FFD3D2;
    --aqua-color-interface-red300: #FFBCBB;
    --aqua-color-interface-red400: #FEA5A5;
    --aqua-color-interface-red500: #FD747B;
    --aqua-color-interface-red600: #F35A69;
    --aqua-color-interface-red700: #E1455B;
    --aqua-color-interface-red800: #CC334F;
    --aqua-color-interface-red900: #B42545;
    --aqua-color-interface-red1000: #9B1A3B;
    --aqua-color-interface-red1100: #821131;
    --aqua-color-interface-red1200: #690A28;
    --aqua-color-interface-yellow100: #FFF7E3;
    --aqua-color-interface-yellow200: #FFEFC8;
    --aqua-color-interface-yellow300: #FFE7AE;
    --aqua-color-interface-yellow400: #FFDE94;
    --aqua-color-interface-yellow500: #FFCA57;
    --aqua-color-interface-yellow600: #FEB83C;
    --aqua-color-interface-yellow700: #F8A62C;
    --aqua-color-interface-yellow800: #EF9625;
    --aqua-color-interface-yellow900: #E58723;
    --aqua-color-interface-yellow1000: #D97824;
    --aqua-color-interface-yellow1100: #CD6A26;
    --aqua-color-interface-yellow1200: #C05C27;
    --aqua-color-interface-orange100: #FFECD8;
    --aqua-color-interface-orange200: #FFD9B1;
    --aqua-color-interface-orange300: #FFC48A;
    --aqua-color-interface-orange400: #FFAF62;
    --aqua-color-interface-orange500: #FF9735;
    --aqua-color-interface-orange600: #FE7E00;
    --aqua-color-interface-orange700: #F26A00;
    --aqua-color-interface-orange800: #E15A00;
    --aqua-color-interface-orange900: #CE4C00;
    --aqua-color-interface-orange1000: #BA3F00;
    --aqua-color-interface-orange1100: #A63200;
    --aqua-color-interface-orange1200: #922700;
    /* Color Palette */
    /* AQUA SITE CSS */
    --mobile-footer-height: 4.5em;
    --nav-background-color: #000000;
    --nav-font-color: white;
    --notification-font-color: white;
    --nav-icon-color: #999999;
    --dark-font-color: black;
    --light-font-color: #999999;
    --control-color: #999999;
    --control-hover-color: #c8c8c8;
    --control-lighthover-color: #e5e5e5;
    --btn-primary-color: #ffffff;
    --btn-secondary-background-color: #ffffff;
    --btn-secondary-hover-color: #c8c8c8;
    --btn-ghost-background-color: transparent;
    --btn-ghost-hover-color: #e5e5e5;
    --btn-danger-color: #ffffff;
    --table-cell-bottom-border-color: rgba(153, 153, 153, 0.5);
    --table-cell-right-border-color: rgba(153, 153, 153, 0.2);
    --table-border-color: rgba(153, 153, 153, 0.5);
    --scrollbar-color: #999999;
    --table-dragging-shadow-color: rgba(0,0,0,.5);
    --icon-highlight-amber: #FFB41E;
    --btn-autoclose-override-color: #FF9191;
    --card-image-primary-color: #001E55;
    --card-image-secondary-color: #231EDC;
    --card-image-gradient-green: #78FAC8;
    --card-image-gradient-lighblue: #0A7DFF;
    --comment-background-lightgrey: #F3F3F3;
    --font-terms-color: #666666;
    --no-background-color: transparent;
    /* AQUA SITE CSS */
    /* AQUA SITE NON MATCHING COLORS */
    --user0-color: #d3dedc;
    --user1-color: #c1a3a3;
    --user2-color: #876445;
    --user3-color: #99a799;
    --user4-color: #eae7c6;
    --user5-color: #6d8299;
    --user6-color: #c6d57e;
    --user7-color: #bfa2db;
    --user8-color: #ffc4e1;
    --user9-color: #eae7c6;
    --btn-secondary-disabled-color: #cccbec;
    --btn-danger-background-color: #eb0d19;
    --btn-danger-hover-color: #f65962;
    --btn-danger-focus-color: #f65962;
    --btn-danger-active-color: #ad0a12;
    --device-color-red: var(--aqua-color-brand-p1-red);
    --device-color-amber: var(--aqua-color-interface-yellow800);
    --device-color-green: var(--aqua-color-brand-p1-green);
    --device-color-yellow: var(--aqua-color-interface-yellow500);
    --device-color-purple: var(--aqua-color-interface-purple800);
    --device-color-grey: var(--aqua-color-interface-neutral900);
    --border-color-grey: #808080;
    --device-color-lightgreen: var(--aqua-color-interface-green400);
    --device-color-darkpurple: var(--aqua-color-interface-purple1200);
    --comment-color-grey: #707070;
    --lightbox-background-color: #262626;
    --font-level-color: #f4f4f4;
    /* AQUA SITE NON MATCHING COLORS */
    /* LIGHT MODE COLORS */
    /* Text */
    --aqua-color-text-primary: var(--aqua-color-brand-core-black);
    --aqua-color-text-secondary: var(--aqua-color-interface-neutral1100);
    --aqua-color-text-inverse: var(--aqua-color-brand-core-white);
    --aqua-color-text-danger: var(--aqua-color-interface-red900);
    --aqua-color-text-warning: var(--aqua-color-interface-yellow1200);
    --aqua-color-text-success: var(--aqua-color-interface-green900);
    --aqua-color-text-information: var(--aqua-color-interface-blue800);
    --aqua-color-text-discovery: var(--aqua-color-interface-purple900);
    /* Text */
    /* Link */
    --aqua-color-link: var(--aqua-color-interface-blue900);
    --aqua-color-link-visited: var(--aqua-color-interface-purple1000);
    /* Link */
    /* Icon */
    --aqua-color-icon-primary: var(--aqua-color-brand-core-black);
    --aqua-color-icon-secondary: var(--aqua-color-interface-neutral1200);
    --aqua-color-icon-subtle: var(--aqua-color-interface-neutral1100);
    --aqua-color-icon-danger: var(--aqua-color-interface-red900);
    --aqua-color-icon-warning: var(--aqua-color-interface-yellow1200);
    --aqua-color-icon-success: var(--aqua-color-interface-green900);
    --aqua-color-icon-information: var(--aqua-color-interface-blue800);
    --aqua-color-icon-discovery: var(--aqua-color-interface-purple900);
    /* Icon */
    /* Border */
    --aqua-color-border: var(--aqua-color-interface-neutral800);
    --aqua-color-border-focussed: var(--aqua-color-interface-blue700);
    --aqua-color-border-input: var(--aqua-color-interface-neutral1000);
    --aqua-color-border-selected: var(--aqua-color-interface-blue900);
    --aqua-color-border-danger: var(--aqua-color-interface-red800);
    --aqua-color-border-warning: var(--aqua-color-interface-yellow800);
    --aqua-color-border-success: var(--aqua-color-interface-green800);
    --aqua-color-border-information: var(--aqua-color-interface-blue900);
    --aqua-color-border-discovery: var(--aqua-color-interface-purple1000);
    /* Border */
    /* Surface */
    --aqua-surface-level-0: var(--aqua-color-interface-neutral300);
    --aqua-surface-level-1: var(--aqua-color-interface-neutral100);
    --aqua-surface-level-2: var(--aqua-color-brand-core-white);
    --aqua-surface-danger-subtle: var(--aqua-color-interface-red200);
    --aqua-surface-danger-hovered-subtle: var(--aqua-color-interface-red300);
    --aqua-surface-danger-hovered-subtle: var(--aqua-color-interface-red400);
    --aqua-surface-danger-bold: var(--aqua-color-brand-p1-red);
    --aqua-surface-danger-hovered-bold: var(--aqua-color-interface-red500);
    --aqua-surface-danger-pressed-bold: var(--aqua-color-interface-red400);
    --aqua-surface-warning-subtle: var(--aqua-color-interface-yellow200);
    --aqua-surface-warning-hovered-subtle: var(--aqua-color-interface-yellow300);
    --aqua-surface-warning-pressed-subtle: var(--aqua-color-interface-yellow400);
    --aqua-surface-warning-bold: var(--aqua-color-brand-p1-yellow);
    --aqua-surface-warning-hovered-bold: var(--aqua-color-interface-yellow500);
    --aqua-surface-warning-pressed-bold: var(--aqua-color-interface-yellow400);
    --aqua-surface-success-subtle: var(--aqua-color-interface-green200);
    --aqua-surface-success-hovered-subtle: var(--aqua-color-interface-green300);
    --aqua-surface-success-pressed-subtle: var(--aqua-color-interface-green400);
    --aqua-surface-success-bold: var(--aqua-color-brand-p1-green);
    --aqua-surface-success-hovered-bold: var(--aqua-color-interface-green500);
    --aqua-surface-success-pressed-bold: var(--aqua-color-interface-green400);
    --aqua-surface-information-subtle: var(--aqua-color-interface-blue200);
    --aqua-surface-information-hovered-subtle: var(--aqua-color-interface-blue300);
    --aqua-surface-information-pressed-subtle: var(--aqua-color-interface-blue400);
    --aqua-surface-information-bold: var(--aqua-color-interface-blue600);
    --aqua-surface-information-hovered-bold: var(--aqua-color-interface-blue500);
    --aqua-surface-information-pressed-bold: var(--aqua-color-interface-blue400);
    --aqua-surface-discovery-subtle: var(--aqua-color-interface-purple200);
    --aqua-surface-discovery-hovered-subtle: var(--aqua-color-interface-purple300);
    --aqua-surface-discovery-pressed-subtle: var(--aqua-color-interface-purple400);
    --aqua-surface-discovery-bold: var(--aqua-color-interface-purple800);
    --aqua-surface-discovery-hovered-bold: var(--aqua-color-interface-purple500);
    --aqua-surface-discovery-pressed-bold: var(--aqua-color-interface-purple400);
    /* Surface */
    /* User Avatars */
    --aqua-color-user-1: var(--aqua-color-interface-green900);
    --aqua-color-user-2: var(--aqua-color-interface-purple800);
    --aqua-color-user-3: var(--aqua-color-interface-red800);
    --aqua-color-user-4: var(--aqua-color-interface-blue1200);
    --aqua-color-user-5: var(--aqua-color-interface-blue1100);
    --aqua-color-user-6: var(--aqua-color-interface-green1100);
    --aqua-color-user-7: var(--aqua-color-interface-purple1100);
    --aqua-color-user-8: var(--aqua-color-interface-red1100);
    --aqua-color-user-9: var(--aqua-color-interface-purple1000);
    --aqua-color-user-10: var(--aqua-color-interface-green1000);
    /* User Avatars */

    --input-background-color: var(--aqua-color-interface-neutral200);
    --input-underline-color: var(--aqua-color-brand-core-black);
    --input-focus-color: var(--aqua-color-brand-p1-blue);
    --input-hover-color: var(--aqua-color-interface-neutral400);
    --body-background-color: #f4f4f4;
    --font-color: black;
    --highlight-color: #1c3ffd; /*NOMATCH*/
    --success-color: var(--aqua-color-brand-p1-green); /*NOMATCH*/
    --warning-color: var(--aqua-color-interface-yellow800); /*NOMATCH*/
    --danger-color: var(--aqua-color-brand-p1-red); /*NOMATCH*/
    --container-background-color: white;
    --container-highlight-color: #f9f9f9;
    --container-element-color: rgba(0,0,0,.2);
    --menu-background-color: white;
    --control-font-color: black;
    --control-background-color: white;
    --control-disabled-color: #f0f0f0; /*NOMATCH*/
    --modal-background-color: white;
    --modal-control-background-color: #f4f4f4; /*NOMATCH*/
    --summary-background-color: white;
    --modal-font-color: black;
    --btn-primary-background-color: #231edc;
    --btn-primary-hover-color: #706bff; /*NOMATCH*/
    --btn-primary-focus-color: #706bff; /*NOMATCH*/
    --btn-primary-active-color: #0000a9; /*NOMATCH*/
    --btn-primary-disabled-color: #cccbec; /*NOMATCH*/
    --btn-secondary-color: #231edc;
    --btn-secondary-focus-color: #706bff; /*NOMATCH*/
    --btn-secondary-active-color: #0000a9; /*NOMATCH*/
    --btn-ghost-color: #231edc;
    --btn-ghost-focus-color: #4965fd;
    --btn-ghost-active-color: #0000a9; /*NOMATCH*/
    --summary-background-color: white;
    --table-even-background-color: white;
    --table-odd-background-color: #f9f9f9; /*NOMATCH*/
    --table-hover-background-color: #c8c8c8;
    --table-color: black;
    --shadow-color: rgba(0,0,0,.25);
    --device-color-black: black;
    --card-admin-background-color: #ffffff;
    --card-overflows-background-color: #ffffff;
    --card-overflows-background-color-hover: #231edc;
    /* LIGHT MODE COLORS */
}

[data-theme="dark"] {
    /* Text */
    --aqua-color-text-primary: var(--aqua-color-brand-core-white);
    --aqua-color-text-secondary: var(--aqua-color-interface-neutral900);
    --aqua-color-text-inverse: var(--aqua-color-brand-core-black);
    --aqua-color-text-danger: var(--aqua-color-interface-red300);
    --aqua-color-text-warning: var(--aqua-color-interface-yellow300);
    --aqua-color-text-success: var(--aqua-color-interface-green300);
    --aqua-color-text-information: var(--aqua-color-interface-blue300);
    --aqua-color-text-discovery: var(--aqua-color-interface-purple300);
    /* Text */
    /* Link */
    --aqua-color-link: var(--aqua-color-interface-blue400);
    --aqua-color-link-visited: var(--aqua-color-interface-purple400);
    /* Link */
    /* Icon */
    --aqua-color-icon-primary: var(--aqua-color-brand-core-white);
    --aqua-color-icon-secondary: var(--aqua-color-interface-neutral600);
    --aqua-color-icon-subtle: var(--aqua-color-interface-neutral900);
    --aqua-color-icon-danger: var(--aqua-color-interface-red500);
    --aqua-color-icon-warning: var(--aqua-color-interface-yellow500);
    --aqua-color-icon-success: var(--aqua-color-interface-green500);
    --aqua-color-icon-information: var(--aqua-color-interface-blue500);
    --aqua-color-icon-discovery: var(--aqua-color-interface-purple500);
    /* Icon */
    /* Border */
    --aqua-color-border: var(--aqua-color-interface-neutral500);
    --aqua-color-border-focussed: var(--aqua-color-interface-blue400);
    --aqua-color-border-input: var(--aqua-color-interface-neutral800);
    --aqua-color-border-selected: var(--aqua-color-interface-blue500);
    --aqua-color-border-danger: var(--aqua-color-interface-red500);
    --aqua-color-border-warning: var(--aqua-color-interface-yellow500);
    --aqua-color-border-success: var(--aqua-color-interface-green500);
    --aqua-color-border-information: var(--aqua-color-interface-blue500);
    --aqua-color-border-discovery: var(--aqua-color-interface-purple500);
    /* Border */
    /* Surface */
    --aqua-surface-level-0: var(--aqua-color-interface-neutral1200);
    --aqua-surface-level-1: var(--aqua-color-interface-neutral200);
    --aqua-surface-level-2: var(--aqua-color-interface-neutral300);
    --aqua-surface-danger-subtle: var(--aqua-color-interface-red200);
    --aqua-surface-danger-hovered-subtle: var(--aqua-color-interface-red300);
    --aqua-surface-danger-hovered-subtle: var(--aqua-color-interface-red400);
    --aqua-surface-danger-bold: var(--aqua-color-interface-red600);
    --aqua-surface-danger-hovered-bold: var(--aqua-color-interface-red500);
    --aqua-surface-danger-pressed-bold: var(--aqua-color-interface-red400);
    --aqua-surface-warning-subtle: var(--aqua-color-interface-yellow200);
    --aqua-surface-warning-hovered-subtle: var(--aqua-color-interface-yellow300);
    --aqua-surface-warning-pressed-subtle: var(--aqua-color-interface-yellow400);
    --aqua-surface-warning-bold: var(--aqua-color-interface-yellow600);
    --aqua-surface-warning-hovered-bold: var(--aqua-color-interface-yellow500);
    --aqua-surface-warning-pressed-bold: var(--aqua-color-interface-yellow400);
    --aqua-surface-success-subtle: var(--aqua-color-interface-green200);
    --aqua-surface-success-hovered-subtle: var(--aqua-color-interface-green300);
    --aqua-surface-success-pressed-subtle: var(--aqua-color-interface-green400);
    --aqua-surface-success-bold: var(--aqua-color-interface-green600);
    --aqua-surface-success-hovered-bold: var(--aqua-color-interface-green500);
    --aqua-surface-success-pressed-bold: var(--aqua-color-interface-green400);
    --aqua-surface-information-subtle: var(--aqua-color-interface-blue200);
    --aqua-surface-information-hovered-subtle: var(--aqua-color-interface-blue300);
    --aqua-surface-information-pressed-subtle: var(--aqua-color-interface-blue400);
    --aqua-surface-information-bold: var(--aqua-color-interface-blue600);
    --aqua-surface-information-hovered-bold: var(--aqua-color-interface-blue500);
    --aqua-surface-information-pressed-bold: var(--aqua-color-interface-blue400);
    --aqua-surface-discovery-subtle: var(--aqua-color-interface-purple200);
    --aqua-surface-discovery-hovered-subtle: var(--aqua-color-interface-purple300);
    --aqua-surface-discovery-pressed-subtle: var(--aqua-color-interface-purple400);
    --aqua-surface-discovery-bold: var(--aqua-color-interface-purple600);
    --aqua-surface-discovery-hovered-bold: var(--aqua-color-interface-purple500);
    --aqua-surface-discovery-pressed-bold: var(--aqua-color-interface-purple400);
    /* Surface */
    /* User Avatars */
    --aqua-color-user-1: var(--aqua-color-interface-green600);
    --aqua-color-user-2: var(--aqua-color-interface-purple600);
    --aqua-color-user-3: var(--aqua-color-interface-red400);
    --aqua-color-user-4: var(--aqua-color-interface-yellow500);
    --aqua-color-user-5: var(--aqua-color-interface-blue600);
    --aqua-color-user-6: var(--aqua-color-interface-green300);
    --aqua-color-user-7: var(--aqua-color-interface-purple300);
    --aqua-color-user-8: var(--aqua-color-interface-red200);
    --aqua-color-user-9: var(--aqua-color-interface-yellow300);
    --aqua-color-user-10: var(--aqua-color-interface-blue300);
    /* User Avatars */

    --body-background-color: #121212;
    --input-background-color: var(--aqua-color-interface-neutral1200);
    --input-underline-color: var(--aqua-color-brand-core-white);
    --input-focus-color: var(--aqua-color-interface-purple300);
    --input-hover-color: var(--aqua-color-interface-neutral1100);
    --font-color: white;
    --highlight-color: #bb86fc; /*NOMATCH*/
    --container-background-color: #1c1c1c; /*NOMATCH*/
    --container-highlight-color: #181818; /*NOMATCH*/
    --container-element-color: rgba(255,255,255,.2);
    --menu-background-color: #262626; /*NOMATCH*/
    --control-font-color: #FFFFFF;
    --control-background-color: #282828; /*NOMATCH*/
    --control-disabled-color: #282828; /*NOMATCH*/
    --modal-background-color: #181818; /*NOMATCH*/
    --modal-control-background-color: #282828; /*NOMATCH*/
    --modal-font-color: #FFFFFF;
    --btn-primary-background-color: #BB86FC; /*NOMATCH*/
    --btn-primary-hover-color: #DCBFFF; /*NOMATCH*/
    --btn-primary-focus-color: #DCBFFF; /*NOMATCH*/
    --btn-primary-active-color: #7300FF; /*NOMATCH*/
    --btn-primary-disabled-color: #EAD9FF; /*NOMATCH*/
    --btn-secondary-color: #BB86FC; /*NOMATCH*/
    --btn-secondary-focus-color: #DCBFFF; /*NOMATCH*/
    --btn-secondary-active-color: #7300FF; /*NOMATCH*/
    --btn-ghost-color: #BB86FC; /*NOMATCH*/
    --btn-ghost-focus-color: #7300FF; /*NOMATCH*/
    --btn-ghost-active-color: #BB86FC; /*NOMATCH*/
    --container-background-color: #515050; /*NOMATCH*/
    --summary-background-color: #404040; /*NOMATCH*/
    --table-even-background-color: #262626; /*NOMATCH*/
    --table-odd-background-color: #181818; /*NOMATCH*/
    --table-hover-background-color: #7F7F7F;
    --table-color: white;
    --shadow-color: #282828; /*NOMATCH*/
    --device-color-black: #EFEFEF; /*NOMATCH*/
    --card-admin-background-color: #515051;
    --card-overflows-background-color: #515051;
    --card-overflows-background-color-hover: #BB86FC;
}

body {
    background-color: var(--body-background-color);
    color: var(--font-color);
    font-family: var(--aqua-font-family);
    font-size: var(--aqua-font-size-small);
}

p {
    font-size: var(--aqua-font-size-small);
}

h1 {
    font-size: var(--aqua-font-size-xxx-large);
    font-weight: var(--aqua-font-weight-semi-bold);
}

h2 {
    font-size: var(--aqua-font-size-xx-large);
    font-weight: var(--aqua-font-weight-semi-bold);
}

h3 {
    font-size: var(--aqua-font-size-x-large);
    font-weight: var(--aqua-font-weight-semi-bold);
}

h4 {
    font-size: var(--aqua-font-size-large);
    font-weight: var(--aqua-font-weight-semi-bold);
}

h5 {
    font-size: var(--aqua-font-size-medium);
    font-weight: var(--aqua-font-weight-semi-bold);
}

h6 {
    font-size: var(--aqua-font-size-small);
    font-weight: var(--aqua-font-weight-semi-bold);
}

.text-sm {
    font-size: var(--aqua-font-size-x-small) !important;
}

.text-thin {
    font-weight: var(--aqua-font-weight-thin);
}

.content-wrapper {
    display: flex;
}

.page-content {
    flex: 1;
    padding: 24px 30px;
}

.page-content-with-datatable {
    flex: 1;
    padding: 24px 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

a, .btn-link, a:not([href]):not([class]) {
    color: var(--highlight-color);
    text-decoration: none;
    cursor: pointer;
}

    a:hover:not(.button), .btn-link:hover, a:not([href]):not([class]):hover {
        color: var(--highlight-color) !important;
        text-decoration: underline;
    }

@media only screen and (max-width: 576px) {
    .page-content {
        padding: 10px;
    }
}

ul.icons > li:hover > .icon-wrapper .icon {
    background-color: var(--nav-font-color) !important;
}

ul.icons > li:hover > .menu-text {
    color: var(--nav-font-color) !important;
}

::placeholder {
    color: var(--light-font-color);
    opacity: 1;
}

.input-wrapper {
    position: relative;
    height: fit-content;
}

input:not([type=checkbox]):not([type=radio]):not(:where(#clr-picker, #clr-picker *)), textarea:not(:where(#clr-picker, #clr-picker *)), .select:not(:where(#clr-picker, #clr-picker *)) {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: var(--aqua-font-size-medium);
    font-weight: var(--aqua-font-weight-normal);
    line-height: 1.5;
    color: var(--control-font-color);
    background-color: var(--control-background-color);
    background-clip: padding-box;
    border: none;
    border-bottom: 1px solid var(--light-font-color);
    transition: border-color .15s ease-in-out;
}

.text-sm input:not([type=checkbox]):not([type=radio]):not(:where(#clr-picker, #clr-picker *)), .text-sm textarea:not(:where(#clr-picker, #clr-picker *)), .text-sm .select:not(:where(#clr-picker, #clr-picker *)) {
    font-size: var(--aqua-font-size-x-small);
}

.card-text input:not([type=checkbox]):not([type=radio]):not(:where(#clr-picker, #clr-picker *)),
.card-text textarea:not(:where(#clr-picker, #clr-picker *)),
.card-text .select:not(:where(#clr-picker, #clr-picker *)) {
    background-color: var(--modal-control-background-color);
}

input:not([type=checkbox]):not([type=radio]):not(:where(#clr-picker, #clr-picker *)), .select:not(:where(#clr-picker, #clr-picker *)) {
    height: calc(1.5em + .75rem + 2px);
}

input[type="password"]::-ms-reveal, -ms-clear {
    display: none !important;
}

input:not([type=checkbox]):not([type=radio]):not(:where(#clr-picker, #clr-picker *)):disabled, textarea:not(:where(#clr-picker, #clr-picker *)):disabled {
    background-color: var(--control-disabled-color);
}

input:not([type=radio]):not(:where(#clr-picker, #clr-picker *)):focus, textarea:not(:where(#clr-picker, #clr-picker *)):focus, .select:not(:where(#clr-picker, #clr-picker *)):focus {
    outline: 2px solid var(--highlight-color) !important;
}

input.modified.valid:not(:where(#clr-picker, #clr-picker *)), textarea.modified.valid:not(:where(#clr-picker, #clr-picker *)), .select.modified.valid:not(:where(#clr-picker, #clr-picker *)) {
    border-bottom-color: var(--success-color) !important;
}

input.invalid:not(:where(#clr-picker, #clr-picker *)), textarea.invalid:not(:where(#clr-picker, #clr-picker *)), .select.invalid:not(:where(#clr-picker, #clr-picker *)) {
    border-bottom-color: var(--danger-color) !important;
}

.validation-message {
    color: var(--danger-color);
}

.validation-icon {
    position: absolute;
    right: 0.6rem;
    top: 1px;
}

input[type=date] ~ .validation-icon,
input[type=number] ~ .validation-icon,
.select-validation-icon {
    right: 2rem;
}

.card-text {
    color: var(--control-font-color);
}

.color-BodyBackground {
    color: var(--body-background-color) !important;
}

.color-NavBackground {
    color: var(--nav-background-color) !important;
}

.color-NavFont {
    color: var(--nav-font-color) !important;
}

.color-NavIcon {
    color: var(--nav-icon-color) !important;
}

.color-Font {
    color: var(--font-color) !important;
}

.color-ModalFont {
    color: var(--modal-font-color) !important;
}

.color-LightFont {
    color: var(--light-font-color) !important;
}

.color-White {
    color: var(--aqua-color-brand-core-white) !important;
}

.color-ControlFont {
    color: var(--control-font-color) !important;
}

.color-ControlBackground {
    color: var(--control-background-color) !important;
}

.color-ControlDisabled {
    color: var(--light-font-color) !important;
}

.color-ControlHover {
    color: var(--control-color) !important;
}

.color-ControlLightHover {
    color: var(--control-lighthover-color) !important;
}

.color-Highlight {
    color: var(--highlight-color) !important;
}

.color-Success {
    color: var(--success-color) !important;
}

.color-Warning {
    color: var(--warning-color) !important;
}

.color-Danger {
    color: var(--danger-color) !important;
}

.color-User0 {
    color: var(--user0-color) !important;
}

.color-User1 {
    color: var(--user1-color) !important;
}

.color-User2 {
    color: var(--user2-color) !important;
}

.color-User3 {
    color: var(--user3-color) !important;
}

.color-User4 {
    color: var(--user4-color) !important;
}

.color-User5 {
    color: var(--user5-color) !important;
}

.color-User6 {
    color: var(--user6-color) !important;
}

.color-User7 {
    color: var(--user7-color) !important;
}

.color-User8 {
    color: var(--user8-color) !important;
}

.color-User9 {
    color: var(--user9-color) !important;
}

.color-ButtonPrimary {
    color: var(--btn-primary-color) !important;
}

.color-ButtonSecondary {
    color: var(--btn-secondary-color) !important;
}

.color-ButtonDanger {
    color: var(--btn-danger-color) !important;
}

.color-ContainerBackground {
    color: var(--container-background-color) !important;
}

.color-ContainerElement {
    color: var(--container-element-color) !important;
}

.color-MenuBackground {
    color: var(--menu-background-color) !important;
}

.color-TableEvenBackground {
    color: var(--table-even-background-color) !important;
}

.color-TableOddBackground {
    color: var(--table-odd-background-color) !important;
}

.color-TableHoverBackground {
    color: var(--table-hover-background-color) !important;
}

.color-TableCellBottomBorder {
    color: var(--table-cell-bottom-border-color) !important;
}

.color-TableCellRightBorder {
    color: var(--table-cell-right-border-color) !important;
}

.color-TableBorder {
    color: var(--table-border-color) !important;
}

.color-Table {
    color: var(--table-color) !important;
}

.color-ShadowColor {
    color: var(--shadow-color);
}

.color-Yellow {
    color: var(--device-color-yellow) !important;
}

.background-BodyBackground {
    background-color: var(--body-background-color) !important;
}

.background-NavBackground {
    background-color: var(--nav-background-color) !important;
}

.background-NavFont {
    background-color: var(--nav-font-color) !important;
}

.background-NavIcon {
    background-color: var(--nav-icon-color) !important;
}

.background-Font {
    background-color: var(--font-color) !important;
}

.background-ModalFont {
    background-color: var(--modal-font-color) !important;
}

.background-LightFont {
    background-color: var(--light-font-color) !important;
}

.background-White {
    background-color: var(--aqua-color-brand-core-white) !important;
}

.background-ControlFont {
    background-color: var(--control-font-color) !important;
}

.background-ControlBackground {
    background-color: var(--control-background-color) !important;
}

.background-ControlDisabled {
    background-color: var(--control-disabled-color) !important;
}

.background-ControlHover {
    background-color: var(--control-hover-color) !important;
}

.background-ControlLightHover {
    background-color: var(--control-lighthover-color) !important;
}

.background-Highlight {
    background-color: var(--highlight-color) !important;
}

.background-Success {
    background-color: var(--success-color) !important;
}

.background-Warning {
    background-color: var(--warning-color) !important;
}

.background-Danger {
    background-color: var(--danger-color) !important;
}

.background-User0 {
    background-color: var(--user0-color) !important;
}

.background-User1 {
    background-color: var(--user1-color) !important;
}

.background-User2 {
    background-color: var(--user2-color) !important;
}

.background-User3 {
    background-color: var(--user3-color) !important;
}

.background-User4 {
    background-color: var(--user4-color) !important;
}

.background-User5 {
    background-color: var(--user5-color) !important;
}

.background-User6 {
    background-color: var(--user6-color) !important;
}

.background-User7 {
    background-color: var(--user7-color) !important;
}

.background-User8 {
    background-color: var(--user8-color) !important;
}

.background-User9 {
    background-color: var(--user9-color) !important;
}

.background-ButtonPrimary {
    background-color: var(--btn-primary-color) !important;
}

.background-ButtonSecondary {
    background-color: var(--btn-secondary-color) !important;
}

.background-ButtonDanger {
    background-color: var(--btn-danger-color) !important;
}

.background-ContainerBackground {
    background-color: var(--container-background-color) !important;
}

.background-ContainerElement {
    background-color: var(--container-element-color) !important;
}

.background-MenuBackground {
    background-color: var(--menu-background-color) !important;
}

.background-TableEvenBackground {
    background-color: var(--table-even-background-color) !important;
}

.background-TableOddBackground {
    background-color: var(--table-odd-background-color) !important;
}

.background-TableHoverBackground {
    background-color: var(--table-hover-background-color) !important;
}

.background-TableCellBottomBorder {
    background-color: var(--table-cell-bottom-border-color) !important;
}

.background-TableCellRightBorder {
    background-color: var(--table-cell-right-border-color) !important;
}

.background-TableBorder {
    background-color: var(--table-border-color) !important;
}

.background-Table {
    background-color: var(--table-color) !important;
}

.background-ShadowColor {
    background-color: var(--shadow-color);
}

.background-Purple {
    background-color: var(--device-color-purple) !important;
}

.background-Yellow {
    background-color: var(--device-color-yellow) !important;
}

.background-GrayDark {
    background-color: var(--device-color-grey) !important;
}

.background-Black {
    background-color: var(--aqua-color-brand-core-black) !important;
}

.background-CurrentColor {
    background-color: currentColor !important;
}

.border-Success {
    border-color: var(--success-color) !important;
}

.border-Warning {
    border-color: var(--warning-color) !important;
}

.border-Danger {
    border-color: var(--danger-color) !important;
}

.border-Yellow {
    border-color: var(--device-color-yellow) !important;
}

.border-Top {
    border-top: 5px solid;
}

.border-Right {
    border-right: 5px solid;
}

.border-Bottom {
    border-bottom: 5px solid;
}

.border-Left {
    border-left: 5px solid;
}

.border-Full {
    border: 5px solid;
}

.dashboard-card {
    padding: 16px;
    border-radius: 8px !important;
    background: var(--container-background-color);
}

.card {
    box-shadow: 0px 2px 2px var(--shadow-color) !important;
    border-radius: 8px !important;
}



.card-title {
    margin-bottom: 0px;
    border-bottom: 1px solid var(--control-lighthover-color);
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-thumb {
    min-height: 80px;
    border-radius: 40px;
    box-shadow: inset 0 0 20px 20px var(--scrollbar-color);
    border: solid 4px transparent;
}

.list-group-item {
    background-color: var(--modal-control-background-color);
}

.modal-content {
    background-color: var(--modal-control-background-color);
}

input:disabled, textarea:disabled, .select.background-ControlDisabled {
    color: var(--light-font-color) !important;
}

input:disabled, textarea:disabled {
    opacity: 0.5;
}

.select.background-ControlDisabled .icon {
    opacity: 0;
}

.main-content {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-flow: column;
    height: 100vh;
    transition: width 0.2s;
}

::placeholder {
    color: var(--light-font-color);
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--light-font-color);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--light-font-color);
}

.custom-control-label {
    color: var(--aqua-color-brand-core-black) !important;
}

@media only screen and (max-width: 576px) {
    .page-content, .page-content-with-datatable {
        margin-bottom: var(--mobile-footer-height);
        overflow-y: auto;
    }

    .main-content {
        width: 100% !important;
    }
}

.clr-field {
    display: block !important;
    width: 100%;
    position: relative;
}

.clr-field > button {
    position: absolute !important;
    top: 50% !important;
    left: 8px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 3px !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    background: currentColor !important;
    z-index: 1;
}

.clr-field > input[type="text"] {
    padding-left: 2.25rem !important;
}

/*#clr-picker {
    z-index: 2000 !important;
}*/