:root {
  --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);

  --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(113, 189, 255);
  --colorStandbyLighten2: rgb(148, 205, 255);
  --colorStandbyLighten3: rgb(184, 222, 255);
  --colorStandbyLighten4: rgb(219, 238, 255);
  --colorStandbyDarken1: rgb(62, 138, 204);
  --colorStandbyDarken2: rgb(46, 103, 153);
  --colorStandbyDarken3: rgb(31, 69, 102);
  --colorStandbyDarken4: rgb(15, 34, 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;
}

/*
**	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 {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  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 {
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.15);
}
::-webkit-scrollbar-track:horizontal {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.dark-theme {
  /* 
    
    Global Colors
    ==========================================================================

  */
  --backgroundColor: rgb(46, 103, 153);
  --backgroundColor: var(--colorTertiaryDarken2, rgb(46, 103, 153));
  --fontColor: rgb(255, 255, 255);
  --fontColor: var(--colorWhite, rgb(255, 255, 255));
  --fontLowContrastColor: rgb(204, 204, 204);
  --fontLowContrastColor: var(--colorGray, rgb(204, 204, 204));
  --fontInvertedColor: rgb(0, 0, 0);
  --fontInvertedColor: var(--colorBlack, rgb(0, 0, 0));
  --fontInvertedBackgroundColor: rgb(255, 255, 255);
  --fontInvertedBackgroundColor: var(--colorWhite, rgb(255, 255, 255));

  --fontLinkColor: rgb(77, 172, 255);

  --fontLinkColor: var(--colorSecondary, rgb(77, 172, 255));
  --fontLinkHoverColor: rgb(113, 189, 255);
  --fontLinkHoverColor: var(--colorSecondaryLighten1, rgb(113, 189, 255));

  /* Status Custom */
  --wcagCompliance: rgba(255, 255, 255, 0);
  --criticalBorder: rgb(255, 56, 56);
  --criticalBorder: var(--colorCritical, rgb(255, 56, 56));

  --colorCritical: rgb(255, 42, 4);

  --colorCritical: var(--statusDarkCritical, rgb(255, 42, 4));
  --colorSerious: rgb(255, 175, 61);
  --colorSerious: var(--statusDarkSerious, rgb(255, 175, 61));
  --colorCaution: rgb(250, 216, 0);
  --colorCaution: var(--statusDarkCaution, rgb(250, 216, 0));
  --colorNormal: rgb(0, 226, 0);
  --colorNormal: var(--statusDarkNormal, rgb(0, 226, 0));
  --colorStandby: rgb(77, 172, 255);
  --colorStandby: var(--statusDarkStandby, rgb(77, 172, 255));
  --colorOff: rgb(142, 154, 163);
  --colorOff: var(--statusDarkOff, rgb(142, 154, 163));

  /* 
    
    Button Colors 
    ==========================================================================
    For standard and outline buttons

  */

  /* Button */
  --buttonTextColor: #fff;
  --buttonTextColor: var(--colorWhite, #fff);
  --buttonBackgroundColor: rgb(0, 90, 143);
  --buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --buttonBorderColor: 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: #fff;
  --buttonHoverTextColor: var(--colorWhite, #fff);
  --buttonHoverBackgroundColor: rgb(58, 129, 191);
  --buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));
  --buttonHoverBorderColor: 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: #fff;
  --buttonActiveControlTextColor: var(--colorWhite, #fff);
  --buttonActiveBackgroundColor: rgb(0, 90, 143);
  --buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --buttonActiveBorderColor: rgb(0, 90, 143);
  --buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143));

  /* Default Button State */
  --buttonDefaultBorderColor: #fff;
  --buttonDefaultBorderColor: var(--colorWhite, #fff);

  /* Outline Button Variant */
  --buttonOutlineTextColor: rgb(255, 255, 255);
  --buttonOutlineTextColor: var(--colorWhite, rgb(255, 255, 255));
  --buttonOutlineBackgroundColor: transparent;
  --buttonOutlineBorderColor: rgb(0, 90, 143);
  --buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143));

  /* Outline Button Variant Hover State */
  --buttonOutlineHoverTextColor: rgb(0, 90, 143);
  --buttonOutlineHoverTextColor: var(--colorSecondary, rgb(0, 90, 143));
  --buttonOutlineHoverBackgroundColor: rgba(30, 47, 66, 0.75);
  --buttonOutlineHoverBorderColor: rgb(58, 129, 191);
  --buttonOutlineHoverBorderColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));

  /* 
    
    Control Colors 
    ==========================================================================
    For checkboxes, radio buttons etc …

  */
  --controlTextColor: #fff;
  --controlTextColor: var(--colorWhite, #fff);
  --controlLabelColor: rgb(255, 255, 255);
  --controlLabelColor: var(--colorWhite, rgb(255, 255, 255));
  --controlBackgroundColor: rgb(0, 90, 143);
  --controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --controlBorderColor: rgb(77, 172, 255);
  --controlBorderColor: var(--colorSecondaryLighten1, rgb(77, 172, 255));
  --controlAccentColor: rgb(77, 172, 255);
  --controlAccentColor: var(--colorSecondaryLighten1, rgb(77, 172, 255));

  --controlSelectedTextColor: #fff;

  --controlSelectedTextColor: var(--colorWhite, #fff);
  --controlSelectedBackgroundColor: rgb(58, 129, 191);
  --controlSelectedBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));
  --controlSelectedBorderColor: rgb(255, 255, 255);
  --controlSelectedBorderColor: var(--colorWhite, rgb(255, 255, 255));

  /* 
    
    Progress Colors 
    ==========================================================================

  */
  --progressDeterminateBarBackgroundColor: rgb(77, 172, 255);
  --progressDeterminateBarBackgroundColor: var(--colorSecondary, rgb(77, 172, 255));
  --progressDeterminateTrackBackgroundColor: rgba(0, 0, 0, 0.3);
  --progressDeterminateTrackBorderColor: rgb(20, 32, 44);
  --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: rgb(0, 90, 143);
  --sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --sliderThumbBorderColor: rgb(255, 255, 255);
  --sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255));

  --sliderTrackBorderColor: transparent;
  --sliderTrackBackgroundColor: rgb(204, 204, 204);
  --sliderTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204));

  --sliderHoverThumbBackgroundColor: rgb(58, 129, 191);

  --sliderHoverThumbBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));

  --sliderSelectedTrackBackgroundColor: rgb(77, 172, 255);

  --sliderSelectedTrackBackgroundColor: var(--colorSecondary, rgb(77, 172, 255));

  /* 
    
    Segmented Button Colors 
    ==========================================================================

  */
  --segmentedButtonBorderColor: rgb(30, 47, 66);
  --segmentedButtonBorderColor: var(--colorTertiaryDarken1, rgb(30, 47, 66));
  --segmentedButtonBackgroundColor: rgb(0, 90, 143);
  --segmentedButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --segmentedButtonTextColor: rgb(255, 255, 255);
  --segmentedButtonTextColor: var(--colorWhite, rgb(255, 255, 255));

  --segmentedButtonHoverBackgroundColor: rgb(58, 129, 191);

  --segmentedButtonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));
  --segmentedButtonHoverTextColor: rgb(255, 255, 255);
  --segmentedButtonHoverTextColor: var(--colorWhite, rgb(255, 255, 255));

  --segmentedButtonSelectedBackgroundColor: rgb(58, 129, 191);

  --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: rgb(255, 255, 255);

  --segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255));

  /* 
    
    Drop Down/Select Colors 
    ==========================================================================
    
  */
  --selectBackgroundColor: rgb(0, 90, 143);
  --selectBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --selectBorderColor: rgb(0, 90, 143);
  --selectBorderColor: var(--colorPrimary, rgb(0, 90, 143));
  --selectTextColor: rgb(255, 255, 255);
  --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: rgb(0, 90, 143);

  --toggleButtonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --toggleBaseBackgroundColor: #000;
  --toggleBaseBackgroundColor: var(--colorBlack, #000);
  --toggleBaseBorderColor: rgb(0, 0, 0);
  --toggleBaseBorderColor: var(--colorBlack, rgb(0, 0, 0));
  --toggleBaseTextColor: rgb(255, 255, 255);
  --toggleBaseTextColor: var(--colorWhite, rgb(255, 255, 255));

  --toggleBaseSelectedTextColor: rgb(86, 240, 0);

  --toggleBaseSelectedTextColor: var(--colorNormal, rgb(86, 240, 0));

  /* Alt Toggle */
  /* --toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122)); */
  --toggleThumbBorderColor: #fff;
  --toggleThumbBackgroundColor: rgb(255, 255, 255);
  --toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255));

  --toggleTrackBorderColor: rgb(122, 122, 122);

  --toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122));
  --toggleTrackBackgroundColor: rgb(204, 204, 204);
  --toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204));

  /* Selected State */
  /* --toggleSelectedThumbBorderColor: var(--colorStandbyDarken2, rgb(27, 122, 153)); */
  --toggleSelectedThumbBorderColor: #fff;

  --toggleSelectedTrackBackgroundColor: rgb(77, 172, 255);

  --toggleSelectedTrackBackgroundColor: var(--colorSecondary, rgb(77, 172, 255));
  --toggleSelectedTrackBorderColor: rgb(46, 103, 153);
  --toggleSelectedTrackBorderColor: var(--colorSecondaryDarken2, rgb(46, 103, 153));

  /* Disabled State */
  --toggleDisabledThumbBorderColor: rgb(122, 122, 122);
  --toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122));
  --toggleDisabledThumbBackgroundColor: rgb(163, 163, 163);
  --toggleDisabledThumbBackgroundColor: var(--colorGrayDarken1, rgb(163, 163, 163));
  --toggleDisabledSelectedThumbBorderColor: rgb(122, 122, 122);
  --toggleDisabledSelectedThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122));

  /* 
    
    Pushbutton Colors 
    ==========================================================================

  */
  --pushbuttonBackgroundColor: rgb(0, 90, 143);
  --pushbuttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --pushbuttonBorderColor: rgb(0, 0, 0);
  --pushbuttonBorderColor: var(--colorBlack, rgb(0, 0, 0));
  --pushbuttonTextColor: rgb(255, 255, 255);
  --pushbuttonTextColor: var(--colorWhite, rgb(255, 255, 255));

  --pushbuttonSelectedBackgroundColor: rgb(0, 0, 0);

  --pushbuttonSelectedBackgroundColor: var(--colorBlack, rgb(0, 0, 0));
  --pushbuttonSelectedBorderColor: rgb(0, 0, 0);
  --pushbuttonSelectedBorderColor: var(--colorBlack, rgb(0, 0, 0));
  --pushbuttonSelectedTextColor: rgb(86, 240, 0);
  --pushbuttonSelectedTextColor: var(--colorNormal, rgb(86, 240, 0));

  /* 
    
    Clock Colors 
    ==========================================================================

  */
  --clockTextColor: rgb(255, 255, 255);
  --clockTextColor: var(--colorWhite, rgb(255, 255, 255));
  --clockBackgroundColor: rgb(20, 32, 44);
  --clockBackgroundColor: var(--colorTertiaryDarken2, rgb(20, 32, 44));
  --clockBorderColor: rgb(39, 86, 128);
  --clockBorderColor: var(--colorTertiary, rgb(39, 86, 128));

  /* 
    
    Log Colors 
    ==========================================================================

  */
  --logTextColor: rgb(255, 255, 255);
  --logTextColor: var(--colorWhite, rgb(255, 255, 255));
  --logBackgroundColor: var(--colorTertiaryDarken1);
  --logBackgroundColor: var(--colorTertiaryDarken1);
  --logBorderColor: var(--colorTertiary);
  --logBorderColor: var(--colorTertiary);

  --logHeaderTextColor: var(--colorWhiteDarken2);

  --logHeaderTextColor: var(--colorWhiteDarken2);
  --logHeaderBackgroundColor: var(--colorTertiaryDarken2);
  --logHeaderBackgroundColor: var(--colorTertiaryDarken2);

  --logFilterBackgroundColor: var(--colorStandbyLighten1);

  --logFilterBackgroundColor: var(--colorStandbyLighten1);
  --logFilterTextColor: var(--colorStandbyDarken3);
  --logFilterTextColor: var(--colorStandbyDarken3);

  /* 
    
    Tree Colors 
    ==========================================================================

  */
  --treeTextColor: rgb(255, 255, 255);
  --treeTextColor: var(--colorWhite, rgb(255, 255, 255));
  --treeBackgroundColor: var(--colorTertiaryDarken1);
  --treeBackgroundColor: var(--colorTertiaryDarken1);
  --treeBorderColor: var(--colorBlack);
  --treeBorderColor: var(--colorBlack);
  --treeItemBorderColor: var(--colorTertiary);
  --treeItemBorderColor: var(--colorTertiary);

  --treeSelectedBackgroundColor: rgb(58, 129, 191);

  --treeSelectedBackgroundColor: var(--colorPrimaryDarken1, rgb(58, 129, 191));

  /* 
    
    Tab Colors 
    ==========================================================================

  */
  --tabTextColor: rgb(77, 172, 255);
  --tabTextColor: var(--colorSecondary, rgb(77, 172, 255));
  --tabBackgroundColor: rgb(30, 47, 66);
  --tabBackgroundColor: var(--colorTertiaryDarken1, rgb(30, 47, 66));
  --tabBorderColor: rgb(20, 32, 44);
  --tabBorderColor: var(--colorTertiaryDarken2, rgb(20, 32, 44));

  --tabSelectedTextColor: rgb(255, 255, 255);

  --tabSelectedTextColor: var(--colorWhite, rgb(255, 255, 255));
  --tabSelectedBorderColor: rgb(77, 172, 355);
  --tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 355));

  /* 
    
    Card Colors 
    ==========================================================================

  */

  --cardBackgroundColor: var(--colorTertiaryDarken1);

  --cardBackgroundColor: var(--colorTertiaryDarken1);

  --cardHeaderBackgroundColor: var(--colorTertiaryDarken3);

  --cardHeaderBackgroundColor: var(--colorTertiaryDarken3);
  --cardHeaderTextColor: #fff;
  --cardHeaderTextColor: var(--colorWhite, #fff);
  /* 
    
    Input/Text Field Colors 
    ==========================================================================
    
  */

  --inputBackgroundColor: rgb(255, 255, 255);

  --inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255));
  --inputBorderColor: transparent;
  --inputTextColor: rgb(14, 11, 11);
  --inputTextColor: var(--colorBlack, rgb(14, 11, 11));

  --inputFocusBorderColor: var(--colorSecondary);

  --inputFocusBorderColor: var(--colorSecondary);
  /* --inputFocusBoxShadow: 0 0 4px var(--colorSecondaryLighten3); */
  --inputFocusBoxShadow: inset 0 0 0 1px white, inset 0 0 0 2px var(--colorPrimary);
  --inputFocusBoxShadow: inset 0 0 0 1px white, inset 0 0 0 2px var(--colorPrimary);

  --inputInvalidBorderColor: rgb(255, 48, 48);

  --inputInvalidBorderColor: var(--colorCritical, rgb(255, 48, 48));

  /* 
    
    Status Symbols
    ==========================================================================
    
  */
  --statusOff: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%238C9AA3%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --statusStandby: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%234DACFF%22%20stroke-width%3D%223%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --statusNormal: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%20fill%3D%22%2300E600%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --statusCaution: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFD800%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2%204H14V12H2z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --statusSerious: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFAB00%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3%203H12V12H3z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --statusCritical: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22red%22%20fill-rule%3D%22evenodd%22%20d%3D%22M15%2013.667L1%2013.667%208%202z%22%2F%3E%0A%3C%2Fsvg%3E%0A');

  /* 
    
    Scrollbar Colors -- Dark
    ==========================================================================
    
  */

  --scrollBarThumbBackgroundColor: rgb(46, 103, 153);

  --scrollBarThumbBackgroundColor: var(--colorSecondaryDarken2, rgb(46, 103, 153));
  --scrollBarThumbBackgroundHoverColor: rgb(58, 129, 191);
  --scrollBarThumbBackgroundHoverColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));
  --scrollBarTrackBackgroundColor: rgb(32, 50, 70);
  --scrollBarTrackBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));
  --scrollBarTrackCornerBackgroundColor: rgb(32, 50, 70);
  --scrollBarTrackCornerBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));

  /* 
    
    Timeline Colors -- Dark
    ==========================================================================
      
  */

  --timelineHeaderBackgroundColor: rgb(32, 50, 70);

  --timelineHeaderBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));
  --timelineHeaderTextColor: rgb(255, 255, 255);
  --timelineHeaderTextColor: var(--fontColor, rgb(255, 255, 255));

  --timelineRulerBackgroundColor: rgb(32, 50, 70);

  --timelineRulerBackgroundColor: var(--colorTertiaryDarken1, rgb(32, 50, 70));
  --timelineRulerTextColor: rgb(255, 255, 255);
  --timelineRulerTextColor: var(--fontColor, rgb(255, 255, 255));

  --timelineTrackLabelBackgroundColor: rgb(40, 63, 88);

  --timelineTrackLabelBackgroundColor: var(--colorTertiary, rgb(40, 63, 88));
  --timelineTrackBackgroundColor: rgb(40, 63, 88);
  --timelineTrackBackgroundColor: var(--colorTertiary, rgb(40, 63, 88));

  --timelineRegionBackgroundColor: rgb(0, 36, 57);

  --timelineRegionBackgroundColor: var(--colorPrimaryDarken3, rgb(0, 36, 57));
  --timelineRegionTextColor: rgb(255, 255, 255);
  --timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255));
  --timelineRegionBorderColor: rgb(0, 90, 143);
  --timelineRegionBorderColor: var(--colorPrimary, rgb(0, 90, 143));

  --timelineRegionSelectedBorderColor: rgb(77, 172, 255);

  --timelineRegionSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255));
  --timelineRegionSelectedBackgroundColor: rgb(62, 138, 204);
  --timelineRegionSelectedBackgroundColor: var(--colorSecondaryDarken1, rgb(62, 138, 204));
  --timelineRegionSelectedTextColor: rgb(255, 255, 255);
  --timelineRegionSelectedTextColor: var(--fontColor, rgb(255, 255, 255));
}

