/**
 * Created using google-webfonts-helper
 * https://google-webfonts-helper.herokuapp.com/fonts/lato?subsets=latin
 */
/* lato-100 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* lato-100italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }
f
/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* lato-300italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* lato-700italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* lato-900italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/******************
 * Assistant Font *
 ******************/
/* assistant-200 - hebrew_latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* assistant-300 - hebrew_latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 300;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* assistant-regular - hebrew_latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* assistant-600 - hebrew_latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 600;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* assistant-700 - hebrew_latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 700;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

/* assistant-800 - hebrew_latin */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 800;
  /* IE9 Compat Modes */
  /* Legacy iOS */ }

.slide-in {
  animation: slide-in 0.5s forwards; }

.slide-out {
  animation: slide-out 0.5s forwards; }

@keyframes slide-in {
  100% {
    transform: translateX(0%);
    opacity: 1; } }

@keyframes slide-out {
  0% {
    transform: translateX(0%); }
  100% {
    transform: translateX(-100%); } }

@keyframes spin-animation {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

/* ================== FONT STACKS ================== */
/* ========== FONT WEIGHTS ========== */
/* =========== FONT SIZES =========== */
/* ====== NEW COLOR PALETTE ====== */
/* === GRAY === */
/* === STONE === */
/* === BLUE === */
/* === STEEL BLUE === */
/* === RED === */
/* === ORANGE === */
/* === BRAND(green) === */
/* === GREEN === */
/* === YELLOW === */
/* ================== COLOR USAGE ================== */
/* ================ for light theme =============== */
/* ================ for dark theme =============== */
/* =========== DIFFERENT COMPONENTS SETTINGS =========== */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-width: 1024px;
  background-color: var(--ob-primary-background);
  color: var(--ob-primary-text);
  font-size: calc(10px + 0.2vw);
  font-weight: 400;
  font-family: Lato, 'Assistant', sans-serif !important; }

a {
  color: var(--ob-link) !important;
  text-decoration: none; }
  a:hover {
    text-decoration: underline !important; }

.disabled {
  opacity: 0.5;
  cursor: not-allowed; }

.required::before {
  content: '*';
  display: block;
  color: var(--ob-danger);
  position: absolute;
  left: -12px;
  font-size: 18px;
  top: 0; }

.align-center {
  align-items: center; }

.align-start {
  align-items: flex-start; }

ob-input.ng-invalid.ng-dirty input,
ob-input.ng-invalid.ng-dirty .ng-select-container,
ob-dropdown.ng-invalid.ng-dirty input,
ob-dropdown.ng-invalid.ng-dirty .ng-select-container {
  border-color: red !important; }

.scrollable-container {
  scrollbar-width: thin;
  scrollbar-color: var(--ob-pseudo) transparent; }
  .scrollable-container::-webkit-scrollbar {
    width: 3px; }
  .scrollable-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--ob-pseudo); }
  .scrollable-container::-webkit-scrollbar-corner {
    background-color: transparent; }

.full-page {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1; }
  .full-page .grid-content {
    width: 100%;
    flex: 1;
    height: 100%; }

.clean-btn {
  background: none;
  color: inherit;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit; }

label {
  margin-bottom: 0; }

