@mxtommy/kip 3.9.0-beta.2 → 3.9.0-beta.21

package/public/styles.css

@@ -0,0 +1,1651 @@
+/* src/styles.scss */
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("Material Icons"),
+    local("MaterialIcons-Regular"),
+    url("./media/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2") format("woff2");
+}
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local("Roboto Light"),
+    local("Roboto-Light"),
+    url("./media/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0460-052F,
+    U+1C80-1C88,
+    U+20B4,
+    U+2DE0-2DFF,
+    U+A640-A69F,
+    U+FE2E-FE2F;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local("Roboto Light"),
+    local("Roboto-Light"),
+    url("./media/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0301,
+    U+0400-045F,
+    U+0490-0491,
+    U+04B0-04B1,
+    U+2116;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local("Roboto Light"),
+    local("Roboto-Light"),
+    url("./media/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local("Roboto Light"),
+    local("Roboto-Light"),
+    url("./media/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0370-0377,
+    U+037A-037F,
+    U+0384-038A,
+    U+038C,
+    U+038E-03A1,
+    U+03A3-03FF;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local("Roboto Light"),
+    local("Roboto-Light"),
+    url("./media/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103,
+    U+0110-0111,
+    U+0128-0129,
+    U+0168-0169,
+    U+01A0-01A1,
+    U+01AF-01B0,
+    U+0300-0301,
+    U+0303-0304,
+    U+0308-0309,
+    U+0323,
+    U+0329,
+    U+1EA0-1EF9,
+    U+20AB;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local("Roboto Light"),
+    local("Roboto-Light"),
+    url("./media/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0100-02AF,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+1E00-1E9F,
+    U+1EF2-1EFF,
+    U+2020,
+    U+20A0-20AB,
+    U+20AD-20C0,
+    U+2113,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local("Roboto Light"),
+    local("Roboto-Light"),
+    url("./media/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("Roboto"),
+    local("Roboto-Regular"),
+    url("./media/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2") format("woff2");
+  unicode-range:
+    U+0460-052F,
+    U+1C80-1C88,
+    U+20B4,
+    U+2DE0-2DFF,
+    U+A640-A69F,
+    U+FE2E-FE2F;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("Roboto"),
+    local("Roboto-Regular"),
+    url("./media/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2") format("woff2");
+  unicode-range:
+    U+0301,
+    U+0400-045F,
+    U+0490-0491,
+    U+04B0-04B1,
+    U+2116;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("Roboto"),
+    local("Roboto-Regular"),
+    url("./media/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("Roboto"),
+    local("Roboto-Regular"),
+    url("./media/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2") format("woff2");
+  unicode-range:
+    U+0370-0377,
+    U+037A-037F,
+    U+0384-038A,
+    U+038C,
+    U+038E-03A1,
+    U+03A3-03FF;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("Roboto"),
+    local("Roboto-Regular"),
+    url("./media/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103,
+    U+0110-0111,
+    U+0128-0129,
+    U+0168-0169,
+    U+01A0-01A1,
+    U+01AF-01B0,
+    U+0300-0301,
+    U+0303-0304,
+    U+0308-0309,
+    U+0323,
+    U+0329,
+    U+1EA0-1EF9,
+    U+20AB;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("Roboto"),
+    local("Roboto-Regular"),
+    url("./media/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2") format("woff2");
+  unicode-range:
+    U+0100-02AF,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+1E00-1E9F,
+    U+1EF2-1EFF,
+    U+2020,
+    U+20A0-20AB,
+    U+20AD-20C0,
+    U+2113,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("Roboto"),
+    local("Roboto-Regular"),
+    url("./media/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local("Roboto Medium"),
+    local("Roboto-Medium"),
+    url("./media/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0460-052F,
+    U+1C80-1C88,
+    U+20B4,
+    U+2DE0-2DFF,
+    U+A640-A69F,
+    U+FE2E-FE2F;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local("Roboto Medium"),
+    local("Roboto-Medium"),
+    url("./media/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0301,
+    U+0400-045F,
+    U+0490-0491,
+    U+04B0-04B1,
+    U+2116;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local("Roboto Medium"),
+    local("Roboto-Medium"),
+    url("./media/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2") format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local("Roboto Medium"),
+    local("Roboto-Medium"),
+    url("./media/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0370-0377,
+    U+037A-037F,
+    U+0384-038A,
+    U+038C,
+    U+038E-03A1,
+    U+03A3-03FF;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local("Roboto Medium"),
+    local("Roboto-Medium"),
+    url("./media/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0102-0103,
+    U+0110-0111,
+    U+0128-0129,
+    U+0168-0169,
+    U+01A0-01A1,
+    U+01AF-01B0,
+    U+0300-0301,
+    U+0303-0304,
+    U+0308-0309,
+    U+0323,
+    U+0329,
+    U+1EA0-1EF9,
+    U+20AB;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local("Roboto Medium"),
+    local("Roboto-Medium"),
+    url("./media/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2") format("woff2");
+  unicode-range:
+    U+0100-02AF,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+1E00-1E9F,
+    U+1EF2-1EFF,
+    U+2020,
+    U+20A0-20AB,
+    U+20AD-20C0,
+    U+2113,
+    U+2C60-2C7F,
+    U+A720-A7FF;
+}
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    local("Roboto Medium"),
+    local("Roboto-Medium"),
+    url("./media/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+}
+.rounded-card-color {
+  background-color: var(--kip-contrast-dimmer-color);
+}
+.rounded-card {
+  margin-top: 10px;
+  border-radius: 15px;
+  padding: 10px;
+}
+.formActionFooter {
+  width: 100%;
+  text-align: end;
+  margin-top: 10px;
+}
+.formActionButton {
+  margin: 0px 3px 10px 10px;
+}
+.formActionDivider {
+  padding-bottom: 10px;
+}
+.flex-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  align-content: flex-start;
+  gap: 10px;
+}
+.flex-item-rounded-card {
+  flex: 1 1 29%;
+  padding: 10px 20px 10px 20px;
+  border-radius: 15px;
+}
+.flex-checkbox-30 {
+  flex-grow: 1;
+  flex-basis: 30%;
+  padding-bottom: 23px;
+}
+.flex-field-30 {
+  flex-grow: 1;
+  flex-basis: 30%;
+}
+.flex-field-50 {
+  flex-grow: 1;
+  flex-basis: 48%;
+}
+.flex-field-65 {
+  flex-grow: 1;
+  flex-basis: 65%;
+}
+.flex-field-100 {
+  flex-grow: 1;
+  flex-basis: 100%;
+}
+.flex-field-to-100 {
+  flex-grow: 1;
+  flex-basis: 60%;
+}
+.flex-field-fixed {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+}
+.filter-path {
+  width: 125px;
+}
+.mat-mdc-radio-button ~ .mat-radio-button {
+  margin-left: 16px;
+}
+.widget-options-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.options-grid-span2 {
+  grid-column: 1/span 2;
+}
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+}
+.radio-button {
+  margin-left: 16px;
+}
+.full-width {
+  width: 100%;
+}
+.page-content-wrapper {
+  padding: 0px 24px 14px 24px;
+}
+.grid-stack {
+  position: relative;
+}
+.grid-stack-rtl {
+  direction: ltr;
+}
+.grid-stack-rtl > .grid-stack-item {
+  direction: rtl;
+}
+.grid-stack-placeholder > .placeholder-content {
+  background-color: rgba(0, 0, 0, 0.1);
+  margin: 0;
+  position: absolute;
+  width: auto;
+  z-index: 0 !important;
+}
+.grid-stack > .grid-stack-item {
+  position: absolute;
+  padding: 0;
+}
+.grid-stack > .grid-stack-item > .grid-stack-item-content {
+  margin: 0;
+  position: absolute;
+  width: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.grid-stack > .grid-stack-item.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {
+  overflow-y: hidden;
+}
+.grid-stack-item > .ui-resizable-handle {
+  position: absolute;
+  font-size: 0.1px;
+  display: block;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+.grid-stack-item.ui-resizable-autohide > .ui-resizable-handle,
+.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle {
+  display: none;
+}
+.grid-stack-item > .ui-resizable-ne,
+.grid-stack-item > .ui-resizable-nw,
+.grid-stack-item > .ui-resizable-se,
+.grid-stack-item > .ui-resizable-sw {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.grid-stack-item > .ui-resizable-ne {
+  transform: rotate(45deg);
+}
+.grid-stack-item > .ui-resizable-sw {
+  transform: rotate(45deg);
+}
+.grid-stack-item > .ui-resizable-nw {
+  transform: rotate(-45deg);
+}
+.grid-stack-item > .ui-resizable-se {
+  transform: rotate(-45deg);
+}
+.grid-stack-item > .ui-resizable-nw {
+  cursor: nw-resize;
+  width: 20px;
+  height: 20px;
+  top: 0;
+}
+.grid-stack-item > .ui-resizable-n {
+  cursor: n-resize;
+  height: 10px;
+  top: 0;
+  left: 25px;
+  right: 25px;
+}
+.grid-stack-item > .ui-resizable-ne {
+  cursor: ne-resize;
+  width: 20px;
+  height: 20px;
+  top: 0;
+}
+.grid-stack-item > .ui-resizable-e {
+  cursor: e-resize;
+  width: 10px;
+  top: 15px;
+  bottom: 15px;
+}
+.grid-stack-item > .ui-resizable-se {
+  cursor: se-resize;
+  width: 20px;
+  height: 20px;
+}
+.grid-stack-item > .ui-resizable-s {
+  cursor: s-resize;
+  height: 10px;
+  left: 25px;
+  bottom: 0;
+  right: 25px;
+}
+.grid-stack-item > .ui-resizable-sw {
+  cursor: sw-resize;
+  width: 20px;
+  height: 20px;
+}
+.grid-stack-item > .ui-resizable-w {
+  cursor: w-resize;
+  width: 10px;
+  top: 15px;
+  bottom: 15px;
+}
+.grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
+  display: none !important;
+}
+.grid-stack-item.ui-draggable-dragging {
+  will-change: left, top;
+  cursor: move;
+}
+.grid-stack-item.ui-resizable-resizing {
+  will-change: width, height;
+}
+.ui-draggable-dragging,
+.ui-resizable-resizing {
+  z-index: 10000;
+}
+.ui-draggable-dragging > .grid-stack-item-content,
+.ui-resizable-resizing > .grid-stack-item-content {
+  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+  opacity: 0.8;
+}
+.grid-stack-animate,
+.grid-stack-animate .grid-stack-item {
+  transition:
+    left 0.3s,
+    top 0.3s,
+    height 0.3s,
+    width 0.3s;
+}
+.grid-stack-animate .grid-stack-item.grid-stack-placeholder,
+.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
+.grid-stack-animate .grid-stack-item.ui-resizable-resizing {
+  transition:
+    left 0s,
+    top 0s,
+    height 0s,
+    width 0s;
+}
+.grid-stack > .grid-stack-item[gs-y="0"] {
+  top: 0;
+}
+.grid-stack > .grid-stack-item[gs-x="0"] {
+  left: 0;
+}
+.gs-12 > .grid-stack-item {
+  width: 8.333%;
+}
+.gs-12 > .grid-stack-item[gs-x="1"] {
+  left: 8.333%;
+}
+.gs-12 > .grid-stack-item[gs-w="2"] {
+  width: 16.667%;
+}
+.gs-12 > .grid-stack-item[gs-x="2"] {
+  left: 16.667%;
+}
+.gs-12 > .grid-stack-item[gs-w="3"] {
+  width: 25%;
+}
+.gs-12 > .grid-stack-item[gs-x="3"] {
+  left: 25%;
+}
+.gs-12 > .grid-stack-item[gs-w="4"] {
+  width: 33.333%;
+}
+.gs-12 > .grid-stack-item[gs-x="4"] {
+  left: 33.333%;
+}
+.gs-12 > .grid-stack-item[gs-w="5"] {
+  width: 41.667%;
+}
+.gs-12 > .grid-stack-item[gs-x="5"] {
+  left: 41.667%;
+}
+.gs-12 > .grid-stack-item[gs-w="6"] {
+  width: 50%;
+}
+.gs-12 > .grid-stack-item[gs-x="6"] {
+  left: 50%;
+}
+.gs-12 > .grid-stack-item[gs-w="7"] {
+  width: 58.333%;
+}
+.gs-12 > .grid-stack-item[gs-x="7"] {
+  left: 58.333%;
+}
+.gs-12 > .grid-stack-item[gs-w="8"] {
+  width: 66.667%;
+}
+.gs-12 > .grid-stack-item[gs-x="8"] {
+  left: 66.667%;
+}
+.gs-12 > .grid-stack-item[gs-w="9"] {
+  width: 75%;
+}
+.gs-12 > .grid-stack-item[gs-x="9"] {
+  left: 75%;
+}
+.gs-12 > .grid-stack-item[gs-w="10"] {
+  width: 83.333%;
+}
+.gs-12 > .grid-stack-item[gs-x="10"] {
+  left: 83.333%;
+}
+.gs-12 > .grid-stack-item[gs-w="11"] {
+  width: 91.667%;
+}
+.gs-12 > .grid-stack-item[gs-x="11"] {
+  left: 91.667%;
+}
+.gs-12 > .grid-stack-item[gs-w="12"] {
+  width: 100%;
+}
+.gs-1 > .grid-stack-item {
+  width: 100%;
+}
+:root {
+  --mat-sys-background: #191c1d;
+  --kip-nightModeBrightness: 1;
+  --kip-widget-card-background-color: #000000;
+  --kip-widget-card-border-color: #252525;
+  --kip-widget-card-border-style: solid;
+  --kip-widget-card-border-width: 2px;
+  --kip-blue-color: #3298ff;
+  --kip-blue-dim-color: rgba(53, 154, 255, 0.7764705882);
+  --kip-blue-dimmer-color: rgba(6, 59, 113, 0.4705882353);
+  --kip-green-color: #00d000;
+  --kip-green-dim-color: rgba(0, 208, 0, 0.7137254902);
+  --kip-green-dimmer-color: rgba(0, 104, 0, 0.4705882353);
+  --kip-purple-color: #A020F0;
+  --kip-purple-dim-color: rgba(160, 32, 240, 0.7137254902);
+  --kip-purple-dimmer-color: rgba(74, 15, 110, 0.4705882353);
+  --kip-yellow-color: #ffdf00;
+  --kip-yellow-dim-color: rgba(255, 223, 0, 0.7137254902);
+  --kip-yellow-dimmer-color: rgba(114, 110, 0, 0.4705882353);
+  --kip-pink-color: #FC0FC0;
+  --kip-pink-dim-color: rgba(252, 15, 192, 0.7137254902);
+  --kip-pink-dimmer-color: rgba(109, 7, 83, 0.4705882353);
+  --kip-orange-color: #ff9100;
+  --kip-orange-dim-color: rgba(255, 145, 0, 0.7137254902);
+  --kip-orange-dimmer-color: rgba(113, 74, 0, 0.4705882353);
+  --kip-contrast-color: #FFFFFF;
+  --kip-contrast-dim-color: rgba(255, 255, 255, 0.7137254902);
+  --kip-contrast-dimmer-color: rgba(255, 255, 255, 0.1607843137);
+  --kip-grey-color: #B5B5B5;
+  --kip-grey-dim-color: rgba(181, 181, 181, 0.7137254902);
+  --kip-grey-dimmer-color: #1a1a1a;
+  --kip-port-color: #8F0000;
+  --kip-starboard-color: #008700;
+  --kip-zone-nominal-color: #0164FA;
+  --kip-zone-alert-color: #ffff60;
+  --kip-zone-warn-color: #ff8d41;
+  --kip-zone-alarm-color: #E90000;
+  --kip-zone-emergency-color: #760000;
+}
+body.light-theme {
+  --mat-sys-background: #e1e4ec;
+  --kip-widget-card-background-color: #ffffff;
+  --kip-widget-card-border-color: #252525;
+  --kip-contrast-color: #000000;
+  --kip-contrast-dim-color: rgba(0, 0, 0, 0.7137254902);
+  --kip-contrast-dimmer-color: rgba(0, 0, 0, 0.1607843137);
+  --kip-grey-color: #666666;
+  --kip-grey-dim-color: rgba(102, 102, 102, 0.7137254902);
+  --kip-grey-dimmer-color: rgba(102, 102, 102, 0.1607843137);
+  --kip-blue-color: #005bb5;
+  --kip-blue-dim-color: rgba(0, 91, 181, 0.7137254902);
+  --kip-blue-dimmer-color: rgba(0, 91, 181, 0.4705882353);
+  --kip-green-color: #007a00;
+  --kip-green-dim-color: rgba(0, 122, 0, 0.7137254902);
+  --kip-green-dimmer-color: rgba(0, 122, 0, 0.4705882353);
+  --kip-purple-color: #6a00a8;
+  --kip-purple-dim-color: rgba(106, 0, 168, 0.7137254902);
+  --kip-purple-dimmer-color: rgba(106, 0, 168, 0.4705882353);
+  --kip-yellow-color: #bfa800;
+  --kip-yellow-dim-color: rgba(191, 168, 0, 0.7137254902);
+  --kip-yellow-dimmer-color: rgba(191, 168, 0, 0.4705882353);
+  --kip-pink-color: #b00070;
+  --kip-pink-dim-color: rgba(176, 0, 112, 0.7137254902);
+  --kip-pink-dimmer-color: rgba(176, 0, 112, 0.4705882353);
+  --kip-orange-color: #c56200;
+  --kip-orange-dim-color: rgba(197, 98, 0, 0.7137254902);
+  --kip-orange-dimmer-color: rgba(197, 98, 0, 0.4705882353);
+  --kip-port-color: #b70000;
+  --kip-starboard-color: #008700;
+  --kip-zone-nominal-color: #0182fa;
+  --kip-zone-alert-color: #f0f032;
+  --kip-zone-warn-color: #ff8534;
+  --kip-zone-alarm-color: #ff0000;
+  --kip-zone-emergency-color: #741e1e;
+}
+body.night-theme {
+  --mat-sys-background: #101415;
+  --kip-widget-card-background-color: #000000;
+  --kip-widget-card-border-color: #252525;
+  --kip-contrast-color: #520000;
+  --kip-contrast-dim-color: rgba(82, 0, 0, 0.7137254902);
+  --kip-contrast-dimmer-color: rgba(38, 0, 0, 0.7725490196);
+  --kip-grey-color: #520000;
+  --kip-grey-dim-color: rgba(82, 0, 0, 0.7137254902);
+  --kip-grey-dimmer-color: rgba(38, 0, 0, 0.7725490196);
+  --kip-blue-color: #520000;
+  --kip-blue-dim-color: rgba(82, 0, 0, 0.7137254902);
+  --kip-blue-dimmer-color: rgba(38, 0, 0, 0.7725490196);
+  --kip-green-color: #520000;
+  --kip-green-dim-color: rgba(82, 0, 0, 0.7137254902);
+  --kip-green-dimmer-color: rgba(38, 0, 0, 0.7725490196);
+  --kip-purple-color: #520000;
+  --kip-purple-dim-color: rgba(82, 0, 0, 0.7137254902);
+  --kip-purple-dimmer-color: rgba(38, 0, 0, 0.7725490196);
+  --kip-yellow-color: #520000;
+  --kip-yellow-dim-color: rgba(82, 0, 0, 0.7137254902);
+  --kip-yellow-dimmer-color: rgba(38, 0, 0, 0.7725490196);
+  --kip-pink-color: #520000;
+  --kip-pink-dim-color: rgba(82, 0, 0, 0.7137254902);
+  --kip-pink-dimmer-color: rgba(38, 0, 0, 0.7725490196);
+  --kip-orange-color: #520000;
+  --kip-orange-dim-color: rgba(82, 0, 0, 0.7137254902);
+  --kip-orange-dimmer-color: rgba(38, 0, 0, 0.7725490196);
+  --kip-port-color: #800000;
+  --kip-starboard-color: #005500;
+  --kip-zone-nominal-color: #001d49;
+  --kip-zone-alert-color: #2c2c00;
+  --kip-zone-warn-color: #441e00;
+  --kip-zone-alarm-color: #850000;
+  --kip-zone-emergency-color: #bd0000;
+}
+html {
+  --mat-sys-background: #101415;
+  --mat-sys-error: #ffb4ab;
+  --mat-sys-error-container: #93000a;
+  --mat-sys-inverse-on-surface: #2e3132;
+  --mat-sys-inverse-primary: #0058c9;
+  --mat-sys-inverse-surface: #e1e3e3;
+  --mat-sys-on-background: #e1e3e3;
+  --mat-sys-on-error: #690005;
+  --mat-sys-on-error-container: #ffdad6;
+  --mat-sys-on-primary: #002d6d;
+  --mat-sys-on-primary-container: #d9e2ff;
+  --mat-sys-on-primary-fixed: #001944;
+  --mat-sys-on-primary-fixed-variant: #00429a;
+  --mat-sys-on-secondary: #002e6b;
+  --mat-sys-on-secondary-container: #d8e2ff;
+  --mat-sys-on-secondary-fixed: #001a42;
+  --mat-sys-on-secondary-fixed-variant: #13448f;
+  --mat-sys-on-surface: #e1e3e3;
+  --mat-sys-on-surface-variant: #dbe4e6;
+  --mat-sys-on-tertiary: #3d2f00;
+  --mat-sys-on-tertiary-container: #ffe08b;
+  --mat-sys-on-tertiary-fixed: #241a00;
+  --mat-sys-on-tertiary-fixed-variant: #584400;
+  --mat-sys-outline: #899294;
+  --mat-sys-outline-variant: #3f484a;
+  --mat-sys-primary: #afc6ff;
+  --mat-sys-primary-container: #00429a;
+  --mat-sys-primary-fixed: #d9e2ff;
+  --mat-sys-primary-fixed-dim: #afc6ff;
+  --mat-sys-scrim: #000000;
+  --mat-sys-secondary: #aec6ff;
+  --mat-sys-secondary-container: #13448f;
+  --mat-sys-secondary-fixed: #d8e2ff;
+  --mat-sys-secondary-fixed-dim: #aec6ff;
+  --mat-sys-shadow: #000000;
+  --mat-sys-surface: #101415;
+  --mat-sys-surface-bright: #363a3a;
+  --mat-sys-surface-container: #1d2021;
+  --mat-sys-surface-container-high: #272b2b;
+  --mat-sys-surface-container-highest: #323536;
+  --mat-sys-surface-container-low: #191c1d;
+  --mat-sys-surface-container-lowest: #0b0f0f;
+  --mat-sys-surface-dim: #101415;
+  --mat-sys-surface-tint: #afc6ff;
+  --mat-sys-surface-variant: #3f484a;
+  --mat-sys-tertiary: #eec12c;
+  --mat-sys-tertiary-container: #584400;
+  --mat-sys-tertiary-fixed: #ffe08b;
+  --mat-sys-tertiary-fixed-dim: #eec12c;
+  --mat-sys-neutral-variant20: #293234;
+  --mat-sys-neutral10: #191c1d;
+  --mat-sys-level0:
+    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level1:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level2:
+    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level3:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level4:
+    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  --mat-sys-level5:
+    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
+    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+  --mat-sys-body-large: 400 1rem / 1.5rem Roboto;
+  --mat-sys-body-large-font: Roboto;
+  --mat-sys-body-large-line-height: 1.5rem;
+  --mat-sys-body-large-size: 1rem;
+  --mat-sys-body-large-tracking: 0.031rem;
+  --mat-sys-body-large-weight: 400;
+  --mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;
+  --mat-sys-body-medium-font: Roboto;
+  --mat-sys-body-medium-line-height: 1.25rem;
+  --mat-sys-body-medium-size: 0.875rem;
+  --mat-sys-body-medium-tracking: 0.016rem;
+  --mat-sys-body-medium-weight: 400;
+  --mat-sys-body-small: 400 0.75rem / 1rem Roboto;
+  --mat-sys-body-small-font: Roboto;
+  --mat-sys-body-small-line-height: 1rem;
+  --mat-sys-body-small-size: 0.75rem;
+  --mat-sys-body-small-tracking: 0.025rem;
+  --mat-sys-body-small-weight: 400;
+  --mat-sys-display-large: 400 3.562rem / 4rem Roboto;
+  --mat-sys-display-large-font: Roboto;
+  --mat-sys-display-large-line-height: 4rem;
+  --mat-sys-display-large-size: 3.562rem;
+  --mat-sys-display-large-tracking: -0.016rem;
+  --mat-sys-display-large-weight: 400;
+  --mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;
+  --mat-sys-display-medium-font: Roboto;
+  --mat-sys-display-medium-line-height: 3.25rem;
+  --mat-sys-display-medium-size: 2.812rem;
+  --mat-sys-display-medium-tracking: 0;
+  --mat-sys-display-medium-weight: 400;
+  --mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;
+  --mat-sys-display-small-font: Roboto;
+  --mat-sys-display-small-line-height: 2.75rem;
+  --mat-sys-display-small-size: 2.25rem;
+  --mat-sys-display-small-tracking: 0;
+  --mat-sys-display-small-weight: 400;
+  --mat-sys-headline-large: 400 2rem / 2.5rem Roboto;
+  --mat-sys-headline-large-font: Roboto;
+  --mat-sys-headline-large-line-height: 2.5rem;
+  --mat-sys-headline-large-size: 2rem;
+  --mat-sys-headline-large-tracking: 0;
+  --mat-sys-headline-large-weight: 400;
+  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;
+  --mat-sys-headline-medium-font: Roboto;
+  --mat-sys-headline-medium-line-height: 2.25rem;
+  --mat-sys-headline-medium-size: 1.75rem;
+  --mat-sys-headline-medium-tracking: 0;
+  --mat-sys-headline-medium-weight: 400;
+  --mat-sys-headline-small: 400 1.5rem / 2rem Roboto;
+  --mat-sys-headline-small-font: Roboto;
+  --mat-sys-headline-small-line-height: 2rem;
+  --mat-sys-headline-small-size: 1.5rem;
+  --mat-sys-headline-small-tracking: 0;
+  --mat-sys-headline-small-weight: 400;
+  --mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;
+  --mat-sys-label-large-font: Roboto;
+  --mat-sys-label-large-line-height: 1.25rem;
+  --mat-sys-label-large-size: 0.875rem;
+  --mat-sys-label-large-tracking: 0.006rem;
+  --mat-sys-label-large-weight: 500;
+  --mat-sys-label-large-weight-prominent: 700;
+  --mat-sys-label-medium: 500 0.75rem / 1rem Roboto;
+  --mat-sys-label-medium-font: Roboto;
+  --mat-sys-label-medium-line-height: 1rem;
+  --mat-sys-label-medium-size: 0.75rem;
+  --mat-sys-label-medium-tracking: 0.031rem;
+  --mat-sys-label-medium-weight: 500;
+  --mat-sys-label-medium-weight-prominent: 700;
+  --mat-sys-label-small: 500 0.688rem / 1rem Roboto;
+  --mat-sys-label-small-font: Roboto;
+  --mat-sys-label-small-line-height: 1rem;
+  --mat-sys-label-small-size: 0.688rem;
+  --mat-sys-label-small-tracking: 0.031rem;
+  --mat-sys-label-small-weight: 500;
+  --mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;
+  --mat-sys-title-large-font: Roboto;
+  --mat-sys-title-large-line-height: 1.75rem;
+  --mat-sys-title-large-size: 1.375rem;
+  --mat-sys-title-large-tracking: 0;
+  --mat-sys-title-large-weight: 400;
+  --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
+  --mat-sys-title-medium-font: Roboto;
+  --mat-sys-title-medium-line-height: 1.5rem;
+  --mat-sys-title-medium-size: 1rem;
+  --mat-sys-title-medium-tracking: 0.009rem;
+  --mat-sys-title-medium-weight: 500;
+  --mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;
+  --mat-sys-title-small-font: Roboto;
+  --mat-sys-title-small-line-height: 1.25rem;
+  --mat-sys-title-small-size: 0.875rem;
+  --mat-sys-title-small-tracking: 0.006rem;
+  --mat-sys-title-small-weight: 500;
+  --mat-sys-corner-extra-large: 28px;
+  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
+  --mat-sys-corner-extra-small: 4px;
+  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
+  --mat-sys-corner-full: 9999px;
+  --mat-sys-corner-large: 16px;
+  --mat-sys-corner-large-end: 0 16px 16px 0;
+  --mat-sys-corner-large-start: 16px 0 0 16px;
+  --mat-sys-corner-large-top: 16px 16px 0 0;
+  --mat-sys-corner-medium: 12px;
+  --mat-sys-corner-none: 0;
+  --mat-sys-corner-small: 8px;
+  --mat-sys-dragged-state-layer-opacity: 0.16;
+  --mat-sys-focus-state-layer-opacity: 0.12;
+  --mat-sys-hover-state-layer-opacity: 0.08;
+  --mat-sys-pressed-state-layer-opacity: 0.12;
+}
+.light-theme {
+  --mat-sys-background: #fcf8fd;
+  --mat-sys-error: #ba1a1a;
+  --mat-sys-error-container: #ffdad6;
+  --mat-sys-inverse-on-surface: #f3eff4;
+  --mat-sys-inverse-primary: #bec2ff;
+  --mat-sys-inverse-surface: #303034;
+  --mat-sys-on-background: #1b1b1f;
+  --mat-sys-on-error: #ffffff;
+  --mat-sys-on-error-container: #93000a;
+  --mat-sys-on-primary: #ffffff;
+  --mat-sys-on-primary-container: #0000ef;
+  --mat-sys-on-primary-fixed: #00006e;
+  --mat-sys-on-primary-fixed-variant: #0000ef;
+  --mat-sys-on-secondary: #ffffff;
+  --mat-sys-on-secondary-container: #444559;
+  --mat-sys-on-secondary-fixed: #191a2c;
+  --mat-sys-on-secondary-fixed-variant: #444559;
+  --mat-sys-on-surface: #1b1b1f;
+  --mat-sys-on-surface-variant: #46464f;
+  --mat-sys-on-tertiary: #ffffff;
+  --mat-sys-on-tertiary-container: #494900;
+  --mat-sys-on-tertiary-fixed: #1d1d00;
+  --mat-sys-on-tertiary-fixed-variant: #494900;
+  --mat-sys-outline: #777680;
+  --mat-sys-outline-variant: #c7c5d0;
+  --mat-sys-primary: #343dff;
+  --mat-sys-primary-container: #e0e0ff;
+  --mat-sys-primary-fixed: #e0e0ff;
+  --mat-sys-primary-fixed-dim: #bec2ff;
+  --mat-sys-scrim: #000000;
+  --mat-sys-secondary: #5c5d72;
+  --mat-sys-secondary-container: #e1e0f9;
+  --mat-sys-secondary-fixed: #e1e0f9;
+  --mat-sys-secondary-fixed-dim: #c5c4dd;
+  --mat-sys-shadow: #000000;
+  --mat-sys-surface: #fcf8fd;
+  --mat-sys-surface-bright: #fcf8fd;
+  --mat-sys-surface-container: #f0edf1;
+  --mat-sys-surface-container-high: #ebe7eb;
+  --mat-sys-surface-container-highest: #e5e1e6;
+  --mat-sys-surface-container-low: #f6f2f7;
+  --mat-sys-surface-container-lowest: #ffffff;
+  --mat-sys-surface-dim: #dcd9dd;
+  --mat-sys-surface-tint: #343dff;
+  --mat-sys-surface-variant: #e4e1ec;
+  --mat-sys-tertiary: #626200;
+  --mat-sys-tertiary-container: #eaea00;
+  --mat-sys-tertiary-fixed: #eaea00;
+  --mat-sys-tertiary-fixed-dim: #cdcd00;
+  --mat-sys-neutral-variant20: #303038;
+  --mat-sys-neutral10: #1b1b1f;
+  --mat-sys-level0:
+    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level1:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level2:
+    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level3:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level4:
+    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  --mat-sys-level5:
+    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
+    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+  --mat-sys-body-large: 400 1rem / 1.5rem Roboto;
+  --mat-sys-body-large-font: Roboto;
+  --mat-sys-body-large-line-height: 1.5rem;
+  --mat-sys-body-large-size: 1rem;
+  --mat-sys-body-large-tracking: 0.031rem;
+  --mat-sys-body-large-weight: 400;
+  --mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;
+  --mat-sys-body-medium-font: Roboto;
+  --mat-sys-body-medium-line-height: 1.25rem;
+  --mat-sys-body-medium-size: 0.875rem;
+  --mat-sys-body-medium-tracking: 0.016rem;
+  --mat-sys-body-medium-weight: 400;
+  --mat-sys-body-small: 400 0.75rem / 1rem Roboto;
+  --mat-sys-body-small-font: Roboto;
+  --mat-sys-body-small-line-height: 1rem;
+  --mat-sys-body-small-size: 0.75rem;
+  --mat-sys-body-small-tracking: 0.025rem;
+  --mat-sys-body-small-weight: 400;
+  --mat-sys-display-large: 400 3.562rem / 4rem Roboto;
+  --mat-sys-display-large-font: Roboto;
+  --mat-sys-display-large-line-height: 4rem;
+  --mat-sys-display-large-size: 3.562rem;
+  --mat-sys-display-large-tracking: -0.016rem;
+  --mat-sys-display-large-weight: 400;
+  --mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;
+  --mat-sys-display-medium-font: Roboto;
+  --mat-sys-display-medium-line-height: 3.25rem;
+  --mat-sys-display-medium-size: 2.812rem;
+  --mat-sys-display-medium-tracking: 0;
+  --mat-sys-display-medium-weight: 400;
+  --mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;
+  --mat-sys-display-small-font: Roboto;
+  --mat-sys-display-small-line-height: 2.75rem;
+  --mat-sys-display-small-size: 2.25rem;
+  --mat-sys-display-small-tracking: 0;
+  --mat-sys-display-small-weight: 400;
+  --mat-sys-headline-large: 400 2rem / 2.5rem Roboto;
+  --mat-sys-headline-large-font: Roboto;
+  --mat-sys-headline-large-line-height: 2.5rem;
+  --mat-sys-headline-large-size: 2rem;
+  --mat-sys-headline-large-tracking: 0;
+  --mat-sys-headline-large-weight: 400;
+  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;
+  --mat-sys-headline-medium-font: Roboto;
+  --mat-sys-headline-medium-line-height: 2.25rem;
+  --mat-sys-headline-medium-size: 1.75rem;
+  --mat-sys-headline-medium-tracking: 0;
+  --mat-sys-headline-medium-weight: 400;
+  --mat-sys-headline-small: 400 1.5rem / 2rem Roboto;
+  --mat-sys-headline-small-font: Roboto;
+  --mat-sys-headline-small-line-height: 2rem;
+  --mat-sys-headline-small-size: 1.5rem;
+  --mat-sys-headline-small-tracking: 0;
+  --mat-sys-headline-small-weight: 400;
+  --mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;
+  --mat-sys-label-large-font: Roboto;
+  --mat-sys-label-large-line-height: 1.25rem;
+  --mat-sys-label-large-size: 0.875rem;
+  --mat-sys-label-large-tracking: 0.006rem;
+  --mat-sys-label-large-weight: 500;
+  --mat-sys-label-large-weight-prominent: 700;
+  --mat-sys-label-medium: 500 0.75rem / 1rem Roboto;
+  --mat-sys-label-medium-font: Roboto;
+  --mat-sys-label-medium-line-height: 1rem;
+  --mat-sys-label-medium-size: 0.75rem;
+  --mat-sys-label-medium-tracking: 0.031rem;
+  --mat-sys-label-medium-weight: 500;
+  --mat-sys-label-medium-weight-prominent: 700;
+  --mat-sys-label-small: 500 0.688rem / 1rem Roboto;
+  --mat-sys-label-small-font: Roboto;
+  --mat-sys-label-small-line-height: 1rem;
+  --mat-sys-label-small-size: 0.688rem;
+  --mat-sys-label-small-tracking: 0.031rem;
+  --mat-sys-label-small-weight: 500;
+  --mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;
+  --mat-sys-title-large-font: Roboto;
+  --mat-sys-title-large-line-height: 1.75rem;
+  --mat-sys-title-large-size: 1.375rem;
+  --mat-sys-title-large-tracking: 0;
+  --mat-sys-title-large-weight: 400;
+  --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
+  --mat-sys-title-medium-font: Roboto;
+  --mat-sys-title-medium-line-height: 1.5rem;
+  --mat-sys-title-medium-size: 1rem;
+  --mat-sys-title-medium-tracking: 0.009rem;
+  --mat-sys-title-medium-weight: 500;
+  --mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;
+  --mat-sys-title-small-font: Roboto;
+  --mat-sys-title-small-line-height: 1.25rem;
+  --mat-sys-title-small-size: 0.875rem;
+  --mat-sys-title-small-tracking: 0.006rem;
+  --mat-sys-title-small-weight: 500;
+  --mat-sys-corner-extra-large: 28px;
+  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
+  --mat-sys-corner-extra-small: 4px;
+  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
+  --mat-sys-corner-full: 9999px;
+  --mat-sys-corner-large: 16px;
+  --mat-sys-corner-large-end: 0 16px 16px 0;
+  --mat-sys-corner-large-start: 16px 0 0 16px;
+  --mat-sys-corner-large-top: 16px 16px 0 0;
+  --mat-sys-corner-medium: 12px;
+  --mat-sys-corner-none: 0;
+  --mat-sys-corner-small: 8px;
+  --mat-sys-dragged-state-layer-opacity: 0.16;
+  --mat-sys-focus-state-layer-opacity: 0.12;
+  --mat-sys-hover-state-layer-opacity: 0.08;
+  --mat-sys-pressed-state-layer-opacity: 0.12;
+}
+.night-theme {
+  --mat-sys-background: #1b110f;
+  --mat-sys-error: #ffb4ab;
+  --mat-sys-error-container: #93000a;
+  --mat-sys-inverse-on-surface: #3a2e2c;
+  --mat-sys-inverse-primary: #a33c2e;
+  --mat-sys-inverse-surface: #f3dedb;
+  --mat-sys-on-background: #f3dedb;
+  --mat-sys-on-error: #690005;
+  --mat-sys-on-error-container: #ffdad6;
+  --mat-sys-on-primary: #640d06;
+  --mat-sys-on-primary-container: #ffdad4;
+  --mat-sys-on-primary-fixed: #410000;
+  --mat-sys-on-primary-fixed-variant: #83251a;
+  --mat-sys-on-secondary: #640d06;
+  --mat-sys-on-secondary-container: #ffdad4;
+  --mat-sys-on-secondary-fixed: #410000;
+  --mat-sys-on-secondary-fixed-variant: #83251a;
+  --mat-sys-on-surface: #f3dedb;
+  --mat-sys-on-surface-variant: #fbdcd7;
+  --mat-sys-on-tertiary: #640d06;
+  --mat-sys-on-tertiary-container: #ffdad4;
+  --mat-sys-on-tertiary-fixed: #410000;
+  --mat-sys-on-tertiary-fixed-variant: #83251a;
+  --mat-sys-outline: #a58b86;
+  --mat-sys-outline-variant: #57423e;
+  --mat-sys-primary: #ffb4a8;
+  --mat-sys-primary-container: #83251a;
+  --mat-sys-primary-fixed: #ffdad4;
+  --mat-sys-primary-fixed-dim: #ffb4a8;
+  --mat-sys-scrim: #000000;
+  --mat-sys-secondary: #ffb4a8;
+  --mat-sys-secondary-container: #83251a;
+  --mat-sys-secondary-fixed: #ffdad4;
+  --mat-sys-secondary-fixed-dim: #ffb4a8;
+  --mat-sys-shadow: #000000;
+  --mat-sys-surface: #1b110f;
+  --mat-sys-surface-bright: #433634;
+  --mat-sys-surface-container: #281d1b;
+  --mat-sys-surface-container-high: #332725;
+  --mat-sys-surface-container-highest: #3e3230;
+  --mat-sys-surface-container-low: #241917;
+  --mat-sys-surface-container-lowest: #150c0a;
+  --mat-sys-surface-dim: #1b110f;
+  --mat-sys-surface-tint: #ffb4a8;
+  --mat-sys-surface-variant: #57423e;
+  --mat-sys-tertiary: #ffb4a8;
+  --mat-sys-tertiary-container: #83251a;
+  --mat-sys-tertiary-fixed: #ffdad4;
+  --mat-sys-tertiary-fixed-dim: #ffb4a8;
+  --mat-sys-neutral-variant20: #3f2c29;
+  --mat-sys-neutral10: #241917;
+  --mat-sys-level0:
+    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level1:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level2:
+    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level3:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  --mat-sys-level4:
+    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  --mat-sys-level5:
+    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
+    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+  --mat-sys-body-large: 400 1rem / 1.5rem Roboto;
+  --mat-sys-body-large-font: Roboto;
+  --mat-sys-body-large-line-height: 1.5rem;
+  --mat-sys-body-large-size: 1rem;
+  --mat-sys-body-large-tracking: 0.031rem;
+  --mat-sys-body-large-weight: 400;
+  --mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;
+  --mat-sys-body-medium-font: Roboto;
+  --mat-sys-body-medium-line-height: 1.25rem;
+  --mat-sys-body-medium-size: 0.875rem;
+  --mat-sys-body-medium-tracking: 0.016rem;
+  --mat-sys-body-medium-weight: 400;
+  --mat-sys-body-small: 400 0.75rem / 1rem Roboto;
+  --mat-sys-body-small-font: Roboto;
+  --mat-sys-body-small-line-height: 1rem;
+  --mat-sys-body-small-size: 0.75rem;
+  --mat-sys-body-small-tracking: 0.025rem;
+  --mat-sys-body-small-weight: 400;
+  --mat-sys-display-large: 400 3.562rem / 4rem Roboto;
+  --mat-sys-display-large-font: Roboto;
+  --mat-sys-display-large-line-height: 4rem;
+  --mat-sys-display-large-size: 3.562rem;
+  --mat-sys-display-large-tracking: -0.016rem;
+  --mat-sys-display-large-weight: 400;
+  --mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;
+  --mat-sys-display-medium-font: Roboto;
+  --mat-sys-display-medium-line-height: 3.25rem;
+  --mat-sys-display-medium-size: 2.812rem;
+  --mat-sys-display-medium-tracking: 0;
+  --mat-sys-display-medium-weight: 400;
+  --mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;
+  --mat-sys-display-small-font: Roboto;
+  --mat-sys-display-small-line-height: 2.75rem;
+  --mat-sys-display-small-size: 2.25rem;
+  --mat-sys-display-small-tracking: 0;
+  --mat-sys-display-small-weight: 400;
+  --mat-sys-headline-large: 400 2rem / 2.5rem Roboto;
+  --mat-sys-headline-large-font: Roboto;
+  --mat-sys-headline-large-line-height: 2.5rem;
+  --mat-sys-headline-large-size: 2rem;
+  --mat-sys-headline-large-tracking: 0;
+  --mat-sys-headline-large-weight: 400;
+  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;
+  --mat-sys-headline-medium-font: Roboto;
+  --mat-sys-headline-medium-line-height: 2.25rem;
+  --mat-sys-headline-medium-size: 1.75rem;
+  --mat-sys-headline-medium-tracking: 0;
+  --mat-sys-headline-medium-weight: 400;
+  --mat-sys-headline-small: 400 1.5rem / 2rem Roboto;
+  --mat-sys-headline-small-font: Roboto;
+  --mat-sys-headline-small-line-height: 2rem;
+  --mat-sys-headline-small-size: 1.5rem;
+  --mat-sys-headline-small-tracking: 0;
+  --mat-sys-headline-small-weight: 400;
+  --mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;
+  --mat-sys-label-large-font: Roboto;
+  --mat-sys-label-large-line-height: 1.25rem;
+  --mat-sys-label-large-size: 0.875rem;
+  --mat-sys-label-large-tracking: 0.006rem;
+  --mat-sys-label-large-weight: 500;
+  --mat-sys-label-large-weight-prominent: 700;
+  --mat-sys-label-medium: 500 0.75rem / 1rem Roboto;
+  --mat-sys-label-medium-font: Roboto;
+  --mat-sys-label-medium-line-height: 1rem;
+  --mat-sys-label-medium-size: 0.75rem;
+  --mat-sys-label-medium-tracking: 0.031rem;
+  --mat-sys-label-medium-weight: 500;
+  --mat-sys-label-medium-weight-prominent: 700;
+  --mat-sys-label-small: 500 0.688rem / 1rem Roboto;
+  --mat-sys-label-small-font: Roboto;
+  --mat-sys-label-small-line-height: 1rem;
+  --mat-sys-label-small-size: 0.688rem;
+  --mat-sys-label-small-tracking: 0.031rem;
+  --mat-sys-label-small-weight: 500;
+  --mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;
+  --mat-sys-title-large-font: Roboto;
+  --mat-sys-title-large-line-height: 1.75rem;
+  --mat-sys-title-large-size: 1.375rem;
+  --mat-sys-title-large-tracking: 0;
+  --mat-sys-title-large-weight: 400;
+  --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
+  --mat-sys-title-medium-font: Roboto;
+  --mat-sys-title-medium-line-height: 1.5rem;
+  --mat-sys-title-medium-size: 1rem;
+  --mat-sys-title-medium-tracking: 0.009rem;
+  --mat-sys-title-medium-weight: 500;
+  --mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;
+  --mat-sys-title-small-font: Roboto;
+  --mat-sys-title-small-line-height: 1.25rem;
+  --mat-sys-title-small-size: 0.875rem;
+  --mat-sys-title-small-tracking: 0.006rem;
+  --mat-sys-title-small-weight: 500;
+  --mat-sys-corner-extra-large: 28px;
+  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
+  --mat-sys-corner-extra-small: 4px;
+  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
+  --mat-sys-corner-full: 9999px;
+  --mat-sys-corner-large: 16px;
+  --mat-sys-corner-large-end: 0 16px 16px 0;
+  --mat-sys-corner-large-start: 16px 0 0 16px;
+  --mat-sys-corner-large-top: 16px 16px 0 0;
+  --mat-sys-corner-medium: 12px;
+  --mat-sys-corner-none: 0;
+  --mat-sys-corner-small: 8px;
+  --mat-sys-dragged-state-layer-opacity: 0.16;
+  --mat-sys-focus-state-layer-opacity: 0.12;
+  --mat-sys-hover-state-layer-opacity: 0.08;
+  --mat-sys-pressed-state-layer-opacity: 0.12;
+  --mat-button-filled-container-color: var(--kip-contrast-dim-color);
+  --mat-button-outlined-outline-color: var(--kip-contrast-color);
+  --mat-icon-color: var(--kip-contrast-color);
+  --mat-sys-on-background: #831d1d;
+  --mat-sys-on-surface: #831d1d;
+  --mat-sys-on-surface-variant: #831d1d;
+  --mat-sys-inverse-surface: #831d1d;
+  --mat-sys-primary: #831d1d;
+  --mat-sys-outline: #831d1d;
+  --mat-sys-tertiary-fixed: var(--kip-contrast-color);
+  --mat-sys-tertiary-fixed-dim: var(--kip-contrast-color);
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+html,
+body {
+  height: 100%;
+  overscroll-behavior-y: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  overflow-x: hidden;
+}
+input,
+textarea,
+[contenteditable=true] {
+  user-select: text;
+  -webkit-user-select: text;
+  margin: 0;
+  overscroll-behavior-y: none;
+}
+.app-shell {
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+body {
+  font-family:
+    Roboto,
+    "Helvetica Neue",
+    sans-serif;
+  background: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+  margin: 0;
+  touch-action: none;
+}
+#app-filter-wrapper {
+  filter: brightness(var(--kip-nightModeBrightness)) var(--kip-nightModeFilters);
+  -webkit-backdrop-filter: brightness(var(--kip-nightModeBrightness));
+  backdrop-filter: brightness(var(--kip-nightModeBrightness));
+  transition: filter 0.3s ease;
+  position: relative;
+  z-index: 1300;
+}
+.dialogBackdrop {
+  background-color: rgba(0, 0, 0, 0.75);
+}
+.ng-invalid:not(form) {
+  border-left: 5px solid var(--kip-zone-alarm-color);
+}
+.ng-valid[required],
+.ng-valid.required {
+  border-left: 5px solid var(--kip-green-color);
+}
+.grid-stack .ui-resizable-se,
+.grid-stack .ui-resizable-sw,
+.grid-stack .ui-resizable-ne,
+.grid-stack .ui-resizable-nw {
+  width: 32px;
+  height: 32px;
+}
+.grid-stack .ui-resizable-e,
+.grid-stack .ui-resizable-w {
+  width: 32px;
+}
+.grid-stack .ui-resizable-n,
+.grid-stack .ui-resizable-s {
+  height: 32px;
+}
+.markdown-content a {
+  color: var(--mat-sys-primary);
+}
+.markdown-content table {
+  border: 1px solid var(--mat-sys-on-background);
+  border-collapse: collapse;
+  width: 100%;
+}
+.markdown-content table th,
+.markdown-content table td {
+  border: 1px solid var(--mat-sys-on-background);
+  padding: 8px;
+  text-align: left;
+}
+.markdown-content table tr:nth-child(even) {
+  background-color: var(--mat-sys-surface-container-high);
+}
+.loader-container {
+  height: 100%;
+  width: 100%;
+  background-color: var(--mat-sys-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#loader {
+  height: 175px;
+  width: 175px;
+  position: relative;
+}
+#loader .dot {
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 87.5px;
+}
+#loader .dot::before {
+  border-radius: 100%;
+  content: "";
+  height: 87.5px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: scale(0);
+  width: 87.5px;
+}
+#loader .dot:nth-child(7n+1) {
+  transform: rotate(45deg);
+}
+#loader .dot:nth-child(7n+1)::before {
+  animation: 0.8s linear 0.1s normal none infinite running load;
+  background: #e5ab13 none repeat scroll 0 0;
+}
+.notification-overlay-panel {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  z-index: 1100 !important;
+  pointer-events: auto;
+}
+.cdk-overlay-container .cdk-overlay-pane.notification-overlay-panel {
+  z-index: 1100 !important;
+}
+#loader .dot:nth-child(7n+2) {
+  transform: rotate(90deg);
+}
+#loader .dot:nth-child(7n+2)::before {
+  animation: 0.8s linear 0.2s normal none infinite running load;
+  background: #f0ca31 none repeat scroll 0 0;
+}
+#loader .dot:nth-child(7n+3) {
+  transform: rotate(135deg);
+}
+#loader .dot:nth-child(7n+3)::before {
+  animation: 0.8s linear 0.3s normal none infinite running load;
+  background: #92c7e9 none repeat scroll 0 0;
+}
+#loader .dot:nth-child(7n+4) {
+  transform: rotate(180deg);
+}
+#loader .dot:nth-child(7n+4)::before {
+  animation: 0.8s linear 0.4s normal none infinite running load;
+  background: #63afdf none repeat scroll 0 0;
+}
+#loader .dot:nth-child(7n+5) {
+  transform: rotate(225deg);
+}
+#loader .dot:nth-child(7n+5)::before {
+  animation: 0.8s linear 0.5s normal none infinite running load;
+  background: #3586ca none repeat scroll 0 0;
+}
+#loader .dot:nth-child(7n+6) {
+  transform: rotate(270deg);
+}
+#loader .dot:nth-child(7n+6)::before {
+  animation: 0.8s linear 0.6s normal none infinite running load;
+  background: #d52626 none repeat scroll 0 0;
+}
+#loader .dot:nth-child(7n+7) {
+  transform: rotate(315deg);
+}
+#loader .dot:nth-child(7n+7)::before {
+  animation: 0.8s linear 0.7s normal none infinite running load;
+  background: #e26767 none repeat scroll 0 0;
+}
+#loader .dot:nth-child(7n+8) {
+  transform: rotate(360deg);
+}
+#loader .dot:nth-child(7n+8)::before {
+  animation: 0.8s linear 0.8s normal none infinite running load;
+  background: #f8e598 none repeat scroll 0 0;
+}
+#loader .loading {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  bottom: -40px;
+  height: 20px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  width: 180px;
+}
+@keyframes load {
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+@keyframes load {
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+/* angular:styles/global:styles */
+/*# sourceMappingURL=styles.css.map */