li.dark-theme {
  display: none;
}

.light-theme {
  /* 
    
    Global Colors 
    ==========================================================================

  */
  --backgroundColor: rgb(243, 245, 248);
  --backgroundColor: var(--colorQuaternaryLighten3, rgb(243, 245, 248));
  --fontColor: rgb(0, 0, 0);
  --fontColor: var(--colorBlack, rgb(0, 0, 0));
  --fontLowContrastColor: rgb(204, 204, 204);
  --fontLowContrastColor: var(--colorGray, rgb(204, 204, 204));
  --fontInvertedColor: rgb(255, 255, 255);
  --fontInvertedColor: var(--colorWhite, rgb(255, 255, 255));
  --fontInvertedBackgroundColor: rgb(0, 0, 0);
  --fontInvertedBackgroundColor: var(--colorBlack, rgb(0, 0, 0));

  --fontLinkColor: rgb(62, 138, 204);

  --fontLinkColor: var(--colorSecondaryDarken1, rgb(62, 138, 204));
  --fontLinkHoverColor: rgb(77, 172, 255);
  --fontLinkHoverColor: var(--colorSecondary, rgb(77, 172, 255));

  --wcagCompliance: rgba(0, 0, 0, 0.5);
  --criticalBorder: #7f1c1c;

  --colorCritical: rgb(255, 42, 4);

  --colorCritical: var(--statusLightCritical, rgb(255, 42, 4));
  --colorSerious: rgb(255, 175, 61);
  --colorSerious: var(--statusLightSerious, rgb(255, 175, 61));
  --colorCaution: rgb(250, 216, 0);
  --colorCaution: var(--statusLightCaution, rgb(250, 216, 0));
  --colorNormal: rgb(0, 226, 0);
  --colorNormal: var(--statusLightNormal, rgb(0, 226, 0));
  --colorStandby: rgb(100, 217, 255);
  --colorStandby: var(--statusLightStandby, rgb(100, 217, 255));
  --colorOff: rgb(142, 154, 163);
  --colorOff: var(--statusLightOff, rgb(142, 154, 163));
  /* 
    
    Button Colors 
    ==========================================================================
    For standard and outline buttons
    
  */

  /* Button */
  --buttonTextColor: rgb(255, 255, 255);
  --buttonTextColor: var(--colorWhite, rgb(255, 255, 255));
  --buttonBackgroundColor: rgb(0, 90, 143);
  --buttonBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --buttonBorderColor: 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: rgb(255, 255, 255);
  --buttonHoverTextColor: var(--colorWhite, rgb(255, 255, 255));
  --buttonHoverBackgroundColor: rgb(58, 129, 191);
  --buttonHoverBackgroundColor: var(--colorSecondaryDarken1, rgb(58, 129, 191));
  --buttonHoverBorderColor: 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: rgb(255, 255, 255);
  --buttonActiveControlTextColor: var(--colorWhite, rgb(255, 255, 255));
  --buttonActiveBackgroundColor: rgb(0, 90, 143);
  --buttonActiveBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --buttonActiveBorderColor: rgb(0, 90, 143);
  --buttonActiveBorderColor: var(--colorPrimary, rgb(0, 90, 143));

  /* Default Button State */
  --buttonDefaultBorderColor: rgb(255, 255, 255);
  --buttonDefaultBorderColor: var(--colorWhite, rgb(255, 255, 255));

  /* Outline Button Variant */
  --buttonOutlineTextColor: rgb(0, 90, 143);
  --buttonOutlineTextColor: var(--colorPrimary, rgb(0, 90, 143));
  --buttonOutlineBackgroundColor: transparent;
  --buttonOutlineBorderColor: rgb(0, 90, 143);
  --buttonOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143));

  /* Outline Button Variant Hover State */
  --buttonOutlineHoverTextColor: rgb(0, 90, 143);
  --buttonOutlineHoverTextColor: var(--colorPrimary, rgb(0, 90, 143));
  --buttonOutlineHoverBackgroundColor: rgba(0, 90, 143, 0.05);
  --buttonOutlineHoverBorderColor: rgb(58, 129, 191)
  ;
  --buttonOutlineHoverBorderColor: var(
    --colorSecondaryDarken1,
    rgb(58, 129, 191)
  );

  /* 
    
    Control Colors 
    ==========================================================================
    For checkboxes, radio buttons etc …

  */
  --controlTextColor: rgb(255, 255, 255);
  --controlTextColor: var(--colorWhite, rgb(255, 255, 255));
  --controlLabelColor: rgb(0, 0, 0);
  --controlLabelColor: var(--colorBlack, rgb(0, 0, 0));
  --controlBackgroundColor: rgb(0, 90, 143);
  --controlBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --controlBorderColor: rgb(0, 90, 143);
  --controlBorderColor: var(--colorPrimary, rgb(0, 90, 143));
  --controlAccentColor: rgb(77, 172, 255);
  --controlAccentColor: var(--colorSecondary, rgb(77, 172, 255));

  --controlSelectedTextColor: rgb(0, 0, 0);

  --controlSelectedTextColor: var(--colorBlack, rgb(0, 0, 0));
  --controlSelectedBackgroundColor: rgb(58, 129, 191)
  ;
  --controlSelectedBackgroundColor: var(
    --colorSecondaryDarken1,
    rgb(58, 129, 191)
  );
  --controlSelectedBorderColor: rgb(0, 90, 143);
  --controlSelectedBorderColor: var(--colorPrimary, rgb(0, 90, 143));

  --controlHoverOutlineBackgroundColor: none;
  --controlSelectedOutlineBorderColor: rgb(0, 90, 143);
  --controlSelectedOutlineBorderColor: var(--colorPrimary, rgb(0, 90, 143));
  --controlSelectedOutlineBackgroundColor: rgb(58, 129, 191)
  ;
  --controlSelectedOutlineBackgroundColor: var(
    --colorSecondaryDarken1,
    rgb(58, 129, 191)
  );

  /* 
    
    Progress Bar Colors 
    ==========================================================================

  */
  --progressDeterminateBarBackgroundColor: rgb(77, 172, 255)
  ;
  --progressDeterminateBarBackgroundColor: var(
    --colorSecondary,
    rgb(77, 172, 255)
  );
  --progressDeterminateTrackBackgroundColor: rgb(255, 255, 255)
  ;
  --progressDeterminateTrackBackgroundColor: var(
    --colorWhite,
    rgb(255, 255, 255)
  );
  --progressDeterminateTrackBorderColor: rgb(207, 214, 227)
  ;
  --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: rgb(0, 90, 143);
  --sliderThumbBackgroundColor: var(--colorPrimary, rgb(0, 90, 143));
  --sliderThumbBorderColor: rgb(255, 255, 255);
  --sliderThumbBorderColor: var(--colorWhite, rgb(255, 255, 255));

  --sliderTrackBorderColor: rgb(207, 214, 227);

  --sliderTrackBorderColor: var(--colorQuaternary, rgb(207, 214, 227));
  --sliderTrackBackgroundColor: rgb(255, 255, 255);
  --sliderTrackBackgroundColor: var(--colorWhite, rgb(255, 255, 255));

  --sliderSelectedTrackBackgroundColor: rgb(77, 172, 255)
  ;

  --sliderSelectedTrackBackgroundColor: var(
    --colorSecondary,
    rgb(77, 172, 255)
  );

  /* 
    
    Segmented Button Colors 
    ==========================================================================

  */
  --segmentedButtonBorderColor: rgb(0, 90, 143);
  --segmentedButtonBorderColor: var(--colorPrimary, rgb(0, 90, 143));
  --segmentedButtonBackgroundColor: rgb(255, 255, 255);
  --segmentedButtonBackgroundColor: var(--colorWhite, rgb(255, 255, 255));
  --segmentedButtonTextColor: rgb(0, 90, 143);
  --segmentedButtonTextColor: var(--colorPrimary, rgb(0, 90, 143));

  --segmentedButtonHoverBackgroundColor: rgb(0, 90, 143, 0.05);
  --segmentedButtonHoverTextColor: rgb(0, 90, 143);
  --segmentedButtonHoverTextColor: var(--colorPrimary, rgb(0, 90, 143));

  --segmentedButtonSelectedBackgroundColor: rgb(58, 129, 191)
  ;

  --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);
  transition: box-shadow 0.067s ease-out;

  --segmentedButtonSelectedTextColor: rgb(255, 255, 255);

  --segmentedButtonSelectedTextColor: var(--colorWhite, rgb(255, 255, 255));

  /* 
    
    Drop Down/Select Colors 
    ==========================================================================
    
  */
  --selectBackgroundColor: rgb(255, 255, 255);
  --selectBackgroundColor: var(--colorWhite, rgb(255, 255, 255));
  --selectBorderColor: rgb(0, 90, 143);
  --selectBorderColor: var(--colorPrimary, rgb(0, 90, 143));
  --selectTextColor: 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: rgb(255, 255, 255);

  --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%
  );

  --toggleBaseBackgroundColor: linear-gradient(
    to right,
    var(--colorNormal) 50%,
    var(--colorPrimaryLighten4) 50.1%
  );
  --toggleBaseBorderColor: rgb(0, 90, 143);
  --toggleBaseBorderColor: var(--colorPrimaryLighten1, rgb(0, 90, 143));
  --toggleBaseTextColor: rgb(255, 255, 255);
  --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: rgb(122, 122, 122);
  --toggleThumbBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122));
  --toggleThumbBackgroundColor: rgb(255, 255, 255);
  --toggleThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255));

  --toggleSelectedThumbBorderColor: rgb(27, 122, 153)
  ;

  --toggleSelectedThumbBorderColor: var(
    --colorStandbyDarken2,
    rgb(27, 122, 153)
  );
  --toggleSelectedThumbBackgroundColor: rgb(100, 217, 255);
  --toggleSelectedThumbBackgroundColor: var(--colorStandby, rgb(100, 217, 255));

  --toggleTrackBorderColor: rgb(122, 122, 122);

  --toggleTrackBorderColor: var(--colorGrayDarken2, rgb(122, 122, 122));
  --toggleTrackBackgroundColor: rgb(204, 204, 204);
  --toggleTrackBackgroundColor: var(--colorGray, rgb(204, 204, 204));

  --toggleSelectedTrackBorderColor: rgb(27, 122, 153)
  ;

  --toggleSelectedTrackBorderColor: var(
    --colorStandbyDarken2,
    rgb(27, 122, 153)
  );
  --toggleSelectedTrackBackgroundColor: rgb(100, 217, 255);
  --toggleSelectedTrackBackgroundColor: var(--colorStandby, rgb(100, 217, 255));

  --toggleDisabledThumbBorderColor: rgb(122, 122, 122);

  --toggleDisabledThumbBorderColor: var(--colorGrayDarken1, rgb(122, 122, 122));
  --toggleDisabledThumbBackgroundColor: rgb(255, 255, 255);
  --toggleDisabledThumbBackgroundColor: var(--colorWhite, rgb(255, 255, 255));
  --toggleDisabledSelectedThumbBorderColor: rgb(153, 189, 210)
  ;
  --toggleDisabledSelectedThumbBorderColor: var(
    --colorPrimaryLighten3,
    rgb(153, 189, 210)
  );

  /* 
    
    Pushbutton Colors 
    ==========================================================================

  */

  --pushbuttonBackgroundColor: rgb(255, 255, 255);

  --pushbuttonBackgroundColor: var(--colorWhite, rgb(255, 255, 255));
  --pushbuttonBorderColor: rgb(0, 90, 143);
  --pushbuttonBorderColor: var(--colorPrimary, rgb(0, 90, 143));
  --pushbuttonTextColor: rgb(0, 90, 143);
  --pushbuttonTextColor: var(--colorPrimary, rgb(0, 90, 143));

  --pushbuttonSelectedBackgroundColor: rgb(91, 255, 0);

  --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: rgb(0, 0, 0);

  --clockTextColor: var(--colorBlack, rgb(0, 0, 0));
  --clockBackgroundColor: rgb(255, 255, 255);
  --clockBackgroundColor: var(--colorWhite, rgb(255, 255, 255));
  --clockBorderColor: rgb(39, 86, 128);
  --clockBorderColor: var(--colorQuaternary, rgb(39, 86, 128));

  /* 
    
    Modal Colors 
    ==========================================================================

  */

  --modalTextColor: rgb(0, 0, 0);

  --modalTextColor: var(--colorBlack, rgb(0, 0, 0));
  --modalBackgroundColor: rgb(255, 255, 255);
  --modalBackgroundColor: var(--colorWhite, rgb(255, 255, 255));
  --modalBorderColor: rgb(0, 90, 143);
  --modalBorderColor: var(--colorPrimary, rgb(0, 90, 143));
  /* 
    
    Log Colors 
    ==========================================================================

  */
  --logTextColor: var(--colorBlack);
  --logTextColor: var(--colorBlack);
  --logBackgroundColor: var(--colorWhite);
  --logBackgroundColor: var(--colorWhite);
  --logBorderColor: var(--colorQuaternaryLighten2);
  --logBorderColor: var(--colorQuaternaryLighten2);

  --logHeaderTextColor: var(--colorBlack);

  --logHeaderTextColor: var(--colorBlack);
  --logHeaderBackgroundColor: var(--colorQuaternary);
  --logHeaderBackgroundColor: var(--colorQuaternary);

  --logFilterBackgroundColor: var(--colorStandbyLighten3);

  --logFilterBackgroundColor: var(--colorStandbyLighten3);
  --logFilterTextColor: var(--colorStandbyDarken2);
  --logFilterTextColor: var(--colorStandbyDarken2);

  /* 
    
    Tree Colors 
    ==========================================================================

  */
  --treeTextColor: rgb(0, 0, 0);
  --treeTextColor: var(--colorBlack, rgb(0, 0, 0));
  --treeBackgroundColor: var(--colorWhite);
  --treeBackgroundColor: var(--colorWhite);
  --treeBorderColor: var(--colorQuaternary);
  --treeBorderColor: var(--colorQuaternary);
  --treeItemBorderColor: var(--colorQuaternary);
  --treeItemBorderColor: var(--colorQuaternary);

  --treeAccentColor: var(--colorSecondary);

  --treeAccentColor: var(--colorSecondary);

  --treeSelectedBackgroundColor: rgb(58, 129, 191)
  ;

  --treeSelectedBackgroundColor: var(
    --colorSecondaryDarken1,
    rgb(58, 129, 191)
  );
  --treeSelectedAccentColor: var(--colorSecondaryLighten1);
  --treeSelectedAccentColor: var(--colorSecondaryLighten1);
  --treeSelectedTextColor: var(--colorWhite);
  --treeSelectedTextColor: var(--colorWhite);

  /* 
    
    Tab Colors 
    ==========================================================================

  */
  --tabTextColor: rgb(0, 90, 143);
  --tabTextColor: var(--colorPrimary, rgb(0, 90, 143));
  --tabBackgroundColor: rgb(255, 255, 255);
  --tabBackgroundColor: var(--colorWhite, rgb(255, 255, 255));
  --tabBorderColor: rgb(219, 224, 234);
  --tabBorderColor: var(--colorQuaternaryLighten1, rgb(219, 224, 234));

  --tabHoverTextColor: rgb(77, 172, 255);

  --tabHoverTextColor: var(--colorSecondary, rgb(77, 172, 255));

  --tabSelectedTextColor: rgb(0, 0, 0);

  --tabSelectedTextColor: var(--colorBlack, rgb(0, 0, 0));
  --tabSelectedBorderColor: rgb(77, 172, 255);
  --tabSelectedBorderColor: var(--colorSecondary, rgb(77, 172, 255));

  /* 
    
    Card Colors 
    ==========================================================================

  */
  --cardBackgroundColor: var(--colorQuaternaryLighten2);
  --cardBackgroundColor: var(--colorQuaternaryLighten2);

  --cardHeaderBackgroundColor: var(--colorQuaternaryLighten1);

  --cardHeaderBackgroundColor: var(--colorQuaternaryLighten1);
  --cardHeaderTextColor: #fff;
  --cardHeaderTextColor: var(--colorWhite, #fff);

  /* 
    
    Input/Text Field Colors 
    ==========================================================================
    
  */

  --inputBackgroundColor: rgb(255, 255, 255);

  --inputBackgroundColor: var(--colorWhite, rgb(255, 255, 255));
  --inputBorderColor: rgb(255, 255, 255);
  --inputBorderColor: var(--colorQuaternaryDarken1, rgb(255, 255, 255));
  --inputTextColor: rgb(14, 11, 11);
  --inputTextColor: var(--colorBlack, rgb(14, 11, 11));

  --inputFocusBorderColor: var(--colorSecondary);

  --inputFocusBorderColor: var(--colorSecondary);
  --inputFocusBoxShadow: none;

  --inputInvalidBorderColor: rgb(255, 48, 48);

  --inputInvalidBorderColor: var(--colorCritical, rgb(255, 48, 48));

  /* 
    
    Status
    ==========================================================================

  */

  --statusOff: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222.5%22%20fill%3D%22%238C9AA3%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  --statusStandby: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20stroke%3D%22%231EDCFF%22%20stroke-width%3D%224%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222.5%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%225.5%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
  --statusNormal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%225.5%22%20fill%3D%22%2300E600%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  --statusCaution: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFD800%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%20d%3D%22M2.5%204.5H13.5V11.5H2.5z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  --statusSerious: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFAB00%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%20d%3D%22M3.5%203.5H11.5V11.5H3.5z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  --statusCritical: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22red%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.5%22%20d%3D%22M14.1294815%2C13.5%20L8%2C2.99231743%20L1.8705185%2C13.5%20L14.1294815%2C13.5%20Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  /* 
   
    
    Scrollbar Colors -- Light
    ==========================================================================
    
  */

  --scrollBarThumbBackgroundColor: #9ba0aa;

  --scrollBarThumbBackgroundColor: var(--colorQuaternaryDarken1, #9ba0aa);
  --scrollBarThumbBackgroundHoverColor: #676a71;
  --scrollBarThumbBackgroundHoverColor: var(--colorQuaternaryDarken2, #676a71);
  --scrollBarTrackBackgroundColor: transparent;
  --scrollBarTrackCornerBackgroundColor: #f2f4f7
  ;
  --scrollBarTrackCornerBackgroundColor: var(
    --colorQuaternaryLighten4,
    #f2f4f7
  );

  /* 
    
    Timeline Colors -- Dark
    ==========================================================================
      
  */

  --timelineHeaderBackgroundColor: rgb(16, 25, 35);

  --timelineHeaderBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35));
  --timelineHeaderTextColor: rgb(0, 0, 0);
  --timelineHeaderTextColor: var(--fontColor, rgb(0, 0, 0));

  --timelineRulerBackgroundColor: rgb(16, 25, 35);

  --timelineRulerBackgroundColor: var(--colorQuaternary, rgb(16, 25, 35));
  --timelineRulerTextColor: rgb(0, 0, 0);
  --timelineRulerTextColor: var(--fontColor, rgb(0, 0, 0));

  --timelineTrackLabelBackgroundColor: rgb(40, 63, 88)
  ;

  --timelineTrackLabelBackgroundColor: var(
    --colorQuaternaryLighten2,
    rgb(40, 63, 88)
  );
  --timelineTrackBackgroundColor: rgb(40, 63, 88)
  ;
  --timelineTrackBackgroundColor: var(
    --colorQuaternaryLighten2,
    rgb(40, 63, 88)
  );

  --timelineRegionBackgroundColor: rgb(24, 38, 53);

  --timelineRegionBackgroundColor: var(--colorPrimaryLighten4, rgb(24, 38, 53));
  --timelineRegionTextColor: rgb(255, 255, 255);
  --timelineRegionTextColor: var(--fontColor, rgb(255, 255, 255));
  --timelineRegionBorderColor: var(--colorPrimaryLighten3);
  --timelineRegionBorderColor: var(--colorPrimaryLighten3);

  --timelineRegionSelectedBorderColor: rgb(77, 172, 255)
  ;

  --timelineRegionSelectedBorderColor: var(
    --colorSecondaryDarken3,
    rgb(77, 172, 255)
  );
  --timelineRegionSelectedBackgroundColor: rgb(62, 138, 204)
  ;
  --timelineRegionSelectedBackgroundColor: var(
    --colorSecondaryDarken1,
    rgb(62, 138, 204)
  );
  --timelineRegionSelectedTextColor: rgb(255, 255, 255);
  --timelineRegionSelectedTextColor: var(--fontColor, rgb(255, 255, 255));
}

