.MuiPopover-paper {
  box-shadow: none !important;
}
.MuiListItem-button {
  font-size: 14px;
  line-height: 14px;
}
.MuiList-padding {
  border-left: 2px solid #eeecec;
  padding-bottom: 8px;
  padding-top: 8px;
}
.MuiListSubheader-sticky {
  font-size: 12px !important;
  line-height: 40px !important;
  text-transform: uppercase;
}
#language-picker {
  cursor: pointer;
}
a,
a:active,
a:focus,
a:hover {
  color: inherit;
}
hr {
  margin: 8px 0 0 !important;
  padding: 4px 0 0 !important;
}
.social-list {
  display: flex;
  list-style: none;
  margin-top: 24px;
}
.social-list .icon {
  margin: 0 6px 0 0;
}
.social-list svg path {
  fill: var(--text-light);
  opacity: 0.5;
}
.social-list svg path:hover {
  opacity: 1;
}
.button {
  align-items: center;
  background: var(--primary);
  border: 0;
  border-bottom: 2px solid var(--primary-darker);
  border-radius: 4px;
  border-radius: var(--radius);
  box-sizing: border-box;
  color: var(--bg-white);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  height: 36px;
  justify-content: center;
  outline: none;
  padding: 0 15px;
}
.button .icon {
  display: flex;
  opacity: 0.5;
  position: relative;
}
.button .icon + .text {
  margin-left: 10px;
}
.button .text {
  color: var(--card);
  position: relative;
}
.button.active {
  box-shadow: 0 3px 1px hsla(var(--text-hsl), 0.4) inset;
}
.button.active,
.button:hover {
  background: var(--primary-darker);
  text-decoration: none;
}
.button.active .icon,
.button.active .text,
.button:hover .icon,
.button:hover .text {
  top: 1px;
}
.button.active.input,
.button:hover.input {
  padding-top: 2px;
}
.button:focus {
  box-shadow: 0 0 0 4px hsla(var(--primary-hsl), 0.25);
}
.button.input {
  width: auto;
}
.button.success {
  background: var(--success);
  border-color: var(--success-darker);
}
.button.success.active,
.button.success:hover {
  background: var(--success-darker);
}
.button.success:focus {
  box-shadow: 0 0 0 4px hsla(var(--success-darker-hsl), 0.25);
}
.button.alert {
  background: var(--alert);
  border-color: var(--alert-darker);
}
.button.alert.active,
.button.alert:hover {
  background: var(--alert-darker);
}
.button.alert:focus {
  box-shadow: 0 0 0 4px hsla(var(--alert-darker-hsl), 0.25);
}
.button.neutral {
  --neutral-darker: #7e7777;
  --neutral-darker-hsl: 0, 3%, 48%;
  background: var(--text-light);
  border-color: var(--neutral-darker);
}
.button.neutral.active,
.button.neutral:hover {
  background: var(--neutral-darker);
}
.button.neutral:hover {
  box-shadow: none;
}
.button.neutral:focus {
  box-shadow: 0 0 0 4px hsla(var(--neutral-darker-hsl), 0.25);
}
.button.outlined {
  background: #0000;
  border: 1px solid var(--bg-muted);
  border-radius: 4px;
  border-radius: var(--radius);
  display: flex;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  line-height: 36px;
  padding: 0 11px;
}
.button.outlined,
.button.outlined .text {
  color: var(--text-muted);
}
.button.outlined.active {
  background: hsla(var(--text-light-hsl), 0.2);
  box-shadow: none;
}
.button.outlined.active,
.button.outlined:hover {
  border-color: var(--text-light);
}
.button.outlined.active .icon,
.button.outlined.active .text,
.button.outlined:hover .icon,
.button.outlined:hover .text {
  top: 0;
}
.button.outlined:focus {
  box-shadow: 0 0 0 4px hsla(var(--bg-muted-hsl), 0.5);
}
.button.transparent {
  opacity: 0.3;
}
.sidebar-wrapper {
  display: flex;
  min-height: 100vh;
  position: fixed;
  z-index: 9999;
}
@media only screen and (min-width: 800px) {
  .sidebar-wrapper {
    position: relative;
  }
}
.sidebar {
  background: var(--card);
  bottom: 0;
  box-shadow: 0 4px 34px #0000001a;
  box-sizing: border-box;
  padding: 24px 24px 36px;
  position: absolute;
  top: 0;
  width: 280px;
  z-index: 9999;
}
.sidebar.closed {
  display: none;
}
@media only screen and (min-width: 800px) {
  .sidebar {
    flex: 0 0 280px;
    position: static;
    z-index: 1;
  }
  .sidebar.closed {
    display: block;
  }
}
.mobile-view {
  background: #fff;
  display: flex;
  margin-bottom: 12px;
  margin-right: 12px;
  padding: 25px 15px;
  position: fixed;
  width: 100%;
}
@media only screen and (min-width: 800px) {
  .mobile-view {
    display: none;
  }
}
.mobile-view .hamburger {
  margin-left: 9px;
  margin-right: 18px;
  margin-top: 6px;
  padding: 5px 0;
}
.mobile-view .hamburger label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30px;
}
.mobile-view .hamburger label span {
  background: var(--primary);
  border-radius: 10px;
  height: 3px;
  margin: 3px 0;
  transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.mobile-view .hamburger label span:first-of-type {
  width: 50%;
}
.mobile-view .hamburger label span:nth-of-type(2) {
  width: 100%;
}
.mobile-view .hamburger label span:nth-of-type(3) {
  width: 75%;
}
.mobile-view .hamburger input[type="checkbox"] {
  display: none;
}
.mobile-view .brand-logo {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}
.mobile-view .brand-logo img {
  margin-right: 10px;
}
.mobile-view .brand-logo .name {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
}
.mobile-view .brand-logo .name .version {
  color: var(--text-light);
  font-size: 10px;
  font-weight: 400;
  margin-left: 5px;
}
.mobile-view .background-black {
  background: #000;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100vw;
}
.mobile-view.closed .background-black {
  display: block;
}
.mobile-view.closed .brand-logo {
  display: none;
}
.sidebar-panel .hamburger {
  display: block;
  margin-bottom: 12px;
  margin-right: 12px;
  padding-bottom: 10px;
  position: relative;
  top: 12px;
}
@media only screen and (min-width: 800px) {
  .sidebar-panel .hamburger {
    display: none;
  }
}
.sidebar-panel .hamburger label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30px;
}
.sidebar-panel .hamburger label span {
  background: var(--primary);
  border-radius: 10px;
  height: 3px;
  margin: 3px 0;
  transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.sidebar-panel .hamburger label span:first-of-type {
  width: 50%;
}
.sidebar-panel .hamburger label span:nth-of-type(2) {
  width: 100%;
}
.sidebar-panel .hamburger label span:nth-of-type(3) {
  width: 75%;
}
.sidebar-panel .hamburger input[type="checkbox"] {
  display: none;
}
.sidebar-panel .brand-logo {
  align-items: center;
  display: flex;
  display: none;
  justify-content: flex-start;
}
.sidebar-panel .brand-logo img {
  margin-right: 10px;
}
.sidebar-panel .brand-logo .name {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
}
.sidebar-panel .brand-logo .name .version {
  color: var(--text-light);
  font-size: 10px;
  font-weight: 400;
  margin-left: 5px;
}
@media only screen and (min-width: 800px) {
  .sidebar-panel .brand-logo {
    display: flex;
  }
}
.profile-bar .table-header {
  margin: 24px 0 0;
}
.profile-bar .user {
  align-items: center;
  cursor: pointer;
  display: flex;
  margin: 12px 0 0;
  outline: none;
}
.profile-bar .user.is-active {
  background: hsla(var(--primary-hsl), 0.1);
  border-radius: 4px;
  border-radius: var(--radius);
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
}
.profile-bar .user.is-active .photo {
  border-color: var(--primary);
}
.profile-bar .photo {
  border: 2px solid #0000;
  border-radius: 50%;
  margin-right: 20px;
  width: 44px;
}
.profile-bar .user-info {
  flex: 1 0;
}
.profile-bar .user-info a,
.profile-bar .user-info a:active,
.profile-bar .user-info a:hover {
  text-decoration: none;
}
.profile-bar .user-info .username {
  color: var(--text);
  font-size: 15px;
}
.profile-bar .user-info small.role {
  color: var(--text-muted);
  font-size: 12px;
}
.profile-bar .logout {
  cursor: pointer;
  display: flex;
  padding-right: 10px;
  z-index: 9999;
}
.profile-bar .logout svg {
  fill: var(--text-light);
}
.profile-bar .logout svg:focus,
.profile-bar .logout svg:hover {
  fill: var(--alert);
}
ul.nav {
  list-style: none;
  margin: 8px 0 -6px;
  padding: 0;
}
ul.nav .text-light {
  color: var(--text-light);
}
ul.nav .ellipsis,
ul.nav > li.dropdown {
  padding: 0;
}
ul.nav .ellipsis a {
  justify-content: center;
}
ul.nav a {
  align-items: center;
  border-radius: 4px;
  border-radius: var(--radius);
  color: var(--text-light);
  display: flex;
  font-size: 14px;
  line-height: 34px;
  margin: 2px 0 0;
  padding: 0 10px;
  text-decoration: none;
}
ul.nav a span {
  color: var(--text);
  flex: 1 1;
  padding-left: 10px;
}
ul.nav a:focus,
ul.nav a:hover {
  background: hsla(var(--text-hsl), 0.05);
}
ul.nav a.is-active {
  background: hsla(var(--primary-hsl), 0.1);
  font-weight: 600;
}
ul.nav a.is-active span {
  color: var(--primary);
}
ul.nav a.is-active .icon * {
  fill: var(--primary);
}
ul.nav a.is-active .badge {
  box-shadow: 0 0 0 1px hsla(var(--primary-hsl), 0.5) inset;
  color: var(--primary);
  font-weight: 400;
}
ul.nav a .menu-caret {
  cursor: pointer;
  display: flex;
  flex: 0 1;
}
ul.nav a .menu-caret * {
  fill: var(--text-light);
}
ul.nav a .menu-caret.open {
  transform: rotate(180deg);
}
ul.nav a .menu-caret.open * {
  fill: var(--primary);
}
ul.nav a .badge {
  border-radius: 4px;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--bg-muted) inset;
  color: var(--text-light);
  flex: 0 1;
  font-size: 12px;
  line-height: 24px;
  padding: 0 6px;
}
ul.nav Submenu {
  display: block;
}
ul.nav ul.sub-menu {
  background: var(--card-muted);
  box-shadow: inset 4px 0 0 var(--bg-muted), inset 0 1px 0 var(--bg-muted),
    inset 0 -1px 0 var(--bg-muted);
  list-style: none;
  margin: 6px 0;
  padding: 6px 24px;
}
ul.nav ul.sub-menu li {
  margin: 2px 0 0;
}
ul.nav .media-buffer {
  padding: 18px 0 6px;
}
ul.nav .media-buffer .information {
  color: var(--text-light);
  font-size: 11px;
  line-height: 36px;
  text-align: center;
  width: 100%;
}
ul.nav .media-buffer .information span.percentage {
  color: var(--text-muted);
}
.side-navigation .table-header {
  padding: 12px 0 0;
}
#page-root {
  display: flex;
  width: 100%;
}
.main {
  flex: 1 1;
}
.main .main-body {
  margin: 0 24px 60px;
  margin: 0 var(--main-content-gutter) 60px;
}
header.breadcrumb {
  margin: 0 -24px;
  margin: 0 calc(var(--main-content-gutter) * -1);
  padding: 36px 24px;
}
@media only screen and (min-width: 800px) {
  header.breadcrumb {
    margin: 0 -24px;
    margin: 0 calc(var(--main-content-gutter) * -1);
    padding: 48px 24px 24px;
    padding: 48px var(--main-content-gutter) 24px;
  }
}
header.breadcrumb .row {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 800px) {
  header.breadcrumb .row {
    flex-direction: row;
  }
}
header.breadcrumb .page-title {
  flex: 1 1;
}
header.breadcrumb .page-title h1 {
  font-size: 28px;
  line-height: 36px;
  margin: 0;
}
header.breadcrumb .page-title .submenu {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
}
@media only screen and (min-width: 800px) {
  header.breadcrumb .page-title .submenu {
    line-height: 36px;
  }
}
header.breadcrumb .page-title .submenu a {
  color: var(--text-muted);
}
header.breadcrumb .page-title .submenu a:focus,
header.breadcrumb .page-title .submenu a:hover {
  color: var(--primary);
}
header.breadcrumb .page-title .submenu .item {
  margin: 0 12px 0 0;
}
header.breadcrumb .page-title .submenu .item.active {
  color: var(--primary);
}
header.breadcrumb .page-title .submenu .item:after {
  content: "->";
  margin-left: 12px;
}
header.breadcrumb .page-title .submenu .item:last-child:after {
  content: "";
}
header.breadcrumb .actions {
  align-items: center;
  display: flex;
  flex: auto;
  margin-top: 24px;
}
header.breadcrumb .actions > * {
  margin-right: 12px;
}
header.breadcrumb .actions > :last-child {
  margin-right: 0;
}
@media only screen and (min-width: 800px) {
  header.breadcrumb .actions {
    justify-content: flex-end;
    margin-top: 0;
  }
}
div.gradient {
  background: var(--upper-gradient);
  box-shadow: none;
  height: 6px;
  width: 100%;
}
.kpi div.card {
  background: var(--bg-white);
  border-radius: 4px;
  box-shadow: 0 4px 34px #0000000a, 0 3px 4px #0000001a;
  display: flex;
  flex-direction: column;
  height: 180px;
}
.kpi div.card div.title {
  align-items: center;
  box-shadow: 0 1px 1px #00000012;
  color: var(--text-muted);
  display: flex;
  flex: 0.7 1;
  flex-direction: column;
  font-size: 46px;
  justify-content: center;
  text-align: center;
  z-index: 1;
}
.kpi div.card div.title .number-divider span {
  color: var(--text-light);
  font-size: 28px;
}
.kpi div.card div.title .progress {
  color: var(--text-light);
  font-size: 15px;
}
.kpi div.card div.title .progress span.green {
  color: var(--success);
}
.kpi div.card div.title .progress span.red {
  color: var(--alert);
}
.kpi div.card div.footer {
  align-items: center;
  align-self: center;
  background-color: #fbfbfb;
  color: var(--text);
  display: flex;
  flex: 0.4 1;
  font-size: 14px;
  justify-content: center;
  line-height: 24px;
  width: 100%;
}
.kpi div.card div.footer div.bullet {
  display: table;
  height: 4px;
  width: 4px;
}
.kpi div.card.is-loading .footer {
  animation: shine 1.5s linear infinite;
  background: #eee;
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  background-size: 200% 100%;
  border-radius: 5px;
}
@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
.badge {
  align-items: center;
  border-radius: 18px;
  display: flex;
  height: 24px;
  justify-content: center;
  padding: 0 12px 0 8px;
}
.badge,
.badge span {
  width: -webkit-max-content;
  width: max-content;
}
.badge span {
  font-size: 13px;
  margin-left: 5px;
  text-transform: uppercase;
}
.badge .devided {
  font-weight: 400;
}
.badge .devisor {
  color: var(--text-muted);
}
.badge-recording {
  background-color: var(--card);
}
.badge-recording span {
  font-size: 11px;
}
.round {
  padding: 6px;
}
.round span {
  display: none;
}
.block-generic {
  align-content: center;
  align-items: stretch;
  background: #fbfbfb;
  border-radius: 4px;
  box-shadow: 0 4px 34px #0000000a, 0 3px 4px #0000001a;
  flex-direction: column;
  width: -webkit-fit-content;
  width: fit-content;
}
.block-generic,
.block-header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.block-header {
  align-items: center;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 1px #00000012;
  flex-direction: row;
  min-height: 50px;
  padding: 0 24px;
}
.block-body {
  align-content: center;
  background-color: var(--card-muted);
  flex-direction: column;
  height: inherit;
  justify-content: flex-start;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 30px 24px;
}
.block-body,
.block-footer {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
}
.block-footer {
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -1px 1px #00000012;
  flex-direction: row;
  justify-content: space-between;
  min-height: 50px;
  padding: 10px 40px;
}
.expand {
  width: 45px;
}
.block-body {
  padding-top: 0;
}
.block-body .generic-input {
  width: 88%;
}
footer {
  background: var(--bg-muted);
  box-sizing: border-box;
  column-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 72px 24px;
  row-gap: 24px;
}
footer h3 {
  color: var(--text-muted);
  font-size: 18px;
  margin: 0 0 12px;
  padding: 0;
}
footer .footer-copyright {
  width: 140px;
}
footer .footer-copyright p {
  color: var(--text-light);
  font-size: 13px;
  margin: 0;
  padding: 0;
}
footer .footer-list {
  width: 140px;
}
footer .footer-list h3 {
  font-size: 15px;
}
footer .footer-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer .footer-list ul li a p {
  color: var(--text-light);
  font-size: 13px;
  margin: 0;
  padding: 0;
}
.ellipse-container {
  border-radius: 50%;
}
.ellipse-container,
.ellipse-container .ellipse {
  height: -webkit-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}
