/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@angular/material/prebuilt-themes/azure-blue.css?ngGlobalStyle ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
html{--mat-sys-background: #faf9fd;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #f2f0f4;--mat-sys-inverse-primary: #abc7ff;--mat-sys-inverse-surface: #2f3033;--mat-sys-on-background: #1a1b1f;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #410002;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #001b3f;--mat-sys-on-primary-fixed: #001b3f;--mat-sys-on-primary-fixed-variant: #00458f;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #131c2b;--mat-sys-on-secondary-fixed: #131c2b;--mat-sys-on-secondary-fixed-variant: #3e4759;--mat-sys-on-surface: #1a1b1f;--mat-sys-on-surface-variant: #44474e;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #00006e;--mat-sys-on-tertiary-fixed: #00006e;--mat-sys-on-tertiary-fixed-variant: #0000ef;--mat-sys-outline: #74777f;--mat-sys-outline-variant: #c4c6d0;--mat-sys-primary: #005cbb;--mat-sys-primary-container: #d7e3ff;--mat-sys-primary-fixed: #d7e3ff;--mat-sys-primary-fixed-dim: #abc7ff;--mat-sys-scrim: #000000;--mat-sys-secondary: #565e71;--mat-sys-secondary-container: #dae2f9;--mat-sys-secondary-fixed: #dae2f9;--mat-sys-secondary-fixed-dim: #bec6dc;--mat-sys-shadow: #000000;--mat-sys-surface: #faf9fd;--mat-sys-surface-bright: #faf9fd;--mat-sys-surface-container: #efedf0;--mat-sys-surface-container-high: #e9e7eb;--mat-sys-surface-container-highest: #e3e2e6;--mat-sys-surface-container-low: #f4f3f6;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #dbd9dd;--mat-sys-surface-tint: #005cbb;--mat-sys-surface-variant: #e0e2ec;--mat-sys-tertiary: #343dff;--mat-sys-tertiary-container: #e0e0ff;--mat-sys-tertiary-fixed: #e0e0ff;--mat-sys-tertiary-fixed-dim: #bec2ff;--mat-sys-neutral-variant20: #2d3038;--mat-sys-neutral10: #1a1b1f}html{--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)}html{--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)}html{--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)}html{--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)}html{--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)}html{--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)}html{--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}html{--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}html{--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}
/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@angular/cdk/overlay-prebuilt.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@angular/material/prebuilt-themes/azure-blue.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
html{--mat-sys-background: #faf9fd;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #f2f0f4;--mat-sys-inverse-primary: #abc7ff;--mat-sys-inverse-surface: #2f3033;--mat-sys-on-background: #1a1b1f;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #410002;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #001b3f;--mat-sys-on-primary-fixed: #001b3f;--mat-sys-on-primary-fixed-variant: #00458f;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #131c2b;--mat-sys-on-secondary-fixed: #131c2b;--mat-sys-on-secondary-fixed-variant: #3e4759;--mat-sys-on-surface: #1a1b1f;--mat-sys-on-surface-variant: #44474e;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #00006e;--mat-sys-on-tertiary-fixed: #00006e;--mat-sys-on-tertiary-fixed-variant: #0000ef;--mat-sys-outline: #74777f;--mat-sys-outline-variant: #c4c6d0;--mat-sys-primary: #005cbb;--mat-sys-primary-container: #d7e3ff;--mat-sys-primary-fixed: #d7e3ff;--mat-sys-primary-fixed-dim: #abc7ff;--mat-sys-scrim: #000000;--mat-sys-secondary: #565e71;--mat-sys-secondary-container: #dae2f9;--mat-sys-secondary-fixed: #dae2f9;--mat-sys-secondary-fixed-dim: #bec6dc;--mat-sys-shadow: #000000;--mat-sys-surface: #faf9fd;--mat-sys-surface-bright: #faf9fd;--mat-sys-surface-container: #efedf0;--mat-sys-surface-container-high: #e9e7eb;--mat-sys-surface-container-highest: #e3e2e6;--mat-sys-surface-container-low: #f4f3f6;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #dbd9dd;--mat-sys-surface-tint: #005cbb;--mat-sys-surface-variant: #e0e2ec;--mat-sys-tertiary: #343dff;--mat-sys-tertiary-container: #e0e0ff;--mat-sys-tertiary-fixed: #e0e0ff;--mat-sys-tertiary-fixed-dim: #bec2ff;--mat-sys-neutral-variant20: #2d3038;--mat-sys-neutral10: #1a1b1f}html{--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)}html{--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)}html{--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)}html{--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)}html{--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)}html{--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)}html{--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}html{--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}html{--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}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************/
/*IMPORTANT:  Angular material css. Won't work without this import */

:root {
  --tile-border-color-active: rgb(200, 145, 200);
  --tile-border-color-inactive: rgb(226, 215, 226);
}

body {
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  max-height: 100%;
  overflow: hidden;
  background-color: transparent;
}

.app-scroll {
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}

.app-scroll::scrollbar-color {
  background: white;
}

.app-scroll::scrollbar-width {
  width: 2px;
}

.app-scroll::-webkit-scrollbar {
  width: 2px;
}

/* button */
.app-scroll::-webkit-scrollbar-button {
  background: white;
}

/* Handle */
.app-scroll::-webkit-scrollbar-thumb {
  background-color: white;
  /* color of the scroll thumb */
  border-radius: 5px;
  /*  roundness of the scroll thumb */
  /* border: 2px solid rgb(225, 148, 247); */
  border: white;
}

/* Handle on hover */
.app-scroll::-webkit-scrollbar-thumb:hover {
  background: white;
}

/** Disable anchor effect*/
a.disabled {
  pointer-events: none;
  cursor: default;
}

/* Disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted.
 This property can be used to prevent this.
*/
.no-text-selection {
  /* Safari */
  /* IE 10 and IE 11 */
  user-select: none;
}

@keyframes fadeIn {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.1;
  }
}

.octo-menu-fade-in {
  animation: fadeIn ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.octo-menu-fade-out {
  animation: fadeOut 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

a,
button {
  text-decoration: none !important;
}

.octo-menu-fade-in {
  animation: fadeIn ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* box-shadow: rgba(27, 2, 27, 0.973) 10px 13px 16px,
    rgba(27, 2, 27, 0.973) 10px 13px 16px; */
}

.octo-menu-fade-out {
  animation: fadeOut 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* ============================= Start Bootstrap overriding */

.btn:focus,
.btn:active {
  box-shadow: none !important;
  outline: 0px !important;
}

.form-control:focus {
  box-shadow: none !important;
}

.form-select:focus {
  box-shadow: none !important;
}

.btn-primary {
  color: rgb(138, 53, 155) !important;
  background-color: white !important;
  border-color: rgb(138, 53, 155) !important;
}

/* .btn-primary:focus, */
.btn-primary:active,
.btn-primary:hover {
  color: white !important;
  background-color: rgb(138, 53, 155) !important;
  border-color: rgb(138, 53, 155) !important;
}


.btn-primary-selected {
  color: white !important;
  background-color: rgb(138, 53, 155) !important;
  border-color: rgb(138, 53, 155) !important;
}

.btn-outline-primary {
  color: rgb(138, 53, 155) !important;
  background-color: white !important;
  border-color: rgb(138, 53, 155) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  color: white !important;
  background-color: rgb(138, 53, 155) !important;
  border-color: rgb(138, 53, 155) !important;
}

/* btn-gray used in dark theme */
.btn-gray {
  color: white !important;
  background-color: gray !important;
  border-color: rgb(63, 63, 63) !important;
}

.btn-gray:active,
.btn-gray:hover {
  color: white !important;
  background-color: rgb(63, 63, 63) !important;
  border-color: rgb(63, 63, 63) !important;
}

.btn-gray-selected {
  color: white !important;
  background-color: rgb(63, 63, 63) !important;
  border-color: rgb(63, 63, 63) !important;
}

.form-check-input {
  box-shadow: none !important;
  border-color: rgb(63, 63, 63) !important;
}

.form-check-input:checked {
  background-color: #e806f0 !important;
  border-color: #e806f0 !important;
}

/* Override bootstrap dropdown menu hover */
.dropdown-menu>li :hover {
  background-image: none;
  font-weight: bolder;
  background-color: transparent;
}

.dropdown-menu {
  z-index: 1025;
  margin: 1px !important;
  padding: 2px !important;
}

/* ============================= End Bootstrap overriding */


.selected-border-color {
  border-color: #ecbcfc !important;
}

.btn-border-color,
.btn-border-color:focus {
  border: 1px dashed #ecbcfc !important;
}

/** bg for Select2 selection*/
.selection2-dark,
.selection2-dark:focus {
  background-color: rgb(44, 40, 40) !important;
  color: white !important;
  border: none !important;
}


/* Start blinking */
.blinking {
  animation: blinking-opacity 2s ease-in-out infinite;
  opacity: 1;
}

.blinking-1s {
  animation: blinking-opacity 1s ease-in-out infinite;
  opacity: 1;
}

@keyframes blinking-opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* End blinking */

/* Start Organization */
.org-logo {
  /* display: block; */
  max-width: 200px;
  max-height: 33px;
  width: auto;
  height: auto;
}

.org-logo-small {
  /* display: block; */
  max-width: 200px;
  max-height: 30px;
  width: auto;
  height: auto;
}

.org-logo-x-small {
  max-width: 150px;
  max-height: 30px;
  width: auto;
  height: auto;
}

.octo-org-fade-in {
  animation: fadeIn ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.octo-org-fade-out {
  animation: fadeOut 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* End Organization */


/* Themes - Start */
.light-theme-tile-header-menu-hover:hover {
  color: #f71eff !important;
  background-color: none !important;
  background-image: none !important;
}

.dark-theme-tile-header-menu-hover:hover {
  color: rgb(234, 255, 0) !important;
  background-color: none !important;
  background-image: none !important;
}

/* Themes - End */

/* Form label color */
.form-label-color {
  color: rgb(131, 50, 131) !important;
}

/* Form label color */
.form-label-white-color {
  color: white !important;
}

/* The non-selected link/toolbar item color */
.link-color {
  color: rgb(100, 4, 119) !important;
}

/* Hover over a link color */
.link-color-hover {
  color: #e806f0 !important;
}

/* The selected link/button color */
.link-color-selected {
  color: #e806f0 !important;
}

/* The selected link/button color */
.drop-down-color {
  color: rgb(198, 111, 209) !important;
}

.nav-tabs .nav-item .nav-link.active {
  color: #ff8ce9 !important;
}

.nav-link.active {
  color: #ff8ce9 !important;
}

.img-to-gray {
  filter: gray;
  /* IE6-9 */
  /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1);
  /* Microsoft Edge and Firefox 35+ */
}

.img-to-black {
  filter: black;
  /* IE6-9 */
  /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: blackscale(1);
  /* Microsoft Edge and Firefox 35+ */
}


/* Start Bootstrap tooltip 
Also used in the chart nodes */
.custom-tooltip {
  --bs-tooltip-bg: var(--bs-dark);
}

.custom-tooltip .tooltip-inner {
  background-color: var(--bs-dark);
  border: 1px solid white !important;
}

.custom-tooltip .tooltip-arrow::before {
  border-color: white !important;
}

.tooltip {
  font-family: Lato;
  opacity: 1 !important;
  color: black !important;
  font-size: 12px;
}

/* End Bootstrap tooltip */

/* Start Bootstrap popover used in Octo tours*/
.custom-popover {
  /* --bs-popover-max-width: 200px; blueviolet*/
  --bs-popover-border-color: rgb(102, 121, 47);
  --bs-popover-header-bg: #5B8930;
  --bs-popover-header-color: white;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

.custom-popover-dark {
  --bs-popover-bg: var(--bs-dark);
  --bs-popover-arrow-border: white;
  --bs-popover-border-color: white;
  --bs-popover-header-bg: var(--bs-secondary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

/* End Bootstrap popover */

/* Start Bootstrap pagination */
.custom-pagination {
  --bs-pagination-focus-box-shadow: none;
}

/* End Bootstrap pagination */

.engraved {
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #ddd;
}

/* Start fade in/out  opacity: 0.2 */
@keyframes fade-in-2 {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: 9;
  }
}

@keyframes fade-out-2 {
  0% {
    opacity: 9;
  }

  100% {
    opacity: 0.2;
  }
}

.fade-in-2 {
  animation: fade-in-2 ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


.fade-out-2 {
  animation: fade-out-2 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* End fade in/out  opacity: 0.2 */

/* Start fade in/out  opacity: 0.1 */
@keyframes fade-in-1 {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 9;
  }
}

@keyframes fade-out-1 {
  0% {
    opacity: 9;
  }

  100% {
    opacity: 0.1;
  }
}

.fade-in-2 {
  animation: fade-in-1 ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


.fade-out-1 {
  animation: fade-out-1 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* End fade in/out  opacity: 0.1 */


/* Start plugin scroll */


.plugin-scroll {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  /* Edge */
  -ms-overflow-style: none;
}

.plugin-scroll:hover {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #b9b6b6 transparent;
  /* Edge */
  -ms-overflow-style: auto;
}

.plugin-scroll::-webkit-scrollbar {
  /* width: 8px; nto working with  'scrollbar-width: thin' which required in dark theme
  height: 8px; */
  -webkit-transition: background 2s ease;
  transition: background 2s ease;
}

.plugin-scroll::-webkit-scrollbar-thumb {
  background: transparent;
}

.plugin-scroll::-webkit-scrollbar-thumb:hover {
  scrollbar-color: #7c7a7a transparent;
}

/* End plugin scroll */


.no-shadow,
.no-shadow:focus,
.no-shadow:active {
  box-shadow: none !important;
  outline: 0px !important;
}

/** Left vertical line to indicate hover over*/
.left-vertical-line {
  padding-top: 3px;
  padding-bottom: 5px;
  padding-right: 3px;
  padding-left: 3px;
}

.left-vertical-line:hover {
  border-left: 2px solid #d370f4;
}

/** Common font sizes for direct usage within a class attribute*/
.font-11 {
  font-size: 12px !important;
}

.font-12 {
  font-size: 12px !important;
}

.font-13 {
  font-size: 13px !important;
}

.font-14 {
  font-size: 13px !important;
}

.octo-bg-dark {
  color: white !important;
  background-color: #1e1e1e !important;
}

.octo-bg-light {
  color: #1e1e1e !important;
  background-color: white !important;
}

/* Start Selection dropdown  */

.cdk-overlay-container {
  z-index: 2000;
}

.octo-selection-item-light {
  --mat-menu-item-label-text-font: "Lato", sans-serif;
  --mat-menu-item-label-text-size: 13px;
  --mat-menu-item-label-text-weight: normal;
  --mat-menu-item-label-text-color: black;
  min-height: 25px !important;
  background-color: white !important;
}

.octo-selection-item-light:hover {
  color: #b80af2 !important;
  font-weight: bolder !important;
}

.octo-selection-item-dark {
  --mat-menu-item-icon-color: white;
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-label-text-font: "Lato", sans-serif;
  --mat-menu-item-label-text-size: 13px;
  --mat-menu-item-label-text-weight: normal;
  min-height: 25px !important;
  background-color: #3c3939 !important;
}

.octo-selection-item-dark:hover {
  color: rgb(234, 255, 0) !important;
  font-weight: bolder !important;
}

/* End Selection dropdown  */

/* -------------- Start Angular Material overriding */

/* Styles for mat menu */
.mat-mdc-menu-content {
  padding: 0 !important;
}

.octo-menu-divider {
  /* --mat-menu-divider-color:rgb(218, 207, 207) !important; */
  --mat-menu-divider-top-spacing: 0px;
  --mat-menu-divider-bottom-spacing: 0px;
  --mat-divider-color: rgb(188, 187, 187) !important;
  --mat-divider-width: 1px
}

/* Styles for tab labels */
.octo-tab-light {
  --mdc-secondary-navigation-tab-container-height: 30px;
  --mat-tab-header-label-text-font: "Lato", sans-serif;
  --mat-tab-header-label-text-size: 12px;
  --mat-tab-header-label-text-weight: normal;
  --mat-tab-header-label-text-line-height: normal;
  --mat-tab-header-active-label-text-color: rgb(208, 14, 208);
  --mat-tab-header-inactive-label-text-color: #49393b;
  --mat-tab-header-pagination-icon-color: #49393b;
  padding: 0 !important;
  padding-right: 15px !important;
  min-width: 0px !important;
}

.octo-tab-light :hover {
  /* color: rgb(208, 14, 208);not working, need tests*/
  /* font-weight: bolder !important; */
}

.octo-tab-dark {
  --mdc-secondary-navigation-tab-container-height: 30px;
  --mat-tab-header-label-text-font: "Lato", sans-serif;
  --mat-tab-header-label-text-size: 12px;
  --mat-tab-header-label-text-line-height: normal;
  --mat-tab-header-label-text-weight: normal;
  --mat-tab-header-active-label-text-color: rgb(234, 255, 0);
  --mat-tab-header-inactive-label-text-color: white;
  --mat-tab-header-pagination-icon-color: white;
}

.octo-tab-dark:hover {
  /* color: rgb(234, 255, 0) !important;  not working, need tests*/
  /* font-weight: bolder !important; */
}

/* End Angular Material overriding */


/* Start nav tabs scroll
Important: Used JS file: octo-ts-angular-client\src\assets\js\octo\scroll\octo_scroll.js */
.octo-nav-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* Apply this rule only in Firefox */
@-moz-document url-prefix() {
  .octo-nav-scroll {
    padding-bottom: 3px;
    /**Needed in Firefox to hide the arrows*/
    scrollbar-width: thin;
    scrollbar-color: #e3dfdf transparent;
  }
}

.octo-nav-scroll::-webkit-scrollbar {
  padding-top: 0;
  margin-top: 0;
  height: 4px;
  background: transparent;
}

.octo-nav-scroll::-webkit-scrollbar-thumb {
  background: transparent;
}

.octo-nav-scroll:hover::-webkit-scrollbar-thumb {
  background: #e3dfdf;
}

.octo-nav-scroll:hover::-webkit-scrollbar-thumb:hover {
  height: 4px;
  cursor: default;
  background: #a8a6a8;
}

/* End plugin scroll */


/* Start color picker trigger
Overriding the Coloris.js class: .clr-field */

.octo-color-picker-square .clr-field button,
.octo-color-picker-circle .clr-field button {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  outline: none;
}

.octo-color-picker-square .clr-field input,
.octo-color-picker-circle .clr-field input {
  border: none;
  border-width: 0;
  padding: 0;
  width: 19px;
  height: 19px;
  cursor: pointer;
  background-color: transparent;
  outline: none;
}

.octo-color-picker-square .clr-field input:focus,
.octo-color-picker-circle .clr-field input:focus {
  outline: none;
}

.octo-color-picker-circle .clr-field button {
  border-radius: 50%;
}

/** Small*/
.octo-color-picker-square-sm .clr-field button,
.octo-color-picker-circle-sm .clr-field button {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  outline: none;
}

.octo-color-picker-square-sm .clr-field input,
.octo-color-picker-circle-sm .clr-field input {
  border: none;
  border-width: 0;
  padding: 0;
  width: 10px;
  height: 10px;
  cursor: pointer;
  background-color: transparent;
}

.octo-color-picker-square-sm .clr-field input:focus,
.octo-color-picker-circle-sm .clr-field input:focus {
  outline: none;
}

.octo-color-picker-circle-sm .clr-field button {
  border-radius: 50%;
}

/* End color picker trigger */

/* Start loader line*/
.loader-line {
  height: 1px;
}

.loader-line-2 {
  height: 2px;
}

.loader-line,
.loader-line-2 {
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.loader-line:before {
  height: 1px;
}

.loader-line-2:before {
  height: 2px;
}

.loader-line:before,
.loader-line-2:before {
  content: "";
  position: absolute;
  left: -20%;
  width: 20%;
  background-color: rgb(245, 129, 251);
  animation: lineAnim 2s linear infinite;
  border-radius: 20px;
}

@keyframes lineAnim {
  0% {
    left: -20%;
  }

  20% {
    left: 20%;
    width: 20%;
  }

  40% {
    left: 40%;
    width: 20%;
  }

  60% {
    left: 60%;
    width: 20%;
  }

  80% {
    left: 80%;
    width: 20%;
  }

  100% {
    left: 100%;
    width: 20%;
  }
}

/*# sourceMappingURL=styles.6812bfb5497f1d38.css.map*/