li.light-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);
}

: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;
}

.any-theme {
  display: none;
}

.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-flex;
  display: flex;
  -webkit-justify-content: 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-order: 1;
          order: 1;
}

.rux-advanced-status__icon {
  -webkit-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-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;
}

/*
**
** ADVANCED STATUS
** =======================================================================
** Defines the implementation of an advanced status system that expands 
** the generic status icons to custom symbols and badges indicating counts
** 
**
** NOTE: 	This is not a sub-class of the satcom-status class, but an 
**			entirely self-contained library
**			
*/

/*
** SVG utilities
** -----------------------------------------------------------------------
** These handle some basic rendering and inheritance for the SVG icons
**
*/

/* svg path,
svg circle {
  fill: inherit;
}
 */

.rux-clock {
  display: -webkit-flex;
  display: flex;
  color: rgb(255, 255, 255);
  color: var(--clockTextColor, rgb(255, 255, 255));

  font-size: 1.15rem;
}

.rux-clock__segment {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
}

.rux-clock__segment__value {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: 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--compact .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--compact) .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-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  position: relative;
  -webkit-justify-content: space-between;
          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-flex;
  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-flex;
  display: flex;
  -webkit-align-content: flex-start;
          align-content: flex-start;
}

.rux-log__events {
  height: 100%;
  overflow-y: scroll;
}