.ellipse-container .ellipse {
  border: 2px solid #0000;
  border-radius: 50%;
  margin: 2px;
  padding: 2px;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.alert-message {
  align-content: flex-start;
  background: hsla(var(--alert-hsl), 0.1);
  flex-direction: row;
  justify-content: space-between;
  padding: 12px 24px;
}
.alert-message,
.alert-message div {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
}
.alert-message div .message {
  color: var(--alert);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  margin-left: 12px;
}
.alert-message svg path {
  fill: var(--alert);
}
label.generic-input .input-labels {
  display: flex;
  justify-content: space-between;
}
label.generic-input .input-labels p {
  color: var(--text-light);
  font-size: 12px;
  line-height: 36px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
label.generic-input .input-labels p i {
  text-transform: none;
}
label.generic-input .input-labels .hint {
  color: var(--primary);
  cursor: pointer;
  text-transform: none;
}
label.generic-input .input-bar {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--bg-muted);
  border-radius: 4px;
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  padding: 0 18px 0 26px;
}
label.generic-input .input-bar.no-padding {
  padding: 0;
}
label.generic-input .input-bar .input-box {
  align-items: flex-end;
  display: flex;
  width: 100%;
}
label.generic-input .input-bar .input-box .icon-left svg {
  height: 18px;
  width: 14px;
}
label.generic-input .input-bar .input-box input {
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
  outline: none;
  padding-left: 14px;
}
label.generic-input .input-bar .input-box input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}
label.generic-input .input-bar .input-box input::placeholder {
  color: var(--text-light);
}
label.generic-input .input-bar .icon-right {
  align-items: center;
  border: none;
  display: flex;
  height: 48px;
  padding-left: 18px;
}
label.generic-input .input-bar .icon-right svg {
  width: 14px;
}
label.generic-input .input-bar .seperate {
  border-left: 1px solid var(--bg-muted);
}
label.generic-input .input-bar .button {
  border: none;
  border-left: 1px solid var(--bg-muted);
  border-radius: 0;
  height: 48px;
  padding: 0 0 0 18px;
  width: -webkit-fit-content;
  width: fit-content;
}
label.generic-input .input-bar .button:focus {
  box-shadow: none;
}
label.generic-input .input-bar .button span {
  display: none;
}
label.generic-input .input-bar .button svg:hover path {
  fill: var(--primary);
}
label.generic-input .input-bar.controlbar {
  background: #0000;
  border: 1px solid #0000;
}
label.generic-input .input-bar.controlbar input {
  background: #0000;
}
label.generic-input .input-bar.disabled:hover {
  border: 1px solid var(--bg-muted) !important;
}
label.generic-input .input-bar.disabled:focus-within {
  border: 1px solid var(--bg-muted) !important;
  box-shadow: none !important;
}
label.generic-input .fit-right {
  display: block;
  padding-right: 0;
}
label.generic-input.error .input-labels p {
  color: var(--alert);
}
label.generic-input.error .input-bar {
  border: 1px solid var(--alert);
}
label.generic-input.error .input-bar svg path {
  fill: var(--alert);
}
label.generic-input.error .input-bar input {
  border: none;
  color: var(--alert);
  outline: none;
}
label.generic-input.error .input-bar input::placeholder {
  color: var(--alert);
}
label.generic-input.error .input-bar input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}
.buttonize div.input-labels {
  display: none;
}
.buttonize .input-bar {
  width: -webkit-fit-content;
  width: fit-content;
}
.buttonize .input-bar:focus {
  box-shadow: 0 0 0 4px hsla(var(--bg-muted-hsl), 0.5);
}
.buttonize .input-bar:focus-within {
  border: 1px solid var(--text-light) !important;
  box-shadow: 0 0 0 4px hsla(var(--bg-muted-hsl), 0.5) !important;
}
.buttonize .input-bar .input-box input {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 5px 5px 5px 11px;
}
.buttonize .input-bar div.icon-left svg {
  vertical-align: middle;
}
.buttonize .input-bar div.icon-right {
  height: 0;
  padding-left: 12px;
}
fieldset {
  border: none;
}
label.generic-textarea .input-labels {
  display: flex;
  justify-content: space-between;
}
label.generic-textarea .input-labels p {
  color: var(--text-light);
  font-size: 12px;
  line-height: 36px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
label.generic-textarea .input-labels p i {
  text-transform: none;
}
label.generic-textarea .input-bar {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--bg-muted);
  border-radius: 4px;
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  padding: 0 18px 0 26px;
}
label.generic-textarea textarea {
  color: var(--text-muted);
  font-family: Inter;
  font-size: 15px;
  padding-left: 14px;
  resize: vertical;
  width: 100%;
}
label.generic-textarea textarea::placeholder {
  color: var(--text-light);
}
label.generic-textarea.error .input-labels p {
  color: var(--alert);
}
label.generic-textarea.error textarea {
  border: 1px solid var(--alert);
  color: var(--alert);
}
label.generic-textarea.error textarea::placeholder {
  color: var(--alert);
}
#landing-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  padding-bottom: 0;
  padding-left: initial;
  padding-right: initial;
  padding-top: 0;
}
#landing-layout header {
  padding: 103px 0 72px;
}
#landing-layout header h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
}
#landing-layout header h1 span.version {
  color: var(--text-light);
  font-size: 14px;
  font-weight: 400;
}
#landing-layout header p {
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
}
#landing-layout footer {
  padding-top: 72px;
}
.termsofuse {
  margin-top: 48px;
  width: 312px;
}
.termsofuse .terms-text {
  margin-bottom: 24px;
}
.termsofuse .terms-text p {
  font-size: 13px;
  margin: 0;
}
.termsofuse .terms-text p a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}
.termsofuse .terms-checkbox {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  line-height: 24px;
}
.termsofuse .terms-checkbox input {
  border: 2px solid var(--text-light);
  height: 14px;
  margin: 0 15px 0 0;
  width: 14px;
}
.termsofuse .terms-checkbox b {
  font-size: 13px;
  font-weight: 600;
}
.card {
  background: var(--bg-white);
  border-radius: 4px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  width: 100%;
}
.card .title {
  align-items: center;
  display: flex;
  flex: 1 1 100%;
  justify-content: space-between;
  padding: 24px;
}
.card .title .description h1 {
  font-size: 15px;
  margin: 0 0 8px;
}
.card .title .description h1:first-letter {
  text-transform: capitalize;
}
.card .title .description p {
  font-size: 15px;
  margin: 0;
}
.card .title .image {
  margin-left: 12px;
}
.card .title .percentage {
  color: var(--text-light);
  font-size: 26px;
}
.card .title .percentage span {
  font-size: 46px;
}
.card .footer {
  background-color: var(--card-muted);
  border-radius: 0 0 4px 4px;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: inset 0 2px 1px #00000012;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}
.card .footer .text {
  padding: 12px 24px;
}
.videocard-header {
  margin: 0 18px;
  width: 100%;
}
.videocard-header,
.videocard-tools {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.videocard-tools {
  margin: 0;
  position: absolute;
  width: 90%;
}
.videocard-tools .duration {
  display: none;
}
.videocard-tools .left-tools {
  align-items: center;
  display: flex;
  flex-direction: row;
  z-index: 1;
}
.videocard-tools .left-tools p {
  color: var(--text);
  font-size: 14px;
  margin-left: 10px;
}
.videocard-tools .right-tools {
  z-index: 1;
}
.videocard-tools .right-tools .switcher button {
  cursor: pointer;
}
.videocard-tools .right-tools .switcher button:first-of-type {
  background-color: #fff;
  border: none;
  border-radius: 18px 0 0 18px;
  margin-right: 2px;
  padding: 4px 8px 4px 12px;
}
.videocard-tools .right-tools .switcher button:last-of-type {
  background-color: #fff;
  border: none;
  border-radius: 0 18px 18px 0;
  margin-right: 2px;
  padding: 4px 12px 4px 8px;
}
.videocard-tools .right-tools .switcher button:focus,
.videocard-tools .right-tools .switcher button:hover {
  background-color: hsla(var(--bg-hsl), 0.8);
  color: var(--text-muted);
}
.videocard-video {
  height: auto;
  width: 66vw;
  width: 100%;
  z-index: 0;
}
.videocard-wall .block-generic {
  width: auto;
}
.videocard-wall .block-header {
  display: none;
}
.videocard-wall .block-body {
  flex-direction: column-reverse;
  margin: 0;
  padding: 0;
  position: relative;
}
.videocard-wall .block-body .videocard-tools {
  margin-top: -53px;
  position: relative;
}
.videocard-wall .block-body .videocard-tools .right-tools .duration,
.videocard-wall .block-body .videocard-tools .right-tools .switcher {
  display: none;
}
.videocard-wall .block-body .videocard-tools .right-tools .project-status p {
  color: var(--card);
  font-size: 14px;
  font-weight: 400;
}
.videocard-wall
  .block-body
  .videocard-tools
  .right-tools
  .project-status
  p
  span {
  color: var(--text-muted);
}
.videocard-wall .block-body .videocard-tools .left-tools .cam-name {
  color: var(--card);
  font-size: 14px;
  font-weight: 700;
}
.videocard-wall .block-footer {
  display: none;
}
.videocard-embedded .block-generic {
  width: auto;
}
.videocard-embedded .block-header {
  min-height: none;
  padding: 0;
}
.videocard-embedded .block-body {
  margin: 0;
  padding: 0;
  position: relative;
}
.videocard-embedded .block-body .videocard-tools {
  margin: 12px 0;
}
.videocard-embedded .block-body .videocard-tools .left-tools .cam-name,
.videocard-embedded .block-body .videocard-tools .right-tools .project-status,
.videocard-embedded .block-footer {
  display: none;
}
.videocard-media .block-generic {
  width: auto;
}
.videocard-media .block-header {
  display: none;
}
.videocard-media .block-body {
  flex-direction: column-reverse;
  justify-content: flex-end;
  position: relative;
}
.videocard-media .block-body .videocard-tools {
  margin: 6px 6px -25px;
  position: relative;
  top: -38px;
}
.videocard-media .block-body .videocard-tools .duration {
  background-color: var(--text);
  border-radius: 2px;
  color: var(--card);
  display: block;
  font-size: 12px;
  padding: 3px 5px;
  z-index: 1;
}
.videocard-media .block-body .videocard-tools .left-tools,
.videocard-media .block-body .videocard-tools .right-tools {
  display: none;
}
.videocard-media .block-footer {
  display: inherit;
  margin: 0;
  padding: 0 12px;
}
.videocard-media .block-footer .month {
  color: var(--text-muted);
}
.videocard-media .block-footer .hours {
  color: var(--primary);
}
.table-container table {
  border-spacing: 0 12px;
  text-align: justify;
  width: 100%;
}
.table-container table thead.table-header th {
  font-weight: 400;
}
.table-container table thead.table-header .table-row th:first-of-type {
  padding-left: 24px;
}
.table-container table thead.table-header .table-row th:last-of-type {
  float: right;
  padding-right: 24px;
}
.table-container table thead.table-header .table-row th .table-cell p {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.table-container table tbody.table-body {
  background-color: var(--card-muted);
}
.table-container table tbody.table-body .table-row {
  border: 5px solid var(--card-muted);
}
.table-container table tbody.table-body .table-row td:first-of-type {
  border-bottom-left-radius: 4px;
  border-bottom-left-radius: var(--radius);
  border-top-left-radius: 4px;
  border-top-left-radius: var(--radius);
  padding-left: 24px;
  padding-right: 36px;
}
.table-container table tbody.table-body .table-row td:nth-child(2) {
  padding-right: 36px;
}
.table-container table tbody.table-body .table-row td:last-of-type {
  border-bottom-right-radius: 4px;
  border-bottom-right-radius: var(--radius);
  border-top-right-radius: 4px;
  border-top-right-radius: var(--radius);
  padding-right: 24px;
}
.table-container table tbody.table-body .table-row td:last-of-type .table-cell {
  justify-content: flex-end;
  width: auto;
}
.table-container table tbody.table-body .table-row td .table-cell {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: -webkit-max-content;
  width: max-content;
}
.table-container
  table
  tbody.table-body
  .table-row
  td
  .table-cell
  .bundle-fields {
  align-items: center;
  display: flex;
}
.table-container
  table
  tbody.table-body
  .table-row
  td
  .table-cell
  .bundle-fields
  b,
.table-container
  table
  tbody.table-body
  .table-row
  td
  .table-cell
  .bundle-fields
  p,
.table-container
  table
  tbody.table-body
  .table-row
  td
  .table-cell
  .bundle-fields
  span {
  font-size: 13px;
  margin: 12px 6px;
}
.table-container
  table
  tbody.table-body
  .table-row
  td
  .table-cell
  .pinned-badge
  span {
  font-size: 8px;
  font-weight: 600;
}
.table-container
  table
  tbody.table-body
  .table-row
  td
  .table-cell
  button:last-of-type {
  margin-left: 12px;
}
.table-container
  table
  tbody.table-body
  .table-row
  td
  .table-cell
  .enterprise-version,
.table-container
  table
  tbody.table-body
  .table-row
  td
  .table-cell
  .enterprise-version
  svg {
  color: var(--alert);
}
.table-container table tbody.table-body .table-row.details {
  background: #f3f3f3;
  display: table-row;
  position: relative;
  top: -14px;
}
.table-container table tbody.table-body .table-row.details td {
  border-radius: 0;
  border-bottom-left-radius: 4px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: 4px;
  border-bottom-right-radius: var(--radius);
}
.alert {
  cursor: pointer;
}
.alert .icon {
  color: var(--text-muted);
  margin: 6px;
}
.alert .icon:hover {
  color: var(--primary);
}
.alert .ellipse-container {
  float: right;
  margin: -4px 0 0 -12px;
  position: relative;
}
.with-platter .icon {
  background-color: var(--card);
  border-radius: 50%;
  margin: 0;
  padding: 9px;
}
.setup-box {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 36px 48px;
}
.setup-box .info {
  margin: 29px 0;
  text-align: center;
}
.dashed {
  border: 2px dashed hsla(var(--text-light-hsl));
  border-radius: 4px;
  border-radius: var(--radius);
  padding: 108px 240px;
  width: -webkit-fit-content;
  width: fit-content;
}
.dashed,
.dashed .info {
  margin: 0;
}
.dashed button {
  margin-top: 8px;
}
.dropdown-container {
  position: relative;
}
.dropdown-container.absolute {
  position: absolute;
  z-index: 99999;
}
.dropdown-container .input {
  cursor: pointer;
}
.dropdown-container .tooltip-custom {
  font-size: 12px !important;
  line-height: 30px !important;
  padding: 0 10px !important;
}
.dropdown-container .dropdown {
  background: var(--card);
  border-radius: 4px;
  border-radius: var(--radius);
  position: absolute;
  top: 100px;
  width: -webkit-fit-content;
  width: fit-content;
  z-index: 999;
}
.dropdown-container .dropdown #arrow-up {
  content: "";
  height: 9px;
  position: absolute;
  top: -15px;
  width: 18px;
}
.dropdown-container .dropdown #arrow-up svg {
  color: #fff;
}
.dropdown-container .dropdown ul {
  border-radius: 4px;
  border-radius: var(--radius);
  list-style: none;
  margin: 0;
  padding: 0;
}
.dropdown-container .dropdown ul li {
  padding: 0 24px;
}
.dropdown-container .dropdown ul li:focus-within,
.dropdown-container .dropdown ul li:hover {
  background: hsla(var(--primary-hsl), 0.1);
}
.dropdown-container .dropdown ul li:first-of-type .drop-item {
  padding-top: 10px;
}
.dropdown-container .dropdown ul li .drop-item {
  align-items: normal;
  display: flex;
  height: 20px;
  justify-content: space-between;
  min-width: 250px;
  padding: 8px 0;
}
.dropdown-container .dropdown ul li .drop-item .title {
  align-content: center;
  align-items: center;
  display: flex;
  flex: 0.75 1;
  font-size: 15px;
  justify-content: flex-start;
  text-transform: none;
}
.dropdown-container .dropdown ul li .drop-item .title .icon {
  margin-right: 8px;
}
.dropdown-container .dropdown ul li .drop-item input[type="checkbox"],
.dropdown-container .dropdown ul li .drop-item input[type="radio"] {
  align-self: center;
  display: flex;
  margin: 0;
  padding: 0 0 0 12px;
  width: 15px;
}
.dropdown-container .dropdown ul .search-input {
  border-bottom: 1px solid var(--bg-muted);
}
.dropdown-container .dropdown ul .search-input:focus-within,
.dropdown-container .dropdown ul .search-input:hover {
  background: none;
}
.dropdown-container .dropdown ul .search-input label .input-labels {
  display: none;
}
.dropdown-container .dropdown ul .search-input label .input-bar {
  border: none;
  margin: 0;
  padding: 0;
}
.dropdown-container .dropdown ul .search-input label .input-bar:focus-within {
  box-shadow: none;
}
.dropdown-container
  .dropdown
  ul
  .search-input
  label
  .input-bar
  .input-box
  input[type="checkbox"],
.dropdown-container
  .dropdown
  ul
  .search-input
  label
  .input-bar
  .input-box
  input[type="radio"] {
  padding: 12px 0 12px 12px;
  width: 100%;
}
.dropdown-container .dropdown ul .search-input label .input-bar .expand {
  display: none;
}
.dropdown-container .left #arrow-up {
  left: 20px;
}
.dropdown-container .right {
  right: 0;
}
.dropdown-container .right #arrow-up {
  right: 20px;
}
.pinned-badge {
  align-content: center;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}