.ob-dark-theme:root,
.ob-dark-theme {
  --ob-title: #fff;
  --ob-secondary-title: #eaeaea;
  --ob-primary-text: #d0d0d0;
  --ob-secondary-text: #929191;
  --ob-green: #03b96c;
  --ob-link: #128df3;
  --ob-active: #3391ff;
  --ob-link-active: #0b6bdd;
  --ob-hover: #333;
  --ob-warning: #c1a761;
  --ob-danger: #f03d53;
  --ob-primary-background: #181c21;
  --ob-primary-background-with-opacity: rgba(19, 20, 28, 0.9);
  --ob-secondary-background: #171d24;
  --ob-icon-background: #000;
  --ob-sidebar-background: #141414;
  --ob-chip-background: #383838;
  --ob-disabled: #525252;
  --ob-shadow: -20px 0 14px 0 rgba(0, 0, 0, 0.5);
  --ob-secondary-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.6);
  --ob-gradient: linear-gradient(to left, #1f1f27 100%, #434343);
  --ob-secondary-gradient: linear-gradient(to left, #000, #13365f 60%, #3391ff);
  --ob-border: #484848;
  --ob-input-border: #686868;
  --ob-background-gradient200: #323a41;
  --ob-background-gradient300: #414b53;
  --ob-activate-card-gradient: linear-gradient(to left, #1f1f27, #42424f 100%);
  --ob-popout-backgroud: #000;
  --ob-popout-background-gradient: linear-gradient(to bottom, #1f1f27, #1f1f27), linear-gradient(284deg, #0d3626 1%, #00d46e 100%);
  --ob-popout-border-gradient: linear-gradient(284deg, #0d3626 1%, #00d46e 100%);
  --ob-pseudo: #777; }

.popover {
  margin-top: 5px;
  border-radius: 3px;
  border: 1px solid var(--ob-border);
  background-color: var(--ob-secondary-background);
  z-index: 99999; }
  .popover.max-width {
    width: initial;
    max-width: initial; }
  .popover .popover-body {
    color: var(--ob-secondary-text); }
  .popover.bs-popover-top > .arrow::after {
    border-top-color: var(--ob-secondary-background); }
  .popover.bs-popover-bottom > .arrow::after {
    border-bottom-color: var(--ob-secondary-background); }
  .popover.bs-popover-right > .arrow::after {
    border-right-color: var(--ob-secondary-background); }
  .popover.bs-popover-left > .arrow::after {
    border-left-color: var(--ob-secondary-background); }
  .popover .popover-item {
    cursor: pointer;
    display: block;
    padding: 15px 10px 0;
    font-size: 12px; }
    .popover .popover-item a,
    .popover .popover-item button {
      color: var(--ob-secondary-text); }
      .popover .popover-item a:hover, .popover .popover-item a.active,
      .popover .popover-item button:hover,
      .popover .popover-item button.active {
        color: var(--ob-primary-text) !important; }
      .popover .popover-item a.active,
      .popover .popover-item button.active {
        cursor: default; }
    .popover .popover-item:last-child {
      margin-bottom: 15px; }

.bold {
  font-weight: bold; }

.warning-text {
  color: var(--ob-warning);
  font-style: italic; }

.error-text {
  color: var(--ob-danger);
  font-style: italic; }

@media (max-width: 900px) {
  :host {
    width: 100vw !important; } }

.app-wrap {
  display: flex;
  height: 100%;
  position: relative; }
  .app-wrap .background,
  .app-wrap .circle,
  .app-wrap svg {
    width: 100%;
    height: 100%; }
  .app-wrap svg {
    transform: scale(1.4); }
  .app-wrap button {
    width: 140px;
    height: 50px;
    padding: 15px 36px 16px;
    border-radius: 100px;
    background-color: #3391ff;
    color: #fff;
    cursor: pointer;
    border: 0;
    font-size: 14px; }
    .app-wrap button:active, .app-wrap button:hover {
      background-color: var(--ob-link-active);
      border: solid 2px var(--ob-border); }
  .app-wrap .right-side {
    display: flex;
    height: 100%;
    right: 0;
    position: absolute;
    box-shadow: var(--ob-shadow);
    transform: translateX(100%);
    opacity: 0;
    overflow: hidden;
    background-color: var(--ob-primary-background);
    will-change: transform;
    width: 40vw; }
    .app-wrap .right-side.opacity {
      background-color: var(--ob-primary-background-with-opacity); }
    .app-wrap .right-side .signin-wrap {
      align-items: flex-start;
      margin: 0 0 0 8vw;
      align-self: center; }
      .app-wrap .right-side .signin-wrap .title {
        margin-bottom: 5px;
        font-size: 31px;
        font-weight: 300;
        line-height: 1.03;
        color: var(--ob-title); }
      .app-wrap .right-side .signin-wrap .subtitle {
        margin-bottom: 30px;
        font-size: 14px;
        font-style: italic;
        color: var(--ob-title); }
    .app-wrap .right-side .footer-wrap {
      position: absolute;
      bottom: 15px;
      left: 50px;
      font-size: 12px;
      font-style: italic;
      line-height: 1.09;
      color: var(--ob-secondary-text); }
  .app-wrap .background {
    align-items: flex-start;
    margin: 0 20vw 0 10vw;
    position: relative; }
    .app-wrap .background .titles {
      position: absolute;
      top: 56vh;
      display: flex;
      flex-direction: column;
      margin-left: 2vw;
      white-space: nowrap; }
      .app-wrap .background .titles .title {
        text-transform: uppercase;
        font-size: 32px;
        font-weight: 900;
        letter-spacing: 12px;
        color: var(--ob-title); }
        .app-wrap .background .titles .title .gray {
          color: var(--ob-secondary-text); }
      .app-wrap .background .titles .sub-title {
        font-size: 22px;
        font-style: italic;
        margin: 10px 5px;
        color: var(--ob-secondary-text); }