.log-event__timestamp {
  -webkit-flex-shrink: 0;
          flex-shrink: 0;

  text-align: right;
  width: 5rem;
}

.rux-log__log-event {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  -webkit-align-items: flex-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-flex-grow: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  text-align: center;
  width: 1rem;
  overflow: hidden;
}

.log-event__message {
  -webkit-flex-grow: 1;
          flex-grow: 1;
  text-align: left;
}

.log-header__message {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          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;

  -webkit-align-content: 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-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
          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;

  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-flex;
  display: flex;
  -webkit-flex-grow: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: 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-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  padding: 1rem;
  color: rgb(255, 255, 255);
  color: var(--fontColor, rgb(255, 255, 255));
}

.rux-button-group {
  
  margin-left: auto;
  -webkit-align-self: flex-end;
          align-self: flex-end;
}

.rux-modal__message {
  margin: 0.5rem 1.875rem 2.5rem 1.875rem;
}

.rux-modal .rux-button {
  box-shadow: none !important;
}

/*
**
** 	ASTRO NOTIFICATION
** 	==========================================================================
**	2.0 Notes
**
*/
.rux-notification {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-content: center;
          align-content: center;

  top: -4.25rem;
  left: 0;

  height: 4.25rem;
  width: 100%;

  padding: 0.7rem 1.25rem;
  background-color: rgb(160, 232, 255);
  background-color: var(--colorStandbyLighten1, rgb(160, 232, 255));
  transition: all 0.5s ease;

  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(96, 168, 191);
  border: 3px solid var(--colorStandbyDarken1, rgb(96, 168, 191));
  color: rgb(96, 168, 191);
  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-flex;

  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: 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(96, 168, 191);

  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, 100, 100);
  background-color: var(--colorCriticalLighten1, rgb(255, 100, 100));
}