.pinned-badge span {
  color: var(--text);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}
@media only screen and (min-width: 1216px) {
  .control-bar {
    display: flex;
    margin-bottom: 36px;
    padding: 0 24px;
    padding: 0 var(--main-content-gutter);
  }
}
.control-bar .filtering,
.control-bar .sorting {
  flex-direction: column;
}
@media only screen and (min-width: 500px) {
  .control-bar .filtering,
  .control-bar .sorting {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .control-bar .filtering > * {
    flex: 1 1 50%;
    max-width: calc(50% - 1px);
  }
}
@media only screen and (min-width: 1000px) {
  .control-bar .filtering > * {
    flex: 1 1 33.3%;
    max-width: calc(33.3% - 1px);
  }
}
@media only screen and (min-width: 1150px) {
  .control-bar .filtering > * {
    flex: 1 1 25%;
    max-width: calc(25% - 1px);
  }
}
@media only screen and (min-width: 1216px) {
  .control-bar .filtering > * {
    border: 0;
    border-right: 1px solid var(--bg-muted);
  }
}
@media only screen and (min-width: 1400px) {
  .control-bar .filtering > * {
    flex: 0 1 200px;
    max-width: 200px;
  }
}
@media only screen and (min-width: 1216px) {
  .control-bar .sorting > * {
    border: 0;
    border-left: 1px solid var(--bg-muted);
  }
}
.control-bar .tab {
  align-items: center;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 500;
  line-height: 36px;
  padding: 12px 24px;
}
.control-bar .tab:hover {
  background: hsla(var(--card-hsl), 0.5);
  color: var(--text-muted);
}
.control-bar .tab:hover span {
  color: var(--text);
}
.control-bar .tab.active {
  background: hsla(var(--hub-hsl), 0.1);
  box-shadow: 3px 0 var(--hub) inset;
  color: var(--hub);
}
@media only screen and (min-width: 1216px) {
  .control-bar .tab.active {
    box-shadow: 0 3px var(--hub) inset;
  }
}
.control-bar .tab.active span {
  color: var(--text);
}
.control-bar .tab span {
  color: var(--text-muted);
  margin-left: 12px;
}
.video-wall-header {
  background: #262424;
  box-sizing: border-box;
  height: 48px;
  justify-content: space-between;
  left: 0;
  padding: 0 0 0 20px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 454545;
}
.video-wall-header,
.video-wall-header .brand-logo {
  align-items: center;
  display: flex;
}
.video-wall-header .brand-logo img {
  margin: 0 10px 0 0;
}
.video-wall-header .brand-logo h4 {
  color: var(--card);
}
.video-wall-header .grid-list {
  align-items: center;
  display: flex;
}
.video-wall-header .grid-list .item {
  color: var(--text-light);
  font-size: 16px;
}
.video-wall-header .grid-list .numbers {
  display: flex;
  margin: 6px;
}
.video-container {
  grid-column-gap: 0;
  grid-row-gap: 0;
  column-gap: 0;
  display: grid;
  grid-template-columns: auto auto;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  row-gap: 0;
  top: 48px;
  width: 100%;
  z-index: 454;
}
.video-container-embedded {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  column-gap: 24px;
  display: grid;
  position: relative;
  row-gap: 24px;
  top: 0;
}
.video-container-embedded .vw-header {
  display: none;
}
.video-container-embedded .videocard-embedded .block-body .videocard-tools {
  margin-bottom: -38px;
  position: relative;
}
.hide {
  display: none;
}
.cols-2 {
  grid-template-columns: auto auto;
}
.cols-3 {
  grid-template-columns: auto auto auto;
}
.cols-4 {
  grid-template-columns: auto auto auto auto;
}
.toggle {
  display: flex;
  height: 18px;
  margin: 0;
  position: relative;
  width: 32px;
}
.toggle input {
  display: none;
}
.slider {
  background-color: var(--text-light);
  bottom: 0;
  cursor: pointer;
  left: 0;
  right: 0;
  top: 0;
}
.slider,
.slider:before {
  position: absolute;
  transition: 0.4s;
}
.slider:before {
  background-color: var(--card);
  bottom: 3px;
  content: "";
  height: 12px;
  left: 4px;
  width: 12px;
}
input:checked + .slider {
  background: var(--success);
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
  background: var(--card);
  transform: translateX(12px);
}
.slider.round {
  border-radius: 18px;
}
.slider.round:before {
  border-radius: 50%;
}
.disabled input:checked + .slider {
  background: #ccc;
}
.disabled input:checked + .slider:before {
  background: #a2a2a2;
}
.tab {
  align-items: center;
  border-right: none !important;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 500;
  line-height: 36px;
  padding: 12px 24px;
}
.tab:hover {
  background: hsla(var(--card-hsl), 0.5);
  color: var(--text-muted);
}
.tab:hover span {
  color: var(--text);
}
.tab.active {
  background: hsla(var(--hub-hsl), 0.1);
  box-shadow: 3px 0 var(--hub) inset;
  color: var(--hub);
}
@media only screen and (min-width: 1216px) {
  .tab.active {
    box-shadow: 0 3px var(--hub) inset;
  }
}
.tab.active span {
  color: var(--text);
}
.tab span {
  color: var(--text-muted);
  margin-left: 12px;
}
.message {
  align-content: flex-start;
  border-radius: 4px;
  flex-direction: row;
  justify-content: space-between;
  padding: 12px 24px;
}
.message,
.message div {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
}
.message div .description {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  margin-left: 12px;
}
.message.alert {
  background: hsla(var(--alert-hsl), 0.1);
}
.message.alert div .description {
  color: var(--alert);
}
.message.alert svg path {
  fill: var(--alert);
}
.message.success {
  background: hsla(var(--success-hsl), 0.1);
}
.message.success div .description {
  color: var(--success);
}
.message.success svg path {
  fill: var(--success);
}
.message.info {
  background: hsla(var(--info-hsl), 0.1);
}
.message.info div .description {
  color: var(--info);
}
.message.info svg path {
  fill: var(--info);
}
.message.loading {
  background: #e6e6e6;
}
.message.loading div .description {
  color: var(--color-gray);
}
.message.loading svg path {
  fill: var(--color-gray);
}
.message .lds-ripple {
  display: inline-block;
  height: 20px;
  position: relative;
  width: 20px;
}
.message .lds-ripple div {
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  border: 1px solid #aaa;
  border-radius: 50%;
  opacity: 1;
  position: absolute;
}
.message .lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    height: 0;
    left: 9px;
    opacity: 1;
    top: 9px;
    width: 0;
  }
  to {
    height: 18px;
    left: 0;
    opacity: 0;
    top: 0;
    width: 18px;
  }
}
div.info-bar {
  display: flex;
}
div.info-bar .avatar {
  align-content: center;
  justify-content: flex-start;
  padding: 48px 48px 48px 0;
}
div.info-bar .description {
  align-content: center;
  display: flex;
  flex-direction: column;
  font-family: Inter;
  justify-content: center;
}
div.info-bar .description h1 {
  font-size: 24px;
}
.grid-container {
  --gapV: 12px;
}
.card .title,
.modal-header,
.video-wall-header {
  box-shadow: 0 1px 1px #00000012;
}
.modal-footer {
  box-shadow: 0 -1px 1px #00000012;
}
.table-container table tbody.table-body .table-row {
  box-shadow: 0 4px 4px #00000008;
}
.card,
.control-bar,
.with-platter .icon {
  box-shadow: 0 4px 34px #0000000a, 0 3px 4px #0000001a;
}
.dropdown-container .dropdown,
.modal,
ngxgeo-autocomplete .custom-autocomplete__dropdown {
  box-shadow: 0 4px 34px #0000003d, 0 3px 4px #0003;
}
footer {
  box-shadow: inset 0 20px 12px -20px #00000012;
}
.button,
.button .icon,
.button .text,
.control-bar .tab,
.picker-with-search ul.items label,
.tab,
input,
label,
ngxgeo-autocomplete .custom-autocomplete__dropdown a,
select,
textarea {
  transition: all 0.1s;
}
label.generic-input .input-bar.form:focus-within {
  box-shadow: 0 0 0 3px hsla(var(--primary-hsl), 0.2);
}
.buttonize .input-bar:focus,
label.generic-input .input-bar.form:hover {
  border: 1px solid var(--text-light);
}
label.generic-input .input-bar.form:focus-within {
  border: 1px solid var(--primary);
}
html {
  box-sizing: border-box;
}
@supports (font-variation-settings: normal) {
  body {
    font-family: Inter var, sans-serif;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text);
  font-weight: 600;
}
p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 24px;
}
b,
strong {
  font-weight: 500;
}
a {
  text-decoration: none;
}
hr {
  border: none;
  border-top: 1px solid var(--bg-muted);
  margin: 24px 0;
}
.--padded hr {
  margin: 24px -24px;
}
hr.--thick {
  border-width: 3px;
}
.block .block-header .icon {
  opacity: 0.4;
}
.block .block-header h1 {
  font-size: 16px;
  line-height: 36px;
  margin: 0 0 0 12px;
}
.block .body .--padded {
  display: block;
  padding: 24px;
}
label {
  color: var(--text-light);
  cursor: pointer;
  font-size: 12px;
  line-height: 36px;
  text-transform: uppercase;
}
label:hover {
  color: var(--text-muted);
}
label:focus-within {
  color: var(--primary);
  font-weight: 560;
}
label.toggle-button {
  display: flex;
  line-height: 24px;
  margin: 12px 0;
  text-transform: none;
}
label.toggle-button:focus-within {
  font-weight: inherit;
}
label.toggle-button SliderField {
  flex: auto;
  margin: 4px 18px 0 0;
}
label.toggle-button .text {
  color: var(--text-muted);
  flex: 1 1 100%;
}
label.toggle-button .text strong {
  color: var(--text);
  display: block;
  font-size: 15px;
}
label.toggle-button .text small {
  font-size: 13px;
}
input,
select,
textarea {
  background: var(--card);
  border: 1px solid var(--bg-muted);
  border-radius: 4px;
  border-radius: var(--radius);
  box-sizing: border-box;
  color: var(--text);
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 12px;
  outline: none;
  padding: 12px 24px;
  width: 100%;
}
input[type="checkbox"],
select[type="checkbox"],
textarea[type="checkbox"] {
  width: auto;
}
input:not(.button)[disabled],
select:not(.button)[disabled],
textarea:not(.button)[disabled] {
  color: #d1d1d1 !important;
}
.table-header {
  color: var(--text-light);
  font-size: 12px;
  line-height: 24px;
  text-transform: uppercase;
}
.howto-link:focus,
.howto-link:hover {
  text-decoration: underline;
}
.howto-link:after {
  content: " ->";
}
.grid-container {
  --columns: 1;
  --gapH: 12px;
  --gapV: 0;
  grid-column-gap: var(--gapH);
  grid-row-gap: var(--gapV);
  column-gap: var(--gapH);
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  row-gap: var(--gapV);
}
@media only screen and (min-width: 769px) {
  .grid-container {
    --gapH: 24px;
  }
}
.grid-container.--two-columns {
  --gapH: 24px;
}
@media only screen and (min-width: 1216px) {
  .grid-container.--two-columns {
    --columns: 2;
  }
}
@media only screen and (min-width: 769px) {
  .grid-container.--four-columns {
    --columns: 2;
    --gapV: 24px;
  }
}
@media only screen and (min-width: 1216px) {
  .grid-container.--four-columns {
    --columns: 4;
  }
}
@media only screen and (min-width: 769px) {
  .grid-container.--eight-columns {
    --columns: 8;
    --gapV: 24px;
  }
}
@media only screen and (min-width: 1216px) {
  .grid-container.--eight-columns {
    --columns: 8;
  }
}
.control-bar {
  background-color: var(--card-muted);
  margin: 0 -24px 24px;
  margin: 0 calc(var(--main-content-gutter) * -1) 24px;
  padding: 0;
}
@media only screen and (min-width: 1216px) {
  .control-bar {
    display: flex;
    padding: 0 24px;
    padding: 0 var(--main-content-gutter);
  }
}
.control-bar .filtering,
.control-bar .sorting {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.control-bar .filtering > *,
.control-bar .sorting > * {
  border-bottom: 1px solid var(--bg-muted);
}
@media only screen and (min-width: 500px) {
  .control-bar .filtering > *,
  .control-bar .sorting > * {
    flex: 1 1 50%;
  }
}
@media only screen and (min-width: 1000px) {
  .control-bar .filtering > *,
  .control-bar .sorting > * {
    flex: 1 1 33.3%;
  }
}
@media only screen and (min-width: 1150px) {
  .control-bar .filtering > *,
  .control-bar .sorting > * {
    flex: 1 1 25%;
  }
}
@media only screen and (min-width: 1216px) {
  .control-bar .filtering > *,
  .control-bar .sorting > * {
    border: 0;
  }
}
@media only screen and (min-width: 1400px) {
  .control-bar .filtering > *,
  .control-bar .sorting > * {
    flex: 0 1 200px;
  }
}
@media only screen and (min-width: 1216px) {
  .control-bar .filtering {
    align-self: flex-start;
    flex: 1 1;
  }
  .control-bar .filtering > * {
    border-right: 1px solid var(--bg-muted);
  }
}
.control-bar .filtering.row > * {
  flex: 1 1 5% !important;
}
@media only screen and (min-width: 1216px) {
  .control-bar .sorting {
    align-self: center;
    flex: 0 1;
  }
  .control-bar .sorting > * {
    border-left: 1px solid var(--bg-muted);
  }
}
.picker-with-search {
  --list-height: 320px;
  background: var(--card);
  border: 1px solid var(--bg-muted);
  border-radius: 4px;
  border-radius: var(--radius);
}
.picker-with-search .search {
  align-items: center;
  border-bottom: 1px solid var(--bg-muted);
  display: flex;
  padding: 0 0 0 24px;
}
.picker-with-search .search input {
  border: none;
  box-shadow: none;
  margin: 0;
}
.picker-with-search .search:focus-within .icon * {
  fill: var(--primary);
}
.picker-with-search ul.items {
  font-size: 13px;
  list-style: none;
  margin: 0;
  max-height: var(--list-height);
  overflow: auto;
  padding: 6px;
}
.picker-with-search ul.items label {
  align-items: center;
  border-radius: 4px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  line-height: 24px;
  margin: 2px 0;
  padding: 6px 18px;
  text-transform: none;
}
.picker-with-search ul.items label:hover {
  background: var(--card-muted);
}
.picker-with-search ul.items label.selected {
  background: hsla(var(--primary-hsl), 0.1);
}
.picker-with-search ul.items label.selected .meta,
.picker-with-search ul.items label.selected .name {
  color: var(--primary);
}
.picker-with-search ul.items label.selected:hover {
  background: hsla(var(--primary-hsl), 0.15);
}
.picker-with-search ul.items label .checkbox {
  flex: 0 1;
  margin: 0;
  padding: 0;
  width: auto;
}
.picker-with-search ul.items label .checkbox[disabled] ~ .name {
  color: var(--text-muted);
}
.picker-with-search ul.items label .checkbox[disabled] ~ .meta {
  color: var(--text-light);
}
.picker-with-search ul.items label .icon {
  margin-left: 18px;
}
.picker-with-search ul.items label .name {
  color: var(--text);
  flex: 1 1;
  font-weight: 600;
  margin: 0 24px 0 12px;
}
.picker-with-search ul.items label .meta {
  color: var(--text-muted);
  font-weight: 400;
}
section.not-found {
  border: 2px dashed var(--bg-muted);
  padding: 48px 24px;
  text-align: center;
  width: 100%;
}
section.not-found .center {
  align-items: center;
  display: flex;
  flex-direction: column;
}
section.not-found h1 {
  font-size: 18px;
  line-height: 36px;
  margin: 0;
}
section.not-found p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 24px;
  margin: 12px auto 24px;
  max-width: 33rem;
}
.mat-datepicker-content {
  translate: -54px 6px;
}
ngxgeo-autocomplete #search_places {
  background: var(--card);
  border: 1px solid var(--bg-muted);
  outline: none;
  padding: 14px 25px;
}
ngxgeo-autocomplete .custom-autocomplete__dropdown {
  background: var(--card) !important;
  border: none !important;
  border-radius: 4px;
  border-radius: var(--radius);
  font-weight: 400;
}
ngxgeo-autocomplete .custom-autocomplete__dropdown ul {
  padding: 0 7px;
}
ngxgeo-autocomplete .custom-autocomplete__dropdown .currentlocation a {
  box-sizing: border-box;
  font-size: 13px !important;
  letter-spacing: 0;
  padding: 6px 24px !important;
  text-transform: capitalize;
}
ngxgeo-autocomplete .custom-autocomplete__dropdown a {
  box-sizing: border-box;
  line-height: 24px;
  overflow: hidden;
  padding: 6px 24px !important;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
ngxgeo-autocomplete .custom-autocomplete__dropdown a:focus,
ngxgeo-autocomplete .custom-autocomplete__dropdown a:hover {
  background: var(--card-muted);
}
ngxgeo-autocomplete .custom-autocomplete__dropdown .main-text {
  font-size: 13px;
  font-weight: 500 !important;
}
ngxgeo-autocomplete .custom-autocomplete__dropdown .secondary_text {
  color: var(--text-muted);
}
ngxgeo-autocomplete .custom-autocomplete__dropdown .active {
  background-color: var(--card-muted) !important;
  color: var(--text-muted) !important;
  display: flex;
}
ngxgeo-autocomplete .custom-autocomplete__dropdown .active a {
  background: #0000 !important;
}
ngxgeo-autocomplete .custom-autocomplete__dropdown .active .secondary_text {
  color: var(--text-muted) !important;
}
ngxgeo-autocomplete .heading {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 0 0 24px !important;
}
ngxgeo-autocomplete .heading .line-recent {
  left: 170px !important;
  top: 17px !important;
  width: calc(100% - 170px) !important;
}
ngxgeo-autocomplete .heading .line-location {
  left: 116px !important;
  top: 18px !important;
  width: calc(100% - 116px) !important;
}
ngxgeo-autocomplete
  .custom-autocomplete__dropdown
  .currentlocation
  .location-icon,
ngxgeo-autocomplete .custom-autocomplete__dropdown .custom-icon {
  display: none !important;
}
.debug-responsivity .size {
  background: var(--text);
  bottom: 0;
  color: var(--bg);
  display: none;
  font-size: 0.6em;
  font-weight: 600;
  left: 0;
  padding: 0 3px;
  position: fixed;
  z-index: 100;
}
.debug-responsivity .none {
  display: inline-block;
}
@media only screen and (min-width: 769px) {
  .debug-responsivity .size {
    display: none;
  }
  .debug-responsivity .t {
    display: inline-block;
  }
}
@media only screen and (min-width: 1024px) {
  .debug-responsivity .size {
    display: none;
  }
  .debug-responsivity .d {
    display: inline-block;
  }
}
@media only screen and (min-width: 1216px) {
  .debug-responsivity .size {
    display: none;
  }
  .debug-responsivity .w {
    display: inline-block;
  }
}
@media only screen and (min-width: 1408px) {
  .debug-responsivity .size {
    display: none;
  }
  .debug-responsivity .f {
    display: inline-block;
  }
}
.show-grid {
  background-image: linear-gradient(180deg, #0ff 0, #fff0 1px);
  background-repeat: repeat-y;
  background-size: 100% 12px;
}
.bg {
  align-items: center;
  background: #00000040;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999999;
}
.bg,
.modal {
  display: flex;
  overflow: hidden;
}
.modal {
  background: var(--bg-white);
  border-radius: 4px;
  border-radius: var(--radius);
  flex-direction: column;
  margin: 12px 12px 60px;
  max-height: calc(100vh - 72px);
  max-width: 900px;
}
@media only screen and (min-width: 769px) {
  .modal {
    margin: 24px;
    max-height: calc(100vh - 48px);
    min-width: 500px;
  }
}
.modal form {
  display: contents;
}
.modal .header {
  flex: auto;
}
.modal .body {
  background: var(--card-muted);
  flex: 0 1 100%;
  overflow: auto;
}
.modal .actions {
  flex: 0 0 60px;
}
.modal-header {
  align-items: center;
  background: var(--bg-white);
  color: var(--text);
  display: flex;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  padding: 12px 18px 12px 24px;
  position: relative;
}
@media only screen and (min-width: 769px) {
  .modal-header {
    font-size: 22px;
    line-height: 30px;
    padding: 18px 18px 18px 36px;
  }
}
.modal-header .title {
  flex: 1 1;
  padding-right: 24px;
}
.modal-header .title span {
  color: var(--text-light);
  font-size: 0.85em;
  font-weight: 400;
  margin-left: 6px;
}
.modal-header .close {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex: 0 1;
  padding: 12px;
}
.modal-header .close:focus,
.modal-header .close:hover {
  background: var(--card-muted);
  border-radius: 50%;
}
.modal-body {
  background: var(--card-muted);
  overflow-y: auto;
  padding: 24px 24px 12px;
}
@media only screen and (min-width: 769px) {
  .modal-body {
    padding: 24px 36px;
  }
}
.modal-body .block {
  margin-bottom: 24px;
}
.modal-body .block .title:not(:first-child) {
  margin-top: 24px;
}
.modal-body .title {
  align-items: center;
  display: flex;
}
.modal-body .title .icon {
  padding: 0 12px 0 0;
}
.modal-body .title .icon path {
  fill: var(--text-light);
}
.modal-body .title h1 {
  font-size: 17px;
}
.modal-footer {
  color: var(--text);
  display: flex;
  font-size: 22px;
  font-weight: 600;
  justify-content: space-between;
  padding: 12px;
  position: relative;
}
.modal-footer .left,
.modal-footer .right {
  display: flex;
  flex: auto;
}
.modal-footer .right {
  justify-content: flex-end;
}
.modal-footer .right Button {
  margin-left: 12px;
}
.grid-container {
  row-gap: 24px;
}
.main {
  padding-top: 84px;
}
@media (min-width: 800px) {
  .main {
    padding-top: 0;
  }
}
.MuiPopover-root {
  z-index: 99999999 !important;
}
.cloud-not-installed,
.offline-mode {
  align-items: center;
  background: var(--upper-gradient);
  color: #fff;
  display: flex;
  margin: -6px 0 0;
  width: 100%;
}
.cloud-not-installed > div,
.offline-mode > div {
  align-items: center;
  display: flex;
  padding: 18px 48px;
}
.cloud-not-installed svg,
.offline-mode svg {
  padding-right: 12px;
}
.cloud-not-installed {
  background: linear-gradient(90deg, #0a1f44, #1e40af 58.33%, #60a5fa);
}
:root {
  --hub: #4a6fa5;
  --hub-hsl: 215, 38%, 47%;
  --hub-darker: #2d4a75;
  --hub-darker-hsl: 215, 44%, 32%;
  --oss: #2e5fa3;
  --oss-hsl: 215, 56%, 41%;
  --oss-darker: #1d3d6e;
  --oss-darker-hsl: 215, 57%, 27%;
  --enterprise: #3a6b8a;
  --enterprise-hsl: 200, 42%, 39%;
  --enterprise-darker: #254d65;
  --enterprise-darker-hsl: 200, 44%, 27%;
  --vault: #3f5c8f;
  --vault-hsl: 220, 38%, 40%;
  --vault-darker: #283d65;
  --vault-darker-hsl: 220, 41%, 28%;
  --primary: #2e5fa3;
  --primary-hsl: 215, 56%, 41%;
  --primary-darker: #1d3d6e;
  --primary-darker-hsl: 215, 57%, 27%;
  --secondary: #3f5c8f;
  --secondary-hsl: 220, 38%, 40%;
  --secondary-darker: #283d65;
  --secondary-darker-hsl: 215, 57%, 27%;
  --text: #232830;
  --text-hsl: 215, 14%, 16%;
  --text-muted: #5a6373;
  --text-muted-hsl: 215, 12%, 40%;
  --text-light: #8fa0b5;
  --text-light-hsl: 210, 18%, 63%;
  --card: #fff;
  --card-hsl: 0, 0%, 100%;
  --card-muted: #f7f9fb;
  --card-muted-hsl: 210, 33%, 98%;
  --info: #1b82d2;
  --info-hsl: 207, 76%, 46%;
  --info-darker: #1260a0;
  --info-darker-hsl: 207, 78%, 35%;
  --success: #5fab6d;
  --success-hsl: 131, 31%, 52%;
  --success-darker: #41864c;
  --success-darker-hsl: 130, 35%, 39%;
  --warning: #dfb211;
  --warning-hsl: 47, 86%, 47%;
  --alert: #2e5fa3;
  --alert-darker: #1d3d6e;
  --alert-darker-hsl: 215, 57%, 27%;
  --alert-hsl: 215, 56%, 41%;
  --bg: #e8ecf2;
  --bg-hsl: 215, 22%, 92%;
  --bg-muted: #dde3ec;
  --bg-muted-hsl: 215, 20%, 89%;
  --bg-white: #fff;
  --bg-white-hsl: 0, 0%, 100%;
 --upper-gradient: linear-gradient(
  90deg,
  #0066ff 0%,
  #4d94ff 58.33%,
  #ffffff 100%
);

--upper-gradient-mobile: linear-gradient(
  90deg,
  #0066ff 0%,
  #ffffff 100%
);
  --color-pink: #df118c;
  --color-purple: #ab11df;
  --color-purple-dark: #4f11df;
  --color-blue-dark: #113ddf;
  --color-blue: #1159df;
  --color-blue-light: #11afdf;
  --color-blue-green: #11dfc3;
  --color-green: #11df78;
  --color-green-yellow: #55df11;
  --color-yellow: #d1df11;
  --color-orange: #df8c11;
  --color-red: #df2c11;
  --color-white: #fff;
  --color-gray-light: #bfbfbf;
  --color-gray: grey;
  --color-gray-dark: #404040;
  --color-black: #000;
}
@font-face {
  font-display: swap;
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  src: url(/static/media/Inter-Regular.6cc68d6b835a3dd06e7e.woff2)
      format("woff2"),
    url(/static/media/Inter-Regular.8398b3762d7b06fc3b8c.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  src: url(/static/media/Inter-Medium.ba68c34a21c5751a2838.woff2)
      format("woff2"),
    url(/static/media/Inter-Medium.f5549f68ca7db479bc7d.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  src: url(/static/media/Inter-SemiBold.625474d6ebbfe4e3b0ae.woff2)
      format("woff2"),
    url(/static/media/Inter-SemiBold.25b1ffc9587070462342.woff) format("woff");
}
@font-face {
  font-named-instance: "Regular";
  font-display: swap;
  font-family: Inter var;
  font-style: normal;
  font-weight: 100 900;
  src: url(/static/media/Inter-roman.var.b65534c5223684261945.woff2)
    format("woff2");
}
body {
  background: #e8ecf2;
  background: var(--bg);
  box-sizing: border-box;
  font-family: Inter, sans-serif;
  margin: 0;
  padding: 0;
}
.environment.develop {
  padding: size(1) 0;
}
.environment.demo,
.environment.develop {
  background: repeating-linear-gradient(
    -55deg,
    #222,
    #222 10px,
    #0e2d6d 0,
    #357af1 20px
  );
  color: #ffffffbf;
  text-align: center;
}
.environment.demo {
  padding: 12px 0;
}
.environment.staging {
  background: repeating-linear-gradient(
    -55deg,
    #222,
    #222 10px,
    #0e2d6d 0,
    #0e2d6d 20px
  );
  color: #fff;
  padding: 12px 0;
  text-align: center;
}
.environment.acceptance {
  background: repeating-linear-gradient(
    -55deg,
    #222,
    #222 10px,
    #035282 0,
    #035282 20px
  );
  color: #fff;
  padding: 12px 0;
  text-align: center;
}
.login-body {
  display: flex;
  justify-content: center;
  padding: 0 0 120px;
}
.login-body .block-generic .block-header {
  padding: 5px 24px;
}
.login-body .block-generic .block-header div {
  align-items: center;
  display: flex;
  height: 36px;
}
.login-body .block-generic .block-header div h4 {
  margin: 0 0 0 12px;
  padding: 0;
}
.login-body .block-generic .block-body {
  padding: 24px 60px 36px;
}
.login-body .block-generic .block-body .generic-input {
  cursor: auto;
  width: 312px;
}
.login-body .block-generic .block-body .generic-input:first-child {
  margin: 0 0 12px;
}
.login-body .block-generic .block-footer {
  min-height: 0;
  padding: 12px 24px;
}
:root {
  --radius: 4px;
  --main-content-gutter: 24px;
}
@media only screen and (min-width: 769px) {
  :root {
    --main-content-gutter: 36px;
  }
}
@media only screen and (min-width: 1216px) {
  :root {
    --main-content-gutter: 48px;
  }
}
#dashboard hr {
  margin-top: 50px;
}
#dashboard .dashed {
  padding: 20%;
}
#dashboard .pointer {
  cursor: pointer;
}
#dashboard video {
  width: 100%;
}
#dashboard p.event-description {
  display: none;
}
@media (min-width: 800px) {
  #dashboard p.event-description {
    display: block;
  }
}
#dashboard a {
  display: flex;
}
#dashboard a,
#dashboard a:active,
#dashboard a:hover {
  color: var(--text);
}
#dashboard .time {
  align-items: center;
  display: flex;
}
#dashboard .time .ellipse-container {
  margin-right: 8px;
}
#media #loader {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
#media .bg {
  z-index: 9999;
}
#media .videocard-embedded video {
  cursor: pointer;
  opacity: 0.8;
}
#media .videocard-embedded video:hover {
  opacity: 1;
}
#media video {
  width: 100%;
}
#media .lds-ripple div {
  animation: lds-ripple2 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  border: 4px solid #fff;
  border-radius: 50%;
  opacity: 1;
  position: absolute;
}
#media .lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple2 {
  0% {
    height: 0;
    left: 36px;
    opacity: 0;
    top: 36px;
    width: 0;
  }
  4.9% {
    height: 0;
    left: 36px;
    opacity: 0;
    top: 36px;
    width: 0;
  }
  5% {
    height: 0;
    left: 36px;
    opacity: 1;
    top: 36px;
    width: 0;
  }
  to {
    height: 72px;
    left: 0;
    opacity: 0;
    top: 0;
    width: 72px;
  }
}
.CanvasToolsEditor {
  --cursor-pointer: -webkit-image-set(
      url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3YMW6EMBAF0NkTmNOkTkVtCjdUcIFcAY4CNQ1HSNqkSx8JpBwATpDIllhptezCekg8XzIVErI1bz62JZ+MMa9d1z0T6HMioh9jzBsqwgFs81ERDqCUonmeIREOUFUVDcNAbdvCIc6Auq6pKAo4xAXArgU0xBUADbEKQELcBKAg7gIQEJsA6YhdAMmI3QCpiIcAEhEPA6QhvACSEN4AKQgWQAKCDQiNOAQQEnEYIBTiUEAIxOGA/0bsApRlSU3TeN0c/fVtxyZgKT5N0y+l1LePIsuylzzPP33Gbo25C1iK11p/9H3/tDVZiO83AQjF24atAlCKXwUgFX8FQCv+AjCOo9sqJS/YtU3CrYEkSWiaJrjizwnYF7TOL2m4BFCLdwlord+lHlJ7DkabAPQTAaHjiwnEBJgdiL8Qs4Hs4TEBdguZE8QEmA1kD/8FUOpiQO9zcnQAAAAASUVORK5CYII=)
        2x
    ),
    pointer;
  --cursor-move: -webkit-image-set(
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACgElEQVRoQ+2ZS27CMBCGyQFygnZJb1Ep6SY3yJpHeweWQNVjVAHWvkE2hXtQVlwAcQCqiQhygsceP8bqAkuoqpqM/88ez/wuySDwmE6n38fjMavr+iVwaGW4JOQkIL6qqneIWRTFPgZEMIBW/Gg0atZks9lEgQgCIItfr9cNwHg8jgLhDaAS36ZlDAgvAJ34WBDOABTxMSCcAGzEc0NYA7iI54SwApDrvKp/zOfzwWKxaP4EP5fLJdpmQvUJMsBsNns9HA5fmCIhRKYCKMtyh72Tpum+qqoPn2ZKAoCVP5/PQyFErpnsguwAOkdZltvT6fTk07GNAG3awEpyAMDO+aSTFkDOeU4AH++EAsjVBnwNJwD4J1fvpATol8okSVgBLpeLs3e6A1DV+RgArgawA4A1qVgALhA3AF2HBQDKsGlkcjxIIXnYuNhGmcketN3VBJHn+QA+MLbbbfOhDFV8KkRiEk8RwPUMBeIGAA+vVisuLU5xJ5PJAG54RVH81nU9VAXppBAGoTNlctAsyzoptNuhNqijBc5Of1DEwzt3h1gFEfsQU8V3AOTD3IeIWUZtxN8BYBCxAGzFKwFUEDEAXMSjAH0IqAScZg5S1lRtsDL2n+w0Wip1NdjoESJdaJzEa1NIpma+Uj5jTYrS/Yw70Aa5Xuo/saBCiDfkUv+DvZOm6SHKpb4VEPjfKs5pIy8IeQf6EC7eybVUeh1i1cvtTthAcIgnH2JfCC7xXgA67yQDc4r3BjBBcIsPAoBBxBAfDKAPAb+7ehtK8/Iqo7oJel+zBqnzJiDrPmAKeP2iO/exB6Y52HbAZuJQzwbfgVDCqHEeANSV4nrusQNcK0uN+wdgZhRePQu00wAAAABJRU5ErkJggg==)
          2x
      )
      8 8,
    move;
  --cursor-resize: -webkit-image-set(
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADKElEQVRoQ+2ZK6waQRSGB8W25iJBgWiTrQKNKWo1ZF1LwuM2teARgMCDbxdIqCSgUSgsoLqiTWhCAhLUBbXN2bBkgN15MWy5KVjm8X9zHvMPBJDkT7FY/LZcLj+ORqP3kpd2XS4gcxMQbxjGM6ypadovPyCkATjic7mcfSbdbtcXCCkAuPhOp2MD5PN5XyCuBnAT76SlHxBXAZDE+wUhDMAi3g8IIQBHfCgUQuVymamRNZtNtNlspBc2NwDeKpmUuwyS2WK5AURF32reA+BWJ8u6LjUCh5z/wrqgyLhDTbwTmUsEwAqWCiqyOTbHEi1sT2Fn3ebmAKIG0FWYI/7p6Ql+t1tsqwIAcyaTySfTNN/ABFVVX5LJZM8wjK8M0bGcvXgjcSEMv2FjsRiq1+tEgEqlEu33+z9BeDweR6lUytY7Ho/RfD63QXRd/9BoNP4QQKxqtYoWiwW3ATwBOLcHtVqNCgACV6uVAi40nU6faBwOh7YrjUQiL6ZpvqUBwH68BvAI4OZtaADZbHbQ6/XSg8HgQrwjFiAymQwqFovfDcPw6mZ2BGA/XituA3gZMxoAnH4wGFRmsxkxzROJBNrv96QonADwQARIrpIGgBCySqUSAqNG+oDha7VapFq6AGCFOAJAbrfb7RMddwTwezQauV50Jyl0DkEDgBRSFEWZTqcsKbRzWqzLYFIKeYo/CamTSjgEDcCHIiaKv8jJcwgagHNhrddrBdLPrY0WCgUUDodJpw/LHCOAtVGqeNeiwiGi0Sj1HjhcZKZpmgp0G/wig+6kqupO13WV8yJjEu/ZFfAnIzwDOazEZwA5RGaXTCZ/EHo/XgoWPE8PT05m8URh/8jMcYmnnqzPdppbPBUAu6Vf54OG2Nzv5Euqz78TnZ4y/j8AST9sCRWsWxiEIoDfE+BGWT7gWOF5qmmaNPFMXchLnJt38hrLaw9YDsQZIxQBZzILxC3FXxUBFohbi5cCgF12z7gV90O8NIBzCMuynJ9HpBastC5EK2z4Xna38drzqiJ2W/TwR3fK6w3L02FYxkoHYNlU5pgHgMzTFFnrEQGRU5M559VH4C9ocYlPRB5IuQAAAABJRU5ErkJggg==)
          2x
      )
      8 8,
    nesw-resize;
  --cursor-delete: -webkit-image-set(
      url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABn0lEQVRoQ+3YMW6EMBAAwL0XmNekhYraFG6o4AP5AvATqGl4ArRJlz4SSHkAvIDIljjlBHesAQevhKuTzpidXa8R3IQQdVmWHhAdNwAYhRANVYQCyORTRSgAYwyGYSCJUIAkSaBtWyiKghziDkjTFKIoIod4AMhe0ESo/tk45L13jxlAEzG6rguehz+F67qGpmnkbcwBNBCqf+T2ww45N8sy8wAkwm4AAjHK7aO7heQ2Mr6F/m6JF41tZxMv7WfN0wnbErvnLZ5Cz1a1EaEFQPTE7ozqLqANsA2xCWATYjPAFsQugA2I3YCzEYcAzkQcBjgLcSjgDMThgP9GoABxHEOe57oPSTXf9NeOVcAUvO/734yxny2KIAjewzD82nLt2jUvAVPwnPPPqqre1hY74/+nAArBT29Fs9dCKsEvAigFPwNQC/4B0HWdOiptbtilQ0I1seM40Pc9ueDvFZA/qGV+qoaqANXgVQU45x+2PqQwD8ZDPrBibmRqzgUwlVnsulcFsJkyNe+qgKnMYte9KoDNlKl5VwVMZRa7LvkK/AIya4BAvmH9YQAAAABJRU5ErkJggg==)
        2x
    ),
    pointer;
  --cursor-add: -webkit-image-set(
      url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACEElEQVRoQ+2YsW7CMBCGnZEs4Wm6hol2DEOkKkMEL9BXAN4EmCqxMLZbsrZb90og9QFggTHVWZgGY+JLbNexlJOQIsU+33f/ne3gxXGcrdfrAXHUPEJIEcdxrgNitVo9H4/HRz4Xvu+/p2n6aiJHFAAc64A4qxnygerwfQ+eAgRBQA6HgzIEAygKmhNqnucp+61SjgJMp1Oy3W7JcrlUWswqwGw2I+PxWAnCOgBIVRPir1ZKOvMldKcEQH1lu5QQKMCsBkQRhiEZDK534bKv8jP4z7KM5HlO20M5+rMT2gP8QkgI4dyqwGCd+XxuHgBZTu0GQEAUUD58CYGizCDjsJUygxKCn/ESKpdBRTm1s4lFNYzpiVZso1UNKINoPYCsJ5wAqIKwdpkTnQOyQ0ZUTnCdPp1OT/zcXq/3ZvQ63QRAVk6yBOh6L7xK1HEua+w6vpqMVQawrYQWAJsQ2gBsQWgFsAGhHeC/IVAAk8mELBaLJpuE0jc2ZkEpAAt+OBx+B0Hwg3HKjxmNRi9Jknw1mSub UAnAgo+i6HOz2TzInNl4fxfAheDZV9HNZ6ErwQsBXAr+BsC14K8Adrsd3SrZ3LCiTYI2cb/fJ/v93rngLwrAg2uZZ2pQBVwNnioQRdFHWw8pzMGo5Q9WzEKmxnQApjKL9dspgM2UqXGdAqYyi/XbKYDNlKlxnQKmMov167wCv7Mu7kBLP7biAAAAAElFTkSuQmCC)
        2x
    ),
    pointer;
  box-sizing: initial;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 100%;
  width: 100%;
}
.CanvasToolsEditor * {
  box-sizing: initial;
}
.CanvasToolsEditor canvas {
  background-color: #111;
  pointer-events: none;
}
.CanvasToolsEditor canvas,
.CanvasToolsEditor svg {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  position: relative;
  width: 100%;
}
.CanvasToolsEditor svg {
  cursor: var(--cursor-pointer);
}
.CanvasToolsEditor svg title {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.CanvasToolsEditor #konvaContainer,
.CanvasToolsEditor #konvaWrapper {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  position: relative;
  width: 100%;
}
.CanvasToolsEditor #konvaWrapper {
  overflow: hidden;
}
.konvajs-content canvas {
  opacity: 0.5;
}
.CanvasToolsContainer {
  height: 100%;
  overflow: auto;
  width: 100%;
}
.CanvasToolsContainer:focus {
  outline: none;
}
.regionManager {
  pointer-events: none;
}
.regionStyle {
  pointer-events: visiblePainted;
}
.dragRectStyle {
  fill: #0000;
}
.dragPointStyle,
.dragRectStyle {
  stroke-width: 0;
  cursor: var(--cursor-move);
  pointer-events: all;
}
.dragPointStyle {
  filter: url(#black-glow);
}
.tagsLayer {
  pointer-events: none;
}
.primaryTagRectStyle {
  stroke-width: 2;
  stroke-dasharray: 0.5 4;
  stroke-linecap: round;
  filter: url(#black-glow);
}
.primaryTagPointStyle {
  stroke-width: 1;
}
.primaryTagTextStyle {
  fill: #fff;
  font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
  font-size: 9pt;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.primaryTagTextStyle::selection {
  fill: #fff;
  background: none;
}
.secondaryTagStyle {
  stroke-width: 0;
  pointer-events: none;
}
.anchorStyle,
.bezierControlPointStyle,
.bezierControlPointTangentStyle,
.midpointStyle {
  stroke-width: 2;
}
.anchorStyle.ghost {
  cursor: var(--cursor-resize);
}
.anchorStyle.ghost.delete {
  cursor: var(--cursor-delete);
}
.anchorStyle.ghost.add {
  cursor: var(--cursor-add);
}
.anchorStyle.ghost {
  stroke-width: 0;
}
.primaryTagBoundRectStyle {
  stroke-width: 2;
}
.primaryTagPolygonStyle,
.primaryTagPolylineStyle {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.5 4;
}
.regionManager {
  --default-color-pure: grey;
  --default-color-accent: #808080cc;
  --default-color-dark: #404040cc;
  --default-color-shadow: #80808066;
  --default-color-highlight: #80808033;
  --default-color-white: #fff;
  --default-color-transparent: #fff0;
  --default-color-ghost: #ffffff80;
  --default-color-delete: #d81841;
  --default-color-add: #157ff0;
  --default-color-control: #fd802d;
}
.secondaryTagStyle {
  fill: var(--default-color-accent);
}
.bezierControlPointStyle,
.bezierControlPointTangentStyle,
.midpointStyle {
  stroke: none;
  fill: none;
}
.anchorStyle {
  stroke: var(--default-color-dark);
  fill: var(--default-color-pure);
}
.regionStyle:hover .anchorStyle {
  stroke: var(--default-color-white);
}
.regionStyle:hover .midpointStyle {
  stroke: var(--default-color-white);
  fill: var(--default-color-white);
}
.regionStyle:hover .midpointStyle:hover {
  stroke: var(--default-color-accent);
}
.regionStyle.selected .bezierControlPointTangentStyle,
.regionStyle:hover .bezierControlPointTangentStyle {
  stroke: var(--default-color-control);
  stroke-dasharray: 4;
}
.regionStyle.selected .bezierControlPointStyle,
.regionStyle:hover .bezierControlPointStyle {
  stroke: var(--default-color-control);
  fill: var(--default-color-pure);
}
.regionStyle.selected .bezierControlPointStyle:hover,
.regionStyle:hover .bezierControlPointStyle:hover {
  stroke: var(--default-color-control);
  fill: var(--default-color-control);
  cursor: var(--cursor-resize);
}
.anchorStyle.ghost,
.anchorStyle.ghost:hover,
.regionStyle.selected .anchorStyle.ghost,
.regionStyle.selected .anchorStyle.ghost:hover {
  fill: var(--default-color-ghost);
}
.anchorStyle:hover {
  stroke: var(--default-color-white);
}
.primaryTagRectStyle {
  fill: var(--default-color-shadow);
  stroke: var(--default-color-accent);
}
.regionStyle:hover .primaryTagRectStyle {
  fill: var(--default-color-highlight);
  stroke: var(--default-color-white);
}
.regionStyle.selected .primaryTagRectStyle {
  fill: var(--default-color-highlight);
  stroke-dasharray: none;
}
.primaryTagTextBGStyle {
  fill: var(--default-color-dark);
}
.anchorBoneStyle {
  fill: var(--default-color-transparent);
}
.primaryTagPointStyle {
  fill: var(--default-color-pure);
  stroke: var(--default-color-white);
}
.dragPointStyle {
  fill: var(--default-color-ghost);
  opacity: 0.5;
}
.regionStyle.selected .dragPointStyle,
.regionStyle:hover .dragPointStyle {
  fill: var(--default-color-ghost);
  opacity: 1;
}
.primaryTagBoundRectStyle {
  fill: var(--default-color-shadow);
  stroke: var(--default-color-accent);
  opacity: 0.25;
}
.regionStyle.selected .primaryTagBoundRectStyle {
  fill: var(--default-color-highlight);
  opacity: 1;
}
.regionStyle:hover .primaryTagBoundRectStyle {
  fill: var(--default-color-highlight);
  stroke: var(--default-color-white);
  opacity: 0.75;
}
.primaryTagPolylineStyle {
  fill: var(--default-color-transparent);
  stroke: var(--default-color-pure);
}
.regionStyle.selected .primaryTagPolylineStyle {
  stroke-dasharray: none;
  filter: url(#black-glow);
}
.primaryTagPolygonStyle {
  fill: var(--default-color-shadow);
  stroke: var(--default-color-pure);
}
.regionStyle.selected .primaryTagPolygonStyle {
  fill: var(--default-color-highlight);
  stroke-dasharray: none;
  filter: url(#black-glow);
}
.regionStyle:hover .primaryTagPolygonStyle {
  fill: var(--default-color-highlight);
}
.anchorStyle.ghost.delete,
.anchorStyle.ghost.delete:hover,
.regionStyle.selected .anchorStyle.ghost.delete,
.regionStyle:hover .anchorStyle.ghost.delete {
  stroke: var(--default-color-delete);
  stroke-width: 2px;
  fill: var(--default-color-transparent);
}
.anchorStyle.ghost.add,
.anchorStyle.ghost.add:hover,
.regionStyle.selected .anchorStyle.ghost.add,
.regionStyle:hover .anchorStyle.ghost.add {
  stroke: var(--default-color-add);
  stroke-width: 2px;
  fill: var(--default-color-transparent);
}
.anchorLineStyle {
  fill: none;
  stroke-width: 5;
  stroke: var(--default-color-transparent);
}
svg:not(:root) .menuLayer {
  overflow: visible;
}
.menuRectStyle {
  stroke-width: 0;
  fill: #000;
  filter: url(#black-glow);
}
.menuItemBack {
  stroke-width: 1.5;
  stroke: #c6c6c633;
  fill: #000;
}
.menuIcon {
  fill: #fff;
  font-family: Segoe UI Emoji, Tahoma, Geneva, Verdana, sans-serif;
  font-size: 10pt;
}
.menuItem {
  stroke-width: 1.5;
  stroke: #fff;
  fill: #0000;
}
.menuItem:hover {
  stroke: #157ff0;
}
.regionManager.frozen .regionStyle.old,
.regionManager.frozen .regionStyle.old .dragPointStyle,
.regionManager.frozen .regionStyle.old .dragRectStyle {
  pointer-events: none;
}
.regionManager.frozen .regionStyle.old .anchorStyle.BL,
.regionManager.frozen .regionStyle.old .anchorStyle.BR,
.regionManager.frozen .regionStyle.old .anchorStyle.TL,
.regionManager.frozen .regionStyle.old .anchorStyle.TR,
.regionManager.frozen .regionStyle.old .dragRectStyle {
  cursor: default;
}
.regionManager.frozen .anchorStyle.ghost {
  display: none;
}
.regionManager.frozen .regionStyle.old,
.regionManager.frozen .regionStyle.old:hover {
  opacity: 0.5;
}
.regionManager.frozen .regionStyle.old .primaryTagPointStyle,
.regionManager.frozen .regionStyle.old .primaryTagPolygonStyle,
.regionManager.frozen .regionStyle.old .primaryTagPolylineStyle,
.regionManager.frozen .regionStyle.old .primaryTagRectStyle {
  stroke-width: 1;
  stroke-dasharray: 0 0;
}
.regionManager.frozen .regionStyle.old .anchorStyle {
  display: none;
}
.regionManager.frozen .regionStyle.old .primaryTagTextBGStyle,
.regionManager.frozen .regionStyle.old .primaryTagTextStyle {
  opacity: 0.25;
}
#selectionOverlay {
  height: 100%;
  pointer-events: none;
  position: relative;
  width: 100%;
}
.crossStyle line {
  stroke-width: 1;
  stroke-dasharray: 3 3;
  stroke: #5a7a9e;
  pointer-events: none;
}
.crossStyle .blackDashes {
  stroke-width: 3;
  stroke-dasharray: 3 3;
  stroke: #000;
  pointer-events: none;
}
.crossStyle .whiteDashes {
  stroke-width: 3;
  stroke-dasharray: 0 3 0;
  stroke: #fff;
  pointer-events: none;
}
.selectionBoxStyle {
  fill: #e8f0fc;
  fill-opacity: 0.25;
  stroke-width: 0;
  pointer-events: none;
}
.rectCopySelector .copyRectStyle {
  stroke-width: 3;
  stroke: #1d3d6e;
  fill: #0000;
  pointer-events: none;
}
.pointSelector .pointStyle {
  stroke-width: 2;
  stroke: #157ff0;
  fill: #0000;
  pointer-events: none;
}
.polylineSelector .polylineStyle {
  fill: #0000;
  stroke-width: 2px;
  stroke: #157ff080;
  pointer-events: none;
}
.polylineSelector .polylinePointStyle {
  fill: #157ff0;
  stroke-width: 0;
  pointer-events: none;
}
.polylineSelector .nextSegmentStyle {
  stroke-width: 2;
  stroke-dasharray: 3 3;
  stroke: #157ff0;
  pointer-events: none;
}
.polylineSelector .nextPointStyle {
  stroke-width: 2;
  r: 6px;
  stroke: #157ff0;
  fill: #0000;
  pointer-events: none;
}
.polygonSelector .polygonStyle {
  fill: #1159df33;
  stroke-width: 2px;
  stroke: #157ff080;
  pointer-events: none;
}
.polygonSelector .polygonPointStyle {
  fill: #157ff0;
  stroke-width: 0;
  pointer-events: none;
}
.polygonSelector .nextSegmentStyle {
  stroke-width: 2;
  stroke-dasharray: 3 3;
  stroke: #157ff0;
  pointer-events: none;
}
.polygonSelector .nextPointStyle {
  stroke-width: 2;
  r: 6px;
  stroke: #157ff0;
  fill: #0000;
  pointer-events: none;
}
.toolbarBGStyle {
  fill: #1a2a40;
}
.iconStyle {
  pointer-events: all;
}
.iconStyle.selector .iconBGRectStyle {
  fill: #0000;
}
.iconStyle.selector.selected .iconBGRectStyle,
.iconStyle.selector:hover .iconBGRectStyle {
  fill: #157ff0;
}
.iconStyle .iconImageStyle * {
  stroke: #fff;
}
.iconStyle.switch .iconBGRectStyle {
  fill: #0000;
}
.iconStyle.switch:hover .iconBGRectStyle {
  fill: #157ff0;
}
.iconStyle.switch .iconImageStyle * {
  stroke: #fff;
}
.iconStyle.switch.selected .iconImageStyle * {
  stroke: #0ebafd;
  stroke-width: 1.5;
}
.iconStyle .iconImageStyle .accent-f {
  fill: #157ff0;
}
.iconStyle .iconImageStyle .accent-s {
  stroke: #157ff0;
}
.iconStyle.separator line {
  stroke: #fff;
  stroke-width: 0.5px;
}
#regionAnnouncer {
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
  height: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
  width: 0;
}
#controls div {
  margin: 20px 0;
}
#canvasToolsDiv {
  background: #2a3a50;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 100%;
  height: 300px;
  margin: 0;
}
#toolbarDiv {
  grid-column: 1/2;
  grid-row: 1;
  z-index: 10;
}
#toolbarDiv svg {
  background: #3a5070;
  box-shadow: 0 0 0.5px #6a8aaa, 5px 0 10px -5px #000;
  height: 100%;
  margin-right: 5px;
  width: 64px;
}
#selectionDiv {
  align-self: center;
  background: #2a3a50;
  grid-column: 2/3;
  grid-row: 1;
  height: calc(100% - 10px);
  justify-self: center;
  margin: 5px;
  width: calc(100% - 10px);
}
#editorDiv svg {
  box-shadow: 0 0 0.25px #6a8aaa, 0 0 10px #000;
}
.react-swipeable-view-container .MuiBox-root {
  padding: 0 !important;
}
#settings .message {
  margin-bottom: 24px;
}
#settings .warning-message {
  margin-top: 12px;
  width: 100%;
}
#settings .warning-message .message {
  margin-bottom: 0;
}
#settings .table-container table {
  border-spacing: 0 12px;
  text-align: justify;
  width: 100%;
}
#settings .time-of-interest {
  line-height: 48px;
}
#settings .grid-4 {
  grid-column-gap: 2% !important;
  display: grid;
  grid-template-columns: 24% 24% 24% 24%;
}
#settings .dropdown-container .dropdown {
  max-height: 300px;
  overflow-y: scroll;
  top: 68px;
  width: -webkit-fill-available;
}
#settings .tab.active {
  box-shadow: 0 3px var(--oss) inset;
}
#settings .control-bar .tab.active {
  background: hsla(var(--oss-hsl), 0.1);
  color: var(--oss);
}
#settings .dropdown-wrapper,
#settings .generic-input,
#settings h3,
#settings hr,
#settings p {
  width: 100%;
}
#settings .block-generic {
  margin-bottom: 24px;
  width: 100%;
}
#settings .block-footer {
  justify-content: flex-end;
  padding-bottom: 6px;
  padding-right: 24px;
  padding-top: 6px;
}
#settings .block-footer .button:first-child,
#settings .block-footer .button:nth-child(2) {
  margin-right: 6px;
}
#settings .toggle-wrapper {
  align-items: center;
  display: flex;
  justify-items: flex-start;
  padding: 9px 0 18px;
  width: 100%;
}
#settings .toggle-wrapper p {
  margin: 0;
}
#settings .toggle-wrapper .toggle {
  margin-right: 20px;
}