From 67d32af7a23b608eef18dc539b98f15582b02d9e Mon Sep 17 00:00:00 2001 From: Jason Thomas Date: Sun, 19 Nov 2023 19:46:39 -0700 Subject: [PATCH 01/21] Astro css --- .../plugins/openc3-tool-base/package.json | 1 + .../openc3-tool-base/src/plugins/vuetify.js | 13 +- .../plugins/openc3-tool-base/yarn.lock | 85 +- .../packages/openc3-tool-common/package.json | 1 + .../src/assets/stylesheets/astro.core.css | 2173 -------- .../src/assets/stylesheets/astro.core.min.css | 122 - .../src/assets/stylesheets/astro.css | 4433 ----------------- .../src/assets/stylesheets/astro.min.css | 168 - .../assets/stylesheets/layout/_overrides.scss | 50 +- .../src/assets/stylesheets/layout/layout.scss | 6 +- .../src/components/EditScreenDialog.vue | 8 +- .../src/components/Graph.vue | 2 +- .../src/components/LogMessages.vue | 9 +- .../src/components/Openc3Screen.vue | 4 - .../src/components/TopBar.vue | 2 +- .../src/components/icons/AstroIcon.vue | 8 +- .../icons/{RuxIcon.vue => CosmosRuxIcon.vue} | 4 +- .../src/components/icons/index.js | 2 +- .../admin/ClassificationBannerSettings.vue | 14 + .../src/tools/admin/EditDialog.vue | 12 +- .../src/tools/admin/PluginDialog.vue | 14 +- .../src/tools/admin/tabs/MicroservicesTab.vue | 2 +- .../src/tools/admin/tabs/ToolsTab.vue | 2 +- .../src/tools/base/AppFooter.vue | 3 +- .../src/tools/base/AppNav.vue | 18 +- .../tools/base/components/Notifications.vue | 9 +- .../examples/cosmos_v5_enterprise_example.py | 21 +- openc3/python/examples/cosmos_v5_example.py | 21 +- openc3/templates/plugin/.gitignore | 1 + openc3/templates/tool_angular/package.json | 1 + openc3/templates/tool_svelte/package.json | 1 + openc3/templates/tool_vue/package.json | 1 + openc3/templates/widget/package.json | 1 + 33 files changed, 191 insertions(+), 7021 deletions(-) delete mode 100644 openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.core.css delete mode 100644 openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.core.min.css delete mode 100644 openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.css delete mode 100644 openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.min.css rename openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/icons/{RuxIcon.vue => CosmosRuxIcon.vue} (95%) create mode 100644 openc3/templates/plugin/.gitignore diff --git a/openc3-cosmos-init/plugins/openc3-tool-base/package.json b/openc3-cosmos-init/plugins/openc3-tool-base/package.json index d9f96ee2a8..a0e80c8621 100644 --- a/openc3-cosmos-init/plugins/openc3-tool-base/package.json +++ b/openc3-cosmos-init/plugins/openc3-tool-base/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@rails/actioncable": "7.1.1", + "@astrouxds/astro-web-components": "7.19.1", "axios": "1.6.1", "date-fns": "2.30.0", "import-map-overrides": "3.1.1", diff --git a/openc3-cosmos-init/plugins/openc3-tool-base/src/plugins/vuetify.js b/openc3-cosmos-init/plugins/openc3-tool-base/src/plugins/vuetify.js index c9f1f9e7e2..c443667bc3 100644 --- a/openc3-cosmos-init/plugins/openc3-tool-base/src/plugins/vuetify.js +++ b/openc3-cosmos-init/plugins/openc3-tool-base/src/plugins/vuetify.js @@ -19,7 +19,14 @@ import Vue from 'vue' import Vuetify from 'vuetify' +// Import and define the individual astro components we use import { AstroIconVuetifyValues } from '../../../packages/openc3-tool-common/src/components/icons/index.js' +import { RuxClock } from '@astrouxds/astro-web-components/dist/components/rux-clock' +customElements.define('rux-clock', RuxClock) +import { RuxIcon } from '@astrouxds/astro-web-components/dist/components/rux-icon' +customElements.define('rux-icon', RuxIcon) +import { RuxStatus } from '@astrouxds/astro-web-components/dist/components/rux-status' +customElements.define('rux-status', RuxStatus) Vue.use(Vuetify) @@ -31,9 +38,9 @@ export default new Vuetify({ }, themes: { dark: { - primary: '#005a8f', - secondary: '#4dacff', - tertiary: '#283f58', + primary: '#005A8F', + secondary: '#4DACFF', + tertiary: '#BBC1C9', }, light: { primary: '#cce6ff', diff --git a/openc3-cosmos-init/plugins/openc3-tool-base/yarn.lock b/openc3-cosmos-init/plugins/openc3-tool-base/yarn.lock index a27dcdb400..d7a39dc81b 100644 --- a/openc3-cosmos-init/plugins/openc3-tool-base/yarn.lock +++ b/openc3-cosmos-init/plugins/openc3-tool-base/yarn.lock @@ -23,6 +23,16 @@ "@jridgewell/gen-mapping" "^0.3.0" "@jridgewell/trace-mapping" "^0.3.9" +"@astrouxds/astro-web-components@7.19.1": + version "7.19.1" + resolved "https://registry.yarnpkg.com/@astrouxds/astro-web-components/-/astro-web-components-7.19.1.tgz#ccd6cea003afe2a007c4abaa9703ce3aeb339acf" + integrity sha512-jYkcCxk09abPper9iFB6zNV+dE2E21c4jo6rvLRSwjxjoWFE7BGqhzGmONhoKwG/z2cRjsE6X+P0JlzK9V6fgw== + dependencies: + "@floating-ui/dom" "~1.0.6" + "@stencil/core" "~3.4.1" + date-fns "~2.21.3" + date-fns-tz "~1.3.7" + "@babel/code-frame@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a" @@ -1436,6 +1446,25 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.53.0.tgz#bea56f2ed2b5baea164348ff4d5a879f6f81f20d" integrity sha512-Kn7K8dx/5U6+cT1yEhpX1w4PCSg0M+XyRILPgvwcEBjerFWCwQj5sbr3/VmxqV0JGHCBCzyd6LxypEuehypY1w== +"@floating-ui/core@^1.0.4": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c" + integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg== + dependencies: + "@floating-ui/utils" "^0.1.3" + +"@floating-ui/dom@~1.0.6": + version "1.0.12" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.12.tgz#07c870a05d9b825a6d7657524f48fe6761722800" + integrity sha512-HeG/wHoa2laUHlDX3xkzqlUqliAfa+zqV04LaKIwNCmCNaW2p0fQi4/Kd0LB4GdFoJ2UllLFq5gWnXAd67lg7w== + dependencies: + "@floating-ui/core" "^1.0.4" + +"@floating-ui/utils@^0.1.3": + version "0.1.6" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" + integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== + "@humanwhocodes/config-array@^0.11.13": version "0.11.13" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297" @@ -1563,6 +1592,11 @@ resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.1.1.tgz#e8c49769d41f35a4473133c259cc98adc04dddf8" integrity sha512-ZRJ9rdwFQQjRbtgJnweY0/4UQyxN6ojEGRdib0JkjnuIciv+4ok/aAeZmBJqNreTMaBqS0eHyA9hCArwN58opg== +"@stencil/core@~3.4.1": + version "3.4.2" + resolved "https://registry.yarnpkg.com/@stencil/core/-/core-3.4.2.tgz#57ce7f71fe18c2ec0967821bec667fc453cca962" + integrity sha512-FAUhUVaakCy29nU2GwO/HQBRV1ihPRvncz3PUc8oR+UJLAxGabTmP8PLY7wvHfbw+Cvi4VXfJFTBvdfDu6iKPQ== + "@types/body-parser@*": version "1.19.2" resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0" @@ -1714,10 +1748,10 @@ resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406" integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ== -"@vue/compiler-sfc@2.7.14": - version "2.7.14" - resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz#3446fd2fbb670d709277fc3ffa88efc5e10284fd" - integrity sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA== +"@vue/compiler-sfc@2.7.15": + version "2.7.15" + resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz#62135fb2f69559fc723fd9c56b8e8b0ac7864a0b" + integrity sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg== dependencies: "@babel/parser" "^7.18.4" postcss "^8.4.14" @@ -2058,13 +2092,14 @@ asynckit@^0.4.0: resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== -axios@0.27.2: - version "0.27.2" - resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972" - integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ== +axios@1.6.1: + version "1.6.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.1.tgz#76550d644bf0a2d469a01f9244db6753208397d7" + integrity sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g== dependencies: - follow-redirects "^1.14.9" + follow-redirects "^1.15.0" form-data "^4.0.0" + proxy-from-env "^1.1.0" babel-loader@^8.2.2: version "8.3.0" @@ -2595,6 +2630,11 @@ csstype@^3.1.0: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== +date-fns-tz@~1.3.7: + version "1.3.8" + resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.8.tgz#083e3a4e1f19b7857fa0c18deea6c2bc46ded7b9" + integrity sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ== + date-fns@2.30.0: version "2.30.0" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0" @@ -2602,6 +2642,11 @@ date-fns@2.30.0: dependencies: "@babel/runtime" "^7.21.0" +date-fns@~2.21.3: + version "2.21.3" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.21.3.tgz#8f5f6889d7a96bbcc1f0ea50239b397a83357f9b" + integrity sha512-HeYdzCaFflc1i4tGbj7JKMjM4cKGYoyxwcIIkHzNgCkX8xXDNJDZXgDDVchIWpN4eQc3lH37WarduXFZJOtxfw== + de-indent@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" @@ -3148,11 +3193,16 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787" integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== -follow-redirects@^1.0.0, follow-redirects@^1.14.9: +follow-redirects@^1.0.0: version "1.15.2" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== +follow-redirects@^1.15.0: + version "1.15.3" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a" + integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q== + form-data@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" @@ -4289,6 +4339,11 @@ proxy-addr@~2.0.7: forwarded "0.2.0" ipaddr.js "1.9.1" +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== + pseudomap@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" @@ -5212,12 +5267,12 @@ vue-template-es2015-compiler@^1.9.0: resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== -vue@2.7.14: - version "2.7.14" - resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17" - integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ== +vue@2.7.15: + version "2.7.15" + resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.15.tgz#94cd34e6e9f22cd2d35a02143f96a5beac1c1f54" + integrity sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ== dependencies: - "@vue/compiler-sfc" "2.7.14" + "@vue/compiler-sfc" "2.7.15" csstype "^3.1.0" vuetify@2.7.1: diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/package.json b/openc3-cosmos-init/plugins/packages/openc3-tool-common/package.json index 152f13b180..367a96a95e 100644 --- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/package.json +++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/package.json @@ -3,6 +3,7 @@ "version": "5.12.1-beta0", "dependencies": { "@rails/actioncable": "7.1.1", + "@astrouxds/astro-web-components": "7.19.1", "axios": "1.6.1", "binary-search": "1.3.6", "date-fns": "2.30.0", diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.core.css b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.core.css deleted file mode 100644 index 1ba221f761..0000000000 --- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.core.css +++ /dev/null @@ -1,2173 +0,0 @@ -:root { - --disabledControlOpacity: 0.4; - --disabledControlCursor: not-allowed; - - --disabledOpacity: 0.4; - --disabledCursor: not-allowed; - - --buttonBorderRadius: 3px; - --defaultBorderRadius: 3px; - - --controlOptionSize: 1.25rem; - --controlBorderRadius: 3px; - - --labelFontSize: 1rem; - --smallLabelFontSize: 0.875rem; - --largeLabelFontSize: 1.125rem; - - /* Typography */ - --fontFamily: "Open Sans", sans-serif; - --fontSize: 1rem; /* 16px */ - --fontSizeXL: 1.125rem; - --fontSizeLG: 1rem; - --fontSizeMD: 0.875rem; - --fontSizeSM: 0.75rem; - --fontSizeXS: 0.65rem; - - --fontFamilyLight: "Open Sans Light", sans-serif; - --fontFamilyMono: "Roboto Mono", monospace; - - --colorBlack: rgb(0, 0, 0); - --colorWhite: rgb(255, 255, 255); - --colorGray: rgb(204, 204, 204); - - --colorPrimary: rgb(0, 90, 143); - --colorSecondary: rgb(77, 172, 255); - --colorTertiary: rgb(40, 63, 88); - --colorQuaternary: rgb(207, 214, 227); - - --statusDarkCritical: rgb(255, 56, 56); - --statusDarkSerious: rgb(255, 179, 0); - --statusDarkCaution: rgb(252, 232, 58); - --statusDarkNormal: rgb(86, 240, 0); - --statusDarkStandby: rgb(45, 204, 255); - --statusDarkOff: rgb(158, 167, 173); - - --statusLightCritical: rgb(255, 42, 4); - --statusLightSerious: rgb(255, 175, 61); - --statusLightCaution: rgb(250, 216, 0); - --statusLightNormal: rgb(0, 226, 0); - --statusLightStandby: rgb(100, 217, 255); - --statusLightOff: rgb(142, 154, 163); - - --colorTag1: rgb(25, 199, 202); - --colorTag2: rgb(120, 112, 208); - --colorTag3: rgb(160, 13, 190); - --colorTag4: rgb(216, 83, 30); - - --colorPrimaryLighten5: rgb(51, 123, 165); - --colorPrimaryLighten1: rgb(51, 123, 165); - --colorPrimaryLighten2: rgb(102, 156, 188); - --colorPrimaryLighten3: rgb(153, 189, 210); - --colorPrimaryLighten4: rgb(204, 222, 233); - --colorPrimaryDarken1: rgb(0, 72, 114); - --colorPrimaryDarken2: rgb(0, 54, 86); - --colorPrimaryDarken3: rgb(0, 36, 57); - --colorPrimaryDarken4: rgb(0, 18, 29); - - --colorSecondaryLighten1: rgb(113, 189, 255); - --colorSecondaryLighten2: rgb(148, 205, 255); - --colorSecondaryLighten3: rgb(184, 222, 255); - --colorSecondaryLighten4: rgb(219, 238, 255); - --colorSecondaryDarken1: rgb(62, 138, 204); - --colorSecondaryDarken2: rgb(46, 103, 153); - --colorSecondaryDarken3: rgb(31, 69, 102); - --colorSecondaryDarken4: rgb(15, 34, 51); - - --colorTertiaryLighten1: rgb(83, 101, 121); - --colorTertiaryLighten2: rgb(126, 140, 155); - --colorTertiaryLighten3: rgb(169, 178, 188); - --colorTertiaryLighten4: rgb(212, 217, 222); - --colorTertiaryDarken1: rgb(32, 50, 70); - --colorTertiaryDarken2: rgb(24, 38, 53); - --colorTertiaryDarken3: rgb(16, 25, 35); - --colorTertiaryDarken4: rgb(8, 13, 18); - - --colorQuaternaryLighten1: rgb(217, 222, 233); - --colorQuaternaryLighten2: rgb(226, 230, 238); - --colorQuaternaryLighten3: rgb(236, 239, 244); - --colorQuaternaryLighten4: rgb(245, 247, 249); - --colorQuaternaryDarken1: rgb(166, 171, 182); - --colorQuaternaryDarken2: rgb(124, 128, 136); - --colorQuaternaryDarken3: rgb(83, 86, 91); - --colorQuaternaryDarken4: rgb(41, 43, 45); - - --colorGrayLighten1: rgb(214, 214, 214); - --colorGrayLighten2: rgb(224, 224, 224); - --colorGrayLighten3: rgb(235, 235, 235); - --colorGrayLighten4: rgb(245, 245, 245); - --colorGrayDarken1: rgb(163, 163, 163); - --colorGrayDarken2: rgb(122, 122, 122); - --colorGrayDarken3: rgb(82, 82, 82); - --colorGrayDarken4: rgb(41, 41, 41); - - --colorCriticalLighten1: rgb(255, 96, 96); - --colorCriticalLighten2: rgb(255, 136, 136); - --colorCriticalLighten3: rgb(255, 175, 175); - --colorCriticalLighten4: rgb(255, 215, 215); - --colorCriticalDarken1: rgb(204, 45, 45); - --colorCriticalDarken2: rgb(153, 34, 34); - --colorCriticalDarken3: rgb(102, 22, 22); - --colorCriticalDarken4: rgb(51, 11, 11); - - --colorSeriousLighten1: rgb(255, 194, 51); - --colorSeriousLighten2: rgb(255, 209, 102); - --colorSeriousLighten3: rgb(255, 225, 153); - --colorSeriousLighten4: rgb(255, 240, 204); - --colorSeriousDarken1: rgb(204, 143, 0); - --colorSeriousDarken2: rgb(153, 107, 0); - --colorSeriousDarken3: rgb(102, 72, 0); - --colorSeriousDarken4: rgb(51, 36, 0); - - --colorCautionLighten1: rgb(253, 237, 97); - --colorCautionLighten2: rgb(253, 241, 137); - --colorCautionLighten3: rgb(254, 246, 176); - --colorCautionLighten4: rgb(254, 250, 216); - --colorCautionDarken1: rgb(202, 186, 46); - --colorCautionDarken2: rgb(151, 139, 35); - --colorCautionDarken3: rgb(101, 93, 23); - --colorCautionDarken4: rgb(50, 46, 12); - - --colorNormalLighten1: rgb(120, 243, 51); - --colorNormalLighten2: rgb(154, 246, 102); - --colorNormalLighten3: rgb(187, 249, 153); - --colorNormalLighten4: rgb(221, 252, 204); - --colorNormalDarken1: rgb(69, 192, 0); - --colorNormalDarken2: rgb(52, 144, 0); - --colorNormalDarken3: rgb(34, 96, 0); - --colorNormalDarken4: rgb(17, 48, 0); - - --colorStandbyLighten1: rgb(87, 214, 255); - --colorStandbyLighten2: rgb(129, 224, 255); - --colorStandbyLighten3: rgb(171, 235, 255); - --colorStandbyLighten4: rgb(213, 245, 255); - --colorStandbyDarken1: rgb(36, 163, 204); - --colorStandbyDarken2: rgb(27, 122, 153); - --colorStandbyDarken3: rgb(18, 82, 102); - --colorStandbyDarken4: rgb(9, 41, 51); - - --colorOffLighten1: rgb(177, 185, 189); - --colorOffLighten2: rgb(197, 202, 206); - --colorOffLighten3: rgb(216, 220, 222); - --colorOffLighten4: rgb(236, 237, 239); - --colorOffDarken1: rgb(126, 134, 138); - --colorOffDarken2: rgb(95, 100, 104); - --colorOffDarken3: rgb(63, 67, 69); - --colorOffDarken4: rgb(32, 33, 35); - - --colorTag1Lighten1: rgb(71, 210, 213); - --colorTag1Lighten2: rgb(117, 221, 223); - --colorTag1Lighten3: rgb(163, 233, 234); - --colorTag1Lighten4: rgb(209, 244, 244); - --colorTag1Darken1: rgb(20, 159, 162); - --colorTag1Darken2: rgb(15, 119, 121); - --colorTag1Darken3: rgb(10, 80, 81); - --colorTag1Darken4: rgb(5, 40, 40); - - --colorTag2Lighten1: rgb(147, 141, 217); - --colorTag2Lighten2: rgb(174, 169, 227); - --colorTag2Lighten3: rgb(201, 198, 236); - --colorTag2Lighten4: rgb(228, 226, 246); - --colorTag2Darken1: rgb(96, 90, 166); - --colorTag2Darken2: rgb(72, 67, 125); - --colorTag2Darken3: rgb(48, 45, 83); - --colorTag2Darken4: rgb(24, 22, 42); - - --colorTag3Lighten1: rgb(179, 61, 203); - --colorTag3Lighten2: rgb(198, 110, 216); - --colorTag3Lighten3: rgb(217, 158, 229); - --colorTag3Lighten4: rgb(236, 207, 242); - --colorTag3Darken1: rgb(128, 10, 152); - --colorTag3Darken2: rgb(96, 8, 114); - --colorTag3Darken3: rgb(64, 5, 76); - --colorTag3Darken4: rgb(32, 3, 38); - - --colorTag4Lighten1: rgb(224, 117, 75); - --colorTag4Lighten2: rgb(232, 152, 120); - --colorTag4Lighten3: rgb(239, 186, 165); - --colorTag4Lighten4: rgb(247, 221, 210); - --colorTag4Darken1: rgb(173, 66, 24); - --colorTag4Darken2: rgb(130, 50, 18); - --colorTag4Darken3: rgb(86, 33, 12); - --colorTag4Darken4: rgb(43, 17, 6); - - --colorWhiteLighten1: rgb(255, 255, 255); - --colorWhiteLighten2: rgb(255, 255, 255); - --colorWhiteLighten3: rgb(255, 255, 255); - --colorWhiteLighten4: rgb(255, 255, 255); - --colorWhiteDarken1: rgb(204, 204, 204); - --colorWhiteDarken2: rgb(153, 153, 153); - --colorWhiteDarken3: rgb(102, 102, 102); - --colorWhiteDarken4: rgb(51, 51, 51); - - --colorBlackLighten1: rgb(51, 51, 51); - --colorBlackLighten2: rgb(102, 102, 102); - --colorBlackLighten3: rgb(153, 153, 153); - --colorBlackLighten4: rgb(204, 204, 204); - --colorBlackDarken1: rgb(0, 0, 0); - --colorBlackDarken2: rgb(0, 0, 0); - --colorBlackDarken3: rgb(0, 0, 0); - --colorBlackDarken4: rgb(0, 0, 0); - - --colorGrayLighten1: rgb(214, 214, 214); - --colorGrayLighten2: rgb(224, 224, 224); - --colorGrayLighten3: rgb(235, 235, 235); - --colorGrayLighten4: rgb(245, 245, 245); - --colorGrayDarken1: rgb(163, 163, 163); - --colorGrayDarken2: rgb(122, 122, 122); - --colorGrayDarken3: rgb(82, 82, 82); - --colorGrayDarken4: rgb(41, 41, 41); -} - -@font-face { - font-family: "Open Sans"; - src: url("../fonts/opensans-bold-webfont.woff2") format("woff2"), - url("../fonts/opensans-bold-webfont.woff") format("woff"); - font-weight: 700; - font-style: normal; -} -@font-face { - font-family: "Open Sans"; - src: url("../fonts/opensans-light-webfont.woff2") format("woff2"), - url("../fonts/opensans-light-webfont.woff") format("woff"); - font-weight: 300; - font-style: normal; -} -@font-face { - font-family: "Open Sans"; - src: url("../fonts/opensans-regular-webfont.woff2") format("woff2"), - url("../fonts/opensans-regular-webfont.woff") format("woff"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "Roboto Mono"; - src: url("../fonts/roboto-mono-regular.woff2") format("woff2"), - url("../fonts/roboto-mono-regular.woff") format("woff"); - font-weight: 400; - font-style: normal; -} - -.light-theme { - /* - - Global Colors - ========================================================================== - - */ - --backgroundColor: var(--colorQuaternaryLighten3, rgb(243, 245, 248)); - --fontColor: var(--colorBlack, rgb(0, 0, 0)); - --fontLowContrastColor: var(--colorGray, rgb(204, 204, 204)); - --fontInvertedColor: var(--colorWhite, rgb(255, 255, 255)); - --fontInvertedBackgroundColor: var(--colorBlack, rgb(0, 0, 0)); - - --fontLinkColor: var(--colorSecondaryDarken1, rgb(62, 138, 204)); - --fontLinkHoverColor: var(--colorSecondary, rgb(77, 172, 255)); - - --wcagCompliance: rgba(0, 0, 0, 0.5); - --criticalBorder: #7f1c1c; - - --colorCritical: var(--statusLightCritical, rgb(255, 42, 4)); - --colorSerious: var(--statusLightSerious, rgb(255, 175, 61)); - --colorCaution: var(--statusLightCaution, rgb(250, 216, 0)); - --colorNormal: var(--statusLightNormal, rgb(0, 226, 0)); - --colorStandby: var(--statusLightStandby, rgb(100, 217, 255)); - --colorOff: var(--statusLightOff, rgb(142, 154, 163)); - /* - - Button Colors - ========================================================================== - For standard and outline buttons - - */ - - /* Button */ - --buttonTextColor: var(--colorWhite, rgb(255, 255, 255)); - --buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonBoxShadow: 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2); - - /* Button Hover State */ - --buttonHoverTextColor: var(--colorWhite, rgb(255, 255, 255)); - --buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); - --buttonHoverBorderColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); - --buttonHoverBoxShadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2); - - /* Button Active State */ - --buttonActiveControlTextColor: var(--colorWhite, rgb(255, 255, 255)); - --buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - /* Default Button State */ - --buttonDefaultBorderColor: var(--colorWhite, rgb(255, 255, 255)); - - /* Outline Button Variant */ - --buttonOutlineTextColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonOutlineBackgroundColor: transparent; - --buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - /* Outline Button Variant Hover State */ - --buttonOutlineHoverTextColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonOutlineHoverBackgroundColor: rgba(0, 90, 143, 0.05); - --buttonOutlineHoverBorderColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - /* - - Control Colors - ========================================================================== - For checkboxes, radio buttons etc … - - */ - --controlTextColor: var(--colorWhite, rgb(255, 255, 255)); - --controlLabelColor: var(--colorBlack, rgb(0, 0, 0)); - --controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --controlBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --controlAccentColor: var(--colorSecondary, rgb(77, 172, 255)); - - --controlSelectedTextColor: var(--colorBlack, rgb(0, 0, 0)); - --controlSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - --controlSelectedBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - --controlHoverOutlineBackgroundColor: none; - --controlSelectedOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --controlSelectedOutlineBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - /* - - Progress Bar Colors - ========================================================================== - - */ - --progressDeterminateBarBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - --progressDeterminateTrackBackgroundColor: var( - --colorWhite, - rgb(255, 255, 255) - ); - --progressDeterminateTrackBorderColor: var( - --colorQuaternary, - rgb(207, 214, 227) - ); - - --progressIndeterminate: url("data:image/svg+xml,%3Csvg width='66' height='66' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='70.883%25' y1='4.637%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%235CB3FF' offset='0%25'/%3E %3Cstop stop-color='%23F6F7F8' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M33 65.5C15.05 65.5.5 50.95.5 33S15.05.5 33 .5 65.5 15.05 65.5 33 50.95 65.5 33 65.5zm0-7c14.083 0 25.5-11.417 25.5-25.5S47.083 7.5 33 7.5 7.5 18.917 7.5 33 18.917 58.5 33 58.5z' stroke='%23D7DDE2' fill='%23FFF'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)' transform='translate(1 1)'/%3E %3Cpath d='M48.564 13c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C53 7.248 51.572 5 49.234 5S45 6.867 45 9.17c0 2.304 1.225 3.83 3.564 3.83z' stroke='%234DACFF' fill='%2352AEFF'/%3E %3C/g%3E %3C/svg%3E "); - /* - - Slider Colors - ========================================================================== - - */ - --sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255)); - - --sliderTrackBorderColor: var(--colorQuaternary, rgb(207, 214, 227)); - --sliderTrackBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - - --sliderSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - - /* - - Segmented Button Colors - ========================================================================== - - */ - --segmentedButtonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --segmentedButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --segmentedButtonTextColor: var(--colorPrimary, rgb(0, 90, 143)); - - --segmentedButtonHoverBackgroundColor: rgb(0, 90, 143, 0.05); - --segmentedButtonHoverTextColor: var(--colorPrimary, rgb(0, 90, 143)); - - --segmentedButtonSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - --segmentedButtonSelectedBoxShadow: inset 0 3px 4px rgba(0, 0, 0, 0.1), - inset 0 1px 5px rgba(0, 0, 0, 0.06); - -webkit-transition: -webkit-box-shadow 0.067s ease-out; - transition: -webkit-box-shadow 0.067s ease-out; - transition: box-shadow 0.067s ease-out; - transition: box-shadow 0.067s ease-out, -webkit-box-shadow 0.067s ease-out; - - --segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); - - /* - - Drop Down/Select Colors - ========================================================================== - - */ - --selectBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --selectBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --selectTextColor: var(--colorPrimary, rgb(0, 90, 143)); - --selectCaret: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); - - /* - - Toggle Colors - ========================================================================== - - */ - - --toggleButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --toggleButtonBoxShadow: 0 0 3px rgba(0, 0, 0, 0.25), - 1px 0 2px rgba(0, 0, 0, 0.3); - - --toggleBaseBackgroundColor: linear-gradient( - to right, - var(--colorNormal) 50%, - var(--colorPrimaryLighten4) 50.1% - ); - --toggleBaseBorderColor: var(--colorPrimaryLighten1, rgb(0, 90, 143)); - --toggleBaseTextColor: var(--colorPrimary, rgb(255, 255, 255)); - - --toggleBaseSelectedTextColor: #007300; - --toggleButtonSelectedBoxShadow: 0 0 3px rgba(0, 0, 0, 0.3), - -1px 0 2px rgba(0, 0, 0, 0.3); - - /* Alt Toggle */ - --toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); - --toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - - --toggleSelectedThumbBorderColor: var( - --colorStandbyDarken2, - rgb(27, 122, 153) - ); - --toggleSelectedThumbBackgroundColor: var(--colorStandby, rgb(100, 217, 255)); - - --toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); - --toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204)); - - --toggleSelectedTrackBorderColor: var( - --colorStandbyDarken2, - rgb(27, 122, 153) - ); - --toggleSelectedTrackBackgroundColor: var(--colorStandby, rgb(100, 217, 255)); - - --toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122)); - --toggleDisabledThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --toggleDisabledSelectedThumbBorderColor: var( - --colorPrimaryLighten3, - rgb(153, 189, 210) - ); - - /* - - Pushbutton Colors - ========================================================================== - - */ - - --pushbuttonBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --pushbuttonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --pushbuttonTextColor: var(--colorPrimary, rgb(0, 90, 143)); - - --pushbuttonSelectedBackgroundColor: var(--colorNormal, rgb(91, 255, 0)); - --pushbuttonSelectedBorderColor: #3dc100; - /* var(--colorNormal, rgb(91, 255, 0)); */ - --pushbuttonSelectedTextColor: #007300; - /* var(--colorWhite, rgb(255, 255, 255)); */ - - /* - - Clock Colors - ========================================================================== - - */ - - --clockTextColor: var(--colorBlack, rgb(0, 0, 0)); - --clockBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --clockBorderColor: var(--colorQuaternary, rgb(39, 86, 128)); - - /* - - Modal Colors - ========================================================================== - - */ - - --modalTextColor: var(--colorBlack, rgb(0, 0, 0)); - --modalBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --modalBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - /* - - Log Colors - ========================================================================== - - */ - --logTextColor: var(--colorBlack); - --logBackgroundColor: var(--colorWhite); - --logBorderColor: var(--colorQuaternaryLighten2); - - --logHeaderTextColor: var(--colorBlack); - --logHeaderBackgroundColor: var(--colorQuaternary); - - --logFilterBackgroundColor: var(--colorStandbyLighten3); - --logFilterTextColor: var(--colorStandbyDarken2); - - /* - - Tree Colors - ========================================================================== - - */ - --treeTextColor: var(--colorBlack, rgb(0, 0, 0)); - --treeBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --treeBorderColor: var(--colorQuaternary, 207, 214, 227); - --treeItemBorderColor: var(--colorQuaternary, 207, 214, 227); - --treeAccentColor: var(--colorSecondary, rgb(77, 172, 255)); - - --treeHoverBackgroundColor: var(--colorSecondaryLighten4, rgb(219, 238, 255)); - --treeHoverAccentColor: var(--colorSecondaryLighten3, rgb(184, 222, 255)); - - --treeSelectedBackgroundColor: var( - --colorSecondaryLighten3, - rgb(184, 222, 255) - ); - --treeSelectedAccentColor: var(--colorSecondaryLighten1, rgb(113, 189, 255)); - --treeSelectedTextColor: var(--colorBlack, rgb(0, 0, 0)); - - --treeChildrenBackgroundColor: var( - --colorQuaternaryLighten3, - rgb(236, 239, 244) - ); - - /* - - Tab Colors - ========================================================================== - - */ - --tabTextColor: var(--colorPrimary, rgb(0, 90, 143)); - --tabBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --tabBorderColor: var(--colorQuaternaryLighten1, rgb(219, 224, 234)); - - --tabHoverTextColor: var(--colorSecondary, rgb(77, 172, 255)); - - --tabSelectedTextColor: var(--colorBlack, rgb(0, 0, 0)); - --tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255)); - - /* - - Card Colors - ========================================================================== - - */ - --cardBackgroundColor: var(--colorQuaternaryLighten2); - - --cardHeaderBackgroundColor: var(--colorQuaternaryLighten1); - --cardHeaderTextColor: var(--colorWhite, #fff); - - /* - - Input/Text Field Colors - ========================================================================== - - */ - - --inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --inputBorderColor: var(--colorQuaternaryDarken1, rgb(255, 255, 255)); - --inputTextColor: var(--colorBlack, rgb(14, 11, 11)); - - --inputFocusBorderColor: var(--colorSecondary); - --inputFocusBoxShadow: none; - - --inputInvalidBorderColor: var(--colorCritical, rgb(255, 48, 48)); - - /* - - Status - ========================================================================== - - */ - - - - --statusSymbols: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAA81BMVEUAAABaPhVcDwE7CQA6gJIAAAAATQAkTlsATgBcPxYrHAciGgkAAABcPxU0coUARgAxNTgnU2IoV2YzNjoAUgAtYXEzODovZngAUQAAUAAwNDg0dIk2d4sAOgAjKCgAGAAADQA+hJVZPBRcPxb62AAA4gD/rz1VSQBk2f//KgQiSldXDgEATQCOmqNXOxQwNDdoRhiGWx+tHAJiEAFZw+b1KAMAywDlnTb5qjv7rDzpnzdMpcNJn7xFlrGMmKGEj5g4eY82d4xxe4IyboIwaHskT15GTFEA2gAArAAAnAAAfgAAfABg0vddyu5cZGpg0fbOjTE6oyFAAAAAJHRSTlMA7cc4Kgj9+vbBJB4GypVn9vPu5t/Y18O8n4B/ckY6FRMdmtlkVn4PAAACq0lEQVRYw+2YaVPaUBSGqWbTWsK+b9pC6ek1lypGW1T2RUDb//9rmpsm3Nyc1DQfOhMc3k/cyUzmfeY5BxISh+xXzi7eJ/Y5ZyfGu30msPobQQSf/5KEmKZeymlarqQ3g28vJfMZVc3kk1LUYkdfA3OE+/duv3GCaACtskKcKOVWQP0i7FKMiHAcDHAc0L9zxwgQwKeAiAB1jZD1ylwuzdWaEK3u71BTAUaD/nbbH4wA1FpUBVdffLliAnD/DieIBKArZGO2nZgboujiLZIA437XSX8MkIyo4PpG7H9zzQTg/pwgEkBdIU9tT56IIjioATx0PXkAqEVWgAXg/pwgEkBLY/1FAq3lmX+V9RcJVLwHcqWQShUqcpgCLgD35wRRAMpk0/ZlQ8r8BkUY27XvZ/P57N7+OIaiv2QjS+1kG2EKuADcHxOEAzQVYvoBTKI0dwIA2Pw/T8HO9JntAYDk60/pYjIcThaUNkIUcAG4PyYIB9DJuo2yJjrf4FHXyhTSVUmqpmHKTiPfHstZ+vJ4aeXxhWblYAVYAO6PCcIBSmSFAVak5F7Pw4DND6TP2ek8DWyKBpAXClbogvVnBAtaCVaABeD+mCAcIMcmCM9Qzr2esSdoBtU/xyrM7BnKCAULdHLpZEILr2wBEnBhGL86OHc94+M/AmhkiQGWRHOvq7C1Gs/doZdgbh23oAr9UnToAgxp6pUvIrQB8gej9wP1/24ZOP2fAD+jAHAFXAAmwP1jNUK2Ai4AE+D+sVpiRwEXgAhQ/3h9jboKuABMIPaP1w8ZV8AFIAKhf8weJXYKBAGIgPeP2cMcVyAIwARu/7g9TnMFggBM4PSP2wuNR4EgABPc2v1j90rpUSAIwAQG6x+7l3qvAkEAJmD94/e3ileBIAATnJwmDjnkTeU3PTFjExFNx+YAAAAASUVORK5CYII="); - /* - - - Scrollbar Colors -- Light - ========================================================================== - - */ - - --scrollBarThumbBackgroundColor: var(--colorQuaternaryDarken1, #9ba0aa); - --scrollBarThumbBackgroundHoverColor: var(--colorQuaternaryDarken2, #676a71); - --scrollBarTrackBackgroundColor: transparent; - --scrollBarTrackCornerBackgroundColor: var( - --colorQuaternaryLighten4, - #f2f4f7 - ); - - /* - - Timeline Colors -- Dark - ========================================================================== - - */ - - --timelineHeaderBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35)); - --timelineHeaderTextColor: var(--fontColor, rgb(0, 0, 0)); - - --timelineRulerBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35)); - --timelineRulerTextColor: var(--fontColor, rgb(0, 0, 0)); - - --timelineTrackLabelBackgroundColor: var( - --colorQuaternaryLighten2, - rgb(40, 63, 88) - ); - --timelineTrackBackgroundColor: var( - --colorQuaternaryLighten2, - rgb(40, 63, 88) - ); - - --timelineRegionBackgroundColor: var(--colorPrimaryLighten4, rgb(24, 38, 53)); - --timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255)); - --timelineRegionBorderColor: var(--colorPrimaryLighten3); - - --timelineRegionSelectedBorderColor: var( - --colorSecondaryDarken3, - rgb(77, 172, 255) - ); - --timelineRegionSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(62, 138, 204) - ); - --timelineRegionSelectedTextColor: var(--fontColor, rgb(255, 255, 255)); - - /* - - ACCORDION COLORS - ========================================================================== - - */ - --accordionBorderColor: rgb(207, 214, 227); - --accordionContentBackground: rgb(226, 230, 238); - --accordionClosedLabelBackground: rgb(255, 255, 255); - --accordionOpenLabelBackground: rgb(245, 247, 249); - --accordionHoverLabelBackground: rgb(236, 239, 244); - --accordionColor: rgb(0, 0, 0); -} - -li.light-theme { - display: none; -} - -.dark-theme { - /* - - Global Colors - ========================================================================== - - */ - --backgroundColor: var(--colorTertiaryDarken2, rgb(46, 103, 153)); - --fontColor: var(--colorWhite, rgb(255, 255, 255)); - --fontLowContrastColor: var(--colorGray, rgb(204, 204, 204)); - --fontInvertedColor: var(--colorBlack, rgb(0, 0, 0)); - --fontInvertedBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - - --fontLinkColor: var(--colorSecondary, rgb(77, 172, 255)); - --fontLinkHoverColor: var(--colorSecondaryLighten1, rgb(113, 189, 255)); - - /* Status Custom */ - --wcagCompliance: rgba(255, 255, 255, 0); - --criticalBorder: var(--colorCritical, rgb(255, 56, 56)); - - --colorCritical: var(--statusDarkCritical, rgb(255, 42, 4)); - --colorSerious: var(--statusDarkSerious, rgb(255, 175, 61)); - --colorCaution: var(--statusDarkCaution, rgb(250, 216, 0)); - --colorNormal: var(--statusDarkNormal, rgb(0, 226, 0)); - --colorStandby: var(--statusDarkStandby, rgb(45, 204, 255)); - --colorOff: var(--statusDarkOff, rgb(142, 154, 163)); - - /* - - Button Colors - ========================================================================== - For standard and outline buttons - - */ - - /* Button */ - --buttonTextColor: var(--colorWhite, #fff); - --buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonBoxShadow: 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2); - - /* Button Hover State */ - --buttonHoverTextColor: var(--colorWhite, #fff); - --buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); - --buttonHoverBorderColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); - --buttonHoverBoxShadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2); - - /* Button Active State */ - --buttonActiveControlTextColor: var(--colorWhite, #fff); - --buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - /* Default Button State */ - --buttonDefaultBorderColor: var(--colorWhite, #fff); - - /* Outline Button Variant */ - --buttonOutlineTextColor: var(--colorWhite, rgb(255, 255, 255)); - --buttonOutlineBackgroundColor: transparent; - --buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - /* Outline Button Variant Hover State */ - --buttonOutlineHoverTextColor: var(--colorSecondary, rgb(0, 90, 143)); - --buttonOutlineHoverBackgroundColor: rgba(30, 47, 66, 0.75); - --buttonOutlineHoverBorderColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - /* - - Control Colors - ========================================================================== - For checkboxes, radio buttons etc … - - */ - --controlTextColor: var(--colorWhite, #fff); - --controlLabelColor: var(--colorWhite, rgb(255, 255, 255)); - --controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --controlBorderColor: var(--colorSecondaryLighten1, rgb(77, 172, 255)); - --controlAccentColor: var(--colorSecondaryLighten1, rgb(77, 172, 255)); - - --controlSelectedTextColor: var(--colorWhite, #fff); - --controlSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - --controlSelectedBorderColor: var(--colorWhite, rgb(255, 255, 255)); - - /* - - Progress Colors - ========================================================================== - - */ - --progressDeterminateBarBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - --progressDeterminateTrackBackgroundColor: rgba(0, 0, 0, 0.3); - --progressDeterminateTrackBorderColor: var( - --colorTertiaryDarken2, - rgb(20, 32, 44) - ); - - --progressIndeterminate: url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='65.479%25' y1='-8.436%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%234dacff' offset='0%25'/%3E %3Cstop stop-color='%234dacff' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm0-6c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26z' fill='rgba(0,0,0,.3)'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)'/%3E %3Cpath d='M47.564 12c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C52 6.248 50.572 4 48.234 4S44 5.867 44 8.17c0 2.304 1.225 3.83 3.564 3.83z' fill='%234dacff'/%3E %3C/g%3E %3C/svg%3E "); - - /* - - Slider Colors - ========================================================================== - - */ - --sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255)); - - --sliderTrackBorderColor: transparent; - --sliderTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204)); - - --sliderHoverThumbBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - --sliderSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - - /* - - Segmented Button Colors - ========================================================================== - - */ - --segmentedButtonBorderColor: var(--colorTertiaryDarken1, rgb(30, 47, 66)); - --segmentedButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --segmentedButtonTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --segmentedButtonHoverBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - --segmentedButtonHoverTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --segmentedButtonSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - --segmentedButtonSelectedBoxShadow: inset 0 2px 4px rgba(0, 0, 0, 0.14), - inset 0 3px 4px rgba(0, 0, 0, 0.12), inset 0 1px 5px rgba(0, 0, 0, 0.2); - - --segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); - - /* - - Drop Down/Select Colors - ========================================================================== - - */ - --selectBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --selectBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --selectTextColor: var(--colorWhite, rgb(255, 255, 255)); - --selectCaret: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); - - /* - - Toggle Colors - ========================================================================== - - */ - - --toggleButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --toggleBaseBackgroundColor: var(--colorBlack, #000); - --toggleBaseBorderColor: var(--colorBlack, rgb(0, 0, 0)); - --toggleBaseTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --toggleBaseSelectedTextColor: var(--colorNormal, rgb(86, 240, 0)); - - /* Alt Toggle */ - /* --toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); */ - --toggleThumbBorderColor: #fff; - --toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - - --toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); - --toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204)); - - /* Selected State */ - /* --toggleSelectedThumbBorderColor: var(--colorStandbyDarken2, rgb(27, 122, 153)); */ - --toggleSelectedThumbBorderColor: #fff; - - --toggleSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - --toggleSelectedTrackBorderColor: var( - --colorSecondaryDarken2, - rgb(46, 103, 153) - ); - - /* Disabled State */ - --toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122)); - --toggleDisabledThumbBackgroundColor: var( - --colorGrayDarken1, - rgb(163, 163, 163) - ); - --toggleDisabledSelectedThumbBorderColor: var( - --colorGrayDarken1, - rgb(122, 122, 122) - ); - - /* - - Pushbutton Colors - ========================================================================== - - */ - --pushbuttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --pushbuttonBorderColor: var(--colorBlack, rgb(0, 0, 0)); - --pushbuttonTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --pushbuttonSelectedBackgroundColor: var(--colorBlack, rgb(0, 0, 0)); - --pushbuttonSelectedBorderColor: var(--colorBlack, rgb(0, 0, 0)); - --pushbuttonSelectedTextColor: var(--colorNormal, rgb(86, 240, 0)); - - /* - - Clock Colors - ========================================================================== - - */ - --clockTextColor: var(--colorWhite, rgb(255, 255, 255)); - --clockBackgroundColor: var(--colorTertiaryDarken2, rgb(20, 32, 44)); - --clockBorderColor: var(--colorTertiary, rgb(39, 86, 128)); - - /* - - Log Colors - ========================================================================== - - */ - --logTextColor: var(--colorWhite, rgb(255, 255, 255)); - --logBackgroundColor: var(--colorTertiaryDarken1); - --logBorderColor: var(--colorTertiary); - - --logHeaderTextColor: var(--colorWhiteDarken2); - --logHeaderBackgroundColor: var(--colorTertiaryDarken2); - - --logFilterBackgroundColor: var(--colorStandbyLighten1); - --logFilterTextColor: var(--colorStandbyDarken3); - - /* - - Tree Colors - ========================================================================== - - */ - --treeTextColor: var(--colorWhite, rgb(255, 255, 255)); - --treeBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); - --treeBorderColor: var(--colorSecondaryDarken2, rgb(46, 103, 153)); - --treeItemBorderColor: var(--colorTertiaryDarken2, rgb(24, 38, 53)); - --treeAccentColor: var(--colorSecondary, rgb(77, 172, 255)); - - /* --treeFocusedBackgroundColor: var(--colorTertiaryLighten1, green); - --treeFocusedAccentColor: var(--colorTertiaryLighten3, green); */ - - --treeHoverBackgroundColor: var(--colorPrimaryDarken2, rgb(0, 54, 86)); - --treeHoverAccentColor: var(--colorPrimaryLighten1, rgb(0, 72, 114)); - - --treeSelectedBackgroundColor: var(--colorPrimaryDarken1, rgb(0, 72, 114)); - --treeSelectedAccentColor: var(--colorSecondary, rgb(77, 172, 255)); - --treeSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --treeChildrenBackgroundColor: var(--colorTertiaryDarken2, rgb(24, 38, 53)); - /* - - Tab Colors - ========================================================================== - - */ - --tabTextColor: var(--colorSecondary, rgb(77, 172, 255)); - --tabBackgroundColor: var(--colorTertiaryDarken1, rgb(30, 47, 66)); - --tabBorderColor: var(--colorTertiaryDarken2, rgb(20, 32, 44)); - - --tabSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); - --tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 355)); - - /* - - Card Colors - ========================================================================== - - */ - - --cardBackgroundColor: var(--colorTertiaryDarken1); - - --cardHeaderBackgroundColor: var(--colorTertiaryDarken3); - --cardHeaderTextColor: var(--colorWhite, #fff); - /* - - Input/Text Field Colors - ========================================================================== - - */ - - --inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --inputBorderColor: transparent; - --inputTextColor: var(--colorBlack, rgb(14, 11, 11)); - - --inputFocusBorderColor: var(--colorSecondary); - /* --inputFocusBoxShadow: 0 0 4px var(--colorSecondaryLighten3); */ - --inputFocusBoxShadow: inset 0 0 0 1px white, - inset 0 0 0 2px var(--colorPrimary); - - --inputInvalidBorderColor: var(--colorCritical, rgb(255, 48, 48)); - - /* - - Status Symbols - ========================================================================== - - */ - - --statusSymbols: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAAgVBMVEUAAAD/tQv/swL/OTn/PDzftl9W8QBW8AAtzP8v0P9Z9gD/tAP/uQb/tAItzf8tzf+eqK2ep60uzP9X8QCfqK4uzf8uzf9X8QAuzP9X8ACeqK4vzP9Y8QAuzv9Y8gCeqq4wz/8xzv9A1f9Y8QD/tAP86DpW8AD/swL/ODgtzP+ep63tgXPUAAAAJXRSTlMAGNfAQAv98/IdG8Io52zz8+DZ2dC9trabm4F+a05OQjAaDG6dAJcYcwAAAfdJREFUWMPtmNlygkAQRScyrBp3QTZFNBj8/w9MCGI3dBOHMg9jyvOmVFnn1HUSULx4LibjN/HMTN7Po2cu+PY/cwUfPYg2XhKsbHsVJJ5gcaf+cjZb+lN3qJjxyWIw/lAwNMALreKKFTIJh215Y3sYFiD5AEn9oWBowM4uEPau65A6JcJJ/2ACg/pDwdCAo1W0sI6ixbTsMH18Akn9oWBgwK7xh4LWBmlJSB+dwCD+pEA5wLMLgo3OwcGpvzhxludZfH1Bz4EZrefzdWSqTSCJPylQDggLhhA+oD6/G7d+5W7qk9yV3C8uPyz2KhMYxJ8UKAd4Fhdg3SZwa3/4wLrA7fhfbuwVJpDEnxQoByQFS9I6wQ7ydR16js0FBCzMuxMY1J8WqAYEfEDQXPcr3RjbxNU7vsBEF0R0dwJJ/LkCxYAVH7Bqri8r3QzbZNU7S4FZ44B1/ymgA4zPfZwUA2w+wG6uzyrdHMvk1TszgZnjgLmgyL4T8Dbq8R+bWgUIgw4ABby/Vl8hIckAUMD7a3WIYQIYgC0Af73+jOIJpKAF1F+vf2QwAQxAC7C/ZrcSeAIpegvAX7ObOZgABiAF2F+322mYAAagBeCv2wMNTEAGIAWVv3aPlDABDMAW1P7aPdQjDBiALaj89ftZBSGl+LXgZIoXL/4VXyptNwzuHR/QAAAAAElFTkSuQmCC"); - /* - - Scrollbar Colors -- Dark - ========================================================================== - - */ - - --scrollBarThumbBackgroundColor: var( - --colorSecondaryDarken2, - rgb(46, 103, 153) - ); - --scrollBarThumbBackgroundHoverColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - --scrollBarTrackBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); - --scrollBarTrackCornerBackgroundColor: var( - --colorTertiaryDarken1, - rgb(32, 50, 70) - ); - - /* - - Timeline Colors -- Dark - ========================================================================== - - */ - - --timelineHeaderBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); - --timelineHeaderTextColor: var(--fontColor, rgb(255, 255, 255)); - - --timelineRulerBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); - --timelineRulerTextColor: var(--fontColor, rgb(255, 255, 255)); - - --timelineTrackLabelBackgroundColor: var(--colorTertiary, rgb(40, 63, 88)); - --timelineTrackBackgroundColor: var(--colorTertiary, rgb(40, 63, 88)); - - --timelineRegionBackgroundColor: var(--colorPrimaryDarken3, rgb(0, 36, 57)); - --timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255)); - --timelineRegionBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - --timelineRegionSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255)); - --timelineRegionSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(62, 138, 204) - ); - --timelineRegionSelectedTextColor: var(--fontColor, rgb(255, 255, 255)); - - /* - - ACCORDION COLORS - ========================================================================== - - */ - --accordionBorderColor: rgb(40, 63, 88); - --accordionContentBackground: rgb(20, 32, 44); - --accordionClosedLabelBackground: rgb(32, 50, 70); - --accordionOpenLabelBackground: rgb(40, 63, 88); - --accordionHoverLabelBackground: rgb(46, 103, 153); - --accordionColor: rgb(255, 255, 255); -} - -li.dark-theme { - display: none; -} - -html, body { - height: 100%; - width: 100%; -} - -h1, -h2, -h3 { - font-family: "Open Sans", sans-serif; - font-weight: 300; - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); - margin: 0 0 0.5rem 0; -} - -h1, -.h1 { - font-size: 2.375rem; -} - -h2, -.h2 { - font-size: 1.75rem; -} - -h3, -.h3 { - font-size: 1.375rem; -} - -p { - margin: 0 0 1rem 0; - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); -} - -a { - color: rgb(77, 172, 255); - color: var(--fontLinkColor, rgb(77, 172, 255)); - text-decoration: none; -} - -a:hover { - color: rgb(113, 189, 255); - color: var(--fontLinkHoverColor, rgb(113, 189, 255)); -} - -dt { - font-weight: 600; - margin: 0; -} -dd { - margin: 0 0 0.5rem 0; -} - -.light { - font-weight: 300; -} -.regular { - font-weight: 500; -} -.semi-bold { - font-weight: 600; -} -.bold { - font-weight: 700; -} - -.italic { - font-style: italic; -} - -.condensed { - font-stretch: condensed; -} - -.monospace { - font-family: "Roboto Mono", sans-serif; -} - -.invert, -.inverted { - background-color: rgb(255, 255, 255); - background-color: var(--fontInvertedBackgroundColor, rgb(255, 255, 255)); - color: rgb(0, 0, 0); - color: var(--fontInvertedColor, rgb(0, 0, 0)); - padding: 0 0.25rem; -} - -.low-contrast { - opacity: 0.2; -} - -/* Size Options */ -.xl { - font-size: 1.125rem; - font-size: var(--fontSizeXL, 1.125rem); -} - -.lg { - font-size: 1rem; - font-size: var(--fontSize, 1rem); -} - -.md { - font-size: 0.875rem; - font-size: var(--fontSizeMD, 0.875rem); -} - -.sm { - font-size: 0.75rem; - font-size: var(--fontSizeSM, 0.75rem); -} - -.xs { - font-size: 0.65rem; - font-size: var(--fontSizeXS, 0.65rem); -} - -/* -** This is as close as we get to a CSS reset in Astro, moving everything to -** the old IE border-box model of including padding in the overall size. -*/ -html { - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-text-size-adjust: 100%; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -*, -*::before, -*::after { - -webkit-box-sizing: inherit; - box-sizing: inherit; -} - -/* -** -** -** -*/ -body { - margin: 0; - padding: 0; - - font-family: "Open Sans", sans-serif; - - font-family: var(--fontFamily, "Open Sans", sans-serif); - font-size: 1rem; - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); - - background-color: rgb(24, 38, 53); - - background-color: var(--backgroundColor, rgb(24, 38, 53)); - - scrollbar-color: rgb(58, 129, 191) - rgb(32, 50, 70); - - scrollbar-color: var(--scrollBarThumbBackgroundColor, rgb(58, 129, 191)) - var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70)); -} - -label { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* -** CSS-styled Scrollbars for IE & Webkit browsers -** Dark theme by default. -** -*/ - -::-webkit-scrollbar { - width: 18px; - height: 18px; - background-color: transparent; -} - -::-webkit-scrollbar-thumb { - background-color: rgb(46, 103, 153); - background-color: var(--scrollBarThumbBackgroundColor, rgb(46, 103, 153)); - border-radius: 10px; - border: 3px solid transparent; - background-clip: padding-box; -} -/* visually "centers" because the dark edge of the shadow gives the illusion this is offset */ -::-webkit-scrollbar-thumb:vertical { - border-left-width: 4px; -} - -::-webkit-scrollbar-thumb:horizontal { - border-top-width: 4px; -} - -::-webkit-scrollbar-thumb:active, -::-webkit-scrollbar-thumb:hover { - background-color: rgb(58, 129, 191) - ; - background-color: var( - --scrollBarThumbBackgroundHoverColor, - rgb(58, 129, 191) - ); -} - -::-webkit-scrollbar-track, -::-webkit-scrollbar-corner { - background-color: rgb(32, 50, 70); - background-color: var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70)); -} -::-webkit-scrollbar-track:vertical { - -webkit-box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.15); - box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.15); -} -::-webkit-scrollbar-track:horizontal { - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); -} - -/* -** -** ASTRO BUTTON -** ========================================================================== -** 3.0 Notes -** - Removed Master Off Button Style -** - Replaced various properties with css custom properties to support -** - Removed .satcom class definition -** - Removed narrow/short definitions -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Disabled user selection of text on all buttons -** - Removed redundant background hover from 'disabled' state by using :not() on the :hover state -** - Removed redundant background hover from 'master off' by using :not() on the :hover state // deprecate after 1.4 -** - Fixed Firefox alignment issue where text was misaligned vertically -** - Renamed half-height to short and half-width to narrow (Note: rux_ only, satcom_ retains old syntax) -** - Removed user-select and placed it in astro.css to apply to all input types -** - Embedded master off icon and removed the additional states required to handle icons and gradient backgrounds -*/ - -.rux-button-group { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -.rux-button-group .rux-button:not(:last-child) { - margin-right: 0.625rem; -} - -/* Global Button Styles */ -.rux-button { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - - margin: 0; - padding: 0 1rem; - - height: 2.125rem; - min-width: 2.25rem; - /* max-width: 10.125rem; */ - - border-radius: 3px; - - border-radius: var(--buttonBorderRadius, 3px); - - color: rgb(255, 255, 255); - - color: var(--buttonTextColor, rgb(255, 255, 255)); - font-family: "Open Sans", sans-serif; - font-family: var(--fontFamily, "Open Sans", sans-serif); - font-size: 1rem; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - -webkit-box-pack: center; - - -ms-flex-pack: center; - - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - -webkit-user-select: none; - - -moz-user-select: none; - - -ms-user-select: none; - - user-select: none; -} - -/* - - Disabled States - -*/ -/* disabled state */ -.rux-button:disabled { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -.rux-button:focus { - outline: none; -} -.rux-button:not(.rux-button--outline) { - border: 1px solid rgb(0, 90, 143); - border: 1px solid var(--buttonBackgroundColor, rgb(0, 90, 143)); - background-color: rgb(0, 90, 143); - background-color: var(--buttonBorderColor, rgb(0, 90, 143)); - -webkit-box-shadow: var( - --controlBoxShadow, - 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), - 0 1px 5px rgba(0, 0, 0, 0.2) - ); - box-shadow: var( - --controlBoxShadow, - 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), - 0 1px 5px rgba(0, 0, 0, 0.2) - ); -} - -/* Outline Button Specific Styles */ -.rux-button--outline { - color: rgb(255, 255, 255); - color: var(--buttonOutlineTextColor, rgb(255, 255, 255)); - background-color: transparent; - background-color: var(--buttonOutlineBackgroundColor, transparent); - border: 1px solid rgb(0, 90, 143); - border: 1px solid var(--buttonOutlineBorderColor, rgb(0, 90, 143)); -} - -/* - - Press/Active States - -*/ -.rux-button:active:not([hover]):not([disabled]) { - border-color: rgb(0, 90, 143) !important; - border-color: var(--buttonActiveBorderColor, rgb(0, 90, 143)) !important; - background-color: rgb(0, 90, 143) - !important; - background-color: var( - --buttonActiveBackgroundColor, - rgb(0, 90, 143) - ) !important; -} - -.rux-button:active:not([hover]):not([disabled]):not(.rux-button--outline) { - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14) !important; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14) !important; -} - -/* - - Hover States - -*/ -.rux-button:hover:not([active]):not([disabled]):not(.rux-button--outline) { - border-color: rgb(58, 129, 191); - border-color: var(--buttonHoverBorderColor, rgb(58, 129, 191)); - background-color: rgb(58, 129, 191); - background-color: var(--buttonHoverBackgroundColor, rgb(58, 129, 191)); - -webkit-box-shadow: var( - --buttonHoverBoxShadow, - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), - 0 4px 5px rgba(0, 0, 0, 0.2) - ); - box-shadow: var( - --buttonHoverBoxShadow, - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), - 0 4px 5px rgba(0, 0, 0, 0.2) - ); -} - -.rux-button--outline:hover:not([disabled]) { - color: rgb(255, 255, 255); - color: var(--buttonOutlineTextColor, rgb(255, 255, 255)); - background-color: rgba(30, 47, 66, 0.75) - ; - background-color: var( - --buttonOutlineHoverBackgroundColor, - rgba(30, 47, 66, 0.75) - ); - border-color: rgb(58, 129, 191); - border-color: var(--buttonOutlineHoverBorderColor, rgb(58, 129, 191)); -} - -/* - - Icons - -*/ - -.rux-button--small { - font-size: 0.875rem; - font-size: var(--smallLabelFontSize, 0.875rem); - height: 1.625rem; - padding: 0 1rem; - line-height: 1; -} - -.rux-button--large { - font-size: 1.125rem; - font-size: var(--largeLabelFontSize, 1.125rem); - height: 2.875rem; - /* min-width: 2.875rem; */ - padding: 0 1.5rem; -} - -.rux-button__icon { - height: 1.5rem; - width: 1.5rem; - - margin-right: 0.625rem; - margin-left: -0.625rem; -} - -.rux-button--icon-only .rux-button__icon { - margin-left: -0.625rem; - margin-right: -0.625rem; -} - -.rux-button--large.rux-button--icon-only .rux-button__icon { - margin-left: -1rem; - margin-right: -1rem; -} - -.rux-button--small .rux-button__icon { - height: 0.875rem; - width: 0.875rem; -} - -.rux-button--large .rux-button__icon { - height: 1.75rem; - width: 1.75rem; - margin-left: -0.8rem; - /* margin: -0.65rem 0.25rem -0.3rem calc((1.5rem - 0.625rem) * -1); */ -} - -.rux-button__icon .rux-icon { - height: auto; - width: 100%; - fill: rgb(255, 255, 255); - fill: var(--buttonTextColor, rgb(255, 255, 255)); -} - -.rux-button.rux-button--critical, -.rux-button.rux-button--critical:active:not([hover]):not([disabled]):not(.rux-button--outline) { - background-color: rgb(204, 45, 45) !important; - background-color: var(--colorCriticalDarken1, rgb(191, 36, 36)) !important; - border-color: rgb(204, 45, 45) !important; - border-color: var(--colorCriticalDarken1, rgb(191, 36, 36)) !important; -} - -.rux-button.rux-button--critical:hover:not([active]):not([disabled]) { - background-color: rgb(255, 48, 48); - background-color: var(--colorCritical, rgb(255, 48, 48)); - border-color: rgb(255, 48, 48); - border-color: var(--colorCritical, rgb(255, 48, 48)); -} - -.rux-card { - background-color: rgb(30, 47, 66); - background-color: var(--cardBackgroundColor, rgb(30, 47, 66)); - padding: 1px; - overflow: hidden; -} - -.rux-card__header { - color: rgb(255, 255, 255); - color: var(--cardHeaderTextColor, rgb(255, 255, 255)); - background-color: rgb(20, 32, 44); - background-color: var(--cardHeaderBackgroundColor, rgb(20, 32, 44)); - margin: 0; - padding: 0.325rem 0.625rem; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.rux-card__header h1 { - padding: 0; - margin: 0; - font-size: 1.75rem; -} - -.rux-card__content { - padding: 0.625rem; -} - -/* -** -** ASTRO CHECKBOX & RADIO BUTTONS -** ========================================================================== -** 3.0 Notes -** Added Custom CSS Properties to support light/dark theming -** Added fallback properties for IE11 -** 2.0 Notes -** - Removed hand cursor on checkbox -** - Updated styles to Astro 2.0 -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed linear gradients -** - Added line-height to label to fix minor alignment issue -** - Moved user-select to parent element -** - Removed user-select and placed it in astro.css to apply to all input types -*/ - -.rux-checkbox, -.satcom-checkbox, -.rux-radio-button, -.satcom-radio-button { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - margin: 0 0 1rem 0; - - line-height: 1.2; - - /* DEBUG */ - /* padding: 1rem; */ - /* outline: 1px solid red; - background: linear-gradient( - to bottom, - rgba(255, 0, 0, 0), - rgba(255, 0, 0, 0) 49.5%, - rgba(255, 0, 0, 1) 50%, - rgba(255, 0, 0, 1) 51.5%, - rgba(255, 0, 0, 0) 51%, - rgba(255, 0, 0, 0) - ); */ -} - -.rux-checkbox input[type="checkbox"], -.satcom-checkbox input[type="checkbox"], -.rux-radio-button input[type="radio"], -.satcom-radio-button input[type="radio"] { - -webkit-appearance: none; - display: none; -} - -.rux-checkbox input[type="checkbox"] + label, -.satcom-checkbox input[type="checkbox"] + label, -.rux-radio-button input[type="radio"] + label, -.satcom-radio-button input[type="radio"] + label { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - - -webkit-box-align: center; - - -ms-flex-align: center; - - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - - color: rgb(255, 255, 255); - - color: var(--controlLabelColor, rgb(255, 255, 255)); -} - -.rux-checkbox input[type="checkbox"] + label::before, -.satcom-checkbox input[type="checkbox"] + label::before, -.rux-radio-button input[type="radio"] + label::before, -.satcom-radio-button input[type="radio"] + label::before { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - content: ""; - - height: 1.25rem; - - height: var(--controlOptionSize, 1.25rem); - width: 1.25rem; - width: var(--controlOptionSize, 1.25rem); - - margin: 0 0.625rem 0 0; - - border: 1px solid rgb(122, 193, 255); - - border: 1px solid var(--controlBorderColor, rgb(122, 193, 255)); -} - -.rux-checkbox input[type="checkbox"] + label::before, -.satcom-checkbox input[type="checkbox"] + label::before { - border-radius: 2px; -} - -.rux-radio-button input[type="radio"] + label::before, -.satcom-radio-button input[type="radio"] + label::before { - border-radius: 100%; - background-color: transparent; -} - -.rux-checkbox input[type="checkbox"]:checked + label::before, -.satcom-checkbox input[type="checkbox"]:checked + label::before, -.rux-radio-button input[type="radio"]:checked + label::before, -.satcom-radio-button input[type="radio"]:checked + label::before { - background-color: rgb(58, 129, 191) - ; - background-color: var( - --controlSelectedOutlineBackgroundColor, - rgb(58, 129, 191) - ); - border-color: rgb(255, 255, 255); - border-color: var(--controlSelectedOutlineBorderColor, rgb(255, 255, 255)); -} - -.rux-checkbox input[type="checkbox"]:checked + label::after, -.satcom-checkbox input[type="checkbox"]:checked + label::after, -.rux-radio-button input[type="radio"]:checked + label::after, -.satcom-radio-button input[type="radio"]:checked + label::after { - position: absolute; - display: block; - - content: ""; -} - -.rux-checkbox input[type="checkbox"]:checked + label::after, -.satcom-checkbox input[type="checkbox"]:checked + label::after { - height: 6px; - width: 12px; - top: 5px; - left: 4px; - border-right: 2px solid rgb(255, 255, 255); - border-right: 2px solid var(--controlTextColor, rgb(255, 255, 255)); - border-top: 2px solid rgb(255, 255, 255); - border-top: 2px solid var(--controlTextColor, rgb(255, 255, 255)); - - -webkit-transform: rotate(125deg); - - transform: rotate(125deg); -} - -.rux-radio-button input[type="radio"]:checked + label::after, -.satcom-radio-button input[type="radio"]:checked + label::after { - top: 5px; - left: 5px; - - height: 10px; - width: 10px; - - border-radius: 100%; - /* box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, 0.9); */ - - background-color: rgb(255, 255, 255); - - background-color: var(--controlTextColor, rgb(255, 255, 255)); -} - -.rux-checkbox input[type="checkbox"]:disabled + label, -.satcom-checkbox input[type="checkbox"]:disabled + label, -.rux-radio-button input[type="radio"]:disabled + label, -.satcom-radio-button input[type="radio"]:disabled + label { - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); -} - -/* -** -** ASTRO DROP DOWN -** ========================================================================== -** 2.0.1 Notes -*/ - -.rux-select { - -webkit-appearance: none; - -moz-appearance: none; - - border: 1px solid rgb(0, 90, 143); - - border: 1px solid var(--selectBorderColor, rgb(0, 90, 143)); - border-radius: 3px; - border-radius: var(--buttonBorderRadius, 3px); - - color: rgb(255, 255, 255); - - color: var(--selectTextColor, rgb(255, 255, 255)); - font-family: "Open Sans", sans-serif; - font-size: 0.875rem; - line-height: 1.5; - height: 2rem; - padding: 0 1.2rem 0 0.625rem; - - background-color: rgb(0, 90, 143); - - background-color: var(--selectBackgroundColor, rgb(0, 90, 143)); - background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") - ; - background-image: var( - --selectCaret, - url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") - ); - background-position: center right 0.625rem; - background-repeat: no-repeat; -} - -.rux-select .rux-select optgroup, -.rux-select option { - color: rgb(0, 0, 0); - background-color: rgb(255, 255, 255); -} - -.rux-select:disabled { - opacity: 0.4; - cursor: not-allowed; -} - -.rux-select::-ms-expand { - display: none; -} - -.rux-select:focus::-ms-value { - background: transparent; -} - -.rux-form-element { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; -} - -.rux-form-element label { - color: rgb(255, 255, 255); -} - -/* -** -** ASTRO INPUT TEXT FIELDS -** ========================================================================== -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed linear gradients -** - Updated text entry field to WCAG -*/ - -/* -** -** INPUT TEXT -** ========================================================================== -*/ - -/* REQUIRED CLASSES */ - -:root { - --padding: 0.5rem; - --paddingLeft: 0.5rem; - --paddingRight: 0.5rem; - --paddingTop: 0.25rem; - --paddingBottom: 0.25rem; -} - -.rux-form-field { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - - font-family: "Open Sans", sans-serif; - - font-family: var(--fontFamilty, "Open Sans", sans-serif); - font-size: 1rem; - font-size: var(--fontSize, 1rem); - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); -} - -.rux-form-field input:required + label::after { - content: "*"; - margin-left: 0.25rem; -} - -.rux-form-field__label { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - margin: 0 0 0.15rem 0; - width: 100%; - -ms-flex-line-pack: center; - align-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - color: rgb(255, 255, 255); - - color: var(--fontColor, rgb(255, 255, 255)); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.rux-form-field input { - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - - height: 2.25rem; - width: 100%; - padding: 0.5rem; - - border: 1px solid transparent; - - border: 1px solid var(--inputBorderColor, transparent); - border-radius: 3px; - - font-size: 1rem; - - font-size: var(--fontSize, 1rem); - color: rgb(0, 0, 0); - color: var(--inputTextColor, rgb(0, 0, 0)); -} - -.rux-form-field textarea { - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - - min-height: 4.25rem; - width: 100%; - padding: 0.5rem; - - border: 1px solid var(--inputBorderColor, transparent); - border-radius: 3px; - - font-family: var(--fontFamily, "Open Sans", sans-serif); - font-size: var(--fontSize, 1rem); - color: var(--inputTextColor, rgb(0, 0, 0)); -} - -.rux-form-field input[type="number"]::-webkit-inner-spin-button, -.rux-form-field input[type="number"]::-webkit-outer-spin-button, -.rux-form-field input[type="date"]::-webkit-inner-spin-button, -.rux-form-field input[type="date"]::-webkit-outer-spin-button, -.rux-form-field input[type="date"]::-webkit-calendar-picker-indicator { - -webkit-appearance: none; - display: none; -} - -/* VALIDATION */ - -.rux-form-field input:invalid { - border: 1px solid var(--inputInvalidBorderColor); - - background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FF3030%22%20fill-rule%3D%22evenodd%22%20d%3D%22M64.031%205c8.461%200%2068.88%20107.243%2063.648%20114.184-5.232%206.942-120.805%205.477-127.212%200C-5.941%20113.708%2055.57%205%2064.03%205zm3.45%2075.894l1.822-34.893H56.946l1.82%2034.893h8.715zM56.803%2093.108c0%201.929.547%203.423%201.643%204.483%201.095%201.06%202.642%201.589%204.642%201.589%201.953%200%203.477-.542%204.572-1.625%201.095-1.084%201.643-2.566%201.643-4.447%200-1.952-.542-3.452-1.625-4.5-1.084-1.047-2.613-1.571-4.59-1.571-2.047%200-3.607.512-4.678%201.536-1.072%201.023-1.607%202.535-1.607%204.535z%22%2F%3E%0A%3C%2Fsvg%3E"); - background-repeat: no-repeat; - background-size: 1.125rem; - background-position: center right 0.5rem; -} - -/* FOCUS RULES */ -.rux-form-field input:focus, -.rux-form-field input:invalid:focus { - /* outline: none; */ -} - -.rux-form-field input:not([type="search"]):focus, -.rux-form-field input:not([type="search"]):invalid:focus { - border: 1px solid var(--inputFocusBorderColor); - /* border-left: 4px solid var(--inputFocusBorderColor); */ - /* padding-left: calc(0.5rem - 3px); */ -} - -.rux-form-field input::-moz-selection { - background-color: rgb(184, 222, 255); - background-color: var(--colorSecondaryLighten3); -} - -.rux-form-field input::selection { - background-color: rgb(184, 222, 255); - background-color: var(--colorSecondaryLighten3); -} -/* -.rux-form-field input:invalid + label::before { - content: ""; - display: block; - height: 1rem; - width: 1.25rem; - margin-right: 0.25rem; - - background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FF3030%22%20fill-rule%3D%22evenodd%22%20d%3D%22M64.031%205c8.461%200%2068.88%20107.243%2063.648%20114.184-5.232%206.942-120.805%205.477-127.212%200C-5.941%20113.708%2055.57%205%2064.03%205zm3.45%2075.894l1.822-34.893H56.946l1.82%2034.893h8.715zM56.803%2093.108c0%201.929.547%203.423%201.643%204.483%201.095%201.06%202.642%201.589%204.642%201.589%201.953%200%203.477-.542%204.572-1.625%201.095-1.084%201.643-2.566%201.643-4.447%200-1.952-.542-3.452-1.625-4.5-1.084-1.047-2.613-1.571-4.59-1.571-2.047%200-3.607.512-4.678%201.536-1.072%201.023-1.607%202.535-1.607%204.535z%22%2F%3E%0A%3C%2Fsvg%3E"); - background-repeat: no-repeat; - background-size: 1rem; - background-position: center center; -} */ - -.rux-form-field__validation-message { - display: none; - position: absolute; - max-width: 16rem; - background-color: var(--colorCritical); - width: 100%; - padding: 0.25rem; - right: 0; - font-size: 0.875rem; - font-size: var(--fontSizeMD); -} - -.rux-form-field input:invalid .rux-form-field__validation-message { - display: block; -} - -/* .rux-form-field - input:not([type="search"]):not([type="checkbox"]):not([type="radio"]):optional - + label::after { - display: block; - content: "(optional)"; - font-size: 0.875rem; - margin: 0.1rem auto 0 0.25rem; - - opacity: 0.4; -} */ - -.rux-form-field input:disabled { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -.rux-form-field--large, -.rux-form-field--large label, -.rux-form-field--large input, -.rux-form-field--large textarea { - font-size: 1.125rem; - font-size: var(--fontSizeXL, 1.125rem); -} - -.rux-form-field--small, -.rux-form-field--small label, -.rux-form-field--small input, -.rux-form-field--small textarea { - font-size: 0.875rem; - font-size: var(--fontSizeMD, 0.875rem); -} - -.rux-form-field--large input, -.rux-form-field--large textarea { - padding: 0.5rem; -} - -.rux-form-field--large input { - height: 2.5rem; -} - -.rux-form-field--small input, -.rux-form-field--small textarea { - padding: 0.3rem; -} - -.rux-form-field--small input { - height: 1.625rem; -} - -.rux-form-field--large input:invalid { - background-size: 1.375rem; - background-position: center right 0.5rem; - padding: 0.5rem 1.875rem 0.5rem 0.5rem; -} - -.rux-form-field input:focus .rux-form-field input:invalid:focus { - -webkit-box-shadow: inset 0 0 3px var(--colorGray, rgb(204, 204, 204)); - box-shadow: inset 0 0 3px var(--colorGray, rgb(204, 204, 204)); - border-color: var(--inputFocusBorderColor); - outline: none; - color: black; -} - -.rux-form-field input[type="search"]::-webkit-search-decoration { - -webkit-appearance: textfield; -} - -/* SEARCH VARIANT */ -.rux-form-field input[type="search"] { - -webkit-appearance: none; - -moz-appearance: none; - padding: 0.5rem 0.5rem 0.5rem 1.75rem; - - background: no-repeat center left 0.3rem/1.1em - url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") - rgb(255, 255, 255); - - background: no-repeat center left 0.3rem/1.1em - url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") - var(--inputBackgroundColor, rgb(255, 255, 255)); -} - -.rux-form-field--large input[type="search"] { - padding: 0.5rem 0 0.5rem 2rem; -} - -.rux-form-field--small input[type="search"] { - padding: 0.3rem 0 0.3rem 1.5rem; -} - -.rux-form-field input[type="search"]::-webkit-search-cancel-button { - position: relative; - - -webkit-appearance: none; - width: 20px; - height: 20px; - background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22rgb(0%2C%2090%2C%20143)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M69.028%2064l22.628%2022.627-5.029%205.029L64%2069.028%2041.373%2091.656l-5.029-5.029L58.972%2064%2036.344%2041.373l5.029-5.029L64%2058.972l22.627-22.628%205.029%205.029L69.028%2064z%22%2F%3E%0A%3C%2Fsvg%3E"); -} - -.rux-form-field input[type="search"]::-ms-clear { - position: relative; - right: 0.25rem; - width: 20px; - height: 20px; - background-color: red; -} - -/* -** -** TABLE -** ========================================================================== -*/ - -/* REQUIRED CLASSES */ -.rux-table, -.satcom-table { - border-collapse: separate; - border-spacing: 5px; - - color: #fff; -} - -.rux-table th, -.satcom-table th { - font-stretch: condensed; - font-weight: 300; - text-align: left; - color: rgba(255, 255, 255, 0.6); -} - -.rux-table td, -.rux-table th, -.satcom-table td, -.satcom-table th { - padding: 0.5em 1em 1em 0.75em; - - border-top: 1px solid rgba(216, 216, 216, 0.1); - background-color: rgba(216, 216, 216, 0.1); -} - -.rux-table__column-head th, -.satcom-table-column-head th { - padding-bottom: 0.5em; -} - -.rux-table tfoot, -.satcom-table tfoot { - font-size: 0.7rem; -} - -.rux-table .selected, -.satcom-table .selected { - background: #36557a; -} diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.core.min.css b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.core.min.css deleted file mode 100644 index 8130b920b3..0000000000 --- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.core.min.css +++ /dev/null @@ -1,122 +0,0 @@ -:root{--disabledControlOpacity: 0.4;--disabledControlCursor: not-allowed;--disabledOpacity: 0.4;--disabledCursor: not-allowed;--buttonBorderRadius: 3px;--defaultBorderRadius: 3px;--controlOptionSize: 1.25rem;--controlBorderRadius: 3px;--labelFontSize: 1rem;--smallLabelFontSize: 0.875rem;--largeLabelFontSize: 1.125rem;--fontFamily: "Open Sans", sans-serif;--fontSize: 1rem;--fontSizeXL: 1.125rem;--fontSizeLG: 1rem;--fontSizeMD: 0.875rem;--fontSizeSM: 0.75rem;--fontSizeXS: 0.65rem;--fontFamilyLight: "Open Sans Light", sans-serif;--fontFamilyMono: "Roboto Mono", monospace;--colorBlack: rgb(0, 0, 0);--colorWhite: rgb(255, 255, 255);--colorGray: rgb(204, 204, 204);--colorPrimary: rgb(0, 90, 143);--colorSecondary: rgb(77, 172, 255);--colorTertiary: rgb(40, 63, 88);--colorQuaternary: rgb(207, 214, 227);--statusDarkCritical: rgb(255, 56, 56);--statusDarkSerious: rgb(255, 179, 0);--statusDarkCaution: rgb(252, 232, 58);--statusDarkNormal: rgb(86, 240, 0);--statusDarkStandby: rgb(45, 204, 255);--statusDarkOff: rgb(158, 167, 173);--statusLightCritical: rgb(255, 42, 4);--statusLightSerious: rgb(255, 175, 61);--statusLightCaution: rgb(250, 216, 0);--statusLightNormal: rgb(0, 226, 0);--statusLightStandby: rgb(100, 217, 255);--statusLightOff: rgb(142, 154, 163);--colorTag1: rgb(25, 199, 202);--colorTag2: rgb(120, 112, 208);--colorTag3: rgb(160, 13, 190);--colorTag4: rgb(216, 83, 30);--colorPrimaryLighten5: rgb(51, 123, 165);--colorPrimaryLighten1: rgb(51, 123, 165);--colorPrimaryLighten2: rgb(102, 156, 188);--colorPrimaryLighten3: rgb(153, 189, 210);--colorPrimaryLighten4: rgb(204, 222, 233);--colorPrimaryDarken1: rgb(0, 72, 114);--colorPrimaryDarken2: rgb(0, 54, 86);--colorPrimaryDarken3: rgb(0, 36, 57);--colorPrimaryDarken4: rgb(0, 18, 29);--colorSecondaryLighten1: rgb(113, 189, 255);--colorSecondaryLighten2: rgb(148, 205, 255);--colorSecondaryLighten3: rgb(184, 222, 255);--colorSecondaryLighten4: rgb(219, 238, 255);--colorSecondaryDarken1: rgb(62, 138, 204);--colorSecondaryDarken2: rgb(46, 103, 153);--colorSecondaryDarken3: rgb(31, 69, 102);--colorSecondaryDarken4: rgb(15, 34, 51);--colorTertiaryLighten1: rgb(83, 101, 121);--colorTertiaryLighten2: rgb(126, 140, 155);--colorTertiaryLighten3: rgb(169, 178, 188);--colorTertiaryLighten4: rgb(212, 217, 222);--colorTertiaryDarken1: rgb(32, 50, 70);--colorTertiaryDarken2: rgb(24, 38, 53);--colorTertiaryDarken3: rgb(16, 25, 35);--colorTertiaryDarken4: rgb(8, 13, 18);--colorQuaternaryLighten1: rgb(217, 222, 233);--colorQuaternaryLighten2: rgb(226, 230, 238);--colorQuaternaryLighten3: rgb(236, 239, 244);--colorQuaternaryLighten4: rgb(245, 247, 249);--colorQuaternaryDarken1: rgb(166, 171, 182);--colorQuaternaryDarken2: rgb(124, 128, 136);--colorQuaternaryDarken3: rgb(83, 86, 91);--colorQuaternaryDarken4: rgb(41, 43, 45);--colorCriticalLighten1: rgb(255, 96, 96);--colorCriticalLighten2: rgb(255, 136, 136);--colorCriticalLighten3: rgb(255, 175, 175);--colorCriticalLighten4: rgb(255, 215, 215);--colorCriticalDarken1: rgb(204, 45, 45);--colorCriticalDarken2: rgb(153, 34, 34);--colorCriticalDarken3: rgb(102, 22, 22);--colorCriticalDarken4: rgb(51, 11, 11);--colorSeriousLighten1: rgb(255, 194, 51);--colorSeriousLighten2: rgb(255, 209, 102);--colorSeriousLighten3: rgb(255, 225, 153);--colorSeriousLighten4: rgb(255, 240, 204);--colorSeriousDarken1: rgb(204, 143, 0);--colorSeriousDarken2: rgb(153, 107, 0);--colorSeriousDarken3: rgb(102, 72, 0);--colorSeriousDarken4: rgb(51, 36, 0);--colorCautionLighten1: rgb(253, 237, 97);--colorCautionLighten2: rgb(253, 241, 137);--colorCautionLighten3: rgb(254, 246, 176);--colorCautionLighten4: rgb(254, 250, 216);--colorCautionDarken1: rgb(202, 186, 46);--colorCautionDarken2: rgb(151, 139, 35);--colorCautionDarken3: rgb(101, 93, 23);--colorCautionDarken4: rgb(50, 46, 12);--colorNormalLighten1: rgb(120, 243, 51);--colorNormalLighten2: rgb(154, 246, 102);--colorNormalLighten3: rgb(187, 249, 153);--colorNormalLighten4: rgb(221, 252, 204);--colorNormalDarken1: rgb(69, 192, 0);--colorNormalDarken2: rgb(52, 144, 0);--colorNormalDarken3: rgb(34, 96, 0);--colorNormalDarken4: rgb(17, 48, 0);--colorStandbyLighten1: rgb(87, 214, 255);--colorStandbyLighten2: rgb(129, 224, 255);--colorStandbyLighten3: rgb(171, 235, 255);--colorStandbyLighten4: rgb(213, 245, 255);--colorStandbyDarken1: rgb(36, 163, 204);--colorStandbyDarken2: rgb(27, 122, 153);--colorStandbyDarken3: rgb(18, 82, 102);--colorStandbyDarken4: rgb(9, 41, 51);--colorOffLighten1: rgb(177, 185, 189);--colorOffLighten2: rgb(197, 202, 206);--colorOffLighten3: rgb(216, 220, 222);--colorOffLighten4: rgb(236, 237, 239);--colorOffDarken1: rgb(126, 134, 138);--colorOffDarken2: rgb(95, 100, 104);--colorOffDarken3: rgb(63, 67, 69);--colorOffDarken4: rgb(32, 33, 35);--colorTag1Lighten1: rgb(71, 210, 213);--colorTag1Lighten2: rgb(117, 221, 223);--colorTag1Lighten3: rgb(163, 233, 234);--colorTag1Lighten4: rgb(209, 244, 244);--colorTag1Darken1: rgb(20, 159, 162);--colorTag1Darken2: rgb(15, 119, 121);--colorTag1Darken3: rgb(10, 80, 81);--colorTag1Darken4: rgb(5, 40, 40);--colorTag2Lighten1: rgb(147, 141, 217);--colorTag2Lighten2: rgb(174, 169, 227);--colorTag2Lighten3: rgb(201, 198, 236);--colorTag2Lighten4: rgb(228, 226, 246);--colorTag2Darken1: rgb(96, 90, 166);--colorTag2Darken2: rgb(72, 67, 125);--colorTag2Darken3: rgb(48, 45, 83);--colorTag2Darken4: rgb(24, 22, 42);--colorTag3Lighten1: rgb(179, 61, 203);--colorTag3Lighten2: rgb(198, 110, 216);--colorTag3Lighten3: rgb(217, 158, 229);--colorTag3Lighten4: rgb(236, 207, 242);--colorTag3Darken1: rgb(128, 10, 152);--colorTag3Darken2: rgb(96, 8, 114);--colorTag3Darken3: rgb(64, 5, 76);--colorTag3Darken4: rgb(32, 3, 38);--colorTag4Lighten1: rgb(224, 117, 75);--colorTag4Lighten2: rgb(232, 152, 120);--colorTag4Lighten3: rgb(239, 186, 165);--colorTag4Lighten4: rgb(247, 221, 210);--colorTag4Darken1: rgb(173, 66, 24);--colorTag4Darken2: rgb(130, 50, 18);--colorTag4Darken3: rgb(86, 33, 12);--colorTag4Darken4: rgb(43, 17, 6);--colorWhiteLighten1: rgb(255, 255, 255);--colorWhiteLighten2: rgb(255, 255, 255);--colorWhiteLighten3: rgb(255, 255, 255);--colorWhiteLighten4: rgb(255, 255, 255);--colorWhiteDarken1: rgb(204, 204, 204);--colorWhiteDarken2: rgb(153, 153, 153);--colorWhiteDarken3: rgb(102, 102, 102);--colorWhiteDarken4: rgb(51, 51, 51);--colorBlackLighten1: rgb(51, 51, 51);--colorBlackLighten2: rgb(102, 102, 102);--colorBlackLighten3: rgb(153, 153, 153);--colorBlackLighten4: rgb(204, 204, 204);--colorBlackDarken1: rgb(0, 0, 0);--colorBlackDarken2: rgb(0, 0, 0);--colorBlackDarken3: rgb(0, 0, 0);--colorBlackDarken4: rgb(0, 0, 0);--colorGrayLighten1: rgb(214, 214, 214);--colorGrayLighten2: rgb(224, 224, 224);--colorGrayLighten3: rgb(235, 235, 235);--colorGrayLighten4: rgb(245, 245, 245);--colorGrayDarken1: rgb(163, 163, 163);--colorGrayDarken2: rgb(122, 122, 122);--colorGrayDarken3: rgb(82, 82, 82);--colorGrayDarken4: rgb(41, 41, 41)}@font-face{font-family:"Open Sans";src:url(../fonts/opensans-bold-webfont.woff2) format("woff2"),url(../fonts/opensans-bold-webfont.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Open Sans";src:url(../fonts/opensans-light-webfont.woff2) format("woff2"),url(../fonts/opensans-light-webfont.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Open Sans";src:url(../fonts/opensans-regular-webfont.woff2) format("woff2"),url(../fonts/opensans-regular-webfont.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Roboto Mono";src:url(../fonts/roboto-mono-regular.woff2) format("woff2"),url(../fonts/roboto-mono-regular.woff) format("woff");font-weight:400;font-style:normal}.dark-theme,.light-theme{--fontLowContrastColor: var(--colorGray, rgb(204, 204, 204));--buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--buttonBorderColor: var(--colorPrimary, rgb(0, 90, 143));--buttonBoxShadow: 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);--buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));--buttonHoverBorderColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));--buttonHoverBoxShadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2);--buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143));--buttonOutlineBackgroundColor: transparent;--buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143));--buttonOutlineHoverBorderColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--controlSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--progressDeterminateBarBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - );--sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255));--sliderSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - );--segmentedButtonSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255));--selectBorderColor: var(--colorPrimary, rgb(0, 90, 143));--selectCaret: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");--toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122));--toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204));--toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122));--treeAccentColor: var(--colorSecondary, rgb(77, 172, 255));--cardHeaderTextColor: var(--colorWhite, #fff);--inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--inputTextColor: var(--colorBlack, rgb(14, 11, 11));--inputFocusBorderColor: var(--colorSecondary);--inputInvalidBorderColor: var(--colorCritical, rgb(255, 48, 48));--timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255));--timelineRegionSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(62, 138, 204) - );--timelineRegionSelectedTextColor: var(--fontColor, rgb(255, 255, 255))}.light-theme{--backgroundColor: var(--colorQuaternaryLighten3, rgb(243, 245, 248));--fontColor: var(--colorBlack, rgb(0, 0, 0));--fontInvertedColor: var(--colorWhite, rgb(255, 255, 255));--fontInvertedBackgroundColor: var(--colorBlack, rgb(0, 0, 0));--fontLinkColor: var(--colorSecondaryDarken1, rgb(62, 138, 204));--fontLinkHoverColor: var(--colorSecondary, rgb(77, 172, 255));--wcagCompliance: rgba(0, 0, 0, 0.5);--criticalBorder: #7f1c1c;--colorCritical: var(--statusLightCritical, rgb(255, 42, 4));--colorSerious: var(--statusLightSerious, rgb(255, 175, 61));--colorCaution: var(--statusLightCaution, rgb(250, 216, 0));--colorNormal: var(--statusLightNormal, rgb(0, 226, 0));--colorStandby: var(--statusLightStandby, rgb(100, 217, 255));--colorOff: var(--statusLightOff, rgb(142, 154, 163));--buttonTextColor: var(--colorWhite, rgb(255, 255, 255));--buttonHoverTextColor: var(--colorWhite, rgb(255, 255, 255));--buttonActiveControlTextColor: var(--colorWhite, rgb(255, 255, 255));--buttonDefaultBorderColor: var(--colorWhite, rgb(255, 255, 255));--buttonOutlineTextColor: var(--colorPrimary, rgb(0, 90, 143));--buttonOutlineHoverTextColor: var(--colorPrimary, rgb(0, 90, 143));--buttonOutlineHoverBackgroundColor: rgba(0, 90, 143, 0.05);--controlTextColor: var(--colorWhite, rgb(255, 255, 255));--controlLabelColor: var(--colorBlack, rgb(0, 0, 0));--controlBorderColor: var(--colorPrimary, rgb(0, 90, 143));--controlAccentColor: var(--colorSecondary, rgb(77, 172, 255));--controlSelectedTextColor: var(--colorBlack, rgb(0, 0, 0));--controlSelectedBorderColor: var(--colorPrimary, rgb(0, 90, 143));--controlHoverOutlineBackgroundColor: none;--controlSelectedOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143));--controlSelectedOutlineBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--progressDeterminateTrackBackgroundColor: var( - --colorWhite, - rgb(255, 255, 255) - );--progressDeterminateTrackBorderColor: var( - --colorQuaternary, - rgb(207, 214, 227) - );--progressIndeterminate: url("data:image/svg+xml,%3Csvg width='66' height='66' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='70.883%25' y1='4.637%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%235CB3FF' offset='0%25'/%3E %3Cstop stop-color='%23F6F7F8' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M33 65.5C15.05 65.5.5 50.95.5 33S15.05.5 33 .5 65.5 15.05 65.5 33 50.95 65.5 33 65.5zm0-7c14.083 0 25.5-11.417 25.5-25.5S47.083 7.5 33 7.5 7.5 18.917 7.5 33 18.917 58.5 33 58.5z' stroke='%23D7DDE2' fill='%23FFF'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)' transform='translate(1 1)'/%3E %3Cpath d='M48.564 13c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C53 7.248 51.572 5 49.234 5S45 6.867 45 9.17c0 2.304 1.225 3.83 3.564 3.83z' stroke='%234DACFF' fill='%2352AEFF'/%3E %3C/g%3E %3C/svg%3E ");--sliderTrackBorderColor: var(--colorQuaternary, rgb(207, 214, 227));--sliderTrackBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--segmentedButtonBorderColor: var(--colorPrimary, rgb(0, 90, 143));--segmentedButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--segmentedButtonTextColor: var(--colorPrimary, rgb(0, 90, 143));--segmentedButtonHoverBackgroundColor: rgb(0, 90, 143, 0.05);--segmentedButtonHoverTextColor: var(--colorPrimary, rgb(0, 90, 143));--segmentedButtonSelectedBoxShadow: inset 0 3px 4px rgba(0, 0, 0, 0.1), - inset 0 1px 5px rgba(0, 0, 0, 0.06);-webkit-transition:-webkit-box-shadow .067s ease-out;transition:box-shadow .067s ease-out;transition:box-shadow .067s ease-out,-webkit-box-shadow .067s ease-out;--selectBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--selectTextColor: var(--colorPrimary, rgb(0, 90, 143));--toggleButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--toggleButtonBoxShadow: 0 0 3px rgba(0, 0, 0, 0.25), - 1px 0 2px rgba(0, 0, 0, 0.3);--toggleBaseBackgroundColor: linear-gradient( - to right, - var(--colorNormal) 50%, - var(--colorPrimaryLighten4) 50.1% - );--toggleBaseBorderColor: var(--colorPrimaryLighten1, rgb(0, 90, 143));--toggleBaseTextColor: var(--colorPrimary, rgb(255, 255, 255));--toggleBaseSelectedTextColor: #007300;--toggleButtonSelectedBoxShadow: 0 0 3px rgba(0, 0, 0, 0.3), - -1px 0 2px rgba(0, 0, 0, 0.3);--toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122));--toggleSelectedThumbBorderColor: var( - --colorStandbyDarken2, - rgb(27, 122, 153) - );--toggleSelectedThumbBackgroundColor: var(--colorStandby, rgb(100, 217, 255));--toggleSelectedTrackBorderColor: var( - --colorStandbyDarken2, - rgb(27, 122, 153) - );--toggleSelectedTrackBackgroundColor: var(--colorStandby, rgb(100, 217, 255));--toggleDisabledThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--toggleDisabledSelectedThumbBorderColor: var( - --colorPrimaryLighten3, - rgb(153, 189, 210) - );--pushbuttonBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--pushbuttonBorderColor: var(--colorPrimary, rgb(0, 90, 143));--pushbuttonTextColor: var(--colorPrimary, rgb(0, 90, 143));--pushbuttonSelectedBackgroundColor: var(--colorNormal, rgb(91, 255, 0));--pushbuttonSelectedBorderColor: #3dc100;--pushbuttonSelectedTextColor: #007300;--clockTextColor: var(--colorBlack, rgb(0, 0, 0));--clockBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--clockBorderColor: var(--colorQuaternary, rgb(39, 86, 128));--modalTextColor: var(--colorBlack, rgb(0, 0, 0));--modalBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--modalBorderColor: var(--colorPrimary, rgb(0, 90, 143));--logTextColor: var(--colorBlack);--logBackgroundColor: var(--colorWhite);--logBorderColor: var(--colorQuaternaryLighten2);--logHeaderTextColor: var(--colorBlack);--logHeaderBackgroundColor: var(--colorQuaternary);--logFilterBackgroundColor: var(--colorStandbyLighten3);--logFilterTextColor: var(--colorStandbyDarken2);--treeTextColor: var(--colorBlack, rgb(0, 0, 0));--treeBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--treeBorderColor: var(--colorQuaternary, 207, 214, 227);--treeItemBorderColor: var(--colorQuaternary, 207, 214, 227);--treeHoverBackgroundColor: var(--colorSecondaryLighten4, rgb(219, 238, 255));--treeHoverAccentColor: var(--colorSecondaryLighten3, rgb(184, 222, 255));--treeSelectedBackgroundColor: var( - --colorSecondaryLighten3, - rgb(184, 222, 255) - );--treeSelectedAccentColor: var(--colorSecondaryLighten1, rgb(113, 189, 255));--treeSelectedTextColor: var(--colorBlack, rgb(0, 0, 0));--treeChildrenBackgroundColor: var( - --colorQuaternaryLighten3, - rgb(236, 239, 244) - );--tabTextColor: var(--colorPrimary, rgb(0, 90, 143));--tabBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--tabBorderColor: var(--colorQuaternaryLighten1, rgb(219, 224, 234));--tabHoverTextColor: var(--colorSecondary, rgb(77, 172, 255));--tabSelectedTextColor: var(--colorBlack, rgb(0, 0, 0));--tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255));--cardBackgroundColor: var(--colorQuaternaryLighten2);--cardHeaderBackgroundColor: var(--colorQuaternaryLighten1);--inputBorderColor: var(--colorQuaternaryDarken1, rgb(255, 255, 255));--inputFocusBoxShadow: none;--statusSymbols: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAA81BMVEUAAABaPhVcDwE7CQA6gJIAAAAATQAkTlsATgBcPxYrHAciGgkAAABcPxU0coUARgAxNTgnU2IoV2YzNjoAUgAtYXEzODovZngAUQAAUAAwNDg0dIk2d4sAOgAjKCgAGAAADQA+hJVZPBRcPxb62AAA4gD/rz1VSQBk2f//KgQiSldXDgEATQCOmqNXOxQwNDdoRhiGWx+tHAJiEAFZw+b1KAMAywDlnTb5qjv7rDzpnzdMpcNJn7xFlrGMmKGEj5g4eY82d4xxe4IyboIwaHskT15GTFEA2gAArAAAnAAAfgAAfABg0vddyu5cZGpg0fbOjTE6oyFAAAAAJHRSTlMA7cc4Kgj9+vbBJB4GypVn9vPu5t/Y18O8n4B/ckY6FRMdmtlkVn4PAAACq0lEQVRYw+2YaVPaUBSGqWbTWsK+b9pC6ek1lypGW1T2RUDb//9rmpsm3Nyc1DQfOhMc3k/cyUzmfeY5BxISh+xXzi7eJ/Y5ZyfGu30msPobQQSf/5KEmKZeymlarqQ3g28vJfMZVc3kk1LUYkdfA3OE+/duv3GCaACtskKcKOVWQP0i7FKMiHAcDHAc0L9zxwgQwKeAiAB1jZD1ylwuzdWaEK3u71BTAUaD/nbbH4wA1FpUBVdffLliAnD/DieIBKArZGO2nZgboujiLZIA437XSX8MkIyo4PpG7H9zzQTg/pwgEkBdIU9tT56IIjioATx0PXkAqEVWgAXg/pwgEkBLY/1FAq3lmX+V9RcJVLwHcqWQShUqcpgCLgD35wRRAMpk0/ZlQ8r8BkUY27XvZ/P57N7+OIaiv2QjS+1kG2EKuADcHxOEAzQVYvoBTKI0dwIA2Pw/T8HO9JntAYDk60/pYjIcThaUNkIUcAG4PyYIB9DJuo2yJjrf4FHXyhTSVUmqpmHKTiPfHstZ+vJ4aeXxhWblYAVYAO6PCcIBSmSFAVak5F7Pw4DND6TP2ek8DWyKBpAXClbogvVnBAtaCVaABeD+mCAcIMcmCM9Qzr2esSdoBtU/xyrM7BnKCAULdHLpZEILr2wBEnBhGL86OHc94+M/AmhkiQGWRHOvq7C1Gs/doZdgbh23oAr9UnToAgxp6pUvIrQB8gej9wP1/24ZOP2fAD+jAHAFXAAmwP1jNUK2Ai4AE+D+sVpiRwEXgAhQ/3h9jboKuABMIPaP1w8ZV8AFIAKhf8weJXYKBAGIgPeP2cMcVyAIwARu/7g9TnMFggBM4PSP2wuNR4EgABPc2v1j90rpUSAIwAQG6x+7l3qvAkEAJmD94/e3ileBIAATnJwmDjnkTeU3PTFjExFNx+YAAAAASUVORK5CYII=");--scrollBarThumbBackgroundColor: var(--colorQuaternaryDarken1, #9ba0aa);--scrollBarThumbBackgroundHoverColor: var(--colorQuaternaryDarken2, #676a71);--scrollBarTrackBackgroundColor: transparent;--scrollBarTrackCornerBackgroundColor: var( - --colorQuaternaryLighten4, - #f2f4f7 - );--timelineHeaderBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35));--timelineHeaderTextColor: var(--fontColor, rgb(0, 0, 0));--timelineRulerBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35));--timelineRulerTextColor: var(--fontColor, rgb(0, 0, 0));--timelineTrackLabelBackgroundColor: var( - --colorQuaternaryLighten2, - rgb(40, 63, 88) - );--timelineTrackBackgroundColor: var( - --colorQuaternaryLighten2, - rgb(40, 63, 88) - );--timelineRegionBackgroundColor: var(--colorPrimaryLighten4, rgb(24, 38, 53));--timelineRegionBorderColor: var(--colorPrimaryLighten3);--timelineRegionSelectedBorderColor: var( - --colorSecondaryDarken3, - rgb(77, 172, 255) - );--accordionBorderColor: rgb(207, 214, 227);--accordionContentBackground: rgb(226, 230, 238);--accordionClosedLabelBackground: rgb(255, 255, 255);--accordionOpenLabelBackground: rgb(245, 247, 249);--accordionHoverLabelBackground: rgb(236, 239, 244);--accordionColor: rgb(0, 0, 0)}li.dark-theme,li.light-theme{display:none}.dark-theme{--backgroundColor: var(--colorTertiaryDarken2, rgb(46, 103, 153));--fontColor: var(--colorWhite, rgb(255, 255, 255));--fontInvertedColor: var(--colorBlack, rgb(0, 0, 0));--fontInvertedBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--fontLinkColor: var(--colorSecondary, rgb(77, 172, 255));--fontLinkHoverColor: var(--colorSecondaryLighten1, rgb(113, 189, 255));--wcagCompliance: rgba(255, 255, 255, 0);--criticalBorder: var(--colorCritical, rgb(255, 56, 56));--colorCritical: var(--statusDarkCritical, rgb(255, 42, 4));--colorSerious: var(--statusDarkSerious, rgb(255, 175, 61));--colorCaution: var(--statusDarkCaution, rgb(250, 216, 0));--colorNormal: var(--statusDarkNormal, rgb(0, 226, 0));--colorStandby: var(--statusDarkStandby, rgb(45, 204, 255));--colorOff: var(--statusDarkOff, rgb(142, 154, 163));--buttonTextColor: var(--colorWhite, #fff);--buttonHoverTextColor: var(--colorWhite, #fff);--buttonActiveControlTextColor: var(--colorWhite, #fff);--buttonDefaultBorderColor: var(--colorWhite, #fff);--buttonOutlineTextColor: var(--colorWhite, rgb(255, 255, 255));--buttonOutlineHoverTextColor: var(--colorSecondary, rgb(0, 90, 143));--buttonOutlineHoverBackgroundColor: rgba(30, 47, 66, 0.75);--controlTextColor: var(--colorWhite, #fff);--controlLabelColor: var(--colorWhite, rgb(255, 255, 255));--controlBorderColor: var(--colorSecondaryLighten1, rgb(77, 172, 255));--controlAccentColor: var(--colorSecondaryLighten1, rgb(77, 172, 255));--controlSelectedTextColor: var(--colorWhite, #fff);--controlSelectedBorderColor: var(--colorWhite, rgb(255, 255, 255));--progressDeterminateTrackBackgroundColor: rgba(0, 0, 0, 0.3);--progressDeterminateTrackBorderColor: var( - --colorTertiaryDarken2, - rgb(20, 32, 44) - );--progressIndeterminate: url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='65.479%25' y1='-8.436%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%234dacff' offset='0%25'/%3E %3Cstop stop-color='%234dacff' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm0-6c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26z' fill='rgba(0,0,0,.3)'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)'/%3E %3Cpath d='M47.564 12c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C52 6.248 50.572 4 48.234 4S44 5.867 44 8.17c0 2.304 1.225 3.83 3.564 3.83z' fill='%234dacff'/%3E %3C/g%3E %3C/svg%3E ");--sliderTrackBorderColor: transparent;--sliderTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204));--sliderHoverThumbBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--segmentedButtonBorderColor: var(--colorTertiaryDarken1, rgb(30, 47, 66));--segmentedButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--segmentedButtonTextColor: var(--colorWhite, rgb(255, 255, 255));--segmentedButtonHoverBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--segmentedButtonHoverTextColor: var(--colorWhite, rgb(255, 255, 255));--segmentedButtonSelectedBoxShadow: inset 0 2px 4px rgba(0, 0, 0, 0.14), - inset 0 3px 4px rgba(0, 0, 0, 0.12), inset 0 1px 5px rgba(0, 0, 0, 0.2);--selectBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--selectTextColor: var(--colorWhite, rgb(255, 255, 255));--toggleButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--toggleBaseBackgroundColor: var(--colorBlack, #000);--toggleBaseBorderColor: var(--colorBlack, rgb(0, 0, 0));--toggleBaseTextColor: var(--colorWhite, rgb(255, 255, 255));--toggleBaseSelectedTextColor: var(--colorNormal, rgb(86, 240, 0));--toggleThumbBorderColor: #fff;--toggleSelectedThumbBorderColor: #fff;--toggleSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - );--toggleSelectedTrackBorderColor: var( - --colorSecondaryDarken2, - rgb(46, 103, 153) - );--toggleDisabledThumbBackgroundColor: var( - --colorGrayDarken1, - rgb(163, 163, 163) - );--toggleDisabledSelectedThumbBorderColor: var( - --colorGrayDarken1, - rgb(122, 122, 122) - );--pushbuttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--pushbuttonBorderColor: var(--colorBlack, rgb(0, 0, 0));--pushbuttonTextColor: var(--colorWhite, rgb(255, 255, 255));--pushbuttonSelectedBackgroundColor: var(--colorBlack, rgb(0, 0, 0));--pushbuttonSelectedBorderColor: var(--colorBlack, rgb(0, 0, 0));--pushbuttonSelectedTextColor: var(--colorNormal, rgb(86, 240, 0));--clockTextColor: var(--colorWhite, rgb(255, 255, 255));--clockBackgroundColor: var(--colorTertiaryDarken2, rgb(20, 32, 44));--clockBorderColor: var(--colorTertiary, rgb(39, 86, 128));--logTextColor: var(--colorWhite, rgb(255, 255, 255));--logBackgroundColor: var(--colorTertiaryDarken1);--logBorderColor: var(--colorTertiary);--logHeaderTextColor: var(--colorWhiteDarken2);--logHeaderBackgroundColor: var(--colorTertiaryDarken2);--logFilterBackgroundColor: var(--colorStandbyLighten1);--logFilterTextColor: var(--colorStandbyDarken3);--treeTextColor: var(--colorWhite, rgb(255, 255, 255));--treeBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));--treeBorderColor: var(--colorSecondaryDarken2, rgb(46, 103, 153));--treeItemBorderColor: var(--colorTertiaryDarken2, rgb(24, 38, 53));--treeHoverBackgroundColor: var(--colorPrimaryDarken2, rgb(0, 54, 86));--treeHoverAccentColor: var(--colorPrimaryLighten1, rgb(0, 72, 114));--treeSelectedBackgroundColor: var(--colorPrimaryDarken1, rgb(0, 72, 114));--treeSelectedAccentColor: var(--colorSecondary, rgb(77, 172, 255));--treeSelectedTextColor: var(--colorWhite, rgb(255, 255, 255));--treeChildrenBackgroundColor: var(--colorTertiaryDarken2, rgb(24, 38, 53));--tabTextColor: var(--colorSecondary, rgb(77, 172, 255));--tabBackgroundColor: var(--colorTertiaryDarken1, rgb(30, 47, 66));--tabBorderColor: var(--colorTertiaryDarken2, rgb(20, 32, 44));--tabSelectedTextColor: var(--colorWhite, rgb(255, 255, 255));--tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 355));--cardBackgroundColor: var(--colorTertiaryDarken1);--cardHeaderBackgroundColor: var(--colorTertiaryDarken3);--inputBorderColor: transparent;--inputFocusBoxShadow: inset 0 0 0 1px white, - inset 0 0 0 2px var(--colorPrimary);--statusSymbols: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAAgVBMVEUAAAD/tQv/swL/OTn/PDzftl9W8QBW8AAtzP8v0P9Z9gD/tAP/uQb/tAItzf8tzf+eqK2ep60uzP9X8QCfqK4uzf8uzf9X8QAuzP9X8ACeqK4vzP9Y8QAuzv9Y8gCeqq4wz/8xzv9A1f9Y8QD/tAP86DpW8AD/swL/ODgtzP+ep63tgXPUAAAAJXRSTlMAGNfAQAv98/IdG8Io52zz8+DZ2dC9trabm4F+a05OQjAaDG6dAJcYcwAAAfdJREFUWMPtmNlygkAQRScyrBp3QTZFNBj8/w9MCGI3dBOHMg9jyvOmVFnn1HUSULx4LibjN/HMTN7Po2cu+PY/cwUfPYg2XhKsbHsVJJ5gcaf+cjZb+lN3qJjxyWIw/lAwNMALreKKFTIJh215Y3sYFiD5AEn9oWBowM4uEPau65A6JcJJ/2ACg/pDwdCAo1W0sI6ixbTsMH18Akn9oWBgwK7xh4LWBmlJSB+dwCD+pEA5wLMLgo3OwcGpvzhxludZfH1Bz4EZrefzdWSqTSCJPylQDggLhhA+oD6/G7d+5W7qk9yV3C8uPyz2KhMYxJ8UKAd4Fhdg3SZwa3/4wLrA7fhfbuwVJpDEnxQoByQFS9I6wQ7ydR16js0FBCzMuxMY1J8WqAYEfEDQXPcr3RjbxNU7vsBEF0R0dwJJ/LkCxYAVH7Bqri8r3QzbZNU7S4FZ44B1/ymgA4zPfZwUA2w+wG6uzyrdHMvk1TszgZnjgLmgyL4T8Dbq8R+bWgUIgw4ABby/Vl8hIckAUMD7a3WIYQIYgC0Af73+jOIJpKAF1F+vf2QwAQxAC7C/ZrcSeAIpegvAX7ObOZgABiAF2F+322mYAAagBeCv2wMNTEAGIAWVv3aPlDABDMAW1P7aPdQjDBiALaj89ftZBSGl+LXgZIoXL/4VXyptNwzuHR/QAAAAAElFTkSuQmCC");--scrollBarThumbBackgroundColor: var( - --colorSecondaryDarken2, - rgb(46, 103, 153) - );--scrollBarThumbBackgroundHoverColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--scrollBarTrackBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));--scrollBarTrackCornerBackgroundColor: var( - --colorTertiaryDarken1, - rgb(32, 50, 70) - );--timelineHeaderBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));--timelineHeaderTextColor: var(--fontColor, rgb(255, 255, 255));--timelineRulerBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));--timelineRulerTextColor: var(--fontColor, rgb(255, 255, 255));--timelineTrackLabelBackgroundColor: var(--colorTertiary, rgb(40, 63, 88));--timelineTrackBackgroundColor: var(--colorTertiary, rgb(40, 63, 88));--timelineRegionBackgroundColor: var(--colorPrimaryDarken3, rgb(0, 36, 57));--timelineRegionBorderColor: var(--colorPrimary, rgb(0, 90, 143));--timelineRegionSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255));--accordionBorderColor: rgb(40, 63, 88);--accordionContentBackground: rgb(20, 32, 44);--accordionClosedLabelBackground: rgb(32, 50, 70);--accordionOpenLabelBackground: rgb(40, 63, 88);--accordionHoverLabelBackground: rgb(46, 103, 153);--accordionColor: rgb(255, 255, 255)}h1,h2,h3{font-family:"Open Sans",sans-serif;font-weight:300;color:#fff;color:var(--fontColor, rgb(255, 255, 255));margin:0 0 .5rem}.h1,h1{font-size:2.375rem}.h2,h2{font-size:1.75rem}.h3,h3{font-size:1.375rem}body,p{color:#fff;color:var(--fontColor, rgb(255, 255, 255))}p{margin:0 0 1rem}a{color:#4dacff;color:var(--fontLinkColor, rgb(77, 172, 255));text-decoration:none}a:hover{color:#71bdff;color:var(--fontLinkHoverColor, rgb(113, 189, 255))}dt{font-weight:600;margin:0}dd{margin:0 0 .5rem}.light{font-weight:300}.regular{font-weight:500}.semi-bold{font-weight:600}.bold{font-weight:700}.italic{font-style:italic}.condensed{font-stretch:condensed}.monospace{font-family:"Roboto Mono",sans-serif}.invert,.inverted{background-color:#fff;background-color:var(--fontInvertedBackgroundColor, rgb(255, 255, 255));color:#000;color:var(--fontInvertedColor, rgb(0, 0, 0));padding:0 .25rem}.low-contrast{opacity:.2}.xl{font-size:1.125rem;font-size:var(--fontSizeXL, 1.125rem)}.lg{font-size:1rem;font-size:var(--fontSize, 1rem)}.md{font-size:.875rem;font-size:var(--fontSizeMD, 0.875rem)}.sm{font-size:.75rem;font-size:var(--fontSizeSM, 0.75rem)}.xs{font-size:.65rem;font-size:var(--fontSizeXS, 0.65rem)}html{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}body{margin:0;padding:0;font-family:"Open Sans",sans-serif;font-family:var(--fontFamily, "Open Sans", sans-serif);font-size:1rem;background-color:#182635;background-color:var(--backgroundColor, rgb(24, 38, 53));scrollbar-color:#3a81bf #203246;scrollbar-color:var(--scrollBarThumbBackgroundColor, rgb(58, 129, 191)) var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70))}label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-webkit-scrollbar{width:18px;height:18px;background-color:transparent}::-webkit-scrollbar-thumb{background-color:#2e6799;background-color:var(--scrollBarThumbBackgroundColor, rgb(46, 103, 153));border-radius:10px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:vertical{border-left-width:4px}::-webkit-scrollbar-thumb:horizontal{border-top-width:4px}::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-thumb:hover{background-color:#3a81bf;background-color:var(--scrollBarThumbBackgroundHoverColor, - rgb(58, 129, 191) - )}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:#203246;background-color:var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70))}::-webkit-scrollbar-track:vertical{-webkit-box-shadow:inset 2px 0 4px rgba(0,0,0,.15);box-shadow:inset 2px 0 4px rgba(0,0,0,.15)}::-webkit-scrollbar-track:horizontal{-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15);box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}.rux-button-group{display:-webkit-box;display:-ms-flexbox;display:flex}.rux-button-group .rux-button:not(:last-child){margin-right:.625rem}.rux-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0;padding:0 1rem;height:2.125rem;min-width:2.25rem;border-radius:3px;border-radius:var(--buttonBorderRadius, 3px);color:#fff;color:var(--buttonTextColor, rgb(255, 255, 255));font-family:"Open Sans",sans-serif;font-family:var(--fontFamily, "Open Sans", sans-serif);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rux-button:disabled{opacity:.4;opacity:var(--disabledOpacity, 0.4);cursor:not-allowed;cursor:var(--disabledCursor, not-allowed)}.rux-button:focus{outline:0}.rux-button:not(.rux-button--outline){border:1px solid #005a8f;border:1px solid var(--buttonBackgroundColor, rgb(0, 90, 143));background-color:#005a8f;background-color:var(--buttonBorderColor, rgb(0, 90, 143));-webkit-box-shadow:0 2px 4px rgba(0,0,0,.14),0 3px 4px rgba(0,0,0,.12),0 1px 5px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.14),0 3px 4px rgba(0,0,0,.12),0 1px 5px rgba(0,0,0,.2);-webkit-box-shadow:var(--controlBoxShadow, - 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), - 0 1px 5px rgba(0, 0, 0, 0.2) - );box-shadow:var(--controlBoxShadow, - 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), - 0 1px 5px rgba(0, 0, 0, 0.2) - )}.rux-button--outline{color:#fff;color:var(--buttonOutlineTextColor, rgb(255, 255, 255));background-color:transparent;background-color:var(--buttonOutlineBackgroundColor, transparent);border:1px solid #005a8f;border:1px solid var(--buttonOutlineBorderColor, rgb(0, 90, 143))}.rux-button:active:not([hover]):not([disabled]){border-color:#005a8f!important;border-color:var(--buttonActiveBorderColor, rgb(0, 90, 143))!important;background-color:#005a8f!important;background-color:var(--buttonActiveBackgroundColor, - rgb(0, 90, 143) - )!important}.rux-button:active:not([hover]):not([disabled]):not(.rux-button--outline){-webkit-box-shadow:0 2px 2px rgba(0,0,0,.14)!important;box-shadow:0 2px 2px rgba(0,0,0,.14)!important}.rux-button:hover:not([active]):not([disabled]):not(.rux-button--outline){border-color:#3a81bf;border-color:var(--buttonHoverBorderColor, rgb(58, 129, 191));background-color:#3a81bf;background-color:var(--buttonHoverBackgroundColor, rgb(58, 129, 191));-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 5px rgba(0,0,0,.2);box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 5px rgba(0,0,0,.2);-webkit-box-shadow:var(--buttonHoverBoxShadow, - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), - 0 4px 5px rgba(0, 0, 0, 0.2) - );box-shadow:var(--buttonHoverBoxShadow, - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), - 0 4px 5px rgba(0, 0, 0, 0.2) - )}.rux-button--outline:hover:not([disabled]){color:#fff;color:var(--buttonOutlineTextColor, rgb(255, 255, 255));background-color:rgba(30,47,66,.75);background-color:var(--buttonOutlineHoverBackgroundColor, - rgba(30, 47, 66, 0.75) - );border-color:#3a81bf;border-color:var(--buttonOutlineHoverBorderColor, rgb(58, 129, 191))}.rux-button--small{font-size:.875rem;font-size:var(--smallLabelFontSize, 0.875rem);height:1.625rem;padding:0 1rem;line-height:1}.rux-button--large{font-size:1.125rem;font-size:var(--largeLabelFontSize, 1.125rem);height:2.875rem;padding:0 1.5rem}.rux-button__icon{height:1.5rem;width:1.5rem;margin-right:.625rem;margin-left:-.625rem}.rux-button--icon-only .rux-button__icon{margin-left:-.625rem;margin-right:-.625rem}.rux-button--large.rux-button--icon-only .rux-button__icon{margin-left:-1rem;margin-right:-1rem}.rux-button--small .rux-button__icon{height:.875rem;width:.875rem}.rux-button--large .rux-button__icon{height:1.75rem;width:1.75rem;margin-left:-.8rem}.rux-button__icon .rux-icon{height:auto;width:100%;fill:#fff;fill:var(--buttonTextColor, rgb(255, 255, 255))}.rux-button.rux-button--critical,.rux-button.rux-button--critical:active:not([hover]):not([disabled]):not(.rux-button--outline){background-color:#cc2d2d!important;background-color:var(--colorCriticalDarken1, rgb(191, 36, 36))!important;border-color:#cc2d2d!important;border-color:var(--colorCriticalDarken1, rgb(191, 36, 36))!important}.rux-button.rux-button--critical:hover:not([active]):not([disabled]){background-color:#ff3030;background-color:var(--colorCritical, rgb(255, 48, 48));border-color:#ff3030;border-color:var(--colorCritical, rgb(255, 48, 48))}.rux-card{background-color:#1e2f42;background-color:var(--cardBackgroundColor, rgb(30, 47, 66));padding:1px;overflow:hidden}.rux-card__header{color:#fff;color:var(--cardHeaderTextColor, rgb(255, 255, 255));background-color:#14202c;background-color:var(--cardHeaderBackgroundColor, rgb(20, 32, 44));margin:0;padding:.325rem .625rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.rux-card__header h1{padding:0;margin:0;font-size:1.75rem}.rux-card__content{padding:.625rem}.rux-checkbox,.rux-radio-button,.satcom-checkbox,.satcom-radio-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 0 1rem;line-height:1.2}.rux-checkbox input[type=checkbox],.rux-radio-button input[type=radio],.satcom-checkbox input[type=checkbox],.satcom-radio-button input[type=radio]{-webkit-appearance:none;display:none}.rux-checkbox input[type=checkbox]+label,.rux-radio-button input[type=radio]+label,.satcom-checkbox input[type=checkbox]+label,.satcom-radio-button input[type=radio]+label{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;color:#fff;color:var(--controlLabelColor, rgb(255, 255, 255))}.rux-checkbox input[type=checkbox]+label::before,.rux-radio-button input[type=radio]+label::before,.satcom-checkbox input[type=checkbox]+label::before,.satcom-radio-button input[type=radio]+label::before{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;content:"";height:1.25rem;height:var(--controlOptionSize, 1.25rem);width:1.25rem;width:var(--controlOptionSize, 1.25rem);margin:0 .625rem 0 0;border:1px solid #7ac1ff;border:1px solid var(--controlBorderColor, rgb(122, 193, 255))}.rux-checkbox input[type=checkbox]+label::before,.satcom-checkbox input[type=checkbox]+label::before{border-radius:2px}.rux-radio-button input[type=radio]+label::before,.satcom-radio-button input[type=radio]+label::before{border-radius:100%;background-color:transparent}.rux-checkbox input[type=checkbox]:checked+label::before,.rux-radio-button input[type=radio]:checked+label::before,.satcom-checkbox input[type=checkbox]:checked+label::before,.satcom-radio-button input[type=radio]:checked+label::before{background-color:#3a81bf;background-color:var(--controlSelectedOutlineBackgroundColor, - rgb(58, 129, 191) - );border-color:#fff;border-color:var(--controlSelectedOutlineBorderColor, rgb(255, 255, 255))}.rux-checkbox input[type=checkbox]:checked+label::after,.rux-radio-button input[type=radio]:checked+label::after,.satcom-checkbox input[type=checkbox]:checked+label::after,.satcom-radio-button input[type=radio]:checked+label::after{position:absolute;display:block;content:""}.rux-checkbox input[type=checkbox]:checked+label::after,.satcom-checkbox input[type=checkbox]:checked+label::after{height:6px;width:12px;top:5px;left:4px;border-right:2px solid #fff;border-right:2px solid var(--controlTextColor, rgb(255, 255, 255));border-top:2px solid #fff;border-top:2px solid var(--controlTextColor, rgb(255, 255, 255));-webkit-transform:rotate(125deg);transform:rotate(125deg)}.rux-radio-button input[type=radio]:checked+label::after,.satcom-radio-button input[type=radio]:checked+label::after{top:5px;left:5px;height:10px;width:10px;border-radius:100%;background-color:#fff;background-color:var(--controlTextColor, rgb(255, 255, 255))}.rux-checkbox input[type=checkbox]:disabled+label,.rux-radio-button input[type=radio]:disabled+label,.satcom-checkbox input[type=checkbox]:disabled+label,.satcom-radio-button input[type=radio]:disabled+label{cursor:not-allowed;cursor:var(--disabledCursor, not-allowed);opacity:.4;opacity:var(--disabledOpacity, 0.4)}.rux-select{-webkit-appearance:none;-moz-appearance:none;border:1px solid #005a8f;border:1px solid var(--selectBorderColor, rgb(0, 90, 143));border-radius:3px;border-radius:var(--buttonBorderRadius, 3px);color:#fff;color:var(--selectTextColor, rgb(255, 255, 255));font-family:"Open Sans",sans-serif;font-size:.875rem;line-height:1.5;height:2rem;padding:0 1.2rem 0 .625rem;background-color:#005a8f;background-color:var(--selectBackgroundColor, rgb(0, 90, 143));background-image:url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E);background-image:var(--selectCaret, - url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") - );background-position:center right .625rem;background-repeat:no-repeat}.rux-select .rux-select optgroup,.rux-select option{color:#000;background-color:#fff}.rux-select:disabled{opacity:.4;cursor:not-allowed}.rux-select::-ms-expand{display:none}.rux-select:focus::-ms-value{background:0 0}.rux-form-element{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.rux-form-element label{color:#fff}:root{--padding: 0.5rem;--paddingLeft: 0.5rem;--paddingRight: 0.5rem;--paddingTop: 0.25rem;--paddingBottom: 0.25rem}.rux-form-field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-family:"Open Sans",sans-serif;font-family:var(--fontFamilty, "Open Sans", sans-serif);font-size:1rem;font-size:var(--fontSize, 1rem);color:#fff;color:var(--fontColor, rgb(255, 255, 255))}.rux-form-field input:required+label::after{content:"*";margin-left:.25rem}.rux-form-field__label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin:0 0 .15rem;width:100%;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;color:var(--fontColor, rgb(255, 255, 255));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rux-form-field input,.rux-form-field textarea{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%;padding:.5rem;border:1px solid transparent;border:1px solid var(--inputBorderColor, transparent);border-radius:3px;font-size:1rem;font-size:var(--fontSize, 1rem);color:#000;color:var(--inputTextColor, rgb(0, 0, 0))}.rux-form-field input{height:2.25rem}.rux-form-field textarea{min-height:4.25rem;font-family:"Open Sans",sans-serif;font-family:var(--fontFamily, "Open Sans", sans-serif)}.rux-form-field input[type=date]::-webkit-calendar-picker-indicator,.rux-form-field input[type=date]::-webkit-inner-spin-button,.rux-form-field input[type=date]::-webkit-outer-spin-button,.rux-form-field input[type=number]::-webkit-inner-spin-button,.rux-form-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;display:none}.rux-form-field input:invalid{border:1px solid var(--inputInvalidBorderColor);background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FF3030%22%20fill-rule%3D%22evenodd%22%20d%3D%22M64.031%205c8.461%200%2068.88%20107.243%2063.648%20114.184-5.232%206.942-120.805%205.477-127.212%200C-5.941%20113.708%2055.57%205%2064.03%205zm3.45%2075.894l1.822-34.893H56.946l1.82%2034.893h8.715zM56.803%2093.108c0%201.929.547%203.423%201.643%204.483%201.095%201.06%202.642%201.589%204.642%201.589%201.953%200%203.477-.542%204.572-1.625%201.095-1.084%201.643-2.566%201.643-4.447%200-1.952-.542-3.452-1.625-4.5-1.084-1.047-2.613-1.571-4.59-1.571-2.047%200-3.607.512-4.678%201.536-1.072%201.023-1.607%202.535-1.607%204.535z%22%2F%3E%0A%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:1.125rem;background-position:center right .5rem}.rux-form-field input:not([type=search]):focus,.rux-form-field input:not([type=search]):invalid:focus{border:1px solid var(--inputFocusBorderColor)}.rux-form-field input::-moz-selection{background-color:#b8deff;background-color:var(--colorSecondaryLighten3)}.rux-form-field input::selection{background-color:#b8deff;background-color:var(--colorSecondaryLighten3)}.rux-form-field__validation-message{display:none;position:absolute;max-width:16rem;background-color:var(--colorCritical);width:100%;padding:.25rem;right:0;font-size:.875rem;font-size:var(--fontSizeMD)}.rux-form-field input:invalid .rux-form-field__validation-message{display:block}.rux-form-field input:disabled{opacity:.4;opacity:var(--disabledOpacity, 0.4);cursor:not-allowed;cursor:var(--disabledCursor, not-allowed)}.rux-form-field--large,.rux-form-field--large input,.rux-form-field--large label,.rux-form-field--large textarea{font-size:1.125rem;font-size:var(--fontSizeXL, 1.125rem)}.rux-form-field--small,.rux-form-field--small input,.rux-form-field--small label,.rux-form-field--small textarea{font-size:.875rem;font-size:var(--fontSizeMD, 0.875rem)}.rux-form-field--large input,.rux-form-field--large textarea{padding:.5rem}.rux-form-field--large input{height:2.5rem}.rux-form-field--small input,.rux-form-field--small textarea{padding:.3rem}.rux-form-field--small input{height:1.625rem}.rux-form-field--large input:invalid{background-size:1.375rem;background-position:center right .5rem;padding:.5rem 1.875rem .5rem .5rem}.rux-form-field input:focus .rux-form-field input:invalid:focus{-webkit-box-shadow:inset 0 0 3px #ccc;box-shadow:inset 0 0 3px #ccc;-webkit-box-shadow:inset 0 0 3px var(--colorGray);box-shadow:inset 0 0 3px var(--colorGray);border-color:var(--inputFocusBorderColor);outline:0;color:#000}.rux-form-field input[type=search]::-webkit-search-decoration{-webkit-appearance:textfield}.rux-form-field input[type=search]{-webkit-appearance:none;-moz-appearance:none;padding:.5rem .5rem .5rem 1.75rem;background:no-repeat center left .3rem/1.1em url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") #fff;background:no-repeat center left .3rem/1.1em url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") var(--inputBackgroundColor, rgb(255, 255, 255))}.rux-form-field--large input[type=search]{padding:.5rem 0 .5rem 2rem}.rux-form-field--small input[type=search]{padding:.3rem 0 .3rem 1.5rem}.rux-form-field input[type=search]::-webkit-search-cancel-button{position:relative;-webkit-appearance:none;width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22rgb(0%2C%2090%2C%20143)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M69.028%2064l22.628%2022.627-5.029%205.029L64%2069.028%2041.373%2091.656l-5.029-5.029L58.972%2064%2036.344%2041.373l5.029-5.029L64%2058.972l22.627-22.628%205.029%205.029L69.028%2064z%22%2F%3E%0A%3C%2Fsvg%3E")}.rux-form-field input[type=search]::-ms-clear{position:relative;right:.25rem;width:20px;height:20px;background-color:red}.rux-table,.satcom-table{border-collapse:separate;border-spacing:5px;color:#fff}.rux-table th,.satcom-table th{font-stretch:condensed;font-weight:300;text-align:left;color:rgba(255,255,255,.6)}.rux-table td,.rux-table th,.satcom-table td,.satcom-table th{padding:.5em 1em 1em .75em;border-top:1px solid rgba(216,216,216,.1);background-color:rgba(216,216,216,.1)}.rux-table__column-head th,.satcom-table-column-head th{padding-bottom:.5em}.rux-table tfoot,.satcom-table tfoot{font-size:.7rem}.rux-table .selected,.satcom-table .selected{background:#36557a} \ No newline at end of file diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.css b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.css deleted file mode 100644 index 9689255f16..0000000000 --- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.css +++ /dev/null @@ -1,4433 +0,0 @@ -:root { - --disabledControlOpacity: 0.4; - --disabledControlCursor: not-allowed; - - --disabledOpacity: 0.4; - --disabledCursor: not-allowed; - - --buttonBorderRadius: 3px; - --defaultBorderRadius: 3px; - - --controlOptionSize: 1.25rem; - --controlBorderRadius: 3px; - - --labelFontSize: 1rem; - --smallLabelFontSize: 0.875rem; - --largeLabelFontSize: 1.125rem; - - /* Typography */ - --fontFamily: "Open Sans", sans-serif; - --fontSize: 1rem; /* 16px */ - --fontSizeXL: 1.125rem; - --fontSizeLG: 1rem; - --fontSizeMD: 0.875rem; - --fontSizeSM: 0.75rem; - --fontSizeXS: 0.65rem; - - --fontFamilyLight: "Open Sans Light", sans-serif; - --fontFamilyMono: "Roboto Mono", monospace; - - --colorBlack: rgb(0, 0, 0); - --colorWhite: rgb(255, 255, 255); - --colorGray: rgb(204, 204, 204); - - --colorPrimary: rgb(0, 90, 143); - --colorSecondary: rgb(77, 172, 255); - --colorTertiary: rgb(40, 63, 88); - --colorQuaternary: rgb(207, 214, 227); - - --statusDarkCritical: rgb(255, 56, 56); - --statusDarkSerious: rgb(255, 179, 0); - --statusDarkCaution: rgb(252, 232, 58); - --statusDarkNormal: rgb(86, 240, 0); - --statusDarkStandby: rgb(45, 204, 255); - --statusDarkOff: rgb(158, 167, 173); - - --statusLightCritical: rgb(255, 42, 4); - --statusLightSerious: rgb(255, 175, 61); - --statusLightCaution: rgb(250, 216, 0); - --statusLightNormal: rgb(0, 226, 0); - --statusLightStandby: rgb(100, 217, 255); - --statusLightOff: rgb(142, 154, 163); - - --colorTag1: rgb(25, 199, 202); - --colorTag2: rgb(120, 112, 208); - --colorTag3: rgb(160, 13, 190); - --colorTag4: rgb(216, 83, 30); - - --colorPrimaryLighten5: rgb(51, 123, 165); - --colorPrimaryLighten1: rgb(51, 123, 165); - --colorPrimaryLighten2: rgb(102, 156, 188); - --colorPrimaryLighten3: rgb(153, 189, 210); - --colorPrimaryLighten4: rgb(204, 222, 233); - --colorPrimaryDarken1: rgb(0, 72, 114); - --colorPrimaryDarken2: rgb(0, 54, 86); - --colorPrimaryDarken3: rgb(0, 36, 57); - --colorPrimaryDarken4: rgb(0, 18, 29); - - --colorSecondaryLighten1: rgb(113, 189, 255); - --colorSecondaryLighten2: rgb(148, 205, 255); - --colorSecondaryLighten3: rgb(184, 222, 255); - --colorSecondaryLighten4: rgb(219, 238, 255); - --colorSecondaryDarken1: rgb(62, 138, 204); - --colorSecondaryDarken2: rgb(46, 103, 153); - --colorSecondaryDarken3: rgb(31, 69, 102); - --colorSecondaryDarken4: rgb(15, 34, 51); - - --colorTertiaryLighten1: rgb(83, 101, 121); - --colorTertiaryLighten2: rgb(126, 140, 155); - --colorTertiaryLighten3: rgb(169, 178, 188); - --colorTertiaryLighten4: rgb(212, 217, 222); - --colorTertiaryDarken1: rgb(32, 50, 70); - --colorTertiaryDarken2: rgb(24, 38, 53); - --colorTertiaryDarken3: rgb(16, 25, 35); - --colorTertiaryDarken4: rgb(8, 13, 18); - - --colorQuaternaryLighten1: rgb(217, 222, 233); - --colorQuaternaryLighten2: rgb(226, 230, 238); - --colorQuaternaryLighten3: rgb(236, 239, 244); - --colorQuaternaryLighten4: rgb(245, 247, 249); - --colorQuaternaryDarken1: rgb(166, 171, 182); - --colorQuaternaryDarken2: rgb(124, 128, 136); - --colorQuaternaryDarken3: rgb(83, 86, 91); - --colorQuaternaryDarken4: rgb(41, 43, 45); - - --colorGrayLighten1: rgb(214, 214, 214); - --colorGrayLighten2: rgb(224, 224, 224); - --colorGrayLighten3: rgb(235, 235, 235); - --colorGrayLighten4: rgb(245, 245, 245); - --colorGrayDarken1: rgb(163, 163, 163); - --colorGrayDarken2: rgb(122, 122, 122); - --colorGrayDarken3: rgb(82, 82, 82); - --colorGrayDarken4: rgb(41, 41, 41); - - --colorCriticalLighten1: rgb(255, 96, 96); - --colorCriticalLighten2: rgb(255, 136, 136); - --colorCriticalLighten3: rgb(255, 175, 175); - --colorCriticalLighten4: rgb(255, 215, 215); - --colorCriticalDarken1: rgb(204, 45, 45); - --colorCriticalDarken2: rgb(153, 34, 34); - --colorCriticalDarken3: rgb(102, 22, 22); - --colorCriticalDarken4: rgb(51, 11, 11); - - --colorSeriousLighten1: rgb(255, 194, 51); - --colorSeriousLighten2: rgb(255, 209, 102); - --colorSeriousLighten3: rgb(255, 225, 153); - --colorSeriousLighten4: rgb(255, 240, 204); - --colorSeriousDarken1: rgb(204, 143, 0); - --colorSeriousDarken2: rgb(153, 107, 0); - --colorSeriousDarken3: rgb(102, 72, 0); - --colorSeriousDarken4: rgb(51, 36, 0); - - --colorCautionLighten1: rgb(253, 237, 97); - --colorCautionLighten2: rgb(253, 241, 137); - --colorCautionLighten3: rgb(254, 246, 176); - --colorCautionLighten4: rgb(254, 250, 216); - --colorCautionDarken1: rgb(202, 186, 46); - --colorCautionDarken2: rgb(151, 139, 35); - --colorCautionDarken3: rgb(101, 93, 23); - --colorCautionDarken4: rgb(50, 46, 12); - - --colorNormalLighten1: rgb(120, 243, 51); - --colorNormalLighten2: rgb(154, 246, 102); - --colorNormalLighten3: rgb(187, 249, 153); - --colorNormalLighten4: rgb(221, 252, 204); - --colorNormalDarken1: rgb(69, 192, 0); - --colorNormalDarken2: rgb(52, 144, 0); - --colorNormalDarken3: rgb(34, 96, 0); - --colorNormalDarken4: rgb(17, 48, 0); - - --colorStandbyLighten1: rgb(87, 214, 255); - --colorStandbyLighten2: rgb(129, 224, 255); - --colorStandbyLighten3: rgb(171, 235, 255); - --colorStandbyLighten4: rgb(213, 245, 255); - --colorStandbyDarken1: rgb(36, 163, 204); - --colorStandbyDarken2: rgb(27, 122, 153); - --colorStandbyDarken3: rgb(18, 82, 102); - --colorStandbyDarken4: rgb(9, 41, 51); - - --colorOffLighten1: rgb(177, 185, 189); - --colorOffLighten2: rgb(197, 202, 206); - --colorOffLighten3: rgb(216, 220, 222); - --colorOffLighten4: rgb(236, 237, 239); - --colorOffDarken1: rgb(126, 134, 138); - --colorOffDarken2: rgb(95, 100, 104); - --colorOffDarken3: rgb(63, 67, 69); - --colorOffDarken4: rgb(32, 33, 35); - - --colorTag1Lighten1: rgb(71, 210, 213); - --colorTag1Lighten2: rgb(117, 221, 223); - --colorTag1Lighten3: rgb(163, 233, 234); - --colorTag1Lighten4: rgb(209, 244, 244); - --colorTag1Darken1: rgb(20, 159, 162); - --colorTag1Darken2: rgb(15, 119, 121); - --colorTag1Darken3: rgb(10, 80, 81); - --colorTag1Darken4: rgb(5, 40, 40); - - --colorTag2Lighten1: rgb(147, 141, 217); - --colorTag2Lighten2: rgb(174, 169, 227); - --colorTag2Lighten3: rgb(201, 198, 236); - --colorTag2Lighten4: rgb(228, 226, 246); - --colorTag2Darken1: rgb(96, 90, 166); - --colorTag2Darken2: rgb(72, 67, 125); - --colorTag2Darken3: rgb(48, 45, 83); - --colorTag2Darken4: rgb(24, 22, 42); - - --colorTag3Lighten1: rgb(179, 61, 203); - --colorTag3Lighten2: rgb(198, 110, 216); - --colorTag3Lighten3: rgb(217, 158, 229); - --colorTag3Lighten4: rgb(236, 207, 242); - --colorTag3Darken1: rgb(128, 10, 152); - --colorTag3Darken2: rgb(96, 8, 114); - --colorTag3Darken3: rgb(64, 5, 76); - --colorTag3Darken4: rgb(32, 3, 38); - - --colorTag4Lighten1: rgb(224, 117, 75); - --colorTag4Lighten2: rgb(232, 152, 120); - --colorTag4Lighten3: rgb(239, 186, 165); - --colorTag4Lighten4: rgb(247, 221, 210); - --colorTag4Darken1: rgb(173, 66, 24); - --colorTag4Darken2: rgb(130, 50, 18); - --colorTag4Darken3: rgb(86, 33, 12); - --colorTag4Darken4: rgb(43, 17, 6); - - --colorWhiteLighten1: rgb(255, 255, 255); - --colorWhiteLighten2: rgb(255, 255, 255); - --colorWhiteLighten3: rgb(255, 255, 255); - --colorWhiteLighten4: rgb(255, 255, 255); - --colorWhiteDarken1: rgb(204, 204, 204); - --colorWhiteDarken2: rgb(153, 153, 153); - --colorWhiteDarken3: rgb(102, 102, 102); - --colorWhiteDarken4: rgb(51, 51, 51); - - --colorBlackLighten1: rgb(51, 51, 51); - --colorBlackLighten2: rgb(102, 102, 102); - --colorBlackLighten3: rgb(153, 153, 153); - --colorBlackLighten4: rgb(204, 204, 204); - --colorBlackDarken1: rgb(0, 0, 0); - --colorBlackDarken2: rgb(0, 0, 0); - --colorBlackDarken3: rgb(0, 0, 0); - --colorBlackDarken4: rgb(0, 0, 0); - - --colorGrayLighten1: rgb(214, 214, 214); - --colorGrayLighten2: rgb(224, 224, 224); - --colorGrayLighten3: rgb(235, 235, 235); - --colorGrayLighten4: rgb(245, 245, 245); - --colorGrayDarken1: rgb(163, 163, 163); - --colorGrayDarken2: rgb(122, 122, 122); - --colorGrayDarken3: rgb(82, 82, 82); - --colorGrayDarken4: rgb(41, 41, 41); -} - -@font-face { - font-family: "Open Sans"; - src: url("../fonts/opensans-bold-webfont.woff2") format("woff2"), - url("../fonts/opensans-bold-webfont.woff") format("woff"); - font-weight: 700; - font-style: normal; -} -@font-face { - font-family: "Open Sans"; - src: url("../fonts/opensans-light-webfont.woff2") format("woff2"), - url("../fonts/opensans-light-webfont.woff") format("woff"); - font-weight: 300; - font-style: normal; -} -@font-face { - font-family: "Open Sans"; - src: url("../fonts/opensans-regular-webfont.woff2") format("woff2"), - url("../fonts/opensans-regular-webfont.woff") format("woff"); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: "Roboto Mono"; - src: url("../fonts/roboto-mono-regular.woff2") format("woff2"), - url("../fonts/roboto-mono-regular.woff") format("woff"); - font-weight: 400; - font-style: normal; -} - -.light-theme { - /* - - Global Colors - ========================================================================== - - */ - --backgroundColor: var(--colorQuaternaryLighten3, rgb(243, 245, 248)); - --fontColor: var(--colorBlack, rgb(0, 0, 0)); - --fontLowContrastColor: var(--colorGray, rgb(204, 204, 204)); - --fontInvertedColor: var(--colorWhite, rgb(255, 255, 255)); - --fontInvertedBackgroundColor: var(--colorBlack, rgb(0, 0, 0)); - - --fontLinkColor: var(--colorSecondaryDarken1, rgb(62, 138, 204)); - --fontLinkHoverColor: var(--colorSecondary, rgb(77, 172, 255)); - - --wcagCompliance: rgba(0, 0, 0, 0.5); - --criticalBorder: #7f1c1c; - - --colorCritical: var(--statusLightCritical, rgb(255, 42, 4)); - --colorSerious: var(--statusLightSerious, rgb(255, 175, 61)); - --colorCaution: var(--statusLightCaution, rgb(250, 216, 0)); - --colorNormal: var(--statusLightNormal, rgb(0, 226, 0)); - --colorStandby: var(--statusLightStandby, rgb(100, 217, 255)); - --colorOff: var(--statusLightOff, rgb(142, 154, 163)); - /* - - Button Colors - ========================================================================== - For standard and outline buttons - - */ - - /* Button */ - --buttonTextColor: var(--colorWhite, rgb(255, 255, 255)); - --buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonBoxShadow: 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2); - - /* Button Hover State */ - --buttonHoverTextColor: var(--colorWhite, rgb(255, 255, 255)); - --buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); - --buttonHoverBorderColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); - --buttonHoverBoxShadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2); - - /* Button Active State */ - --buttonActiveControlTextColor: var(--colorWhite, rgb(255, 255, 255)); - --buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - /* Default Button State */ - --buttonDefaultBorderColor: var(--colorWhite, rgb(255, 255, 255)); - - /* Outline Button Variant */ - --buttonOutlineTextColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonOutlineBackgroundColor: transparent; - --buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - /* Outline Button Variant Hover State */ - --buttonOutlineHoverTextColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonOutlineHoverBackgroundColor: rgba(0, 90, 143, 0.05); - --buttonOutlineHoverBorderColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - /* - - Control Colors - ========================================================================== - For checkboxes, radio buttons etc … - - */ - --controlTextColor: var(--colorWhite, rgb(255, 255, 255)); - --controlLabelColor: var(--colorBlack, rgb(0, 0, 0)); - --controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --controlBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --controlAccentColor: var(--colorSecondary, rgb(77, 172, 255)); - - --controlSelectedTextColor: var(--colorBlack, rgb(0, 0, 0)); - --controlSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - --controlSelectedBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - --controlHoverOutlineBackgroundColor: none; - --controlSelectedOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --controlSelectedOutlineBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - /* - - Progress Bar Colors - ========================================================================== - - */ - --progressDeterminateBarBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - --progressDeterminateTrackBackgroundColor: var( - --colorWhite, - rgb(255, 255, 255) - ); - --progressDeterminateTrackBorderColor: var( - --colorQuaternary, - rgb(207, 214, 227) - ); - - --progressIndeterminate: url("data:image/svg+xml,%3Csvg width='66' height='66' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='70.883%25' y1='4.637%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%235CB3FF' offset='0%25'/%3E %3Cstop stop-color='%23F6F7F8' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M33 65.5C15.05 65.5.5 50.95.5 33S15.05.5 33 .5 65.5 15.05 65.5 33 50.95 65.5 33 65.5zm0-7c14.083 0 25.5-11.417 25.5-25.5S47.083 7.5 33 7.5 7.5 18.917 7.5 33 18.917 58.5 33 58.5z' stroke='%23D7DDE2' fill='%23FFF'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)' transform='translate(1 1)'/%3E %3Cpath d='M48.564 13c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C53 7.248 51.572 5 49.234 5S45 6.867 45 9.17c0 2.304 1.225 3.83 3.564 3.83z' stroke='%234DACFF' fill='%2352AEFF'/%3E %3C/g%3E %3C/svg%3E "); - /* - - Slider Colors - ========================================================================== - - */ - --sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255)); - - --sliderTrackBorderColor: var(--colorQuaternary, rgb(207, 214, 227)); - --sliderTrackBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - - --sliderSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - - /* - - Segmented Button Colors - ========================================================================== - - */ - --segmentedButtonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --segmentedButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --segmentedButtonTextColor: var(--colorPrimary, rgb(0, 90, 143)); - - --segmentedButtonHoverBackgroundColor: rgb(0, 90, 143, 0.05); - --segmentedButtonHoverTextColor: var(--colorPrimary, rgb(0, 90, 143)); - - --segmentedButtonSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - --segmentedButtonSelectedBoxShadow: inset 0 3px 4px rgba(0, 0, 0, 0.1), - inset 0 1px 5px rgba(0, 0, 0, 0.06); - -webkit-transition: -webkit-box-shadow 0.067s ease-out; - transition: -webkit-box-shadow 0.067s ease-out; - transition: box-shadow 0.067s ease-out; - transition: box-shadow 0.067s ease-out, -webkit-box-shadow 0.067s ease-out; - - --segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); - - /* - - Drop Down/Select Colors - ========================================================================== - - */ - --selectBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --selectBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --selectTextColor: var(--colorPrimary, rgb(0, 90, 143)); - --selectCaret: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); - - /* - - Toggle Colors - ========================================================================== - - */ - - --toggleButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --toggleButtonBoxShadow: 0 0 3px rgba(0, 0, 0, 0.25), - 1px 0 2px rgba(0, 0, 0, 0.3); - - --toggleBaseBackgroundColor: linear-gradient( - to right, - var(--colorNormal) 50%, - var(--colorPrimaryLighten4) 50.1% - ); - --toggleBaseBorderColor: var(--colorPrimaryLighten1, rgb(0, 90, 143)); - --toggleBaseTextColor: var(--colorPrimary, rgb(255, 255, 255)); - - --toggleBaseSelectedTextColor: #007300; - --toggleButtonSelectedBoxShadow: 0 0 3px rgba(0, 0, 0, 0.3), - -1px 0 2px rgba(0, 0, 0, 0.3); - - /* Alt Toggle */ - --toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); - --toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - - --toggleSelectedThumbBorderColor: var( - --colorStandbyDarken2, - rgb(27, 122, 153) - ); - --toggleSelectedThumbBackgroundColor: var(--colorStandby, rgb(100, 217, 255)); - - --toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); - --toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204)); - - --toggleSelectedTrackBorderColor: var( - --colorStandbyDarken2, - rgb(27, 122, 153) - ); - --toggleSelectedTrackBackgroundColor: var(--colorStandby, rgb(100, 217, 255)); - - --toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122)); - --toggleDisabledThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --toggleDisabledSelectedThumbBorderColor: var( - --colorPrimaryLighten3, - rgb(153, 189, 210) - ); - - /* - - Pushbutton Colors - ========================================================================== - - */ - - --pushbuttonBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --pushbuttonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --pushbuttonTextColor: var(--colorPrimary, rgb(0, 90, 143)); - - --pushbuttonSelectedBackgroundColor: var(--colorNormal, rgb(91, 255, 0)); - --pushbuttonSelectedBorderColor: #3dc100; - /* var(--colorNormal, rgb(91, 255, 0)); */ - --pushbuttonSelectedTextColor: #007300; - /* var(--colorWhite, rgb(255, 255, 255)); */ - - /* - - Clock Colors - ========================================================================== - - */ - - --clockTextColor: var(--colorBlack, rgb(0, 0, 0)); - --clockBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --clockBorderColor: var(--colorQuaternary, rgb(39, 86, 128)); - - /* - - Modal Colors - ========================================================================== - - */ - - --modalTextColor: var(--colorBlack, rgb(0, 0, 0)); - --modalBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --modalBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - /* - - Log Colors - ========================================================================== - - */ - --logTextColor: var(--colorBlack); - --logBackgroundColor: var(--colorWhite); - --logBorderColor: var(--colorQuaternaryLighten2); - - --logHeaderTextColor: var(--colorBlack); - --logHeaderBackgroundColor: var(--colorQuaternary); - - --logFilterBackgroundColor: var(--colorStandbyLighten3); - --logFilterTextColor: var(--colorStandbyDarken2); - - /* - - Tree Colors - ========================================================================== - - */ - --treeTextColor: var(--colorBlack, rgb(0, 0, 0)); - --treeBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --treeBorderColor: var(--colorQuaternary, 207, 214, 227); - --treeItemBorderColor: var(--colorQuaternary, 207, 214, 227); - --treeAccentColor: var(--colorSecondary, rgb(77, 172, 255)); - - --treeHoverBackgroundColor: var(--colorSecondaryLighten4, rgb(219, 238, 255)); - --treeHoverAccentColor: var(--colorSecondaryLighten3, rgb(184, 222, 255)); - - --treeSelectedBackgroundColor: var( - --colorSecondaryLighten3, - rgb(184, 222, 255) - ); - --treeSelectedAccentColor: var(--colorSecondaryLighten1, rgb(113, 189, 255)); - --treeSelectedTextColor: var(--colorBlack, rgb(0, 0, 0)); - - --treeChildrenBackgroundColor: var( - --colorQuaternaryLighten3, - rgb(236, 239, 244) - ); - - /* - - Tab Colors - ========================================================================== - - */ - --tabTextColor: var(--colorPrimary, rgb(0, 90, 143)); - --tabBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --tabBorderColor: var(--colorQuaternaryLighten1, rgb(219, 224, 234)); - - --tabHoverTextColor: var(--colorSecondary, rgb(77, 172, 255)); - - --tabSelectedTextColor: var(--colorBlack, rgb(0, 0, 0)); - --tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255)); - - /* - - Card Colors - ========================================================================== - - */ - --cardBackgroundColor: var(--colorQuaternaryLighten2); - - --cardHeaderBackgroundColor: var(--colorQuaternaryLighten1); - --cardHeaderTextColor: var(--colorWhite, #fff); - - /* - - Input/Text Field Colors - ========================================================================== - - */ - - --inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --inputBorderColor: var(--colorQuaternaryDarken1, rgb(255, 255, 255)); - --inputTextColor: var(--colorBlack, rgb(14, 11, 11)); - - --inputFocusBorderColor: var(--colorSecondary); - --inputFocusBoxShadow: none; - - --inputInvalidBorderColor: var(--colorCritical, rgb(255, 48, 48)); - - /* - - Status - ========================================================================== - - */ - - - - --statusSymbols: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAA81BMVEUAAABaPhVcDwE7CQA6gJIAAAAATQAkTlsATgBcPxYrHAciGgkAAABcPxU0coUARgAxNTgnU2IoV2YzNjoAUgAtYXEzODovZngAUQAAUAAwNDg0dIk2d4sAOgAjKCgAGAAADQA+hJVZPBRcPxb62AAA4gD/rz1VSQBk2f//KgQiSldXDgEATQCOmqNXOxQwNDdoRhiGWx+tHAJiEAFZw+b1KAMAywDlnTb5qjv7rDzpnzdMpcNJn7xFlrGMmKGEj5g4eY82d4xxe4IyboIwaHskT15GTFEA2gAArAAAnAAAfgAAfABg0vddyu5cZGpg0fbOjTE6oyFAAAAAJHRSTlMA7cc4Kgj9+vbBJB4GypVn9vPu5t/Y18O8n4B/ckY6FRMdmtlkVn4PAAACq0lEQVRYw+2YaVPaUBSGqWbTWsK+b9pC6ek1lypGW1T2RUDb//9rmpsm3Nyc1DQfOhMc3k/cyUzmfeY5BxISh+xXzi7eJ/Y5ZyfGu30msPobQQSf/5KEmKZeymlarqQ3g28vJfMZVc3kk1LUYkdfA3OE+/duv3GCaACtskKcKOVWQP0i7FKMiHAcDHAc0L9zxwgQwKeAiAB1jZD1ylwuzdWaEK3u71BTAUaD/nbbH4wA1FpUBVdffLliAnD/DieIBKArZGO2nZgboujiLZIA437XSX8MkIyo4PpG7H9zzQTg/pwgEkBdIU9tT56IIjioATx0PXkAqEVWgAXg/pwgEkBLY/1FAq3lmX+V9RcJVLwHcqWQShUqcpgCLgD35wRRAMpk0/ZlQ8r8BkUY27XvZ/P57N7+OIaiv2QjS+1kG2EKuADcHxOEAzQVYvoBTKI0dwIA2Pw/T8HO9JntAYDk60/pYjIcThaUNkIUcAG4PyYIB9DJuo2yJjrf4FHXyhTSVUmqpmHKTiPfHstZ+vJ4aeXxhWblYAVYAO6PCcIBSmSFAVak5F7Pw4DND6TP2ek8DWyKBpAXClbogvVnBAtaCVaABeD+mCAcIMcmCM9Qzr2esSdoBtU/xyrM7BnKCAULdHLpZEILr2wBEnBhGL86OHc94+M/AmhkiQGWRHOvq7C1Gs/doZdgbh23oAr9UnToAgxp6pUvIrQB8gej9wP1/24ZOP2fAD+jAHAFXAAmwP1jNUK2Ai4AE+D+sVpiRwEXgAhQ/3h9jboKuABMIPaP1w8ZV8AFIAKhf8weJXYKBAGIgPeP2cMcVyAIwARu/7g9TnMFggBM4PSP2wuNR4EgABPc2v1j90rpUSAIwAQG6x+7l3qvAkEAJmD94/e3ileBIAATnJwmDjnkTeU3PTFjExFNx+YAAAAASUVORK5CYII="); - /* - - - Scrollbar Colors -- Light - ========================================================================== - - */ - - --scrollBarThumbBackgroundColor: var(--colorQuaternaryDarken1, #9ba0aa); - --scrollBarThumbBackgroundHoverColor: var(--colorQuaternaryDarken2, #676a71); - --scrollBarTrackBackgroundColor: transparent; - --scrollBarTrackCornerBackgroundColor: var( - --colorQuaternaryLighten4, - #f2f4f7 - ); - - /* - - Timeline Colors -- Dark - ========================================================================== - - */ - - --timelineHeaderBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35)); - --timelineHeaderTextColor: var(--fontColor, rgb(0, 0, 0)); - - --timelineRulerBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35)); - --timelineRulerTextColor: var(--fontColor, rgb(0, 0, 0)); - - --timelineTrackLabelBackgroundColor: var( - --colorQuaternaryLighten2, - rgb(40, 63, 88) - ); - --timelineTrackBackgroundColor: var( - --colorQuaternaryLighten2, - rgb(40, 63, 88) - ); - - --timelineRegionBackgroundColor: var(--colorPrimaryLighten4, rgb(24, 38, 53)); - --timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255)); - --timelineRegionBorderColor: var(--colorPrimaryLighten3); - - --timelineRegionSelectedBorderColor: var( - --colorSecondaryDarken3, - rgb(77, 172, 255) - ); - --timelineRegionSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(62, 138, 204) - ); - --timelineRegionSelectedTextColor: var(--fontColor, rgb(255, 255, 255)); - - /* - - ACCORDION COLORS - ========================================================================== - - */ - --accordionBorderColor: rgb(207, 214, 227); - --accordionContentBackground: rgb(226, 230, 238); - --accordionClosedLabelBackground: rgb(255, 255, 255); - --accordionOpenLabelBackground: rgb(245, 247, 249); - --accordionHoverLabelBackground: rgb(236, 239, 244); - --accordionColor: rgb(0, 0, 0); -} - -li.light-theme { - display: none; -} - -.dark-theme { - /* - - Global Colors - ========================================================================== - - */ - --backgroundColor: var(--colorTertiaryDarken2, rgb(46, 103, 153)); - --fontColor: var(--colorWhite, rgb(255, 255, 255)); - --fontLowContrastColor: var(--colorGray, rgb(204, 204, 204)); - --fontInvertedColor: var(--colorBlack, rgb(0, 0, 0)); - --fontInvertedBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - - --fontLinkColor: var(--colorSecondary, rgb(77, 172, 255)); - --fontLinkHoverColor: var(--colorSecondaryLighten1, rgb(113, 189, 255)); - - /* Status Custom */ - --wcagCompliance: rgba(255, 255, 255, 0); - --criticalBorder: var(--colorCritical, rgb(255, 56, 56)); - - --colorCritical: var(--statusDarkCritical, rgb(255, 42, 4)); - --colorSerious: var(--statusDarkSerious, rgb(255, 175, 61)); - --colorCaution: var(--statusDarkCaution, rgb(250, 216, 0)); - --colorNormal: var(--statusDarkNormal, rgb(0, 226, 0)); - --colorStandby: var(--statusDarkStandby, rgb(45, 204, 255)); - --colorOff: var(--statusDarkOff, rgb(142, 154, 163)); - - /* - - Button Colors - ========================================================================== - For standard and outline buttons - - */ - - /* Button */ - --buttonTextColor: var(--colorWhite, #fff); - --buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonBoxShadow: 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2); - - /* Button Hover State */ - --buttonHoverTextColor: var(--colorWhite, #fff); - --buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); - --buttonHoverBorderColor: var(--colorSecondaryDarken1, rgb(58, 129, 191)); - --buttonHoverBoxShadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2); - - /* Button Active State */ - --buttonActiveControlTextColor: var(--colorWhite, #fff); - --buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - /* Default Button State */ - --buttonDefaultBorderColor: var(--colorWhite, #fff); - - /* Outline Button Variant */ - --buttonOutlineTextColor: var(--colorWhite, rgb(255, 255, 255)); - --buttonOutlineBackgroundColor: transparent; - --buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - /* Outline Button Variant Hover State */ - --buttonOutlineHoverTextColor: var(--colorSecondary, rgb(0, 90, 143)); - --buttonOutlineHoverBackgroundColor: rgba(30, 47, 66, 0.75); - --buttonOutlineHoverBorderColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - /* - - Control Colors - ========================================================================== - For checkboxes, radio buttons etc … - - */ - --controlTextColor: var(--colorWhite, #fff); - --controlLabelColor: var(--colorWhite, rgb(255, 255, 255)); - --controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --controlBorderColor: var(--colorSecondaryLighten1, rgb(77, 172, 255)); - --controlAccentColor: var(--colorSecondaryLighten1, rgb(77, 172, 255)); - - --controlSelectedTextColor: var(--colorWhite, #fff); - --controlSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - --controlSelectedBorderColor: var(--colorWhite, rgb(255, 255, 255)); - - /* - - Progress Colors - ========================================================================== - - */ - --progressDeterminateBarBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - --progressDeterminateTrackBackgroundColor: rgba(0, 0, 0, 0.3); - --progressDeterminateTrackBorderColor: var( - --colorTertiaryDarken2, - rgb(20, 32, 44) - ); - - --progressIndeterminate: url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='65.479%25' y1='-8.436%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%234dacff' offset='0%25'/%3E %3Cstop stop-color='%234dacff' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm0-6c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26z' fill='rgba(0,0,0,.3)'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)'/%3E %3Cpath d='M47.564 12c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C52 6.248 50.572 4 48.234 4S44 5.867 44 8.17c0 2.304 1.225 3.83 3.564 3.83z' fill='%234dacff'/%3E %3C/g%3E %3C/svg%3E "); - - /* - - Slider Colors - ========================================================================== - - */ - --sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255)); - - --sliderTrackBorderColor: transparent; - --sliderTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204)); - - --sliderHoverThumbBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - --sliderSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - - /* - - Segmented Button Colors - ========================================================================== - - */ - --segmentedButtonBorderColor: var(--colorTertiaryDarken1, rgb(30, 47, 66)); - --segmentedButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --segmentedButtonTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --segmentedButtonHoverBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - --segmentedButtonHoverTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --segmentedButtonSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - - --segmentedButtonSelectedBoxShadow: inset 0 2px 4px rgba(0, 0, 0, 0.14), - inset 0 3px 4px rgba(0, 0, 0, 0.12), inset 0 1px 5px rgba(0, 0, 0, 0.2); - - --segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); - - /* - - Drop Down/Select Colors - ========================================================================== - - */ - --selectBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --selectBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - --selectTextColor: var(--colorWhite, rgb(255, 255, 255)); - --selectCaret: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); - - /* - - Toggle Colors - ========================================================================== - - */ - - --toggleButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --toggleBaseBackgroundColor: var(--colorBlack, #000); - --toggleBaseBorderColor: var(--colorBlack, rgb(0, 0, 0)); - --toggleBaseTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --toggleBaseSelectedTextColor: var(--colorNormal, rgb(86, 240, 0)); - - /* Alt Toggle */ - /* --toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); */ - --toggleThumbBorderColor: #fff; - --toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - - --toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); - --toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204)); - - /* Selected State */ - /* --toggleSelectedThumbBorderColor: var(--colorStandbyDarken2, rgb(27, 122, 153)); */ - --toggleSelectedThumbBorderColor: #fff; - - --toggleSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - ); - --toggleSelectedTrackBorderColor: var( - --colorSecondaryDarken2, - rgb(46, 103, 153) - ); - - /* Disabled State */ - --toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122)); - --toggleDisabledThumbBackgroundColor: var( - --colorGrayDarken1, - rgb(163, 163, 163) - ); - --toggleDisabledSelectedThumbBorderColor: var( - --colorGrayDarken1, - rgb(122, 122, 122) - ); - - /* - - Pushbutton Colors - ========================================================================== - - */ - --pushbuttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143)); - --pushbuttonBorderColor: var(--colorBlack, rgb(0, 0, 0)); - --pushbuttonTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --pushbuttonSelectedBackgroundColor: var(--colorBlack, rgb(0, 0, 0)); - --pushbuttonSelectedBorderColor: var(--colorBlack, rgb(0, 0, 0)); - --pushbuttonSelectedTextColor: var(--colorNormal, rgb(86, 240, 0)); - - /* - - Clock Colors - ========================================================================== - - */ - --clockTextColor: var(--colorWhite, rgb(255, 255, 255)); - --clockBackgroundColor: var(--colorTertiaryDarken2, rgb(20, 32, 44)); - --clockBorderColor: var(--colorTertiary, rgb(39, 86, 128)); - - /* - - Log Colors - ========================================================================== - - */ - --logTextColor: var(--colorWhite, rgb(255, 255, 255)); - --logBackgroundColor: var(--colorTertiaryDarken1); - --logBorderColor: var(--colorTertiary); - - --logHeaderTextColor: var(--colorWhiteDarken2); - --logHeaderBackgroundColor: var(--colorTertiaryDarken2); - - --logFilterBackgroundColor: var(--colorStandbyLighten1); - --logFilterTextColor: var(--colorStandbyDarken3); - - /* - - Tree Colors - ========================================================================== - - */ - --treeTextColor: var(--colorWhite, rgb(255, 255, 255)); - --treeBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); - --treeBorderColor: var(--colorSecondaryDarken2, rgb(46, 103, 153)); - --treeItemBorderColor: var(--colorTertiaryDarken2, rgb(24, 38, 53)); - --treeAccentColor: var(--colorSecondary, rgb(77, 172, 255)); - - /* --treeFocusedBackgroundColor: var(--colorTertiaryLighten1, green); - --treeFocusedAccentColor: var(--colorTertiaryLighten3, green); */ - - --treeHoverBackgroundColor: var(--colorPrimaryDarken2, rgb(0, 54, 86)); - --treeHoverAccentColor: var(--colorPrimaryLighten1, rgb(0, 72, 114)); - - --treeSelectedBackgroundColor: var(--colorPrimaryDarken1, rgb(0, 72, 114)); - --treeSelectedAccentColor: var(--colorSecondary, rgb(77, 172, 255)); - --treeSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); - - --treeChildrenBackgroundColor: var(--colorTertiaryDarken2, rgb(24, 38, 53)); - /* - - Tab Colors - ========================================================================== - - */ - --tabTextColor: var(--colorSecondary, rgb(77, 172, 255)); - --tabBackgroundColor: var(--colorTertiaryDarken1, rgb(30, 47, 66)); - --tabBorderColor: var(--colorTertiaryDarken2, rgb(20, 32, 44)); - - --tabSelectedTextColor: var(--colorWhite, rgb(255, 255, 255)); - --tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 355)); - - /* - - Card Colors - ========================================================================== - - */ - - --cardBackgroundColor: var(--colorTertiaryDarken1); - - --cardHeaderBackgroundColor: var(--colorTertiaryDarken3); - --cardHeaderTextColor: var(--colorWhite, #fff); - /* - - Input/Text Field Colors - ========================================================================== - - */ - - --inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255)); - --inputBorderColor: transparent; - --inputTextColor: var(--colorBlack, rgb(14, 11, 11)); - - --inputFocusBorderColor: var(--colorSecondary); - /* --inputFocusBoxShadow: 0 0 4px var(--colorSecondaryLighten3); */ - --inputFocusBoxShadow: inset 0 0 0 1px white, - inset 0 0 0 2px var(--colorPrimary); - - --inputInvalidBorderColor: var(--colorCritical, rgb(255, 48, 48)); - - /* - - Status Symbols - ========================================================================== - - */ - - --statusSymbols: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAAgVBMVEUAAAD/tQv/swL/OTn/PDzftl9W8QBW8AAtzP8v0P9Z9gD/tAP/uQb/tAItzf8tzf+eqK2ep60uzP9X8QCfqK4uzf8uzf9X8QAuzP9X8ACeqK4vzP9Y8QAuzv9Y8gCeqq4wz/8xzv9A1f9Y8QD/tAP86DpW8AD/swL/ODgtzP+ep63tgXPUAAAAJXRSTlMAGNfAQAv98/IdG8Io52zz8+DZ2dC9trabm4F+a05OQjAaDG6dAJcYcwAAAfdJREFUWMPtmNlygkAQRScyrBp3QTZFNBj8/w9MCGI3dBOHMg9jyvOmVFnn1HUSULx4LibjN/HMTN7Po2cu+PY/cwUfPYg2XhKsbHsVJJ5gcaf+cjZb+lN3qJjxyWIw/lAwNMALreKKFTIJh215Y3sYFiD5AEn9oWBowM4uEPau65A6JcJJ/2ACg/pDwdCAo1W0sI6ixbTsMH18Akn9oWBgwK7xh4LWBmlJSB+dwCD+pEA5wLMLgo3OwcGpvzhxludZfH1Bz4EZrefzdWSqTSCJPylQDggLhhA+oD6/G7d+5W7qk9yV3C8uPyz2KhMYxJ8UKAd4Fhdg3SZwa3/4wLrA7fhfbuwVJpDEnxQoByQFS9I6wQ7ydR16js0FBCzMuxMY1J8WqAYEfEDQXPcr3RjbxNU7vsBEF0R0dwJJ/LkCxYAVH7Bqri8r3QzbZNU7S4FZ44B1/ymgA4zPfZwUA2w+wG6uzyrdHMvk1TszgZnjgLmgyL4T8Dbq8R+bWgUIgw4ABby/Vl8hIckAUMD7a3WIYQIYgC0Af73+jOIJpKAF1F+vf2QwAQxAC7C/ZrcSeAIpegvAX7ObOZgABiAF2F+322mYAAagBeCv2wMNTEAGIAWVv3aPlDABDMAW1P7aPdQjDBiALaj89ftZBSGl+LXgZIoXL/4VXyptNwzuHR/QAAAAAElFTkSuQmCC"); - /* - - Scrollbar Colors -- Dark - ========================================================================== - - */ - - --scrollBarThumbBackgroundColor: var( - --colorSecondaryDarken2, - rgb(46, 103, 153) - ); - --scrollBarThumbBackgroundHoverColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - ); - --scrollBarTrackBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); - --scrollBarTrackCornerBackgroundColor: var( - --colorTertiaryDarken1, - rgb(32, 50, 70) - ); - - /* - - Timeline Colors -- Dark - ========================================================================== - - */ - - --timelineHeaderBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); - --timelineHeaderTextColor: var(--fontColor, rgb(255, 255, 255)); - - --timelineRulerBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70)); - --timelineRulerTextColor: var(--fontColor, rgb(255, 255, 255)); - - --timelineTrackLabelBackgroundColor: var(--colorTertiary, rgb(40, 63, 88)); - --timelineTrackBackgroundColor: var(--colorTertiary, rgb(40, 63, 88)); - - --timelineRegionBackgroundColor: var(--colorPrimaryDarken3, rgb(0, 36, 57)); - --timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255)); - --timelineRegionBorderColor: var(--colorPrimary, rgb(0, 90, 143)); - - --timelineRegionSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255)); - --timelineRegionSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(62, 138, 204) - ); - --timelineRegionSelectedTextColor: var(--fontColor, rgb(255, 255, 255)); - - /* - - ACCORDION COLORS - ========================================================================== - - */ - --accordionBorderColor: rgb(40, 63, 88); - --accordionContentBackground: rgb(20, 32, 44); - --accordionClosedLabelBackground: rgb(32, 50, 70); - --accordionOpenLabelBackground: rgb(40, 63, 88); - --accordionHoverLabelBackground: rgb(46, 103, 153); - --accordionColor: rgb(255, 255, 255); -} - -li.dark-theme { - display: none; -} - -h1, -h2, -h3 { - font-family: "Open Sans", sans-serif; - font-weight: 300; - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); - margin: 0 0 0.5rem 0; -} - -h1, -.h1 { - font-size: 2.375rem; -} - -h2, -.h2 { - font-size: 1.75rem; -} - -h3, -.h3 { - font-size: 1.375rem; -} - -p { - margin: 0 0 1rem 0; - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); -} - -a { - color: rgb(77, 172, 255); - color: var(--fontLinkColor, rgb(77, 172, 255)); - text-decoration: none; -} - -a:hover { - color: rgb(113, 189, 255); - color: var(--fontLinkHoverColor, rgb(113, 189, 255)); -} - -dt { - font-weight: 600; - margin: 0; -} -dd { - margin: 0 0 0.5rem 0; -} - -.light { - font-weight: 300; -} -.regular { - font-weight: 500; -} -.semi-bold { - font-weight: 600; -} -.bold { - font-weight: 700; -} - -.italic { - font-style: italic; -} - -.condensed { - font-stretch: condensed; -} - -.monospace { - font-family: "Roboto Mono", sans-serif; -} - -.invert, -.inverted { - background-color: rgb(255, 255, 255); - background-color: var(--fontInvertedBackgroundColor, rgb(255, 255, 255)); - color: rgb(0, 0, 0); - color: var(--fontInvertedColor, rgb(0, 0, 0)); - padding: 0 0.25rem; -} - -.low-contrast { - opacity: 0.2; -} - -/* Size Options */ -.xl { - font-size: 1.125rem; - font-size: var(--fontSizeXL, 1.125rem); -} - -.lg { - font-size: 1rem; - font-size: var(--fontSize, 1rem); -} - -.md { - font-size: 0.875rem; - font-size: var(--fontSizeMD, 0.875rem); -} - -.sm { - font-size: 0.75rem; - font-size: var(--fontSizeSM, 0.75rem); -} - -.xs { - font-size: 0.65rem; - font-size: var(--fontSizeXS, 0.65rem); -} - -/* -** This is as close as we get to a CSS reset in Astro, moving everything to -** the old IE border-box model of including padding in the overall size. -*/ -html { - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-text-size-adjust: 100%; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -*, -*::before, -*::after { - -webkit-box-sizing: inherit; - box-sizing: inherit; -} - -/* -** -** -** -*/ -body { - margin: 0; - padding: 0; - - font-family: "Open Sans", sans-serif; - - font-family: var(--fontFamily, "Open Sans", sans-serif); - font-size: 1rem; - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); - - background-color: rgb(24, 38, 53); - - background-color: var(--backgroundColor, rgb(24, 38, 53)); - - scrollbar-color: rgb(58, 129, 191) - rgb(32, 50, 70); - - scrollbar-color: var(--scrollBarThumbBackgroundColor, rgb(58, 129, 191)) - var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70)); -} - -label { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* -** CSS-styled Scrollbars for IE & Webkit browsers -** Dark theme by default. -** -*/ - -::-webkit-scrollbar { - width: 18px; - height: 18px; - background-color: transparent; -} - -::-webkit-scrollbar-thumb { - background-color: rgb(46, 103, 153); - background-color: var(--scrollBarThumbBackgroundColor, rgb(46, 103, 153)); - border-radius: 10px; - border: 3px solid transparent; - background-clip: padding-box; -} -/* visually "centers" because the dark edge of the shadow gives the illusion this is offset */ -::-webkit-scrollbar-thumb:vertical { - border-left-width: 4px; -} - -::-webkit-scrollbar-thumb:horizontal { - border-top-width: 4px; -} - -::-webkit-scrollbar-thumb:active, -::-webkit-scrollbar-thumb:hover { - background-color: rgb(58, 129, 191) - ; - background-color: var( - --scrollBarThumbBackgroundHoverColor, - rgb(58, 129, 191) - ); -} - -::-webkit-scrollbar-track, -::-webkit-scrollbar-corner { - background-color: rgb(32, 50, 70); - background-color: var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70)); -} -::-webkit-scrollbar-track:vertical { - -webkit-box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.15); - box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.15); -} -::-webkit-scrollbar-track:horizontal { - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); -} - -/* -** -** ASTRO BUTTON -** ========================================================================== -** 3.0 Notes -** - Removed Master Off Button Style -** - Replaced various properties with css custom properties to support -** - Removed .satcom class definition -** - Removed narrow/short definitions -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Disabled user selection of text on all buttons -** - Removed redundant background hover from 'disabled' state by using :not() on the :hover state -** - Removed redundant background hover from 'master off' by using :not() on the :hover state // deprecate after 1.4 -** - Fixed Firefox alignment issue where text was misaligned vertically -** - Renamed half-height to short and half-width to narrow (Note: rux_ only, satcom_ retains old syntax) -** - Removed user-select and placed it in astro.css to apply to all input types -** - Embedded master off icon and removed the additional states required to handle icons and gradient backgrounds -*/ - -.rux-button-group { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -.rux-button-group .rux-button:not(:last-child) { - margin-right: 0.625rem; -} - -/* Global Button Styles */ -.rux-button { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - - margin: 0; - padding: 0 1rem; - - height: 2.125rem; - min-width: 2.25rem; - /* max-width: 10.125rem; */ - - border-radius: 3px; - - border-radius: var(--buttonBorderRadius, 3px); - - color: rgb(255, 255, 255); - - color: var(--buttonTextColor, rgb(255, 255, 255)); - font-family: "Open Sans", sans-serif; - font-family: var(--fontFamily, "Open Sans", sans-serif); - font-size: 1rem; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - -webkit-box-pack: center; - - -ms-flex-pack: center; - - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - -webkit-user-select: none; - - -moz-user-select: none; - - -ms-user-select: none; - - user-select: none; -} - -/* - - Disabled States - -*/ -/* disabled state */ -.rux-button:disabled { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -.rux-button:focus { - outline: none; -} -.rux-button:not(.rux-button--outline) { - border: 1px solid rgb(0, 90, 143); - border: 1px solid var(--buttonBackgroundColor, rgb(0, 90, 143)); - background-color: rgb(0, 90, 143); - background-color: var(--buttonBorderColor, rgb(0, 90, 143)); - -webkit-box-shadow: var( - --controlBoxShadow, - 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), - 0 1px 5px rgba(0, 0, 0, 0.2) - ); - box-shadow: var( - --controlBoxShadow, - 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), - 0 1px 5px rgba(0, 0, 0, 0.2) - ); -} - -/* Outline Button Specific Styles */ -.rux-button--outline { - color: rgb(255, 255, 255); - color: var(--buttonOutlineTextColor, rgb(255, 255, 255)); - background-color: transparent; - background-color: var(--buttonOutlineBackgroundColor, transparent); - border: 1px solid rgb(0, 90, 143); - border: 1px solid var(--buttonOutlineBorderColor, rgb(0, 90, 143)); -} - -/* - - Press/Active States - -*/ -.rux-button:active:not([hover]):not([disabled]) { - border-color: rgb(0, 90, 143) !important; - border-color: var(--buttonActiveBorderColor, rgb(0, 90, 143)) !important; - background-color: rgb(0, 90, 143) - !important; - background-color: var( - --buttonActiveBackgroundColor, - rgb(0, 90, 143) - ) !important; -} - -.rux-button:active:not([hover]):not([disabled]):not(.rux-button--outline) { - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14) !important; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14) !important; -} - -/* - - Hover States - -*/ -.rux-button:hover:not([active]):not([disabled]):not(.rux-button--outline) { - border-color: rgb(58, 129, 191); - border-color: var(--buttonHoverBorderColor, rgb(58, 129, 191)); - background-color: rgb(58, 129, 191); - background-color: var(--buttonHoverBackgroundColor, rgb(58, 129, 191)); - -webkit-box-shadow: var( - --buttonHoverBoxShadow, - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), - 0 4px 5px rgba(0, 0, 0, 0.2) - ); - box-shadow: var( - --buttonHoverBoxShadow, - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), - 0 4px 5px rgba(0, 0, 0, 0.2) - ); -} - -.rux-button--outline:hover:not([disabled]) { - color: rgb(255, 255, 255); - color: var(--buttonOutlineTextColor, rgb(255, 255, 255)); - background-color: rgba(30, 47, 66, 0.75) - ; - background-color: var( - --buttonOutlineHoverBackgroundColor, - rgba(30, 47, 66, 0.75) - ); - border-color: rgb(58, 129, 191); - border-color: var(--buttonOutlineHoverBorderColor, rgb(58, 129, 191)); -} - -/* - - Icons - -*/ - -.rux-button--small { - font-size: 0.875rem; - font-size: var(--smallLabelFontSize, 0.875rem); - height: 1.625rem; - padding: 0 1rem; - line-height: 1; -} - -.rux-button--large { - font-size: 1.125rem; - font-size: var(--largeLabelFontSize, 1.125rem); - height: 2.875rem; - /* min-width: 2.875rem; */ - padding: 0 1.5rem; -} - -.rux-button__icon { - height: 1.5rem; - width: 1.5rem; - - margin-right: 0.625rem; - margin-left: -0.625rem; -} - -.rux-button--icon-only .rux-button__icon { - margin-left: -0.625rem; - margin-right: -0.625rem; -} - -.rux-button--large.rux-button--icon-only .rux-button__icon { - margin-left: -1rem; - margin-right: -1rem; -} - -.rux-button--small .rux-button__icon { - height: 0.875rem; - width: 0.875rem; -} - -.rux-button--large .rux-button__icon { - height: 1.75rem; - width: 1.75rem; - margin-left: -0.8rem; - /* margin: -0.65rem 0.25rem -0.3rem calc((1.5rem - 0.625rem) * -1); */ -} - -.rux-button__icon .rux-icon { - height: auto; - width: 100%; - fill: rgb(255, 255, 255); - fill: var(--buttonTextColor, rgb(255, 255, 255)); -} - -.rux-button.rux-button--critical, -.rux-button.rux-button--critical:active:not([hover]):not([disabled]):not(.rux-button--outline) { - background-color: rgb(204, 45, 45) !important; - background-color: var(--colorCriticalDarken1, rgb(191, 36, 36)) !important; - border-color: rgb(204, 45, 45) !important; - border-color: var(--colorCriticalDarken1, rgb(191, 36, 36)) !important; -} - -.rux-button.rux-button--critical:hover:not([active]):not([disabled]) { - background-color: rgb(255, 48, 48); - background-color: var(--colorCritical, rgb(255, 48, 48)); - border-color: rgb(255, 48, 48); - border-color: var(--colorCritical, rgb(255, 48, 48)); -} - -.rux-card { - background-color: rgb(30, 47, 66); - background-color: var(--cardBackgroundColor, rgb(30, 47, 66)); - padding: 1px; - overflow: hidden; -} - -.rux-card__header { - color: rgb(255, 255, 255); - color: var(--cardHeaderTextColor, rgb(255, 255, 255)); - background-color: rgb(20, 32, 44); - background-color: var(--cardHeaderBackgroundColor, rgb(20, 32, 44)); - margin: 0; - padding: 0.325rem 0.625rem; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.rux-card__header h1 { - padding: 0; - margin: 0; - font-size: 1.75rem; -} - -.rux-card__content { - padding: 0.625rem; -} - -/* -** -** ASTRO CHECKBOX & RADIO BUTTONS -** ========================================================================== -** 3.0 Notes -** Added Custom CSS Properties to support light/dark theming -** Added fallback properties for IE11 -** 2.0 Notes -** - Removed hand cursor on checkbox -** - Updated styles to Astro 2.0 -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed linear gradients -** - Added line-height to label to fix minor alignment issue -** - Moved user-select to parent element -** - Removed user-select and placed it in astro.css to apply to all input types -*/ - -.rux-checkbox, -.satcom-checkbox, -.rux-radio-button, -.satcom-radio-button { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - margin: 0 0 1rem 0; - - line-height: 1.2; - - /* DEBUG */ - /* padding: 1rem; */ - /* outline: 1px solid red; - background: linear-gradient( - to bottom, - rgba(255, 0, 0, 0), - rgba(255, 0, 0, 0) 49.5%, - rgba(255, 0, 0, 1) 50%, - rgba(255, 0, 0, 1) 51.5%, - rgba(255, 0, 0, 0) 51%, - rgba(255, 0, 0, 0) - ); */ -} - -.rux-checkbox input[type="checkbox"], -.satcom-checkbox input[type="checkbox"], -.rux-radio-button input[type="radio"], -.satcom-radio-button input[type="radio"] { - -webkit-appearance: none; - display: none; -} - -.rux-checkbox input[type="checkbox"] + label, -.satcom-checkbox input[type="checkbox"] + label, -.rux-radio-button input[type="radio"] + label, -.satcom-radio-button input[type="radio"] + label { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - - -webkit-box-align: center; - - -ms-flex-align: center; - - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - - color: rgb(255, 255, 255); - - color: var(--controlLabelColor, rgb(255, 255, 255)); -} - -.rux-checkbox input[type="checkbox"] + label::before, -.satcom-checkbox input[type="checkbox"] + label::before, -.rux-radio-button input[type="radio"] + label::before, -.satcom-radio-button input[type="radio"] + label::before { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - content: ""; - - height: 1.25rem; - - height: var(--controlOptionSize, 1.25rem); - width: 1.25rem; - width: var(--controlOptionSize, 1.25rem); - - margin: 0 0.625rem 0 0; - - border: 1px solid rgb(122, 193, 255); - - border: 1px solid var(--controlBorderColor, rgb(122, 193, 255)); -} - -.rux-checkbox input[type="checkbox"] + label::before, -.satcom-checkbox input[type="checkbox"] + label::before { - border-radius: 2px; -} - -.rux-radio-button input[type="radio"] + label::before, -.satcom-radio-button input[type="radio"] + label::before { - border-radius: 100%; - background-color: transparent; -} - -.rux-checkbox input[type="checkbox"]:checked + label::before, -.satcom-checkbox input[type="checkbox"]:checked + label::before, -.rux-radio-button input[type="radio"]:checked + label::before, -.satcom-radio-button input[type="radio"]:checked + label::before { - background-color: rgb(58, 129, 191) - ; - background-color: var( - --controlSelectedOutlineBackgroundColor, - rgb(58, 129, 191) - ); - border-color: rgb(255, 255, 255); - border-color: var(--controlSelectedOutlineBorderColor, rgb(255, 255, 255)); -} - -.rux-checkbox input[type="checkbox"]:checked + label::after, -.satcom-checkbox input[type="checkbox"]:checked + label::after, -.rux-radio-button input[type="radio"]:checked + label::after, -.satcom-radio-button input[type="radio"]:checked + label::after { - position: absolute; - display: block; - - content: ""; -} - -.rux-checkbox input[type="checkbox"]:checked + label::after, -.satcom-checkbox input[type="checkbox"]:checked + label::after { - height: 6px; - width: 12px; - top: 5px; - left: 4px; - border-right: 2px solid rgb(255, 255, 255); - border-right: 2px solid var(--controlTextColor, rgb(255, 255, 255)); - border-top: 2px solid rgb(255, 255, 255); - border-top: 2px solid var(--controlTextColor, rgb(255, 255, 255)); - - -webkit-transform: rotate(125deg); - - transform: rotate(125deg); -} - -.rux-radio-button input[type="radio"]:checked + label::after, -.satcom-radio-button input[type="radio"]:checked + label::after { - top: 5px; - left: 5px; - - height: 10px; - width: 10px; - - border-radius: 100%; - /* box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, 0.9); */ - - background-color: rgb(255, 255, 255); - - background-color: var(--controlTextColor, rgb(255, 255, 255)); -} - -.rux-checkbox input[type="checkbox"]:disabled + label, -.satcom-checkbox input[type="checkbox"]:disabled + label, -.rux-radio-button input[type="radio"]:disabled + label, -.satcom-radio-button input[type="radio"]:disabled + label { - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); -} - -/* -** -** ASTRO DROP DOWN -** ========================================================================== -** 2.0.1 Notes -*/ - -.rux-select { - -webkit-appearance: none; - -moz-appearance: none; - - border: 1px solid rgb(0, 90, 143); - - border: 1px solid var(--selectBorderColor, rgb(0, 90, 143)); - border-radius: 3px; - border-radius: var(--buttonBorderRadius, 3px); - - color: rgb(255, 255, 255); - - color: var(--selectTextColor, rgb(255, 255, 255)); - font-family: "Open Sans", sans-serif; - font-size: 0.875rem; - line-height: 1.5; - height: 2rem; - padding: 0 1.2rem 0 0.625rem; - - background-color: rgb(0, 90, 143); - - background-color: var(--selectBackgroundColor, rgb(0, 90, 143)); - background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") - ; - background-image: var( - --selectCaret, - url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") - ); - background-position: center right 0.625rem; - background-repeat: no-repeat; -} - -.rux-select .rux-select optgroup, -.rux-select option { - color: rgb(0, 0, 0); - background-color: rgb(255, 255, 255); -} - -.rux-select:disabled { - opacity: 0.4; - cursor: not-allowed; -} - -.rux-select::-ms-expand { - display: none; -} - -.rux-select:focus::-ms-value { - background: transparent; -} - -.rux-form-element { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: baseline; - -ms-flex-align: baseline; - align-items: baseline; -} - -.rux-form-element label { - color: rgb(255, 255, 255); -} - -/* -** -** ASTRO INPUT TEXT FIELDS -** ========================================================================== -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed linear gradients -** - Updated text entry field to WCAG -*/ - -/* -** -** INPUT TEXT -** ========================================================================== -*/ - -/* REQUIRED CLASSES */ - -:root { - --padding: 0.5rem; - --paddingLeft: 0.5rem; - --paddingRight: 0.5rem; - --paddingTop: 0.25rem; - --paddingBottom: 0.25rem; -} - -.rux-form-field { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - - font-family: "Open Sans", sans-serif; - - font-family: var(--fontFamilty, "Open Sans", sans-serif); - font-size: 1rem; - font-size: var(--fontSize, 1rem); - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); -} - -.rux-form-field input:required + label::after { - content: "*"; - margin-left: 0.25rem; -} - -.rux-form-field__label { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - margin: 0 0 0.15rem 0; - width: 100%; - -ms-flex-line-pack: center; - align-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - color: rgb(255, 255, 255); - - color: var(--fontColor, rgb(255, 255, 255)); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.rux-form-field input { - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - - height: 2.25rem; - width: 100%; - padding: 0.5rem; - - border: 1px solid transparent; - - border: 1px solid var(--inputBorderColor, transparent); - border-radius: 3px; - - font-size: 1rem; - - font-size: var(--fontSize, 1rem); - color: rgb(0, 0, 0); - color: var(--inputTextColor, rgb(0, 0, 0)); -} - -.rux-form-field textarea { - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - - min-height: 4.25rem; - width: 100%; - padding: 0.5rem; - - border: 1px solid var(--inputBorderColor, transparent); - border-radius: 3px; - - font-family: var(--fontFamily, "Open Sans", sans-serif); - font-size: var(--fontSize, 1rem); - color: var(--inputTextColor, rgb(0, 0, 0)); -} - -.rux-form-field input[type="number"]::-webkit-inner-spin-button, -.rux-form-field input[type="number"]::-webkit-outer-spin-button, -.rux-form-field input[type="date"]::-webkit-inner-spin-button, -.rux-form-field input[type="date"]::-webkit-outer-spin-button, -.rux-form-field input[type="date"]::-webkit-calendar-picker-indicator { - -webkit-appearance: none; - display: none; -} - -/* VALIDATION */ - -.rux-form-field input:invalid { - border: 1px solid var(--inputInvalidBorderColor); - - background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FF3030%22%20fill-rule%3D%22evenodd%22%20d%3D%22M64.031%205c8.461%200%2068.88%20107.243%2063.648%20114.184-5.232%206.942-120.805%205.477-127.212%200C-5.941%20113.708%2055.57%205%2064.03%205zm3.45%2075.894l1.822-34.893H56.946l1.82%2034.893h8.715zM56.803%2093.108c0%201.929.547%203.423%201.643%204.483%201.095%201.06%202.642%201.589%204.642%201.589%201.953%200%203.477-.542%204.572-1.625%201.095-1.084%201.643-2.566%201.643-4.447%200-1.952-.542-3.452-1.625-4.5-1.084-1.047-2.613-1.571-4.59-1.571-2.047%200-3.607.512-4.678%201.536-1.072%201.023-1.607%202.535-1.607%204.535z%22%2F%3E%0A%3C%2Fsvg%3E"); - background-repeat: no-repeat; - background-size: 1.125rem; - background-position: center right 0.5rem; -} - -/* FOCUS RULES */ -.rux-form-field input:focus, -.rux-form-field input:invalid:focus { - /* outline: none; */ -} - -.rux-form-field input:not([type="search"]):focus, -.rux-form-field input:not([type="search"]):invalid:focus { - border: 1px solid var(--inputFocusBorderColor); - /* border-left: 4px solid var(--inputFocusBorderColor); */ - /* padding-left: calc(0.5rem - 3px); */ -} - -.rux-form-field input::-moz-selection { - background-color: rgb(184, 222, 255); - background-color: var(--colorSecondaryLighten3); -} - -.rux-form-field input::selection { - background-color: rgb(184, 222, 255); - background-color: var(--colorSecondaryLighten3); -} -/* -.rux-form-field input:invalid + label::before { - content: ""; - display: block; - height: 1rem; - width: 1.25rem; - margin-right: 0.25rem; - - background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FF3030%22%20fill-rule%3D%22evenodd%22%20d%3D%22M64.031%205c8.461%200%2068.88%20107.243%2063.648%20114.184-5.232%206.942-120.805%205.477-127.212%200C-5.941%20113.708%2055.57%205%2064.03%205zm3.45%2075.894l1.822-34.893H56.946l1.82%2034.893h8.715zM56.803%2093.108c0%201.929.547%203.423%201.643%204.483%201.095%201.06%202.642%201.589%204.642%201.589%201.953%200%203.477-.542%204.572-1.625%201.095-1.084%201.643-2.566%201.643-4.447%200-1.952-.542-3.452-1.625-4.5-1.084-1.047-2.613-1.571-4.59-1.571-2.047%200-3.607.512-4.678%201.536-1.072%201.023-1.607%202.535-1.607%204.535z%22%2F%3E%0A%3C%2Fsvg%3E"); - background-repeat: no-repeat; - background-size: 1rem; - background-position: center center; -} */ - -.rux-form-field__validation-message { - display: none; - position: absolute; - max-width: 16rem; - background-color: var(--colorCritical); - width: 100%; - padding: 0.25rem; - right: 0; - font-size: 0.875rem; - font-size: var(--fontSizeMD); -} - -.rux-form-field input:invalid .rux-form-field__validation-message { - display: block; -} - -/* .rux-form-field - input:not([type="search"]):not([type="checkbox"]):not([type="radio"]):optional - + label::after { - display: block; - content: "(optional)"; - font-size: 0.875rem; - margin: 0.1rem auto 0 0.25rem; - - opacity: 0.4; -} */ - -.rux-form-field input:disabled { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -.rux-form-field--large, -.rux-form-field--large label, -.rux-form-field--large input, -.rux-form-field--large textarea { - font-size: 1.125rem; - font-size: var(--fontSizeXL, 1.125rem); -} - -.rux-form-field--small, -.rux-form-field--small label, -.rux-form-field--small input, -.rux-form-field--small textarea { - font-size: 0.875rem; - font-size: var(--fontSizeMD, 0.875rem); -} - -.rux-form-field--large input, -.rux-form-field--large textarea { - padding: 0.5rem; -} - -.rux-form-field--large input { - height: 2.5rem; -} - -.rux-form-field--small input, -.rux-form-field--small textarea { - padding: 0.3rem; -} - -.rux-form-field--small input { - height: 1.625rem; -} - -.rux-form-field--large input:invalid { - background-size: 1.375rem; - background-position: center right 0.5rem; - padding: 0.5rem 1.875rem 0.5rem 0.5rem; -} - -.rux-form-field input:focus .rux-form-field input:invalid:focus { - -webkit-box-shadow: inset 0 0 3px var(--colorGray, rgb(204, 204, 204)); - box-shadow: inset 0 0 3px var(--colorGray, rgb(204, 204, 204)); - border-color: var(--inputFocusBorderColor); - outline: none; - color: black; -} - -.rux-form-field input[type="search"]::-webkit-search-decoration { - -webkit-appearance: textfield; -} - -/* SEARCH VARIANT */ -.rux-form-field input[type="search"] { - -webkit-appearance: none; - -moz-appearance: none; - padding: 0.5rem 0.5rem 0.5rem 1.75rem; - - background: no-repeat center left 0.3rem/1.1em - url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") - rgb(255, 255, 255); - - background: no-repeat center left 0.3rem/1.1em - url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") - var(--inputBackgroundColor, rgb(255, 255, 255)); -} - -.rux-form-field--large input[type="search"] { - padding: 0.5rem 0 0.5rem 2rem; -} - -.rux-form-field--small input[type="search"] { - padding: 0.3rem 0 0.3rem 1.5rem; -} - -.rux-form-field input[type="search"]::-webkit-search-cancel-button { - position: relative; - - -webkit-appearance: none; - width: 20px; - height: 20px; - background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22rgb(0%2C%2090%2C%20143)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M69.028%2064l22.628%2022.627-5.029%205.029L64%2069.028%2041.373%2091.656l-5.029-5.029L58.972%2064%2036.344%2041.373l5.029-5.029L64%2058.972l22.627-22.628%205.029%205.029L69.028%2064z%22%2F%3E%0A%3C%2Fsvg%3E"); -} - -.rux-form-field input[type="search"]::-ms-clear { - position: relative; - right: 0.25rem; - width: 20px; - height: 20px; - background-color: red; -} - -.rux-advanced-status { - position: relative; - margin: 0 0.75rem; - line-height: 0; - /* width: 6.25rem; */ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.rux-advanced-status__icon-group { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 6.25rem; - min-width: 4rem; - - /* fauxicon grid. Usefull for gross alignment */ - /* border: 1px solid red; - - background-image: linear-gradient( - to right, - rgba(255, 0, 0, 0) 0, - rgba(255, 0, 0, 0) 49%, - rgba(0, 255, 0, 1) 50%, - rgba(0, 255, 0, 1) 51%, - rgba(0, 255, 0, 0) 52%, - rgba(0, 255, 0, 0) 100% - ); */ -} - -.rux-advanced-status__status-icon { - margin: 0 2px 0 auto; - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; -} - -.rux-advanced-status__icon { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - margin: 0 auto; -} - -.rux-advanced-status__icon::before { - content: ""; - display: block; - position: relative; - margin-bottom: -12px; - margin-left: -18px !important; - height: 16px; - width: 16px; -} - -.rux-advanced-status__badge:empty { - display: none; -} - -.rux-advanced-status__badge { - display: block; - z-index: 2; - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; - - position: absolute; - bottom: -0.75rem; - right: -0.5rem; - - border: 1px solid rgba(255, 255, 255, 0.6); - border-radius: 3px; - padding: 0.65rem 0.25rem; - font-size: 0.775rem; - text-align: center; - color: #fff; - background-color: #000; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.rux-advanced-status__label { - text-align: center; - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); - font-size: 0.875rem; - line-height: 1.2; - margin-top: 1rem; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - max-width: 6.25rem; - white-space: nowrap; -} - -.rux-advanced-status__label__sub-label { - font-size: 0.65em; - color: rgba(255, 255, 255, 0.6); - display: block; -} - -.rux-clock { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - color: rgb(255, 255, 255); - color: var(--clockTextColor, rgb(255, 255, 255)); - - font-size: 1.15rem; -} - -.rux-clock__segment { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.rux-clock__segment__value { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-family: "Roboto Mono", monospace; - font-family: var(--fontFamilyMono, "Roboto Mono", monospace); - font-weight: 700; - - border: 1px solid rgb(39, 86, 128); - - border: 1px solid var(--clockBorderColor, rgb(39, 86, 128)); - - background-color: rgb(20, 32, 44); - - background-color: var(--clockBackgroundColor, rgb(20, 32, 44)); - margin-bottom: 0.25rem; - - white-space: nowrap; - overflow-y: hidden; - text-overflow: ellipsis; -} - -.rux-clock--small .rux-clock__segment__value { - height: 2.75rem; - padding: 0 0.75rem; - font-size: 1.15rem; - font-weight: 500; -} - -.rux-clock__day-of-the-year .rux-clock__segment__value { - border-right: none; -} - -.rux-clock:not(.rux-clock--small) .rux-clock__segment__value { - font-size: 1.75rem; - height: 2.75rem; - padding: 0 0.75rem; -} - -.rux-clock__segment__label { - font-size: 0.875rem; -} - -.rux-clock__aos { - margin-left: 1em; -} - -.rux-clock__los { - margin-left: 0.5em; -} - -.rux-icon { - margin: 0 auto; - - width: 2.8rem; - height: 2.8rem; - - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - fill: rgb(77, 172, 255); - - fill: var(--colorSecondary, rgb(77, 172, 255)); -} - -i.rux-icon { - display: block; - width: 2.8rem; - height: 2.8rem; - - color: rgb(77, 172, 255); - - color: var(--colorSecondary, rgb(77, 172, 255)); -} - -.rux-log { - display: block; - font-size: 0.875rem; - background-color: rgb(30, 47, 66); - background-color: var(--logBackgroundColor, rgb(30, 47, 66)); -} - -.rux-log-header { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - position: relative; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - - padding: 0.5rem; - background-color: rgb(20, 32, 44); - background-color: var(--logHeaderBackgroundColor, rgb(20, 32, 44)); -} - -.rux-log-header-title { - margin: 0 0 1rem 0; - display: none; - - font-size: 1.25rem; - font-weight: 300; -} - -.rux-log__header-labels { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - color: rgb(255, 255, 255); - color: var(--logHeaderTextColor, rgb(255, 255, 255)); -} - -.rux-log__header-labels, -.rux-log__events { - padding: 0; - margin: 0; - list-style: none; -} - -.rux-log__header-labels, -.rux-log__log-event { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-line-pack: start; - align-content: flex-start; -} - -.rux-log__events { - height: 100%; - overflow-y: scroll; -} - -.log-event__timestamp { - -ms-flex-negative: 0; - flex-shrink: 0; - - text-align: right; - width: 5rem; -} - -.rux-log__log-event { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - padding: 0.5rem 0; - border-bottom: 1px solid rgb(40, 63, 88); - border-bottom: 1px solid var(--logBorderColor, rgb(40, 63, 88)); -} - -.rux-log__log-event:last-child { - border-bottom: none; -} - -.rux-log__header-labels li:not(:first-child), -.rux-log__log-event > * { - margin: 0 0.5rem; -} - -.rux-log__header-labels li:first-child { - margin: 0 0.5rem 0 0; -} - -.rux-log__log-event .log-event__timestamp { - font-family: "Roboto Mono", monospace; - font-family: var(--fontFamilyMono, "Roboto Mono", monospace); -} - -.log-event__status { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - text-align: center; - width: 1rem; - overflow: hidden; -} - -.log-event__message { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - text-align: left; -} - -.log-header__message { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -/* ol li:nth-child(even) { - background-color: #283f58; -} */ - -.rux-log__filter-enabled { - position: -webkit-sticky; - position: sticky; - top: 0; - left: 0; - - -ms-flex-line-pack: center; - - align-content: center; - - color: rgb(0, 0, 0); - - color: var(--logFilterTextColor, rgb(0, 0, 0)); - background-color: rgb(192, 240, 255); - background-color: var(--logFilterBackgroundColor, rgb(192, 240, 255)); - padding: 0.5rem; -} - -.rux-log__filter-enabled .rux-icon { - margin-right: 0.5rem; -} - -.rux-modal { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - - background-color: rgb(0, 0, 0); - - background-color: var(--modalBackgroundColor, rgb(0, 0, 0)); - - width: 28rem; - height: 13.5rem; - border: 2px solid rgb(0, 90, 143); - border: 2px solid var(--modalBorderColor, rgb(0, 90, 143)); - - border-radius: 4px; - margin: auto; - padding: 0; - - -webkit-user-select: none; - - -moz-user-select: none; - - -ms-user-select: none; - - user-select: none; - - -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.2); - - box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.2); -} - -.rux-modal__titlebar { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - width: 100%; - height: 2rem; - - background-color: rgb(0, 90, 143); - - background-color: var(--modalBorderColor, rgb(0, 90, 143)); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: move; -} - -.rux-modal__titlebar h1 { - font-size: 1rem; - font-weight: 600; - padding: 0; - margin: 0; - line-height: 1.2; - - color: rgb(255, 255, 255) !important; -} - -.rux-modal__content { - height: 100%; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - padding: 1rem; - color: rgb(255, 255, 255); - color: var(--fontColor, rgb(255, 255, 255)); -} - -.rux-button-group { - margin-left: auto; - -ms-flex-item-align: end; - align-self: flex-end; -} - -.rux-modal__message { - margin: 0.5rem 1.875rem 2.5rem 1.875rem; -} - -.rux-modal .rux-button { - -webkit-box-shadow: none !important; - box-shadow: none !important; -} - -/* -** -** ASTRO NOTIFICATION -** ========================================================================== -** 2.0 Notes -** -*/ -.rux-notification { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-line-pack: center; - align-content: center; - - top: -4.25rem; - left: 0; - - height: 4.25rem; - width: 100%; - - padding: 0.7rem 1.25rem; - background-color: rgb(87, 214, 255); - background-color: var(--colorStandbyLighten1, rgb(160, 232, 255)); - -webkit-transition: all 0.5s ease; - transition: all 0.5s ease; - - -webkit-box-sizing: border-box; - - box-sizing: border-box; - color: rgb(0, 0, 0); - color: var(--colorBlack, rgb(0, 0, 0)); -} - -.rux-notification::after { - position: relative; - display: block; - content: ""; - height: 60px; -} - -.visible { - margin-top: 0; -} - -.notification-buffer.show { - margin-top: 0; -} - -.show .rux-notification-container { - top: 0; -} -.show .rux-notification-buffer { - height: 60px; -} - -.rux-notification_close-button { - border: 3px solid rgb(36, 163, 204); - border: 3px solid var(--colorStandbyDarken1, rgb(96, 168, 191)); - color: rgb(36, 163, 204); - color: var(--colorStandbyDarken1, rgb(96, 168, 191)); - - background-color: transparent; - - height: 2.2rem; - width: 2.2rem; - border-radius: 50%; - - position: relative; - - margin-left: auto; - - display: -webkit-box; - - display: -ms-flexbox; - - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.rux-notification_close-button::after, -.rux-notification_close-button::before { - display: block; - position: absolute; - - height: 2px; - width: 66%; - margin-left: -32%; - margin-top: -1px; - - content: ""; - - background-color: rgb(36, 163, 204); - - background-color: var(--colorStandbyDarken1, rgb(96, 168, 191)); -} - -@supports (--css: variables) { - .rux-notification_close-button::after, - .rux-notification_close-button::before { - margin: 0; - } -} - -.rux-notification_close-button::after { - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.rux-notification_close-button::before { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -/* Critical Variant */ -.rux-notification--critical { - background-color: rgb(255, 96, 96); - background-color: var(--colorCriticalLighten1, rgb(255, 100, 100)); -} - -.rux-notification--critical .rux-notification_close-button { - border-color: rgb(204, 45, 45); - border-color: var(--colorCriticalDarken1, rgb(191, 36, 36)); -} - -.rux-notification--critical .rux-notification_close-button::after, -.rux-notification--critical .rux-notification_close-button::before { - background-color: rgb(204, 45, 45); - background-color: var(--colorCriticalDarken1, rgb(191, 36, 36)); -} - -/* Caution Variant */ -.rux-notification--caution { - background-color: rgb(253, 237, 97); - background-color: var(--colorCautionLighten1, rgb(250, 237, 86)); -} -.rux-notification--caution .rux-notification_close-button { - border-color: rgb(202, 186, 46); - border-color: var(--colorCautionDarken1, rgb(186, 173, 22)); -} - -.rux-notification--caution .rux-notification_close-button::after, -.rux-notification--caution .rux-notification_close-button::before { - background-color: rgb(202, 186, 46); - background-color: var(--colorCautionDarken1, rgb(186, 173, 22)); -} - -/* Normal Variant */ -.rux-notification--normal { - background-color: rgb(154, 246, 102); - background-color: var(--colorNormalLighten2, rgb(173, 255, 128)); -} - -.rux-notification--normal .rux-notification_close-button { - border-color: rgb(69, 192, 0); - border-color: var(--colorNormalDarken1, rgb(68, 191, 0)); -} - -.rux-notification--normal .rux-notification_close-button::after, -.rux-notification--normal .rux-notification_close-button::before { - background-color: rgb(69, 192, 0); - background-color: var(--colorNormalDarken1, rgb(68, 191, 0)); -} - -/* Info Variant */ -.rux-notification--info { - background-color: rgb(87, 214, 255); - background-color: var(--colorStandbyLighten1, rgb(160, 232, 255)); -} -.rux-notification--info .rux-notification_close-button { - border-color: rgb(36, 163, 204); - border-color: var(--colorStandbyDarken1, rgb(96, 168, 191)); -} - -.rux-notification--info .rux-notification_close-button::after, -.rux-notification--info .rux-notification_close-button::before { - background-color: rgb(36, 163, 204); - background-color: var(--colorStandbyDarken1, rgb(96, 168, 191)); -} - -/* -** -** ASTRO POP-UPS -** ========================================================================== -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed transform -** - Updated colors to WCAG -*/ - -/* REQUIRED CLASSES */ -.rux-pop-up, -.satcom-pop-up { - font-size: 0.875rem; - display: inline-block; - - margin: 1em; - - min-width: 15em; - position: relative; - - border: 1px solid rgb(77, 172, 255); - - border: 1px solid var(--colorSecondary, rgb(77, 172, 255)); - background-color: rgb(77, 172, 255); - background-color: var(--colorSecondary, rgb(77, 172, 255)); - border-radius: 3px; -} - -.rux-pop-up ul, -.satcom-pop-up ul { - position: relative; - list-style: none; - padding: 0; - margin: 0; - background: none; - background-color: #fff; - border-radius: 2px; - - z-index: 2; -} - -/* .rux-pop-up li, -.satcom-pop-up li { - border-bottom: 1px solid #f0f1f3; -} */ - -.rux-pop-up a, -.satcom-pop-up a { - display: block; - padding: 0.5em; - color: #000; - text-decoration: none; - - min-width: 15em; - max-width: 20em; -} - -.rux-pop-up a:hover, -.satcom-pop-up a:hover { - background-color: rgb(184, 222, 255); - background-color: var(--colorSecondaryLighten3, rgb(211, 234, 255)); -} - -.rux-pop-up li:first-child a, -.satcom-pop-up li:first-child a { - border-top-right-radius: 2px; - border-top-left-radius: 2px; -} - -.rux-pop-up li:last-child a, -.satcom-pop-up li:last-child a { - border: none; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; -} - -.rux-pop-up--top, -.satcom-pop-up-top { - border-top: 3px solid rgb(77, 172, 255); - border-top: 3px solid var(--colorSecondary, rgb(77, 172, 255)); -} - -.rux-pop-up--top::before, -.satcom-pop-up-top::before { - content: ""; - display: block; - position: absolute; - - width: 1.1875rem; - height: 1.1875rem; - - background-color: rgb(77, 172, 255); - - background-color: var(--colorSecondary, rgb(77, 172, 255)); - z-index: 1; - - margin: -12px 0 0 16px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.rux-pop-up--bottom, -.satcom-pop-up-bottom { - border-bottom: 3px solid rgb(77, 172, 255); - border-bottom: 3px solid var(--colorSecondary, rgb(77, 172, 255)); -} - -.rux-pop-up--bottom::after, -.satcom-pop-up-bottom::after { - content: ""; - display: block; - position: absolute; - border-bottom: 1px solid rgb(77, 172, 255); - border-bottom: 1px solid var(--colorSecondary, rgb(77, 172, 255)); - border-right: 1px solid rgb(77, 172, 255); - border-right: 1px solid var(--colorSecondary, rgb(77, 172, 255)); - width: 1.1875rem; - height: 1.1875rem; - - background-color: rgb(77, 172, 255); - - background-color: var(--colorSecondary, rgb(77, 172, 255)); - - margin: -7px 0 0 16px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.rux-pop-up--left, -.satcom-pop-up-left { - border-left: 3px solid rgb(77, 172, 255); - border-left: 3px solid var(--colorSecondary, rgb(77, 172, 255)); -} - -.rux-pop-up--left::before, -.satcom-pop-up-left::before { - content: ""; - display: block; - position: absolute; - border-bottom: 1px solid rgb(77, 172, 255); - border-bottom: 1px solid var(--colorSecondary, rgb(77, 172, 255)); - border-left: 1px solid rgb(77, 172, 255); - border-left: 1px solid var(--colorSecondary, rgb(77, 172, 255)); - width: 1.1875rem; - height: 1.1875rem; - - background-color: rgb(77, 172, 255); - - background-color: var(--colorSecondary, rgb(77, 172, 255)); - - margin: 16px 0 0 -12px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.rux-pop-up--right, -.satcom-pop-up-right { - border-right: 3px solid rgb(77, 172, 255); - border-right: 3px solid var(--colorSecondary, rgb(77, 172, 255)); -} - -.rux-pop-up--right::before, -.satcom-pop-up-right::before { - content: ""; - display: block; - position: absolute; - border-top: 1px solid rgb(77, 172, 255); - border-top: 1px solid var(--colorSecondary, rgb(77, 172, 255)); - border-right: 1px solid rgb(77, 172, 255); - border-right: 1px solid var(--colorSecondary, rgb(77, 172, 255)); - width: 1.1875rem; - height: 1.1875rem; - - background-color: rgb(77, 172, 255); - - background-color: var(--colorSecondary, rgb(77, 172, 255)); - - right: 0; - margin: 16px -12px 0 0; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -/* -** -** ASTRO PROGRESS -** ========================================================================== -** 2.0 Notes -** - Updated indeterminate progress to use animated SVG and the :indeterminate pseudo class -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - In addition to rux_ added the correct spelling of indeterminate as an additional selector -** - Combined indeterminate and determinate progress styles -** - DETERMINATE -** - Made container a flex element -** - Made percentage readout have an appropriate margin (NOTE: without a text rep the progress bar will scale to full width. Flexbox is neat. -** - Fixed alignment issue in Safari/Chrome where the progress bar was 2-3 pixels too low -** - Fixed width (on Chrome/Safari) of 100% width progress bar expanding past the border of the track -** - INDETERMINATE -** - Removed prefixed animation. Safari 8 was the last browser that required it -** - [REMOVED] Embeded SVG graphics embeded SVG graphic stopped working -** - -** - !! NOTE !! -** - The whole progress bar needs a rewrite. Better native elements and CSS properties should be used -** - -*/ - -:root { - --progressPadding: 2px 0 0 2px; - --progressRadius: 10px 10px 10px 10px; - --progressHeight: 14px; - --progressWidth: calc(100% - 4px); -} -.rux-progress { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - - -webkit-box-pack: justify; - - -ms-flex-pack: justify; - - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - height: 2rem; -} - -.rux-progress progress[value] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - /* background: #21384f; */ - background-color: rgba(0, 0, 0, 0.3) - ; - background-color: var( - --progressDeterminateTrackBackgroundColor, - rgba(0, 0, 0, 0.3) - ); - border: 1px solid rgb(20, 32, 44); - border: 1px solid var(--progressDeterminateTrackBorderColor, rgb(20, 32, 44)); - border-radius: 10px 10px 10px 10px; - border-radius: var(--progressRadius); - height: 20px; - width: 100%; -} - -.rux-progress__value { - margin: 0 0 0 0.5rem; - - text-align: right; - font-size: 24px; - - width: 11%; - color: rgb(255, 255, 255); - color: var(--controlLabelColor, rgb(255, 255, 255)); -} - -.rux-progress progress[value]::-webkit-progress-bar { - background-color: transparent; -} - -.rux-progress progress[value]::-webkit-progress-value { - border-radius: 10px 10px 10px 10px; - border-radius: var(--progressRadius); - - height: 14px; - - height: var(--progressHeight); - margin: 2px 0 0 2px; - margin: var(--progressPadding); - max-width: calc(100% - 4px); - max-width: var(--progressWidth); - - background-color: rgb(77, 172, 255) - ; - - background-color: var( - --progressDeterminateBarBackgroundColor, - rgb(77, 172, 255) - ); -} - -.rux-progress progress[value]::-ms-fill { - border-radius: 10px; /* var(--progressRadius, 10px);*/ - - border: none; - height: 14px; /* var(--progressHeight), 14px); */ - margin: 2px; - max-width: calc(100% - 6px); /* var(--progressWidth);*/ - - background-color: rgb(77, 172, 255) - ; - - background-color: var( - --progressDeterminateBarBackgroundColor, - rgb(77, 172, 255) - ); -} - -.rux-progress progress[value]::-moz-progress-bar { - border-radius: 10px 10px 10px 10px; - border-radius: var(--progressRadius); - - margin: 2px 2px 0 2px; - height: 14px; - height: var(--progressHeight); - max-width: calc(100% - 4px); - max-width: var(--progressWidth); - - background-color: rgb(77, 172, 255) - ; - - background-color: var( - --progressDeterminateBarBackgroundColor, - rgb(77, 172, 255) - ); -} - -/* Indeterminate */ -.rux-progress progress:indeterminate { - -webkit-appearance: none; - -moz-appearance: none; - -webkit-box-sizing: border-box; - box-sizing: border-box; - position: relative; - - height: 5rem; - width: 5rem; - - background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000000%22%20fill-opacity%3D%22.3%22%20stroke%3D%22%2314202c%22%20d%3D%22M32%2C63.5%20C49.3969696%2C63.5%2063.5%2C49.3969696%2063.5%2C32%20C63.5%2C14.6030304%2049.3969696%2C0.5%2032%2C0.5%20C14.6030304%2C0.5%200.5%2C14.6030304%200.5%2C32%20C0.5%2C49.3969696%2014.6030304%2C63.5%2032%2C63.5%20Z%20M32%2C56.5%20C18.4690236%2C56.5%207.5%2C45.5309764%207.5%2C32%20C7.5%2C18.4690236%2018.4690236%2C7.5%2032%2C7.5%20C45.5309764%2C7.5%2056.5%2C18.4690236%2056.5%2C32%20C56.5%2C45.5309764%2045.5309764%2C56.5%2032%2C56.5%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%234dacff%22%20fill-rule%3D%22nonzero%22%20d%3D%22M32%2C61.9354839%20C30.9333606%2C61.9354839%2030.0686785%2C61.0708018%2030.0686785%2C60.0041623%20C30.0686785%2C58.9375229%2030.9333606%2C58.0728408%2032%2C58.0728408%20C40.1954904%2C58.0728408%2047.7578267%2C54.2689176%2052.6662672%2C47.8987622%20C56.1526582%2C43.3741373%2058.0728408%2C37.8356396%2058.0728408%2C32%20C58.0728408%2C17.6003676%2046.3996324%2C5.92715921%2032%2C5.92715921%20C17.6003676%2C5.92715921%205.92715921%2C17.6003676%205.92715921%2C32%20C5.92715921%2C33.0666394%205.0624771%2C33.9313215%203.99583767%2C33.9313215%20C2.92919824%2C33.9313215%202.06451613%2C33.0666394%202.06451613%2C32%20C2.06451613%2C15.4670888%2015.4670888%2C2.06451613%2032%2C2.06451613%20C48.5329112%2C2.06451613%2061.9354839%2C15.4670888%2061.9354839%2C32%20C61.9354839%2C38.6961574%2059.7285058%2C45.0618765%2055.7259583%2C50.2563674%20C50.0938506%2C57.5656952%2041.4065535%2C61.9354839%2032%2C61.9354839%20Z%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") - ; - - background-image: var( - --progressIndeterminate, - url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000000%22%20fill-opacity%3D%22.3%22%20stroke%3D%22%2314202c%22%20d%3D%22M32%2C63.5%20C49.3969696%2C63.5%2063.5%2C49.3969696%2063.5%2C32%20C63.5%2C14.6030304%2049.3969696%2C0.5%2032%2C0.5%20C14.6030304%2C0.5%200.5%2C14.6030304%200.5%2C32%20C0.5%2C49.3969696%2014.6030304%2C63.5%2032%2C63.5%20Z%20M32%2C56.5%20C18.4690236%2C56.5%207.5%2C45.5309764%207.5%2C32%20C7.5%2C18.4690236%2018.4690236%2C7.5%2032%2C7.5%20C45.5309764%2C7.5%2056.5%2C18.4690236%2056.5%2C32%20C56.5%2C45.5309764%2045.5309764%2C56.5%2032%2C56.5%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%234dacff%22%20fill-rule%3D%22nonzero%22%20d%3D%22M32%2C61.9354839%20C30.9333606%2C61.9354839%2030.0686785%2C61.0708018%2030.0686785%2C60.0041623%20C30.0686785%2C58.9375229%2030.9333606%2C58.0728408%2032%2C58.0728408%20C40.1954904%2C58.0728408%2047.7578267%2C54.2689176%2052.6662672%2C47.8987622%20C56.1526582%2C43.3741373%2058.0728408%2C37.8356396%2058.0728408%2C32%20C58.0728408%2C17.6003676%2046.3996324%2C5.92715921%2032%2C5.92715921%20C17.6003676%2C5.92715921%205.92715921%2C17.6003676%205.92715921%2C32%20C5.92715921%2C33.0666394%205.0624771%2C33.9313215%203.99583767%2C33.9313215%20C2.92919824%2C33.9313215%202.06451613%2C33.0666394%202.06451613%2C32%20C2.06451613%2C15.4670888%2015.4670888%2C2.06451613%2032%2C2.06451613%20C48.5329112%2C2.06451613%2061.9354839%2C15.4670888%2061.9354839%2C32%20C61.9354839%2C38.6961574%2059.7285058%2C45.0618765%2055.7259583%2C50.2563674%20C50.0938506%2C57.5656952%2041.4065535%2C61.9354839%2032%2C61.9354839%20Z%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") - ); - - background-size: cover; - background-repeat: no-repeat; - background-position: center center; - - -webkit-animation-name: spin; - - animation-name: spin; - -webkit-animation-duration: 1.367s; - animation-duration: 1.367s; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - - background-color: transparent; - border: none; -} - -/* Removes the default animation from IE */ -.rux-progress progress:indeterminate::-ms-fill { - animation-name: none; -} - -.rux-progress progress:indeterminate::-moz-progress-bar { - background-color: transparent; -} - -.rux-progress progress:indeterminate::-webkit-progress-value, -.rux-progress progress:indeterminate::-webkit-progress-bar { - background-color: transparent; -} - -@-webkit-keyframes spin { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes spin { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -/* -** -** ASTRO PUSHBUTTONS -** ========================================================================== -** 3.0 Notes -** - Updated with css custom properties for light/dark theme -** 2.1 Notes -** - Moved Pushbuttons to its own style -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed linear gradients -** - Removed prefixed transition -** - Fixed added colon to checked pseudo class (e.g., checked became :checked) -** - Alignment issue fixed on toggle button label -** - Updated to WCAG colors -** - Updated transition speed -*/ - -.rux-pushbutton, -.satcom-pushbutton { - display: inline-block; - - height: 1.3125rem; - - /* width: auto; */ - -webkit-font-smoothing: subpixel-antialiased; -} - -.rux-pushbutton__input, -.satcom-pushbutton-input { - display: none; -} - -.rux-pushbutton__button, -.satcom-pushbutton-button { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - - -webkit-box-pack: center; - - -ms-flex-pack: center; - - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - height: 1.375rem; - font-size: 0.75rem !important; - font-weight: 600; - - margin: 0; - padding: 0 0.625rem; - - color: rgb(255, 255, 255); - - color: var(--pushbuttonTextColor, rgb(255, 255, 255)); - - background-color: rgb(0, 90, 143); - - background-color: var(--pushbuttonBackgroundColor, rgb(0, 90, 143)); - border-radius: 3px; - border-radius: var(--defaultBorderRadius, 3px); - border: 1px solid rgb(30, 47, 66); - border: 1px solid var(--pushbuttonBorderColor, rgb(30, 47, 66)); -} - -.rux-pushbutton__button label, -.satcom-pushbutton-button label { - color: rgb(255, 255, 255); - color: var(--pushbuttonTextColor, rgb(255, 255, 255)); -} - -.rux-pushbutton__input:checked + .rux-pushbutton__button, -.satcom-pushbutton-input:checked + .satcom-pushbutton-button { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - color: rgb(91, 255, 0); - color: var(--pushbuttonSelectedTextColor, rgb(91, 255, 0)); - background-color: rgb(0, 0, 0); - background-color: var(--pushbuttonSelectedBackgroundColor, rgb(0, 0, 0)); - border-color: rgb(0, 0, 0); - border-color: var(--pushbuttonSelectedBorderColor, rgb(0, 0, 0)); - - -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.13); - - box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.13); -} - -.rux-pushbutton__input:not(:checked) + .rux-pushbutton__button .on, -.satcom-pushbutton-input:not(:checked) + .satcom-pushbutton-button .on { - display: none; -} - -.rux-pushbutton__input:disabled + .rux-pushbutton__button, -.satcom-pushbutton-input:disabled + .satcom-pushbutton-button { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -/* -** -** ASTRO SEGMENTED BUTTON -** ========================================================================== -** 3.0 Notes -** Don‘t forget to update Sketch with outline border color - -*/ - -.rux-segmented-button { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - height: 1.6875rem; - - overflow: hidden; - - padding: 0; - margin: 0; - - list-style: none; - - border-radius: 3px; - - border-radius: var(--controlBorderRadius, 3px); - border: 1px solid rgb(30, 47, 66); - border: 1px solid var(--segmentedButtonBorderColor, rgb(30, 47, 66)); -} - -.rux-segmented-button__segment { - height: 1.6875rem; - width: auto; - margin: 0; - padding: 0; -} - -.rux-segmented-button__segment label { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - width: auto; - height: 1.5625rem; - - margin: 0; - padding: 0 0.75rem; - - border: none; - border-right: 1px solid rgb(30, 47, 66); - border-right: 1px solid var(--segmentedButtonBorderColor, rgb(30, 47, 66)); - - color: rgb(255, 255, 255); - - color: var(--segmentedButtonTextColor, rgb(255, 255, 255)); - background-color: rgb(0, 90, 143); - background-color: var(--segmentedButtonBackgroundColor, rgb(0, 90, 143)); - - font-size: 0.875rem; - - -webkit-user-select: none; - - -moz-user-select: none; - - -ms-user-select: none; - - user-select: none; -} - -.rux-segmented-button__segment:last-child label { - border-right: none !important; -} - -.rux-segmented-button__segment input { - display: none !important; -} - -.rux-segmented-button__segment label:hover { - background-color: rgb(58, 129, 191) - ; - background-color: var( - --segmentedButtonHoverBackgroundColor, - rgb(58, 129, 191) - ); - color: rgb(255, 255, 255); - color: var(--segmentedButtonHoverTextColor, rgb(255, 255, 255)); - outline: none; -} - -.rux-segmented-button__segment input:checked + label { - background-color: rgb(58, 129, 191) - ; - background-color: var( - --segmentedButtonSelectedBackgroundColor, - rgb(58, 129, 191) - ); - color: rgb(255, 255, 255); - color: var(--segmentedButtonSelectedTextColor, rgb(255, 255, 255)); - -webkit-box-shadow: var( - --segmentedButtonSelectedBoxShadow, - inset 0 2px 4px rgba(0, 0, 0, 0.14), - inset 0 3px 4px rgba(0, 0, 0, 0.12), - inset 0 1px 5px rgba(0, 0, 0, 0.2) - ); - box-shadow: var( - --segmentedButtonSelectedBoxShadow, - inset 0 2px 4px rgba(0, 0, 0, 0.14), - inset 0 3px 4px rgba(0, 0, 0, 0.12), - inset 0 1px 5px rgba(0, 0, 0, 0.2) - ); - -webkit-transition: -webkit-box-shadow 0.067 ease-out; - transition: -webkit-box-shadow 0.067 ease-out; - transition: box-shadow 0.067 ease-out; - transition: box-shadow 0.067 ease-out, -webkit-box-shadow 0.067 ease-out; -} - -/* -** -** ASTRO SLIDER -** ========================================================================== -** 3.0 Notes -** Removed SVG dependancy for the thumb element -** Updated to 3.0 look/feel -** Added CSS Custom Property support for light/dark theming -** 2.1 Notes -** - Added support for bifurcated range slider -** 1.4 Notes -** - Added rux_ compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed linear gradients -** - Removed focus ring from Chrome (probably need an actual focus solution) -** - Updated SVG -*/ - -/* - Internal Variables - Because Chrome, Firefox and IE all require explicit declarations to style - the slider/range component these minimize the need to add repeat values - between the three - */ - -:root { - --thumbSize: var(--controlOptionSize, 1.25rem); - - --thumbShadow: 0 3px 5px rgba(0, 0, 0, 0.14), 0 1px 9px rgba(0, 0, 0, 0.12), - 0 1px 3px rgba(0, 0, 0, 0.2); - --thumbShadowHover: 0 6px 10px rgba(0, 0, 0, 0.14), - 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2); - --thumbShadowActive: inset 0 0 0 4px var(--colorPrimary, rgb(0, 90, 143)), - 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.12), - 0 1px 1px rgba(0, 0, 0, 0.2); - - --trackHeight: 2px; - --trackCursor: pointer; -} - -.rux-slider label input { - margin-left: auto; - margin-right: 0; -} - -.rux-range, -.satcom-range { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - background: none; - - width: 100%; -} - -input[type="range"]:focus { - outline: none; -} - -.rux-range::-webkit-slider-runnable-track, -.satcom-range::-webkit-slider-runnable-track { - display: -webkit-box; - display: flex; - -webkit-box-align: center; - align-items: center; - - /* width: 100%; */ - height: 2px; - height: var(--trackHeight); - cursor: pointer; - cursor: var(--trackCursor); - - background-color: rgb(217, 217, 217); - - background-color: var(--sliderTrackBackgroundColor, rgb(217, 217, 217)); - outline: 1px solid transparent; - outline: 1px solid var(--sliderTrackBorderColor, transparent); - - background-image: -webkit-gradient( - linear, - left top, right top, - from(rgb(77, 172, 255)), - color-stop(rgb(77, 172, 255)), - color-stop(rgb(217, 217, 217)), - to(rgb(217, 217, 217)) - ); - - background-image: linear-gradient( - to right, - rgb(77, 172, 255) 0%, - rgb(77, 172, 255) - calc(1% * var(--value)), - rgb(217, 217, 217) - calc(1% * var(--value)), - rgb(217, 217, 217) 100% - ); - - background-image: -webkit-gradient( - linear, - left top, right top, - from(var(--sliderSelectedTrackBackgroundColor, rgb(77, 172, 255))), - color-stop(var(--sliderSelectedTrackBackgroundColor, rgb(77, 172, 255))), - color-stop(var(--sliderTrackBackgroundColor, rgb(217, 217, 217))), - to(var(--sliderTrackBackgroundColor, rgb(217, 217, 217))) - ); - - background-image: linear-gradient( - to right, - var(--sliderSelectedTrackBackgroundColor, rgb(77, 172, 255)) 0%, - var(--sliderSelectedTrackBackgroundColor, rgb(77, 172, 255)) - calc(1% * var(--value)), - var(--sliderTrackBackgroundColor, rgb(217, 217, 217)) - calc(1% * var(--value)), - var(--sliderTrackBackgroundColor, rgb(217, 217, 217)) 100% - ); -} - -.rux-range::-moz-range-track { - display: flex; - align-items: center; - - /* width: 100%; */ - height: 2px; - height: var(--trackHeight); - cursor: pointer; - cursor: var(--trackCursor); - - background-color: rgb(217, 217, 217); - - background-color: var(--sliderTrackBackgroundColor, rgb(217, 217, 217)); - outline: 1px solid transparent; - outline: 1px solid var(--sliderTrackBorderColor, transparent); -} - -.rux-range::-moz-range-progress { - background-color: rgb(77, 172, 255) - ; - background-color: var( - --sliderSelectedTrackBackgroundColor, - rgb(77, 172, 255) - ); -} - -.rux-range:disabled { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -.rux-range::-ms-track { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - - /* width: 100%; */ - height: 1.25rem; - padding: 2px 0; - - cursor: pointer; - color: transparent; - background-color: transparent; - border: none; - /* background-color: var(--sliderTrackBackgroundColor, rgb(217, 217, 217)); */ - outline: 1px solid transparent; -} - -.rux-range::-ms-fill-lower { - height: 2px; - background-color: rgb(77, 172, 255); -} - -.rux-range::-ms-fill-upper { - height: 2px; - background-color: rgb(217, 217, 217); - background-color: var(--sliderTrackBackgroundColor, rgb(217, 217, 217)); -} - -.rux-range::-webkit-slider-thumb { - -webkit-appearance: none; - - position: relative; - - height: 1.25rem; - - height: var(--thumbSize); - width: 1.25rem; - width: var(--thumbSize); - - border-radius: 100%; - border: 1px solid rgb(255, 255, 255); - border: 1px solid var(--sliderThumbBorderColor, rgb(255, 255, 255)); - background-color: rgb(0, 90, 143); - background-color: var(--sliderThumbBackgroundColor, rgb(0, 90, 143)); - - cursor: pointer; - -webkit-box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, 0.9), var(--thumbShadow, 0 3px 5px rgba(0, 0, 0, 0.14), 0 1px 9px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2)); - box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, 0.9), var(--thumbShadow, 0 3px 5px rgba(0, 0, 0, 0.14), 0 1px 9px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.2)); - - outline: none !important; -} - -input:-moz-focusring { - outline: none; -} - -.rux-range::-moz-range-thumb { - -moz-appearance: none; - - position: relative; - - height: 1.25rem; - - height: var(--thumbSize); - width: 1.25rem; - width: var(--thumbSize); - - border-radius: 100%; - border: 1px solid rgb(255, 255, 255); - border: 1px solid var(--sliderThumbBorderColor, rgb(255, 255, 255)); - background-color: rgb(0, 90, 143); - background-color: var(--sliderThumbBackgroundColor, rgb(0, 90, 143)); - - cursor: pointer; - box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 5px rgba(0, 0, 0, 0.14), 0 1px 9px rgba(0, 0, 0, 0.12), - 0 1px 3px rgba(0, 0, 0, 0.2); - box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, 0.9), var(--thumbShadow); -} - -.rux-range:disabled::-moz-range-thumb { - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -.rux-range::-ms-thumb { - position: relative; - - height: 1.25rem; - width: 1.25rem; - - border-radius: 100%; - border: 1px solid rgb(255, 255, 255); - background-color: rgb(0, 90, 143); - - cursor: pointer; - box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, 0.9), - 0 3px 5px rgba(0, 0, 0, 0.14), 0 1px 9px rgba(0, 0, 0, 0.12), - 0 1px 3px rgba(0, 0, 0, 0.2); -} - -.rux-range:disabled::-webkit-slider-runnable-track, -.satcom-range:disabled::-webkit-slider-runnable-track { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -.rux-range:disabled::-webkit-slider-thumb, -.satcom-range:disabled::-webkit-slider-thumbtrack { - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -.rux-range:disabled::-ms-thumb { - opacity: 0.4; - cursor: not-allowed; -} - -.rux-range:not(:disabled)::-webkit-slider-thumb:active, -.satcom-range:not(:disabled)::-webkit-slider-thumb:active { - border-color: var(--colorSecondary, rgb(77, 172, 255)); - background-color: rgb(255, 255, 255); - -webkit-box-shadow: var(--thumbShadowActive, inset 0 0 0 4px rgb(0, 90, 143), 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.2)); - box-shadow: var(--thumbShadowActive, inset 0 0 0 4px rgb(0, 90, 143), 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.2)); -} - -.rux-range:not(:disabled)::-webkit-slider-thumb:focus, -.rux-range:not(:disabled)::-webkit-slider-thumb:hover:not(:active), -.satcom-range:not(:disabled)::-webkit-slider-thumb:focus, -.satcom-range:not(:disabled)::-webkit-slider-thumb:hover:not(:active) { - background-color: var(--sliderHoverThumbBackgroundColor, rgb(58, 129, 191)); - -webkit-box-shadow: var(--thumbShadowHover, 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)); - box-shadow: var(--thumbShadowHover, 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)); -} - -/* -** -** ASTRO STATUS INDICATOR -** ========================================================================== -** 4.1 Notes -** Removed satcom prefix -** Replaced SVGs with a single PNG and used sprite pattern to improve performance -** Removed ::before psuedo element in favor of simpler background on the div -** Removed undocumented and unused small status variant -** General clean up -** 3.0 Notes -** Removed margin on status symbols -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Embeded SVG graphics -*/ - -.rux-status-indicator, -.rux-status { - display: block; - - height: 1rem; - width: 1rem; - - margin: 0.125rem; - background-size: cover; - background-repeat: no-repeat; - background-position-x: 1rem; - - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAAgVBMVEUAAAD/tQv/swL/OTn/PDzftl9W8QBW8AAtzP8v0P9Z9gD/tAP/uQb/tAItzf8tzf+eqK2ep60uzP9X8QCfqK4uzf8uzf9X8QAuzP9X8ACeqK4vzP9Y8QAuzv9Y8gCeqq4wz/8xzv9A1f9Y8QD/tAP86DpW8AD/swL/ODgtzP+ep63tgXPUAAAAJXRSTlMAGNfAQAv98/IdG8Io52zz8+DZ2dC9trabm4F+a05OQjAaDG6dAJcYcwAAAfdJREFUWMPtmNlygkAQRScyrBp3QTZFNBj8/w9MCGI3dBOHMg9jyvOmVFnn1HUSULx4LibjN/HMTN7Po2cu+PY/cwUfPYg2XhKsbHsVJJ5gcaf+cjZb+lN3qJjxyWIw/lAwNMALreKKFTIJh215Y3sYFiD5AEn9oWBowM4uEPau65A6JcJJ/2ACg/pDwdCAo1W0sI6ixbTsMH18Akn9oWBgwK7xh4LWBmlJSB+dwCD+pEA5wLMLgo3OwcGpvzhxludZfH1Bz4EZrefzdWSqTSCJPylQDggLhhA+oD6/G7d+5W7qk9yV3C8uPyz2KhMYxJ8UKAd4Fhdg3SZwa3/4wLrA7fhfbuwVJpDEnxQoByQFS9I6wQ7ydR16js0FBCzMuxMY1J8WqAYEfEDQXPcr3RjbxNU7vsBEF0R0dwJJ/LkCxYAVH7Bqri8r3QzbZNU7S4FZ44B1/ymgA4zPfZwUA2w+wG6uzyrdHMvk1TszgZnjgLmgyL4T8Dbq8R+bWgUIgw4ABby/Vl8hIckAUMD7a3WIYQIYgC0Af73+jOIJpKAF1F+vf2QwAQxAC7C/ZrcSeAIpegvAX7ObOZgABiAF2F+322mYAAagBeCv2wMNTEAGIAWVv3aPlDABDMAW1P7aPdQjDBiALaj89ftZBSGl+LXgZIoXL/4VXyptNwzuHR/QAAAAAElFTkSuQmCC"); - - background-image: var(--statusSymbols, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAAgVBMVEUAAAD/tQv/swL/OTn/PDzftl9W8QBW8AAtzP8v0P9Z9gD/tAP/uQb/tAItzf8tzf+eqK2ep60uzP9X8QCfqK4uzf8uzf9X8QAuzP9X8ACeqK4vzP9Y8QAuzv9Y8gCeqq4wz/8xzv9A1f9Y8QD/tAP86DpW8AD/swL/ODgtzP+ep63tgXPUAAAAJXRSTlMAGNfAQAv98/IdG8Io52zz8+DZ2dC9trabm4F+a05OQjAaDG6dAJcYcwAAAfdJREFUWMPtmNlygkAQRScyrBp3QTZFNBj8/w9MCGI3dBOHMg9jyvOmVFnn1HUSULx4LibjN/HMTN7Po2cu+PY/cwUfPYg2XhKsbHsVJJ5gcaf+cjZb+lN3qJjxyWIw/lAwNMALreKKFTIJh215Y3sYFiD5AEn9oWBowM4uEPau65A6JcJJ/2ACg/pDwdCAo1W0sI6ixbTsMH18Akn9oWBgwK7xh4LWBmlJSB+dwCD+pEA5wLMLgo3OwcGpvzhxludZfH1Bz4EZrefzdWSqTSCJPylQDggLhhA+oD6/G7d+5W7qk9yV3C8uPyz2KhMYxJ8UKAd4Fhdg3SZwa3/4wLrA7fhfbuwVJpDEnxQoByQFS9I6wQ7ydR16js0FBCzMuxMY1J8WqAYEfEDQXPcr3RjbxNU7vsBEF0R0dwJJ/LkCxYAVH7Bqri8r3QzbZNU7S4FZ44B1/ymgA4zPfZwUA2w+wG6uzyrdHMvk1TszgZnjgLmgyL4T8Dbq8R+bWgUIgw4ABby/Vl8hIckAUMD7a3WIYQIYgC0Af73+jOIJpKAF1F+vf2QwAQxAC7C/ZrcSeAIpegvAX7ObOZgABiAF2F+322mYAAagBeCv2wMNTEAGIAWVv3aPlDABDMAW1P7aPdQjDBiALaj89ftZBSGl+LXgZIoXL/4VXyptNwzuHR/QAAAAAElFTkSuQmCC")); -} - - - - - -/* Specific Status Iconography */ -.rux-status--off, -.rux-status-indicator.rux-status--off, -.rux-status--off .rux-advanced-status__icon { - background-position-x: -5rem; -} - - -.rux-status--standby, -.rux-status-indicator.rux-status--standby, -.rux-status--standby .rux-advanced-status__icon { - background-position-x: -4rem; -} - -.rux-status--normal, -.rux-status-indicator.rux-status--normal, -.rux-status-indicator.rux-status--ok, -.rux-status--normal .rux-advanced-status__icon, -.rux-status--ok .rux-advanced-status__icon { - background-position-x: -3rem; -} - -.rux-status--caution, -.rux-status-indicator.rux-status--caution, -.rux-status--caution .rux-advanced-status__icon { - background-position-x: -2rem; -} - -.rux-status--serious, -.rux-status-indicator.rux-status--serious, -.rux-status-indicator.rux-status--error, -.rux-status--serious .rux-advanced-status__icon, -.rux-status--error .rux-advanced-status__icon { - background-position-x: -1rem; -} - -.rux-status--critical, -.rux-status-indicator.rux-status--critical, -.rux-status-indicator.rux-status--alert, -.rux-status--critical .rux-advanced-status__icon, -.rux-status--alert .rux-advanced-status__icon, -.rux-status--emergency .rux-advanced-status__icon { - background-position-x: 0; -} - -/* Specific Color */ -.rux-status--off svg, -.rux-icon.rux-status--off { - fill: rgb(198, 204, 209); - fill: var(--colorOff, rgb(198, 204, 209)); - color: rgb(198, 204, 209); - color: var(--colorOff, rgb(198, 204, 209)); -} -.rux-status--standby svg, -.rux-icon.rux-status--standby { - fill: rgb(77, 172, 255); - fill: var(--colorStandby, rgb(77, 172, 255)); - color: rgb(77, 172, 255); - color: var(--colorStandby, rgb(77, 172, 255)); -} -.rux-icon.rux-status--normal, -.rux-icon.rux-status--ok, -.rux-status--normal svg, -.rux-status--ok svg { - fill: rgb(91, 255, 0); - fill: var(--colorNormal, rgb(91, 255, 0)); - color: rgb(91, 255, 0); - color: var(--colorNormal, rgb(91, 255, 0)); -} -.rux-status--caution svg, -.rux-icon.rux-status--caution { - fill: rgb(248, 231, 29); - fill: var(--colorCaution, rgb(248, 231, 29)); - color: rgb(248, 231, 29); - color: var(--colorCaution, rgb(248, 231, 29)); -} -.rux-status--serious svg, -.rux-status--error svg, -.rux-icon.rux-status--serious, -.rux-icon.rux-status--error { - fill: rgb(255, 176, 0); - fill: var(--colorSerious, rgb(255, 176, 0)); - color: rgb(255, 176, 0); - color: var(--colorSerious, rgb(255, 176, 0)); -} -.rux-status--critical svg, -.rux-status--emergency svg, -.rux-icon.rux-status--critical, -.rux-icon.rux-status--emergency { - fill: rgb(255, 48, 48); - fill: var(--colorCritical, rgb(255, 48, 48)); - color: rgb(255, 48, 48); - color: var(--colorCritical, rgb(255, 48, 48)); -} - -/* -** -** ASTRO TABS -** ========================================================================== -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed transitions -** - Removed prefixed gradients -** - Updated colors for WCAG compliance -** - Swapped condensed font for standard -** 2.0 Ideas -** - Replace use a radio-button based structure for tabs? (http://alistapart.com/article/radio-controlled-web-design) -*/ - -/* REQUIRED CLASSES */ - -.rux-tabs, -.satcom-tabs { - font-size: 1.5rem; - - width: 100%; - margin: 0; - padding: 0; - height: 5.625rem; - - -webkit-user-select: none; - - -moz-user-select: none; - - -ms-user-select: none; - - user-select: none; -} - -.rux-tabs--small { - height: 3.125rem; - font-size: 1rem; -} - -.rux-tabs ul, -.satcom-tabs ul { - padding: 0; - margin: 0; - height: 100%; - - display: -webkit-box; - - display: -ms-flexbox; - - display: flex; - list-style: none; -} - -.rux-tabs li, -.satcom-tabs li { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - /* outline: 1px solid green; */ -} - -/* .rux-tabs li:not(:last-child), -.satcom-tabs li:not(:last-child) { - border-right: 1px solid var(--tabBorderColor, rgb(20, 32, 44)); -} */ - -.rux-tabs li::before, -.satcom-tabs li::before { - display: none !important; -} - -.rux-tabs a, -.satcom-tabs a { - height: 100%; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 3px 2rem 0; - - text-decoration: none; - color: rgb(77, 172, 255); - color: var(--tabTextColor, rgb(77, 172, 255)); - - /* background-color: var(--tabBackgroundColor, rgb(30, 47, 66)); */ - /* overflow: auto; */ -} - -.rux-tabs a[disabled] { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; - cursor: var(--disabledCursor, not-allowed); -} - -.rux-tabs .selected a, -.satcom-tabs .selected a { - color: rgb(255, 255, 255); - color: var(--tabSelectedTextColor, rgb(255, 255, 255)); - -webkit-box-shadow: inset 0 -5px 0 0 var(--tabSelectedBorderColor, rgb(77, 172, 255)); - box-shadow: inset 0 -5px 0 0 var(--tabSelectedBorderColor, rgb(77, 172, 255)); -} - -.rux-tabs--small .selected a, -.rux-tabs--small .selected a:hover { - color: rgb(255, 255, 255); - color: var(--tabSelectedTextColor, rgb(255, 255, 255)); - -webkit-box-shadow: inset 0 -3px 0 var(--tabSelectedBorderColor, rgb(77, 172, 255)); - box-shadow: inset 0 -3px 0 var(--tabSelectedBorderColor, rgb(77, 172, 255)); -} - -.rux-tabs .selected a:hover, -.satcom-tabs .selected a:hover { - color: rgb(255, 255, 255); - color: var(--tabSelectedTextColor, rgb(255, 255, 255)); - -webkit-box-shadow: inset 0 -5px 0 0 var(--tabSelectedBorderColor, rgb(77, 172, 255)); - box-shadow: inset 0 -5px 0 0 var(--tabSelectedBorderColor, rgb(77, 172, 255)); -} - -.rux-tabs a:hover:not([disabled]), -.satcom-tabs a:hover:not([disabled]) { - color: var(--tabHoverTextColor, rgb(255, 255, 255)); -} - -/* -** -** ASTRO TOGGLE BUTTONS -** ========================================================================== -** 3.0 Notes -** - Breaking change to markup of toggle button -** 2.1 Notes -** - Moved Pushbuttons to its own style sheet -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed linear gradients -** - Removed prefixed transition -** - Fixed added colon to checked pseudo class (e.g., checked became :checked) -** - Alignment issue fixed on toggle button label -** - Updated to WCAG colors -** - Updated transition speed -*/ - -.rux-toggle--legacy, -.satcom-toggle--legacy { - position: relative; - display: inline-block; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -webkit-font-smoothing: subpixel-antialiased; - - height: 1.3125rem; - width: 4.375rem; - border-radius: 3px; - border-radius: var(--defaultBorderRadius, 0.1875rem); - border: 1px solid rgb(0, 0, 0); - border: 1px solid var(--toggleBaseBorderColor, rgb(0, 0, 0)); - /* box-shadow: inset 0 0 2px rgba(0, 0, 0, 1); */ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - overflow: hidden; -} - -.rux-toggle--legacy__input, -.satcom-toggle--legacy input { - display: none !important; -} - -.rux-toggle--legacy__button { - position: absolute; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - - -ms-flex-pack: distribute; - - justify-content: space-around; - -ms-flex-line-pack: center; - align-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - top: 0; - left: 0; - - font-size: 0.75rem !important; - - height: 100%; - width: 100%; -} - -.rux-toggle--legacy__button span { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - - -ms-flex-line-pack: center; - - align-content: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - - width: 50%; - height: 100%; - z-index: 1; - - text-transform: uppercase; -} - -.rux-toggle--legacy__button::before { - position: absolute; - content: ""; - display: block; - - height: 100%; - width: 100%; - - border-radius: 0.1875rem; - - background: rgb(0, 0, 0); - - background: var(--toggleBaseBackgroundColor, rgb(0, 0, 0)); -} - -.rux-toggle--legacy__button::after { - content: ""; - - display: block; - - position: absolute; - - -webkit-box-sizing: border-box; - - box-sizing: border-box; - - top: 0; - left: 0; - - z-index: 10; - - -webkit-transition: left 0.1s ease-out; - - transition: left 0.1s ease-out; - - width: 50%; - height: 100%; - - border-radius: 0.125rem; - - background: rgb(0, 90, 143) - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E %3Cdefs%3E %3ClinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='100%25'%3E %3Cstop offset='0%25' stop-color='%23000'/%3E %3Cstop offset='100%25' stop-color='%23023861' stop-opacity='0'/%3E %3C/linearGradient%3E %3C/defs%3E %3Ccircle cx='3' cy='3' r='3' fill='url(%23a)' fill-rule='evenodd'/%3E %3C/svg%3E") - center center no-repeat; - - background: var(--toggleButtonBackgroundColor, rgb(0, 90, 143)) - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E %3Cdefs%3E %3ClinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='100%25'%3E %3Cstop offset='0%25' stop-color='%23000'/%3E %3Cstop offset='100%25' stop-color='%23023861' stop-opacity='0'/%3E %3C/linearGradient%3E %3C/defs%3E %3Ccircle cx='3' cy='3' r='3' fill='url(%23a)' fill-rule='evenodd'/%3E %3C/svg%3E") - center center no-repeat; - - -webkit-box-shadow: var( - --toggleButtonBoxShadow, - 0 0 3px rgba(0, 0, 0, 0.5), - 1px 0 2px rgba(0, 0, 0, 0.6) - ); - - box-shadow: var( - --toggleButtonBoxShadow, - 0 0 3px rgba(0, 0, 0, 0.5), - 1px 0 2px rgba(0, 0, 0, 0.6) - ); -} - -.rux-toggle--legacy .on { - font-weight: 600; - color: rgb(91, 255, 0); - color: var(--toggleBaseSelectedTextColor, rgb(91, 255, 0)); -} - -.rux-toggle--legacy .off { - color: rgb(255, 255, 255); - color: var(--toggleBaseTextColor, rgb(255, 255, 255)); -} - -.rux-toggle--legacy__input:disabled + .rux-toggle--legacy__button { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; -} - -.rux-toggle--legacy__input:checked + .rux-toggle--legacy__button::after { - left: 50%; - -webkit-box-shadow: var( - --toggleButtonSelectedBoxShadow, - 0 0 3px rgba(0, 0, 0, 0.5), - -1px 0 2px rgba(0, 0, 0, 0.6) - ); - box-shadow: var( - --toggleButtonSelectedBoxShadow, - 0 0 3px rgba(0, 0, 0, 0.5), - -1px 0 2px rgba(0, 0, 0, 0.6) - ); -} - -/* -** -** ASTRO TOGGLE BUTTONS -** ========================================================================== -** 3.0 Notes -** - Breaking change to markup of toggle button -** 2.1 Notes -** - Moved Pushbuttons to its own style sheet -** 1.4 Notes -** - Added rux_ and BEM compatible classes to all satcom_ NOTE: satcom_ will be removed in a future version -** - Removed prefixed linear gradients -** - Removed prefixed transition -** - Fixed added colon to checked pseudo class (e.g., checked became :checked) -** - Alignment issue fixed on toggle button label -** - Updated to WCAG colors -** - Updated transition speed -*/ - -.rux-toggle { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - /* height: 1.175rem; */ - /* width: 2.3875rem; */ - height: 22px; - width: 42px; - - -webkit-user-select: none; - - -moz-user-select: none; - - -ms-user-select: none; - - user-select: none; - overflow: hidden; -} - -.rux-toggle__input { - display: none !important; -} - -.rux-toggle__button { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - /* justify-content: center; - align-content: center; */ - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.rux-toggle__button::before { - position: relative; - - display: -webkit-box; - - display: -ms-flexbox; - - display: flex; - content: ""; - - border-radius: 5.5px; - border: 1px solid rgb(122, 122, 122); - border: 1px solid var(--toggleTrackBorderColor, rgb(122, 122, 122)); - background-color: rgb(204, 204, 204); - background-color: var(--toggleTrackBackgroundColor, rgb(204, 204, 204)); - - height: 11px; - width: 32px; - - -webkit-transition: 0.167s background-color ease-in-out; - - transition: 0.167s background-color ease-in-out; -} - -/* Track */ -.rux-toggle__input:checked + .rux-toggle__button::before { - background-color: rgb(77, 172, 255) - ; - background-color: var( - --toggleSelectedTrackBackgroundColor, - rgb(77, 172, 255) - ); - border-color: rgb(27, 122, 153); - border-color: var(--toggleSelectedTrackBorderColor, rgb(27, 122, 153)); -} - -.rux-toggle__button::after { - position: absolute; - content: ""; - top: 1px; - left: 0; - z-index: 1; - height: 19px; - width: 19px; - - border-radius: 50%; - border: 1px solid rgb(255, 255, 255); - border: 1px solid var(--toggleThumbBorderColor, rgb(255, 255, 255)); - background-color: rgb(255, 255, 255); - background-color: var(--toggleThumbBackgroundColor, rgb(255, 255, 255)); - - -webkit-transition: 0.167s left ease-in-out, 0.167s border-color ease-in-out; - - transition: 0.167s left ease-in-out, 0.167s border-color ease-in-out; -} - -.rux-toggle__input:disabled + .rux-toggle__button::after { - background-color: rgb(163, 163, 163) - ; - background-color: var( - --toggleDisabledThumbBackgroundColor, - rgb(163, 163, 163) - ); - border-color: rgb(163, 163, 163); - border-color: var(--toggleDisabledThumbBorderColor, rgb(163, 163, 163)); -} - -.rux-toggle__input:checked + .rux-toggle__button::after { - left: calc(50% + 2px); - border-color: rgb(255, 255, 255); - border-color: var(--toggleSelectedThumbBorderColor, rgb(255, 255, 255)); -} - -.rux-toggle__input:checked:disabled + .rux-toggle__button::after { - border-color: rgb(163, 163, 163) - ; - border-color: var( - --toggleDisabledSelectedThumbBorderColor, - rgb(163, 163, 163) - ); - cursor: not-allowed; -} - -.rux-toggle__input:disabled + .rux-toggle__button::before { - opacity: 0.4; - opacity: var(--disabledOpacity, 0.4); - cursor: not-allowed; -} - -.rux-tree { - display: inline-block; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - width: 100%; - padding: 0; - margin: 0; - - font-size: 1rem; - - background-color: rgb(30, 47, 66); - - background-color: var(--treeBackgroundColor, rgb(30, 47, 66)); - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.rux-tree--compact { - font-size: 0.875rem; -} - -*, -*:before, -*:after { - -webkit-box-sizing: inherit; - box-sizing: inherit; -} - -.rux-tree ul { - padding: 0; - margin: 0; - list-style: none; -} - -.rux-tree li:not(:first-child) { - border-top: 1px solid rgb(40, 63, 88); - border-top: 1px solid var(--treeItemBorderColor, rgb(40, 63, 88)); -} - -/* Parent Elements */ -.rux-tree__parent-container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-line-pack: stretch; - align-content: stretch; - padding: 0 0 0 1.25rem; - margin: 0; -} - -.rux-tree__label { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - padding: 0.5rem; - - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - width: calc(100% - 7px); -} - -.rux-tree--compact .rux-tree__label { - padding: 0.35rem; -} - -.rux-tree__arrow { - position: relative; - cursor: pointer; - width: 7px; - visibility: hidden; -} - -.rux-tree__arrow::after { - content: ""; - - width: 0; - height: 0; - border-style: solid; - border-width: 7px 0 7px 7px; - border-color: transparent transparent transparent - rgb(77, 172, 255); - border-color: transparent transparent transparent - var(--treeAccentColor, rgb(77, 172, 255)); - display: inline-block; -} - -.has-children .rux-tree__arrow { - visibility: visible; -} - -/* Child Elements */ -.rux-tree__children { - width: 100%; - display: none; - padding: 0; - margin: 0; - height: 0; -} - -.rux-tree__child { - padding-left: 3rem; -} - -/* Expanded */ -.expanded .rux-tree__arrow::after { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); -} - -.expanded .rux-tree__children { - display: block; - height: auto; -} - -.rux-tree .selected { - background-color: rgb(0, 68, 107); - background-color: var(--treeSelectedBackgroundColor, rgb(0, 68, 107)); - -webkit-box-shadow: inset 5px 0 var(--treeSelectedAccentColor, rgb(77, 172, 255)); - box-shadow: inset 5px 0 var(--treeSelectedAccentColor, rgb(77, 172, 255)); - - color: rgb(255, 255, 255); - - color: var(--treeSelectedTextColor, rgb(255, 255, 255)); -} - -.rux-tree .selected .rux-tree__arrow::after { - border-color: transparent transparent transparent - var(--treeSelectedAccentColor, rgb(77, 172, 255)); -} diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.min.css b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.min.css deleted file mode 100644 index 3bae25b422..0000000000 --- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/astro.min.css +++ /dev/null @@ -1,168 +0,0 @@ -@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:root{--disabledControlOpacity: 0.4;--disabledControlCursor: not-allowed;--disabledOpacity: 0.4;--disabledCursor: not-allowed;--buttonBorderRadius: 3px;--defaultBorderRadius: 3px;--controlOptionSize: 1.25rem;--controlBorderRadius: 3px;--labelFontSize: 1rem;--smallLabelFontSize: 0.875rem;--largeLabelFontSize: 1.125rem;--fontFamily: "Open Sans", sans-serif;--fontSize: 1rem;--fontSizeXL: 1.125rem;--fontSizeLG: 1rem;--fontSizeMD: 0.875rem;--fontSizeSM: 0.75rem;--fontSizeXS: 0.65rem;--fontFamilyLight: "Open Sans Light", sans-serif;--fontFamilyMono: "Roboto Mono", monospace;--colorBlack: rgb(0, 0, 0);--colorWhite: rgb(255, 255, 255);--colorGray: rgb(204, 204, 204);--colorPrimary: rgb(0, 90, 143);--colorSecondary: rgb(77, 172, 255);--colorTertiary: rgb(40, 63, 88);--colorQuaternary: rgb(207, 214, 227);--statusDarkCritical: rgb(255, 56, 56);--statusDarkSerious: rgb(255, 179, 0);--statusDarkCaution: rgb(252, 232, 58);--statusDarkNormal: rgb(86, 240, 0);--statusDarkStandby: rgb(45, 204, 255);--statusDarkOff: rgb(158, 167, 173);--statusLightCritical: rgb(255, 42, 4);--statusLightSerious: rgb(255, 175, 61);--statusLightCaution: rgb(250, 216, 0);--statusLightNormal: rgb(0, 226, 0);--statusLightStandby: rgb(100, 217, 255);--statusLightOff: rgb(142, 154, 163);--colorTag1: rgb(25, 199, 202);--colorTag2: rgb(120, 112, 208);--colorTag3: rgb(160, 13, 190);--colorTag4: rgb(216, 83, 30);--colorPrimaryLighten5: rgb(51, 123, 165);--colorPrimaryLighten1: rgb(51, 123, 165);--colorPrimaryLighten2: rgb(102, 156, 188);--colorPrimaryLighten3: rgb(153, 189, 210);--colorPrimaryLighten4: rgb(204, 222, 233);--colorPrimaryDarken1: rgb(0, 72, 114);--colorPrimaryDarken2: rgb(0, 54, 86);--colorPrimaryDarken3: rgb(0, 36, 57);--colorPrimaryDarken4: rgb(0, 18, 29);--colorSecondaryLighten1: rgb(113, 189, 255);--colorSecondaryLighten2: rgb(148, 205, 255);--colorSecondaryLighten3: rgb(184, 222, 255);--colorSecondaryLighten4: rgb(219, 238, 255);--colorSecondaryDarken1: rgb(62, 138, 204);--colorSecondaryDarken2: rgb(46, 103, 153);--colorSecondaryDarken3: rgb(31, 69, 102);--colorSecondaryDarken4: rgb(15, 34, 51);--colorTertiaryLighten1: rgb(83, 101, 121);--colorTertiaryLighten2: rgb(126, 140, 155);--colorTertiaryLighten3: rgb(169, 178, 188);--colorTertiaryLighten4: rgb(212, 217, 222);--colorTertiaryDarken1: rgb(32, 50, 70);--colorTertiaryDarken2: rgb(24, 38, 53);--colorTertiaryDarken3: rgb(16, 25, 35);--colorTertiaryDarken4: rgb(8, 13, 18);--colorQuaternaryLighten1: rgb(217, 222, 233);--colorQuaternaryLighten2: rgb(226, 230, 238);--colorQuaternaryLighten3: rgb(236, 239, 244);--colorQuaternaryLighten4: rgb(245, 247, 249);--colorQuaternaryDarken1: rgb(166, 171, 182);--colorQuaternaryDarken2: rgb(124, 128, 136);--colorQuaternaryDarken3: rgb(83, 86, 91);--colorQuaternaryDarken4: rgb(41, 43, 45);--colorCriticalLighten1: rgb(255, 96, 96);--colorCriticalLighten2: rgb(255, 136, 136);--colorCriticalLighten3: rgb(255, 175, 175);--colorCriticalLighten4: rgb(255, 215, 215);--colorCriticalDarken1: rgb(204, 45, 45);--colorCriticalDarken2: rgb(153, 34, 34);--colorCriticalDarken3: rgb(102, 22, 22);--colorCriticalDarken4: rgb(51, 11, 11);--colorSeriousLighten1: rgb(255, 194, 51);--colorSeriousLighten2: rgb(255, 209, 102);--colorSeriousLighten3: rgb(255, 225, 153);--colorSeriousLighten4: rgb(255, 240, 204);--colorSeriousDarken1: rgb(204, 143, 0);--colorSeriousDarken2: rgb(153, 107, 0);--colorSeriousDarken3: rgb(102, 72, 0);--colorSeriousDarken4: rgb(51, 36, 0);--colorCautionLighten1: rgb(253, 237, 97);--colorCautionLighten2: rgb(253, 241, 137);--colorCautionLighten3: rgb(254, 246, 176);--colorCautionLighten4: rgb(254, 250, 216);--colorCautionDarken1: rgb(202, 186, 46);--colorCautionDarken2: rgb(151, 139, 35);--colorCautionDarken3: rgb(101, 93, 23);--colorCautionDarken4: rgb(50, 46, 12);--colorNormalLighten1: rgb(120, 243, 51);--colorNormalLighten2: rgb(154, 246, 102);--colorNormalLighten3: rgb(187, 249, 153);--colorNormalLighten4: rgb(221, 252, 204);--colorNormalDarken1: rgb(69, 192, 0);--colorNormalDarken2: rgb(52, 144, 0);--colorNormalDarken3: rgb(34, 96, 0);--colorNormalDarken4: rgb(17, 48, 0);--colorStandbyLighten1: rgb(87, 214, 255);--colorStandbyLighten2: rgb(129, 224, 255);--colorStandbyLighten3: rgb(171, 235, 255);--colorStandbyLighten4: rgb(213, 245, 255);--colorStandbyDarken1: rgb(36, 163, 204);--colorStandbyDarken2: rgb(27, 122, 153);--colorStandbyDarken3: rgb(18, 82, 102);--colorStandbyDarken4: rgb(9, 41, 51);--colorOffLighten1: rgb(177, 185, 189);--colorOffLighten2: rgb(197, 202, 206);--colorOffLighten3: rgb(216, 220, 222);--colorOffLighten4: rgb(236, 237, 239);--colorOffDarken1: rgb(126, 134, 138);--colorOffDarken2: rgb(95, 100, 104);--colorOffDarken3: rgb(63, 67, 69);--colorOffDarken4: rgb(32, 33, 35);--colorTag1Lighten1: rgb(71, 210, 213);--colorTag1Lighten2: rgb(117, 221, 223);--colorTag1Lighten3: rgb(163, 233, 234);--colorTag1Lighten4: rgb(209, 244, 244);--colorTag1Darken1: rgb(20, 159, 162);--colorTag1Darken2: rgb(15, 119, 121);--colorTag1Darken3: rgb(10, 80, 81);--colorTag1Darken4: rgb(5, 40, 40);--colorTag2Lighten1: rgb(147, 141, 217);--colorTag2Lighten2: rgb(174, 169, 227);--colorTag2Lighten3: rgb(201, 198, 236);--colorTag2Lighten4: rgb(228, 226, 246);--colorTag2Darken1: rgb(96, 90, 166);--colorTag2Darken2: rgb(72, 67, 125);--colorTag2Darken3: rgb(48, 45, 83);--colorTag2Darken4: rgb(24, 22, 42);--colorTag3Lighten1: rgb(179, 61, 203);--colorTag3Lighten2: rgb(198, 110, 216);--colorTag3Lighten3: rgb(217, 158, 229);--colorTag3Lighten4: rgb(236, 207, 242);--colorTag3Darken1: rgb(128, 10, 152);--colorTag3Darken2: rgb(96, 8, 114);--colorTag3Darken3: rgb(64, 5, 76);--colorTag3Darken4: rgb(32, 3, 38);--colorTag4Lighten1: rgb(224, 117, 75);--colorTag4Lighten2: rgb(232, 152, 120);--colorTag4Lighten3: rgb(239, 186, 165);--colorTag4Lighten4: rgb(247, 221, 210);--colorTag4Darken1: rgb(173, 66, 24);--colorTag4Darken2: rgb(130, 50, 18);--colorTag4Darken3: rgb(86, 33, 12);--colorTag4Darken4: rgb(43, 17, 6);--colorWhiteLighten1: rgb(255, 255, 255);--colorWhiteLighten2: rgb(255, 255, 255);--colorWhiteLighten3: rgb(255, 255, 255);--colorWhiteLighten4: rgb(255, 255, 255);--colorWhiteDarken1: rgb(204, 204, 204);--colorWhiteDarken2: rgb(153, 153, 153);--colorWhiteDarken3: rgb(102, 102, 102);--colorWhiteDarken4: rgb(51, 51, 51);--colorBlackLighten1: rgb(51, 51, 51);--colorBlackLighten2: rgb(102, 102, 102);--colorBlackLighten3: rgb(153, 153, 153);--colorBlackLighten4: rgb(204, 204, 204);--colorBlackDarken1: rgb(0, 0, 0);--colorBlackDarken2: rgb(0, 0, 0);--colorBlackDarken3: rgb(0, 0, 0);--colorBlackDarken4: rgb(0, 0, 0);--colorGrayLighten1: rgb(214, 214, 214);--colorGrayLighten2: rgb(224, 224, 224);--colorGrayLighten3: rgb(235, 235, 235);--colorGrayLighten4: rgb(245, 245, 245);--colorGrayDarken1: rgb(163, 163, 163);--colorGrayDarken2: rgb(122, 122, 122);--colorGrayDarken3: rgb(82, 82, 82);--colorGrayDarken4: rgb(41, 41, 41)}@font-face{font-family:"Open Sans";src:url(../fonts/opensans-bold-webfont.woff2) format("woff2"),url(../fonts/opensans-bold-webfont.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Open Sans";src:url(../fonts/opensans-light-webfont.woff2) format("woff2"),url(../fonts/opensans-light-webfont.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Open Sans";src:url(../fonts/opensans-regular-webfont.woff2) format("woff2"),url(../fonts/opensans-regular-webfont.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Roboto Mono";src:url(../fonts/roboto-mono-regular.woff2) format("woff2"),url(../fonts/roboto-mono-regular.woff) format("woff");font-weight:400;font-style:normal}.dark-theme,.light-theme{--fontLowContrastColor: var(--colorGray, rgb(204, 204, 204));--buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--buttonBorderColor: var(--colorPrimary, rgb(0, 90, 143));--buttonBoxShadow: 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);--buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));--buttonHoverBorderColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));--buttonHoverBoxShadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 5px rgba(0, 0, 0, 0.2);--buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143));--buttonOutlineBackgroundColor: transparent;--buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143));--buttonOutlineHoverBorderColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--controlSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--progressDeterminateBarBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - );--sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255));--sliderSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - );--segmentedButtonSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255));--selectBorderColor: var(--colorPrimary, rgb(0, 90, 143));--selectCaret: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");--toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122));--toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204));--toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122));--treeAccentColor: var(--colorSecondary, rgb(77, 172, 255));--cardHeaderTextColor: var(--colorWhite, #fff);--inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--inputTextColor: var(--colorBlack, rgb(14, 11, 11));--inputFocusBorderColor: var(--colorSecondary);--inputInvalidBorderColor: var(--colorCritical, rgb(255, 48, 48));--timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255));--timelineRegionSelectedBackgroundColor: var( - --colorSecondaryDarken1, - rgb(62, 138, 204) - );--timelineRegionSelectedTextColor: var(--fontColor, rgb(255, 255, 255))}.light-theme{--backgroundColor: var(--colorQuaternaryLighten3, rgb(243, 245, 248));--fontColor: var(--colorBlack, rgb(0, 0, 0));--fontInvertedColor: var(--colorWhite, rgb(255, 255, 255));--fontInvertedBackgroundColor: var(--colorBlack, rgb(0, 0, 0));--fontLinkColor: var(--colorSecondaryDarken1, rgb(62, 138, 204));--fontLinkHoverColor: var(--colorSecondary, rgb(77, 172, 255));--wcagCompliance: rgba(0, 0, 0, 0.5);--criticalBorder: #7f1c1c;--colorCritical: var(--statusLightCritical, rgb(255, 42, 4));--colorSerious: var(--statusLightSerious, rgb(255, 175, 61));--colorCaution: var(--statusLightCaution, rgb(250, 216, 0));--colorNormal: var(--statusLightNormal, rgb(0, 226, 0));--colorStandby: var(--statusLightStandby, rgb(100, 217, 255));--colorOff: var(--statusLightOff, rgb(142, 154, 163));--buttonTextColor: var(--colorWhite, rgb(255, 255, 255));--buttonHoverTextColor: var(--colorWhite, rgb(255, 255, 255));--buttonActiveControlTextColor: var(--colorWhite, rgb(255, 255, 255));--buttonDefaultBorderColor: var(--colorWhite, rgb(255, 255, 255));--buttonOutlineTextColor: var(--colorPrimary, rgb(0, 90, 143));--buttonOutlineHoverTextColor: var(--colorPrimary, rgb(0, 90, 143));--buttonOutlineHoverBackgroundColor: rgba(0, 90, 143, 0.05);--controlTextColor: var(--colorWhite, rgb(255, 255, 255));--controlLabelColor: var(--colorBlack, rgb(0, 0, 0));--controlBorderColor: var(--colorPrimary, rgb(0, 90, 143));--controlAccentColor: var(--colorSecondary, rgb(77, 172, 255));--controlSelectedTextColor: var(--colorBlack, rgb(0, 0, 0));--controlSelectedBorderColor: var(--colorPrimary, rgb(0, 90, 143));--controlHoverOutlineBackgroundColor: none;--controlSelectedOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143));--controlSelectedOutlineBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--progressDeterminateTrackBackgroundColor: var( - --colorWhite, - rgb(255, 255, 255) - );--progressDeterminateTrackBorderColor: var( - --colorQuaternary, - rgb(207, 214, 227) - );--progressIndeterminate: url("data:image/svg+xml,%3Csvg width='66' height='66' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='70.883%25' y1='4.637%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%235CB3FF' offset='0%25'/%3E %3Cstop stop-color='%23F6F7F8' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M33 65.5C15.05 65.5.5 50.95.5 33S15.05.5 33 .5 65.5 15.05 65.5 33 50.95 65.5 33 65.5zm0-7c14.083 0 25.5-11.417 25.5-25.5S47.083 7.5 33 7.5 7.5 18.917 7.5 33 18.917 58.5 33 58.5z' stroke='%23D7DDE2' fill='%23FFF'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)' transform='translate(1 1)'/%3E %3Cpath d='M48.564 13c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C53 7.248 51.572 5 49.234 5S45 6.867 45 9.17c0 2.304 1.225 3.83 3.564 3.83z' stroke='%234DACFF' fill='%2352AEFF'/%3E %3C/g%3E %3C/svg%3E ");--sliderTrackBorderColor: var(--colorQuaternary, rgb(207, 214, 227));--sliderTrackBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--segmentedButtonBorderColor: var(--colorPrimary, rgb(0, 90, 143));--segmentedButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--segmentedButtonTextColor: var(--colorPrimary, rgb(0, 90, 143));--segmentedButtonHoverBackgroundColor: rgb(0, 90, 143, 0.05);--segmentedButtonHoverTextColor: var(--colorPrimary, rgb(0, 90, 143));--segmentedButtonSelectedBoxShadow: inset 0 3px 4px rgba(0, 0, 0, 0.1), - inset 0 1px 5px rgba(0, 0, 0, 0.06);-webkit-transition:-webkit-box-shadow .067s ease-out;transition:box-shadow .067s ease-out;transition:box-shadow .067s ease-out,-webkit-box-shadow .067s ease-out;--selectBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--selectTextColor: var(--colorPrimary, rgb(0, 90, 143));--toggleButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--toggleButtonBoxShadow: 0 0 3px rgba(0, 0, 0, 0.25), - 1px 0 2px rgba(0, 0, 0, 0.3);--toggleBaseBackgroundColor: linear-gradient( - to right, - var(--colorNormal) 50%, - var(--colorPrimaryLighten4) 50.1% - );--toggleBaseBorderColor: var(--colorPrimaryLighten1, rgb(0, 90, 143));--toggleBaseTextColor: var(--colorPrimary, rgb(255, 255, 255));--toggleBaseSelectedTextColor: #007300;--toggleButtonSelectedBoxShadow: 0 0 3px rgba(0, 0, 0, 0.3), - -1px 0 2px rgba(0, 0, 0, 0.3);--toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122));--toggleSelectedThumbBorderColor: var( - --colorStandbyDarken2, - rgb(27, 122, 153) - );--toggleSelectedThumbBackgroundColor: var(--colorStandby, rgb(100, 217, 255));--toggleSelectedTrackBorderColor: var( - --colorStandbyDarken2, - rgb(27, 122, 153) - );--toggleSelectedTrackBackgroundColor: var(--colorStandby, rgb(100, 217, 255));--toggleDisabledThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--toggleDisabledSelectedThumbBorderColor: var( - --colorPrimaryLighten3, - rgb(153, 189, 210) - );--pushbuttonBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--pushbuttonBorderColor: var(--colorPrimary, rgb(0, 90, 143));--pushbuttonTextColor: var(--colorPrimary, rgb(0, 90, 143));--pushbuttonSelectedBackgroundColor: var(--colorNormal, rgb(91, 255, 0));--pushbuttonSelectedBorderColor: #3dc100;--pushbuttonSelectedTextColor: #007300;--clockTextColor: var(--colorBlack, rgb(0, 0, 0));--clockBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--clockBorderColor: var(--colorQuaternary, rgb(39, 86, 128));--modalTextColor: var(--colorBlack, rgb(0, 0, 0));--modalBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--modalBorderColor: var(--colorPrimary, rgb(0, 90, 143));--logTextColor: var(--colorBlack);--logBackgroundColor: var(--colorWhite);--logBorderColor: var(--colorQuaternaryLighten2);--logHeaderTextColor: var(--colorBlack);--logHeaderBackgroundColor: var(--colorQuaternary);--logFilterBackgroundColor: var(--colorStandbyLighten3);--logFilterTextColor: var(--colorStandbyDarken2);--treeTextColor: var(--colorBlack, rgb(0, 0, 0));--treeBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--treeBorderColor: var(--colorQuaternary, 207, 214, 227);--treeItemBorderColor: var(--colorQuaternary, 207, 214, 227);--treeHoverBackgroundColor: var(--colorSecondaryLighten4, rgb(219, 238, 255));--treeHoverAccentColor: var(--colorSecondaryLighten3, rgb(184, 222, 255));--treeSelectedBackgroundColor: var( - --colorSecondaryLighten3, - rgb(184, 222, 255) - );--treeSelectedAccentColor: var(--colorSecondaryLighten1, rgb(113, 189, 255));--treeSelectedTextColor: var(--colorBlack, rgb(0, 0, 0));--treeChildrenBackgroundColor: var( - --colorQuaternaryLighten3, - rgb(236, 239, 244) - );--tabTextColor: var(--colorPrimary, rgb(0, 90, 143));--tabBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--tabBorderColor: var(--colorQuaternaryLighten1, rgb(219, 224, 234));--tabHoverTextColor: var(--colorSecondary, rgb(77, 172, 255));--tabSelectedTextColor: var(--colorBlack, rgb(0, 0, 0));--tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255));--cardBackgroundColor: var(--colorQuaternaryLighten2);--cardHeaderBackgroundColor: var(--colorQuaternaryLighten1);--inputBorderColor: var(--colorQuaternaryDarken1, rgb(255, 255, 255));--inputFocusBoxShadow: none;--statusSymbols: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAA81BMVEUAAABaPhVcDwE7CQA6gJIAAAAATQAkTlsATgBcPxYrHAciGgkAAABcPxU0coUARgAxNTgnU2IoV2YzNjoAUgAtYXEzODovZngAUQAAUAAwNDg0dIk2d4sAOgAjKCgAGAAADQA+hJVZPBRcPxb62AAA4gD/rz1VSQBk2f//KgQiSldXDgEATQCOmqNXOxQwNDdoRhiGWx+tHAJiEAFZw+b1KAMAywDlnTb5qjv7rDzpnzdMpcNJn7xFlrGMmKGEj5g4eY82d4xxe4IyboIwaHskT15GTFEA2gAArAAAnAAAfgAAfABg0vddyu5cZGpg0fbOjTE6oyFAAAAAJHRSTlMA7cc4Kgj9+vbBJB4GypVn9vPu5t/Y18O8n4B/ckY6FRMdmtlkVn4PAAACq0lEQVRYw+2YaVPaUBSGqWbTWsK+b9pC6ek1lypGW1T2RUDb//9rmpsm3Nyc1DQfOhMc3k/cyUzmfeY5BxISh+xXzi7eJ/Y5ZyfGu30msPobQQSf/5KEmKZeymlarqQ3g28vJfMZVc3kk1LUYkdfA3OE+/duv3GCaACtskKcKOVWQP0i7FKMiHAcDHAc0L9zxwgQwKeAiAB1jZD1ylwuzdWaEK3u71BTAUaD/nbbH4wA1FpUBVdffLliAnD/DieIBKArZGO2nZgboujiLZIA437XSX8MkIyo4PpG7H9zzQTg/pwgEkBdIU9tT56IIjioATx0PXkAqEVWgAXg/pwgEkBLY/1FAq3lmX+V9RcJVLwHcqWQShUqcpgCLgD35wRRAMpk0/ZlQ8r8BkUY27XvZ/P57N7+OIaiv2QjS+1kG2EKuADcHxOEAzQVYvoBTKI0dwIA2Pw/T8HO9JntAYDk60/pYjIcThaUNkIUcAG4PyYIB9DJuo2yJjrf4FHXyhTSVUmqpmHKTiPfHstZ+vJ4aeXxhWblYAVYAO6PCcIBSmSFAVak5F7Pw4DND6TP2ek8DWyKBpAXClbogvVnBAtaCVaABeD+mCAcIMcmCM9Qzr2esSdoBtU/xyrM7BnKCAULdHLpZEILr2wBEnBhGL86OHc94+M/AmhkiQGWRHOvq7C1Gs/doZdgbh23oAr9UnToAgxp6pUvIrQB8gej9wP1/24ZOP2fAD+jAHAFXAAmwP1jNUK2Ai4AE+D+sVpiRwEXgAhQ/3h9jboKuABMIPaP1w8ZV8AFIAKhf8weJXYKBAGIgPeP2cMcVyAIwARu/7g9TnMFggBM4PSP2wuNR4EgABPc2v1j90rpUSAIwAQG6x+7l3qvAkEAJmD94/e3ileBIAATnJwmDjnkTeU3PTFjExFNx+YAAAAASUVORK5CYII=");--scrollBarThumbBackgroundColor: var(--colorQuaternaryDarken1, #9ba0aa);--scrollBarThumbBackgroundHoverColor: var(--colorQuaternaryDarken2, #676a71);--scrollBarTrackBackgroundColor: transparent;--scrollBarTrackCornerBackgroundColor: var( - --colorQuaternaryLighten4, - #f2f4f7 - );--timelineHeaderBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35));--timelineHeaderTextColor: var(--fontColor, rgb(0, 0, 0));--timelineRulerBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35));--timelineRulerTextColor: var(--fontColor, rgb(0, 0, 0));--timelineTrackLabelBackgroundColor: var( - --colorQuaternaryLighten2, - rgb(40, 63, 88) - );--timelineTrackBackgroundColor: var( - --colorQuaternaryLighten2, - rgb(40, 63, 88) - );--timelineRegionBackgroundColor: var(--colorPrimaryLighten4, rgb(24, 38, 53));--timelineRegionBorderColor: var(--colorPrimaryLighten3);--timelineRegionSelectedBorderColor: var( - --colorSecondaryDarken3, - rgb(77, 172, 255) - );--accordionBorderColor: rgb(207, 214, 227);--accordionContentBackground: rgb(226, 230, 238);--accordionClosedLabelBackground: rgb(255, 255, 255);--accordionOpenLabelBackground: rgb(245, 247, 249);--accordionHoverLabelBackground: rgb(236, 239, 244);--accordionColor: rgb(0, 0, 0)}li.dark-theme,li.light-theme{display:none}.dark-theme{--backgroundColor: var(--colorTertiaryDarken2, rgb(46, 103, 153));--fontColor: var(--colorWhite, rgb(255, 255, 255));--fontInvertedColor: var(--colorBlack, rgb(0, 0, 0));--fontInvertedBackgroundColor: var(--colorWhite, rgb(255, 255, 255));--fontLinkColor: var(--colorSecondary, rgb(77, 172, 255));--fontLinkHoverColor: var(--colorSecondaryLighten1, rgb(113, 189, 255));--wcagCompliance: rgba(255, 255, 255, 0);--criticalBorder: var(--colorCritical, rgb(255, 56, 56));--colorCritical: var(--statusDarkCritical, rgb(255, 42, 4));--colorSerious: var(--statusDarkSerious, rgb(255, 175, 61));--colorCaution: var(--statusDarkCaution, rgb(250, 216, 0));--colorNormal: var(--statusDarkNormal, rgb(0, 226, 0));--colorStandby: var(--statusDarkStandby, rgb(45, 204, 255));--colorOff: var(--statusDarkOff, rgb(142, 154, 163));--buttonTextColor: var(--colorWhite, #fff);--buttonHoverTextColor: var(--colorWhite, #fff);--buttonActiveControlTextColor: var(--colorWhite, #fff);--buttonDefaultBorderColor: var(--colorWhite, #fff);--buttonOutlineTextColor: var(--colorWhite, rgb(255, 255, 255));--buttonOutlineHoverTextColor: var(--colorSecondary, rgb(0, 90, 143));--buttonOutlineHoverBackgroundColor: rgba(30, 47, 66, 0.75);--controlTextColor: var(--colorWhite, #fff);--controlLabelColor: var(--colorWhite, rgb(255, 255, 255));--controlBorderColor: var(--colorSecondaryLighten1, rgb(77, 172, 255));--controlAccentColor: var(--colorSecondaryLighten1, rgb(77, 172, 255));--controlSelectedTextColor: var(--colorWhite, #fff);--controlSelectedBorderColor: var(--colorWhite, rgb(255, 255, 255));--progressDeterminateTrackBackgroundColor: rgba(0, 0, 0, 0.3);--progressDeterminateTrackBorderColor: var( - --colorTertiaryDarken2, - rgb(20, 32, 44) - );--progressIndeterminate: url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E %3Cdefs%3E %3ClinearGradient x1='65.479%25' y1='-8.436%25' x2='50%25' y2='100%25' id='a'%3E %3Cstop stop-color='%234dacff' offset='0%25'/%3E %3Cstop stop-color='%234dacff' stop-opacity='0' offset='100%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm0-6c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26z' fill='rgba(0,0,0,.3)'/%3E %3Cpath d='M51.908 8.236l-2.358 3.245A26.894 26.894 0 0 0 32 5C17.088 5 5 17.088 5 32s12.088 27 27 27c1.129 0 2.242-.07 3.334-.204l4.435 3.222C37.286 62.66 34.683 63 32 63 14.88 63 1 49.12 1 32 1 14.88 14.88 1 32 1c7.579 0 14.522 2.72 19.908 7.236z' fill='url(%23a)'/%3E %3Cpath d='M47.564 12c1.92 0 3.557-.64 4.075-2.367.112-.375.361-.67.361-1.08C52 6.248 50.572 4 48.234 4S44 5.867 44 8.17c0 2.304 1.225 3.83 3.564 3.83z' fill='%234dacff'/%3E %3C/g%3E %3C/svg%3E ");--sliderTrackBorderColor: transparent;--sliderTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204));--sliderHoverThumbBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--segmentedButtonBorderColor: var(--colorTertiaryDarken1, rgb(30, 47, 66));--segmentedButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--segmentedButtonTextColor: var(--colorWhite, rgb(255, 255, 255));--segmentedButtonHoverBackgroundColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--segmentedButtonHoverTextColor: var(--colorWhite, rgb(255, 255, 255));--segmentedButtonSelectedBoxShadow: inset 0 2px 4px rgba(0, 0, 0, 0.14), - inset 0 3px 4px rgba(0, 0, 0, 0.12), inset 0 1px 5px rgba(0, 0, 0, 0.2);--selectBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--selectTextColor: var(--colorWhite, rgb(255, 255, 255));--toggleButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--toggleBaseBackgroundColor: var(--colorBlack, #000);--toggleBaseBorderColor: var(--colorBlack, rgb(0, 0, 0));--toggleBaseTextColor: var(--colorWhite, rgb(255, 255, 255));--toggleBaseSelectedTextColor: var(--colorNormal, rgb(86, 240, 0));--toggleThumbBorderColor: #fff;--toggleSelectedThumbBorderColor: #fff;--toggleSelectedTrackBackgroundColor: var( - --colorSecondary, - rgb(77, 172, 255) - );--toggleSelectedTrackBorderColor: var( - --colorSecondaryDarken2, - rgb(46, 103, 153) - );--toggleDisabledThumbBackgroundColor: var( - --colorGrayDarken1, - rgb(163, 163, 163) - );--toggleDisabledSelectedThumbBorderColor: var( - --colorGrayDarken1, - rgb(122, 122, 122) - );--pushbuttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));--pushbuttonBorderColor: var(--colorBlack, rgb(0, 0, 0));--pushbuttonTextColor: var(--colorWhite, rgb(255, 255, 255));--pushbuttonSelectedBackgroundColor: var(--colorBlack, rgb(0, 0, 0));--pushbuttonSelectedBorderColor: var(--colorBlack, rgb(0, 0, 0));--pushbuttonSelectedTextColor: var(--colorNormal, rgb(86, 240, 0));--clockTextColor: var(--colorWhite, rgb(255, 255, 255));--clockBackgroundColor: var(--colorTertiaryDarken2, rgb(20, 32, 44));--clockBorderColor: var(--colorTertiary, rgb(39, 86, 128));--logTextColor: var(--colorWhite, rgb(255, 255, 255));--logBackgroundColor: var(--colorTertiaryDarken1);--logBorderColor: var(--colorTertiary);--logHeaderTextColor: var(--colorWhiteDarken2);--logHeaderBackgroundColor: var(--colorTertiaryDarken2);--logFilterBackgroundColor: var(--colorStandbyLighten1);--logFilterTextColor: var(--colorStandbyDarken3);--treeTextColor: var(--colorWhite, rgb(255, 255, 255));--treeBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));--treeBorderColor: var(--colorSecondaryDarken2, rgb(46, 103, 153));--treeItemBorderColor: var(--colorTertiaryDarken2, rgb(24, 38, 53));--treeHoverBackgroundColor: var(--colorPrimaryDarken2, rgb(0, 54, 86));--treeHoverAccentColor: var(--colorPrimaryLighten1, rgb(0, 72, 114));--treeSelectedBackgroundColor: var(--colorPrimaryDarken1, rgb(0, 72, 114));--treeSelectedAccentColor: var(--colorSecondary, rgb(77, 172, 255));--treeSelectedTextColor: var(--colorWhite, rgb(255, 255, 255));--treeChildrenBackgroundColor: var(--colorTertiaryDarken2, rgb(24, 38, 53));--tabTextColor: var(--colorSecondary, rgb(77, 172, 255));--tabBackgroundColor: var(--colorTertiaryDarken1, rgb(30, 47, 66));--tabBorderColor: var(--colorTertiaryDarken2, rgb(20, 32, 44));--tabSelectedTextColor: var(--colorWhite, rgb(255, 255, 255));--tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 355));--cardBackgroundColor: var(--colorTertiaryDarken1);--cardHeaderBackgroundColor: var(--colorTertiaryDarken3);--inputBorderColor: transparent;--inputFocusBoxShadow: inset 0 0 0 1px white, - inset 0 0 0 2px var(--colorPrimary);--statusSymbols: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAAgVBMVEUAAAD/tQv/swL/OTn/PDzftl9W8QBW8AAtzP8v0P9Z9gD/tAP/uQb/tAItzf8tzf+eqK2ep60uzP9X8QCfqK4uzf8uzf9X8QAuzP9X8ACeqK4vzP9Y8QAuzv9Y8gCeqq4wz/8xzv9A1f9Y8QD/tAP86DpW8AD/swL/ODgtzP+ep63tgXPUAAAAJXRSTlMAGNfAQAv98/IdG8Io52zz8+DZ2dC9trabm4F+a05OQjAaDG6dAJcYcwAAAfdJREFUWMPtmNlygkAQRScyrBp3QTZFNBj8/w9MCGI3dBOHMg9jyvOmVFnn1HUSULx4LibjN/HMTN7Po2cu+PY/cwUfPYg2XhKsbHsVJJ5gcaf+cjZb+lN3qJjxyWIw/lAwNMALreKKFTIJh215Y3sYFiD5AEn9oWBowM4uEPau65A6JcJJ/2ACg/pDwdCAo1W0sI6ixbTsMH18Akn9oWBgwK7xh4LWBmlJSB+dwCD+pEA5wLMLgo3OwcGpvzhxludZfH1Bz4EZrefzdWSqTSCJPylQDggLhhA+oD6/G7d+5W7qk9yV3C8uPyz2KhMYxJ8UKAd4Fhdg3SZwa3/4wLrA7fhfbuwVJpDEnxQoByQFS9I6wQ7ydR16js0FBCzMuxMY1J8WqAYEfEDQXPcr3RjbxNU7vsBEF0R0dwJJ/LkCxYAVH7Bqri8r3QzbZNU7S4FZ44B1/ymgA4zPfZwUA2w+wG6uzyrdHMvk1TszgZnjgLmgyL4T8Dbq8R+bWgUIgw4ABby/Vl8hIckAUMD7a3WIYQIYgC0Af73+jOIJpKAF1F+vf2QwAQxAC7C/ZrcSeAIpegvAX7ObOZgABiAF2F+322mYAAagBeCv2wMNTEAGIAWVv3aPlDABDMAW1P7aPdQjDBiALaj89ftZBSGl+LXgZIoXL/4VXyptNwzuHR/QAAAAAElFTkSuQmCC");--scrollBarThumbBackgroundColor: var( - --colorSecondaryDarken2, - rgb(46, 103, 153) - );--scrollBarThumbBackgroundHoverColor: var( - --colorSecondaryDarken1, - rgb(58, 129, 191) - );--scrollBarTrackBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));--scrollBarTrackCornerBackgroundColor: var( - --colorTertiaryDarken1, - rgb(32, 50, 70) - );--timelineHeaderBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));--timelineHeaderTextColor: var(--fontColor, rgb(255, 255, 255));--timelineRulerBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));--timelineRulerTextColor: var(--fontColor, rgb(255, 255, 255));--timelineTrackLabelBackgroundColor: var(--colorTertiary, rgb(40, 63, 88));--timelineTrackBackgroundColor: var(--colorTertiary, rgb(40, 63, 88));--timelineRegionBackgroundColor: var(--colorPrimaryDarken3, rgb(0, 36, 57));--timelineRegionBorderColor: var(--colorPrimary, rgb(0, 90, 143));--timelineRegionSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255));--accordionBorderColor: rgb(40, 63, 88);--accordionContentBackground: rgb(20, 32, 44);--accordionClosedLabelBackground: rgb(32, 50, 70);--accordionOpenLabelBackground: rgb(40, 63, 88);--accordionHoverLabelBackground: rgb(46, 103, 153);--accordionColor: rgb(255, 255, 255)}h1,h2,h3{font-family:"Open Sans",sans-serif;font-weight:300;color:#fff;color:var(--fontColor, rgb(255, 255, 255));margin:0 0 .5rem}.h1,h1{font-size:2.375rem}.h2,h2{font-size:1.75rem}.h3,h3{font-size:1.375rem}body,p{color:#fff;color:var(--fontColor, rgb(255, 255, 255))}p{margin:0 0 1rem}a{color:#4dacff;color:var(--fontLinkColor, rgb(77, 172, 255));text-decoration:none}a:hover{color:#71bdff;color:var(--fontLinkHoverColor, rgb(113, 189, 255))}dt{font-weight:600;margin:0}dd{margin:0 0 .5rem}.light{font-weight:300}.regular{font-weight:500}.semi-bold{font-weight:600}.bold{font-weight:700}.italic{font-style:italic}.condensed{font-stretch:condensed}.monospace{font-family:"Roboto Mono",sans-serif}.invert,.inverted{background-color:#fff;background-color:var(--fontInvertedBackgroundColor, rgb(255, 255, 255));color:#000;color:var(--fontInvertedColor, rgb(0, 0, 0));padding:0 .25rem}.low-contrast{opacity:.2}.xl{font-size:1.125rem;font-size:var(--fontSizeXL, 1.125rem)}.lg{font-size:1rem;font-size:var(--fontSize, 1rem)}.md{font-size:.875rem;font-size:var(--fontSizeMD, 0.875rem)}.sm{font-size:.75rem;font-size:var(--fontSizeSM, 0.75rem)}.xs{font-size:.65rem;font-size:var(--fontSizeXS, 0.65rem)}html{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}body{margin:0;padding:0;font-family:"Open Sans",sans-serif;font-family:var(--fontFamily, "Open Sans", sans-serif);font-size:1rem;background-color:#182635;background-color:var(--backgroundColor, rgb(24, 38, 53));scrollbar-color:#3a81bf #203246;scrollbar-color:var(--scrollBarThumbBackgroundColor, rgb(58, 129, 191)) var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70))}label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::-webkit-scrollbar{width:18px;height:18px;background-color:transparent}::-webkit-scrollbar-thumb{background-color:#2e6799;background-color:var(--scrollBarThumbBackgroundColor, rgb(46, 103, 153));border-radius:10px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:vertical{border-left-width:4px}::-webkit-scrollbar-thumb:horizontal{border-top-width:4px}::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-thumb:hover{background-color:#3a81bf;background-color:var(--scrollBarThumbBackgroundHoverColor, - rgb(58, 129, 191) - )}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background-color:#203246;background-color:var(--scrollBarTrackCornerBackgroundColor, rgb(32, 50, 70))}::-webkit-scrollbar-track:vertical{-webkit-box-shadow:inset 2px 0 4px rgba(0,0,0,.15);box-shadow:inset 2px 0 4px rgba(0,0,0,.15)}::-webkit-scrollbar-track:horizontal{-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15);box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}.rux-button-group{display:-webkit-box;display:-ms-flexbox;display:flex}.rux-button-group .rux-button:not(:last-child){margin-right:.625rem}.rux-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0;padding:0 1rem;height:2.125rem;min-width:2.25rem;border-radius:3px;border-radius:var(--buttonBorderRadius, 3px);color:#fff;color:var(--buttonTextColor, rgb(255, 255, 255));font-family:"Open Sans",sans-serif;font-family:var(--fontFamily, "Open Sans", sans-serif);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rux-button:disabled{opacity:.4;opacity:var(--disabledOpacity, 0.4);cursor:not-allowed;cursor:var(--disabledCursor, not-allowed)}.rux-button:focus{outline:0}.rux-button:not(.rux-button--outline){border:1px solid #005a8f;border:1px solid var(--buttonBackgroundColor, rgb(0, 90, 143));background-color:#005a8f;background-color:var(--buttonBorderColor, rgb(0, 90, 143));-webkit-box-shadow:0 2px 4px rgba(0,0,0,.14),0 3px 4px rgba(0,0,0,.12),0 1px 5px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.14),0 3px 4px rgba(0,0,0,.12),0 1px 5px rgba(0,0,0,.2);-webkit-box-shadow:var(--controlBoxShadow, - 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), - 0 1px 5px rgba(0, 0, 0, 0.2) - );box-shadow:var(--controlBoxShadow, - 0 2px 4px rgba(0, 0, 0, 0.14), - 0 3px 4px rgba(0, 0, 0, 0.12), - 0 1px 5px rgba(0, 0, 0, 0.2) - )}.rux-button--outline{color:#fff;color:var(--buttonOutlineTextColor, rgb(255, 255, 255));background-color:transparent;background-color:var(--buttonOutlineBackgroundColor, transparent);border:1px solid #005a8f;border:1px solid var(--buttonOutlineBorderColor, rgb(0, 90, 143))}.rux-button:active:not([hover]):not([disabled]){border-color:#005a8f!important;border-color:var(--buttonActiveBorderColor, rgb(0, 90, 143))!important;background-color:#005a8f!important;background-color:var(--buttonActiveBackgroundColor, - rgb(0, 90, 143) - )!important}.rux-button:active:not([hover]):not([disabled]):not(.rux-button--outline){-webkit-box-shadow:0 2px 2px rgba(0,0,0,.14)!important;box-shadow:0 2px 2px rgba(0,0,0,.14)!important}.rux-button:hover:not([active]):not([disabled]):not(.rux-button--outline){border-color:#3a81bf;border-color:var(--buttonHoverBorderColor, rgb(58, 129, 191));background-color:#3a81bf;background-color:var(--buttonHoverBackgroundColor, rgb(58, 129, 191));-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 5px rgba(0,0,0,.2);box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 5px rgba(0,0,0,.2);-webkit-box-shadow:var(--buttonHoverBoxShadow, - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), - 0 4px 5px rgba(0, 0, 0, 0.2) - );box-shadow:var(--buttonHoverBoxShadow, - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 3px rgba(0, 0, 0, 0.12), - 0 4px 5px rgba(0, 0, 0, 0.2) - )}.rux-button--outline:hover:not([disabled]){color:#fff;color:var(--buttonOutlineTextColor, rgb(255, 255, 255));background-color:rgba(30,47,66,.75);background-color:var(--buttonOutlineHoverBackgroundColor, - rgba(30, 47, 66, 0.75) - );border-color:#3a81bf;border-color:var(--buttonOutlineHoverBorderColor, rgb(58, 129, 191))}.rux-button--small{font-size:.875rem;font-size:var(--smallLabelFontSize, 0.875rem);height:1.625rem;padding:0 1rem;line-height:1}.rux-button--large{font-size:1.125rem;font-size:var(--largeLabelFontSize, 1.125rem);height:2.875rem;padding:0 1.5rem}.rux-button__icon{height:1.5rem;width:1.5rem;margin-right:.625rem;margin-left:-.625rem}.rux-button--icon-only .rux-button__icon{margin-left:-.625rem;margin-right:-.625rem}.rux-button--large.rux-button--icon-only .rux-button__icon{margin-left:-1rem;margin-right:-1rem}.rux-button--small .rux-button__icon{height:.875rem;width:.875rem}.rux-button--large .rux-button__icon{height:1.75rem;width:1.75rem;margin-left:-.8rem}.rux-button__icon .rux-icon{height:auto;width:100%;fill:#fff;fill:var(--buttonTextColor, rgb(255, 255, 255))}.rux-button.rux-button--critical,.rux-button.rux-button--critical:active:not([hover]):not([disabled]):not(.rux-button--outline){background-color:#cc2d2d!important;background-color:var(--colorCriticalDarken1, rgb(191, 36, 36))!important;border-color:#cc2d2d!important;border-color:var(--colorCriticalDarken1, rgb(191, 36, 36))!important}.rux-button.rux-button--critical:hover:not([active]):not([disabled]){background-color:#ff3030;background-color:var(--colorCritical, rgb(255, 48, 48));border-color:#ff3030;border-color:var(--colorCritical, rgb(255, 48, 48))}.rux-card{background-color:#1e2f42;background-color:var(--cardBackgroundColor, rgb(30, 47, 66));padding:1px;overflow:hidden}.rux-card__header{color:#fff;color:var(--cardHeaderTextColor, rgb(255, 255, 255));background-color:#14202c;background-color:var(--cardHeaderBackgroundColor, rgb(20, 32, 44));margin:0;padding:.325rem .625rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.rux-card__header h1{padding:0;margin:0;font-size:1.75rem}.rux-card__content{padding:.625rem}.rux-checkbox,.rux-radio-button,.satcom-checkbox,.satcom-radio-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 0 1rem;line-height:1.2}.rux-checkbox input[type=checkbox],.rux-radio-button input[type=radio],.satcom-checkbox input[type=checkbox],.satcom-radio-button input[type=radio]{-webkit-appearance:none;display:none}.rux-checkbox input[type=checkbox]+label,.rux-radio-button input[type=radio]+label,.satcom-checkbox input[type=checkbox]+label,.satcom-radio-button input[type=radio]+label{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;color:#fff;color:var(--controlLabelColor, rgb(255, 255, 255))}.rux-checkbox input[type=checkbox]+label::before,.rux-radio-button input[type=radio]+label::before,.satcom-checkbox input[type=checkbox]+label::before,.satcom-radio-button input[type=radio]+label::before{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;content:"";height:1.25rem;height:var(--controlOptionSize, 1.25rem);width:1.25rem;width:var(--controlOptionSize, 1.25rem);margin:0 .625rem 0 0;border:1px solid #7ac1ff;border:1px solid var(--controlBorderColor, rgb(122, 193, 255))}.rux-checkbox input[type=checkbox]+label::before,.satcom-checkbox input[type=checkbox]+label::before{border-radius:2px}.rux-radio-button input[type=radio]+label::before,.satcom-radio-button input[type=radio]+label::before{border-radius:100%;background-color:transparent}.rux-checkbox input[type=checkbox]:checked+label::before,.rux-radio-button input[type=radio]:checked+label::before,.satcom-checkbox input[type=checkbox]:checked+label::before,.satcom-radio-button input[type=radio]:checked+label::before{background-color:#3a81bf;background-color:var(--controlSelectedOutlineBackgroundColor, - rgb(58, 129, 191) - );border-color:#fff;border-color:var(--controlSelectedOutlineBorderColor, rgb(255, 255, 255))}.rux-checkbox input[type=checkbox]:checked+label::after,.rux-radio-button input[type=radio]:checked+label::after,.satcom-checkbox input[type=checkbox]:checked+label::after,.satcom-radio-button input[type=radio]:checked+label::after{position:absolute;display:block;content:""}.rux-checkbox input[type=checkbox]:checked+label::after,.satcom-checkbox input[type=checkbox]:checked+label::after{height:6px;width:12px;top:5px;left:4px;border-right:2px solid #fff;border-right:2px solid var(--controlTextColor, rgb(255, 255, 255));border-top:2px solid #fff;border-top:2px solid var(--controlTextColor, rgb(255, 255, 255));-webkit-transform:rotate(125deg);transform:rotate(125deg)}.rux-radio-button input[type=radio]:checked+label::after,.satcom-radio-button input[type=radio]:checked+label::after{top:5px;left:5px;height:10px;width:10px;border-radius:100%;background-color:#fff;background-color:var(--controlTextColor, rgb(255, 255, 255))}.rux-checkbox input[type=checkbox]:disabled+label,.rux-radio-button input[type=radio]:disabled+label,.satcom-checkbox input[type=checkbox]:disabled+label,.satcom-radio-button input[type=radio]:disabled+label{cursor:not-allowed;cursor:var(--disabledCursor, not-allowed);opacity:.4;opacity:var(--disabledOpacity, 0.4)}.rux-select{-webkit-appearance:none;-moz-appearance:none;border:1px solid #005a8f;border:1px solid var(--selectBorderColor, rgb(0, 90, 143));border-radius:3px;border-radius:var(--buttonBorderRadius, 3px);color:#fff;color:var(--selectTextColor, rgb(255, 255, 255));font-family:"Open Sans",sans-serif;font-size:.875rem;line-height:1.5;height:2rem;padding:0 1.2rem 0 .625rem;background-color:#005a8f;background-color:var(--selectBackgroundColor, rgb(0, 90, 143));background-image:url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E);background-image:var(--selectCaret, - url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%220%200%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2049.3%20%2851167%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22path-1%22%20points%3D%225%200%2010%205%200%205%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Caret%22%20fill%3D%22%23FFFFFF%22%20transform%3D%22translate%285.000000%2C%202.500000%29%20scale%281%2C%20-1%29%20translate%28-5.000000%2C%20-2.500000%29%20%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") - );background-position:center right .625rem;background-repeat:no-repeat}.rux-select .rux-select optgroup,.rux-select option{color:#000;background-color:#fff}.rux-select:disabled{opacity:.4;cursor:not-allowed}.rux-select::-ms-expand{display:none}.rux-select:focus::-ms-value{background:0 0}.rux-form-element{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.rux-form-element label{color:#fff}:root{--padding: 0.5rem;--paddingLeft: 0.5rem;--paddingRight: 0.5rem;--paddingTop: 0.25rem;--paddingBottom: 0.25rem}.rux-form-field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;font-family:"Open Sans",sans-serif;font-family:var(--fontFamilty, "Open Sans", sans-serif);font-size:1rem;font-size:var(--fontSize, 1rem);color:#fff;color:var(--fontColor, rgb(255, 255, 255))}.rux-form-field input:required+label::after{content:"*";margin-left:.25rem}.rux-form-field__label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin:0 0 .15rem;width:100%;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;color:var(--fontColor, rgb(255, 255, 255));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rux-form-field input,.rux-form-field textarea{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%;padding:.5rem;border:1px solid transparent;border:1px solid var(--inputBorderColor, transparent);border-radius:3px;font-size:1rem;font-size:var(--fontSize, 1rem);color:#000;color:var(--inputTextColor, rgb(0, 0, 0))}.rux-form-field input{height:2.25rem}.rux-form-field textarea{min-height:4.25rem;font-family:"Open Sans",sans-serif;font-family:var(--fontFamily, "Open Sans", sans-serif)}.rux-form-field input[type=date]::-webkit-calendar-picker-indicator,.rux-form-field input[type=date]::-webkit-inner-spin-button,.rux-form-field input[type=date]::-webkit-outer-spin-button,.rux-form-field input[type=number]::-webkit-inner-spin-button,.rux-form-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;display:none}.rux-form-field input:invalid{border:1px solid var(--inputInvalidBorderColor);background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FF3030%22%20fill-rule%3D%22evenodd%22%20d%3D%22M64.031%205c8.461%200%2068.88%20107.243%2063.648%20114.184-5.232%206.942-120.805%205.477-127.212%200C-5.941%20113.708%2055.57%205%2064.03%205zm3.45%2075.894l1.822-34.893H56.946l1.82%2034.893h8.715zM56.803%2093.108c0%201.929.547%203.423%201.643%204.483%201.095%201.06%202.642%201.589%204.642%201.589%201.953%200%203.477-.542%204.572-1.625%201.095-1.084%201.643-2.566%201.643-4.447%200-1.952-.542-3.452-1.625-4.5-1.084-1.047-2.613-1.571-4.59-1.571-2.047%200-3.607.512-4.678%201.536-1.072%201.023-1.607%202.535-1.607%204.535z%22%2F%3E%0A%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:1.125rem;background-position:center right .5rem}.rux-form-field input:not([type=search]):focus,.rux-form-field input:not([type=search]):invalid:focus{border:1px solid var(--inputFocusBorderColor)}.rux-form-field input::-moz-selection{background-color:#b8deff;background-color:var(--colorSecondaryLighten3)}.rux-form-field input::selection{background-color:#b8deff;background-color:var(--colorSecondaryLighten3)}.rux-form-field__validation-message{display:none;position:absolute;max-width:16rem;background-color:var(--colorCritical);width:100%;padding:.25rem;right:0;font-size:.875rem;font-size:var(--fontSizeMD)}.rux-form-field input:invalid .rux-form-field__validation-message{display:block}.rux-form-field input:disabled{opacity:.4;opacity:var(--disabledOpacity, 0.4);cursor:not-allowed;cursor:var(--disabledCursor, not-allowed)}.rux-form-field--large,.rux-form-field--large input,.rux-form-field--large label,.rux-form-field--large textarea{font-size:1.125rem;font-size:var(--fontSizeXL, 1.125rem)}.rux-form-field--small,.rux-form-field--small input,.rux-form-field--small label,.rux-form-field--small textarea{font-size:.875rem;font-size:var(--fontSizeMD, 0.875rem)}.rux-form-field--large input,.rux-form-field--large textarea{padding:.5rem}.rux-form-field--large input{height:2.5rem}.rux-form-field--small input,.rux-form-field--small textarea{padding:.3rem}.rux-form-field--small input{height:1.625rem}.rux-form-field--large input:invalid{background-size:1.375rem;background-position:center right .5rem;padding:.5rem 1.875rem .5rem .5rem}.rux-form-field input:focus .rux-form-field input:invalid:focus{-webkit-box-shadow:inset 0 0 3px #ccc;box-shadow:inset 0 0 3px #ccc;-webkit-box-shadow:inset 0 0 3px var(--colorGray);box-shadow:inset 0 0 3px var(--colorGray);border-color:var(--inputFocusBorderColor);outline:0;color:#000}.rux-form-field input[type=search]::-webkit-search-decoration{-webkit-appearance:textfield}.rux-form-field input[type=search]{-webkit-appearance:none;-moz-appearance:none;padding:.5rem .5rem .5rem 1.75rem;background:no-repeat center left .3rem/1.1em url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") #fff;background:no-repeat center left .3rem/1.1em url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg fill='%230973C1' fill-rule='evenodd'%3E%3Cpath d='M9 8c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-4.707.293l1.414 1.414-4 4-1.414-1.414'/%3E%3Cpath d='M6.33 5.67l1 1-3.66 3.66-1-1'/%3E%3C/g%3E%3C/svg%3E") var(--inputBackgroundColor, rgb(255, 255, 255))}.rux-form-field--large input[type=search]{padding:.5rem 0 .5rem 2rem}.rux-form-field--small input[type=search]{padding:.3rem 0 .3rem 1.5rem}.rux-form-field input[type=search]::-webkit-search-cancel-button{position:relative;-webkit-appearance:none;width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%0A%20%20%3Cpath%20fill%3D%22rgb(0%2C%2090%2C%20143)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M69.028%2064l22.628%2022.627-5.029%205.029L64%2069.028%2041.373%2091.656l-5.029-5.029L58.972%2064%2036.344%2041.373l5.029-5.029L64%2058.972l22.627-22.628%205.029%205.029L69.028%2064z%22%2F%3E%0A%3C%2Fsvg%3E")}.rux-form-field input[type=search]::-ms-clear{position:relative;right:.25rem;width:20px;height:20px;background-color:red}.rux-advanced-status{position:relative;margin:0 .75rem;line-height:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rux-advanced-status__icon-group{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:6.25rem;min-width:4rem}.rux-advanced-status__status-icon{margin:0 2px 0 auto;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.rux-advanced-status__icon{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin:0 auto}.rux-advanced-status__icon::before{content:"";display:block;position:relative;margin-bottom:-12px;margin-left:-18px!important;height:16px;width:16px}.rux-advanced-status__badge:empty{display:none}.rux-advanced-status__badge,.rux-advanced-status__label{text-align:center;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rux-advanced-status__badge{display:block;z-index:2;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;position:absolute;bottom:-.75rem;right:-.5rem;border:1px solid rgba(255,255,255,.6);border-radius:3px;padding:.65rem .25rem;background-color:#000;font-size:.775rem}.rux-advanced-status__label{color:var(--fontColor, rgb(255, 255, 255));font-size:.875rem;line-height:1.2;margin-top:1rem;width:100%;max-width:6.25rem}.rux-advanced-status__label__sub-label{font-size:.65em;color:rgba(255,255,255,.6);display:block}.rux-clock{display:-webkit-box;display:-ms-flexbox;display:flex;color:#fff;color:var(--clockTextColor, rgb(255, 255, 255));font-size:1.15rem}.rux-clock__segment,.rux-clock__segment__value{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.rux-clock__segment{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.rux-clock__segment__value{font-family:"Roboto Mono",monospace;font-family:var(--fontFamilyMono, "Roboto Mono", monospace);font-weight:700;border:1px solid #275680;border:1px solid var(--clockBorderColor, rgb(39, 86, 128));background-color:#14202c;background-color:var(--clockBackgroundColor, rgb(20, 32, 44));margin-bottom:.25rem;white-space:nowrap;overflow-y:hidden;text-overflow:ellipsis}.rux-clock--small .rux-clock__segment__value{height:2.75rem;padding:0 .75rem;font-size:1.15rem;font-weight:500}.rux-clock__day-of-the-year .rux-clock__segment__value{border-right:none}.rux-clock:not(.rux-clock--small) .rux-clock__segment__value{font-size:1.75rem;height:2.75rem;padding:0 .75rem}.rux-clock__segment__label{font-size:.875rem}.rux-clock__aos{margin-left:1em}.rux-clock__los{margin-left:.5em}.rux-icon,i.rux-icon{width:2.8rem;height:2.8rem}.rux-icon{margin:0 auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;fill:#4dacff;fill:var(--colorSecondary, rgb(77, 172, 255))}i.rux-icon{display:block;color:#4dacff;color:var(--colorSecondary, rgb(77, 172, 255))}.rux-log{display:block;font-size:.875rem;background-color:#1e2f42;background-color:var(--logBackgroundColor, rgb(30, 47, 66))}.rux-log-header{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem;background-color:#14202c;background-color:var(--logHeaderBackgroundColor, rgb(20, 32, 44))}.rux-log-header-title{margin:0 0 1rem;display:none;font-size:1.25rem;font-weight:300}.rux-log__header-labels{width:100%;color:#fff;color:var(--logHeaderTextColor, rgb(255, 255, 255))}.rux-log__events,.rux-log__header-labels{padding:0;margin:0;list-style:none}.rux-log__header-labels{display:-webkit-box;display:-ms-flexbox;display:flex}.rux-log__header-labels,.rux-log__log-event{-ms-flex-line-pack:start;align-content:flex-start}.rux-log__events{height:100%;overflow-y:scroll}.log-event__timestamp{-ms-flex-negative:0;flex-shrink:0;text-align:right;width:5rem}.rux-log__log-event{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid #283f58;border-bottom:1px solid var(--logBorderColor, rgb(40, 63, 88))}.rux-log__log-event:last-child{border-bottom:none}.rux-log__header-labels li:not(:first-child),.rux-log__log-event>*{margin:0 .5rem}.rux-log__header-labels li:first-child{margin:0 .5rem 0 0}.rux-log__log-event .log-event__timestamp{font-family:"Roboto Mono",monospace;font-family:var(--fontFamilyMono, "Roboto Mono", monospace)}.log-event__status{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;text-align:center;width:1rem;overflow:hidden}.log-event__message{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:left}.log-header__message{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rux-log__filter-enabled{position:-webkit-sticky;position:sticky;top:0;left:0;-ms-flex-line-pack:center;align-content:center;color:#000;color:var(--logFilterTextColor, rgb(0, 0, 0));background-color:#c0f0ff;background-color:var(--logFilterBackgroundColor, rgb(192, 240, 255));padding:.5rem}.rux-log__filter-enabled .rux-icon{margin-right:.5rem}.rux-modal{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:#000;background-color:var(--modalBackgroundColor, rgb(0, 0, 0));width:28rem;height:13.5rem;border:2px solid #005a8f;border:2px solid var(--modalBorderColor, rgb(0, 90, 143));border-radius:4px;margin:auto;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 5px 0 rgba(0,0,0,.2);box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 3px rgba(0,0,0,.12),0 4px 5px 0 rgba(0,0,0,.2)}.rux-modal,.rux-modal__content,.rux-modal__titlebar{display:-webkit-box;display:-ms-flexbox;display:flex}.rux-modal__titlebar{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:2rem;background-color:#005a8f;background-color:var(--modalBorderColor, rgb(0, 90, 143));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:move;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.rux-modal__titlebar h1{font-size:1rem;font-weight:600;padding:0;margin:0;line-height:1.2;color:#fff!important}.rux-modal__content{height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:1rem;color:#fff;color:var(--fontColor, rgb(255, 255, 255))}.rux-button-group{margin-left:auto;-ms-flex-item-align:end;align-self:flex-end}.rux-modal__message{margin:.5rem 1.875rem 2.5rem}.rux-modal .rux-button{-webkit-box-shadow:none!important;box-shadow:none!important}.rux-notification{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;top:-4.25rem;left:0;height:4.25rem;width:100%;padding:.7rem 1.25rem;background-color:#57d6ff;background-color:var(--colorStandbyLighten1, rgb(160, 232, 255));-webkit-transition:all .5s ease;transition:all .5s ease;-webkit-box-sizing:border-box;box-sizing:border-box;color:#000;color:var(--colorBlack, rgb(0, 0, 0))}.rux-notification::after{position:relative;display:block;content:"";height:60px}.notification-buffer.show,.visible{margin-top:0}.show .rux-notification-container{top:0}.show .rux-notification-buffer{height:60px}.rux-notification_close-button{border:3px solid #24a3cc;border:3px solid var(--colorStandbyDarken1, rgb(96, 168, 191));color:#24a3cc;color:var(--colorStandbyDarken1, rgb(96, 168, 191));background-color:transparent;height:2.2rem;width:2.2rem;border-radius:50%;position:relative;margin-left:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.rux-notification_close-button::after,.rux-notification_close-button::before{display:block;position:absolute;height:2px;width:66%;margin-left:-32%;margin-top:-1px;content:"";background-color:#24a3cc;background-color:var(--colorStandbyDarken1, rgb(96, 168, 191))}@supports (--css: variables){.rux-notification_close-button::after,.rux-notification_close-button::before{margin:0}}.rux-notification_close-button::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.rux-notification_close-button::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rux-notification--critical{background-color:#ff6060;background-color:var(--colorCriticalLighten1, rgb(255, 100, 100))}.rux-notification--critical .rux-notification_close-button{border-color:#cc2d2d;border-color:var(--colorCriticalDarken1, rgb(191, 36, 36))}.rux-notification--critical .rux-notification_close-button::after,.rux-notification--critical .rux-notification_close-button::before{background-color:#cc2d2d;background-color:var(--colorCriticalDarken1, rgb(191, 36, 36))}.rux-notification--caution{background-color:#fded61;background-color:var(--colorCautionLighten1, rgb(250, 237, 86))}.rux-notification--caution .rux-notification_close-button{border-color:#caba2e;border-color:var(--colorCautionDarken1, rgb(186, 173, 22))}.rux-notification--caution .rux-notification_close-button::after,.rux-notification--caution .rux-notification_close-button::before{background-color:#caba2e;background-color:var(--colorCautionDarken1, rgb(186, 173, 22))}.rux-notification--normal{background-color:#9af666;background-color:var(--colorNormalLighten2, rgb(173, 255, 128))}.rux-notification--normal .rux-notification_close-button{border-color:#45c000;border-color:var(--colorNormalDarken1, rgb(68, 191, 0))}.rux-notification--normal .rux-notification_close-button::after,.rux-notification--normal .rux-notification_close-button::before{background-color:#45c000;background-color:var(--colorNormalDarken1, rgb(68, 191, 0))}.rux-notification--info{background-color:#57d6ff;background-color:var(--colorStandbyLighten1, rgb(160, 232, 255))}.rux-notification--info .rux-notification_close-button{border-color:#24a3cc;border-color:var(--colorStandbyDarken1, rgb(96, 168, 191))}.rux-notification--info .rux-notification_close-button::after,.rux-notification--info .rux-notification_close-button::before{background-color:#24a3cc;background-color:var(--colorStandbyDarken1, rgb(96, 168, 191))}.rux-pop-up,.satcom-pop-up{font-size:.875rem;display:inline-block;margin:1em;min-width:15em;position:relative;border:1px solid #4dacff;border:1px solid var(--colorSecondary, rgb(77, 172, 255));background-color:#4dacff;background-color:var(--colorSecondary, rgb(77, 172, 255));border-radius:3px}.rux-pop-up ul,.satcom-pop-up ul{position:relative;list-style:none;padding:0;margin:0;background:0 0;background-color:#fff;border-radius:2px;z-index:2}.rux-pop-up a,.satcom-pop-up a{display:block;padding:.5em;color:#000;text-decoration:none;min-width:15em;max-width:20em}.rux-pop-up a:hover,.satcom-pop-up a:hover{background-color:#b8deff;background-color:var(--colorSecondaryLighten3, rgb(211, 234, 255))}.rux-pop-up li:first-child a,.satcom-pop-up li:first-child a{border-top-right-radius:2px;border-top-left-radius:2px}.rux-pop-up li:last-child a,.satcom-pop-up li:last-child a{border:0;border-bottom-right-radius:2px;border-bottom-left-radius:2px}.rux-pop-up--top,.satcom-pop-up-top{border-top:3px solid #4dacff;border-top:3px solid var(--colorSecondary, rgb(77, 172, 255))}.rux-pop-up--top::before,.satcom-pop-up-top::before{content:"";display:block;position:absolute;width:1.1875rem;height:1.1875rem;background-color:#4dacff;background-color:var(--colorSecondary, rgb(77, 172, 255));z-index:1;margin:-12px 0 0 16px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rux-pop-up--bottom,.satcom-pop-up-bottom{border-bottom:3px solid #4dacff;border-bottom:3px solid var(--colorSecondary, rgb(77, 172, 255))}.rux-pop-up--bottom::after,.satcom-pop-up-bottom::after{border-bottom:1px solid #4dacff;border-bottom:1px solid var(--colorSecondary, rgb(77, 172, 255));border-right:1px solid #4dacff;border-right:1px solid var(--colorSecondary, rgb(77, 172, 255));margin:-7px 0 0 16px}.rux-pop-up--left,.satcom-pop-up-left{border-left:3px solid #4dacff;border-left:3px solid var(--colorSecondary, rgb(77, 172, 255))}.rux-pop-up--bottom::after,.rux-pop-up--left::before,.rux-pop-up--right::before,.satcom-pop-up-bottom::after,.satcom-pop-up-left::before,.satcom-pop-up-right::before{content:"";display:block;position:absolute;width:1.1875rem;height:1.1875rem;background-color:#4dacff;background-color:var(--colorSecondary, rgb(77, 172, 255));-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rux-pop-up--left::before,.satcom-pop-up-left::before{border-bottom:1px solid #4dacff;border-bottom:1px solid var(--colorSecondary, rgb(77, 172, 255));border-left:1px solid #4dacff;border-left:1px solid var(--colorSecondary, rgb(77, 172, 255));margin:16px 0 0 -12px}.rux-pop-up--right,.satcom-pop-up-right{border-right:3px solid #4dacff;border-right:3px solid var(--colorSecondary, rgb(77, 172, 255))}.rux-pop-up--right::before,.satcom-pop-up-right::before{border-top:1px solid #4dacff;border-top:1px solid var(--colorSecondary, rgb(77, 172, 255));border-right:1px solid #4dacff;border-right:1px solid var(--colorSecondary, rgb(77, 172, 255));right:0;margin:16px -12px 0 0}:root{--progressPadding: 2px 0 0 2px;--progressRadius: 10px 10px 10px 10px;--progressHeight: 14px;--progressWidth: calc(100% - 4px)}.rux-progress{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:2rem}.rux-progress progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgba(0,0,0,.3);background-color:var(--progressDeterminateTrackBackgroundColor, - rgba(0, 0, 0, 0.3) - );border:1px solid #14202c;border:1px solid var(--progressDeterminateTrackBorderColor, rgb(20, 32, 44));border-radius:10px 10px 10px 10px;border-radius:var(--progressRadius);height:20px;width:100%}.rux-progress__value{margin:0 0 0 .5rem;text-align:right;font-size:24px;width:11%;color:#fff;color:var(--controlLabelColor, rgb(255, 255, 255))}.rux-progress progress[value]::-webkit-progress-bar{background-color:transparent}.rux-progress progress[value]::-webkit-progress-value{border-radius:10px 10px 10px 10px;border-radius:var(--progressRadius);height:14px;height:var(--progressHeight);margin:2px 0 0 2px;margin:var(--progressPadding);max-width:calc(100% - 4px);max-width:var(--progressWidth);background-color:#4dacff;background-color:var(--progressDeterminateBarBackgroundColor, - rgb(77, 172, 255) - )}.rux-progress progress[value]::-ms-fill{border-radius:10px;border:0;height:14px;margin:2px;max-width:calc(100% - 6px);background-color:#4dacff;background-color:var(--progressDeterminateBarBackgroundColor, - rgb(77, 172, 255) - )}.rux-progress progress[value]::-moz-progress-bar{border-radius:10px 10px 10px 10px;border-radius:var(--progressRadius);margin:2px 2px 0;height:14px;height:var(--progressHeight);max-width:calc(100% - 4px);max-width:var(--progressWidth);background-color:#4dacff;background-color:var(--progressDeterminateBarBackgroundColor, - rgb(77, 172, 255) - )}.rux-progress progress:indeterminate{-webkit-appearance:none;-moz-appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;height:5rem;width:5rem;background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000000%22%20fill-opacity%3D%22.3%22%20stroke%3D%22%2314202c%22%20d%3D%22M32%2C63.5%20C49.3969696%2C63.5%2063.5%2C49.3969696%2063.5%2C32%20C63.5%2C14.6030304%2049.3969696%2C0.5%2032%2C0.5%20C14.6030304%2C0.5%200.5%2C14.6030304%200.5%2C32%20C0.5%2C49.3969696%2014.6030304%2C63.5%2032%2C63.5%20Z%20M32%2C56.5%20C18.4690236%2C56.5%207.5%2C45.5309764%207.5%2C32%20C7.5%2C18.4690236%2018.4690236%2C7.5%2032%2C7.5%20C45.5309764%2C7.5%2056.5%2C18.4690236%2056.5%2C32%20C56.5%2C45.5309764%2045.5309764%2C56.5%2032%2C56.5%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%234dacff%22%20fill-rule%3D%22nonzero%22%20d%3D%22M32%2C61.9354839%20C30.9333606%2C61.9354839%2030.0686785%2C61.0708018%2030.0686785%2C60.0041623%20C30.0686785%2C58.9375229%2030.9333606%2C58.0728408%2032%2C58.0728408%20C40.1954904%2C58.0728408%2047.7578267%2C54.2689176%2052.6662672%2C47.8987622%20C56.1526582%2C43.3741373%2058.0728408%2C37.8356396%2058.0728408%2C32%20C58.0728408%2C17.6003676%2046.3996324%2C5.92715921%2032%2C5.92715921%20C17.6003676%2C5.92715921%205.92715921%2C17.6003676%205.92715921%2C32%20C5.92715921%2C33.0666394%205.0624771%2C33.9313215%203.99583767%2C33.9313215%20C2.92919824%2C33.9313215%202.06451613%2C33.0666394%202.06451613%2C32%20C2.06451613%2C15.4670888%2015.4670888%2C2.06451613%2032%2C2.06451613%20C48.5329112%2C2.06451613%2061.9354839%2C15.4670888%2061.9354839%2C32%20C61.9354839%2C38.6961574%2059.7285058%2C45.0618765%2055.7259583%2C50.2563674%20C50.0938506%2C57.5656952%2041.4065535%2C61.9354839%2032%2C61.9354839%20Z%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E);background-image:var(--progressIndeterminate, - url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000000%22%20fill-opacity%3D%22.3%22%20stroke%3D%22%2314202c%22%20d%3D%22M32%2C63.5%20C49.3969696%2C63.5%2063.5%2C49.3969696%2063.5%2C32%20C63.5%2C14.6030304%2049.3969696%2C0.5%2032%2C0.5%20C14.6030304%2C0.5%200.5%2C14.6030304%200.5%2C32%20C0.5%2C49.3969696%2014.6030304%2C63.5%2032%2C63.5%20Z%20M32%2C56.5%20C18.4690236%2C56.5%207.5%2C45.5309764%207.5%2C32%20C7.5%2C18.4690236%2018.4690236%2C7.5%2032%2C7.5%20C45.5309764%2C7.5%2056.5%2C18.4690236%2056.5%2C32%20C56.5%2C45.5309764%2045.5309764%2C56.5%2032%2C56.5%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%234dacff%22%20fill-rule%3D%22nonzero%22%20d%3D%22M32%2C61.9354839%20C30.9333606%2C61.9354839%2030.0686785%2C61.0708018%2030.0686785%2C60.0041623%20C30.0686785%2C58.9375229%2030.9333606%2C58.0728408%2032%2C58.0728408%20C40.1954904%2C58.0728408%2047.7578267%2C54.2689176%2052.6662672%2C47.8987622%20C56.1526582%2C43.3741373%2058.0728408%2C37.8356396%2058.0728408%2C32%20C58.0728408%2C17.6003676%2046.3996324%2C5.92715921%2032%2C5.92715921%20C17.6003676%2C5.92715921%205.92715921%2C17.6003676%205.92715921%2C32%20C5.92715921%2C33.0666394%205.0624771%2C33.9313215%203.99583767%2C33.9313215%20C2.92919824%2C33.9313215%202.06451613%2C33.0666394%202.06451613%2C32%20C2.06451613%2C15.4670888%2015.4670888%2C2.06451613%2032%2C2.06451613%20C48.5329112%2C2.06451613%2061.9354839%2C15.4670888%2061.9354839%2C32%20C61.9354839%2C38.6961574%2059.7285058%2C45.0618765%2055.7259583%2C50.2563674%20C50.0938506%2C57.5656952%2041.4065535%2C61.9354839%2032%2C61.9354839%20Z%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") - );background-size:cover;background-repeat:no-repeat;background-position:center center;-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1.367s;animation-duration:1.367s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;background-color:transparent;border:0}.rux-progress progress:indeterminate::-ms-fill{animation-name:none}.rux-progress progress:indeterminate::-moz-progress-bar{background-color:transparent}.rux-progress progress:indeterminate::-webkit-progress-bar,.rux-progress progress:indeterminate::-webkit-progress-value{background-color:transparent}.rux-pushbutton,.satcom-pushbutton{display:inline-block;height:1.3125rem;-webkit-font-smoothing:subpixel-antialiased}.rux-pushbutton__input,.satcom-pushbutton-input{display:none}.rux-pushbutton__button,.satcom-pushbutton-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:1.375rem;font-size:.75rem!important;font-weight:600;margin:0;padding:0 .625rem;background-color:#005a8f;background-color:var(--pushbuttonBackgroundColor, rgb(0, 90, 143));border-radius:3px;border-radius:var(--defaultBorderRadius, 3px);border:1px solid #1e2f42;border:1px solid var(--pushbuttonBorderColor, rgb(30, 47, 66))}.rux-pushbutton__button,.rux-pushbutton__button label,.satcom-pushbutton-button,.satcom-pushbutton-button label{color:#fff;color:var(--pushbuttonTextColor, rgb(255, 255, 255))}.rux-pushbutton__input:checked+.rux-pushbutton__button,.satcom-pushbutton-input:checked+.satcom-pushbutton-button{display:-webkit-box;display:-ms-flexbox;display:flex;color:#5bff00;color:var(--pushbuttonSelectedTextColor, rgb(91, 255, 0));background-color:#000;background-color:var(--pushbuttonSelectedBackgroundColor, rgb(0, 0, 0));border-color:#000;border-color:var(--pushbuttonSelectedBorderColor, rgb(0, 0, 0));-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.13);box-shadow:inset 0 0 4px rgba(0,0,0,.13)}.rux-pushbutton__input:not(:checked)+.rux-pushbutton__button .on,.satcom-pushbutton-input:not(:checked)+.satcom-pushbutton-button .on{display:none}.rux-pushbutton__input:disabled+.rux-pushbutton__button,.rux-range:disabled,.satcom-pushbutton-input:disabled+.satcom-pushbutton-button{opacity:.4;opacity:var(--disabledOpacity, 0.4);cursor:not-allowed;cursor:var(--disabledCursor, not-allowed)}.rux-segmented-button{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:1.6875rem;overflow:hidden;padding:0;margin:0;list-style:none;border-radius:3px;border-radius:var(--controlBorderRadius, 3px);border:1px solid #1e2f42;border:1px solid var(--segmentedButtonBorderColor, rgb(30, 47, 66))}.rux-segmented-button__segment{height:1.6875rem;width:auto;margin:0;padding:0}.rux-segmented-button__segment label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;height:1.5625rem;margin:0;padding:0 .75rem;border:0;border-right:1px solid #1e2f42;border-right:1px solid var(--segmentedButtonBorderColor, rgb(30, 47, 66));color:#fff;color:var(--segmentedButtonTextColor, rgb(255, 255, 255));background-color:#005a8f;background-color:var(--segmentedButtonBackgroundColor, rgb(0, 90, 143));font-size:.875rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rux-segmented-button__segment:last-child label{border-right:none!important}.rux-segmented-button__segment input,.rux-tabs li::before,.satcom-tabs li::before{display:none!important}.rux-segmented-button__segment label:hover{background-color:#3a81bf;background-color:var(--segmentedButtonHoverBackgroundColor, - rgb(58, 129, 191) - );color:#fff;color:var(--segmentedButtonHoverTextColor, rgb(255, 255, 255));outline:0}.rux-segmented-button__segment input:checked+label{background-color:#3a81bf;background-color:var(--segmentedButtonSelectedBackgroundColor, - rgb(58, 129, 191) - );color:#fff;color:var(--segmentedButtonSelectedTextColor, rgb(255, 255, 255));-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.14),inset 0 3px 4px rgba(0,0,0,.12),inset 0 1px 5px rgba(0,0,0,.2);box-shadow:inset 0 2px 4px rgba(0,0,0,.14),inset 0 3px 4px rgba(0,0,0,.12),inset 0 1px 5px rgba(0,0,0,.2);-webkit-box-shadow:var(--segmentedButtonSelectedBoxShadow, - inset 0 2px 4px rgba(0, 0, 0, 0.14), - inset 0 3px 4px rgba(0, 0, 0, 0.12), - inset 0 1px 5px rgba(0, 0, 0, 0.2) - );box-shadow:var(--segmentedButtonSelectedBoxShadow, - inset 0 2px 4px rgba(0, 0, 0, 0.14), - inset 0 3px 4px rgba(0, 0, 0, 0.12), - inset 0 1px 5px rgba(0, 0, 0, 0.2) - );-webkit-transition:-webkit-box-shadow .067 ease-out;transition:box-shadow .067 ease-out;transition:box-shadow .067 ease-out,-webkit-box-shadow .067 ease-out}:root{--thumbSize: var(--controlOptionSize, 1.25rem);--thumbShadow: 0 3px 5px rgba(0, 0, 0, 0.14), 0 1px 9px rgba(0, 0, 0, 0.12), - 0 1px 3px rgba(0, 0, 0, 0.2);--thumbShadowHover: 0 6px 10px rgba(0, 0, 0, 0.14), - 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2);--thumbShadowActive: inset 0 0 0 4px var(--colorPrimary, rgb(0, 90, 143)), - 0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.12), - 0 1px 1px rgba(0, 0, 0, 0.2);--trackHeight: 2px;--trackCursor: pointer}.rux-slider label input{margin-left:auto;margin-right:0}.rux-range,.satcom-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;width:100%}input[type=range]:focus{outline:0}.rux-range::-webkit-slider-runnable-track,.satcom-range::-webkit-slider-runnable-track{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;height:2px;height:var(--trackHeight);cursor:pointer;cursor:var(--trackCursor);background-color:#d9d9d9;background-color:var(--sliderTrackBackgroundColor, rgb(217, 217, 217));outline:1px solid transparent;outline:1px solid var(--sliderTrackBorderColor, transparent);background-image:-webkit-gradient(linear,left top,right top,from(#4dacff),color-stop(#4dacff),color-stop(#d9d9d9),to(#d9d9d9));background-image:linear-gradient(to right,#4dacff 0%,#4dacff calc(1%*var(--value)),#d9d9d9 calc(1%*var(--value)),#d9d9d9 100%);background-image:-webkit-gradient(linear,left top,right top,from(var(--sliderSelectedTrackBackgroundColor, rgb(77, 172, 255))),color-stop(var(--sliderSelectedTrackBackgroundColor, rgb(77, 172, 255))),color-stop(var(--sliderTrackBackgroundColor, rgb(217, 217, 217))),to(var(--sliderTrackBackgroundColor, rgb(217, 217, 217))));background-image:linear-gradient(to right,var(--sliderSelectedTrackBackgroundColor, rgb(77, 172, 255)) 0%,var(--sliderSelectedTrackBackgroundColor, rgb(77, 172, 255)) calc(1%*var(--value)),var(--sliderTrackBackgroundColor, rgb(217, 217, 217)) calc(1%*var(--value)),var(--sliderTrackBackgroundColor, rgb(217, 217, 217)) 100%)}.rux-range::-moz-range-track{display:flex;align-items:center;height:2px;height:var(--trackHeight);cursor:pointer;cursor:var(--trackCursor);background-color:#d9d9d9;background-color:var(--sliderTrackBackgroundColor, rgb(217, 217, 217));outline:1px solid transparent;outline:1px solid var(--sliderTrackBorderColor, transparent)}.rux-range::-moz-range-progress{background-color:#4dacff;background-color:var(--sliderSelectedTrackBackgroundColor, - rgb(77, 172, 255) - )}.rux-range::-ms-track{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:1.25rem;padding:2px 0;cursor:pointer;color:transparent;background-color:transparent;border:0;outline:1px solid transparent}.rux-range::-ms-fill-lower{height:2px;background-color:#4dacff}.rux-range::-ms-fill-upper{height:2px;background-color:#d9d9d9;background-color:var(--sliderTrackBackgroundColor, rgb(217, 217, 217))}.rux-range::-webkit-slider-thumb{-webkit-appearance:none;position:relative;height:1.25rem;height:var(--thumbSize);width:1.25rem;width:var(--thumbSize);border-radius:100%;border:1px solid #fff;border:1px solid var(--sliderThumbBorderColor, rgb(255, 255, 255));background-color:#005a8f;background-color:var(--sliderThumbBackgroundColor, rgb(0, 90, 143));cursor:pointer;-webkit-box-shadow:inset 0 0 1px 0 rgba(255,255,255,.9),0 3px 5px rgba(0,0,0,.14),0 1px 9px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.2);box-shadow:inset 0 0 1px 0 rgba(255,255,255,.9),0 3px 5px rgba(0,0,0,.14),0 1px 9px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.2);-webkit-box-shadow:inset 0 0 1px 0 rgba(255,255,255,.9),var(--thumbShadow);box-shadow:inset 0 0 1px 0 rgba(255,255,255,.9),var(--thumbShadow);outline:0!important}input:-moz-focusring{outline:0}.rux-range::-moz-range-thumb{-moz-appearance:none;position:relative;height:1.25rem;height:var(--thumbSize);width:1.25rem;width:var(--thumbSize);border-radius:100%;border:1px solid #fff;border:1px solid var(--sliderThumbBorderColor, rgb(255, 255, 255));background-color:#005a8f;background-color:var(--sliderThumbBackgroundColor, rgb(0, 90, 143));cursor:pointer;box-shadow:inset 0 0 1px 0 rgba(255,255,255,.9),0 3px 5px rgba(0,0,0,.14),0 1px 9px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.2);box-shadow:inset 0 0 1px 0 rgba(255,255,255,.9),var(--thumbShadow)}.rux-range:disabled::-moz-range-thumb{cursor:not-allowed;cursor:var(--disabledCursor, not-allowed)}.rux-range::-ms-thumb{position:relative;height:1.25rem;width:1.25rem;border-radius:100%;border:1px solid #fff;background-color:#005a8f;cursor:pointer;box-shadow:inset 0 0 1px 0 rgba(255,255,255,.9),0 3px 5px rgba(0,0,0,.14),0 1px 9px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.2)}.rux-range:disabled::-webkit-slider-runnable-track,.satcom-range:disabled::-webkit-slider-runnable-track{opacity:.4;opacity:var(--disabledOpacity, 0.4);cursor:not-allowed;cursor:var(--disabledCursor, not-allowed)}.rux-range:disabled::-webkit-slider-thumb,.satcom-range:disabled::-webkit-slider-thumbtrack{cursor:not-allowed;cursor:var(--disabledCursor, not-allowed)}.rux-range:disabled::-ms-thumb{opacity:.4;cursor:not-allowed}.rux-range:not(:disabled)::-webkit-slider-thumb:active,.satcom-range:not(:disabled)::-webkit-slider-thumb:active{border-color:#4dacff;border-color:var(--colorSecondary, rgb(77, 172, 255));background-color:#fff;-webkit-box-shadow:inset 0 0 0 4px #005a8f ,0 1px 3px rgba(0,0,0,.14),0 1px 4px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.2);box-shadow:inset 0 0 0 4px #005a8f ,0 1px 3px rgba(0,0,0,.14),0 1px 4px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:var(--thumbShadowActive);box-shadow:var(--thumbShadowActive)}.rux-range:not(:disabled)::-webkit-slider-thumb:focus,.rux-range:not(:disabled)::-webkit-slider-thumb:hover:not(:active),.satcom-range:not(:disabled)::-webkit-slider-thumb:focus,.satcom-range:not(:disabled)::-webkit-slider-thumb:hover:not(:active){background-color:#3a81bf;background-color:var(--sliderHoverThumbBackgroundColor, rgb(58, 129, 191));-webkit-box-shadow:0 6px 10px rgba(0,0,0,.14),0 1px 18px rgba(0,0,0,.12),0 3px 5px rgba(0,0,0,.2);box-shadow:0 6px 10px rgba(0,0,0,.14),0 1px 18px rgba(0,0,0,.12),0 3px 5px rgba(0,0,0,.2);-webkit-box-shadow:var(--thumbShadowHover);box-shadow:var(--thumbShadowHover)}.rux-status,.rux-status-indicator{display:block;height:1rem;width:1rem;margin:.125rem;background-size:cover;background-repeat:no-repeat;background-position-x:1rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAAgVBMVEUAAAD/tQv/swL/OTn/PDzftl9W8QBW8AAtzP8v0P9Z9gD/tAP/uQb/tAItzf8tzf+eqK2ep60uzP9X8QCfqK4uzf8uzf9X8QAuzP9X8ACeqK4vzP9Y8QAuzv9Y8gCeqq4wz/8xzv9A1f9Y8QD/tAP86DpW8AD/swL/ODgtzP+ep63tgXPUAAAAJXRSTlMAGNfAQAv98/IdG8Io52zz8+DZ2dC9trabm4F+a05OQjAaDG6dAJcYcwAAAfdJREFUWMPtmNlygkAQRScyrBp3QTZFNBj8/w9MCGI3dBOHMg9jyvOmVFnn1HUSULx4LibjN/HMTN7Po2cu+PY/cwUfPYg2XhKsbHsVJJ5gcaf+cjZb+lN3qJjxyWIw/lAwNMALreKKFTIJh215Y3sYFiD5AEn9oWBowM4uEPau65A6JcJJ/2ACg/pDwdCAo1W0sI6ixbTsMH18Akn9oWBgwK7xh4LWBmlJSB+dwCD+pEA5wLMLgo3OwcGpvzhxludZfH1Bz4EZrefzdWSqTSCJPylQDggLhhA+oD6/G7d+5W7qk9yV3C8uPyz2KhMYxJ8UKAd4Fhdg3SZwa3/4wLrA7fhfbuwVJpDEnxQoByQFS9I6wQ7ydR16js0FBCzMuxMY1J8WqAYEfEDQXPcr3RjbxNU7vsBEF0R0dwJJ/LkCxYAVH7Bqri8r3QzbZNU7S4FZ44B1/ymgA4zPfZwUA2w+wG6uzyrdHMvk1TszgZnjgLmgyL4T8Dbq8R+bWgUIgw4ABby/Vl8hIckAUMD7a3WIYQIYgC0Af73+jOIJpKAF1F+vf2QwAQxAC7C/ZrcSeAIpegvAX7ObOZgABiAF2F+322mYAAagBeCv2wMNTEAGIAWVv3aPlDABDMAW1P7aPdQjDBiALaj89ftZBSGl+LXgZIoXL/4VXyptNwzuHR/QAAAAAElFTkSuQmCC);background-image:var(--statusSymbols, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAAAgCAMAAABzRoe3AAAAgVBMVEUAAAD/tQv/swL/OTn/PDzftl9W8QBW8AAtzP8v0P9Z9gD/tAP/uQb/tAItzf8tzf+eqK2ep60uzP9X8QCfqK4uzf8uzf9X8QAuzP9X8ACeqK4vzP9Y8QAuzv9Y8gCeqq4wz/8xzv9A1f9Y8QD/tAP86DpW8AD/swL/ODgtzP+ep63tgXPUAAAAJXRSTlMAGNfAQAv98/IdG8Io52zz8+DZ2dC9trabm4F+a05OQjAaDG6dAJcYcwAAAfdJREFUWMPtmNlygkAQRScyrBp3QTZFNBj8/w9MCGI3dBOHMg9jyvOmVFnn1HUSULx4LibjN/HMTN7Po2cu+PY/cwUfPYg2XhKsbHsVJJ5gcaf+cjZb+lN3qJjxyWIw/lAwNMALreKKFTIJh215Y3sYFiD5AEn9oWBowM4uEPau65A6JcJJ/2ACg/pDwdCAo1W0sI6ixbTsMH18Akn9oWBgwK7xh4LWBmlJSB+dwCD+pEA5wLMLgo3OwcGpvzhxludZfH1Bz4EZrefzdWSqTSCJPylQDggLhhA+oD6/G7d+5W7qk9yV3C8uPyz2KhMYxJ8UKAd4Fhdg3SZwa3/4wLrA7fhfbuwVJpDEnxQoByQFS9I6wQ7ydR16js0FBCzMuxMY1J8WqAYEfEDQXPcr3RjbxNU7vsBEF0R0dwJJ/LkCxYAVH7Bqri8r3QzbZNU7S4FZ44B1/ymgA4zPfZwUA2w+wG6uzyrdHMvk1TszgZnjgLmgyL4T8Dbq8R+bWgUIgw4ABby/Vl8hIckAUMD7a3WIYQIYgC0Af73+jOIJpKAF1F+vf2QwAQxAC7C/ZrcSeAIpegvAX7ObOZgABiAF2F+322mYAAagBeCv2wMNTEAGIAWVv3aPlDABDMAW1P7aPdQjDBiALaj89ftZBSGl+LXgZIoXL/4VXyptNwzuHR/QAAAAAElFTkSuQmCC"))}.rux-status--off,.rux-status--off .rux-advanced-status__icon,.rux-status-indicator.rux-status--off{background-position-x:-5rem}.rux-status--standby,.rux-status--standby .rux-advanced-status__icon,.rux-status-indicator.rux-status--standby{background-position-x:-4rem}.rux-status--normal,.rux-status--normal .rux-advanced-status__icon,.rux-status--ok .rux-advanced-status__icon,.rux-status-indicator.rux-status--normal,.rux-status-indicator.rux-status--ok{background-position-x:-3rem}.rux-status--caution,.rux-status--caution .rux-advanced-status__icon,.rux-status-indicator.rux-status--caution{background-position-x:-2rem}.rux-status--error .rux-advanced-status__icon,.rux-status--serious,.rux-status--serious .rux-advanced-status__icon,.rux-status-indicator.rux-status--error,.rux-status-indicator.rux-status--serious{background-position-x:-1rem}.rux-status--alert .rux-advanced-status__icon,.rux-status--critical,.rux-status--critical .rux-advanced-status__icon,.rux-status--emergency .rux-advanced-status__icon,.rux-status-indicator.rux-status--alert,.rux-status-indicator.rux-status--critical{background-position-x:0}.rux-icon.rux-status--off,.rux-status--off svg{fill:#c6ccd1;fill:var(--colorOff, rgb(198, 204, 209));color:#c6ccd1;color:var(--colorOff, rgb(198, 204, 209))}.rux-icon.rux-status--standby,.rux-status--standby svg{fill:#4dacff;fill:var(--colorStandby, rgb(77, 172, 255));color:#4dacff;color:var(--colorStandby, rgb(77, 172, 255))}.rux-icon.rux-status--normal,.rux-icon.rux-status--ok,.rux-status--normal svg,.rux-status--ok svg{fill:#5bff00;fill:var(--colorNormal, rgb(91, 255, 0));color:#5bff00;color:var(--colorNormal, rgb(91, 255, 0))}.rux-icon.rux-status--caution,.rux-status--caution svg{fill:#f8e71d;fill:var(--colorCaution, rgb(248, 231, 29));color:#f8e71d;color:var(--colorCaution, rgb(248, 231, 29))}.rux-icon.rux-status--error,.rux-icon.rux-status--serious,.rux-status--error svg,.rux-status--serious svg{fill:#ffb000;fill:var(--colorSerious, rgb(255, 176, 0));color:#ffb000;color:var(--colorSerious, rgb(255, 176, 0))}.rux-icon.rux-status--critical,.rux-icon.rux-status--emergency,.rux-status--critical svg,.rux-status--emergency svg{fill:#ff3030;fill:var(--colorCritical, rgb(255, 48, 48));color:#ff3030;color:var(--colorCritical, rgb(255, 48, 48))}.rux-tabs,.satcom-tabs{font-size:1.5rem;width:100%;margin:0;padding:0;height:5.625rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rux-tabs--small{height:3.125rem;font-size:1rem}.rux-tabs a,.rux-tabs ul,.satcom-tabs a,.satcom-tabs ul{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.rux-tabs ul,.satcom-tabs ul{padding:0;margin:0;list-style:none}.rux-tabs li,.satcom-tabs li{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.rux-tabs a,.satcom-tabs a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:3px 2rem 0;text-decoration:none;color:#4dacff;color:var(--tabTextColor, rgb(77, 172, 255))}.rux-tabs a[disabled]{opacity:.4;opacity:var(--disabledOpacity, 0.4);cursor:not-allowed;cursor:var(--disabledCursor, not-allowed)}.rux-tabs .selected a,.satcom-tabs .selected a{color:#fff;color:var(--tabSelectedTextColor, rgb(255, 255, 255));-webkit-box-shadow:inset 0 -5px 0 0 #4dacff;box-shadow:inset 0 -5px 0 0 #4dacff;-webkit-box-shadow:inset 0 -5px 0 0 var(--tabSelectedBorderColor, rgb(77, 172, 255));box-shadow:inset 0 -5px 0 0 var(--tabSelectedBorderColor, rgb(77, 172, 255))}.rux-tabs--small .selected a,.rux-tabs--small .selected a:hover{color:#fff;color:var(--tabSelectedTextColor, rgb(255, 255, 255));-webkit-box-shadow:inset 0 -3px 0 #4dacff;box-shadow:inset 0 -3px 0 #4dacff;-webkit-box-shadow:inset 0 -3px 0 var(--tabSelectedBorderColor, rgb(77, 172, 255));box-shadow:inset 0 -3px 0 var(--tabSelectedBorderColor, rgb(77, 172, 255))}.rux-tabs .selected a:hover,.satcom-tabs .selected a:hover{color:#fff;color:var(--tabSelectedTextColor, rgb(255, 255, 255));-webkit-box-shadow:inset 0 -5px 0 0 #4dacff;box-shadow:inset 0 -5px 0 0 #4dacff;-webkit-box-shadow:inset 0 -5px 0 0 var(--tabSelectedBorderColor, rgb(77, 172, 255));box-shadow:inset 0 -5px 0 0 var(--tabSelectedBorderColor, rgb(77, 172, 255))}.rux-tabs a:hover:not([disabled]),.satcom-tabs a:hover:not([disabled]){color:#fff;color:var(--tabHoverTextColor, rgb(255, 255, 255))}.rux-toggle--legacy,.satcom-toggle--legacy{position:relative;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:subpixel-antialiased;height:1.3125rem;width:4.375rem;border-radius:3px;border-radius:var(--defaultBorderRadius, 0.1875rem);border:1px solid #000;border:1px solid var(--toggleBaseBorderColor, rgb(0, 0, 0));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}.rux-toggle--legacy__input,.satcom-toggle--legacy input{display:none!important}.rux-toggle--legacy__button,.rux-toggle--legacy__button span{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.rux-toggle--legacy__button{position:absolute;top:0;left:0;font-size:.75rem!important;-ms-flex-pack:distribute;justify-content:space-around;width:100%}.rux-toggle--legacy__button span{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:50%;z-index:1;text-transform:uppercase}.rux-toggle--legacy__button::before{position:absolute;content:"";display:block;height:100%;width:100%;border-radius:.1875rem;background:#000;background:var(--toggleBaseBackgroundColor, rgb(0, 0, 0))}.rux-toggle--legacy__button::after{content:"";display:block;position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;top:0;left:0;z-index:10;-webkit-transition:left .1s ease-out;transition:left .1s ease-out;width:50%;height:100%;border-radius:.125rem;background:#005a8f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E %3Cdefs%3E %3ClinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='100%25'%3E %3Cstop offset='0%25' stop-color='%23000'/%3E %3Cstop offset='100%25' stop-color='%23023861' stop-opacity='0'/%3E %3C/linearGradient%3E %3C/defs%3E %3Ccircle cx='3' cy='3' r='3' fill='url(%23a)' fill-rule='evenodd'/%3E %3C/svg%3E") center center no-repeat;background:var(--toggleButtonBackgroundColor, rgb(0, 90, 143)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E %3Cdefs%3E %3ClinearGradient id='a' x1='50%25' x2='50%25' y1='0%25' y2='100%25'%3E %3Cstop offset='0%25' stop-color='%23000'/%3E %3Cstop offset='100%25' stop-color='%23023861' stop-opacity='0'/%3E %3C/linearGradient%3E %3C/defs%3E %3Ccircle cx='3' cy='3' r='3' fill='url(%23a)' fill-rule='evenodd'/%3E %3C/svg%3E") center center no-repeat;-webkit-box-shadow:0 0 3px rgba(0,0,0,.5),1px 0 2px rgba(0,0,0,.6);box-shadow:0 0 3px rgba(0,0,0,.5),1px 0 2px rgba(0,0,0,.6);-webkit-box-shadow:var(--toggleButtonBoxShadow, - 0 0 3px rgba(0, 0, 0, 0.5), - 1px 0 2px rgba(0, 0, 0, 0.6) - );box-shadow:var(--toggleButtonBoxShadow, - 0 0 3px rgba(0, 0, 0, 0.5), - 1px 0 2px rgba(0, 0, 0, 0.6) - )}.rux-toggle--legacy .on{font-weight:600;color:#5bff00;color:var(--toggleBaseSelectedTextColor, rgb(91, 255, 0))}.rux-toggle--legacy .off{color:#fff;color:var(--toggleBaseTextColor, rgb(255, 255, 255))}.rux-toggle--legacy__input:disabled+.rux-toggle--legacy__button{opacity:.4;opacity:var(--disabledOpacity, 0.4);cursor:not-allowed}.rux-toggle--legacy__input:checked+.rux-toggle--legacy__button::after{left:50%;-webkit-box-shadow:0 0 3px rgba(0,0,0,.5),-1px 0 2px rgba(0,0,0,.6);box-shadow:0 0 3px rgba(0,0,0,.5),-1px 0 2px rgba(0,0,0,.6);-webkit-box-shadow:var(--toggleButtonSelectedBoxShadow, - 0 0 3px rgba(0, 0, 0, 0.5), - -1px 0 2px rgba(0, 0, 0, 0.6) - );box-shadow:var(--toggleButtonSelectedBoxShadow, - 0 0 3px rgba(0, 0, 0, 0.5), - -1px 0 2px rgba(0, 0, 0, 0.6) - )}.rux-toggle{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:22px;width:42px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}.rux-toggle__input{display:none!important}.rux-toggle__button,.rux-toggle__button::before{display:-webkit-box;display:-ms-flexbox;display:flex}.rux-toggle__button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.rux-toggle__button::before{position:relative;content:"";border-radius:5.5px;border:1px solid #7a7a7a;border:1px solid var(--toggleTrackBorderColor, rgb(122, 122, 122));background-color:#ccc;background-color:var(--toggleTrackBackgroundColor, rgb(204, 204, 204));height:11px;width:32px;-webkit-transition:.167s background-color ease-in-out;transition:.167s background-color ease-in-out}.rux-toggle__input:checked+.rux-toggle__button::before{background-color:#4dacff;background-color:var(--toggleSelectedTrackBackgroundColor, - rgb(77, 172, 255) - );border-color:#1b7a99;border-color:var(--toggleSelectedTrackBorderColor, rgb(27, 122, 153))}.rux-toggle__button::after{position:absolute;content:"";top:1px;left:0;z-index:1;height:19px;width:19px;border-radius:50%;border:1px solid #fff;border:1px solid var(--toggleThumbBorderColor, rgb(255, 255, 255));background-color:#fff;background-color:var(--toggleThumbBackgroundColor, rgb(255, 255, 255));-webkit-transition:.167s left ease-in-out,.167s border-color ease-in-out;transition:.167s left ease-in-out,.167s border-color ease-in-out}.rux-toggle__input:disabled+.rux-toggle__button::after{background-color:#a3a3a3;background-color:var(--toggleDisabledThumbBackgroundColor, - rgb(163, 163, 163) - );border-color:#a3a3a3;border-color:var(--toggleDisabledThumbBorderColor, rgb(163, 163, 163))}.rux-toggle__input:checked+.rux-toggle__button::after{left:calc(50% + 2px);border-color:#fff;border-color:var(--toggleSelectedThumbBorderColor, rgb(255, 255, 255))}.rux-toggle__input:checked:disabled+.rux-toggle__button::after{border-color:#a3a3a3;border-color:var(--toggleDisabledSelectedThumbBorderColor, - rgb(163, 163, 163) - );cursor:not-allowed}.rux-toggle__input:disabled+.rux-toggle__button::before{opacity:.4;opacity:var(--disabledOpacity, 0.4);cursor:not-allowed}.rux-tree{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0;margin:0;font-size:1rem;background-color:#1e2f42;background-color:var(--treeBackgroundColor, rgb(30, 47, 66));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rux-tree--compact{font-size:.875rem}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}.rux-tree ul{padding:0;margin:0;list-style:none}.rux-tree li:not(:first-child){border-top:1px solid #283f58;border-top:1px solid var(--treeItemBorderColor, rgb(40, 63, 88))}.rux-tree__parent-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:stretch;align-content:stretch;padding:0 0 0 1.25rem;margin:0}.rux-tree__label{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:calc(100% - 7px)}.rux-tree--compact .rux-tree__label{padding:.35rem}.rux-tree__arrow{position:relative;cursor:pointer;width:7px;visibility:hidden}.rux-tree__arrow::after{content:"";width:0;height:0;border-style:solid;border-width:7px 0 7px 7px;border-color:transparent transparent transparent #4dacff;border-color:transparent transparent transparent var(--treeAccentColor, rgb(77, 172, 255));display:inline-block}.has-children .rux-tree__arrow{visibility:visible}.rux-tree__children{width:100%;display:none;padding:0;margin:0;height:0}.rux-tree__child{padding-left:3rem}.expanded .rux-tree__arrow::after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.expanded .rux-tree__children{display:block;height:auto}.rux-tree .selected{background-color:#00446b;background-color:var(--treeSelectedBackgroundColor, rgb(0, 68, 107));-webkit-box-shadow:inset 5px 0 #4dacff;box-shadow:inset 5px 0 #4dacff;-webkit-box-shadow:inset 5px 0 var(--treeSelectedAccentColor, rgb(77, 172, 255));box-shadow:inset 5px 0 var(--treeSelectedAccentColor, rgb(77, 172, 255));color:#fff;color:var(--treeSelectedTextColor, rgb(255, 255, 255))}.rux-tree .selected .rux-tree__arrow::after{border-color:transparent transparent transparent #4dacff;border-color:transparent transparent transparent var(--treeSelectedAccentColor, rgb(77, 172, 255))} \ No newline at end of file diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss index 9eda7b667c..dd917ad9be 100644 --- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss +++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss @@ -4,16 +4,16 @@ // and note the variations are: base, lighten[1-5], and darken[1-4] .openc3-green { - color: rgb(0, 200, 0) !important; + color: #56f000 !important; } .openc3-yellow { - color: rgb(255, 220, 0) !important; + color: #fce83a !important; } .openc3-red { - color: rgb(255, 45, 45) !important; + color: #ff3838 !important; } .openc3-blue { - color: rgb(0, 153, 255) !important; + color: #2dccff !important; } .openc3-purple { color: rgb(200, 0, 200) !important; @@ -27,36 +27,52 @@ // Base colors .theme--dark.v-system-bar { - background-color: var(--v-primary-base) !important; + background-color: var(--color-background-base-header) !important; } .theme--dark.v-system-bar.active { - background-color: var(--v-secondary-base) !important; + background-color: var(--color-background-surface-header) !important; } body, .theme--dark.v-application, .theme--dark.v-main, .theme--dark.v-content { - background-color: var(--v-tertiary-base) !important; + background-color: var(--color-background-base-default) !important; } -// Highlight colors -.theme--dark.v-sheet.v-list, -.theme--dark.v-list, -.theme--dark.v-list-item { - background-color: var(--v-primary-darken2) !important; +.v-card__title, +.v-card__subtitle, +.theme--dark.v-tab, +.theme--dark.v-tabs-bar, +.v-expansion-panel-header, +.theme--dark.v-toolbar, +.theme--dark.v-date-picker-header { + background-color: var(--color-background-surface-header) !important; } + +.v-stepper, +.v-expansion-panel-content, .theme--dark.v-data-table, -.theme--dark.v-item-group, .theme--dark.v-dialog, .theme--dark.v-card, -.theme--dark.v-tab, -.theme--dark.v-sheet, -.theme--dark.v-date-picker-header, +.theme--dark.v-list, .theme--dark.v-date-picker-table, .theme--dark.v-time-picker-clock__container, +.theme--dark.v-expansion-panel, +.theme--dark.v-expansion-panels, .theme--dark.p-menubar { - background-color: var(--v-tertiary-darken2) !important; + background-color: var(--color-background-surface-default) !important; } +// --color-background-interactive-muted: #2b659b; +// --color-background-interactive-hover: #92cbff; +// --color-background-interactive-default: #4dacff; +// --color-background-surface-selected: #1c3f5e; +// --color-background-surface-hover: #1c3851; +// --color-background-surface-header: #172635; +// --color-background-surface-default: #1b2d3e; +// --color-background-base-selected: #1c3f5e; +// --color-background-base-hover: #142435; +// --color-background-base-header: #172635; +// --color-background-base-default: #101923; input { // This causes the browser to style input icons for a dark background diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/layout.scss b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/layout.scss index 5980a63785..772e4ee7b3 100644 --- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/layout.scss +++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/layout.scss @@ -1,3 +1,3 @@ -@import "./_variables"; -@import "./sass/_layout"; -@import "./_overrides"; \ No newline at end of file +@import './_variables'; +@import './sass/_layout'; +@import './_overrides'; diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EditScreenDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EditScreenDialog.vue index bd7ed36086..2e5a65061e 100644 --- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EditScreenDialog.vue +++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EditScreenDialog.vue @@ -71,7 +71,7 @@ label="Click to select .txt screen file." /> - Edit the screen definition. + Edit the screen definition. 

         
@@ -196,7 +196,7 @@ export default {
     buildScreenMode() {
       var oop = ace.require('ace/lib/oop')
       var TextHighlightRules = ace.require(
-        'ace/mode/text_highlight_rules'
+        'ace/mode/text_highlight_rules',
       ).TextHighlightRules
 
       let list = this.keywords.join('|')
@@ -283,11 +283,7 @@ export default {
   position: relative;
   font-size: 16px;
 }
-.v-card {
-  background-color: var(--v-tertiary-darken2);
-}
 .v-textarea :deep(textarea) {
   padding: 5px;
-  background-color: var(--v-tertiary-darken1) !important;
 }
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue
index 29bc879688..ecd92ac16b 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue
@@ -1623,7 +1623,7 @@ export default {
 
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue
index 27ded60bec..428eac5655 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue
@@ -122,7 +122,7 @@
         
       
       
-      {{ title }}
+      
       
     
   
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/icons/AstroIcon.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/icons/AstroIcon.vue
index 623c2924f1..197d60109d 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/icons/AstroIcon.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/icons/AstroIcon.vue
@@ -16,22 +16,22 @@
 # All changes Copyright 2022, OpenC3, Inc.
 # All Rights Reserved
 #
-# This file may also be used under the terms of a commercial license 
+# This file may also be used under the terms of a commercial license
 # if purchased from OpenC3, Inc.
 -->
 
 
 
 
-
-
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/MiniCalendar.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/MiniCalendar.vue
index 34943f3674..4a30b6ad0c 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/MiniCalendar.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/MiniCalendar.vue
@@ -21,7 +21,7 @@
 -->
 
 
       
-        

+        

           
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/StatusTab.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/StatusTab.vue
index 2a2b17a3dc..896bcc9bd8 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/StatusTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/StatusTab.vue
@@ -102,11 +102,3 @@ export default {
   },
 }
 
-
-
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/package.json
index 4332220639..67f6b7ac3c 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.12.1-beta0",
+    "@astrouxds/astro-web-components": "7.19.1",
     "axios": "1.6.1",
     "date-fns": "2.30.0",
     "portal-vue": "2.1.7",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/package.json
index 9d82151fdc..52f6917460 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.12.1-beta0",
+    "@astrouxds/astro-web-components": "7.19.1",
     "axios": "1.6.1",
     "date-fns": "2.30.0",
     "lodash": "4.17.21",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/package.json
index 1bd7c45639..786aeb695b 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.12.1-beta0",
+    "@astrouxds/astro-web-components": "7.19.1",
     "axios": "1.6.1",
     "date-fns": "2.30.0",
     "lodash": "4.17.21",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-iframe/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-iframe/package.json
index 08b553ed8e..340d777333 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-iframe/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-iframe/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.12.1-beta0",
+    "@astrouxds/astro-web-components": "7.19.1",
     "axios": "1.6.1",
     "date-fns": "2.30.0",
     "lodash": "4.17.21",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/package.json
index f632fd2c2b..6196cf470a 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.12.1-beta0",
+    "@astrouxds/astro-web-components": "7.19.1",
     "axios": "1.6.1",
     "date-fns": "2.30.0",
     "lodash": "4.17.21",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/package.json
index db32d97dd8..77e40f4359 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.12.1-beta0",
+    "@astrouxds/astro-web-components": "7.19.1",
     "axios": "1.6.1",
     "date-fns": "2.30.0",
     "lodash": "4.17.21",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/package.json
index a59e42822e..ac187f46f5 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.12.1-beta0",
+    "@astrouxds/astro-web-components": "7.19.1",
     "ace-builds": "1.31.1",
     "axios": "1.6.1",
     "date-fns": "2.30.0",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/package.json
index f79c971d15..4882045b94 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.12.1-beta0",
+    "@astrouxds/astro-web-components": "7.19.1",
     "axios": "1.6.1",
     "date-fns": "2.30.0",
     "lodash": "4.17.21",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/package.json b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/package.json
index 85c978a237..112c84c842 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/package.json
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.12.1-beta0",
+    "@astrouxds/astro-web-components": "7.19.1",
     "axios": "1.6.1",
     "binary-search": "1.3.6",
     "date-fns": "2.30.0",
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
index ca63707984..666c994674 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
@@ -464,7 +464,6 @@ i.v-icon.mdi-chevron-down {
 
 
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-autonomic/src/tools/Autonomic/Tabs/Triggers/NewGroupDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-autonomic/src/tools/Autonomic/Tabs/Triggers/NewGroupDialog.vue
index bbe9351ca1..782a761f0a 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-autonomic/src/tools/Autonomic/Tabs/Triggers/NewGroupDialog.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-autonomic/src/tools/Autonomic/Tabs/Triggers/NewGroupDialog.vue
@@ -130,10 +130,3 @@ export default {
   },
 }
 
-
-
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
index ea2b8cade4..35b2f9cfa8 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
@@ -139,7 +139,7 @@ export default {
   },
   data() {
     return {
-      title: 'COSMOS Bucket Explorer',
+      title: 'Bucket Explorer',
       search: '',
       root: '',
       mode: 'bucket',
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Calendar.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Calendar.vue
index 1ab3f6b8ac..454100986f 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Calendar.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Calendar.vue
@@ -95,7 +95,7 @@ export default {
   mixins: [TimelineMethods],
   data() {
     return {
-      title: 'COSMOS Calendar',
+      title: 'Calendar',
       timelines: [],
       selectedCalendars: [],
       activities: {},
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Dialogs/TimelineCreateDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Dialogs/TimelineCreateDialog.vue
index 8664b74d3b..a341e84086 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Dialogs/TimelineCreateDialog.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Dialogs/TimelineCreateDialog.vue
@@ -135,10 +135,3 @@ export default {
   },
 }
 
-
-
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/EventCalendar.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/EventCalendar.vue
index c8d47c2961..85ebbbdc92 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/EventCalendar.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/EventCalendar.vue
@@ -338,10 +338,6 @@ export default {
 
 
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Forms/MetadataEventForm.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Forms/MetadataEventForm.vue
index e8ec61077b..9c5fb0d546 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Forms/MetadataEventForm.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Forms/MetadataEventForm.vue
@@ -170,10 +170,3 @@ export default {
   },
 }
 
-
-
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Forms/NoteEventForm.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Forms/NoteEventForm.vue
index b177a89b91..c36ecb555c 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Forms/NoteEventForm.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-calendar/src/tools/Calendar/Forms/NoteEventForm.vue
@@ -145,10 +145,3 @@ export default {
   },
 }
 
-
-
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue
index 5db1a696d9..e06f6fc0af 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue
@@ -236,7 +236,7 @@ export default {
   },
   data() {
     return {
-      title: 'COSMOS Command Sender',
+      title: 'Command Sender',
       search: '',
       headers: [
         { text: 'Name', value: 'parameter_name' },
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdTlmServer.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdTlmServer.vue
index 4a641fe585..c30a23c40c 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdTlmServer.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdTlmServer.vue
@@ -79,7 +79,7 @@ export default {
   },
   data() {
     return {
-      title: 'COSMOS CmdTlmServer',
+      title: 'CmdTlmServer',
       panel: 0,
       curTab: null,
       tabs: [
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue
index d7cd1918b0..62ae83fe13 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue
@@ -329,7 +329,7 @@ export default {
   mixins: [Config, TimeFilters],
   data() {
     return {
-      title: 'COSMOS Data Extractor',
+      title: 'Data Extractor',
       configKey: 'data_extractor',
       openConfig: false,
       saveConfig: false,
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/src/tools/DataViewer/DataViewer.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/src/tools/DataViewer/DataViewer.vue
index a55ea784ba..e158dd3edf 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/src/tools/DataViewer/DataViewer.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/src/tools/DataViewer/DataViewer.vue
@@ -259,7 +259,7 @@ export default {
   mixins: [Config],
   data() {
     return {
-      title: 'COSMOS Data Viewer',
+      title: 'Data Viewer',
       configKey: 'data_viewer',
       // Initialize with all built-in components
       components: [{ label: 'COSMOS Raw/Decom', value: 'DumpComponent' }],
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/src/tools/Handbooks/Handbooks.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/src/tools/Handbooks/Handbooks.vue
index 9dcd818c83..d0af1df133 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/src/tools/Handbooks/Handbooks.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-handbooks/src/tools/Handbooks/Handbooks.vue
@@ -95,7 +95,7 @@ export default {
   },
   data() {
     return {
-      title: 'COSMOS Handbooks',
+      title: 'Handbooks',
       targetNames: [],
       selectedTargetNames: [],
       renderedTargetNames: [],
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-iframe/src/tools/Iframe/Iframe.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-iframe/src/tools/Iframe/Iframe.vue
index 5829c74e94..fc56b5f4de 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-iframe/src/tools/Iframe/Iframe.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-iframe/src/tools/Iframe/Iframe.vue
@@ -53,7 +53,7 @@ export default {
   },
   data() {
     return {
-      title: 'COSMOS Iframe',
+      title: 'Iframe',
       url: null,
     }
   },
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsMonitor.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsMonitor.vue
index 3488ab192f..a18a2fe3be 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsMonitor.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsMonitor.vue
@@ -82,7 +82,7 @@ export default {
   mixins: [Config],
   data() {
     return {
-      title: 'COSMOS Limits Monitor',
+      title: 'Limits Monitor',
       configKey: 'limits_monitor',
       api: new OpenC3Api(),
       renderKey: 0,
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue
index ed33affdfd..52022fa7bf 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue
@@ -145,7 +145,7 @@ export default {
   },
   data() {
     return {
-      title: 'COSMOS Packet Viewer',
+      title: 'Packet Viewer',
       search: '',
       data: [],
       headers: [
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
index a0d32a37b7..f51ef4b4ae 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
@@ -455,7 +455,7 @@ export default {
   },
   data() {
     return {
-      title: 'COSMOS Script Runner',
+      title: 'Script Runner',
       suiteRunner: false, // Whether to display the SuiteRunner GUI
       disableSuiteButtons: false,
       suiteMap: {
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue
index 5b963deab6..45acc1ad4a 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue
@@ -287,7 +287,7 @@ export default {
   },
   data() {
     return {
-      title: 'COSMOS Table Manager',
+      title: 'Table Manager',
       search: '',
       curTab: null,
       tables: [],
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
index 666c994674..0568bf800e 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
@@ -168,7 +168,7 @@ export default {
   mixins: [Config],
   data() {
     return {
-      title: 'COSMOS Telemetry Grapher',
+      title: 'Telemetry Grapher',
       configKey: 'telemetry_grapher',
       showOpenConfig: false,
       showSaveConfig: false,
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue
index 3f60095068..d9cb1db91d 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue
@@ -145,7 +145,7 @@ export default {
   mixins: [Config],
   data() {
     return {
-      title: 'COSMOS Telemetry Viewer',
+      title: 'Telemetry Viewer',
       panel: 0,
       counter: 0,
       definitions: [],
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss
index dd917ad9be..4b5f59de7a 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/assets/stylesheets/layout/_overrides.scss
@@ -1,6 +1,7 @@
 // This is for global overrides only. If it's contained to a component put it there.
-// Also use the variables created by vueify like var(--v-primary-darken2) rather
-// than something absolute so theming works. See vuetify.js for the base colors
+// Also use the variables created by vueify and astro like var(--v-primary-darken2)
+// or var(--color-background-base-default) rather than something absolute.
+// See vuetify.js and https://www.astrouxds.com/design-tokens/system/ for the colors
 // and note the variations are: base, lighten[1-5], and darken[1-4]
 
 .openc3-green {
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue
index 428eac5655..58757394a3 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/TopBar.vue
@@ -122,13 +122,15 @@
         
       
       
-      
+      
+      {{ title }}
       
     

   
 
 
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/OpenC3Admin.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/OpenC3Admin.vue
index be10ebf31f..69613eefcb 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/OpenC3Admin.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/OpenC3Admin.vue
@@ -16,7 +16,7 @@
 # All changes Copyright 2022, OpenC3, Inc.
 # All Rights Reserved
 #
-# This file may also be used under the terms of a commercial license 
+# This file may also be used under the terms of a commercial license
 # if purchased from OpenC3, Inc.
 -->
 
@@ -44,7 +44,7 @@ export default {
   },
   data() {
     return {
-      title: 'COSMOS Administrator Console',
+      title: 'Administrator Console',
       curTab: null,
       tabs: TabsList,
     }
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/SettingsTab.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/SettingsTab.vue
index 093b26a812..7adeb606a4 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/SettingsTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/SettingsTab.vue
@@ -100,6 +100,8 @@
       
     
     
+    
+    
     
     
     
@@ -238,10 +240,12 @@
 
 
 
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue
index 6c3a0737fd..5f28d9d64f 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue
@@ -42,10 +42,14 @@
           
           
         
         
     
     
     
     
     
     
       
       
     
     
     
     
-            
           
           
             
             
+          
+          
+            
+          
+          
             
         
         
           {{ tab.tabName }}
         
-        
-          mdi-tab-plus
-        
+        
+          
+          Add Component
+        
       
       
         
@@ -126,13 +133,20 @@
               
                 
                 
-                
-                  mdi-delete
-                
+                
+                  
+                  Remove Component
+                
               
               
   

-    
+    
       
         
       
       
-        
         
@@ -153,8 +143,7 @@ export default {
       search: '',
       data: [],
       headers: [
-        { text: 'Index', value: 'index' },
-        { text: 'Name', value: 'name' },
+        { text: 'Name', value: 'name', align: 'end' },
         { text: 'Value', value: 'value' },
       ],
       optionsDialog: false,
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/AskDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/AskDialog.vue
index 6116232eb5..99cd08ed0b 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/AskDialog.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/AskDialog.vue
@@ -31,20 +31,14 @@
         
         

           
-            
-              {{
-                question
-              }}
-            
-            
-              
-            
+            
{{ question }}

+            
           
         

         
@@ -131,3 +125,10 @@ export default {
   },
 }
 
+
+
+.question {
+  font-size: 1rem;
+  white-space: pre-line;
+}
+
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/OverridesDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/OverridesDialog.vue
index f00d57670a..f131e830ac 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/OverridesDialog.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/OverridesDialog.vue
@@ -45,6 +45,7 @@
               v-model="search"
               label="Search"
               prepend-inner-icon="mdi-magnify"
+              clearable
               outlined
               dense
               single-line
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/PromptDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/PromptDialog.vue
index 2ae976f4d1..12505d2bfb 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/PromptDialog.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/PromptDialog.vue
@@ -25,21 +25,19 @@
     
       
         
-        
+        
         
       
       

-        
+        
           
-            {{
-              subtitle
-            }}
+            {{ subtitle }}
           
           
-            
+            
           
           
-            
+            
           
         
       

@@ -182,4 +180,8 @@ export default {
   padding: 0;
   padding-bottom: 10px;
 }
+.text {
+  font-size: 1rem;
+  white-space: pre-line;
+}
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/RunningScripts.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/RunningScripts.vue
index da8ea7ad15..9987ffb033 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/RunningScripts.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/RunningScripts.vue
@@ -23,27 +23,27 @@
 
+      
     
   

 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptLogMessages.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptLogMessages.vue
index 76bf3cb0d6..3048769a50 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptLogMessages.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptLogMessages.vue
@@ -44,8 +44,11 @@
         
         
@@ -53,10 +56,12 @@
           v-model="search"
           label="Search"
           prepend-inner-icon="mdi-magnify"
+          clearable
           outlined
           dense
           single-line
           hide-details
+          style="max-width: 300px"
           data-test="search-messages"
         />
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue
index 2f6f508ed8..e82fa8592f 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue
@@ -169,10 +169,12 @@
           v-model="search"
           label="Search"
           prepend-inner-icon="mdi-magnify"
+          clearable
           outlined
           dense
           single-line
           hide-details
+          style="max-width: 350px"
         />
       
       
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
index 0c8fc8b79b..67d85d8ace 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
@@ -27,65 +27,56 @@
       
         
         
-          
-            

-              
-                
-                
-                  Add a graph from the menu bar or select an existing graph to
-                  continue
-                
-                
-              
-            

+          

+            
+              
+              
+                Add a graph from the menu bar or select an existing graph to
+                continue
+              
+              
+            
+          

 
-            
+            
+            
-              
-                
-              
-              
-                
-                  mdi-play
-                
-                
-                  mdi-pause
-                
-              
-            
-          
+              mdi-play
+            
+            
+              mdi-pause
+            
+          
         
       
     
@@ -343,6 +334,17 @@ export default {
     },
     addGraph: function () {
       const id = this.counter
+      let halfWidth = false
+      let halfHeight = false
+      // If there are existing graphs figure out how the first one looks
+      if (this.graphs.length != 0) {
+        if (this.$refs[`graph${this.graphs[0]}`][0].fullWidth === false) {
+          halfWidth = true
+        }
+        if (this.$refs[`graph${this.graphs[0]}`][0].fullHeight === false) {
+          halfHeight = true
+        }
+      }
       this.graphs.push(id)
       this.counter += 1
       this.$nextTick(function () {
@@ -351,6 +353,13 @@ export default {
         })
         this.grid.show(items)
         this.selectedGraphId = id
+        // Make the new graph match the first one
+        if (halfWidth) {
+          this.$refs[`graph${id}`][0].collapseWidth()
+        }
+        if (halfHeight) {
+          this.$refs[`graph${id}`][0].collapseHeight()
+        }
         setTimeout(() => {
           this.grid.refreshItems().layout()
         }, MURRI_REFRESH_TIME)
@@ -360,10 +369,12 @@ export default {
       var items = this.grid.getItems([document.getElementById(`gridItem${id}`)])
       this.grid.remove(items)
       this.graphs.splice(this.graphs.indexOf(id), 1)
-      this.selectedGraphId = null
       // Clear out the startTime if we close all the graphs ... we're starting over
       if (this.graphs.length === 0) {
         this.startTime = null
+        this.selectedGraphId = null
+      } else {
+        this.selectedGraphId = this.graphs[0]
       }
     },
     closeAllGraphs: function () {
@@ -463,6 +474,9 @@ i.v-icon.mdi-chevron-down {
 }
 
 
 
 
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/Widget.js b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/Widget.js
index 20e3f2c71f..348d8efd6e 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/Widget.js
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/Widget.js
@@ -148,7 +148,7 @@ export default {
             parser,
             `Not enough parameters for ${keyword}.`,
             usage,
-            'https://openc3.com/docs/v5'
+            'https://openc3.com/docs/v5',
           )
         }
       }
@@ -158,7 +158,7 @@ export default {
           parser,
           `Too many parameters for ${keyword}.`,
           usage,
-          'https://openc3.com/docs/v5'
+          'https://openc3.com/docs/v5',
         )
       }
     },
@@ -170,7 +170,7 @@ export default {
       if (this.widgetIndex !== null) {
         foundSetting = this.settings.find(
           (setting) =>
-            parseInt(setting[0]) === this.widgetIndex && setting[1] === 'WIDTH'
+            parseInt(setting[0]) === this.widgetIndex && setting[1] === 'WIDTH',
         )
       } else {
         foundSetting = this.settings.find((setting) => setting[0] === 'WIDTH')
@@ -202,7 +202,8 @@ export default {
       if (this.widgetIndex !== null) {
         foundSetting = this.settings.find(
           (setting) =>
-            parseInt(setting[0]) === this.widgetIndex && setting[1] === 'HEIGHT'
+            parseInt(setting[0]) === this.widgetIndex &&
+            setting[1] === 'HEIGHT',
         )
       } else {
         foundSetting = this.settings.find((setting) => setting[0] === 'HEIGHT')
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/InterfacesTab.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/InterfacesTab.vue
index 4acab7c549..4e1b56e99c 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/InterfacesTab.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/InterfacesTab.vue
@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
+# All changes Copyright 2023, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -22,7 +22,7 @@