.rux-notification--critical .rux-notification_close-button {
  border-color: rgb(191, 36, 36);
  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(191, 36, 36);
  background-color: var(--colorCriticalDarken1, rgb(191, 36, 36));
}

/* Caution Variant */
.rux-notification--caution {
  background-color: rgb(250, 237, 86);
  background-color: var(--colorCautionLighten1, rgb(250, 237, 86));
}
.rux-notification--caution .rux-notification_close-button {
  border-color: rgb(186, 173, 22);
  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(186, 173, 22);
  background-color: var(--colorCautionDarken1, rgb(186, 173, 22));
}

/* Normal Variant */
.rux-notification--normal {
  background-color: rgb(173, 255, 128);
  background-color: var(--colorNormalLighten2, rgb(173, 255, 128));
}

.rux-notification--normal .rux-notification_close-button {
  border-color: rgb(68, 191, 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(68, 191, 0);
  background-color: var(--colorNormalDarken1, rgb(68, 191, 0));
}

/* Info Variant */
.rux-notification--info {
  background-color: rgb(160, 232, 255);
  background-color: var(--colorStandbyLighten1, rgb(160, 232, 255));
}
.rux-notification--info .rux-notification_close-button {
  border-color: rgb(96, 168, 191);
  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(96, 168, 191);
  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(211, 234, 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-flex;
  display: flex;
  position: relative;

  -webkit-justify-content: space-between;

          justify-content: space-between;
  -webkit-align-items: 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;
  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-flex;
  display: flex;

  -webkit-justify-content: center;

          justify-content: center;
  -webkit-align-items: 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-flex;
  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));

  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-flex;
  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-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: 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));
  box-shadow: 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)
  );
  transition: 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: 1.25rem;
  --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 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);
  --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-flex;
  display: flex;
  -webkit-align-items: 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: 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: 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: flex;
  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;
  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);

  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: rgb(77, 172, 255);
  border-color: var(--colorSecondary, rgb(77, 172, 255));
  background-color: rgb(255, 255, 255);
  box-shadow: 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);
}

.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: rgb(58, 129, 191);
  background-color: var(--sliderHoverThumbBackgroundColor, rgb(58, 129, 191));
  box-shadow: 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);
}

/*
**
** 	ASTRO STATUS INDICATOR
** 	==========================================================================
**  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,
.satcom-status {
  font-size: 1rem;

  line-height: 1;
  padding: 0;
  vertical-align: middle;
  text-align: center;

  height: 16px;
  width: 16px;

  margin: 2px;
  /* outline: 1px solid rgba(127, 127, 127, 0.5); */
}

/* Icon */
.rux-status-indicator::before,
.rux-status::before,
.satcom-status::before {
  content: '';
  display: inline-block;

  height: 16px;
  width: 16px;

  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}

/* Advanced Status */

/* Specific Status Iconography */
.rux-status-indicator.rux-status--off::before,
.rux-status--off .rux-advanced-status__icon::before,
.satcom-status-off::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%238C9AA3%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  ;
  background-image: var(
    --statusOff,
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%238C9AA3%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  );
}

.rux-status-indicator.rux-status--standby::before,
.rux-status--standby .rux-advanced-status__icon::before,
.satcom-status-standby::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%234DACFF%22%20stroke-width%3D%223%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  ;
  background-image: var(
    --statusStandby,
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%234DACFF%22%20stroke-width%3D%223%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  );
}

.rux-status-indicator.rux-status--normal::before,
.rux-status-indicator.rux-status--ok::before,
.rux-status--normal .rux-advanced-status__icon::before,
.rux-status--ok .rux-advanced-status__icon::before,
.satcom-status-ok::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%20fill%3D%22%2300E600%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  ;
  background-image: var(
    --statusNormal,
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%20fill%3D%22%2300E600%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  );
  /* background-position: 1px 1px; */
}

.rux-status-indicator.rux-status--caution::before,
.rux-status--caution .rux-advanced-status__icon::before,
.satcom-status-caution::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFD800%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2%204H14V12H2z%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  ;
  background-image: var(
    --statusCaution,
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFD800%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2%204H14V12H2z%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  );
  /* background-position: 1px 1px; */
}

.rux-status-indicator.rux-status--serious::before,
.rux-status-indicator.rux-status--error::before,
.rux-status--serious .rux-advanced-status__icon::before,
.rux-status--error .rux-advanced-status__icon::before,
.satcom-status-error::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFAB00%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3%203H12V12H3z%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  ;
  background-image: var(
    --statusSerious,
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFAB00%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3%203H12V12H3z%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  );
  margin-top: 1px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.rux-status-indicator.rux-status--critical::before,
.rux-status-indicator.rux-status--alert::before,
.rux-status--critical .rux-advanced-status__icon::before,
.rux-status--alert .rux-advanced-status__icon::before,
.rux-status--emergency .rux-advanced-status__icon::before,
.satcom-status-alert::before {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22red%22%20fill-rule%3D%22evenodd%22%20d%3D%22M15%2013.667L1%2013.667%208%202z%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  ;
  background-image: var(
    --statusCritical,
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22red%22%20fill-rule%3D%22evenodd%22%20d%3D%22M15%2013.667L1%2013.667%208%202z%22%2F%3E%0A%3C%2Fsvg%3E%0A')
  );
  background-position: 0 -1px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* 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));
}

/* Small Status Modifiers */
.rux-status--small,
.satcom-status-small {
  font-size: 0.8rem;
  margin: 0 0 1rem 0;
}

.rux-status--small::before,
.satcom-status-small::before {
  height: 18px;
  width: 18px;
}

/*
**
** 	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--compact {
  height: 3.125rem;
  font-size: 1rem;
}

.rux-tabs ul,
.satcom-tabs ul {
  padding: 0;
  margin: 0;
  height: 100%;

  display: -webkit-flex;

  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-flex;
  display: flex;
  -webkit-align-items: 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));
  box-shadow: inset 0 -5px 0 0 rgb(77, 172, 255);
  box-shadow: inset 0 -5px 0 0 var(--tabSelectedBorderColor, rgb(77, 172, 255));
}

.rux-tabs--compact .selected a,
.rux-tabs--compact .selected a:hover {
  color: rgb(255, 255, 255);
  color: var(--tabSelectedTextColor, rgb(255, 255, 255));
  box-shadow: inset 0 -3px 0 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));
  box-shadow: inset 0 -5px 0 0 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: rgb(255, 255, 255);
  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;
  box-sizing: border-box;

  -webkit-font-smoothing: subpixel-antialiased;

  height: 1.3125rem;
  width: 4.375rem;
  border-radius: 0.1875rem;
  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-flex;
  display: flex;

  -webkit-justify-content: space-around;

          justify-content: space-around;
  -webkit-align-content: center;
          align-content: center;
  -webkit-align-items: center;
          align-items: center;

  top: 0;
  left: 0;

  font-size: 0.75rem !important;

  height: 100%;
  width: 100%;
}

.rux-toggle--legacy__button span {
  display: -webkit-flex;
  display: flex;

  -webkit-align-content: center;

          align-content: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: 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;

  box-sizing: border-box;

  top: 0;
  left: 0;

  z-index: 10;

  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;

  box-shadow: 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%;
  box-shadow: 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-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  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-flex;
  display: flex;
  /* justify-content: center;
  align-content: center; */
  -webkit-align-items: center;
          align-items: center;
}

.rux-toggle__button::before {
  position: relative;

  display: -webkit-flex;

  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;

  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));

  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;
  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 {
  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-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: center;
          align-items: center;
  -webkit-align-content: stretch;
          align-content: stretch;
  padding: 0 0 0 1.25rem;
  margin: 0;
}

.rux-tree__label {
  -webkit-flex-grow: 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));
  box-shadow: inset 5px 0 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
    rgb(77, 172, 255);
  border-color: transparent transparent transparent
    var(--treeSelectedAccentColor, rgb(77, 172, 255));
}

/*
**
** 	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-flex;
  display: flex;
}

.rux-button-group .rux-button:not(:last-child) {
  margin-right: 0.625rem;
}

/* Global Button Styles */
.rux-button {
  display: -webkit-flex;
  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-justify-content: center;

          justify-content: center;
  -webkit-align-items: 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));
  box-shadow: 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) {
  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));
  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 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(191, 36, 36) !important;
  background-color: var(--colorCriticalDarken1, rgb(191, 36, 36)) !important;
  border-color: rgb(191, 36, 36) !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-flex;
  display: flex;
  -webkit-align-items: 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-flex;
  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-flex;
  display: flex;

  -webkit-align-items: center;

          align-items: center;
  -webkit-justify-content: flex-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-flex;
  display: flex;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  -webkit-flex-grow: 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-flex;
  display: flex;
  -webkit-align-items: 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-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: flex-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-flex;
  display: flex;
  -webkit-order: 1;
          order: 1;
  margin: 0 0 0.15rem 0;
  width: 100%;
  -webkit-align-content: center;
          align-content: center;
  -webkit-align-items: 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 {
  box-sizing: border-box;
  -webkit-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 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);
  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: 1px solid var(--inputFocusBorderColor);
  /* border-left: 4px solid var(--inputFocusBorderColor); */
  /* padding-left: calc(0.5rem - 3px); */
}

.rux-form-field input::-moz-selection {
  background-color: var(--colorSecondaryLighten3);
  background-color: var(--colorSecondaryLighten3);
}

.rux-form-field input::selection {
  background-color: var(--colorSecondaryLighten3);
  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);
  background-color: var(--colorCritical);
  width: 100%;
  padding: 0.25rem;
  right: 0;
  font-size: var(--fontSizeMD);
  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 {
  box-shadow: inset 0 0 3px var(--colorGray);
  box-shadow: inset 0 0 3px var(--colorGray);
  border-color: var(--inputFocusBorderColor);
  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;
}