@charset "UTF-8";
@import url("./datagrid.css");
@import url("./floor-plan-viewer.css");
@import url("./chartist.css");
@import url("./codemirror.css");
@import url("../kn-theme-strio/css/exo2.font.css");
@import url("../kn-theme-strio/css/sourcesanspro.font.css");
@import url("../kn-theme-strio/css/materialicons.font.css");
@import url("../kn-theme-strio/css/exo2.font.css");
@import url("../kn-theme-strio/css/sourcesanspro.font.css");
@import url("../kn-theme-strio/css/materialicons.font.css");
@import url("../kn-theme-strio/css/exo2.font.css");
@import url("../kn-theme-strio/css/sourcesanspro.font.css");
@import url("../kn-theme-strio/css/materialicons.font.css");
@import url("../kn-theme-strio/css/exo2.font.css");
@import url("../kn-theme-strio/css/sourcesanspro.font.css");
@import url("../kn-theme-strio/css/materialicons.font.css");
@import url("../kn-theme-strio/css/exo2.font.css");
@import url("../kn-theme-strio/css/sourcesanspro.font.css");
@import url("../kn-theme-strio/css/materialicons.font.css");
@import url("../kn-theme-strio/css/exo2.font.css");
@import url("../kn-theme-strio/css/sourcesanspro.font.css");
@import url("../kn-theme-strio/css/materialicons.font.css");
@import url("../kn-theme-strio/css/exo2.font.css");
@import url("../kn-theme-strio/css/sourcesanspro.font.css");
@import url("../kn-theme-strio/css/materialicons.font.css");
@import url("../kn-theme-strio/css/exo2.font.css");
@import url("../kn-theme-strio/css/sourcesanspro.font.css");
@import url("../kn-theme-strio/css/materialicons.font.css");
@keyframes indeterminate {
  0% {
    left: 0%;
    right: 100%; }
  30% {
    left: 0%;
    right: 50%; }
  80% {
    left: 70%;
    right: 0%; }
  100% {
    left: 100%;
    right: 0%; } }

/*$bg-color: #283038;
$fg-color: #c0c0c0;

$red-shade-color: #f06060;
$yellow-shade-color: #f0d060;
$green-shade-color: #a0f060;
$emerald-shade-color: #60f080;
$cyan-shade-color: #60e0f0;
$blue-shade-color: #6080f0;
$purle-shade-color: #b060f0;
$pink-shade-color: #f060c8;

$primary-color: $purle-shade-color;
$secondary-color: $yellow-shade-color;*/
/*$foreground-color: rgb(255, 255, 255);
$background-color: rgb(56, 56, 64);
$text-color: rgba(255, 255, 255, 0.9);
$text-secondary-color: rgba(255, 255, 255, 0.6);
$reading-animation-color: rgb(0, 150, 136);

$primary-color: rgb(128, 88, 72);
$accent-color: rgb(16, 160, 96);
$warn-color: rgb(192, 64, 96);

$divider-color: rgba(255, 255, 255, 0.1);
$header-divider-color: rgba(255, 255, 255, 0.2);
$row-divider-color: rgba(255, 255, 255, 0.15);*/
kn-audit-display {
  white-space: nowrap;
  margin: 10px 5px; }
  kn-audit-display strong {
    padding: 0.1em 0.4em 0.2em;
    margin: 0 0.2em;
    border-radius: 0.5em;
    font-weight: 400; }

kn-checkbox .kn-checkbox-mark {
  opacity: 0; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::before {
  border-radius: 50%; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border-radius: 2px;
  transition: 0.3s all ease; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark-path {
  stroke-dashoffset: 0;
  stroke-dasharray: 25; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox .kn-checkbox-mark-path {
  stroke-dashoffset: 25;
  stroke-dasharray: 25;
  stroke-width: 2px;
  transition: 0.3s transform ease, 0.3s stroke-dashoffset ease;
  transform-origin: 50% 50%;
  stroke: white; }

kn-checkbox .kn-checkbox-box::after, kn-checkbox label {
  transition: 0.3s color ease; }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox.indeterminate .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox.indeterminate .kn-checkbox-mark-path {
  transform: rotate(45deg) translate(-2px, 0);
  stroke-dashoffset: 20 !important;
  stroke-dasharray: 14 !important; }

app-print-template-edit kn-codemirror {
  height: 100%;
  flex: 1; }

app-print-template-edit > kn-resizable-container {
  height: 100%; }
  app-print-template-edit > kn-resizable-container kn-draggable-handler.left {
    z-index: 2;
    height: 50px !important;
    top: calc(100% - 50px) !important; }
  app-print-template-edit > kn-resizable-container .preview iframe {
    width: 100%;
    height: 100%;
    border: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror {
    height: 100%;
    overflow: visible;
    background: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror-scroll {
    margin: 0;
    padding: 0;
    overflow: visible !important; }
  app-print-template-edit > kn-resizable-container .CodeMirror-sizer {
    border-right-width: 0 !important; }
  app-print-template-edit > kn-resizable-container .box {
    width: 100%;
    height: 100%; }

app-print-template-edit form {
  width: 100%;
  height: 100%; }

app-print-template-edit kn-tabs {
  flex-direction: column-reverse; }
  app-print-template-edit kn-tabs a.sidepanel {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 6px 0 0; }
    app-print-template-edit kn-tabs a.sidepanel i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    app-print-template-edit kn-tabs a.sidepanel:hover, app-print-template-edit kn-tabs a.sidepanel:focus {
      opacity: 1;
      text-decoration: none; }
    app-print-template-edit kn-tabs a.sidepanel:active {
      opacity: 1; }
    app-print-template-edit kn-tabs a.sidepanel[disabled] {
      opacity: 0.3;
      background: none; }
    app-print-template-edit kn-tabs a.sidepanel i {
      transition: transform 0.5s ease 0.3s; }
    app-print-template-edit kn-tabs a.sidepanel.active i {
      transform: rotate(180deg); }

app-print-template-edit kn-tab.active {
  display: flex;
  flex-direction: column;
  flex: 1; }

app-print-template-edit kn-tab.home .box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }

app-print-template-edit kn-tab.home .fields {
  width: 100%;
  max-width: 700px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home i.banner {
  font-size: 192px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home h1 {
  text-align: center;
  margin: 50px 0; }

app-print-template-edit kn-tab.home .form-container {
  width: 80%;
  height: 100%;
  margin: 50px auto; }

app-print-template-edit kn-tab.home .form-layout {
  display: flex;
  flex-direction: column;
  height: 100%; }

app-print-template-edit kn-tab .no-print-context-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder i.banner {
    font-size: 128px;
    margin: 0 auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder strong {
    font-family: 'Exo 2';
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin: 20px 0 50px 0; }
  app-print-template-edit kn-tab .no-print-context-placeholder button {
    text-align: center; }

app-print-template-edit kn-menu.errors kn-menu-activator {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  margin: 0 8px 0 0;
  opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  app-print-template-edit kn-menu.errors kn-menu-activator:hover, app-print-template-edit kn-menu.errors kn-menu-activator:focus {
    opacity: 1;
    text-decoration: none; }
  app-print-template-edit kn-menu.errors kn-menu-activator:active {
    opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator[disabled] {
    opacity: 0.3;
    background: none; }

app-print-template-edit kn-menu.errors kn-menu-content {
  position: absolute;
  right: 8px;
  bottom: 50px;
  max-width: 1000px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-content [hidden] {
    display: none; }
  app-print-template-edit kn-menu.errors kn-menu-content strong {
    display: block; }
  app-print-template-edit kn-menu.errors kn-menu-content pre {
    font-size: 14px;
    margin-bottom: 0; }

kn-roles-table .role-permissions {
  position: relative;
  margin: 0 10px 76px 10px; }
  kn-roles-table .role-permissions > .scrollable {
    overflow-x: auto;
    margin: 0 54px 0 220px; }
  kn-roles-table .role-permissions table {
    border-collapse: separate;
    border-spacing: 0; }
    kn-roles-table .role-permissions table thead th {
      position: relative;
      width: 54px;
      min-width: 54px;
      height: 270px;
      padding: 0; }
      kn-roles-table .role-permissions table thead th.permission:not(:nth-child(2))::before {
        content: '';
        left: 0;
        bottom: 10px;
        position: absolute;
        display: block;
        width: 1px;
        height: calc(100% - 20px); }
    kn-roles-table .role-permissions table tbody td {
      padding: 0;
      height: 54px; }
    kn-roles-table .role-permissions table tbody.permissions-matrix td kn-checkbox {
      justify-content: center; }
    kn-roles-table .role-permissions table tbody.add-new-input td {
      height: 0; }
    kn-roles-table .role-permissions table div.rotate {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 54px;
      bottom: 0;
      left: 100%;
      transform: rotate(270deg);
      transform-origin: 0 100%;
      text-align: left; }
    kn-roles-table .role-permissions table th.name, kn-roles-table .role-permissions table td.name {
      position: absolute;
      left: 0;
      width: 220px;
      text-align: center;
      vertical-align: middle; }
      kn-roles-table .role-permissions table th.name kn-input, kn-roles-table .role-permissions table td.name kn-input {
        margin: 10px; }
        kn-roles-table .role-permissions table th.name kn-input input, kn-roles-table .role-permissions table td.name kn-input input {
          font-weight: 700; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.name, kn-roles-table .role-permissions table td.permission span.description {
      display: block;
      white-space: nowrap;
      padding: 1px 10px; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table td.permission span.name {
      font-size: 16px;
      font-weight: bold; }
    kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.description {
      font-size: 14px;
      font-weight: 400;
      opacity: 0.7; }
    kn-roles-table .role-permissions table th.spacer, kn-roles-table .role-permissions table td.spacer {
      width: 100%;
      min-width: 0; }
    kn-roles-table .role-permissions table th.actions, kn-roles-table .role-permissions table td.actions {
      position: absolute;
      right: 0;
      width: 54px; }
  kn-roles-table .role-permissions .actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 10px;
    height: 34px; }
    kn-roles-table .role-permissions .actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-roles-table .role-permissions .actions button:hover, kn-roles-table .role-permissions .actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-roles-table .role-permissions .actions button:active {
      opacity: 1; }
    kn-roles-table .role-permissions .actions button[disabled] {
      opacity: 0.3;
      background: none; }

kn-permission-actions-select kn-menu-content {
  position: absolute;
  z-index: 100;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3));
  padding: 10px;
  border-radius: 5px;
  transform: translate(calc(-50% + 23px), 5px); }
  kn-permission-actions-select kn-menu-content > div {
    padding: 5px; }
    kn-permission-actions-select kn-menu-content > div kn-checkbox label {
      flex: 1; }
  kn-permission-actions-select kn-menu-content::before {
    position: absolute;
    left: calc(50% - 10px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

kn-user-edit table.user-roles {
  width: 100%;
  border-collapse: collapse;
  margin: 13px 0 10px 0; }
  kn-user-edit table.user-roles tbody tr {
    height: 40px; }
  kn-user-edit table.user-roles tbody td {
    transition: 0.3s background-color ease;
    padding: 10px 0 10px 10px; }
  kn-user-edit table.user-roles td.actions {
    text-align: right; }
  kn-user-edit table.user-roles thead, kn-user-edit table.user-roles td.user-role input {
    font-weight: bold; }
  kn-user-edit table.user-roles thead {
    text-align: center; }
    kn-user-edit table.user-roles thead tr:first-child {
      text-align: center; }
    kn-user-edit table.user-roles thead tr:last-child {
      height: auto; }
      kn-user-edit table.user-roles thead tr:last-child td {
        font-weight: 400;
        font-style: italic;
        opacity: 0.7;
        padding-bottom: 5px; }
        kn-user-edit table.user-roles thead tr:last-child td > div {
          display: flex; }
          kn-user-edit table.user-roles thead tr:last-child td > div > span {
            flex: 1; }
  kn-user-edit table.user-roles td.user-role {
    width: 200px; }
  kn-user-edit table.user-roles td.user-role-customer-branch {
    width: 250px; }
    kn-user-edit table.user-roles td.user-role-customer-branch > div {
      display: flex; }
      kn-user-edit table.user-roles td.user-role-customer-branch > div input {
        text-align: right;
        width: 100%; }
  kn-user-edit table.user-roles td.actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 10px;
    height: 34px; }
    kn-user-edit table.user-roles td.actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-user-edit table.user-roles td.actions button:hover, kn-user-edit table.user-roles td.actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-user-edit table.user-roles td.actions button:active {
      opacity: 1; }
    kn-user-edit table.user-roles td.actions button[disabled] {
      opacity: 0.3;
      background: none; }
  kn-user-edit table.user-roles td.actions button:first-child {
    margin-left: 0; }
  kn-user-edit table.user-roles td.actions button:last-child {
    margin-right: 0; }

kn-control-messages {
  position: relative;
  height: 15px; }
  kn-control-messages > div {
    position: absolute;
    display: block; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave {
      transition: 0.3s all ease; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave.kn-leave-active {
      top: -5px;
      opacity: 0; }
    kn-control-messages > div.kn-leave, kn-control-messages > div.kn-enter.kn-enter-active {
      top: 0;
      opacity: 1; }

app-database-manage kn-tabs {
  position: relative;
  padding-top: 50px;
  margin: 0 0 20px 0; }
  app-database-manage kn-tabs .tab-group {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 400; }
  app-database-manage kn-tabs a i.material-icons {
    font-size: 72px; }
  app-database-manage kn-tabs a strong {
    font-weight: 400; }
  app-database-manage kn-tabs kn-tab {
    position: relative;
    padding: 30px;
    justify-content: center;
    text-align: center; }
    app-database-manage kn-tabs kn-tab .actions {
      margin: 20px auto 0 auto; }
    app-database-manage kn-tabs kn-tab p.note {
      margin-top: 0;
      font-style: italic;
      opacity: 0.5; }
    app-database-manage kn-tabs kn-tab .select-database {
      margin: 20px auto;
      padding: 20px;
      width: 400px; }
    app-database-manage kn-tabs kn-tab::after {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
      transition: 0.3s all ease; }
    app-database-manage kn-tabs kn-tab.kn-drag-over::after {
      opacity: 1;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      left: 10px;
      top: 10px; }

kn-datagrid tr td.strong {
  font-weight: bold; }

kn-datagrid tr td.highlight {
  color: #802020; }

kn-datagrid tr td.note {
  color: gray;
  font-size: 0.8em; }

kn-datagrid tr td.overflow {
  overflow: visible; }

kn-datagrid kn-cell-renderer span.user-database-tag, kn-datagrid kn-cell-renderer span.user-role-tag {
  color: white;
  padding: 4px 7px;
  margin: 0 5px 0 0;
  border-radius: 2px; }

kn-datagrid kn-cell-renderer span.user-ownership {
  color: rgba(0, 0, 0, 0.3); }
  kn-datagrid kn-cell-renderer span.user-ownership > span {
    color: black;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin: 0 4px;
    border-radius: 2px; }

kn-datepicker .viewport {
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-datepicker .viewport::before {
    content: '';
    position: absolute;
    display: block;
    left: calc(50% - 10px);
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  kn-datepicker .viewport.kn-enter, kn-datepicker .viewport.kn-leave {
    transition: 0.3s opacity ease, 0.3s margin-top ease, 0.3s transform ease; }
    kn-datepicker .viewport.kn-enter kn-date-view, kn-datepicker .viewport.kn-enter kn-day-view, kn-datepicker .viewport.kn-enter kn-hour-view, kn-datepicker .viewport.kn-leave kn-date-view, kn-datepicker .viewport.kn-leave kn-day-view, kn-datepicker .viewport.kn-leave kn-hour-view {
      opacity: 1 !important;
      transform: none !important; }
  kn-datepicker .viewport.kn-enter {
    opacity: 0;
    margin-top: 10px; }
  kn-datepicker .viewport.kn-leave, kn-datepicker .viewport.kn-enter.kn-enter-active {
    opacity: 1;
    margin-top: 0; }
  kn-datepicker .viewport.kn-leave.kn-leave-active {
    opacity: 0;
    margin-top: 10px; }

kn-datepicker kn-date-header a, kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a, kn-datepicker kn-time-header a:hover {
  text-decoration: none; }

kn-datepicker kn-date-header a {
  text-align: center;
  font-weight: 900; }

kn-datepicker kn-time-header a {
  font-weight: 400;
  border-radius: 10%; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-hour-view.kn-enter, kn-datepicker kn-hour-view.kn-leave {
  transition: 0.3s opacity ease, 0.3s transform ease; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-hour-view.kn-enter {
  opacity: 0;
  transform: scale(0.7, 0.7); }

kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-date-view.kn-enter.kn-enter-active, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-day-view.kn-enter.kn-enter-active, kn-datepicker kn-hour-view.kn-leave, kn-datepicker kn-hour-view.kn-enter.kn-enter-active {
  opacity: 1;
  transform: scale(1, 1); }

kn-datepicker kn-date-view.kn-leave.kn-leave-active, kn-datepicker kn-day-view.kn-leave.kn-leave-active, kn-datepicker kn-hour-view.kn-leave.kn-leave-active {
  opacity: 0;
  transform: scale(1.4, 1.4); }

kn-datepicker kn-month-view.animated {
  transition: 0.3s transform ease; }

kn-datepicker kn-month-view th, kn-datepicker kn-month-view td {
  text-align: center;
  border: 1px solid transparent; }

kn-datepicker kn-month-view th {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase; }

kn-datepicker kn-month-view td a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker kn-month-view td a, kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:active, kn-datepicker kn-month-view td a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    outline: none; }

kn-datepicker .picker-relative-container {
  position: relative;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  margin: 22px; }
  kn-datepicker .picker-relative-container.format-12-hours {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px; }
  kn-datepicker .picker-relative-container .center {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    z-index: 1;
    border-radius: 50%; }
  kn-datepicker .picker-relative-container .gauge {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: 0 0; }
  kn-datepicker .picker-relative-container li {
    text-align: center;
    border: 1px solid transparent; }
    kn-datepicker .picker-relative-container li::before {
      border-radius: 50%; }
    kn-datepicker .picker-relative-container li.minor a {
      width: 13px;
      height: 13px;
      line-height: 13px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent;
      font-size: 0; }
      kn-datepicker .picker-relative-container li.minor a, kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:active, kn-datepicker .picker-relative-container li.minor a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
        outline: none; }
    kn-datepicker .picker-relative-container li:not(.minor) a {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent; }
      kn-datepicker .picker-relative-container li:not(.minor) a, kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:active, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        outline: none; }

kn-datepicker .period-selector a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker .period-selector a, kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:active, kn-datepicker .period-selector a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    outline: none; }

.kn-ripple {
  overflow: hidden;
  position: relative; }

.kn-ripple.kn-ripple-unbounded {
  overflow: visible; }

.kn-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0); }

kn-export-button kn-menu {
  display: block;
  position: relative; }
  kn-export-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-export-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-export-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-export-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-export-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-export-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-export-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-export-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-export-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-export-button kn-menu kn-spinner {
    left: 32px; }

button.form-button, .form-input button {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 30px;
  font-size: 16px;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s; }
  button.form-button[disabled], .form-input button[disabled] {
    box-shadow: none; }
  button.form-button::-moz-focus-inner, .form-input button::-moz-focus-inner {
    border: none; }
  button.form-button::after, .form-input button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    bottom: -25%;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    transition: 0.2s all ease; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
    button.form-button:not([disabled]):active::after, .form-input button:not([disabled]):active::after {
      bottom: -70%;
      left: -50%;
      height: 200%;
      width: 200%;
      opacity: 0.5; }

@keyframes reveal-back-link {
  to {
    opacity: 1;
    left: calc(50% - 700px); } }

.form-container.heading, .form-container .form-loader-bar {
  position: relative; }
  .form-container.heading::before, .form-container.heading::after, .form-container .form-loader-bar::before, .form-container .form-loader-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    height: 5px;
    z-index: 3; }
  .form-container.heading::before, .form-container .form-loader-bar::before {
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.3s opacity ease; }
  .form-container.heading::after, .form-container .form-loader-bar::after {
    left: 0%;
    right: 100%;
    opacity: 0; }

.loading .form-container.heading::before, .loading .form-container.heading::after, .loading .form-container .form-loader-bar::before, .loading .form-container .form-loader-bar::after {
  opacity: 1; }

.loading .form-container.heading::after, .loading .form-container .form-loader-bar::after {
  animation: indeterminate 1s linear infinite; }

.form-container {
  margin: 30px 0; }
  .form-container.heading {
    position: relative;
    margin: 0;
    padding: 0; }
  .form-container h1, .form-container p, .form-container .form-layout {
    margin: auto;
    max-width: 1200px; }
  .form-container h1 {
    padding: 30px 0;
    margin: 0 auto;
    border: none; }
  .form-container .form-back {
    position: absolute;
    opacity: 0;
    left: calc(50% - 750px);
    top: calc(50% - 32px);
    transition: 0.3s all ease;
    animation-name: reveal-back-link;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
    .form-container .form-back::after {
      content: '';
      position: absolute;
      display: block;
      width: 64px;
      height: 64px;
      left: 20px;
      border-radius: 50%;
      transition: 0.3s all ease;
      transform: rotateY(45deg); }
    .form-container .form-back i {
      position: absolute;
      z-index: 10;
      font-size: 48px;
      line-height: 64px;
      text-align: center;
      width: 64px;
      height: 64px; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      left: 0;
      transform: rotateY(0); }
    .form-container .form-back:active::after {
      transition: none; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px; }
  .form-footer div:only-child {
    margin-left: auto; }

.form-actions-info {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  margin: 0 1em;
  white-space: nowrap; }
  .form-actions-info i.material-icons {
    padding: 0 0.3em; }

.form-buttons {
  text-align: right; }
  .form-buttons button {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    width: auto;
    margin-left: 10px;
    padding: 0 30px; }
    .form-buttons button[disabled] {
      box-shadow: none; }
    .form-buttons button::-moz-focus-inner {
      border: none; }
    .form-buttons button::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    .form-buttons button:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      .form-buttons button:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }

.form-errors {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .form-errors li {
    margin: 2px 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .form-errors li strong {
      display: flex;
      align-items: center;
      color: white;
      padding: 0.3em 0.5em;
      margin-right: 1em; }
      .form-errors li strong i {
        padding-right: 0.3em; }

.form-layout .info-bar {
  margin: 15px;
  padding: 15px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .info-bar strong {
    font-weight: 400; }

.form-layout .form-grid {
  display: flex;
  flex-direction: column; }

.form-layout .form-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }
  .form-layout .form-box .title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 5px;
    height: 34px;
    line-height: 34px; }
    .form-layout .form-box .title h2 {
      flex: 1;
      padding-left: 8px;
      margin: 0;
      font-weight: 800;
      font-size: 1em;
      text-transform: uppercase; }
    .form-layout .form-box .title .side-action {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      height: 24px;
      margin-left: 5px; }
      .form-layout .form-box .title .side-action i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .title .side-action:hover, .form-layout .form-box .title .side-action:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .title .side-action:active {
        opacity: 1; }
      .form-layout .form-box .title .side-action[disabled] {
        opacity: 0.3;
        background: none; }
  .form-layout .form-box .content {
    flex-grow: 1;
    padding: 0 15px 15px 15px; }
    .form-layout .form-box .content:first-child {
      padding-top: 15px; }
  .form-layout .form-box .info-bar {
    margin: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none; }
  .form-layout .form-box .container {
    display: flex; }
    .form-layout .form-box .container .content {
      flex: 1;
      width: 0; }
    .form-layout .form-box .container .side-actions {
      display: flex;
      align-items: center;
      justify-content: center; }
      .form-layout .form-box .container .side-actions a {
        display: inline-block;
        margin: 0;
        padding: 5px;
        opacity: 0.7;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
        height: 24px;
        margin: 10px; }
        .form-layout .form-box .container .side-actions a i {
          vertical-align: top;
          transition: all 0.5s ease;
          display: inline-block;
          width: 24px;
          height: 24px;
          overflow: hidden; }
        .form-layout .form-box .container .side-actions a:hover, .form-layout .form-box .container .side-actions a:focus {
          opacity: 1;
          text-decoration: none; }
        .form-layout .form-box .container .side-actions a:active {
          opacity: 1; }
        .form-layout .form-box .container .side-actions a[disabled] {
          opacity: 0.3;
          background: none; }
  .form-layout .form-box .alt p {
    margin: 0.5em;
    padding: 0; }
  .form-layout .form-box .alt-actions {
    display: flex; }
    .form-layout .form-box .alt-actions a {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 5px 7px;
      height: 24px; }
      .form-layout .form-box .alt-actions a i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .alt-actions a:hover, .form-layout .form-box .alt-actions a:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .alt-actions a:active {
        opacity: 1; }
      .form-layout .form-box .alt-actions a[disabled] {
        opacity: 0.3;
        background: none; }
      .form-layout .form-box .alt-actions a i.material-icons {
        margin-right: 5px; }

.form-layout .form-inline-box {
  margin: 15px; }
  .form-layout .form-inline-box .title h3 {
    flex: 1;
    padding: 2px 0 0 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center; }

.form-layout .form-expanssion {
  margin: 15px 0;
  z-index: 1; }
  .form-layout .form-expanssion .form-box {
    margin: 0 15px;
    transition: 0.2s margin ease;
    position: relative;
    box-shadow: none; }
    .form-layout .form-expanssion .form-box::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .form-expanssion .form-box.expanded {
    margin: 30px 15px; }
  .form-layout .form-expanssion .form-box:first-child {
    margin-top: 0; }
  .form-layout .form-expanssion .form-box:last-child {
    margin-bottom: 0; }

.form-layout .row {
  display: flex;
  flex-direction: row;
  width: 100%; }

.form-layout .column {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .form-layout .column .column-spacer {
    height: 100%; }

.form-layout .form-input {
  flex: 1;
  position: relative;
  padding: 3px 0;
  min-width: 0; }
  .form-layout .form-input.inlined {
    margin: 0;
    flex-grow: 0;
    min-width: auto; }
  .form-layout .form-input > * {
    margin: 0 10px; }
  .form-layout .form-input > input, .form-layout .form-input > select {
    width: calc(100% - 20px); }
  .form-layout .form-input > kn-control-messages {
    margin: -18px 0 0 15px; }

.form-layout .flex-1 {
  flex: 1; }

.form-layout .flex-2 {
  flex: 2; }

.form-layout .flex-3 {
  flex: 3; }

.form-layout .flex-4 {
  flex: 4; }

.form-layout .flex-5 {
  flex: 5; }

.form-layout .flex-6 {
  flex: 6; }

.form-layout .flex-start {
  justify-content: flex-start; }

.form-layout .flex-end {
  justify-content: flex-end; }

.form-layout .row.flex-reverse {
  flex-direction: row-reverse; }

.form-layout .column.flex-reverse {
  flex-direction: column-reverse; }

.form-layout .popover {
  position: relative;
  height: 34px; }
  .form-layout .popover kn-menu-activator {
    cursor: pointer; }
  .form-layout .popover .side-action {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    height: 24px; }
    .form-layout .popover .side-action i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .form-layout .popover .side-action:hover, .form-layout .popover .side-action:focus {
      opacity: 1;
      text-decoration: none; }
    .form-layout .popover .side-action:active {
      opacity: 1; }
    .form-layout .popover .side-action[disabled] {
      opacity: 0.3;
      background: none; }

kn-attached-portal .kn-form-layout-menu-content {
  z-index: 200;
  position: absolute;
  left: calc(100% - 490px);
  top: 40px;
  width: 500px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    font-weight: normal;
    margin: 0;
    padding: 15px 15px 15px 20px; }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:focus {
      opacity: 1;
      text-decoration: none; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:active {
      opacity: 1; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close[disabled] {
      opacity: 0.3;
      background: none; }
  kn-attached-portal .kn-form-layout-menu-content [hidden] {
    display: none; }
  kn-attached-portal .kn-form-layout-menu-content::before {
    position: absolute;
    left: calc(100% - 37px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

.form-slots-table {
  width: 100%;
  table-layout: fixed;
  margin-top: 2em;
  border-collapse: collapse; }
  .form-slots-table th {
    padding: 5px;
    font-weight: 400;
    position: relative; }
    .form-slots-table th::before {
      content: '';
      position: absolute;
      display: block;
      width: calc(100% - 22px);
      height: 100%;
      border: 1px solid transparent;
      top: 0;
      left: 11px; }
    .form-slots-table th.disabled::before {
      background-color: transparent; }
  .form-slots-table td {
    padding: 10px 0; }
  .form-slots-table caption {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1; }

kn-sticky.sticked > .grid-panel {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.grid-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px; }
  .grid-panel .selector {
    width: 200px; }
  .grid-panel .actions, .grid-panel kn-grid-actions {
    display: flex;
    flex-grow: 1;
    font-size: 0; }
  .grid-panel .widgets {
    display: flex; }
    .grid-panel .widgets > *:not(:last-child) {
      margin-right: 10px; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    padding: 5px 7px;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    display: inline-block;
    line-height: 24px; }
    .grid-panel .selector a i, .grid-panel .actions a i, .grid-panel kn-grid-actions a i {
      vertical-align: top;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      opacity: 1; }
      .grid-panel .selector a:hover i, .grid-panel .actions a:hover i, .grid-panel kn-grid-actions a:hover i {
        opacity: 1; }
    .grid-panel .selector a:hover, .grid-panel .selector a:focus, .grid-panel .selector a:active, .grid-panel .actions a:hover, .grid-panel .actions a:focus, .grid-panel .actions a:active, .grid-panel kn-grid-actions a:hover, .grid-panel kn-grid-actions a:focus, .grid-panel kn-grid-actions a:active {
      text-decoration: none; }

kn-grid-preset kn-menu {
  display: block;
  position: relative;
  width: 300px; }
  kn-grid-preset kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-preset kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-preset kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-preset kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-preset kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-preset kn-menu kn-menu-activator {
    display: block;
    opacity: 1; }

kn-grid-preset kn-menu-activator > div {
  padding: 0;
  margin: 0;
  line-height: 24px;
  display: flex;
  align-items: center; }
  kn-grid-preset kn-menu-activator > div[hidden] {
    display: none; }
  kn-grid-preset kn-menu-activator > div i {
    padding: 0; }
  kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
      opacity: 1; }
  kn-grid-preset kn-menu-activator > div span {
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    kn-grid-preset kn-menu-activator > div span.template-name {
      font-style: normal; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.ownerUid {
        font-size: 80%;
        font-style: italic; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.material-icons {
        font-size: 125%;
        vertical-align: middle; }
  kn-grid-preset kn-menu-activator > div input {
    height: 34px;
    padding: 0 5px;
    width: calc(100% - 10px);
    min-width: 0;
    border: none;
    background-color: transparent;
    font-family: Source Sans Pro;
    font-size: 16px;
    outline: none; }
  kn-grid-preset kn-menu-activator > div a {
    opacity: 0.7; }

kn-grid-preset kn-menu-content kn-select {
  width: 100%; }

kn-grid-preset kn-menu-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-grid-preset kn-menu-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-grid-preset kn-menu-content li:not(.user-select) span, kn-grid-preset kn-menu-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-grid-preset kn-menu-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  width: 100%; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-grid-query-filter kn-menu {
  display: block;
  position: relative; }
  kn-grid-query-filter kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-query-filter kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-query-filter kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-query-filter kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 5px 7px; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50px;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
      position: absolute;
      left: calc(50% - 10px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-attached-portal .kn-grid-menu-content {
    position: absolute;
    z-index: 20;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-attached-portal .kn-grid-menu-content::before {
      position: absolute;
      left: calc(100% - 100px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 0; }
    kn-grid-query-filter kn-menu kn-menu-activator > * {
      height: 24px;
      padding: 5px;
      transition: color 0.5s ease; }
      kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
        opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator > span {
      display: flex; }
    kn-grid-query-filter kn-menu kn-menu-activator > a {
      opacity: 0.7; }

kn-grid-reset {
  display: block;
  position: relative;
  padding: 0; }
  kn-grid-reset.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-reset kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-reset kn-menu-activator[hidden] {
      display: none; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-reset kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-reset kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-reset kn-menu-activator {
    padding: 0 7px; }
    kn-grid-reset kn-menu-activator i {
      padding: 5px 0; }
      kn-grid-reset kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-grid-reset > *:not(.disabled) {
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus {
      opacity: 1; }
  kn-grid-reset > span {
    display: flex; }
  kn-grid-reset > a {
    opacity: 0.7;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
    kn-grid-reset > a.disabled {
      cursor: default;
      pointer-events: none; }

kn-grid-search {
  position: relative;
  height: 50px;
  margin: -8px -8px -8px 0; }
  kn-grid-search input[type='search'] {
    border: none;
    padding: 0 10px 0 40px;
    height: 100%;
    width: 0;
    vertical-align: top;
    transition: 0.3s all ease; }
    kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
      width: 250px;
      outline: none; }
  kn-grid-search::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center; }

header.liner {
  height: 80px;
  display: flex;
  justify-content: space-between;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  header.liner > div {
    display: flex;
    align-items: center; }
  header.liner .logo {
    outline: none; }
    header.liner .logo img {
      margin: 10px; }
  header.liner button.main-action {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    margin: 0 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
    header.liner button.main-action[disabled] {
      box-shadow: none; }
    header.liner button.main-action::-moz-focus-inner {
      border: none; }
    header.liner button.main-action::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    header.liner button.main-action:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      header.liner button.main-action:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
  header.liner kn-menu {
    z-index: 2;
    position: relative; }
    header.liner kn-menu.expanded {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
    header.liner kn-menu kn-menu-activator {
      display: flex;
      padding: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
      outline: none; }
    header.liner kn-menu kn-menu-content {
      position: absolute;
      min-width: 100%;
      left: 0;
      margin-top: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      z-index: 100; }
      header.liner kn-menu kn-menu-content[hidden] {
        opacity: 0;
        margin-top: -10px;
        transition: all 0.3s ease; }
      header.liner kn-menu kn-menu-content ul {
        padding: 0;
        margin: 0;
        list-style-type: none; }
        header.liner kn-menu kn-menu-content ul li {
          padding: 0;
          margin: 0; }
      header.liner kn-menu kn-menu-content a {
        padding: 10px;
        display: block;
        white-space: nowrap;
        transition: all 0.3s ease; }
        header.liner kn-menu kn-menu-content a:hover {
          text-decoration: none; }

kn-attached-portal .header-liner.kn-menu-content {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 100; }
  kn-attached-portal .header-liner.kn-menu-content[hidden] {
    opacity: 0;
    margin-top: -10px;
    transition: all 0.3s ease; }
  kn-attached-portal .header-liner.kn-menu-content ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    kn-attached-portal .header-liner.kn-menu-content ul li {
      padding: 0;
      margin: 0; }
  kn-attached-portal .header-liner.kn-menu-content a {
    padding: 10px;
    display: block;
    white-space: nowrap;
    transition: all 0.3s ease; }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      text-decoration: none; }

header.liner .database-menu::before, header.liner .database-menu::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 1px;
  height: 40px;
  transition: top 0.5s ease; }

header.liner .database-menu::before {
  left: 0; }

header.liner .database-menu::after {
  right: 0; }

header.liner .database-menu.expanded::before, header.liner .database-menu.expanded::after, header.liner .database-menu:hover::before, header.liner .database-menu:hover::after {
  top: -50px; }

header.liner .database-menu.database-menu-hidden {
  display: none; }

header.liner .database-menu kn-database-selector {
  border: none; }
  header.liner .database-menu kn-database-selector .filter {
    font-size: 0; }
    header.liner .database-menu kn-database-selector .filter .clear {
      padding: 0 20px; }
    header.liner .database-menu kn-database-selector .filter:hover .clear {
      background-image: url("../kn-theme-strio/img/clear.svg"); }
  header.liner .database-menu kn-database-selector ul {
    max-height: 70%; }
    header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
      left: 0; }
    header.liner .database-menu kn-database-selector ul li a:hover {
      text-decoration: none; }

header.liner .database-menu kn-menu-activator {
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding-right: 40px; }
  header.liner .database-menu kn-menu-activator strong {
    display: block;
    font-weight: normal; }
  header.liner .database-menu kn-menu-activator .description {
    display: block; }
  header.liner .database-menu kn-menu-activator::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 32px;
    width: 16px;
    height: 16px;
    mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    transform: rotate(-90deg);
    transition: transform 0.5s ease; }
  header.liner .database-menu kn-menu-activator:hover::after {
    transform: rotate(0deg); }

header.liner .database-menu.expanded kn-menu-activator::after {
  transform: rotate(-180deg); }

header.liner > div:first-child, header.liner kn-navbar {
  flex: 1; }

header.liner nav > ul, header.liner kn-navbar > ul {
  height: 80px;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  display: flex; }
  header.liner nav > ul > li, header.liner kn-navbar > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
      display: block;
      margin: 10px 3px;
      height: 58px;
      padding: 0 18px;
      line-height: 58px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      header.liner nav > ul > li > a, header.liner nav > ul > li > a:hover, header.liner nav > ul > li > a:focus, header.liner nav > ul > li > kn-menu-activator, header.liner nav > ul > li > kn-menu-activator:hover, header.liner nav > ul > li > kn-menu-activator:focus, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > a:focus, header.liner kn-navbar > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > kn-menu-activator:focus {
        text-decoration: none; }

header.liner kn-navbar kn-menu {
  margin: 10px 3px;
  height: 60px;
  padding: 0 !important; }

header.liner kn-navbar kn-menu-activator {
  height: 60px;
  padding: 0 8px;
  align-items: center; }

kn-attached-portal .kn-navbar-expansion ul {
  margin: 0 10px;
  padding: 0;
  list-style-type: none; }
  kn-attached-portal .kn-navbar-expansion ul > li {
    margin: 0;
    padding: 0; }
    kn-attached-portal .kn-navbar-expansion ul > li > a {
      display: block;
      padding: 0 18px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      kn-attached-portal .kn-navbar-expansion ul > li > a, kn-attached-portal .kn-navbar-expansion ul > li > a:hover, kn-attached-portal .kn-navbar-expansion ul > li > a:focus {
        text-decoration: none; }

header.liner .user-menu kn-menu-activator {
  min-width: 120px;
  flex-direction: row-reverse;
  align-items: center; }
  header.liner .user-menu kn-menu-activator img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    background-image: url("../img/noavatar.svg"); }
  header.liner .user-menu kn-menu-activator kn-menu-content {
    right: 0; }

header.liner .user-menu kn-menu-content {
  right: 0;
  left: initial; }
  header.liner .user-menu kn-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-attached-portal .user-menu-content {
  right: 0;
  left: initial; }
  kn-attached-portal .user-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-input label, kn-input [kn-hint] {
  font-size: 14px; }

kn-input [kn-prefix], kn-input [kn-suffix] {
  display: flex; }

kn-input .kn-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-input .kn-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input .kn-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input.disabled .kn-input-container, kn-input.readonly .kn-input-container {
  border-bottom-style: dotted; }

kn-input.focused .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.focused .kn-input-underline::before, kn-input.focused .kn-input-underline::after {
  z-index: 111; }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.ng-touched.ng-pending .kn-input-underline::before, kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::after {
  top: -4px;
  height: 5px; }

kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-input input {
  min-height: 24px; }
  kn-input input:-webkit-autofill {
    -webkit-animation-name: kill-autofill;
    -webkit-animation-fill-mode: both; }

@-webkit-keyframes kill-autofill {
  to {
    background: transparent; } }

kn-date-input label, kn-date-input [kn-hint] {
  font-size: 14px; }

kn-date-input [kn-prefix], kn-date-input [kn-suffix] {
  display: flex; }

kn-date-input .kn-date-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-date-input .kn-date-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input .kn-date-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input.disabled .kn-date-input-container, kn-date-input.readonly .kn-date-input-container {
  border-bottom-style: dotted; }

kn-date-input.focused .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.focused .kn-date-input-underline::before, kn-date-input.focused .kn-date-input-underline::after {
  z-index: 111; }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before, kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::after {
  top: -4px;
  height: 5px; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-date-input input {
  min-height: 24px;
  text-align: right; }

kn-date-input .input-button i.material-icons {
  opacity: 0.5;
  transition: 0.3s opacity ease; }
  kn-date-input .input-button i.material-icons:hover, kn-date-input .input-button i.material-icons:focus {
    opacity: 1; }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  opacity: 0.5; }

kn-date-input .input-button > a {
  display: flex;
  text-decoration: none; }

@-moz-document url-prefix() {
  kn-date-input input {
    clip-path: inset(0 25px 0 0);
    margin-right: -20px !important;
    min-width: 70px !important; } }

kn-kcuni-settings {
  display: block;
  margin: 20px; }
  kn-kcuni-settings p strong {
    font-weight: 400; }
  kn-kcuni-settings .settings {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
    margin: 0 -10px 10px; }
    kn-kcuni-settings .settings kn-input {
      flex: 1; }
    kn-kcuni-settings .settings button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      margin-left: 10px; }
      kn-kcuni-settings .settings button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      kn-kcuni-settings .settings button:hover, kn-kcuni-settings .settings button:focus {
        opacity: 1;
        text-decoration: none; }
      kn-kcuni-settings .settings button:active {
        opacity: 1; }
      kn-kcuni-settings .settings button[disabled] {
        opacity: 0.3;
        background: none; }
  kn-kcuni-settings .message {
    padding: 10px;
    vertical-align: center; }
    kn-kcuni-settings .message i {
      vertical-align: bottom; }
  kn-kcuni-settings .doc-link {
    display: block;
    padding-top: 10px;
    margin-bottom: 20px;
    float: left; }
    kn-kcuni-settings .doc-link.app-link {
      float: right; }

.app-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }
  .app-loading-screen p {
    padding: 5px 10px;
    margin: 0;
    border-radius: 3px; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 600px;
  font-family: 'Source Sans Pro';
  font-size: 16px; }

input {
  font-family: 'Source Sans Pro';
  font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo 2'; }

h1 {
  font-weight: 300;
  font-size: 48px;
  padding-bottom: 10px; }

a {
  text-decoration: none; }

a:hover, a:focus {
  text-decoration: underline; }

kn-app-main {
  display: block; }

[knBackgroundFocusable] {
  outline: none; }

.country-display,
kn-select.country .option,
kn-select.country .kn-option-content {
  height: 24px;
  line-height: 24px; }
  .country-display img,
  kn-select.country .option img,
  kn-select.country .kn-option-content img {
    width: 24px;
    height: 16px;
    margin: 4px 4px 4px 0;
    vertical-align: bottom;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.flat-button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }
  .flat-button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  .flat-button:hover, .flat-button:focus {
    opacity: 1;
    text-decoration: none; }
  .flat-button:active {
    opacity: 1; }
  .flat-button[disabled] {
    opacity: 0.3;
    background: none; }

.flat-table {
  width: 100%;
  border-collapse: collapse; }
  .flat-table tbody tr {
    height: 55px; }
  .flat-table tbody td {
    transition: 0.3s background-color ease;
    padding: 10px; }
  .flat-table thead td {
    padding: 10px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7; }
  .flat-table .actions {
    text-align: right; }
    .flat-table .actions button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer; }
      .flat-table .actions button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .flat-table .actions button:hover, .flat-table .actions button:focus {
        opacity: 1;
        text-decoration: none; }
      .flat-table .actions button:active {
        opacity: 1; }
      .flat-table .actions button[disabled] {
        opacity: 0.3;
        background: none; }

kn-modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }

kn-modal.confirmation-dialog .overlay {
  display: flex;
  align-items: center;
  justify-content: center; }
  kn-modal.confirmation-dialog .overlay.kn-enter, kn-modal.confirmation-dialog .overlay.kn-leave {
    transition: 0.3s opacity ease; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container, kn-modal.confirmation-dialog .overlay.kn-leave .container {
      transition: 0.3s transform ease, 0.3s margin-top ease-out; }
  kn-modal.confirmation-dialog .overlay.kn-enter {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container {
      transform: perspective(1000px) rotate3d(1, 0, 0, 60deg); }
  kn-modal.confirmation-dialog .overlay.kn-leave, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active {
    opacity: 1; }
    kn-modal.confirmation-dialog .overlay.kn-leave .container, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active .container {
      transform: scale(1); }
  kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active .container {
      transform: scale(0.8);
      margin-top: 100px; }
  kn-modal.confirmation-dialog .overlay .container {
    overflow-y: auto;
    min-width: 300px;
    max-width: 750px;
    min-height: 200px;
    display: flex;
    flex-direction: column; }
  kn-modal.confirmation-dialog .overlay .content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; }
    kn-modal.confirmation-dialog .overlay .content span {
      white-space: pre-line;
      text-align: center;
      margin-top: 10px; }
  kn-modal.confirmation-dialog .overlay .buttons {
    display: flex; }
    kn-modal.confirmation-dialog .overlay .buttons button {
      position: relative;
      flex: 1;
      padding: 15px;
      min-width: 150px;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.5s ease, background-color 0.5s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        content: '';
        width: 60%;
        height: 3px;
        position: absolute;
        display: block;
        top: 0;
        left: 20%;
        opacity: 0.3; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover::before {
        opacity: 1; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        transition: color 0.2s ease, background-color 0.2s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button:active {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
        padding: 16px 15px 14px 15px; }

kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-options-container .kn-options-container-viewport {
    max-height: 310px; }
  kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-options-container .kn-options-container-filter .clear::before, kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-select.focused kn-options-container .kn-options-container-viewport, kn-input.focused kn-options-container .kn-options-container-viewport {
  z-index: 1000; }

kn-optgroup > strong {
  text-transform: uppercase; }

kn-option:not(.disabled):hover {
  transition: none; }

kn-option .kn-option-selector {
  transition: 0.3s color ease; }

kn-attached-portal .kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-attached-portal .kn-options-container .kn-options-container-viewport {
    max-height: 310px;
    overflow-y: scroll; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before, kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-attached-portal .kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-ownership-display > span {
  padding: 4px;
  margin: 0 4px;
  border-radius: 2px; }

kn-print-button kn-menu {
  display: block;
  position: relative; }
  kn-print-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-print-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-print-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-print-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-print-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-print-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-print-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-print-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-print-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-print-button kn-menu kn-menu-content {
    min-width: 200px; }
  kn-print-button kn-menu kn-spinner {
    left: 14px; }

kn-attached-portal .kn-menu-content.kn-print-button-content {
  min-width: 200px; }

kn-query-filter .query-filter > div[knFilterGroup] {
  display: block;
  min-width: 1000px;
  padding: 20px; }

kn-query-filter .filter-group {
  margin: auto; }
  kn-query-filter .filter-group .new-filter-actions {
    align-items: center;
    display: flex; }
    kn-query-filter .filter-group .new-filter-actions button {
      margin: 0 0 0 10px;
      padding: 5px 10px;
      border-radius: 3px;
      border: none;
      height: 30px;
      text-transform: uppercase; }
    kn-query-filter .filter-group .new-filter-actions .coalescing-operator {
      display: flex;
      align-items: center;
      margin-right: 10px; }
      kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
        content: '';
        display: block;
        flex: 1;
        height: 1px; }
    kn-query-filter .filter-group .new-filter-actions kn-select {
      width: 200px; }

kn-query-filter ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-query-filter li {
  padding: 10px 0 10px 10px; }

kn-query-filter li.boolean-operator {
  padding: 0;
  position: relative;
  height: 1px; }
  kn-query-filter li.boolean-operator span {
    position: absolute;
    display: block;
    padding: 0 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    top: -10px;
    left: 20px;
    text-transform: uppercase; }

kn-query-filter li[knFilterItem] {
  padding: 10px 0 10px 10px;
  display: flex;
  align-items: center;
  height: 40px; }
  kn-query-filter li[knFilterItem] > span {
    margin: 5px; }
  kn-query-filter li[knFilterItem]:first-child {
    padding-top: 0; }

kn-query-filter .filter-group .filter-name, kn-query-filter .filter-group .coalescing-operator {
  width: 225px; }

kn-query-filter .filter-group .coalescing-operator {
  width: 190px; }

kn-query-filter .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 205px; }

kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 170px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 185px; }

kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 150px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 165px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 130px; }

kn-query-filter .filter-name input {
  font-weight: bold; }

kn-query-filter .filter-operator {
  width: 150px; }
  kn-query-filter .filter-operator kn-input input {
    text-align: center; }
  kn-query-filter .filter-operator > * {
    width: 100%; }

kn-query-filter .filter-value {
  flex: 1; }
  kn-query-filter .filter-value .presenter {
    flex: 1;
    display: flex;
    align-items: center; }
    kn-query-filter .filter-value .presenter kn-input, kn-query-filter .filter-value .presenter kn-select {
      flex: 1; }
    kn-query-filter .filter-value .presenter kn-date-input span.required {
      display: none; }
    kn-query-filter .filter-value .presenter > span {
      margin: 0 10px; }
      kn-query-filter .filter-value .presenter > span:first-child {
        margin-left: 0; }

kn-query-filter .filter-actions {
  width: 70px;
  text-align: right; }

kn-query-filter .filter-actions button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  height: 34px; }
  kn-query-filter .filter-actions button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  kn-query-filter .filter-actions button:hover, kn-query-filter .filter-actions button:focus {
    opacity: 1;
    text-decoration: none; }
  kn-query-filter .filter-actions button:active {
    opacity: 1; }
  kn-query-filter .filter-actions button[disabled] {
    opacity: 0.3;
    background: none; }

kn-query-filter .footer {
  padding: 20px;
  text-align: right;
  display: flex; }
  kn-query-filter .footer button {
    padding: 5px 10px;
    margin-left: 20px;
    border-radius: 3px;
    border: none;
    height: 30px;
    text-transform: uppercase; }
  kn-query-filter .footer .left {
    text-align: left;
    flex: 1; }
    kn-query-filter .footer .left button {
      margin-left: 0;
      margin-right: 20px; }

kn-query-filter .filter-placeholder {
  width: 400px;
  margin: 30px auto 50px auto;
  text-align: center; }
  kn-query-filter .filter-placeholder span.placeholder {
    display: block; }
  kn-query-filter .filter-placeholder > i.material-icons {
    font-size: 150px; }
  kn-query-filter .filter-placeholder p {
    margin-top: -10px;
    margin-bottom: 50px;
    font-size: 24px;
    display: none; }
  kn-query-filter .filter-placeholder kn-select .kn-select-container {
    padding: 7px;
    transition: 0.3s all ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:hover {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
      transition: none;
      box-shadow: none; }

kn-radio input[type='radio'] + .kn-radio-box::before {
  border-radius: 50%; }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border-radius: 50%;
  transition: 0.3s border-color ease; }

kn-radio .kn-radio-mark {
  transition: 0.2s border linear; }

kn-radio .kn-radio-box, kn-radio label {
  transition: 0.3s color ease; }

kn-select label, kn-select [kn-hint] {
  font-size: 14px; }

kn-select [kn-prefix], kn-select [kn-suffix] {
  display: flex; }

kn-select .kn-select-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-select .kn-select-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select .kn-select-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select.disabled .kn-select-container, kn-select.readonly .kn-select-container {
  border-bottom-style: dotted; }

kn-select.focused .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.focused .kn-select-underline::before, kn-select.focused .kn-select-underline::after {
  z-index: 111; }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.ng-touched.ng-pending .kn-select-underline::before, kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::after {
  top: -4px;
  height: 5px; }

kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-select .kn-select-header {
  line-height: 24px; }
  kn-select .kn-select-header > * {
    min-height: 24px; }
  kn-select .kn-select-header .separator {
    padding-right: 0.3em; }
  kn-select .kn-select-header .option {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

kn-select.disabled .kn-select-header {
  pointer-events: none; }

kn-spinner {
  position: absolute;
  margin: 0 auto;
  width: 36px; }
  kn-spinner:before {
    content: '';
    display: block;
    padding-top: 100%; }
  kn-spinner .circular {
    animation: strio-spinner-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  kn-spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: strio-spinner-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: square;
    stroke-width: 8px; }

@keyframes strio-spinner-rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes strio-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

kn-tabs.boxlist div.tabs-viewport {
  margin-top: 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }

kn-tabs.boxlist div.tabs-labels ul {
  width: 100%; }

kn-tabs.boxlist div.tabs-labels li a {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  width: 170px;
  height: 150px !important;
  transition: 0.3s color ease; }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }

kn-tabs.boxlist div.tabs-labels li.active a {
  border-radius: 5px; }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    position: absolute;
    left: calc(50% - 15px);
    bottom: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; }

kn-tabs.notebook div.tabs-labels li a {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  transition: 0.3s color ease; }
  kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }
  kn-tabs.notebook div.tabs-labels li a::before {
    content: '';
    display: block;
    position: absolute;
    width: 80%;
    height: 4px;
    left: 10%;
    top: -10px;
    opacity: 0;
    z-index: 10;
    transform: scale(0.8);
    transition: 0.3s all ease; }
  kn-tabs.notebook div.tabs-labels li a:hover::before, kn-tabs.notebook div.tabs-labels li a:focus::before {
    opacity: 1;
    top: 0;
    transform: scale(1); }

kn-tabs.notebook div.tabs-labels li.active a::before {
  opacity: 1;
  top: 0;
  transform: scale(1);
  width: 100%;
  left: 0; }

kn-textarea label, kn-textarea [kn-hint] {
  font-size: 14px; }

kn-textarea [kn-prefix], kn-textarea [kn-suffix] {
  display: flex; }

kn-textarea .kn-textarea-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-textarea .kn-textarea-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea .kn-textarea-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea.disabled .kn-textarea-container, kn-textarea.readonly .kn-textarea-container {
  border-bottom-style: dotted; }

kn-textarea.focused .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.focused .kn-textarea-underline::before, kn-textarea.focused .kn-textarea-underline::after {
  z-index: 111; }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before, kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::after {
  top: -4px;
  height: 5px; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-textarea {
  height: 100%;
  display: flex !important;
  flex-direction: column; }
  kn-textarea .kn-textarea-container {
    flex: 1; }
  kn-textarea textarea {
    height: calc(100% - 20px);
    resize: none; }

kn-timeline {
  position: relative; }
  kn-timeline::before, kn-timeline::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none; }
  kn-timeline::before {
    left: 0; }
  kn-timeline::after {
    right: 0; }
  kn-timeline .time-viewport {
    overflow: hidden; }
  kn-timeline .time-container {
    display: flex;
    margin: 100px 0 50px 0; }
    kn-timeline .time-container > span {
      flex-shrink: 0; }
  kn-timeline .time-segment {
    font-size: 0;
    height: 3px;
    width: calc(50% - 2px); }
  kn-timeline .time-mark {
    position: relative;
    width: 3px;
    height: 3px; }
    kn-timeline .time-mark a {
      position: absolute;
      width: 13px;
      height: 13px;
      top: -5px;
      left: -5px;
      border-radius: 50%;
      z-index: 1;
      outline: none; }
      kn-timeline .time-mark a.selected::after {
        content: '';
        position: absolute;
        display: block;
        width: 23px;
        height: 23px;
        left: -7px;
        top: -7px;
        border-radius: 50%; }
      kn-timeline .time-mark a::before {
        content: '';
        position: absolute;
        display: block;
        width: 53px;
        height: 53px;
        top: -20px;
        left: -20px;
        border-radius: 50%;
        z-index: -1; }
      kn-timeline .time-mark a .date {
        position: absolute;
        display: block;
        white-space: nowrap;
        text-align: center;
        left: 7px;
        top: -68px;
        font-weight: bold;
        transform: translateX(-50%); }
      kn-timeline .time-mark a .year {
        display: block;
        font-weight: normal; }
    kn-timeline .time-mark.pin a {
      width: 9px;
      height: 9px;
      top: -7px;
      left: -7px; }
      kn-timeline .time-mark.pin a::before {
        top: -22px;
        left: -22px; }
      kn-timeline .time-mark.pin a.selected::after {
        left: -9px;
        top: -9px; }
      kn-timeline .time-mark.pin a .date {
        left: 5px;
        top: -70px; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
    kn-timeline .time-mark.today::before {
      content: '';
      position: absolute;
      display: block;
      width: 1px;
      height: 63px;
      left: 1px;
      top: -30px;
      opacity: 0.5; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
  kn-timeline .time-mark.today a .date {
    top: -60px; }
  kn-timeline kn-datepicker .viewport {
    top: -20px; }
  kn-timeline kn-datepicker.calendar-mark .viewport {
    top: 5px; }

kn-toast > div {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  left: 50px;
  bottom: 50px;
  z-index: 1000;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave {
    transition: 0.3s all ease; }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave.kn-leave-active {
    left: 35px;
    opacity: 0; }
  kn-toast > div.kn-leave, kn-toast > div.kn-enter.kn-enter-active {
    left: 50px;
    opacity: 1; }
  kn-toast > div .content {
    display: flex;
    flex-direction: column;
    padding: 15px 20px; }
    kn-toast > div .content span, kn-toast > div .content strong {
      display: block; }
  kn-toast > div a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-align: center; }
    kn-toast > div a, kn-toast > div a:hover, kn-toast > div a:focus, kn-toast > div a:active {
      text-decoration: none; }

kn-audit-display {
  color: rgba(0, 0, 0, 0.5); }
  kn-audit-display strong {
    background-color: rgba(0, 0, 0, 0.07); }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox input[type='checkbox']:focus + .kn-checkbox-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked):hover + .kn-checkbox-box::after, kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked) + .kn-checkbox-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-checkbox.disabled input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled input[type='checkbox']:not(:checked) + .kn-checkbox-box::after {
  background-color: transparent !important; }

kn-checkbox.disabled.indeterminate .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled label, kn-checkbox.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox.ng-touched.ng-invalid .kn-checkbox-box::after {
  border-color: #c04060; }

kn-checkbox.ng-touched.ng-invalid input[type='checkbox']:checked + .kn-checkbox-box::after, kn-checkbox.ng-touched.ng-invalid.indeterminate .kn-checkbox-box::after {
  background-color: #c04060; }

app-print-template-edit {
  background-color: #ffffff; }
  app-print-template-edit > kn-resizable-container .preview {
    border-left: 1px solid rgba(0, 0, 0, 0.15); }
  app-print-template-edit .preview div.tabs-viewport {
    background-color: #f9f7f6; }
  app-print-template-edit kn-codemirror {
    background-color: #ffffff; }
  app-print-template-edit kn-tabs a.sidepanel {
    color: #000000;
    color: rgba(0, 0, 0, 0.8); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):hover, app-print-template-edit kn-tabs a.sidepanel:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-tab.home i.banner {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-tab .no-print-context-placeholder {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-activator {
    color: #000000;
    color: #c04060; }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):hover, app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-menu.errors kn-menu-content {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.8); }

kn-roles-table .role-permissions table thead th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-roles-table .role-permissions table tbody.permissions-matrix td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); }

kn-roles-table .role-permissions table tbody.permissions-matrix tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

kn-roles-table .role-permissions .actions button {
  color: #000000; }
  kn-roles-table .role-permissions .actions button:not([disabled]):hover, kn-roles-table .role-permissions .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-roles-table .role-permissions .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-permission-actions-select kn-menu-content {
  background-color: #ffffff; }
  kn-permission-actions-select kn-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-user-edit table.user-roles tbody.user-roles-table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles tr.invalid td {
  background-color: rgba(192, 64, 96, 0.15); }

kn-user-edit table.user-roles thead tr:last-child td {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-user-edit table.user-roles tbody.user-roles-table tr td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles td.actions button {
  color: #000000; }
  kn-user-edit table.user-roles td.actions button:not([disabled]):hover, kn-user-edit table.user-roles td.actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-user-edit table.user-roles td.actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-control-messages > div {
  color: #c04060; }

app-database-manage kn-tabs .tab-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

app-database-manage kn-tabs a i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

app-database-manage kn-tabs li.active a i.material-icons, app-database-manage kn-tabs a:hover i.material-icons, app-database-manage kn-tabs a:focus i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

app-database-manage kn-tabs kn-tab .select-database {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15); }

app-database-manage kn-tabs kn-tab.kn-drag-over::after {
  background-color: rgba(255, 240, 216, 0.3);
  border: 1px dashed #ff9800; }

kn-datepicker .viewport {
  background-color: #ffffff; }
  kn-datepicker .viewport::before {
    border-bottom: 10px solid #f2f2f2; }
  kn-datepicker .viewport .header {
    background-color: #f2f2f2; }

kn-datepicker kn-date-header > *, kn-datepicker kn-time-header > * {
  color: #000000; }

kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a:hover {
  background-color: rgba(0, 0, 0, 0.1); }

kn-datepicker kn-date-header a:active, kn-datepicker kn-time-header a:active {
  background-color: rgba(0, 0, 0, 0.2); }

kn-datepicker kn-date-header a {
  color: rgba(0, 0, 0, 0.5); }

kn-datepicker kn-month-view th {
  color: rgba(0, 0, 0, 0.35); }

kn-datepicker kn-month-view td a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker kn-month-view td a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker kn-month-view td a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container .center {
  background-color: gray; }

kn-datepicker .picker-relative-container .gauge {
  background-color: rgba(0, 0, 0, 0.15); }

kn-datepicker .picker-relative-container li::before {
  background-color: #ffffff; }

kn-datepicker .picker-relative-container li.minor a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li.minor a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li.minor a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.minor::before {
  background-color: rgba(0, 0, 0, 0.8); }

kn-datepicker .picker-relative-container li:not(.minor) a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li:not(.minor) a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li:not(.minor) a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.major::before {
  background-color: #000000; }

kn-datepicker .period-selector a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .period-selector a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .period-selector a.selected {
    background-color: #805848;
    color: #ffffff; }

.kn-ripple-element {
  background-color: rgba(0, 0, 0, 0.05); }

kn-export-button kn-menu.expanded {
  background-color: #0b7244; }

kn-export-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-export-button kn-menu kn-menu-activator, kn-export-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

button.form-button, .form-input button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  button.form-button.danger, .form-input button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  button.form-button[disabled], .form-input button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  button.form-button::after, .form-input button::after {
    background-color: white; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    button.form-button:not([disabled]):hover.danger, button.form-button:not([disabled]):focus.danger, .form-input button:not([disabled]):hover.danger, .form-input button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    button.form-button:not([disabled]):active.danger, .form-input button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-container.heading::before, .form-container .form-loader-bar::before {
  background-color: rgba(128, 88, 72, 0.3); }

.form-container.heading::after, .form-container .form-loader-bar::after {
  background-color: #805848; }

.form-container.heading {
  background-color: #ffffff; }

.form-container .form-back {
  color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:hover, .form-container .form-back:focus {
    color: #ffffff; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      background-color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:active::after {
    background-color: rgba(0, 0, 0, 0.4); }

.form-actions-info {
  color: #c07000; }

.form-buttons button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  .form-buttons button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  .form-buttons button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  .form-buttons button::after {
    background-color: white; }
  .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    .form-buttons button:not([disabled]):hover.danger, .form-buttons button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  .form-buttons button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    .form-buttons button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-errors li {
  background-color: rgba(192, 64, 96, 0.2); }
  .form-errors li strong {
    background-color: #c04060; }

.form-layout .info-bar {
  color: rgba(255, 255, 255, 0.7);
  background-color: #10a060; }
  .form-layout .info-bar.error {
    background-color: #c04060; }
  .form-layout .info-bar strong {
    color: #ffffff; }

.form-layout .form-box {
  background-color: #ffffff; }
  .form-layout .form-box .title {
    color: #009688; }
    .form-layout .form-box .title .side-action {
      color: #000000; }
      .form-layout .form-box .title .side-action:not([disabled]):hover, .form-layout .form-box .title .side-action:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .title .side-action:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .container + .container {
    border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .form-layout .form-box .container .side-actions {
    border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .container .side-actions a {
      color: #000000; }
      .form-layout .form-box .container .side-actions a:not([disabled]):hover, .form-layout .form-box .container .side-actions a:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .container .side-actions a:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .alt {
    background-color: rgba(224, 192, 0, 0.1);
    border-top: 1px solid rgba(224, 192, 0, 0.3); }
  .form-layout .form-box .alt-actions a {
    color: #000000; }
    .form-layout .form-box .alt-actions a:not([disabled]):hover, .form-layout .form-box .alt-actions a:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .alt-actions a:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }

.form-layout .form-inline-box .title {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid rgba(0, 0, 0, 0.15) !important; }

.form-layout .form-inline-box .container {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(224, 192, 0, 0.1); }
  .form-layout .form-inline-box .container + .container {
    border-top: none; }

.form-layout .popover .side-action {
  color: #000000; }
  .form-layout .popover .side-action:not([disabled]):hover, .form-layout .popover .side-action:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-layout .popover .side-action:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-form-layout-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    color: #000000; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-form-layout-menu-content::before {
    border-bottom: 10px solid #ffffff; }

.form-slots-table th {
  color: rgba(0, 0, 0, 0.5); }
  .form-slots-table th::before {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-slots-table th.disabled::before {
    border: 1px solid rgba(0, 0, 0, 0.1); }

.form-slots-table caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

.grid-panel {
  background-color: #10a060; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    color: rgba(255, 255, 255, 0.7); }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-preset kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu kn-menu-activator, kn-grid-preset kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
  transition: color 0.5s ease; }
  kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-activator > div span {
  color: rgba(255, 255, 255, 0.5); }
  kn-grid-preset kn-menu-activator > div span.template-name {
    color: #ffd088; }

kn-grid-preset kn-menu-activator > div input {
  color: #ffffff; }
  kn-grid-preset kn-menu-activator > div input::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-activator > div a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content li:not(.user-select) span:hover, kn-grid-preset kn-menu-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-grid-preset kn-menu-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-grid-preset kn-menu-content kn-select kn-options-container, kn-grid-preset kn-menu-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span:hover, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-options-container, kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-grid-query-filter kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-query-filter kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-query-filter kn-menu kn-menu-activator, kn-grid-query-filter kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
    border-bottom: 10px solid #ffffff; }

kn-attached-portal .kn-grid-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-grid-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-grid-query-filter kn-menu kn-menu-activator {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-query-filter kn-menu kn-menu-activator em {
    color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-activator > * {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease; }
    kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator > span.template-name {
    color: #ffd088; }

kn-attached-portal .kn-menu-content.kn-grid-query-content {
  left: calc(50% - 900px);
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-menu-content.kn-grid-query-content::before {
    left: calc(50% + 375px); }

kn-grid-reset {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-reset.expanded {
    background-color: #0b7244; }
  kn-grid-reset:not(.expanded) kn-menu-activator:focus, kn-grid-reset kn-menu-activator:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset kn-menu-activator, kn-grid-reset kn-menu-activator i {
    color: rgba(255, 255, 255, 0.8); }
  kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i {
    color: #ffffff; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-button-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content) li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-attached-portal .kn-grid-button-content li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-attached-portal .kn-grid-button-content li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset > *:not(.disabled), kn-grid-reset a:not(.disabled) {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus, kn-grid-reset a:not(.disabled):hover, kn-grid-reset a:not(.disabled):focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-reset > *.disabled, kn-grid-reset a.disabled {
    color: rgba(255, 255, 255, 0.3); }

kn-grid-search input[type='search'] {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff; }
  kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
    background-color: rgba(0, 0, 0, 0.4); }
  kn-grid-search input[type='search']::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-search::after {
  background-color: #ffffff; }

header.liner .database-menu::before, header.liner .database-menu::after {
  background-color: rgba(255, 255, 255, 0.1); }

header.liner .database-menu kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  header.liner .database-menu kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  header.liner .database-menu kn-database-selector .filter input {
    color: #ffffff; }
    header.liner .database-menu kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

header.liner .database-menu kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

header.liner .database-menu kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  header.liner .database-menu kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

header.liner .database-menu kn-database-selector ul li strong {
  color: white; }

header.liner .database-menu kn-database-selector ul li span.uid {
  color: #b39b91; }

kn-attached-portal kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  kn-attached-portal kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  kn-attached-portal kn-database-selector .filter input {
    color: #ffffff; }
    kn-attached-portal kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

kn-attached-portal kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

kn-attached-portal kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  kn-attached-portal kn-database-selector ul li a.active::before, kn-attached-portal kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

kn-attached-portal kn-database-selector ul li strong {
  color: white; }

kn-attached-portal kn-database-selector ul li span.uid {
  color: #b39b91; }

header.liner .database-menu kn-menu-activator::after {
  background-color: rgba(255, 255, 255, 0.2); }

header.liner .database-menu kn-menu-activator strong {
  color: #ffffff; }

header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  header.liner nav > ul > li > a.router-link-active, header.liner nav > ul > li > kn-menu-activator.router-link-active, header.liner kn-navbar > ul > li > a.router-link-active, header.liner kn-navbar > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  header.liner nav > ul > li > a:hover, header.liner nav > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  header.liner nav > ul > li > a:not(.router-link-active):focus, header.liner nav > ul > li > kn-menu-activator:not(.router-link-active):focus, header.liner kn-navbar > ul > li > a:not(.router-link-active):focus, header.liner kn-navbar > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

kn-attached-portal .kn-navbar-expansion > ul > li > a, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-navbar-expansion > ul > li > a.router-link-active, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:hover, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:not(.router-link-active):focus, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

header.liner {
  background-color: #805848;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4) 80px); }
  header.liner .logo:hover, header.liner .logo:focus {
    background-color: rgba(255, 255, 255, 0.05); }
  header.liner button.main-action {
    color: white;
    background-color: rgba(128, 88, 72, 0.9);
    background-color: #10a060; }
    header.liner button.main-action.danger {
      background-color: rgba(192, 64, 96, 0.9); }
    header.liner button.main-action[disabled] {
      background-color: rgba(160, 160, 160, 0.5); }
    header.liner button.main-action::after {
      background-color: white; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      background-color: rgba(128, 88, 72, 0.7); }
      header.liner button.main-action:not([disabled]):hover.danger, header.liner button.main-action:not([disabled]):focus.danger {
        background-color: rgba(192, 64, 96, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      background-color: rgba(128, 88, 72, 0.8); }
      header.liner button.main-action:not([disabled]):active.danger {
        background-color: rgba(192, 64, 96, 0.8); }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus, header.liner button.main-action:not([disabled]):active {
      background-color: #58bd90; }
    header.liner button.main-action:not([disabled]):active {
      background-color: #40b380; }
  header.liner kn-menu {
    color: rgba(255, 255, 255, 0.5);
    z-index: 10; }
    header.liner kn-menu.expanded {
      background-color: #805848; }
      header.liner kn-menu.expanded kn-menu-content {
        border-top: 1px solid rgba(255, 255, 255, 0.1); }
    header.liner kn-menu kn-menu-activator:hover, header.liner kn-menu kn-menu-activator:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }
    header.liner kn-menu kn-menu-content {
      background-color: #805848; }
      header.liner kn-menu kn-menu-content a {
        color: rgba(255, 255, 255, 0.5); }
        header.liner kn-menu kn-menu-content a:hover {
          background-color: rgba(255, 255, 255, 0.1);
          color: #ffffff; }

kn-attached-portal .header-liner.kn-menu-content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #805848; }
  kn-attached-portal .header-liner.kn-menu-content a {
    color: rgba(255, 255, 255, 0.5); }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }

header.liner .user-menu kn-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .user-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-input label, kn-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-input label .required {
  color: #c04060; }

kn-input .kn-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-input:not(.disabled):not(.focused) .kn-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-input.focused .kn-input-container {
  border-color: transparent; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  background-color: #805848; }

kn-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  background-color: #c04060; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::before {
  background-color: #ecc6cf; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::after {
  background-color: #c04060; }

kn-input.ng-touched.ng-pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::before {
  background-color: #d9cdc8; }

kn-input input {
  color: #000000; }

kn-input.disabled input {
  color: rgba(0, 0, 0, 0.4); }

kn-input input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input label, kn-date-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-date-input label .required {
  color: #c04060; }

kn-date-input .kn-date-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-date-input:not(.disabled):not(.focused) .kn-date-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-date-input.focused .kn-date-input-container {
  border-color: transparent; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  background-color: #805848; }

kn-date-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::before {
  background-color: #ecc6cf; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::after {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::before {
  background-color: #d9cdc8; }

kn-date-input date-input {
  color: #000000; }

kn-date-input.disabled date-input {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input date-input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input .input-button i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

kn-kcuni-settings p {
  color: rgba(0, 0, 0, 0.5); }
  kn-kcuni-settings p strong {
    color: rgba(0, 0, 0, 0.8); }

kn-kcuni-settings .settings button {
  color: #000000; }
  kn-kcuni-settings .settings button:not([disabled]):hover, kn-kcuni-settings .settings button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-kcuni-settings .settings button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-kcuni-settings .settings:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-kcuni-settings .message {
  color: #c04060;
  background-color: rgba(192, 64, 96, 0.2); }

.app-loading-screen p {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

html, body {
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.8); }

a {
  color: #8040a0; }

kn-input.ownership [kn-prefix] {
  color: #10a060; }

.flat-button {
  color: #000000; }
  .flat-button:not([disabled]):hover, .flat-button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

.flat-table thead td {
  border-bottom: 3px solid #cccccc; }

.flat-table tbody td {
  border-bottom: 1px solid #ebebeb; }

.flat-table tbody tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

.flat-table .actions button {
  color: #000000; }
  .flat-table .actions button:not([disabled]):hover, .flat-table .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-table .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-modal.confirmation-dialog .overlay {
  background-color: rgba(48, 48, 48, 0.9); }
  kn-modal.confirmation-dialog .overlay .container {
    background-color: rgba(40, 40, 40, 0.7); }
  kn-modal.confirmation-dialog .overlay .content {
    color: white; }
  kn-modal.confirmation-dialog .overlay .buttons {
    background-color: rgba(0, 0, 0, 0.2); }
    kn-modal.confirmation-dialog .overlay .buttons button {
      color: rgba(255, 255, 255, 0.5); }
      kn-modal.confirmation-dialog .overlay .buttons button.primary {
        color: rgba(64, 128, 255, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.primary::before {
          background-color: #4080ff; }
        kn-modal.confirmation-dialog .overlay .buttons button.primary:hover, kn-modal.confirmation-dialog .overlay .buttons button.primary:focus {
          background-color: rgba(64, 128, 255, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button.danger {
        color: rgba(255, 64, 72, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.danger::before {
          background-color: #ff4048; }
        kn-modal.confirmation-dialog .overlay .buttons button.danger:hover, kn-modal.confirmation-dialog .overlay .buttons button.danger:focus {
          background-color: rgba(255, 64, 72, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        background-color: white; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        background-color: rgba(255, 255, 255, 0.7);
        color: rgba(0, 0, 0, 0.8); }

kn-options-container {
  background-color: #ffffff; }
  kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-optgroup > strong {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

kn-option.marked {
  background-color: rgba(0, 0, 0, 0.07); }

kn-option:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-option.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-option .kn-option-selector {
  color: rgba(0, 0, 0, 0.3); }

kn-option.selected .kn-option-selector {
  color: #805848; }

kn-attached-portal .kn-options-container {
  background-color: #ffffff; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-attached-portal .kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-attached-portal .kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-attached-portal .kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-ownership-display {
  color: rgba(0, 0, 0, 0.3); }
  kn-ownership-display > span {
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.1); }

kn-print-button kn-menu.expanded {
  background-color: #0b7244; }

kn-print-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-print-button kn-menu kn-menu-activator, kn-print-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-query-filter .query-filter > div[knFilterGroup] {
  color: rgba(0, 0, 0, 0.8); }

kn-query-filter .filter-group .new-filter-actions button {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .filter-group {
  border-left: 10px solid rgba(0, 0, 0, 0.1); }

kn-query-filter li.boolean-operator {
  background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter li.boolean-operator span {
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff; }

kn-query-filter .filter-name [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-operator kn-input [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-value .presenter > span {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-actions button {
  color: #000000; }
  kn-query-filter .filter-actions button:not([disabled]):hover, kn-query-filter .filter-actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter .filter-actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-query-filter .footer {
  background-color: rgba(0, 0, 0, 0.05); }
  kn-query-filter .footer button {
    background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-placeholder > i.material-icons {
  color: rgba(0, 0, 0, 0.35); }

kn-query-filter .filter-placeholder kn-select .kn-select-container {
  border: 1px solid rgba(0, 0, 0, 0.3); }
  kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
    background-color: rgba(0, 0, 0, 0.05); }

kn-query-filter .filter-placeholder kn-select .placeholder {
  color: rgba(0, 0, 0, 0.8); }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-radio input[type='radio']:checked + .kn-radio-box::after {
  border-color: #805848; }

kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border: 7px solid #805848; }

kn-radio input[type='radio']:focus + .kn-radio-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-radio:not(.disabled) input[type='radio']:not(:checked):hover + .kn-radio-box::after, kn-radio:not(.disabled) input[type='radio']:not(:checked) + .kn-radio-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-radio.disabled label, kn-radio.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-radio.disabled input[type='radio']:not(:checked) + .kn-radio-box::after, kn-radio.readonly input[type='radio']:not(:checked) + .kn-radio-box::after {
  background-color: transparent !important; }

kn-radio.disabled input[type='radio'] + .kn-radio-box::after, kn-radio.disabled input[type='radio'] + .kn-radio-box .kn-radio-mark, kn-radio.readonly input[type='radio'] + .kn-radio-box::after, kn-radio.readonly input[type='radio'] + .kn-radio-box .kn-radio-mark {
  border-color: rgba(0, 0, 0, 0.1); }

kn-radio-group.ng-touched.ng-invalid kn-radio .kn-radio-box::after, kn-radio-group.ng-touched.ng-invalid kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border-color: #c04060; }

kn-select label, kn-select [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-select label .required {
  color: #c04060; }

kn-select .kn-select-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-select:not(.disabled):not(.focused) .kn-select-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-select.focused .kn-select-container {
  border-color: transparent; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  background-color: #805848; }

kn-select.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  background-color: #c04060; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::before {
  background-color: #ecc6cf; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::after {
  background-color: #c04060; }

kn-select.ng-touched.ng-pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::before {
  background-color: #d9cdc8; }

kn-select .placeholder {
  color: rgba(0, 0, 0, 0.35); }

.kn-select-dropdown {
  border-left: 1px solid rgba(0, 0, 0, 0.05); }

kn-spinner {
  animation-name: strio-spinner-color-1; }
  kn-spinner .path {
    animation: strio-spinner-dash 1.5s ease-in-out infinite, strio-spinner-color-1 6s ease-in-out infinite; }

@keyframes strio-spinner-color-1 {
  0%, 20% {
    stroke: rgba(128, 88, 72, 0.6); }
  40% {
    stroke: rgba(128, 88, 72, 0.7); }
  60% {
    stroke: rgba(128, 88, 72, 0.8); }
  80% {
    stroke: rgba(128, 88, 72, 0.9); }
  100% {
    stroke: #805848; } }

kn-tabs.boxlist div.tabs-viewport {
  background-color: #ffffff; }

kn-tabs.boxlist div.tabs-labels li a {
  color: rgba(0, 0, 0, 0.5); }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    color: rgba(0, 0, 0, 0.8); }

kn-tabs.boxlist div.tabs-labels li.active a {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8); }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    border-bottom: 15px solid #ffffff; }

kn-tabs.notebook div.tabs-labels {
  background-color: rgba(0, 0, 0, 0.08); }
  kn-tabs.notebook div.tabs-labels li a {
    color: #805848; }
    kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
      color: #000000; }
    kn-tabs.notebook div.tabs-labels li a::before {
      background-color: rgba(0, 0, 0, 0.3); }
  kn-tabs.notebook div.tabs-labels li.active a {
    background-color: rgba(255, 255, 255, 0.5); }
    kn-tabs.notebook div.tabs-labels li.active a::before {
      background-color: #805848; }

kn-textarea label, kn-textarea [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-textarea label .required {
  color: #c04060; }

kn-textarea .kn-textarea-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-textarea:not(.disabled):not(.focused) .kn-textarea-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-textarea.focused .kn-textarea-container {
  border-color: transparent; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  background-color: #805848; }

kn-textarea.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::before {
  background-color: #ecc6cf; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::after {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::before {
  background-color: #d9cdc8; }

kn-textarea textarea {
  color: #000000; }

kn-textarea.disabled textarea {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea textarea::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-timeline::before {
  background: linear-gradient(90deg, #f0f0f0, transparent); }

kn-timeline::after {
  background: linear-gradient(270deg, #f0f0f0, transparent); }

kn-timeline .time-segment {
  background-color: #1860d8; }
  kn-timeline .time-segment.future {
    background-color: #8028d8; }
  kn-timeline .time-segment.selected {
    background-color: #0dc22b; }

kn-timeline .time-mark > .calendar-mark {
  position: relative;
  top: 25px;
  left: -5px; }
  kn-timeline .time-mark > .calendar-mark.today {
    left: -6px; }
  kn-timeline .time-mark > .calendar-mark.pin {
    left: -3px; }

kn-timeline .time-mark > a {
  background-color: #1860d8; }
  kn-timeline .time-mark > a.selected {
    background-color: #1860d8; }
    kn-timeline .time-mark > a.selected .date {
      color: rgba(0, 0, 0, 0.8); }
    kn-timeline .time-mark > a.selected::after {
      border: 2px solid #1860d8; }
  kn-timeline .time-mark > a:focus::before {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-timeline .time-mark > a .date {
    color: rgba(0, 0, 0, 0.5); }

kn-timeline .time-mark.pin > a {
  background-color: white;
  border: 4px solid #1860d8; }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.today::before {
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.8), transparent); }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.future > a {
  background-color: #8028d8; }
  kn-timeline .time-mark.future > a.selected::after {
    border-color: #8028d8; }

kn-timeline .time-mark.future.pin > a {
  background-color: white;
  border-color: #8028d8; }

kn-timeline .time-mark.today > a {
  background-color: #303030; }
  kn-timeline .time-mark.today > a.selected::after {
    border-color: #303030; }
  kn-timeline .time-mark.today > a .date {
    top: -60px; }

kn-timeline .time-mark.today.pin > a {
  background-color: white;
  border-color: #303030; }

kn-toast > div {
  background-color: rgba(0, 0, 0, 0.75);
  color: white; }
  kn-toast > div a {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-left: 1px solid rgba(255, 255, 255, 0.15); }
    kn-toast > div a:hover {
      background-color: rgba(0, 0, 0, 0.5); }
    kn-toast > div a:active {
      background-color: black; }

@keyframes indeterminate {
  0% {
    left: 0%;
    right: 100%; }
  30% {
    left: 0%;
    right: 50%; }
  80% {
    left: 70%;
    right: 0%; }
  100% {
    left: 100%;
    right: 0%; } }

/*$bg-color: #283038;
$fg-color: #c0c0c0;

$red-shade-color: #f06060;
$yellow-shade-color: #f0d060;
$green-shade-color: #a0f060;
$emerald-shade-color: #60f080;
$cyan-shade-color: #60e0f0;
$blue-shade-color: #6080f0;
$purle-shade-color: #b060f0;
$pink-shade-color: #f060c8;

$primary-color: $purle-shade-color;
$secondary-color: $yellow-shade-color;*/
/*$foreground-color: rgb(255, 255, 255);
$background-color: rgb(56, 56, 64);
$text-color: rgba(255, 255, 255, 0.9);
$text-secondary-color: rgba(255, 255, 255, 0.6);
$reading-animation-color: rgb(0, 150, 136);

$primary-color: rgb(128, 88, 72);
$accent-color: rgb(16, 160, 96);
$warn-color: rgb(192, 64, 96);

$divider-color: rgba(255, 255, 255, 0.1);
$header-divider-color: rgba(255, 255, 255, 0.2);
$row-divider-color: rgba(255, 255, 255, 0.15);*/
kn-audit-display {
  white-space: nowrap;
  margin: 10px 5px; }
  kn-audit-display strong {
    padding: 0.1em 0.4em 0.2em;
    margin: 0 0.2em;
    border-radius: 0.5em;
    font-weight: 400; }

kn-checkbox .kn-checkbox-mark {
  opacity: 0; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::before {
  border-radius: 50%; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border-radius: 2px;
  transition: 0.3s all ease; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark-path {
  stroke-dashoffset: 0;
  stroke-dasharray: 25; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox .kn-checkbox-mark-path {
  stroke-dashoffset: 25;
  stroke-dasharray: 25;
  stroke-width: 2px;
  transition: 0.3s transform ease, 0.3s stroke-dashoffset ease;
  transform-origin: 50% 50%;
  stroke: white; }

kn-checkbox .kn-checkbox-box::after, kn-checkbox label {
  transition: 0.3s color ease; }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox.indeterminate .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox.indeterminate .kn-checkbox-mark-path {
  transform: rotate(45deg) translate(-2px, 0);
  stroke-dashoffset: 20 !important;
  stroke-dasharray: 14 !important; }

app-print-template-edit kn-codemirror {
  height: 100%;
  flex: 1; }

app-print-template-edit > kn-resizable-container {
  height: 100%; }
  app-print-template-edit > kn-resizable-container kn-draggable-handler.left {
    z-index: 2;
    height: 50px !important;
    top: calc(100% - 50px) !important; }
  app-print-template-edit > kn-resizable-container .preview iframe {
    width: 100%;
    height: 100%;
    border: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror {
    height: 100%;
    overflow: visible;
    background: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror-scroll {
    margin: 0;
    padding: 0;
    overflow: visible !important; }
  app-print-template-edit > kn-resizable-container .CodeMirror-sizer {
    border-right-width: 0 !important; }
  app-print-template-edit > kn-resizable-container .box {
    width: 100%;
    height: 100%; }

app-print-template-edit form {
  width: 100%;
  height: 100%; }

app-print-template-edit kn-tabs {
  flex-direction: column-reverse; }
  app-print-template-edit kn-tabs a.sidepanel {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 6px 0 0; }
    app-print-template-edit kn-tabs a.sidepanel i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    app-print-template-edit kn-tabs a.sidepanel:hover, app-print-template-edit kn-tabs a.sidepanel:focus {
      opacity: 1;
      text-decoration: none; }
    app-print-template-edit kn-tabs a.sidepanel:active {
      opacity: 1; }
    app-print-template-edit kn-tabs a.sidepanel[disabled] {
      opacity: 0.3;
      background: none; }
    app-print-template-edit kn-tabs a.sidepanel i {
      transition: transform 0.5s ease 0.3s; }
    app-print-template-edit kn-tabs a.sidepanel.active i {
      transform: rotate(180deg); }

app-print-template-edit kn-tab.active {
  display: flex;
  flex-direction: column;
  flex: 1; }

app-print-template-edit kn-tab.home .box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }

app-print-template-edit kn-tab.home .fields {
  width: 100%;
  max-width: 700px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home i.banner {
  font-size: 192px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home h1 {
  text-align: center;
  margin: 50px 0; }

app-print-template-edit kn-tab.home .form-container {
  width: 80%;
  height: 100%;
  margin: 50px auto; }

app-print-template-edit kn-tab.home .form-layout {
  display: flex;
  flex-direction: column;
  height: 100%; }

app-print-template-edit kn-tab .no-print-context-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder i.banner {
    font-size: 128px;
    margin: 0 auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder strong {
    font-family: 'Exo 2';
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin: 20px 0 50px 0; }
  app-print-template-edit kn-tab .no-print-context-placeholder button {
    text-align: center; }

app-print-template-edit kn-menu.errors kn-menu-activator {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  margin: 0 8px 0 0;
  opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  app-print-template-edit kn-menu.errors kn-menu-activator:hover, app-print-template-edit kn-menu.errors kn-menu-activator:focus {
    opacity: 1;
    text-decoration: none; }
  app-print-template-edit kn-menu.errors kn-menu-activator:active {
    opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator[disabled] {
    opacity: 0.3;
    background: none; }

app-print-template-edit kn-menu.errors kn-menu-content {
  position: absolute;
  right: 8px;
  bottom: 50px;
  max-width: 1000px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-content [hidden] {
    display: none; }
  app-print-template-edit kn-menu.errors kn-menu-content strong {
    display: block; }
  app-print-template-edit kn-menu.errors kn-menu-content pre {
    font-size: 14px;
    margin-bottom: 0; }

kn-roles-table .role-permissions {
  position: relative;
  margin: 0 10px 76px 10px; }
  kn-roles-table .role-permissions > .scrollable {
    overflow-x: auto;
    margin: 0 54px 0 220px; }
  kn-roles-table .role-permissions table {
    border-collapse: separate;
    border-spacing: 0; }
    kn-roles-table .role-permissions table thead th {
      position: relative;
      width: 54px;
      min-width: 54px;
      height: 270px;
      padding: 0; }
      kn-roles-table .role-permissions table thead th.permission:not(:nth-child(2))::before {
        content: '';
        left: 0;
        bottom: 10px;
        position: absolute;
        display: block;
        width: 1px;
        height: calc(100% - 20px); }
    kn-roles-table .role-permissions table tbody td {
      padding: 0;
      height: 54px; }
    kn-roles-table .role-permissions table tbody.permissions-matrix td kn-checkbox {
      justify-content: center; }
    kn-roles-table .role-permissions table tbody.add-new-input td {
      height: 0; }
    kn-roles-table .role-permissions table div.rotate {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 54px;
      bottom: 0;
      left: 100%;
      transform: rotate(270deg);
      transform-origin: 0 100%;
      text-align: left; }
    kn-roles-table .role-permissions table th.name, kn-roles-table .role-permissions table td.name {
      position: absolute;
      left: 0;
      width: 220px;
      text-align: center;
      vertical-align: middle; }
      kn-roles-table .role-permissions table th.name kn-input, kn-roles-table .role-permissions table td.name kn-input {
        margin: 10px; }
        kn-roles-table .role-permissions table th.name kn-input input, kn-roles-table .role-permissions table td.name kn-input input {
          font-weight: 700; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.name, kn-roles-table .role-permissions table td.permission span.description {
      display: block;
      white-space: nowrap;
      padding: 1px 10px; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table td.permission span.name {
      font-size: 16px;
      font-weight: bold; }
    kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.description {
      font-size: 14px;
      font-weight: 400;
      opacity: 0.7; }
    kn-roles-table .role-permissions table th.spacer, kn-roles-table .role-permissions table td.spacer {
      width: 100%;
      min-width: 0; }
    kn-roles-table .role-permissions table th.actions, kn-roles-table .role-permissions table td.actions {
      position: absolute;
      right: 0;
      width: 54px; }
  kn-roles-table .role-permissions .actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 10px;
    height: 34px; }
    kn-roles-table .role-permissions .actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-roles-table .role-permissions .actions button:hover, kn-roles-table .role-permissions .actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-roles-table .role-permissions .actions button:active {
      opacity: 1; }
    kn-roles-table .role-permissions .actions button[disabled] {
      opacity: 0.3;
      background: none; }

kn-permission-actions-select kn-menu-content {
  position: absolute;
  z-index: 100;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3));
  padding: 10px;
  border-radius: 5px;
  transform: translate(calc(-50% + 23px), 5px); }
  kn-permission-actions-select kn-menu-content > div {
    padding: 5px; }
    kn-permission-actions-select kn-menu-content > div kn-checkbox label {
      flex: 1; }
  kn-permission-actions-select kn-menu-content::before {
    position: absolute;
    left: calc(50% - 10px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

kn-user-edit table.user-roles {
  width: 100%;
  border-collapse: collapse;
  margin: 13px 0 10px 0; }
  kn-user-edit table.user-roles tbody tr {
    height: 40px; }
  kn-user-edit table.user-roles tbody td {
    transition: 0.3s background-color ease;
    padding: 10px 0 10px 10px; }
  kn-user-edit table.user-roles td.actions {
    text-align: right; }
  kn-user-edit table.user-roles thead, kn-user-edit table.user-roles td.user-role input {
    font-weight: bold; }
  kn-user-edit table.user-roles thead {
    text-align: center; }
    kn-user-edit table.user-roles thead tr:first-child {
      text-align: center; }
    kn-user-edit table.user-roles thead tr:last-child {
      height: auto; }
      kn-user-edit table.user-roles thead tr:last-child td {
        font-weight: 400;
        font-style: italic;
        opacity: 0.7;
        padding-bottom: 5px; }
        kn-user-edit table.user-roles thead tr:last-child td > div {
          display: flex; }
          kn-user-edit table.user-roles thead tr:last-child td > div > span {
            flex: 1; }
  kn-user-edit table.user-roles td.user-role {
    width: 200px; }
  kn-user-edit table.user-roles td.user-role-customer-branch {
    width: 250px; }
    kn-user-edit table.user-roles td.user-role-customer-branch > div {
      display: flex; }
      kn-user-edit table.user-roles td.user-role-customer-branch > div input {
        text-align: right;
        width: 100%; }
  kn-user-edit table.user-roles td.actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 10px;
    height: 34px; }
    kn-user-edit table.user-roles td.actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-user-edit table.user-roles td.actions button:hover, kn-user-edit table.user-roles td.actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-user-edit table.user-roles td.actions button:active {
      opacity: 1; }
    kn-user-edit table.user-roles td.actions button[disabled] {
      opacity: 0.3;
      background: none; }
  kn-user-edit table.user-roles td.actions button:first-child {
    margin-left: 0; }
  kn-user-edit table.user-roles td.actions button:last-child {
    margin-right: 0; }

kn-control-messages {
  position: relative;
  height: 15px; }
  kn-control-messages > div {
    position: absolute;
    display: block; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave {
      transition: 0.3s all ease; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave.kn-leave-active {
      top: -5px;
      opacity: 0; }
    kn-control-messages > div.kn-leave, kn-control-messages > div.kn-enter.kn-enter-active {
      top: 0;
      opacity: 1; }

app-database-manage kn-tabs {
  position: relative;
  padding-top: 50px;
  margin: 0 0 20px 0; }
  app-database-manage kn-tabs .tab-group {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 400; }
  app-database-manage kn-tabs a i.material-icons {
    font-size: 72px; }
  app-database-manage kn-tabs a strong {
    font-weight: 400; }
  app-database-manage kn-tabs kn-tab {
    position: relative;
    padding: 30px;
    justify-content: center;
    text-align: center; }
    app-database-manage kn-tabs kn-tab .actions {
      margin: 20px auto 0 auto; }
    app-database-manage kn-tabs kn-tab p.note {
      margin-top: 0;
      font-style: italic;
      opacity: 0.5; }
    app-database-manage kn-tabs kn-tab .select-database {
      margin: 20px auto;
      padding: 20px;
      width: 400px; }
    app-database-manage kn-tabs kn-tab::after {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
      transition: 0.3s all ease; }
    app-database-manage kn-tabs kn-tab.kn-drag-over::after {
      opacity: 1;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      left: 10px;
      top: 10px; }

kn-datagrid tr td.strong {
  font-weight: bold; }

kn-datagrid tr td.highlight {
  color: #802020; }

kn-datagrid tr td.note {
  color: gray;
  font-size: 0.8em; }

kn-datagrid tr td.overflow {
  overflow: visible; }

kn-datagrid kn-cell-renderer span.user-database-tag, kn-datagrid kn-cell-renderer span.user-role-tag {
  color: white;
  padding: 4px 7px;
  margin: 0 5px 0 0;
  border-radius: 2px; }

kn-datagrid kn-cell-renderer span.user-ownership {
  color: rgba(0, 0, 0, 0.3); }
  kn-datagrid kn-cell-renderer span.user-ownership > span {
    color: black;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin: 0 4px;
    border-radius: 2px; }

kn-datepicker .viewport {
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-datepicker .viewport::before {
    content: '';
    position: absolute;
    display: block;
    left: calc(50% - 10px);
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  kn-datepicker .viewport.kn-enter, kn-datepicker .viewport.kn-leave {
    transition: 0.3s opacity ease, 0.3s margin-top ease, 0.3s transform ease; }
    kn-datepicker .viewport.kn-enter kn-date-view, kn-datepicker .viewport.kn-enter kn-day-view, kn-datepicker .viewport.kn-enter kn-hour-view, kn-datepicker .viewport.kn-leave kn-date-view, kn-datepicker .viewport.kn-leave kn-day-view, kn-datepicker .viewport.kn-leave kn-hour-view {
      opacity: 1 !important;
      transform: none !important; }
  kn-datepicker .viewport.kn-enter {
    opacity: 0;
    margin-top: 10px; }
  kn-datepicker .viewport.kn-leave, kn-datepicker .viewport.kn-enter.kn-enter-active {
    opacity: 1;
    margin-top: 0; }
  kn-datepicker .viewport.kn-leave.kn-leave-active {
    opacity: 0;
    margin-top: 10px; }

kn-datepicker kn-date-header a, kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a, kn-datepicker kn-time-header a:hover {
  text-decoration: none; }

kn-datepicker kn-date-header a {
  text-align: center;
  font-weight: 900; }

kn-datepicker kn-time-header a {
  font-weight: 400;
  border-radius: 10%; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-hour-view.kn-enter, kn-datepicker kn-hour-view.kn-leave {
  transition: 0.3s opacity ease, 0.3s transform ease; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-hour-view.kn-enter {
  opacity: 0;
  transform: scale(0.7, 0.7); }

kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-date-view.kn-enter.kn-enter-active, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-day-view.kn-enter.kn-enter-active, kn-datepicker kn-hour-view.kn-leave, kn-datepicker kn-hour-view.kn-enter.kn-enter-active {
  opacity: 1;
  transform: scale(1, 1); }

kn-datepicker kn-date-view.kn-leave.kn-leave-active, kn-datepicker kn-day-view.kn-leave.kn-leave-active, kn-datepicker kn-hour-view.kn-leave.kn-leave-active {
  opacity: 0;
  transform: scale(1.4, 1.4); }

kn-datepicker kn-month-view.animated {
  transition: 0.3s transform ease; }

kn-datepicker kn-month-view th, kn-datepicker kn-month-view td {
  text-align: center;
  border: 1px solid transparent; }

kn-datepicker kn-month-view th {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase; }

kn-datepicker kn-month-view td a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker kn-month-view td a, kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:active, kn-datepicker kn-month-view td a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    outline: none; }

kn-datepicker .picker-relative-container {
  position: relative;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  margin: 22px; }
  kn-datepicker .picker-relative-container.format-12-hours {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px; }
  kn-datepicker .picker-relative-container .center {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    z-index: 1;
    border-radius: 50%; }
  kn-datepicker .picker-relative-container .gauge {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: 0 0; }
  kn-datepicker .picker-relative-container li {
    text-align: center;
    border: 1px solid transparent; }
    kn-datepicker .picker-relative-container li::before {
      border-radius: 50%; }
    kn-datepicker .picker-relative-container li.minor a {
      width: 13px;
      height: 13px;
      line-height: 13px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent;
      font-size: 0; }
      kn-datepicker .picker-relative-container li.minor a, kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:active, kn-datepicker .picker-relative-container li.minor a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
        outline: none; }
    kn-datepicker .picker-relative-container li:not(.minor) a {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent; }
      kn-datepicker .picker-relative-container li:not(.minor) a, kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:active, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        outline: none; }

kn-datepicker .period-selector a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker .period-selector a, kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:active, kn-datepicker .period-selector a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    outline: none; }

.kn-ripple {
  overflow: hidden;
  position: relative; }

.kn-ripple.kn-ripple-unbounded {
  overflow: visible; }

.kn-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0); }

kn-export-button kn-menu {
  display: block;
  position: relative; }
  kn-export-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-export-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-export-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-export-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-export-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-export-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-export-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-export-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-export-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-export-button kn-menu kn-spinner {
    left: 32px; }

button.form-button, .form-input button {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 30px;
  font-size: 16px;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s; }
  button.form-button[disabled], .form-input button[disabled] {
    box-shadow: none; }
  button.form-button::-moz-focus-inner, .form-input button::-moz-focus-inner {
    border: none; }
  button.form-button::after, .form-input button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    bottom: -25%;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    transition: 0.2s all ease; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
    button.form-button:not([disabled]):active::after, .form-input button:not([disabled]):active::after {
      bottom: -70%;
      left: -50%;
      height: 200%;
      width: 200%;
      opacity: 0.5; }

@keyframes reveal-back-link {
  to {
    opacity: 1;
    left: calc(50% - 700px); } }

.form-container.heading, .form-container .form-loader-bar {
  position: relative; }
  .form-container.heading::before, .form-container.heading::after, .form-container .form-loader-bar::before, .form-container .form-loader-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    height: 5px;
    z-index: 3; }
  .form-container.heading::before, .form-container .form-loader-bar::before {
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.3s opacity ease; }
  .form-container.heading::after, .form-container .form-loader-bar::after {
    left: 0%;
    right: 100%;
    opacity: 0; }

.loading .form-container.heading::before, .loading .form-container.heading::after, .loading .form-container .form-loader-bar::before, .loading .form-container .form-loader-bar::after {
  opacity: 1; }

.loading .form-container.heading::after, .loading .form-container .form-loader-bar::after {
  animation: indeterminate 1s linear infinite; }

.form-container {
  margin: 30px 0; }
  .form-container.heading {
    position: relative;
    margin: 0;
    padding: 0; }
  .form-container h1, .form-container p, .form-container .form-layout {
    margin: auto;
    max-width: 1200px; }
  .form-container h1 {
    padding: 30px 0;
    margin: 0 auto;
    border: none; }
  .form-container .form-back {
    position: absolute;
    opacity: 0;
    left: calc(50% - 750px);
    top: calc(50% - 32px);
    transition: 0.3s all ease;
    animation-name: reveal-back-link;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
    .form-container .form-back::after {
      content: '';
      position: absolute;
      display: block;
      width: 64px;
      height: 64px;
      left: 20px;
      border-radius: 50%;
      transition: 0.3s all ease;
      transform: rotateY(45deg); }
    .form-container .form-back i {
      position: absolute;
      z-index: 10;
      font-size: 48px;
      line-height: 64px;
      text-align: center;
      width: 64px;
      height: 64px; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      left: 0;
      transform: rotateY(0); }
    .form-container .form-back:active::after {
      transition: none; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px; }
  .form-footer div:only-child {
    margin-left: auto; }

.form-actions-info {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  margin: 0 1em;
  white-space: nowrap; }
  .form-actions-info i.material-icons {
    padding: 0 0.3em; }

.form-buttons {
  text-align: right; }
  .form-buttons button {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    width: auto;
    margin-left: 10px;
    padding: 0 30px; }
    .form-buttons button[disabled] {
      box-shadow: none; }
    .form-buttons button::-moz-focus-inner {
      border: none; }
    .form-buttons button::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    .form-buttons button:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      .form-buttons button:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }

.form-errors {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .form-errors li {
    margin: 2px 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .form-errors li strong {
      display: flex;
      align-items: center;
      color: white;
      padding: 0.3em 0.5em;
      margin-right: 1em; }
      .form-errors li strong i {
        padding-right: 0.3em; }

.form-layout .info-bar {
  margin: 15px;
  padding: 15px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .info-bar strong {
    font-weight: 400; }

.form-layout .form-grid {
  display: flex;
  flex-direction: column; }

.form-layout .form-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }
  .form-layout .form-box .title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 5px;
    height: 34px;
    line-height: 34px; }
    .form-layout .form-box .title h2 {
      flex: 1;
      padding-left: 8px;
      margin: 0;
      font-weight: 800;
      font-size: 1em;
      text-transform: uppercase; }
    .form-layout .form-box .title .side-action {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      height: 24px;
      margin-left: 5px; }
      .form-layout .form-box .title .side-action i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .title .side-action:hover, .form-layout .form-box .title .side-action:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .title .side-action:active {
        opacity: 1; }
      .form-layout .form-box .title .side-action[disabled] {
        opacity: 0.3;
        background: none; }
  .form-layout .form-box .content {
    flex-grow: 1;
    padding: 0 15px 15px 15px; }
    .form-layout .form-box .content:first-child {
      padding-top: 15px; }
  .form-layout .form-box .info-bar {
    margin: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none; }
  .form-layout .form-box .container {
    display: flex; }
    .form-layout .form-box .container .content {
      flex: 1;
      width: 0; }
    .form-layout .form-box .container .side-actions {
      display: flex;
      align-items: center;
      justify-content: center; }
      .form-layout .form-box .container .side-actions a {
        display: inline-block;
        margin: 0;
        padding: 5px;
        opacity: 0.7;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
        height: 24px;
        margin: 10px; }
        .form-layout .form-box .container .side-actions a i {
          vertical-align: top;
          transition: all 0.5s ease;
          display: inline-block;
          width: 24px;
          height: 24px;
          overflow: hidden; }
        .form-layout .form-box .container .side-actions a:hover, .form-layout .form-box .container .side-actions a:focus {
          opacity: 1;
          text-decoration: none; }
        .form-layout .form-box .container .side-actions a:active {
          opacity: 1; }
        .form-layout .form-box .container .side-actions a[disabled] {
          opacity: 0.3;
          background: none; }
  .form-layout .form-box .alt p {
    margin: 0.5em;
    padding: 0; }
  .form-layout .form-box .alt-actions {
    display: flex; }
    .form-layout .form-box .alt-actions a {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 5px 7px;
      height: 24px; }
      .form-layout .form-box .alt-actions a i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .alt-actions a:hover, .form-layout .form-box .alt-actions a:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .alt-actions a:active {
        opacity: 1; }
      .form-layout .form-box .alt-actions a[disabled] {
        opacity: 0.3;
        background: none; }
      .form-layout .form-box .alt-actions a i.material-icons {
        margin-right: 5px; }

.form-layout .form-inline-box {
  margin: 15px; }
  .form-layout .form-inline-box .title h3 {
    flex: 1;
    padding: 2px 0 0 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center; }

.form-layout .form-expanssion {
  margin: 15px 0;
  z-index: 1; }
  .form-layout .form-expanssion .form-box {
    margin: 0 15px;
    transition: 0.2s margin ease;
    position: relative;
    box-shadow: none; }
    .form-layout .form-expanssion .form-box::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .form-expanssion .form-box.expanded {
    margin: 30px 15px; }
  .form-layout .form-expanssion .form-box:first-child {
    margin-top: 0; }
  .form-layout .form-expanssion .form-box:last-child {
    margin-bottom: 0; }

.form-layout .row {
  display: flex;
  flex-direction: row;
  width: 100%; }

.form-layout .column {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .form-layout .column .column-spacer {
    height: 100%; }

.form-layout .form-input {
  flex: 1;
  position: relative;
  padding: 3px 0;
  min-width: 0; }
  .form-layout .form-input.inlined {
    margin: 0;
    flex-grow: 0;
    min-width: auto; }
  .form-layout .form-input > * {
    margin: 0 10px; }
  .form-layout .form-input > input, .form-layout .form-input > select {
    width: calc(100% - 20px); }
  .form-layout .form-input > kn-control-messages {
    margin: -18px 0 0 15px; }

.form-layout .flex-1 {
  flex: 1; }

.form-layout .flex-2 {
  flex: 2; }

.form-layout .flex-3 {
  flex: 3; }

.form-layout .flex-4 {
  flex: 4; }

.form-layout .flex-5 {
  flex: 5; }

.form-layout .flex-6 {
  flex: 6; }

.form-layout .flex-start {
  justify-content: flex-start; }

.form-layout .flex-end {
  justify-content: flex-end; }

.form-layout .row.flex-reverse {
  flex-direction: row-reverse; }

.form-layout .column.flex-reverse {
  flex-direction: column-reverse; }

.form-layout .popover {
  position: relative;
  height: 34px; }
  .form-layout .popover kn-menu-activator {
    cursor: pointer; }
  .form-layout .popover .side-action {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    height: 24px; }
    .form-layout .popover .side-action i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .form-layout .popover .side-action:hover, .form-layout .popover .side-action:focus {
      opacity: 1;
      text-decoration: none; }
    .form-layout .popover .side-action:active {
      opacity: 1; }
    .form-layout .popover .side-action[disabled] {
      opacity: 0.3;
      background: none; }

kn-attached-portal .kn-form-layout-menu-content {
  z-index: 200;
  position: absolute;
  left: calc(100% - 490px);
  top: 40px;
  width: 500px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    font-weight: normal;
    margin: 0;
    padding: 15px 15px 15px 20px; }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:focus {
      opacity: 1;
      text-decoration: none; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:active {
      opacity: 1; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close[disabled] {
      opacity: 0.3;
      background: none; }
  kn-attached-portal .kn-form-layout-menu-content [hidden] {
    display: none; }
  kn-attached-portal .kn-form-layout-menu-content::before {
    position: absolute;
    left: calc(100% - 37px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

.form-slots-table {
  width: 100%;
  table-layout: fixed;
  margin-top: 2em;
  border-collapse: collapse; }
  .form-slots-table th {
    padding: 5px;
    font-weight: 400;
    position: relative; }
    .form-slots-table th::before {
      content: '';
      position: absolute;
      display: block;
      width: calc(100% - 22px);
      height: 100%;
      border: 1px solid transparent;
      top: 0;
      left: 11px; }
    .form-slots-table th.disabled::before {
      background-color: transparent; }
  .form-slots-table td {
    padding: 10px 0; }
  .form-slots-table caption {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1; }

kn-sticky.sticked > .grid-panel {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.grid-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px; }
  .grid-panel .selector {
    width: 200px; }
  .grid-panel .actions, .grid-panel kn-grid-actions {
    display: flex;
    flex-grow: 1;
    font-size: 0; }
  .grid-panel .widgets {
    display: flex; }
    .grid-panel .widgets > *:not(:last-child) {
      margin-right: 10px; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    padding: 5px 7px;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    display: inline-block;
    line-height: 24px; }
    .grid-panel .selector a i, .grid-panel .actions a i, .grid-panel kn-grid-actions a i {
      vertical-align: top;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      opacity: 1; }
      .grid-panel .selector a:hover i, .grid-panel .actions a:hover i, .grid-panel kn-grid-actions a:hover i {
        opacity: 1; }
    .grid-panel .selector a:hover, .grid-panel .selector a:focus, .grid-panel .selector a:active, .grid-panel .actions a:hover, .grid-panel .actions a:focus, .grid-panel .actions a:active, .grid-panel kn-grid-actions a:hover, .grid-panel kn-grid-actions a:focus, .grid-panel kn-grid-actions a:active {
      text-decoration: none; }

kn-grid-preset kn-menu {
  display: block;
  position: relative;
  width: 300px; }
  kn-grid-preset kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-preset kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-preset kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-preset kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-preset kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-preset kn-menu kn-menu-activator {
    display: block;
    opacity: 1; }

kn-grid-preset kn-menu-activator > div {
  padding: 0;
  margin: 0;
  line-height: 24px;
  display: flex;
  align-items: center; }
  kn-grid-preset kn-menu-activator > div[hidden] {
    display: none; }
  kn-grid-preset kn-menu-activator > div i {
    padding: 0; }
  kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
      opacity: 1; }
  kn-grid-preset kn-menu-activator > div span {
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    kn-grid-preset kn-menu-activator > div span.template-name {
      font-style: normal; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.ownerUid {
        font-size: 80%;
        font-style: italic; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.material-icons {
        font-size: 125%;
        vertical-align: middle; }
  kn-grid-preset kn-menu-activator > div input {
    height: 34px;
    padding: 0 5px;
    width: calc(100% - 10px);
    min-width: 0;
    border: none;
    background-color: transparent;
    font-family: Source Sans Pro;
    font-size: 16px;
    outline: none; }
  kn-grid-preset kn-menu-activator > div a {
    opacity: 0.7; }

kn-grid-preset kn-menu-content kn-select {
  width: 100%; }

kn-grid-preset kn-menu-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-grid-preset kn-menu-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-grid-preset kn-menu-content li:not(.user-select) span, kn-grid-preset kn-menu-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-grid-preset kn-menu-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  width: 100%; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-grid-query-filter kn-menu {
  display: block;
  position: relative; }
  kn-grid-query-filter kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-query-filter kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-query-filter kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-query-filter kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 5px 7px; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50px;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
      position: absolute;
      left: calc(50% - 10px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-attached-portal .kn-grid-menu-content {
    position: absolute;
    z-index: 20;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-attached-portal .kn-grid-menu-content::before {
      position: absolute;
      left: calc(100% - 100px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 0; }
    kn-grid-query-filter kn-menu kn-menu-activator > * {
      height: 24px;
      padding: 5px;
      transition: color 0.5s ease; }
      kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
        opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator > span {
      display: flex; }
    kn-grid-query-filter kn-menu kn-menu-activator > a {
      opacity: 0.7; }

kn-grid-reset {
  display: block;
  position: relative;
  padding: 0; }
  kn-grid-reset.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-reset kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-reset kn-menu-activator[hidden] {
      display: none; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-reset kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-reset kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-reset kn-menu-activator {
    padding: 0 7px; }
    kn-grid-reset kn-menu-activator i {
      padding: 5px 0; }
      kn-grid-reset kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-grid-reset > *:not(.disabled) {
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus {
      opacity: 1; }
  kn-grid-reset > span {
    display: flex; }
  kn-grid-reset > a {
    opacity: 0.7;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
    kn-grid-reset > a.disabled {
      cursor: default;
      pointer-events: none; }

kn-grid-search {
  position: relative;
  height: 50px;
  margin: -8px -8px -8px 0; }
  kn-grid-search input[type='search'] {
    border: none;
    padding: 0 10px 0 40px;
    height: 100%;
    width: 0;
    vertical-align: top;
    transition: 0.3s all ease; }
    kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
      width: 250px;
      outline: none; }
  kn-grid-search::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center; }

header.liner {
  height: 80px;
  display: flex;
  justify-content: space-between;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  header.liner > div {
    display: flex;
    align-items: center; }
  header.liner .logo {
    outline: none; }
    header.liner .logo img {
      margin: 10px; }
  header.liner button.main-action {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    margin: 0 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
    header.liner button.main-action[disabled] {
      box-shadow: none; }
    header.liner button.main-action::-moz-focus-inner {
      border: none; }
    header.liner button.main-action::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    header.liner button.main-action:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      header.liner button.main-action:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
  header.liner kn-menu {
    z-index: 2;
    position: relative; }
    header.liner kn-menu.expanded {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
    header.liner kn-menu kn-menu-activator {
      display: flex;
      padding: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
      outline: none; }
    header.liner kn-menu kn-menu-content {
      position: absolute;
      min-width: 100%;
      left: 0;
      margin-top: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      z-index: 100; }
      header.liner kn-menu kn-menu-content[hidden] {
        opacity: 0;
        margin-top: -10px;
        transition: all 0.3s ease; }
      header.liner kn-menu kn-menu-content ul {
        padding: 0;
        margin: 0;
        list-style-type: none; }
        header.liner kn-menu kn-menu-content ul li {
          padding: 0;
          margin: 0; }
      header.liner kn-menu kn-menu-content a {
        padding: 10px;
        display: block;
        white-space: nowrap;
        transition: all 0.3s ease; }
        header.liner kn-menu kn-menu-content a:hover {
          text-decoration: none; }

kn-attached-portal .header-liner.kn-menu-content {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 100; }
  kn-attached-portal .header-liner.kn-menu-content[hidden] {
    opacity: 0;
    margin-top: -10px;
    transition: all 0.3s ease; }
  kn-attached-portal .header-liner.kn-menu-content ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    kn-attached-portal .header-liner.kn-menu-content ul li {
      padding: 0;
      margin: 0; }
  kn-attached-portal .header-liner.kn-menu-content a {
    padding: 10px;
    display: block;
    white-space: nowrap;
    transition: all 0.3s ease; }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      text-decoration: none; }

header.liner .database-menu::before, header.liner .database-menu::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 1px;
  height: 40px;
  transition: top 0.5s ease; }

header.liner .database-menu::before {
  left: 0; }

header.liner .database-menu::after {
  right: 0; }

header.liner .database-menu.expanded::before, header.liner .database-menu.expanded::after, header.liner .database-menu:hover::before, header.liner .database-menu:hover::after {
  top: -50px; }

header.liner .database-menu.database-menu-hidden {
  display: none; }

header.liner .database-menu kn-database-selector {
  border: none; }
  header.liner .database-menu kn-database-selector .filter {
    font-size: 0; }
    header.liner .database-menu kn-database-selector .filter .clear {
      padding: 0 20px; }
    header.liner .database-menu kn-database-selector .filter:hover .clear {
      background-image: url("../kn-theme-strio/img/clear.svg"); }
  header.liner .database-menu kn-database-selector ul {
    max-height: 70%; }
    header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
      left: 0; }
    header.liner .database-menu kn-database-selector ul li a:hover {
      text-decoration: none; }

header.liner .database-menu kn-menu-activator {
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding-right: 40px; }
  header.liner .database-menu kn-menu-activator strong {
    display: block;
    font-weight: normal; }
  header.liner .database-menu kn-menu-activator .description {
    display: block; }
  header.liner .database-menu kn-menu-activator::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 32px;
    width: 16px;
    height: 16px;
    mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    transform: rotate(-90deg);
    transition: transform 0.5s ease; }
  header.liner .database-menu kn-menu-activator:hover::after {
    transform: rotate(0deg); }

header.liner .database-menu.expanded kn-menu-activator::after {
  transform: rotate(-180deg); }

header.liner > div:first-child, header.liner kn-navbar {
  flex: 1; }

header.liner nav > ul, header.liner kn-navbar > ul {
  height: 80px;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  display: flex; }
  header.liner nav > ul > li, header.liner kn-navbar > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
      display: block;
      margin: 10px 3px;
      height: 58px;
      padding: 0 18px;
      line-height: 58px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      header.liner nav > ul > li > a, header.liner nav > ul > li > a:hover, header.liner nav > ul > li > a:focus, header.liner nav > ul > li > kn-menu-activator, header.liner nav > ul > li > kn-menu-activator:hover, header.liner nav > ul > li > kn-menu-activator:focus, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > a:focus, header.liner kn-navbar > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > kn-menu-activator:focus {
        text-decoration: none; }

header.liner kn-navbar kn-menu {
  margin: 10px 3px;
  height: 60px;
  padding: 0 !important; }

header.liner kn-navbar kn-menu-activator {
  height: 60px;
  padding: 0 8px;
  align-items: center; }

kn-attached-portal .kn-navbar-expansion ul {
  margin: 0 10px;
  padding: 0;
  list-style-type: none; }
  kn-attached-portal .kn-navbar-expansion ul > li {
    margin: 0;
    padding: 0; }
    kn-attached-portal .kn-navbar-expansion ul > li > a {
      display: block;
      padding: 0 18px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      kn-attached-portal .kn-navbar-expansion ul > li > a, kn-attached-portal .kn-navbar-expansion ul > li > a:hover, kn-attached-portal .kn-navbar-expansion ul > li > a:focus {
        text-decoration: none; }

header.liner .user-menu kn-menu-activator {
  min-width: 120px;
  flex-direction: row-reverse;
  align-items: center; }
  header.liner .user-menu kn-menu-activator img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    background-image: url("../img/noavatar.svg"); }
  header.liner .user-menu kn-menu-activator kn-menu-content {
    right: 0; }

header.liner .user-menu kn-menu-content {
  right: 0;
  left: initial; }
  header.liner .user-menu kn-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-attached-portal .user-menu-content {
  right: 0;
  left: initial; }
  kn-attached-portal .user-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-input label, kn-input [kn-hint] {
  font-size: 14px; }

kn-input [kn-prefix], kn-input [kn-suffix] {
  display: flex; }

kn-input .kn-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-input .kn-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input .kn-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input.disabled .kn-input-container, kn-input.readonly .kn-input-container {
  border-bottom-style: dotted; }

kn-input.focused .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.focused .kn-input-underline::before, kn-input.focused .kn-input-underline::after {
  z-index: 111; }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.ng-touched.ng-pending .kn-input-underline::before, kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::after {
  top: -4px;
  height: 5px; }

kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-input input {
  min-height: 24px; }
  kn-input input:-webkit-autofill {
    -webkit-animation-name: kill-autofill;
    -webkit-animation-fill-mode: both; }

@-webkit-keyframes kill-autofill {
  to {
    background: transparent; } }

kn-date-input label, kn-date-input [kn-hint] {
  font-size: 14px; }

kn-date-input [kn-prefix], kn-date-input [kn-suffix] {
  display: flex; }

kn-date-input .kn-date-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-date-input .kn-date-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input .kn-date-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input.disabled .kn-date-input-container, kn-date-input.readonly .kn-date-input-container {
  border-bottom-style: dotted; }

kn-date-input.focused .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.focused .kn-date-input-underline::before, kn-date-input.focused .kn-date-input-underline::after {
  z-index: 111; }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before, kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::after {
  top: -4px;
  height: 5px; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-date-input input {
  min-height: 24px;
  text-align: right; }

kn-date-input .input-button i.material-icons {
  opacity: 0.5;
  transition: 0.3s opacity ease; }
  kn-date-input .input-button i.material-icons:hover, kn-date-input .input-button i.material-icons:focus {
    opacity: 1; }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  opacity: 0.5; }

kn-date-input .input-button > a {
  display: flex;
  text-decoration: none; }

@-moz-document url-prefix() {
  kn-date-input input {
    clip-path: inset(0 25px 0 0);
    margin-right: -20px !important;
    min-width: 70px !important; } }

kn-kcuni-settings {
  display: block;
  margin: 20px; }
  kn-kcuni-settings p strong {
    font-weight: 400; }
  kn-kcuni-settings .settings {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
    margin: 0 -10px 10px; }
    kn-kcuni-settings .settings kn-input {
      flex: 1; }
    kn-kcuni-settings .settings button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      margin-left: 10px; }
      kn-kcuni-settings .settings button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      kn-kcuni-settings .settings button:hover, kn-kcuni-settings .settings button:focus {
        opacity: 1;
        text-decoration: none; }
      kn-kcuni-settings .settings button:active {
        opacity: 1; }
      kn-kcuni-settings .settings button[disabled] {
        opacity: 0.3;
        background: none; }
  kn-kcuni-settings .message {
    padding: 10px;
    vertical-align: center; }
    kn-kcuni-settings .message i {
      vertical-align: bottom; }
  kn-kcuni-settings .doc-link {
    display: block;
    padding-top: 10px;
    margin-bottom: 20px;
    float: left; }
    kn-kcuni-settings .doc-link.app-link {
      float: right; }

.app-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }
  .app-loading-screen p {
    padding: 5px 10px;
    margin: 0;
    border-radius: 3px; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 600px;
  font-family: 'Source Sans Pro';
  font-size: 16px; }

input {
  font-family: 'Source Sans Pro';
  font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo 2'; }

h1 {
  font-weight: 300;
  font-size: 48px;
  padding-bottom: 10px; }

a {
  text-decoration: none; }

a:hover, a:focus {
  text-decoration: underline; }

kn-app-main {
  display: block; }

[knBackgroundFocusable] {
  outline: none; }

.country-display,
kn-select.country .option,
kn-select.country .kn-option-content {
  height: 24px;
  line-height: 24px; }
  .country-display img,
  kn-select.country .option img,
  kn-select.country .kn-option-content img {
    width: 24px;
    height: 16px;
    margin: 4px 4px 4px 0;
    vertical-align: bottom;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.flat-button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }
  .flat-button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  .flat-button:hover, .flat-button:focus {
    opacity: 1;
    text-decoration: none; }
  .flat-button:active {
    opacity: 1; }
  .flat-button[disabled] {
    opacity: 0.3;
    background: none; }

.flat-table {
  width: 100%;
  border-collapse: collapse; }
  .flat-table tbody tr {
    height: 55px; }
  .flat-table tbody td {
    transition: 0.3s background-color ease;
    padding: 10px; }
  .flat-table thead td {
    padding: 10px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7; }
  .flat-table .actions {
    text-align: right; }
    .flat-table .actions button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer; }
      .flat-table .actions button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .flat-table .actions button:hover, .flat-table .actions button:focus {
        opacity: 1;
        text-decoration: none; }
      .flat-table .actions button:active {
        opacity: 1; }
      .flat-table .actions button[disabled] {
        opacity: 0.3;
        background: none; }

kn-modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }

kn-modal.confirmation-dialog .overlay {
  display: flex;
  align-items: center;
  justify-content: center; }
  kn-modal.confirmation-dialog .overlay.kn-enter, kn-modal.confirmation-dialog .overlay.kn-leave {
    transition: 0.3s opacity ease; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container, kn-modal.confirmation-dialog .overlay.kn-leave .container {
      transition: 0.3s transform ease, 0.3s margin-top ease-out; }
  kn-modal.confirmation-dialog .overlay.kn-enter {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container {
      transform: perspective(1000px) rotate3d(1, 0, 0, 60deg); }
  kn-modal.confirmation-dialog .overlay.kn-leave, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active {
    opacity: 1; }
    kn-modal.confirmation-dialog .overlay.kn-leave .container, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active .container {
      transform: scale(1); }
  kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active .container {
      transform: scale(0.8);
      margin-top: 100px; }
  kn-modal.confirmation-dialog .overlay .container {
    overflow-y: auto;
    min-width: 300px;
    max-width: 750px;
    min-height: 200px;
    display: flex;
    flex-direction: column; }
  kn-modal.confirmation-dialog .overlay .content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; }
    kn-modal.confirmation-dialog .overlay .content span {
      white-space: pre-line;
      text-align: center;
      margin-top: 10px; }
  kn-modal.confirmation-dialog .overlay .buttons {
    display: flex; }
    kn-modal.confirmation-dialog .overlay .buttons button {
      position: relative;
      flex: 1;
      padding: 15px;
      min-width: 150px;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.5s ease, background-color 0.5s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        content: '';
        width: 60%;
        height: 3px;
        position: absolute;
        display: block;
        top: 0;
        left: 20%;
        opacity: 0.3; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover::before {
        opacity: 1; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        transition: color 0.2s ease, background-color 0.2s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button:active {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
        padding: 16px 15px 14px 15px; }

kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-options-container .kn-options-container-viewport {
    max-height: 310px; }
  kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-options-container .kn-options-container-filter .clear::before, kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-select.focused kn-options-container .kn-options-container-viewport, kn-input.focused kn-options-container .kn-options-container-viewport {
  z-index: 1000; }

kn-optgroup > strong {
  text-transform: uppercase; }

kn-option:not(.disabled):hover {
  transition: none; }

kn-option .kn-option-selector {
  transition: 0.3s color ease; }

kn-attached-portal .kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-attached-portal .kn-options-container .kn-options-container-viewport {
    max-height: 310px;
    overflow-y: scroll; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before, kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-attached-portal .kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-ownership-display > span {
  padding: 4px;
  margin: 0 4px;
  border-radius: 2px; }

kn-print-button kn-menu {
  display: block;
  position: relative; }
  kn-print-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-print-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-print-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-print-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-print-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-print-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-print-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-print-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-print-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-print-button kn-menu kn-menu-content {
    min-width: 200px; }
  kn-print-button kn-menu kn-spinner {
    left: 14px; }

kn-attached-portal .kn-menu-content.kn-print-button-content {
  min-width: 200px; }

kn-query-filter .query-filter > div[knFilterGroup] {
  display: block;
  min-width: 1000px;
  padding: 20px; }

kn-query-filter .filter-group {
  margin: auto; }
  kn-query-filter .filter-group .new-filter-actions {
    align-items: center;
    display: flex; }
    kn-query-filter .filter-group .new-filter-actions button {
      margin: 0 0 0 10px;
      padding: 5px 10px;
      border-radius: 3px;
      border: none;
      height: 30px;
      text-transform: uppercase; }
    kn-query-filter .filter-group .new-filter-actions .coalescing-operator {
      display: flex;
      align-items: center;
      margin-right: 10px; }
      kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
        content: '';
        display: block;
        flex: 1;
        height: 1px; }
    kn-query-filter .filter-group .new-filter-actions kn-select {
      width: 200px; }

kn-query-filter ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-query-filter li {
  padding: 10px 0 10px 10px; }

kn-query-filter li.boolean-operator {
  padding: 0;
  position: relative;
  height: 1px; }
  kn-query-filter li.boolean-operator span {
    position: absolute;
    display: block;
    padding: 0 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    top: -10px;
    left: 20px;
    text-transform: uppercase; }

kn-query-filter li[knFilterItem] {
  padding: 10px 0 10px 10px;
  display: flex;
  align-items: center;
  height: 40px; }
  kn-query-filter li[knFilterItem] > span {
    margin: 5px; }
  kn-query-filter li[knFilterItem]:first-child {
    padding-top: 0; }

kn-query-filter .filter-group .filter-name, kn-query-filter .filter-group .coalescing-operator {
  width: 225px; }

kn-query-filter .filter-group .coalescing-operator {
  width: 190px; }

kn-query-filter .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 205px; }

kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 170px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 185px; }

kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 150px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 165px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 130px; }

kn-query-filter .filter-name input {
  font-weight: bold; }

kn-query-filter .filter-operator {
  width: 150px; }
  kn-query-filter .filter-operator kn-input input {
    text-align: center; }
  kn-query-filter .filter-operator > * {
    width: 100%; }

kn-query-filter .filter-value {
  flex: 1; }
  kn-query-filter .filter-value .presenter {
    flex: 1;
    display: flex;
    align-items: center; }
    kn-query-filter .filter-value .presenter kn-input, kn-query-filter .filter-value .presenter kn-select {
      flex: 1; }
    kn-query-filter .filter-value .presenter kn-date-input span.required {
      display: none; }
    kn-query-filter .filter-value .presenter > span {
      margin: 0 10px; }
      kn-query-filter .filter-value .presenter > span:first-child {
        margin-left: 0; }

kn-query-filter .filter-actions {
  width: 70px;
  text-align: right; }

kn-query-filter .filter-actions button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  height: 34px; }
  kn-query-filter .filter-actions button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  kn-query-filter .filter-actions button:hover, kn-query-filter .filter-actions button:focus {
    opacity: 1;
    text-decoration: none; }
  kn-query-filter .filter-actions button:active {
    opacity: 1; }
  kn-query-filter .filter-actions button[disabled] {
    opacity: 0.3;
    background: none; }

kn-query-filter .footer {
  padding: 20px;
  text-align: right;
  display: flex; }
  kn-query-filter .footer button {
    padding: 5px 10px;
    margin-left: 20px;
    border-radius: 3px;
    border: none;
    height: 30px;
    text-transform: uppercase; }
  kn-query-filter .footer .left {
    text-align: left;
    flex: 1; }
    kn-query-filter .footer .left button {
      margin-left: 0;
      margin-right: 20px; }

kn-query-filter .filter-placeholder {
  width: 400px;
  margin: 30px auto 50px auto;
  text-align: center; }
  kn-query-filter .filter-placeholder span.placeholder {
    display: block; }
  kn-query-filter .filter-placeholder > i.material-icons {
    font-size: 150px; }
  kn-query-filter .filter-placeholder p {
    margin-top: -10px;
    margin-bottom: 50px;
    font-size: 24px;
    display: none; }
  kn-query-filter .filter-placeholder kn-select .kn-select-container {
    padding: 7px;
    transition: 0.3s all ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:hover {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
      transition: none;
      box-shadow: none; }

kn-radio input[type='radio'] + .kn-radio-box::before {
  border-radius: 50%; }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border-radius: 50%;
  transition: 0.3s border-color ease; }

kn-radio .kn-radio-mark {
  transition: 0.2s border linear; }

kn-radio .kn-radio-box, kn-radio label {
  transition: 0.3s color ease; }

kn-select label, kn-select [kn-hint] {
  font-size: 14px; }

kn-select [kn-prefix], kn-select [kn-suffix] {
  display: flex; }

kn-select .kn-select-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-select .kn-select-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select .kn-select-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select.disabled .kn-select-container, kn-select.readonly .kn-select-container {
  border-bottom-style: dotted; }

kn-select.focused .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.focused .kn-select-underline::before, kn-select.focused .kn-select-underline::after {
  z-index: 111; }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.ng-touched.ng-pending .kn-select-underline::before, kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::after {
  top: -4px;
  height: 5px; }

kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-select .kn-select-header {
  line-height: 24px; }
  kn-select .kn-select-header > * {
    min-height: 24px; }
  kn-select .kn-select-header .separator {
    padding-right: 0.3em; }
  kn-select .kn-select-header .option {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

kn-select.disabled .kn-select-header {
  pointer-events: none; }

kn-spinner {
  position: absolute;
  margin: 0 auto;
  width: 36px; }
  kn-spinner:before {
    content: '';
    display: block;
    padding-top: 100%; }
  kn-spinner .circular {
    animation: strio-spinner-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  kn-spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: strio-spinner-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: square;
    stroke-width: 8px; }

@keyframes strio-spinner-rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes strio-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

kn-tabs.boxlist div.tabs-viewport {
  margin-top: 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }

kn-tabs.boxlist div.tabs-labels ul {
  width: 100%; }

kn-tabs.boxlist div.tabs-labels li a {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  width: 170px;
  height: 150px !important;
  transition: 0.3s color ease; }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }

kn-tabs.boxlist div.tabs-labels li.active a {
  border-radius: 5px; }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    position: absolute;
    left: calc(50% - 15px);
    bottom: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; }

kn-tabs.notebook div.tabs-labels li a {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  transition: 0.3s color ease; }
  kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }
  kn-tabs.notebook div.tabs-labels li a::before {
    content: '';
    display: block;
    position: absolute;
    width: 80%;
    height: 4px;
    left: 10%;
    top: -10px;
    opacity: 0;
    z-index: 10;
    transform: scale(0.8);
    transition: 0.3s all ease; }
  kn-tabs.notebook div.tabs-labels li a:hover::before, kn-tabs.notebook div.tabs-labels li a:focus::before {
    opacity: 1;
    top: 0;
    transform: scale(1); }

kn-tabs.notebook div.tabs-labels li.active a::before {
  opacity: 1;
  top: 0;
  transform: scale(1);
  width: 100%;
  left: 0; }

kn-textarea label, kn-textarea [kn-hint] {
  font-size: 14px; }

kn-textarea [kn-prefix], kn-textarea [kn-suffix] {
  display: flex; }

kn-textarea .kn-textarea-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-textarea .kn-textarea-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea .kn-textarea-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea.disabled .kn-textarea-container, kn-textarea.readonly .kn-textarea-container {
  border-bottom-style: dotted; }

kn-textarea.focused .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.focused .kn-textarea-underline::before, kn-textarea.focused .kn-textarea-underline::after {
  z-index: 111; }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before, kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::after {
  top: -4px;
  height: 5px; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-textarea {
  height: 100%;
  display: flex !important;
  flex-direction: column; }
  kn-textarea .kn-textarea-container {
    flex: 1; }
  kn-textarea textarea {
    height: calc(100% - 20px);
    resize: none; }

kn-timeline {
  position: relative; }
  kn-timeline::before, kn-timeline::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none; }
  kn-timeline::before {
    left: 0; }
  kn-timeline::after {
    right: 0; }
  kn-timeline .time-viewport {
    overflow: hidden; }
  kn-timeline .time-container {
    display: flex;
    margin: 100px 0 50px 0; }
    kn-timeline .time-container > span {
      flex-shrink: 0; }
  kn-timeline .time-segment {
    font-size: 0;
    height: 3px;
    width: calc(50% - 2px); }
  kn-timeline .time-mark {
    position: relative;
    width: 3px;
    height: 3px; }
    kn-timeline .time-mark a {
      position: absolute;
      width: 13px;
      height: 13px;
      top: -5px;
      left: -5px;
      border-radius: 50%;
      z-index: 1;
      outline: none; }
      kn-timeline .time-mark a.selected::after {
        content: '';
        position: absolute;
        display: block;
        width: 23px;
        height: 23px;
        left: -7px;
        top: -7px;
        border-radius: 50%; }
      kn-timeline .time-mark a::before {
        content: '';
        position: absolute;
        display: block;
        width: 53px;
        height: 53px;
        top: -20px;
        left: -20px;
        border-radius: 50%;
        z-index: -1; }
      kn-timeline .time-mark a .date {
        position: absolute;
        display: block;
        white-space: nowrap;
        text-align: center;
        left: 7px;
        top: -68px;
        font-weight: bold;
        transform: translateX(-50%); }
      kn-timeline .time-mark a .year {
        display: block;
        font-weight: normal; }
    kn-timeline .time-mark.pin a {
      width: 9px;
      height: 9px;
      top: -7px;
      left: -7px; }
      kn-timeline .time-mark.pin a::before {
        top: -22px;
        left: -22px; }
      kn-timeline .time-mark.pin a.selected::after {
        left: -9px;
        top: -9px; }
      kn-timeline .time-mark.pin a .date {
        left: 5px;
        top: -70px; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
    kn-timeline .time-mark.today::before {
      content: '';
      position: absolute;
      display: block;
      width: 1px;
      height: 63px;
      left: 1px;
      top: -30px;
      opacity: 0.5; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
  kn-timeline .time-mark.today a .date {
    top: -60px; }
  kn-timeline kn-datepicker .viewport {
    top: -20px; }
  kn-timeline kn-datepicker.calendar-mark .viewport {
    top: 5px; }

kn-toast > div {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  left: 50px;
  bottom: 50px;
  z-index: 1000;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave {
    transition: 0.3s all ease; }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave.kn-leave-active {
    left: 35px;
    opacity: 0; }
  kn-toast > div.kn-leave, kn-toast > div.kn-enter.kn-enter-active {
    left: 50px;
    opacity: 1; }
  kn-toast > div .content {
    display: flex;
    flex-direction: column;
    padding: 15px 20px; }
    kn-toast > div .content span, kn-toast > div .content strong {
      display: block; }
  kn-toast > div a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-align: center; }
    kn-toast > div a, kn-toast > div a:hover, kn-toast > div a:focus, kn-toast > div a:active {
      text-decoration: none; }

kn-audit-display {
  color: rgba(0, 0, 0, 0.5); }
  kn-audit-display strong {
    background-color: rgba(0, 0, 0, 0.07); }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox input[type='checkbox']:focus + .kn-checkbox-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked):hover + .kn-checkbox-box::after, kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked) + .kn-checkbox-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-checkbox.disabled input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled input[type='checkbox']:not(:checked) + .kn-checkbox-box::after {
  background-color: transparent !important; }

kn-checkbox.disabled.indeterminate .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled label, kn-checkbox.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox.ng-touched.ng-invalid .kn-checkbox-box::after {
  border-color: #c04060; }

kn-checkbox.ng-touched.ng-invalid input[type='checkbox']:checked + .kn-checkbox-box::after, kn-checkbox.ng-touched.ng-invalid.indeterminate .kn-checkbox-box::after {
  background-color: #c04060; }

app-print-template-edit {
  background-color: #ffffff; }
  app-print-template-edit > kn-resizable-container .preview {
    border-left: 1px solid rgba(0, 0, 0, 0.15); }
  app-print-template-edit .preview div.tabs-viewport {
    background-color: #f9f7f6; }
  app-print-template-edit kn-codemirror {
    background-color: #ffffff; }
  app-print-template-edit kn-tabs a.sidepanel {
    color: #000000;
    color: rgba(0, 0, 0, 0.8); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):hover, app-print-template-edit kn-tabs a.sidepanel:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-tab.home i.banner {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-tab .no-print-context-placeholder {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-activator {
    color: #000000;
    color: #c04060; }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):hover, app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-menu.errors kn-menu-content {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.8); }

kn-roles-table .role-permissions table thead th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-roles-table .role-permissions table tbody.permissions-matrix td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); }

kn-roles-table .role-permissions table tbody.permissions-matrix tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

kn-roles-table .role-permissions .actions button {
  color: #000000; }
  kn-roles-table .role-permissions .actions button:not([disabled]):hover, kn-roles-table .role-permissions .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-roles-table .role-permissions .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-permission-actions-select kn-menu-content {
  background-color: #ffffff; }
  kn-permission-actions-select kn-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-user-edit table.user-roles tbody.user-roles-table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles tr.invalid td {
  background-color: rgba(192, 64, 96, 0.15); }

kn-user-edit table.user-roles thead tr:last-child td {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-user-edit table.user-roles tbody.user-roles-table tr td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles td.actions button {
  color: #000000; }
  kn-user-edit table.user-roles td.actions button:not([disabled]):hover, kn-user-edit table.user-roles td.actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-user-edit table.user-roles td.actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-control-messages > div {
  color: #c04060; }

app-database-manage kn-tabs .tab-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

app-database-manage kn-tabs a i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

app-database-manage kn-tabs li.active a i.material-icons, app-database-manage kn-tabs a:hover i.material-icons, app-database-manage kn-tabs a:focus i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

app-database-manage kn-tabs kn-tab .select-database {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15); }

app-database-manage kn-tabs kn-tab.kn-drag-over::after {
  background-color: rgba(255, 240, 216, 0.3);
  border: 1px dashed #ff9800; }

kn-datepicker .viewport {
  background-color: #ffffff; }
  kn-datepicker .viewport::before {
    border-bottom: 10px solid #f2f2f2; }
  kn-datepicker .viewport .header {
    background-color: #f2f2f2; }

kn-datepicker kn-date-header > *, kn-datepicker kn-time-header > * {
  color: #000000; }

kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a:hover {
  background-color: rgba(0, 0, 0, 0.1); }

kn-datepicker kn-date-header a:active, kn-datepicker kn-time-header a:active {
  background-color: rgba(0, 0, 0, 0.2); }

kn-datepicker kn-date-header a {
  color: rgba(0, 0, 0, 0.5); }

kn-datepicker kn-month-view th {
  color: rgba(0, 0, 0, 0.35); }

kn-datepicker kn-month-view td a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker kn-month-view td a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker kn-month-view td a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container .center {
  background-color: gray; }

kn-datepicker .picker-relative-container .gauge {
  background-color: rgba(0, 0, 0, 0.15); }

kn-datepicker .picker-relative-container li::before {
  background-color: #ffffff; }

kn-datepicker .picker-relative-container li.minor a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li.minor a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li.minor a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.minor::before {
  background-color: rgba(0, 0, 0, 0.8); }

kn-datepicker .picker-relative-container li:not(.minor) a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li:not(.minor) a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li:not(.minor) a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.major::before {
  background-color: #000000; }

kn-datepicker .period-selector a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .period-selector a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .period-selector a.selected {
    background-color: #805848;
    color: #ffffff; }

.kn-ripple-element {
  background-color: rgba(0, 0, 0, 0.05); }

kn-export-button kn-menu.expanded {
  background-color: #0b7244; }

kn-export-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-export-button kn-menu kn-menu-activator, kn-export-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

button.form-button, .form-input button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  button.form-button.danger, .form-input button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  button.form-button[disabled], .form-input button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  button.form-button::after, .form-input button::after {
    background-color: white; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    button.form-button:not([disabled]):hover.danger, button.form-button:not([disabled]):focus.danger, .form-input button:not([disabled]):hover.danger, .form-input button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    button.form-button:not([disabled]):active.danger, .form-input button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-container.heading::before, .form-container .form-loader-bar::before {
  background-color: rgba(128, 88, 72, 0.3); }

.form-container.heading::after, .form-container .form-loader-bar::after {
  background-color: #805848; }

.form-container.heading {
  background-color: #ffffff; }

.form-container .form-back {
  color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:hover, .form-container .form-back:focus {
    color: #ffffff; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      background-color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:active::after {
    background-color: rgba(0, 0, 0, 0.4); }

.form-actions-info {
  color: #c07000; }

.form-buttons button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  .form-buttons button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  .form-buttons button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  .form-buttons button::after {
    background-color: white; }
  .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    .form-buttons button:not([disabled]):hover.danger, .form-buttons button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  .form-buttons button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    .form-buttons button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-errors li {
  background-color: rgba(192, 64, 96, 0.2); }
  .form-errors li strong {
    background-color: #c04060; }

.form-layout .info-bar {
  color: rgba(255, 255, 255, 0.7);
  background-color: #10a060; }
  .form-layout .info-bar.error {
    background-color: #c04060; }
  .form-layout .info-bar strong {
    color: #ffffff; }

.form-layout .form-box {
  background-color: #ffffff; }
  .form-layout .form-box .title {
    color: #009688; }
    .form-layout .form-box .title .side-action {
      color: #000000; }
      .form-layout .form-box .title .side-action:not([disabled]):hover, .form-layout .form-box .title .side-action:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .title .side-action:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .container + .container {
    border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .form-layout .form-box .container .side-actions {
    border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .container .side-actions a {
      color: #000000; }
      .form-layout .form-box .container .side-actions a:not([disabled]):hover, .form-layout .form-box .container .side-actions a:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .container .side-actions a:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .alt {
    background-color: rgba(224, 192, 0, 0.1);
    border-top: 1px solid rgba(224, 192, 0, 0.3); }
  .form-layout .form-box .alt-actions a {
    color: #000000; }
    .form-layout .form-box .alt-actions a:not([disabled]):hover, .form-layout .form-box .alt-actions a:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .alt-actions a:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }

.form-layout .form-inline-box .title {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid rgba(0, 0, 0, 0.15) !important; }

.form-layout .form-inline-box .container {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(224, 192, 0, 0.1); }
  .form-layout .form-inline-box .container + .container {
    border-top: none; }

.form-layout .popover .side-action {
  color: #000000; }
  .form-layout .popover .side-action:not([disabled]):hover, .form-layout .popover .side-action:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-layout .popover .side-action:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-form-layout-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    color: #000000; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-form-layout-menu-content::before {
    border-bottom: 10px solid #ffffff; }

.form-slots-table th {
  color: rgba(0, 0, 0, 0.5); }
  .form-slots-table th::before {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-slots-table th.disabled::before {
    border: 1px solid rgba(0, 0, 0, 0.1); }

.form-slots-table caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

.grid-panel {
  background-color: #10a060; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    color: rgba(255, 255, 255, 0.7); }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-preset kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu kn-menu-activator, kn-grid-preset kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
  transition: color 0.5s ease; }
  kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-activator > div span {
  color: rgba(255, 255, 255, 0.5); }
  kn-grid-preset kn-menu-activator > div span.template-name {
    color: #ffd088; }

kn-grid-preset kn-menu-activator > div input {
  color: #ffffff; }
  kn-grid-preset kn-menu-activator > div input::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-activator > div a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content li:not(.user-select) span:hover, kn-grid-preset kn-menu-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-grid-preset kn-menu-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-grid-preset kn-menu-content kn-select kn-options-container, kn-grid-preset kn-menu-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span:hover, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-options-container, kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-grid-query-filter kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-query-filter kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-query-filter kn-menu kn-menu-activator, kn-grid-query-filter kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
    border-bottom: 10px solid #ffffff; }

kn-attached-portal .kn-grid-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-grid-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-grid-query-filter kn-menu kn-menu-activator {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-query-filter kn-menu kn-menu-activator em {
    color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-activator > * {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease; }
    kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator > span.template-name {
    color: #ffd088; }

kn-attached-portal .kn-menu-content.kn-grid-query-content {
  left: calc(50% - 900px);
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-menu-content.kn-grid-query-content::before {
    left: calc(50% + 375px); }

kn-grid-reset {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-reset.expanded {
    background-color: #0b7244; }
  kn-grid-reset:not(.expanded) kn-menu-activator:focus, kn-grid-reset kn-menu-activator:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset kn-menu-activator, kn-grid-reset kn-menu-activator i {
    color: rgba(255, 255, 255, 0.8); }
  kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i {
    color: #ffffff; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-button-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content) li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-attached-portal .kn-grid-button-content li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-attached-portal .kn-grid-button-content li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset > *:not(.disabled), kn-grid-reset a:not(.disabled) {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus, kn-grid-reset a:not(.disabled):hover, kn-grid-reset a:not(.disabled):focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-reset > *.disabled, kn-grid-reset a.disabled {
    color: rgba(255, 255, 255, 0.3); }

kn-grid-search input[type='search'] {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff; }
  kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
    background-color: rgba(0, 0, 0, 0.4); }
  kn-grid-search input[type='search']::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-search::after {
  background-color: #ffffff; }

header.liner .database-menu::before, header.liner .database-menu::after {
  background-color: rgba(255, 255, 255, 0.1); }

header.liner .database-menu kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  header.liner .database-menu kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  header.liner .database-menu kn-database-selector .filter input {
    color: #ffffff; }
    header.liner .database-menu kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

header.liner .database-menu kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

header.liner .database-menu kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  header.liner .database-menu kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

header.liner .database-menu kn-database-selector ul li strong {
  color: white; }

header.liner .database-menu kn-database-selector ul li span.uid {
  color: #b39b91; }

kn-attached-portal kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  kn-attached-portal kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  kn-attached-portal kn-database-selector .filter input {
    color: #ffffff; }
    kn-attached-portal kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

kn-attached-portal kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

kn-attached-portal kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  kn-attached-portal kn-database-selector ul li a.active::before, kn-attached-portal kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

kn-attached-portal kn-database-selector ul li strong {
  color: white; }

kn-attached-portal kn-database-selector ul li span.uid {
  color: #b39b91; }

header.liner .database-menu kn-menu-activator::after {
  background-color: rgba(255, 255, 255, 0.2); }

header.liner .database-menu kn-menu-activator strong {
  color: #ffffff; }

header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  header.liner nav > ul > li > a.router-link-active, header.liner nav > ul > li > kn-menu-activator.router-link-active, header.liner kn-navbar > ul > li > a.router-link-active, header.liner kn-navbar > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  header.liner nav > ul > li > a:hover, header.liner nav > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  header.liner nav > ul > li > a:not(.router-link-active):focus, header.liner nav > ul > li > kn-menu-activator:not(.router-link-active):focus, header.liner kn-navbar > ul > li > a:not(.router-link-active):focus, header.liner kn-navbar > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

kn-attached-portal .kn-navbar-expansion > ul > li > a, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-navbar-expansion > ul > li > a.router-link-active, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:hover, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:not(.router-link-active):focus, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

header.liner {
  background-color: #805848;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4) 80px); }
  header.liner .logo:hover, header.liner .logo:focus {
    background-color: rgba(255, 255, 255, 0.05); }
  header.liner button.main-action {
    color: white;
    background-color: rgba(128, 88, 72, 0.9);
    background-color: #10a060; }
    header.liner button.main-action.danger {
      background-color: rgba(192, 64, 96, 0.9); }
    header.liner button.main-action[disabled] {
      background-color: rgba(160, 160, 160, 0.5); }
    header.liner button.main-action::after {
      background-color: white; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      background-color: rgba(128, 88, 72, 0.7); }
      header.liner button.main-action:not([disabled]):hover.danger, header.liner button.main-action:not([disabled]):focus.danger {
        background-color: rgba(192, 64, 96, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      background-color: rgba(128, 88, 72, 0.8); }
      header.liner button.main-action:not([disabled]):active.danger {
        background-color: rgba(192, 64, 96, 0.8); }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus, header.liner button.main-action:not([disabled]):active {
      background-color: #58bd90; }
    header.liner button.main-action:not([disabled]):active {
      background-color: #40b380; }
  header.liner kn-menu {
    color: rgba(255, 255, 255, 0.5);
    z-index: 10; }
    header.liner kn-menu.expanded {
      background-color: #805848; }
      header.liner kn-menu.expanded kn-menu-content {
        border-top: 1px solid rgba(255, 255, 255, 0.1); }
    header.liner kn-menu kn-menu-activator:hover, header.liner kn-menu kn-menu-activator:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }
    header.liner kn-menu kn-menu-content {
      background-color: #805848; }
      header.liner kn-menu kn-menu-content a {
        color: rgba(255, 255, 255, 0.5); }
        header.liner kn-menu kn-menu-content a:hover {
          background-color: rgba(255, 255, 255, 0.1);
          color: #ffffff; }

kn-attached-portal .header-liner.kn-menu-content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #805848; }
  kn-attached-portal .header-liner.kn-menu-content a {
    color: rgba(255, 255, 255, 0.5); }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }

header.liner .user-menu kn-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .user-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-input label, kn-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-input label .required {
  color: #c04060; }

kn-input .kn-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-input:not(.disabled):not(.focused) .kn-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-input.focused .kn-input-container {
  border-color: transparent; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  background-color: #805848; }

kn-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  background-color: #c04060; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::before {
  background-color: #ecc6cf; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::after {
  background-color: #c04060; }

kn-input.ng-touched.ng-pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::before {
  background-color: #d9cdc8; }

kn-input input {
  color: #000000; }

kn-input.disabled input {
  color: rgba(0, 0, 0, 0.4); }

kn-input input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input label, kn-date-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-date-input label .required {
  color: #c04060; }

kn-date-input .kn-date-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-date-input:not(.disabled):not(.focused) .kn-date-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-date-input.focused .kn-date-input-container {
  border-color: transparent; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  background-color: #805848; }

kn-date-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::before {
  background-color: #ecc6cf; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::after {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::before {
  background-color: #d9cdc8; }

kn-date-input date-input {
  color: #000000; }

kn-date-input.disabled date-input {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input date-input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input .input-button i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

kn-kcuni-settings p {
  color: rgba(0, 0, 0, 0.5); }
  kn-kcuni-settings p strong {
    color: rgba(0, 0, 0, 0.8); }

kn-kcuni-settings .settings button {
  color: #000000; }
  kn-kcuni-settings .settings button:not([disabled]):hover, kn-kcuni-settings .settings button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-kcuni-settings .settings button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-kcuni-settings .settings:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-kcuni-settings .message {
  color: #c04060;
  background-color: rgba(192, 64, 96, 0.2); }

.app-loading-screen p {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

html, body {
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.8); }

a {
  color: #8040a0; }

kn-input.ownership [kn-prefix] {
  color: #10a060; }

.flat-button {
  color: #000000; }
  .flat-button:not([disabled]):hover, .flat-button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

.flat-table thead td {
  border-bottom: 3px solid #cccccc; }

.flat-table tbody td {
  border-bottom: 1px solid #ebebeb; }

.flat-table tbody tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

.flat-table .actions button {
  color: #000000; }
  .flat-table .actions button:not([disabled]):hover, .flat-table .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-table .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-modal.confirmation-dialog .overlay {
  background-color: rgba(48, 48, 48, 0.9); }
  kn-modal.confirmation-dialog .overlay .container {
    background-color: rgba(40, 40, 40, 0.7); }
  kn-modal.confirmation-dialog .overlay .content {
    color: white; }
  kn-modal.confirmation-dialog .overlay .buttons {
    background-color: rgba(0, 0, 0, 0.2); }
    kn-modal.confirmation-dialog .overlay .buttons button {
      color: rgba(255, 255, 255, 0.5); }
      kn-modal.confirmation-dialog .overlay .buttons button.primary {
        color: rgba(64, 128, 255, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.primary::before {
          background-color: #4080ff; }
        kn-modal.confirmation-dialog .overlay .buttons button.primary:hover, kn-modal.confirmation-dialog .overlay .buttons button.primary:focus {
          background-color: rgba(64, 128, 255, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button.danger {
        color: rgba(255, 64, 72, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.danger::before {
          background-color: #ff4048; }
        kn-modal.confirmation-dialog .overlay .buttons button.danger:hover, kn-modal.confirmation-dialog .overlay .buttons button.danger:focus {
          background-color: rgba(255, 64, 72, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        background-color: white; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        background-color: rgba(255, 255, 255, 0.7);
        color: rgba(0, 0, 0, 0.8); }

kn-options-container {
  background-color: #ffffff; }
  kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-optgroup > strong {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

kn-option.marked {
  background-color: rgba(0, 0, 0, 0.07); }

kn-option:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-option.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-option .kn-option-selector {
  color: rgba(0, 0, 0, 0.3); }

kn-option.selected .kn-option-selector {
  color: #805848; }

kn-attached-portal .kn-options-container {
  background-color: #ffffff; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-attached-portal .kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-attached-portal .kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-attached-portal .kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-ownership-display {
  color: rgba(0, 0, 0, 0.3); }
  kn-ownership-display > span {
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.1); }

kn-print-button kn-menu.expanded {
  background-color: #0b7244; }

kn-print-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-print-button kn-menu kn-menu-activator, kn-print-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-query-filter .query-filter > div[knFilterGroup] {
  color: rgba(0, 0, 0, 0.8); }

kn-query-filter .filter-group .new-filter-actions button {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .filter-group {
  border-left: 10px solid rgba(0, 0, 0, 0.1); }

kn-query-filter li.boolean-operator {
  background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter li.boolean-operator span {
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff; }

kn-query-filter .filter-name [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-operator kn-input [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-value .presenter > span {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-actions button {
  color: #000000; }
  kn-query-filter .filter-actions button:not([disabled]):hover, kn-query-filter .filter-actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter .filter-actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-query-filter .footer {
  background-color: rgba(0, 0, 0, 0.05); }
  kn-query-filter .footer button {
    background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-placeholder > i.material-icons {
  color: rgba(0, 0, 0, 0.35); }

kn-query-filter .filter-placeholder kn-select .kn-select-container {
  border: 1px solid rgba(0, 0, 0, 0.3); }
  kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
    background-color: rgba(0, 0, 0, 0.05); }

kn-query-filter .filter-placeholder kn-select .placeholder {
  color: rgba(0, 0, 0, 0.8); }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-radio input[type='radio']:checked + .kn-radio-box::after {
  border-color: #805848; }

kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border: 7px solid #805848; }

kn-radio input[type='radio']:focus + .kn-radio-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-radio:not(.disabled) input[type='radio']:not(:checked):hover + .kn-radio-box::after, kn-radio:not(.disabled) input[type='radio']:not(:checked) + .kn-radio-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-radio.disabled label, kn-radio.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-radio.disabled input[type='radio']:not(:checked) + .kn-radio-box::after, kn-radio.readonly input[type='radio']:not(:checked) + .kn-radio-box::after {
  background-color: transparent !important; }

kn-radio.disabled input[type='radio'] + .kn-radio-box::after, kn-radio.disabled input[type='radio'] + .kn-radio-box .kn-radio-mark, kn-radio.readonly input[type='radio'] + .kn-radio-box::after, kn-radio.readonly input[type='radio'] + .kn-radio-box .kn-radio-mark {
  border-color: rgba(0, 0, 0, 0.1); }

kn-radio-group.ng-touched.ng-invalid kn-radio .kn-radio-box::after, kn-radio-group.ng-touched.ng-invalid kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border-color: #c04060; }

kn-select label, kn-select [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-select label .required {
  color: #c04060; }

kn-select .kn-select-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-select:not(.disabled):not(.focused) .kn-select-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-select.focused .kn-select-container {
  border-color: transparent; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  background-color: #805848; }

kn-select.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  background-color: #c04060; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::before {
  background-color: #ecc6cf; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::after {
  background-color: #c04060; }

kn-select.ng-touched.ng-pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::before {
  background-color: #d9cdc8; }

kn-select .placeholder {
  color: rgba(0, 0, 0, 0.35); }

.kn-select-dropdown {
  border-left: 1px solid rgba(0, 0, 0, 0.05); }

kn-spinner {
  animation-name: strio-spinner-color-2; }
  kn-spinner .path {
    animation: strio-spinner-dash 1.5s ease-in-out infinite, strio-spinner-color-2 6s ease-in-out infinite; }

@keyframes strio-spinner-color-2 {
  0%, 20% {
    stroke: rgba(128, 88, 72, 0.6); }
  40% {
    stroke: rgba(128, 88, 72, 0.7); }
  60% {
    stroke: rgba(128, 88, 72, 0.8); }
  80% {
    stroke: rgba(128, 88, 72, 0.9); }
  100% {
    stroke: #805848; } }

kn-tabs.boxlist div.tabs-viewport {
  background-color: #ffffff; }

kn-tabs.boxlist div.tabs-labels li a {
  color: rgba(0, 0, 0, 0.5); }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    color: rgba(0, 0, 0, 0.8); }

kn-tabs.boxlist div.tabs-labels li.active a {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8); }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    border-bottom: 15px solid #ffffff; }

kn-tabs.notebook div.tabs-labels {
  background-color: rgba(0, 0, 0, 0.08); }
  kn-tabs.notebook div.tabs-labels li a {
    color: #805848; }
    kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
      color: #000000; }
    kn-tabs.notebook div.tabs-labels li a::before {
      background-color: rgba(0, 0, 0, 0.3); }
  kn-tabs.notebook div.tabs-labels li.active a {
    background-color: rgba(255, 255, 255, 0.5); }
    kn-tabs.notebook div.tabs-labels li.active a::before {
      background-color: #805848; }

kn-textarea label, kn-textarea [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-textarea label .required {
  color: #c04060; }

kn-textarea .kn-textarea-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-textarea:not(.disabled):not(.focused) .kn-textarea-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-textarea.focused .kn-textarea-container {
  border-color: transparent; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  background-color: #805848; }

kn-textarea.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::before {
  background-color: #ecc6cf; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::after {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::before {
  background-color: #d9cdc8; }

kn-textarea textarea {
  color: #000000; }

kn-textarea.disabled textarea {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea textarea::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-timeline::before {
  background: linear-gradient(90deg, #f0f0f0, transparent); }

kn-timeline::after {
  background: linear-gradient(270deg, #f0f0f0, transparent); }

kn-timeline .time-segment {
  background-color: #1860d8; }
  kn-timeline .time-segment.future {
    background-color: #8028d8; }
  kn-timeline .time-segment.selected {
    background-color: #0dc22b; }

kn-timeline .time-mark > .calendar-mark {
  position: relative;
  top: 25px;
  left: -5px; }
  kn-timeline .time-mark > .calendar-mark.today {
    left: -6px; }
  kn-timeline .time-mark > .calendar-mark.pin {
    left: -3px; }

kn-timeline .time-mark > a {
  background-color: #1860d8; }
  kn-timeline .time-mark > a.selected {
    background-color: #1860d8; }
    kn-timeline .time-mark > a.selected .date {
      color: rgba(0, 0, 0, 0.8); }
    kn-timeline .time-mark > a.selected::after {
      border: 2px solid #1860d8; }
  kn-timeline .time-mark > a:focus::before {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-timeline .time-mark > a .date {
    color: rgba(0, 0, 0, 0.5); }

kn-timeline .time-mark.pin > a {
  background-color: white;
  border: 4px solid #1860d8; }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.today::before {
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.8), transparent); }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.future > a {
  background-color: #8028d8; }
  kn-timeline .time-mark.future > a.selected::after {
    border-color: #8028d8; }

kn-timeline .time-mark.future.pin > a {
  background-color: white;
  border-color: #8028d8; }

kn-timeline .time-mark.today > a {
  background-color: #303030; }
  kn-timeline .time-mark.today > a.selected::after {
    border-color: #303030; }
  kn-timeline .time-mark.today > a .date {
    top: -60px; }

kn-timeline .time-mark.today.pin > a {
  background-color: white;
  border-color: #303030; }

kn-toast > div {
  background-color: rgba(0, 0, 0, 0.75);
  color: white; }
  kn-toast > div a {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-left: 1px solid rgba(255, 255, 255, 0.15); }
    kn-toast > div a:hover {
      background-color: rgba(0, 0, 0, 0.5); }
    kn-toast > div a:active {
      background-color: black; }

.heading.loading-bar {
  position: relative; }
  .heading.loading-bar::before, .heading.loading-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    height: 5px;
    z-index: 3; }
  .heading.loading-bar::before {
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.3s opacity ease; }
  .heading.loading-bar::after {
    left: 0%;
    right: 100%;
    opacity: 0; }

.loading .heading.loading-bar::before, .loading .heading.loading-bar::after {
  opacity: 1; }

.loading .heading.loading-bar::after {
  animation: indeterminate 1s linear infinite; }

.heading.loading-bar::before {
  background-color: rgba(128, 88, 72, 0.3); }

.heading.loading-bar::after {
  background-color: #805848; }

app-dashboard .heading {
  height: 80px;
  background-color: #10a060;
  display: flex;
  align-items: center; }
  app-dashboard .heading h1 {
    margin: 0;
    padding: 0 50px;
    color: white;
    font-size: 32px;
    border-right: 1px solid rgba(255, 255, 255, 0.2); }
  app-dashboard .heading kn-date-input {
    margin-right: 20px; }
    app-dashboard .heading kn-date-input label {
      float: none;
      text-align: center; }
    app-dashboard .heading kn-date-input .date kn-datepicker .viewport {
      left: calc(50% - 242px); }
      app-dashboard .heading kn-date-input .date kn-datepicker .viewport::before {
        left: calc(50% + 60px); }
    app-dashboard .heading kn-date-input .time kn-datepicker .viewport {
      left: calc(50% - 325px); }
      app-dashboard .heading kn-date-input .time kn-datepicker .viewport::before {
        left: calc(50% + 143px); }
  app-dashboard .heading .dashboard-interval {
    color: white;
    margin: 0 15px; }
    app-dashboard .heading .dashboard-interval span {
      display: block;
      text-align: center; }
    app-dashboard .heading .dashboard-interval .title {
      color: rgba(255, 255, 255, 0.5);
      white-space: nowrap; }

app-dashboard app-floor-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; }
  app-dashboard app-floor-plan-header .flat-button {
    color: white; }
    app-dashboard app-floor-plan-header .flat-button:not([disabled]):hover, app-dashboard app-floor-plan-header .flat-button:not([disabled]):focus {
      background-color: rgba(255, 255, 255, 0.05); }
    app-dashboard app-floor-plan-header .flat-button:not([disabled]):active {
      background-color: rgba(255, 255, 255, 0.1); }
  app-dashboard app-floor-plan-header .actions {
    display: flex;
    align-items: center;
    padding: 0 15px; }
    app-dashboard app-floor-plan-header .actions button {
      margin-left: 10px;
      width: auto; }
    app-dashboard app-floor-plan-header .actions .flat-button {
      margin-left: 20px; }

app-dashboard > kn-resizable-container {
  height: calc(100% - 80px); }
  app-dashboard > kn-resizable-container kn-draggable-handler.left {
    z-index: 2;
    left: 0 !important; }
    app-dashboard > kn-resizable-container kn-draggable-handler.left::after {
      content: '⋮';
      position: absolute;
      top: 50%;
      left: -5px;
      color: rgba(0, 0, 0, 0.5);
      width: 20px;
      text-align: center;
      pointer-events: none; }

app-dashboard .sidepanel {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  background-color: white; }

app-dashboard .floor-plan-list, app-dashboard .floor-plan-edit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start; }
  app-dashboard .floor-plan-list .spacer, app-dashboard .floor-plan-edit .spacer {
    width: 20px; }

app-dashboard app-floor-plan-visualizer {
  min-height: calc(100vh - 160px); }

app-dashboard .floor-plan-edit strong {
  display: block;
  margin: 0 50px;
  flex-shrink: 0;
  color: white; }

app-dashboard .floor-plan-edit kn-input {
  width: 300px; }
  app-dashboard .floor-plan-edit kn-input .kn-input-container, app-dashboard .floor-plan-edit kn-input [kn-hint], app-dashboard .floor-plan-edit kn-input label {
    color: rgba(255, 255, 255, 0.5); }
    app-dashboard .floor-plan-edit kn-input .kn-input-container input, app-dashboard .floor-plan-edit kn-input [kn-hint] input, app-dashboard .floor-plan-edit kn-input label input {
      color: white;
      text-align: center; }
  app-dashboard .floor-plan-edit kn-input label {
    text-align: center;
    float: none; }
  app-dashboard .floor-plan-edit kn-input .placeholder {
    color: rgba(255, 255, 255, 0.3); }
  app-dashboard .floor-plan-edit kn-input .kn-input-underline, app-dashboard .floor-plan-edit kn-input .kn-select-underline {
    background-color: rgba(255, 255, 255, 0.15); }
  app-dashboard .floor-plan-edit kn-input.disabled .kn-input-underline, app-dashboard .floor-plan-edit kn-input.noninteractive .kn-input-underline {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 0%);
    background-color: transparent; }
  app-dashboard .floor-plan-edit kn-input.disabled input, app-dashboard .floor-plan-edit kn-input.noninteractive input {
    color: rgba(255, 255, 255, 0.4) !important; }

app-dashboard ul.floor-plan-selector {
  list-style-type: none;
  margin: 0;
  padding: 0 40px;
  position: relative; }
  app-dashboard ul.floor-plan-selector::after {
    position: absolute;
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    right: 0;
    top: calc(50% - 20px); }
  app-dashboard ul.floor-plan-selector li {
    display: inline-block;
    margin: 0 5px;
    padding: 0; }
    app-dashboard ul.floor-plan-selector li > a {
      display: block;
      position: relative;
      text-decoration: none;
      color: white;
      height: 80px;
      line-height: 80px;
      padding: 0 20px;
      opacity: 0.7; }
      app-dashboard ul.floor-plan-selector li > a::after {
        content: '';
        position: absolute;
        display: block;
        bottom: 5px;
        left: 25%;
        width: 50%;
        height: 5px;
        background-color: white;
        opacity: 0;
        transition: 0.3s all ease; }
    app-dashboard ul.floor-plan-selector li a:hover {
      opacity: 1;
      color: white;
      background-color: rgba(255, 255, 255, 0.05); }
      app-dashboard ul.floor-plan-selector li a:hover::after {
        opacity: 0.3;
        left: 10%;
        width: 80%;
        bottom: 0; }
    app-dashboard ul.floor-plan-selector li.active a {
      opacity: 1;
      color: white; }
      app-dashboard ul.floor-plan-selector li.active a::after {
        opacity: 0.5;
        left: 0%;
        width: 100%;
        bottom: 0; }

app-dashboard .column {
  flex: 1; }

app-dashboard app-floor-plan-editor {
  display: block;
  overflow: auto;
  padding: 30px;
  height: calc(100% - 60px); }
  app-dashboard app-floor-plan-editor h2 {
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.2); }
  app-dashboard app-floor-plan-editor .image-wrapper {
    min-width: 100px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
    background-color: rgba(0, 0, 0, 0.1);
    margin-right: 20px; }
    app-dashboard app-floor-plan-editor .image-wrapper img {
      max-height: 120px;
      max-width: 200px; }
    app-dashboard app-floor-plan-editor .image-wrapper .image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.7);
      opacity: 0; }
    app-dashboard app-floor-plan-editor .image-wrapper:hover .image-overlay {
      opacity: 1; }
    app-dashboard app-floor-plan-editor .image-wrapper a {
      padding: 5px; }
  app-dashboard app-floor-plan-editor .add-new-image {
    display: flex;
    flex-direction: column;
    align-items: center; }
    app-dashboard app-floor-plan-editor .add-new-image i.material-icons {
      font-size: 48px;
      padding: 10px; }
  app-dashboard app-floor-plan-editor app-background-edit {
    display: flex;
    flex-direction: row; }

kn-app-signin .signin-user {
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
  color: rgba(0, 0, 0, 0.4);
  z-index: 1; }
  kn-app-signin .signin-user em {
    color: rgba(0, 0, 0, 0.8);
    font-style: normal;
    padding: 0 0.5em 0 0.3em; }

kn-app-signin .signin-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100% - 100px); }
  kn-app-signin .signin-box img.logo {
    width: 380px; }
  kn-app-signin .signin-box form {
    width: 300px; }
  kn-app-signin .signin-box .form-button {
    margin-top: 30px; }
  kn-app-signin .signin-box kn-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f0f0f0 inset; }

kn-app-signin .version {
  position: absolute;
  right: 30px;
  bottom: 30px;
  padding: 0;
  margin: 0;
  color: rgba(0, 0, 0, 0.5); }
  kn-app-signin .version strong {
    font-weight: normal;
    color: rgba(0, 0, 0, 0.8); }

kn-app-signin footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.05);
  margin: 0;
  padding: 0 30px;
  height: 99px;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  kn-app-signin footer p {
    color: rgba(0, 0, 0, 0.5); }
    kn-app-signin footer p strong {
      color: rgba(0, 0, 0, 0.7);
      display: block; }
  kn-app-signin footer .company-logo img {
    opacity: 0.7;
    height: 36px; }

kn-app-signin .box {
  position: relative; }

kn-app-signin .box, kn-app-signin .box > div, kn-app-signin .box > form {
  height: 300px;
  width: 300px; }

kn-app-signin .box > form, kn-app-signin .box > div {
  position: absolute;
  top: 0;
  left: 0; }

kn-app-signin .box > form.kn-enter,
kn-app-signin .box > form.kn-leave,
kn-app-signin .box > div.kn-enter,
kn-app-signin .box > div.kn-leave {
  transition: 0.3s all linear; }

kn-app-signin .box > form.kn-enter,
kn-app-signin .box > form.kn-leave.kn-leave-active {
  left: -300px;
  opacity: 0; }

kn-app-signin .box > form.kn-leave,
kn-app-signin .box > form.kn-enter.kn-enter-active,
kn-app-signin .box > div.kn-leave,
kn-app-signin .box > div.kn-enter.kn-enter-active {
  left: 0;
  opacity: 1; }

kn-app-signin .box > div.kn-enter,
kn-app-signin .box > div.kn-leave.kn-leave-active {
  left: 300px;
  opacity: 0; }

kn-app-signin kn-database-selector ul li a.active::before, kn-app-signin kn-database-selector ul li a:focus::before {
  border-left: 10px solid #4060c0; }

kn-app-signin kn-database-selector ul li a:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-app-signin kn-database-selector ul li strong {
  color: black; }

kn-app-signin kn-database-selector ul li span.uid {
  color: #4060c0; }

.database-selection > a {
  text-align: center;
  display: block;
  margin-top: 20px; }

@keyframes indeterminate {
  0% {
    left: 0%;
    right: 100%; }
  30% {
    left: 0%;
    right: 50%; }
  80% {
    left: 70%;
    right: 0%; }
  100% {
    left: 100%;
    right: 0%; } }

/*$bg-color: #283038;
$fg-color: #c0c0c0;

$red-shade-color: #f06060;
$yellow-shade-color: #f0d060;
$green-shade-color: #a0f060;
$emerald-shade-color: #60f080;
$cyan-shade-color: #60e0f0;
$blue-shade-color: #6080f0;
$purle-shade-color: #b060f0;
$pink-shade-color: #f060c8;

$primary-color: $purle-shade-color;
$secondary-color: $yellow-shade-color;*/
/*$foreground-color: rgb(255, 255, 255);
$background-color: rgb(56, 56, 64);
$text-color: rgba(255, 255, 255, 0.9);
$text-secondary-color: rgba(255, 255, 255, 0.6);
$reading-animation-color: rgb(0, 150, 136);

$primary-color: rgb(128, 88, 72);
$accent-color: rgb(16, 160, 96);
$warn-color: rgb(192, 64, 96);

$divider-color: rgba(255, 255, 255, 0.1);
$header-divider-color: rgba(255, 255, 255, 0.2);
$row-divider-color: rgba(255, 255, 255, 0.15);*/
kn-audit-display {
  white-space: nowrap;
  margin: 10px 5px; }
  kn-audit-display strong {
    padding: 0.1em 0.4em 0.2em;
    margin: 0 0.2em;
    border-radius: 0.5em;
    font-weight: 400; }

kn-checkbox .kn-checkbox-mark {
  opacity: 0; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::before {
  border-radius: 50%; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border-radius: 2px;
  transition: 0.3s all ease; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark-path {
  stroke-dashoffset: 0;
  stroke-dasharray: 25; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox .kn-checkbox-mark-path {
  stroke-dashoffset: 25;
  stroke-dasharray: 25;
  stroke-width: 2px;
  transition: 0.3s transform ease, 0.3s stroke-dashoffset ease;
  transform-origin: 50% 50%;
  stroke: white; }

kn-checkbox .kn-checkbox-box::after, kn-checkbox label {
  transition: 0.3s color ease; }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox.indeterminate .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox.indeterminate .kn-checkbox-mark-path {
  transform: rotate(45deg) translate(-2px, 0);
  stroke-dashoffset: 20 !important;
  stroke-dasharray: 14 !important; }

app-print-template-edit kn-codemirror {
  height: 100%;
  flex: 1; }

app-print-template-edit > kn-resizable-container {
  height: 100%; }
  app-print-template-edit > kn-resizable-container kn-draggable-handler.left {
    z-index: 2;
    height: 50px !important;
    top: calc(100% - 50px) !important; }
  app-print-template-edit > kn-resizable-container .preview iframe {
    width: 100%;
    height: 100%;
    border: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror {
    height: 100%;
    overflow: visible;
    background: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror-scroll {
    margin: 0;
    padding: 0;
    overflow: visible !important; }
  app-print-template-edit > kn-resizable-container .CodeMirror-sizer {
    border-right-width: 0 !important; }
  app-print-template-edit > kn-resizable-container .box {
    width: 100%;
    height: 100%; }

app-print-template-edit form {
  width: 100%;
  height: 100%; }

app-print-template-edit kn-tabs {
  flex-direction: column-reverse; }
  app-print-template-edit kn-tabs a.sidepanel {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 6px 0 0; }
    app-print-template-edit kn-tabs a.sidepanel i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    app-print-template-edit kn-tabs a.sidepanel:hover, app-print-template-edit kn-tabs a.sidepanel:focus {
      opacity: 1;
      text-decoration: none; }
    app-print-template-edit kn-tabs a.sidepanel:active {
      opacity: 1; }
    app-print-template-edit kn-tabs a.sidepanel[disabled] {
      opacity: 0.3;
      background: none; }
    app-print-template-edit kn-tabs a.sidepanel i {
      transition: transform 0.5s ease 0.3s; }
    app-print-template-edit kn-tabs a.sidepanel.active i {
      transform: rotate(180deg); }

app-print-template-edit kn-tab.active {
  display: flex;
  flex-direction: column;
  flex: 1; }

app-print-template-edit kn-tab.home .box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }

app-print-template-edit kn-tab.home .fields {
  width: 100%;
  max-width: 700px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home i.banner {
  font-size: 192px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home h1 {
  text-align: center;
  margin: 50px 0; }

app-print-template-edit kn-tab.home .form-container {
  width: 80%;
  height: 100%;
  margin: 50px auto; }

app-print-template-edit kn-tab.home .form-layout {
  display: flex;
  flex-direction: column;
  height: 100%; }

app-print-template-edit kn-tab .no-print-context-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder i.banner {
    font-size: 128px;
    margin: 0 auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder strong {
    font-family: 'Exo 2';
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin: 20px 0 50px 0; }
  app-print-template-edit kn-tab .no-print-context-placeholder button {
    text-align: center; }

app-print-template-edit kn-menu.errors kn-menu-activator {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  margin: 0 8px 0 0;
  opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  app-print-template-edit kn-menu.errors kn-menu-activator:hover, app-print-template-edit kn-menu.errors kn-menu-activator:focus {
    opacity: 1;
    text-decoration: none; }
  app-print-template-edit kn-menu.errors kn-menu-activator:active {
    opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator[disabled] {
    opacity: 0.3;
    background: none; }

app-print-template-edit kn-menu.errors kn-menu-content {
  position: absolute;
  right: 8px;
  bottom: 50px;
  max-width: 1000px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-content [hidden] {
    display: none; }
  app-print-template-edit kn-menu.errors kn-menu-content strong {
    display: block; }
  app-print-template-edit kn-menu.errors kn-menu-content pre {
    font-size: 14px;
    margin-bottom: 0; }

kn-roles-table .role-permissions {
  position: relative;
  margin: 0 10px 76px 10px; }
  kn-roles-table .role-permissions > .scrollable {
    overflow-x: auto;
    margin: 0 54px 0 220px; }
  kn-roles-table .role-permissions table {
    border-collapse: separate;
    border-spacing: 0; }
    kn-roles-table .role-permissions table thead th {
      position: relative;
      width: 54px;
      min-width: 54px;
      height: 270px;
      padding: 0; }
      kn-roles-table .role-permissions table thead th.permission:not(:nth-child(2))::before {
        content: '';
        left: 0;
        bottom: 10px;
        position: absolute;
        display: block;
        width: 1px;
        height: calc(100% - 20px); }
    kn-roles-table .role-permissions table tbody td {
      padding: 0;
      height: 54px; }
    kn-roles-table .role-permissions table tbody.permissions-matrix td kn-checkbox {
      justify-content: center; }
    kn-roles-table .role-permissions table tbody.add-new-input td {
      height: 0; }
    kn-roles-table .role-permissions table div.rotate {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 54px;
      bottom: 0;
      left: 100%;
      transform: rotate(270deg);
      transform-origin: 0 100%;
      text-align: left; }
    kn-roles-table .role-permissions table th.name, kn-roles-table .role-permissions table td.name {
      position: absolute;
      left: 0;
      width: 220px;
      text-align: center;
      vertical-align: middle; }
      kn-roles-table .role-permissions table th.name kn-input, kn-roles-table .role-permissions table td.name kn-input {
        margin: 10px; }
        kn-roles-table .role-permissions table th.name kn-input input, kn-roles-table .role-permissions table td.name kn-input input {
          font-weight: 700; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.name, kn-roles-table .role-permissions table td.permission span.description {
      display: block;
      white-space: nowrap;
      padding: 1px 10px; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table td.permission span.name {
      font-size: 16px;
      font-weight: bold; }
    kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.description {
      font-size: 14px;
      font-weight: 400;
      opacity: 0.7; }
    kn-roles-table .role-permissions table th.spacer, kn-roles-table .role-permissions table td.spacer {
      width: 100%;
      min-width: 0; }
    kn-roles-table .role-permissions table th.actions, kn-roles-table .role-permissions table td.actions {
      position: absolute;
      right: 0;
      width: 54px; }
  kn-roles-table .role-permissions .actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 10px;
    height: 34px; }
    kn-roles-table .role-permissions .actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-roles-table .role-permissions .actions button:hover, kn-roles-table .role-permissions .actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-roles-table .role-permissions .actions button:active {
      opacity: 1; }
    kn-roles-table .role-permissions .actions button[disabled] {
      opacity: 0.3;
      background: none; }

kn-permission-actions-select kn-menu-content {
  position: absolute;
  z-index: 100;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3));
  padding: 10px;
  border-radius: 5px;
  transform: translate(calc(-50% + 23px), 5px); }
  kn-permission-actions-select kn-menu-content > div {
    padding: 5px; }
    kn-permission-actions-select kn-menu-content > div kn-checkbox label {
      flex: 1; }
  kn-permission-actions-select kn-menu-content::before {
    position: absolute;
    left: calc(50% - 10px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

kn-user-edit table.user-roles {
  width: 100%;
  border-collapse: collapse;
  margin: 13px 0 10px 0; }
  kn-user-edit table.user-roles tbody tr {
    height: 40px; }
  kn-user-edit table.user-roles tbody td {
    transition: 0.3s background-color ease;
    padding: 10px 0 10px 10px; }
  kn-user-edit table.user-roles td.actions {
    text-align: right; }
  kn-user-edit table.user-roles thead, kn-user-edit table.user-roles td.user-role input {
    font-weight: bold; }
  kn-user-edit table.user-roles thead {
    text-align: center; }
    kn-user-edit table.user-roles thead tr:first-child {
      text-align: center; }
    kn-user-edit table.user-roles thead tr:last-child {
      height: auto; }
      kn-user-edit table.user-roles thead tr:last-child td {
        font-weight: 400;
        font-style: italic;
        opacity: 0.7;
        padding-bottom: 5px; }
        kn-user-edit table.user-roles thead tr:last-child td > div {
          display: flex; }
          kn-user-edit table.user-roles thead tr:last-child td > div > span {
            flex: 1; }
  kn-user-edit table.user-roles td.user-role {
    width: 200px; }
  kn-user-edit table.user-roles td.user-role-customer-branch {
    width: 250px; }
    kn-user-edit table.user-roles td.user-role-customer-branch > div {
      display: flex; }
      kn-user-edit table.user-roles td.user-role-customer-branch > div input {
        text-align: right;
        width: 100%; }
  kn-user-edit table.user-roles td.actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 10px;
    height: 34px; }
    kn-user-edit table.user-roles td.actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-user-edit table.user-roles td.actions button:hover, kn-user-edit table.user-roles td.actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-user-edit table.user-roles td.actions button:active {
      opacity: 1; }
    kn-user-edit table.user-roles td.actions button[disabled] {
      opacity: 0.3;
      background: none; }
  kn-user-edit table.user-roles td.actions button:first-child {
    margin-left: 0; }
  kn-user-edit table.user-roles td.actions button:last-child {
    margin-right: 0; }

kn-control-messages {
  position: relative;
  height: 15px; }
  kn-control-messages > div {
    position: absolute;
    display: block; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave {
      transition: 0.3s all ease; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave.kn-leave-active {
      top: -5px;
      opacity: 0; }
    kn-control-messages > div.kn-leave, kn-control-messages > div.kn-enter.kn-enter-active {
      top: 0;
      opacity: 1; }

app-database-manage kn-tabs {
  position: relative;
  padding-top: 50px;
  margin: 0 0 20px 0; }
  app-database-manage kn-tabs .tab-group {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 400; }
  app-database-manage kn-tabs a i.material-icons {
    font-size: 72px; }
  app-database-manage kn-tabs a strong {
    font-weight: 400; }
  app-database-manage kn-tabs kn-tab {
    position: relative;
    padding: 30px;
    justify-content: center;
    text-align: center; }
    app-database-manage kn-tabs kn-tab .actions {
      margin: 20px auto 0 auto; }
    app-database-manage kn-tabs kn-tab p.note {
      margin-top: 0;
      font-style: italic;
      opacity: 0.5; }
    app-database-manage kn-tabs kn-tab .select-database {
      margin: 20px auto;
      padding: 20px;
      width: 400px; }
    app-database-manage kn-tabs kn-tab::after {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
      transition: 0.3s all ease; }
    app-database-manage kn-tabs kn-tab.kn-drag-over::after {
      opacity: 1;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      left: 10px;
      top: 10px; }

kn-datagrid tr td.strong {
  font-weight: bold; }

kn-datagrid tr td.highlight {
  color: #802020; }

kn-datagrid tr td.note {
  color: gray;
  font-size: 0.8em; }

kn-datagrid tr td.overflow {
  overflow: visible; }

kn-datagrid kn-cell-renderer span.user-database-tag, kn-datagrid kn-cell-renderer span.user-role-tag {
  color: white;
  padding: 4px 7px;
  margin: 0 5px 0 0;
  border-radius: 2px; }

kn-datagrid kn-cell-renderer span.user-ownership {
  color: rgba(0, 0, 0, 0.3); }
  kn-datagrid kn-cell-renderer span.user-ownership > span {
    color: black;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin: 0 4px;
    border-radius: 2px; }

kn-datepicker .viewport {
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-datepicker .viewport::before {
    content: '';
    position: absolute;
    display: block;
    left: calc(50% - 10px);
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  kn-datepicker .viewport.kn-enter, kn-datepicker .viewport.kn-leave {
    transition: 0.3s opacity ease, 0.3s margin-top ease, 0.3s transform ease; }
    kn-datepicker .viewport.kn-enter kn-date-view, kn-datepicker .viewport.kn-enter kn-day-view, kn-datepicker .viewport.kn-enter kn-hour-view, kn-datepicker .viewport.kn-leave kn-date-view, kn-datepicker .viewport.kn-leave kn-day-view, kn-datepicker .viewport.kn-leave kn-hour-view {
      opacity: 1 !important;
      transform: none !important; }
  kn-datepicker .viewport.kn-enter {
    opacity: 0;
    margin-top: 10px; }
  kn-datepicker .viewport.kn-leave, kn-datepicker .viewport.kn-enter.kn-enter-active {
    opacity: 1;
    margin-top: 0; }
  kn-datepicker .viewport.kn-leave.kn-leave-active {
    opacity: 0;
    margin-top: 10px; }

kn-datepicker kn-date-header a, kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a, kn-datepicker kn-time-header a:hover {
  text-decoration: none; }

kn-datepicker kn-date-header a {
  text-align: center;
  font-weight: 900; }

kn-datepicker kn-time-header a {
  font-weight: 400;
  border-radius: 10%; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-hour-view.kn-enter, kn-datepicker kn-hour-view.kn-leave {
  transition: 0.3s opacity ease, 0.3s transform ease; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-hour-view.kn-enter {
  opacity: 0;
  transform: scale(0.7, 0.7); }

kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-date-view.kn-enter.kn-enter-active, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-day-view.kn-enter.kn-enter-active, kn-datepicker kn-hour-view.kn-leave, kn-datepicker kn-hour-view.kn-enter.kn-enter-active {
  opacity: 1;
  transform: scale(1, 1); }

kn-datepicker kn-date-view.kn-leave.kn-leave-active, kn-datepicker kn-day-view.kn-leave.kn-leave-active, kn-datepicker kn-hour-view.kn-leave.kn-leave-active {
  opacity: 0;
  transform: scale(1.4, 1.4); }

kn-datepicker kn-month-view.animated {
  transition: 0.3s transform ease; }

kn-datepicker kn-month-view th, kn-datepicker kn-month-view td {
  text-align: center;
  border: 1px solid transparent; }

kn-datepicker kn-month-view th {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase; }

kn-datepicker kn-month-view td a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker kn-month-view td a, kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:active, kn-datepicker kn-month-view td a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    outline: none; }

kn-datepicker .picker-relative-container {
  position: relative;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  margin: 22px; }
  kn-datepicker .picker-relative-container.format-12-hours {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px; }
  kn-datepicker .picker-relative-container .center {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    z-index: 1;
    border-radius: 50%; }
  kn-datepicker .picker-relative-container .gauge {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: 0 0; }
  kn-datepicker .picker-relative-container li {
    text-align: center;
    border: 1px solid transparent; }
    kn-datepicker .picker-relative-container li::before {
      border-radius: 50%; }
    kn-datepicker .picker-relative-container li.minor a {
      width: 13px;
      height: 13px;
      line-height: 13px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent;
      font-size: 0; }
      kn-datepicker .picker-relative-container li.minor a, kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:active, kn-datepicker .picker-relative-container li.minor a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
        outline: none; }
    kn-datepicker .picker-relative-container li:not(.minor) a {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent; }
      kn-datepicker .picker-relative-container li:not(.minor) a, kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:active, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        outline: none; }

kn-datepicker .period-selector a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker .period-selector a, kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:active, kn-datepicker .period-selector a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    outline: none; }

.kn-ripple {
  overflow: hidden;
  position: relative; }

.kn-ripple.kn-ripple-unbounded {
  overflow: visible; }

.kn-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0); }

kn-export-button kn-menu {
  display: block;
  position: relative; }
  kn-export-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-export-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-export-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-export-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-export-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-export-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-export-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-export-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-export-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-export-button kn-menu kn-spinner {
    left: 32px; }

button.form-button, .form-input button {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 30px;
  font-size: 16px;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s; }
  button.form-button[disabled], .form-input button[disabled] {
    box-shadow: none; }
  button.form-button::-moz-focus-inner, .form-input button::-moz-focus-inner {
    border: none; }
  button.form-button::after, .form-input button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    bottom: -25%;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    transition: 0.2s all ease; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
    button.form-button:not([disabled]):active::after, .form-input button:not([disabled]):active::after {
      bottom: -70%;
      left: -50%;
      height: 200%;
      width: 200%;
      opacity: 0.5; }

@keyframes reveal-back-link {
  to {
    opacity: 1;
    left: calc(50% - 700px); } }

.form-container.heading, .form-container .form-loader-bar {
  position: relative; }
  .form-container.heading::before, .form-container.heading::after, .form-container .form-loader-bar::before, .form-container .form-loader-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    height: 5px;
    z-index: 3; }
  .form-container.heading::before, .form-container .form-loader-bar::before {
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.3s opacity ease; }
  .form-container.heading::after, .form-container .form-loader-bar::after {
    left: 0%;
    right: 100%;
    opacity: 0; }

.loading .form-container.heading::before, .loading .form-container.heading::after, .loading .form-container .form-loader-bar::before, .loading .form-container .form-loader-bar::after {
  opacity: 1; }

.loading .form-container.heading::after, .loading .form-container .form-loader-bar::after {
  animation: indeterminate 1s linear infinite; }

.form-container {
  margin: 30px 0; }
  .form-container.heading {
    position: relative;
    margin: 0;
    padding: 0; }
  .form-container h1, .form-container p, .form-container .form-layout {
    margin: auto;
    max-width: 1200px; }
  .form-container h1 {
    padding: 30px 0;
    margin: 0 auto;
    border: none; }
  .form-container .form-back {
    position: absolute;
    opacity: 0;
    left: calc(50% - 750px);
    top: calc(50% - 32px);
    transition: 0.3s all ease;
    animation-name: reveal-back-link;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
    .form-container .form-back::after {
      content: '';
      position: absolute;
      display: block;
      width: 64px;
      height: 64px;
      left: 20px;
      border-radius: 50%;
      transition: 0.3s all ease;
      transform: rotateY(45deg); }
    .form-container .form-back i {
      position: absolute;
      z-index: 10;
      font-size: 48px;
      line-height: 64px;
      text-align: center;
      width: 64px;
      height: 64px; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      left: 0;
      transform: rotateY(0); }
    .form-container .form-back:active::after {
      transition: none; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px; }
  .form-footer div:only-child {
    margin-left: auto; }

.form-actions-info {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  margin: 0 1em;
  white-space: nowrap; }
  .form-actions-info i.material-icons {
    padding: 0 0.3em; }

.form-buttons {
  text-align: right; }
  .form-buttons button {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    width: auto;
    margin-left: 10px;
    padding: 0 30px; }
    .form-buttons button[disabled] {
      box-shadow: none; }
    .form-buttons button::-moz-focus-inner {
      border: none; }
    .form-buttons button::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    .form-buttons button:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      .form-buttons button:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }

.form-errors {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .form-errors li {
    margin: 2px 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .form-errors li strong {
      display: flex;
      align-items: center;
      color: white;
      padding: 0.3em 0.5em;
      margin-right: 1em; }
      .form-errors li strong i {
        padding-right: 0.3em; }

.form-layout .info-bar {
  margin: 15px;
  padding: 15px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .info-bar strong {
    font-weight: 400; }

.form-layout .form-grid {
  display: flex;
  flex-direction: column; }

.form-layout .form-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }
  .form-layout .form-box .title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 5px;
    height: 34px;
    line-height: 34px; }
    .form-layout .form-box .title h2 {
      flex: 1;
      padding-left: 8px;
      margin: 0;
      font-weight: 800;
      font-size: 1em;
      text-transform: uppercase; }
    .form-layout .form-box .title .side-action {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      height: 24px;
      margin-left: 5px; }
      .form-layout .form-box .title .side-action i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .title .side-action:hover, .form-layout .form-box .title .side-action:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .title .side-action:active {
        opacity: 1; }
      .form-layout .form-box .title .side-action[disabled] {
        opacity: 0.3;
        background: none; }
  .form-layout .form-box .content {
    flex-grow: 1;
    padding: 0 15px 15px 15px; }
    .form-layout .form-box .content:first-child {
      padding-top: 15px; }
  .form-layout .form-box .info-bar {
    margin: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none; }
  .form-layout .form-box .container {
    display: flex; }
    .form-layout .form-box .container .content {
      flex: 1;
      width: 0; }
    .form-layout .form-box .container .side-actions {
      display: flex;
      align-items: center;
      justify-content: center; }
      .form-layout .form-box .container .side-actions a {
        display: inline-block;
        margin: 0;
        padding: 5px;
        opacity: 0.7;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
        height: 24px;
        margin: 10px; }
        .form-layout .form-box .container .side-actions a i {
          vertical-align: top;
          transition: all 0.5s ease;
          display: inline-block;
          width: 24px;
          height: 24px;
          overflow: hidden; }
        .form-layout .form-box .container .side-actions a:hover, .form-layout .form-box .container .side-actions a:focus {
          opacity: 1;
          text-decoration: none; }
        .form-layout .form-box .container .side-actions a:active {
          opacity: 1; }
        .form-layout .form-box .container .side-actions a[disabled] {
          opacity: 0.3;
          background: none; }
  .form-layout .form-box .alt p {
    margin: 0.5em;
    padding: 0; }
  .form-layout .form-box .alt-actions {
    display: flex; }
    .form-layout .form-box .alt-actions a {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 5px 7px;
      height: 24px; }
      .form-layout .form-box .alt-actions a i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .alt-actions a:hover, .form-layout .form-box .alt-actions a:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .alt-actions a:active {
        opacity: 1; }
      .form-layout .form-box .alt-actions a[disabled] {
        opacity: 0.3;
        background: none; }
      .form-layout .form-box .alt-actions a i.material-icons {
        margin-right: 5px; }

.form-layout .form-inline-box {
  margin: 15px; }
  .form-layout .form-inline-box .title h3 {
    flex: 1;
    padding: 2px 0 0 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center; }

.form-layout .form-expanssion {
  margin: 15px 0;
  z-index: 1; }
  .form-layout .form-expanssion .form-box {
    margin: 0 15px;
    transition: 0.2s margin ease;
    position: relative;
    box-shadow: none; }
    .form-layout .form-expanssion .form-box::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .form-expanssion .form-box.expanded {
    margin: 30px 15px; }
  .form-layout .form-expanssion .form-box:first-child {
    margin-top: 0; }
  .form-layout .form-expanssion .form-box:last-child {
    margin-bottom: 0; }

.form-layout .row {
  display: flex;
  flex-direction: row;
  width: 100%; }

.form-layout .column {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .form-layout .column .column-spacer {
    height: 100%; }

.form-layout .form-input {
  flex: 1;
  position: relative;
  padding: 3px 0;
  min-width: 0; }
  .form-layout .form-input.inlined {
    margin: 0;
    flex-grow: 0;
    min-width: auto; }
  .form-layout .form-input > * {
    margin: 0 10px; }
  .form-layout .form-input > input, .form-layout .form-input > select {
    width: calc(100% - 20px); }
  .form-layout .form-input > kn-control-messages {
    margin: -18px 0 0 15px; }

.form-layout .flex-1 {
  flex: 1; }

.form-layout .flex-2 {
  flex: 2; }

.form-layout .flex-3 {
  flex: 3; }

.form-layout .flex-4 {
  flex: 4; }

.form-layout .flex-5 {
  flex: 5; }

.form-layout .flex-6 {
  flex: 6; }

.form-layout .flex-start {
  justify-content: flex-start; }

.form-layout .flex-end {
  justify-content: flex-end; }

.form-layout .row.flex-reverse {
  flex-direction: row-reverse; }

.form-layout .column.flex-reverse {
  flex-direction: column-reverse; }

.form-layout .popover {
  position: relative;
  height: 34px; }
  .form-layout .popover kn-menu-activator {
    cursor: pointer; }
  .form-layout .popover .side-action {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    height: 24px; }
    .form-layout .popover .side-action i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .form-layout .popover .side-action:hover, .form-layout .popover .side-action:focus {
      opacity: 1;
      text-decoration: none; }
    .form-layout .popover .side-action:active {
      opacity: 1; }
    .form-layout .popover .side-action[disabled] {
      opacity: 0.3;
      background: none; }

kn-attached-portal .kn-form-layout-menu-content {
  z-index: 200;
  position: absolute;
  left: calc(100% - 490px);
  top: 40px;
  width: 500px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    font-weight: normal;
    margin: 0;
    padding: 15px 15px 15px 20px; }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:focus {
      opacity: 1;
      text-decoration: none; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:active {
      opacity: 1; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close[disabled] {
      opacity: 0.3;
      background: none; }
  kn-attached-portal .kn-form-layout-menu-content [hidden] {
    display: none; }
  kn-attached-portal .kn-form-layout-menu-content::before {
    position: absolute;
    left: calc(100% - 37px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

.form-slots-table {
  width: 100%;
  table-layout: fixed;
  margin-top: 2em;
  border-collapse: collapse; }
  .form-slots-table th {
    padding: 5px;
    font-weight: 400;
    position: relative; }
    .form-slots-table th::before {
      content: '';
      position: absolute;
      display: block;
      width: calc(100% - 22px);
      height: 100%;
      border: 1px solid transparent;
      top: 0;
      left: 11px; }
    .form-slots-table th.disabled::before {
      background-color: transparent; }
  .form-slots-table td {
    padding: 10px 0; }
  .form-slots-table caption {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1; }

kn-sticky.sticked > .grid-panel {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.grid-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px; }
  .grid-panel .selector {
    width: 200px; }
  .grid-panel .actions, .grid-panel kn-grid-actions {
    display: flex;
    flex-grow: 1;
    font-size: 0; }
  .grid-panel .widgets {
    display: flex; }
    .grid-panel .widgets > *:not(:last-child) {
      margin-right: 10px; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    padding: 5px 7px;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    display: inline-block;
    line-height: 24px; }
    .grid-panel .selector a i, .grid-panel .actions a i, .grid-panel kn-grid-actions a i {
      vertical-align: top;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      opacity: 1; }
      .grid-panel .selector a:hover i, .grid-panel .actions a:hover i, .grid-panel kn-grid-actions a:hover i {
        opacity: 1; }
    .grid-panel .selector a:hover, .grid-panel .selector a:focus, .grid-panel .selector a:active, .grid-panel .actions a:hover, .grid-panel .actions a:focus, .grid-panel .actions a:active, .grid-panel kn-grid-actions a:hover, .grid-panel kn-grid-actions a:focus, .grid-panel kn-grid-actions a:active {
      text-decoration: none; }

kn-grid-preset kn-menu {
  display: block;
  position: relative;
  width: 300px; }
  kn-grid-preset kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-preset kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-preset kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-preset kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-preset kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-preset kn-menu kn-menu-activator {
    display: block;
    opacity: 1; }

kn-grid-preset kn-menu-activator > div {
  padding: 0;
  margin: 0;
  line-height: 24px;
  display: flex;
  align-items: center; }
  kn-grid-preset kn-menu-activator > div[hidden] {
    display: none; }
  kn-grid-preset kn-menu-activator > div i {
    padding: 0; }
  kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
      opacity: 1; }
  kn-grid-preset kn-menu-activator > div span {
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    kn-grid-preset kn-menu-activator > div span.template-name {
      font-style: normal; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.ownerUid {
        font-size: 80%;
        font-style: italic; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.material-icons {
        font-size: 125%;
        vertical-align: middle; }
  kn-grid-preset kn-menu-activator > div input {
    height: 34px;
    padding: 0 5px;
    width: calc(100% - 10px);
    min-width: 0;
    border: none;
    background-color: transparent;
    font-family: Source Sans Pro;
    font-size: 16px;
    outline: none; }
  kn-grid-preset kn-menu-activator > div a {
    opacity: 0.7; }

kn-grid-preset kn-menu-content kn-select {
  width: 100%; }

kn-grid-preset kn-menu-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-grid-preset kn-menu-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-grid-preset kn-menu-content li:not(.user-select) span, kn-grid-preset kn-menu-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-grid-preset kn-menu-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  width: 100%; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-grid-query-filter kn-menu {
  display: block;
  position: relative; }
  kn-grid-query-filter kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-query-filter kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-query-filter kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-query-filter kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 5px 7px; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50px;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
      position: absolute;
      left: calc(50% - 10px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-attached-portal .kn-grid-menu-content {
    position: absolute;
    z-index: 20;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-attached-portal .kn-grid-menu-content::before {
      position: absolute;
      left: calc(100% - 100px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 0; }
    kn-grid-query-filter kn-menu kn-menu-activator > * {
      height: 24px;
      padding: 5px;
      transition: color 0.5s ease; }
      kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
        opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator > span {
      display: flex; }
    kn-grid-query-filter kn-menu kn-menu-activator > a {
      opacity: 0.7; }

kn-grid-reset {
  display: block;
  position: relative;
  padding: 0; }
  kn-grid-reset.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-reset kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-reset kn-menu-activator[hidden] {
      display: none; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-reset kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-reset kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-reset kn-menu-activator {
    padding: 0 7px; }
    kn-grid-reset kn-menu-activator i {
      padding: 5px 0; }
      kn-grid-reset kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-grid-reset > *:not(.disabled) {
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus {
      opacity: 1; }
  kn-grid-reset > span {
    display: flex; }
  kn-grid-reset > a {
    opacity: 0.7;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
    kn-grid-reset > a.disabled {
      cursor: default;
      pointer-events: none; }

kn-grid-search {
  position: relative;
  height: 50px;
  margin: -8px -8px -8px 0; }
  kn-grid-search input[type='search'] {
    border: none;
    padding: 0 10px 0 40px;
    height: 100%;
    width: 0;
    vertical-align: top;
    transition: 0.3s all ease; }
    kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
      width: 250px;
      outline: none; }
  kn-grid-search::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center; }

header.liner {
  height: 80px;
  display: flex;
  justify-content: space-between;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  header.liner > div {
    display: flex;
    align-items: center; }
  header.liner .logo {
    outline: none; }
    header.liner .logo img {
      margin: 10px; }
  header.liner button.main-action {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    margin: 0 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
    header.liner button.main-action[disabled] {
      box-shadow: none; }
    header.liner button.main-action::-moz-focus-inner {
      border: none; }
    header.liner button.main-action::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    header.liner button.main-action:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      header.liner button.main-action:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
  header.liner kn-menu {
    z-index: 2;
    position: relative; }
    header.liner kn-menu.expanded {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
    header.liner kn-menu kn-menu-activator {
      display: flex;
      padding: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
      outline: none; }
    header.liner kn-menu kn-menu-content {
      position: absolute;
      min-width: 100%;
      left: 0;
      margin-top: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      z-index: 100; }
      header.liner kn-menu kn-menu-content[hidden] {
        opacity: 0;
        margin-top: -10px;
        transition: all 0.3s ease; }
      header.liner kn-menu kn-menu-content ul {
        padding: 0;
        margin: 0;
        list-style-type: none; }
        header.liner kn-menu kn-menu-content ul li {
          padding: 0;
          margin: 0; }
      header.liner kn-menu kn-menu-content a {
        padding: 10px;
        display: block;
        white-space: nowrap;
        transition: all 0.3s ease; }
        header.liner kn-menu kn-menu-content a:hover {
          text-decoration: none; }

kn-attached-portal .header-liner.kn-menu-content {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 100; }
  kn-attached-portal .header-liner.kn-menu-content[hidden] {
    opacity: 0;
    margin-top: -10px;
    transition: all 0.3s ease; }
  kn-attached-portal .header-liner.kn-menu-content ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    kn-attached-portal .header-liner.kn-menu-content ul li {
      padding: 0;
      margin: 0; }
  kn-attached-portal .header-liner.kn-menu-content a {
    padding: 10px;
    display: block;
    white-space: nowrap;
    transition: all 0.3s ease; }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      text-decoration: none; }

header.liner .database-menu::before, header.liner .database-menu::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 1px;
  height: 40px;
  transition: top 0.5s ease; }

header.liner .database-menu::before {
  left: 0; }

header.liner .database-menu::after {
  right: 0; }

header.liner .database-menu.expanded::before, header.liner .database-menu.expanded::after, header.liner .database-menu:hover::before, header.liner .database-menu:hover::after {
  top: -50px; }

header.liner .database-menu.database-menu-hidden {
  display: none; }

header.liner .database-menu kn-database-selector {
  border: none; }
  header.liner .database-menu kn-database-selector .filter {
    font-size: 0; }
    header.liner .database-menu kn-database-selector .filter .clear {
      padding: 0 20px; }
    header.liner .database-menu kn-database-selector .filter:hover .clear {
      background-image: url("../kn-theme-strio/img/clear.svg"); }
  header.liner .database-menu kn-database-selector ul {
    max-height: 70%; }
    header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
      left: 0; }
    header.liner .database-menu kn-database-selector ul li a:hover {
      text-decoration: none; }

header.liner .database-menu kn-menu-activator {
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding-right: 40px; }
  header.liner .database-menu kn-menu-activator strong {
    display: block;
    font-weight: normal; }
  header.liner .database-menu kn-menu-activator .description {
    display: block; }
  header.liner .database-menu kn-menu-activator::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 32px;
    width: 16px;
    height: 16px;
    mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    transform: rotate(-90deg);
    transition: transform 0.5s ease; }
  header.liner .database-menu kn-menu-activator:hover::after {
    transform: rotate(0deg); }

header.liner .database-menu.expanded kn-menu-activator::after {
  transform: rotate(-180deg); }

header.liner > div:first-child, header.liner kn-navbar {
  flex: 1; }

header.liner nav > ul, header.liner kn-navbar > ul {
  height: 80px;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  display: flex; }
  header.liner nav > ul > li, header.liner kn-navbar > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
      display: block;
      margin: 10px 3px;
      height: 58px;
      padding: 0 18px;
      line-height: 58px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      header.liner nav > ul > li > a, header.liner nav > ul > li > a:hover, header.liner nav > ul > li > a:focus, header.liner nav > ul > li > kn-menu-activator, header.liner nav > ul > li > kn-menu-activator:hover, header.liner nav > ul > li > kn-menu-activator:focus, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > a:focus, header.liner kn-navbar > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > kn-menu-activator:focus {
        text-decoration: none; }

header.liner kn-navbar kn-menu {
  margin: 10px 3px;
  height: 60px;
  padding: 0 !important; }

header.liner kn-navbar kn-menu-activator {
  height: 60px;
  padding: 0 8px;
  align-items: center; }

kn-attached-portal .kn-navbar-expansion ul {
  margin: 0 10px;
  padding: 0;
  list-style-type: none; }
  kn-attached-portal .kn-navbar-expansion ul > li {
    margin: 0;
    padding: 0; }
    kn-attached-portal .kn-navbar-expansion ul > li > a {
      display: block;
      padding: 0 18px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      kn-attached-portal .kn-navbar-expansion ul > li > a, kn-attached-portal .kn-navbar-expansion ul > li > a:hover, kn-attached-portal .kn-navbar-expansion ul > li > a:focus {
        text-decoration: none; }

header.liner .user-menu kn-menu-activator {
  min-width: 120px;
  flex-direction: row-reverse;
  align-items: center; }
  header.liner .user-menu kn-menu-activator img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    background-image: url("../img/noavatar.svg"); }
  header.liner .user-menu kn-menu-activator kn-menu-content {
    right: 0; }

header.liner .user-menu kn-menu-content {
  right: 0;
  left: initial; }
  header.liner .user-menu kn-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-attached-portal .user-menu-content {
  right: 0;
  left: initial; }
  kn-attached-portal .user-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-input label, kn-input [kn-hint] {
  font-size: 14px; }

kn-input [kn-prefix], kn-input [kn-suffix] {
  display: flex; }

kn-input .kn-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-input .kn-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input .kn-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input.disabled .kn-input-container, kn-input.readonly .kn-input-container {
  border-bottom-style: dotted; }

kn-input.focused .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.focused .kn-input-underline::before, kn-input.focused .kn-input-underline::after {
  z-index: 111; }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.ng-touched.ng-pending .kn-input-underline::before, kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::after {
  top: -4px;
  height: 5px; }

kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-input input {
  min-height: 24px; }
  kn-input input:-webkit-autofill {
    -webkit-animation-name: kill-autofill;
    -webkit-animation-fill-mode: both; }

@-webkit-keyframes kill-autofill {
  to {
    background: transparent; } }

kn-date-input label, kn-date-input [kn-hint] {
  font-size: 14px; }

kn-date-input [kn-prefix], kn-date-input [kn-suffix] {
  display: flex; }

kn-date-input .kn-date-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-date-input .kn-date-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input .kn-date-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input.disabled .kn-date-input-container, kn-date-input.readonly .kn-date-input-container {
  border-bottom-style: dotted; }

kn-date-input.focused .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.focused .kn-date-input-underline::before, kn-date-input.focused .kn-date-input-underline::after {
  z-index: 111; }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before, kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::after {
  top: -4px;
  height: 5px; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-date-input input {
  min-height: 24px;
  text-align: right; }

kn-date-input .input-button i.material-icons {
  opacity: 0.5;
  transition: 0.3s opacity ease; }
  kn-date-input .input-button i.material-icons:hover, kn-date-input .input-button i.material-icons:focus {
    opacity: 1; }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  opacity: 0.5; }

kn-date-input .input-button > a {
  display: flex;
  text-decoration: none; }

@-moz-document url-prefix() {
  kn-date-input input {
    clip-path: inset(0 25px 0 0);
    margin-right: -20px !important;
    min-width: 70px !important; } }

kn-kcuni-settings {
  display: block;
  margin: 20px; }
  kn-kcuni-settings p strong {
    font-weight: 400; }
  kn-kcuni-settings .settings {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
    margin: 0 -10px 10px; }
    kn-kcuni-settings .settings kn-input {
      flex: 1; }
    kn-kcuni-settings .settings button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      margin-left: 10px; }
      kn-kcuni-settings .settings button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      kn-kcuni-settings .settings button:hover, kn-kcuni-settings .settings button:focus {
        opacity: 1;
        text-decoration: none; }
      kn-kcuni-settings .settings button:active {
        opacity: 1; }
      kn-kcuni-settings .settings button[disabled] {
        opacity: 0.3;
        background: none; }
  kn-kcuni-settings .message {
    padding: 10px;
    vertical-align: center; }
    kn-kcuni-settings .message i {
      vertical-align: bottom; }
  kn-kcuni-settings .doc-link {
    display: block;
    padding-top: 10px;
    margin-bottom: 20px;
    float: left; }
    kn-kcuni-settings .doc-link.app-link {
      float: right; }

.app-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }
  .app-loading-screen p {
    padding: 5px 10px;
    margin: 0;
    border-radius: 3px; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 600px;
  font-family: 'Source Sans Pro';
  font-size: 16px; }

input {
  font-family: 'Source Sans Pro';
  font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo 2'; }

h1 {
  font-weight: 300;
  font-size: 48px;
  padding-bottom: 10px; }

a {
  text-decoration: none; }

a:hover, a:focus {
  text-decoration: underline; }

kn-app-main {
  display: block; }

[knBackgroundFocusable] {
  outline: none; }

.country-display,
kn-select.country .option,
kn-select.country .kn-option-content {
  height: 24px;
  line-height: 24px; }
  .country-display img,
  kn-select.country .option img,
  kn-select.country .kn-option-content img {
    width: 24px;
    height: 16px;
    margin: 4px 4px 4px 0;
    vertical-align: bottom;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.flat-button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }
  .flat-button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  .flat-button:hover, .flat-button:focus {
    opacity: 1;
    text-decoration: none; }
  .flat-button:active {
    opacity: 1; }
  .flat-button[disabled] {
    opacity: 0.3;
    background: none; }

.flat-table {
  width: 100%;
  border-collapse: collapse; }
  .flat-table tbody tr {
    height: 55px; }
  .flat-table tbody td {
    transition: 0.3s background-color ease;
    padding: 10px; }
  .flat-table thead td {
    padding: 10px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7; }
  .flat-table .actions {
    text-align: right; }
    .flat-table .actions button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer; }
      .flat-table .actions button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .flat-table .actions button:hover, .flat-table .actions button:focus {
        opacity: 1;
        text-decoration: none; }
      .flat-table .actions button:active {
        opacity: 1; }
      .flat-table .actions button[disabled] {
        opacity: 0.3;
        background: none; }

kn-modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }

kn-modal.confirmation-dialog .overlay {
  display: flex;
  align-items: center;
  justify-content: center; }
  kn-modal.confirmation-dialog .overlay.kn-enter, kn-modal.confirmation-dialog .overlay.kn-leave {
    transition: 0.3s opacity ease; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container, kn-modal.confirmation-dialog .overlay.kn-leave .container {
      transition: 0.3s transform ease, 0.3s margin-top ease-out; }
  kn-modal.confirmation-dialog .overlay.kn-enter {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container {
      transform: perspective(1000px) rotate3d(1, 0, 0, 60deg); }
  kn-modal.confirmation-dialog .overlay.kn-leave, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active {
    opacity: 1; }
    kn-modal.confirmation-dialog .overlay.kn-leave .container, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active .container {
      transform: scale(1); }
  kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active .container {
      transform: scale(0.8);
      margin-top: 100px; }
  kn-modal.confirmation-dialog .overlay .container {
    overflow-y: auto;
    min-width: 300px;
    max-width: 750px;
    min-height: 200px;
    display: flex;
    flex-direction: column; }
  kn-modal.confirmation-dialog .overlay .content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; }
    kn-modal.confirmation-dialog .overlay .content span {
      white-space: pre-line;
      text-align: center;
      margin-top: 10px; }
  kn-modal.confirmation-dialog .overlay .buttons {
    display: flex; }
    kn-modal.confirmation-dialog .overlay .buttons button {
      position: relative;
      flex: 1;
      padding: 15px;
      min-width: 150px;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.5s ease, background-color 0.5s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        content: '';
        width: 60%;
        height: 3px;
        position: absolute;
        display: block;
        top: 0;
        left: 20%;
        opacity: 0.3; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover::before {
        opacity: 1; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        transition: color 0.2s ease, background-color 0.2s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button:active {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
        padding: 16px 15px 14px 15px; }

kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-options-container .kn-options-container-viewport {
    max-height: 310px; }
  kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-options-container .kn-options-container-filter .clear::before, kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-select.focused kn-options-container .kn-options-container-viewport, kn-input.focused kn-options-container .kn-options-container-viewport {
  z-index: 1000; }

kn-optgroup > strong {
  text-transform: uppercase; }

kn-option:not(.disabled):hover {
  transition: none; }

kn-option .kn-option-selector {
  transition: 0.3s color ease; }

kn-attached-portal .kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-attached-portal .kn-options-container .kn-options-container-viewport {
    max-height: 310px;
    overflow-y: scroll; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before, kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-attached-portal .kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-ownership-display > span {
  padding: 4px;
  margin: 0 4px;
  border-radius: 2px; }

kn-print-button kn-menu {
  display: block;
  position: relative; }
  kn-print-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-print-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-print-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-print-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-print-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-print-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-print-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-print-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-print-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-print-button kn-menu kn-menu-content {
    min-width: 200px; }
  kn-print-button kn-menu kn-spinner {
    left: 14px; }

kn-attached-portal .kn-menu-content.kn-print-button-content {
  min-width: 200px; }

kn-query-filter .query-filter > div[knFilterGroup] {
  display: block;
  min-width: 1000px;
  padding: 20px; }

kn-query-filter .filter-group {
  margin: auto; }
  kn-query-filter .filter-group .new-filter-actions {
    align-items: center;
    display: flex; }
    kn-query-filter .filter-group .new-filter-actions button {
      margin: 0 0 0 10px;
      padding: 5px 10px;
      border-radius: 3px;
      border: none;
      height: 30px;
      text-transform: uppercase; }
    kn-query-filter .filter-group .new-filter-actions .coalescing-operator {
      display: flex;
      align-items: center;
      margin-right: 10px; }
      kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
        content: '';
        display: block;
        flex: 1;
        height: 1px; }
    kn-query-filter .filter-group .new-filter-actions kn-select {
      width: 200px; }

kn-query-filter ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-query-filter li {
  padding: 10px 0 10px 10px; }

kn-query-filter li.boolean-operator {
  padding: 0;
  position: relative;
  height: 1px; }
  kn-query-filter li.boolean-operator span {
    position: absolute;
    display: block;
    padding: 0 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    top: -10px;
    left: 20px;
    text-transform: uppercase; }

kn-query-filter li[knFilterItem] {
  padding: 10px 0 10px 10px;
  display: flex;
  align-items: center;
  height: 40px; }
  kn-query-filter li[knFilterItem] > span {
    margin: 5px; }
  kn-query-filter li[knFilterItem]:first-child {
    padding-top: 0; }

kn-query-filter .filter-group .filter-name, kn-query-filter .filter-group .coalescing-operator {
  width: 225px; }

kn-query-filter .filter-group .coalescing-operator {
  width: 190px; }

kn-query-filter .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 205px; }

kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 170px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 185px; }

kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 150px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 165px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 130px; }

kn-query-filter .filter-name input {
  font-weight: bold; }

kn-query-filter .filter-operator {
  width: 150px; }
  kn-query-filter .filter-operator kn-input input {
    text-align: center; }
  kn-query-filter .filter-operator > * {
    width: 100%; }

kn-query-filter .filter-value {
  flex: 1; }
  kn-query-filter .filter-value .presenter {
    flex: 1;
    display: flex;
    align-items: center; }
    kn-query-filter .filter-value .presenter kn-input, kn-query-filter .filter-value .presenter kn-select {
      flex: 1; }
    kn-query-filter .filter-value .presenter kn-date-input span.required {
      display: none; }
    kn-query-filter .filter-value .presenter > span {
      margin: 0 10px; }
      kn-query-filter .filter-value .presenter > span:first-child {
        margin-left: 0; }

kn-query-filter .filter-actions {
  width: 70px;
  text-align: right; }

kn-query-filter .filter-actions button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  height: 34px; }
  kn-query-filter .filter-actions button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  kn-query-filter .filter-actions button:hover, kn-query-filter .filter-actions button:focus {
    opacity: 1;
    text-decoration: none; }
  kn-query-filter .filter-actions button:active {
    opacity: 1; }
  kn-query-filter .filter-actions button[disabled] {
    opacity: 0.3;
    background: none; }

kn-query-filter .footer {
  padding: 20px;
  text-align: right;
  display: flex; }
  kn-query-filter .footer button {
    padding: 5px 10px;
    margin-left: 20px;
    border-radius: 3px;
    border: none;
    height: 30px;
    text-transform: uppercase; }
  kn-query-filter .footer .left {
    text-align: left;
    flex: 1; }
    kn-query-filter .footer .left button {
      margin-left: 0;
      margin-right: 20px; }

kn-query-filter .filter-placeholder {
  width: 400px;
  margin: 30px auto 50px auto;
  text-align: center; }
  kn-query-filter .filter-placeholder span.placeholder {
    display: block; }
  kn-query-filter .filter-placeholder > i.material-icons {
    font-size: 150px; }
  kn-query-filter .filter-placeholder p {
    margin-top: -10px;
    margin-bottom: 50px;
    font-size: 24px;
    display: none; }
  kn-query-filter .filter-placeholder kn-select .kn-select-container {
    padding: 7px;
    transition: 0.3s all ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:hover {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
      transition: none;
      box-shadow: none; }

kn-radio input[type='radio'] + .kn-radio-box::before {
  border-radius: 50%; }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border-radius: 50%;
  transition: 0.3s border-color ease; }

kn-radio .kn-radio-mark {
  transition: 0.2s border linear; }

kn-radio .kn-radio-box, kn-radio label {
  transition: 0.3s color ease; }

kn-select label, kn-select [kn-hint] {
  font-size: 14px; }

kn-select [kn-prefix], kn-select [kn-suffix] {
  display: flex; }

kn-select .kn-select-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-select .kn-select-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select .kn-select-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select.disabled .kn-select-container, kn-select.readonly .kn-select-container {
  border-bottom-style: dotted; }

kn-select.focused .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.focused .kn-select-underline::before, kn-select.focused .kn-select-underline::after {
  z-index: 111; }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.ng-touched.ng-pending .kn-select-underline::before, kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::after {
  top: -4px;
  height: 5px; }

kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-select .kn-select-header {
  line-height: 24px; }
  kn-select .kn-select-header > * {
    min-height: 24px; }
  kn-select .kn-select-header .separator {
    padding-right: 0.3em; }
  kn-select .kn-select-header .option {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

kn-select.disabled .kn-select-header {
  pointer-events: none; }

kn-spinner {
  position: absolute;
  margin: 0 auto;
  width: 36px; }
  kn-spinner:before {
    content: '';
    display: block;
    padding-top: 100%; }
  kn-spinner .circular {
    animation: strio-spinner-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  kn-spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: strio-spinner-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: square;
    stroke-width: 8px; }

@keyframes strio-spinner-rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes strio-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

kn-tabs.boxlist div.tabs-viewport {
  margin-top: 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }

kn-tabs.boxlist div.tabs-labels ul {
  width: 100%; }

kn-tabs.boxlist div.tabs-labels li a {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  width: 170px;
  height: 150px !important;
  transition: 0.3s color ease; }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }

kn-tabs.boxlist div.tabs-labels li.active a {
  border-radius: 5px; }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    position: absolute;
    left: calc(50% - 15px);
    bottom: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; }

kn-tabs.notebook div.tabs-labels li a {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  transition: 0.3s color ease; }
  kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }
  kn-tabs.notebook div.tabs-labels li a::before {
    content: '';
    display: block;
    position: absolute;
    width: 80%;
    height: 4px;
    left: 10%;
    top: -10px;
    opacity: 0;
    z-index: 10;
    transform: scale(0.8);
    transition: 0.3s all ease; }
  kn-tabs.notebook div.tabs-labels li a:hover::before, kn-tabs.notebook div.tabs-labels li a:focus::before {
    opacity: 1;
    top: 0;
    transform: scale(1); }

kn-tabs.notebook div.tabs-labels li.active a::before {
  opacity: 1;
  top: 0;
  transform: scale(1);
  width: 100%;
  left: 0; }

kn-textarea label, kn-textarea [kn-hint] {
  font-size: 14px; }

kn-textarea [kn-prefix], kn-textarea [kn-suffix] {
  display: flex; }

kn-textarea .kn-textarea-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-textarea .kn-textarea-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea .kn-textarea-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea.disabled .kn-textarea-container, kn-textarea.readonly .kn-textarea-container {
  border-bottom-style: dotted; }

kn-textarea.focused .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.focused .kn-textarea-underline::before, kn-textarea.focused .kn-textarea-underline::after {
  z-index: 111; }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before, kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::after {
  top: -4px;
  height: 5px; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-textarea {
  height: 100%;
  display: flex !important;
  flex-direction: column; }
  kn-textarea .kn-textarea-container {
    flex: 1; }
  kn-textarea textarea {
    height: calc(100% - 20px);
    resize: none; }

kn-timeline {
  position: relative; }
  kn-timeline::before, kn-timeline::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none; }
  kn-timeline::before {
    left: 0; }
  kn-timeline::after {
    right: 0; }
  kn-timeline .time-viewport {
    overflow: hidden; }
  kn-timeline .time-container {
    display: flex;
    margin: 100px 0 50px 0; }
    kn-timeline .time-container > span {
      flex-shrink: 0; }
  kn-timeline .time-segment {
    font-size: 0;
    height: 3px;
    width: calc(50% - 2px); }
  kn-timeline .time-mark {
    position: relative;
    width: 3px;
    height: 3px; }
    kn-timeline .time-mark a {
      position: absolute;
      width: 13px;
      height: 13px;
      top: -5px;
      left: -5px;
      border-radius: 50%;
      z-index: 1;
      outline: none; }
      kn-timeline .time-mark a.selected::after {
        content: '';
        position: absolute;
        display: block;
        width: 23px;
        height: 23px;
        left: -7px;
        top: -7px;
        border-radius: 50%; }
      kn-timeline .time-mark a::before {
        content: '';
        position: absolute;
        display: block;
        width: 53px;
        height: 53px;
        top: -20px;
        left: -20px;
        border-radius: 50%;
        z-index: -1; }
      kn-timeline .time-mark a .date {
        position: absolute;
        display: block;
        white-space: nowrap;
        text-align: center;
        left: 7px;
        top: -68px;
        font-weight: bold;
        transform: translateX(-50%); }
      kn-timeline .time-mark a .year {
        display: block;
        font-weight: normal; }
    kn-timeline .time-mark.pin a {
      width: 9px;
      height: 9px;
      top: -7px;
      left: -7px; }
      kn-timeline .time-mark.pin a::before {
        top: -22px;
        left: -22px; }
      kn-timeline .time-mark.pin a.selected::after {
        left: -9px;
        top: -9px; }
      kn-timeline .time-mark.pin a .date {
        left: 5px;
        top: -70px; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
    kn-timeline .time-mark.today::before {
      content: '';
      position: absolute;
      display: block;
      width: 1px;
      height: 63px;
      left: 1px;
      top: -30px;
      opacity: 0.5; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
  kn-timeline .time-mark.today a .date {
    top: -60px; }
  kn-timeline kn-datepicker .viewport {
    top: -20px; }
  kn-timeline kn-datepicker.calendar-mark .viewport {
    top: 5px; }

kn-toast > div {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  left: 50px;
  bottom: 50px;
  z-index: 1000;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave {
    transition: 0.3s all ease; }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave.kn-leave-active {
    left: 35px;
    opacity: 0; }
  kn-toast > div.kn-leave, kn-toast > div.kn-enter.kn-enter-active {
    left: 50px;
    opacity: 1; }
  kn-toast > div .content {
    display: flex;
    flex-direction: column;
    padding: 15px 20px; }
    kn-toast > div .content span, kn-toast > div .content strong {
      display: block; }
  kn-toast > div a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-align: center; }
    kn-toast > div a, kn-toast > div a:hover, kn-toast > div a:focus, kn-toast > div a:active {
      text-decoration: none; }

kn-audit-display {
  color: rgba(0, 0, 0, 0.5); }
  kn-audit-display strong {
    background-color: rgba(0, 0, 0, 0.07); }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox input[type='checkbox']:focus + .kn-checkbox-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked):hover + .kn-checkbox-box::after, kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked) + .kn-checkbox-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-checkbox.disabled input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled input[type='checkbox']:not(:checked) + .kn-checkbox-box::after {
  background-color: transparent !important; }

kn-checkbox.disabled.indeterminate .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled label, kn-checkbox.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox.ng-touched.ng-invalid .kn-checkbox-box::after {
  border-color: #c04060; }

kn-checkbox.ng-touched.ng-invalid input[type='checkbox']:checked + .kn-checkbox-box::after, kn-checkbox.ng-touched.ng-invalid.indeterminate .kn-checkbox-box::after {
  background-color: #c04060; }

app-print-template-edit {
  background-color: #ffffff; }
  app-print-template-edit > kn-resizable-container .preview {
    border-left: 1px solid rgba(0, 0, 0, 0.15); }
  app-print-template-edit .preview div.tabs-viewport {
    background-color: #f9f7f6; }
  app-print-template-edit kn-codemirror {
    background-color: #ffffff; }
  app-print-template-edit kn-tabs a.sidepanel {
    color: #000000;
    color: rgba(0, 0, 0, 0.8); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):hover, app-print-template-edit kn-tabs a.sidepanel:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-tab.home i.banner {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-tab .no-print-context-placeholder {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-activator {
    color: #000000;
    color: #c04060; }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):hover, app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-menu.errors kn-menu-content {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.8); }

kn-roles-table .role-permissions table thead th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-roles-table .role-permissions table tbody.permissions-matrix td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); }

kn-roles-table .role-permissions table tbody.permissions-matrix tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

kn-roles-table .role-permissions .actions button {
  color: #000000; }
  kn-roles-table .role-permissions .actions button:not([disabled]):hover, kn-roles-table .role-permissions .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-roles-table .role-permissions .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-permission-actions-select kn-menu-content {
  background-color: #ffffff; }
  kn-permission-actions-select kn-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-user-edit table.user-roles tbody.user-roles-table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles tr.invalid td {
  background-color: rgba(192, 64, 96, 0.15); }

kn-user-edit table.user-roles thead tr:last-child td {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-user-edit table.user-roles tbody.user-roles-table tr td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles td.actions button {
  color: #000000; }
  kn-user-edit table.user-roles td.actions button:not([disabled]):hover, kn-user-edit table.user-roles td.actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-user-edit table.user-roles td.actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-control-messages > div {
  color: #c04060; }

app-database-manage kn-tabs .tab-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

app-database-manage kn-tabs a i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

app-database-manage kn-tabs li.active a i.material-icons, app-database-manage kn-tabs a:hover i.material-icons, app-database-manage kn-tabs a:focus i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

app-database-manage kn-tabs kn-tab .select-database {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15); }

app-database-manage kn-tabs kn-tab.kn-drag-over::after {
  background-color: rgba(255, 240, 216, 0.3);
  border: 1px dashed #ff9800; }

kn-datepicker .viewport {
  background-color: #ffffff; }
  kn-datepicker .viewport::before {
    border-bottom: 10px solid #f2f2f2; }
  kn-datepicker .viewport .header {
    background-color: #f2f2f2; }

kn-datepicker kn-date-header > *, kn-datepicker kn-time-header > * {
  color: #000000; }

kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a:hover {
  background-color: rgba(0, 0, 0, 0.1); }

kn-datepicker kn-date-header a:active, kn-datepicker kn-time-header a:active {
  background-color: rgba(0, 0, 0, 0.2); }

kn-datepicker kn-date-header a {
  color: rgba(0, 0, 0, 0.5); }

kn-datepicker kn-month-view th {
  color: rgba(0, 0, 0, 0.35); }

kn-datepicker kn-month-view td a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker kn-month-view td a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker kn-month-view td a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container .center {
  background-color: gray; }

kn-datepicker .picker-relative-container .gauge {
  background-color: rgba(0, 0, 0, 0.15); }

kn-datepicker .picker-relative-container li::before {
  background-color: #ffffff; }

kn-datepicker .picker-relative-container li.minor a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li.minor a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li.minor a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.minor::before {
  background-color: rgba(0, 0, 0, 0.8); }

kn-datepicker .picker-relative-container li:not(.minor) a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li:not(.minor) a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li:not(.minor) a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.major::before {
  background-color: #000000; }

kn-datepicker .period-selector a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .period-selector a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .period-selector a.selected {
    background-color: #805848;
    color: #ffffff; }

.kn-ripple-element {
  background-color: rgba(0, 0, 0, 0.05); }

kn-export-button kn-menu.expanded {
  background-color: #0b7244; }

kn-export-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-export-button kn-menu kn-menu-activator, kn-export-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

button.form-button, .form-input button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  button.form-button.danger, .form-input button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  button.form-button[disabled], .form-input button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  button.form-button::after, .form-input button::after {
    background-color: white; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    button.form-button:not([disabled]):hover.danger, button.form-button:not([disabled]):focus.danger, .form-input button:not([disabled]):hover.danger, .form-input button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    button.form-button:not([disabled]):active.danger, .form-input button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-container.heading::before, .form-container .form-loader-bar::before {
  background-color: rgba(128, 88, 72, 0.3); }

.form-container.heading::after, .form-container .form-loader-bar::after {
  background-color: #805848; }

.form-container.heading {
  background-color: #ffffff; }

.form-container .form-back {
  color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:hover, .form-container .form-back:focus {
    color: #ffffff; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      background-color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:active::after {
    background-color: rgba(0, 0, 0, 0.4); }

.form-actions-info {
  color: #c07000; }

.form-buttons button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  .form-buttons button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  .form-buttons button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  .form-buttons button::after {
    background-color: white; }
  .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    .form-buttons button:not([disabled]):hover.danger, .form-buttons button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  .form-buttons button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    .form-buttons button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-errors li {
  background-color: rgba(192, 64, 96, 0.2); }
  .form-errors li strong {
    background-color: #c04060; }

.form-layout .info-bar {
  color: rgba(255, 255, 255, 0.7);
  background-color: #10a060; }
  .form-layout .info-bar.error {
    background-color: #c04060; }
  .form-layout .info-bar strong {
    color: #ffffff; }

.form-layout .form-box {
  background-color: #ffffff; }
  .form-layout .form-box .title {
    color: #009688; }
    .form-layout .form-box .title .side-action {
      color: #000000; }
      .form-layout .form-box .title .side-action:not([disabled]):hover, .form-layout .form-box .title .side-action:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .title .side-action:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .container + .container {
    border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .form-layout .form-box .container .side-actions {
    border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .container .side-actions a {
      color: #000000; }
      .form-layout .form-box .container .side-actions a:not([disabled]):hover, .form-layout .form-box .container .side-actions a:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .container .side-actions a:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .alt {
    background-color: rgba(224, 192, 0, 0.1);
    border-top: 1px solid rgba(224, 192, 0, 0.3); }
  .form-layout .form-box .alt-actions a {
    color: #000000; }
    .form-layout .form-box .alt-actions a:not([disabled]):hover, .form-layout .form-box .alt-actions a:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .alt-actions a:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }

.form-layout .form-inline-box .title {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid rgba(0, 0, 0, 0.15) !important; }

.form-layout .form-inline-box .container {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(224, 192, 0, 0.1); }
  .form-layout .form-inline-box .container + .container {
    border-top: none; }

.form-layout .popover .side-action {
  color: #000000; }
  .form-layout .popover .side-action:not([disabled]):hover, .form-layout .popover .side-action:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-layout .popover .side-action:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-form-layout-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    color: #000000; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-form-layout-menu-content::before {
    border-bottom: 10px solid #ffffff; }

.form-slots-table th {
  color: rgba(0, 0, 0, 0.5); }
  .form-slots-table th::before {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-slots-table th.disabled::before {
    border: 1px solid rgba(0, 0, 0, 0.1); }

.form-slots-table caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

.grid-panel {
  background-color: #10a060; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    color: rgba(255, 255, 255, 0.7); }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-preset kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu kn-menu-activator, kn-grid-preset kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
  transition: color 0.5s ease; }
  kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-activator > div span {
  color: rgba(255, 255, 255, 0.5); }
  kn-grid-preset kn-menu-activator > div span.template-name {
    color: #ffd088; }

kn-grid-preset kn-menu-activator > div input {
  color: #ffffff; }
  kn-grid-preset kn-menu-activator > div input::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-activator > div a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content li:not(.user-select) span:hover, kn-grid-preset kn-menu-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-grid-preset kn-menu-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-grid-preset kn-menu-content kn-select kn-options-container, kn-grid-preset kn-menu-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span:hover, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-options-container, kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-grid-query-filter kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-query-filter kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-query-filter kn-menu kn-menu-activator, kn-grid-query-filter kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
    border-bottom: 10px solid #ffffff; }

kn-attached-portal .kn-grid-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-grid-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-grid-query-filter kn-menu kn-menu-activator {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-query-filter kn-menu kn-menu-activator em {
    color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-activator > * {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease; }
    kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator > span.template-name {
    color: #ffd088; }

kn-attached-portal .kn-menu-content.kn-grid-query-content {
  left: calc(50% - 900px);
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-menu-content.kn-grid-query-content::before {
    left: calc(50% + 375px); }

kn-grid-reset {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-reset.expanded {
    background-color: #0b7244; }
  kn-grid-reset:not(.expanded) kn-menu-activator:focus, kn-grid-reset kn-menu-activator:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset kn-menu-activator, kn-grid-reset kn-menu-activator i {
    color: rgba(255, 255, 255, 0.8); }
  kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i {
    color: #ffffff; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-button-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content) li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-attached-portal .kn-grid-button-content li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-attached-portal .kn-grid-button-content li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset > *:not(.disabled), kn-grid-reset a:not(.disabled) {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus, kn-grid-reset a:not(.disabled):hover, kn-grid-reset a:not(.disabled):focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-reset > *.disabled, kn-grid-reset a.disabled {
    color: rgba(255, 255, 255, 0.3); }

kn-grid-search input[type='search'] {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff; }
  kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
    background-color: rgba(0, 0, 0, 0.4); }
  kn-grid-search input[type='search']::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-search::after {
  background-color: #ffffff; }

header.liner .database-menu::before, header.liner .database-menu::after {
  background-color: rgba(255, 255, 255, 0.1); }

header.liner .database-menu kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  header.liner .database-menu kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  header.liner .database-menu kn-database-selector .filter input {
    color: #ffffff; }
    header.liner .database-menu kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

header.liner .database-menu kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

header.liner .database-menu kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  header.liner .database-menu kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

header.liner .database-menu kn-database-selector ul li strong {
  color: white; }

header.liner .database-menu kn-database-selector ul li span.uid {
  color: #b39b91; }

kn-attached-portal kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  kn-attached-portal kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  kn-attached-portal kn-database-selector .filter input {
    color: #ffffff; }
    kn-attached-portal kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

kn-attached-portal kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

kn-attached-portal kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  kn-attached-portal kn-database-selector ul li a.active::before, kn-attached-portal kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

kn-attached-portal kn-database-selector ul li strong {
  color: white; }

kn-attached-portal kn-database-selector ul li span.uid {
  color: #b39b91; }

header.liner .database-menu kn-menu-activator::after {
  background-color: rgba(255, 255, 255, 0.2); }

header.liner .database-menu kn-menu-activator strong {
  color: #ffffff; }

header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  header.liner nav > ul > li > a.router-link-active, header.liner nav > ul > li > kn-menu-activator.router-link-active, header.liner kn-navbar > ul > li > a.router-link-active, header.liner kn-navbar > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  header.liner nav > ul > li > a:hover, header.liner nav > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  header.liner nav > ul > li > a:not(.router-link-active):focus, header.liner nav > ul > li > kn-menu-activator:not(.router-link-active):focus, header.liner kn-navbar > ul > li > a:not(.router-link-active):focus, header.liner kn-navbar > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

kn-attached-portal .kn-navbar-expansion > ul > li > a, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-navbar-expansion > ul > li > a.router-link-active, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:hover, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:not(.router-link-active):focus, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

header.liner {
  background-color: #805848;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4) 80px); }
  header.liner .logo:hover, header.liner .logo:focus {
    background-color: rgba(255, 255, 255, 0.05); }
  header.liner button.main-action {
    color: white;
    background-color: rgba(128, 88, 72, 0.9);
    background-color: #10a060; }
    header.liner button.main-action.danger {
      background-color: rgba(192, 64, 96, 0.9); }
    header.liner button.main-action[disabled] {
      background-color: rgba(160, 160, 160, 0.5); }
    header.liner button.main-action::after {
      background-color: white; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      background-color: rgba(128, 88, 72, 0.7); }
      header.liner button.main-action:not([disabled]):hover.danger, header.liner button.main-action:not([disabled]):focus.danger {
        background-color: rgba(192, 64, 96, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      background-color: rgba(128, 88, 72, 0.8); }
      header.liner button.main-action:not([disabled]):active.danger {
        background-color: rgba(192, 64, 96, 0.8); }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus, header.liner button.main-action:not([disabled]):active {
      background-color: #58bd90; }
    header.liner button.main-action:not([disabled]):active {
      background-color: #40b380; }
  header.liner kn-menu {
    color: rgba(255, 255, 255, 0.5);
    z-index: 10; }
    header.liner kn-menu.expanded {
      background-color: #805848; }
      header.liner kn-menu.expanded kn-menu-content {
        border-top: 1px solid rgba(255, 255, 255, 0.1); }
    header.liner kn-menu kn-menu-activator:hover, header.liner kn-menu kn-menu-activator:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }
    header.liner kn-menu kn-menu-content {
      background-color: #805848; }
      header.liner kn-menu kn-menu-content a {
        color: rgba(255, 255, 255, 0.5); }
        header.liner kn-menu kn-menu-content a:hover {
          background-color: rgba(255, 255, 255, 0.1);
          color: #ffffff; }

kn-attached-portal .header-liner.kn-menu-content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #805848; }
  kn-attached-portal .header-liner.kn-menu-content a {
    color: rgba(255, 255, 255, 0.5); }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }

header.liner .user-menu kn-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .user-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-input label, kn-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-input label .required {
  color: #c04060; }

kn-input .kn-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-input:not(.disabled):not(.focused) .kn-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-input.focused .kn-input-container {
  border-color: transparent; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  background-color: #805848; }

kn-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  background-color: #c04060; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::before {
  background-color: #ecc6cf; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::after {
  background-color: #c04060; }

kn-input.ng-touched.ng-pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::before {
  background-color: #d9cdc8; }

kn-input input {
  color: #000000; }

kn-input.disabled input {
  color: rgba(0, 0, 0, 0.4); }

kn-input input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input label, kn-date-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-date-input label .required {
  color: #c04060; }

kn-date-input .kn-date-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-date-input:not(.disabled):not(.focused) .kn-date-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-date-input.focused .kn-date-input-container {
  border-color: transparent; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  background-color: #805848; }

kn-date-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::before {
  background-color: #ecc6cf; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::after {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::before {
  background-color: #d9cdc8; }

kn-date-input date-input {
  color: #000000; }

kn-date-input.disabled date-input {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input date-input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input .input-button i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

kn-kcuni-settings p {
  color: rgba(0, 0, 0, 0.5); }
  kn-kcuni-settings p strong {
    color: rgba(0, 0, 0, 0.8); }

kn-kcuni-settings .settings button {
  color: #000000; }
  kn-kcuni-settings .settings button:not([disabled]):hover, kn-kcuni-settings .settings button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-kcuni-settings .settings button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-kcuni-settings .settings:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-kcuni-settings .message {
  color: #c04060;
  background-color: rgba(192, 64, 96, 0.2); }

.app-loading-screen p {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

html, body {
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.8); }

a {
  color: #8040a0; }

kn-input.ownership [kn-prefix] {
  color: #10a060; }

.flat-button {
  color: #000000; }
  .flat-button:not([disabled]):hover, .flat-button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

.flat-table thead td {
  border-bottom: 3px solid #cccccc; }

.flat-table tbody td {
  border-bottom: 1px solid #ebebeb; }

.flat-table tbody tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

.flat-table .actions button {
  color: #000000; }
  .flat-table .actions button:not([disabled]):hover, .flat-table .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-table .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-modal.confirmation-dialog .overlay {
  background-color: rgba(48, 48, 48, 0.9); }
  kn-modal.confirmation-dialog .overlay .container {
    background-color: rgba(40, 40, 40, 0.7); }
  kn-modal.confirmation-dialog .overlay .content {
    color: white; }
  kn-modal.confirmation-dialog .overlay .buttons {
    background-color: rgba(0, 0, 0, 0.2); }
    kn-modal.confirmation-dialog .overlay .buttons button {
      color: rgba(255, 255, 255, 0.5); }
      kn-modal.confirmation-dialog .overlay .buttons button.primary {
        color: rgba(64, 128, 255, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.primary::before {
          background-color: #4080ff; }
        kn-modal.confirmation-dialog .overlay .buttons button.primary:hover, kn-modal.confirmation-dialog .overlay .buttons button.primary:focus {
          background-color: rgba(64, 128, 255, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button.danger {
        color: rgba(255, 64, 72, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.danger::before {
          background-color: #ff4048; }
        kn-modal.confirmation-dialog .overlay .buttons button.danger:hover, kn-modal.confirmation-dialog .overlay .buttons button.danger:focus {
          background-color: rgba(255, 64, 72, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        background-color: white; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        background-color: rgba(255, 255, 255, 0.7);
        color: rgba(0, 0, 0, 0.8); }

kn-options-container {
  background-color: #ffffff; }
  kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-optgroup > strong {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

kn-option.marked {
  background-color: rgba(0, 0, 0, 0.07); }

kn-option:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-option.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-option .kn-option-selector {
  color: rgba(0, 0, 0, 0.3); }

kn-option.selected .kn-option-selector {
  color: #805848; }

kn-attached-portal .kn-options-container {
  background-color: #ffffff; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-attached-portal .kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-attached-portal .kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-attached-portal .kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-ownership-display {
  color: rgba(0, 0, 0, 0.3); }
  kn-ownership-display > span {
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.1); }

kn-print-button kn-menu.expanded {
  background-color: #0b7244; }

kn-print-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-print-button kn-menu kn-menu-activator, kn-print-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-query-filter .query-filter > div[knFilterGroup] {
  color: rgba(0, 0, 0, 0.8); }

kn-query-filter .filter-group .new-filter-actions button {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .filter-group {
  border-left: 10px solid rgba(0, 0, 0, 0.1); }

kn-query-filter li.boolean-operator {
  background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter li.boolean-operator span {
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff; }

kn-query-filter .filter-name [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-operator kn-input [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-value .presenter > span {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-actions button {
  color: #000000; }
  kn-query-filter .filter-actions button:not([disabled]):hover, kn-query-filter .filter-actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter .filter-actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-query-filter .footer {
  background-color: rgba(0, 0, 0, 0.05); }
  kn-query-filter .footer button {
    background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-placeholder > i.material-icons {
  color: rgba(0, 0, 0, 0.35); }

kn-query-filter .filter-placeholder kn-select .kn-select-container {
  border: 1px solid rgba(0, 0, 0, 0.3); }
  kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
    background-color: rgba(0, 0, 0, 0.05); }

kn-query-filter .filter-placeholder kn-select .placeholder {
  color: rgba(0, 0, 0, 0.8); }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-radio input[type='radio']:checked + .kn-radio-box::after {
  border-color: #805848; }

kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border: 7px solid #805848; }

kn-radio input[type='radio']:focus + .kn-radio-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-radio:not(.disabled) input[type='radio']:not(:checked):hover + .kn-radio-box::after, kn-radio:not(.disabled) input[type='radio']:not(:checked) + .kn-radio-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-radio.disabled label, kn-radio.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-radio.disabled input[type='radio']:not(:checked) + .kn-radio-box::after, kn-radio.readonly input[type='radio']:not(:checked) + .kn-radio-box::after {
  background-color: transparent !important; }

kn-radio.disabled input[type='radio'] + .kn-radio-box::after, kn-radio.disabled input[type='radio'] + .kn-radio-box .kn-radio-mark, kn-radio.readonly input[type='radio'] + .kn-radio-box::after, kn-radio.readonly input[type='radio'] + .kn-radio-box .kn-radio-mark {
  border-color: rgba(0, 0, 0, 0.1); }

kn-radio-group.ng-touched.ng-invalid kn-radio .kn-radio-box::after, kn-radio-group.ng-touched.ng-invalid kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border-color: #c04060; }

kn-select label, kn-select [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-select label .required {
  color: #c04060; }

kn-select .kn-select-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-select:not(.disabled):not(.focused) .kn-select-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-select.focused .kn-select-container {
  border-color: transparent; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  background-color: #805848; }

kn-select.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  background-color: #c04060; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::before {
  background-color: #ecc6cf; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::after {
  background-color: #c04060; }

kn-select.ng-touched.ng-pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::before {
  background-color: #d9cdc8; }

kn-select .placeholder {
  color: rgba(0, 0, 0, 0.35); }

.kn-select-dropdown {
  border-left: 1px solid rgba(0, 0, 0, 0.05); }

kn-spinner {
  animation-name: strio-spinner-color-3; }
  kn-spinner .path {
    animation: strio-spinner-dash 1.5s ease-in-out infinite, strio-spinner-color-3 6s ease-in-out infinite; }

@keyframes strio-spinner-color-3 {
  0%, 20% {
    stroke: rgba(128, 88, 72, 0.6); }
  40% {
    stroke: rgba(128, 88, 72, 0.7); }
  60% {
    stroke: rgba(128, 88, 72, 0.8); }
  80% {
    stroke: rgba(128, 88, 72, 0.9); }
  100% {
    stroke: #805848; } }

kn-tabs.boxlist div.tabs-viewport {
  background-color: #ffffff; }

kn-tabs.boxlist div.tabs-labels li a {
  color: rgba(0, 0, 0, 0.5); }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    color: rgba(0, 0, 0, 0.8); }

kn-tabs.boxlist div.tabs-labels li.active a {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8); }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    border-bottom: 15px solid #ffffff; }

kn-tabs.notebook div.tabs-labels {
  background-color: rgba(0, 0, 0, 0.08); }
  kn-tabs.notebook div.tabs-labels li a {
    color: #805848; }
    kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
      color: #000000; }
    kn-tabs.notebook div.tabs-labels li a::before {
      background-color: rgba(0, 0, 0, 0.3); }
  kn-tabs.notebook div.tabs-labels li.active a {
    background-color: rgba(255, 255, 255, 0.5); }
    kn-tabs.notebook div.tabs-labels li.active a::before {
      background-color: #805848; }

kn-textarea label, kn-textarea [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-textarea label .required {
  color: #c04060; }

kn-textarea .kn-textarea-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-textarea:not(.disabled):not(.focused) .kn-textarea-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-textarea.focused .kn-textarea-container {
  border-color: transparent; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  background-color: #805848; }

kn-textarea.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::before {
  background-color: #ecc6cf; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::after {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::before {
  background-color: #d9cdc8; }

kn-textarea textarea {
  color: #000000; }

kn-textarea.disabled textarea {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea textarea::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-timeline::before {
  background: linear-gradient(90deg, #f0f0f0, transparent); }

kn-timeline::after {
  background: linear-gradient(270deg, #f0f0f0, transparent); }

kn-timeline .time-segment {
  background-color: #1860d8; }
  kn-timeline .time-segment.future {
    background-color: #8028d8; }
  kn-timeline .time-segment.selected {
    background-color: #0dc22b; }

kn-timeline .time-mark > .calendar-mark {
  position: relative;
  top: 25px;
  left: -5px; }
  kn-timeline .time-mark > .calendar-mark.today {
    left: -6px; }
  kn-timeline .time-mark > .calendar-mark.pin {
    left: -3px; }

kn-timeline .time-mark > a {
  background-color: #1860d8; }
  kn-timeline .time-mark > a.selected {
    background-color: #1860d8; }
    kn-timeline .time-mark > a.selected .date {
      color: rgba(0, 0, 0, 0.8); }
    kn-timeline .time-mark > a.selected::after {
      border: 2px solid #1860d8; }
  kn-timeline .time-mark > a:focus::before {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-timeline .time-mark > a .date {
    color: rgba(0, 0, 0, 0.5); }

kn-timeline .time-mark.pin > a {
  background-color: white;
  border: 4px solid #1860d8; }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.today::before {
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.8), transparent); }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.future > a {
  background-color: #8028d8; }
  kn-timeline .time-mark.future > a.selected::after {
    border-color: #8028d8; }

kn-timeline .time-mark.future.pin > a {
  background-color: white;
  border-color: #8028d8; }

kn-timeline .time-mark.today > a {
  background-color: #303030; }
  kn-timeline .time-mark.today > a.selected::after {
    border-color: #303030; }
  kn-timeline .time-mark.today > a .date {
    top: -60px; }

kn-timeline .time-mark.today.pin > a {
  background-color: white;
  border-color: #303030; }

kn-toast > div {
  background-color: rgba(0, 0, 0, 0.75);
  color: white; }
  kn-toast > div a {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-left: 1px solid rgba(255, 255, 255, 0.15); }
    kn-toast > div a:hover {
      background-color: rgba(0, 0, 0, 0.5); }
    kn-toast > div a:active {
      background-color: black; }

app-monitor .heading {
  height: 80px;
  display: flex;
  align-items: center; }
  app-monitor .heading h1 {
    margin: 0;
    padding: 0 50px;
    font-size: 32px; }
  app-monitor .heading .spacer {
    width: 100%; }
  app-monitor .heading kn-export-button {
    margin-right: 20px;
    color: #303030; }
    app-monitor .heading kn-export-button kn-menu.expanded {
      color: #f0f0f0;
      background-color: #805848; }
      app-monitor .heading kn-export-button kn-menu.expanded kn-menu-activator, app-monitor .heading kn-export-button kn-menu.expanded kn-menu-activator .material-icons {
        color: #f0f0f0; }
    app-monitor .heading kn-export-button kn-menu-activator, app-monitor .heading kn-export-button kn-menu-activator .material-icons {
      color: #303030; }
  app-monitor .heading kn-date-range {
    padding-right: 0;
    background: white; }

app-monitor .form-container.heading {
  margin-bottom: 0; }

app-monitor .form-container .form-layout {
  max-width: none; }

app-monitor .chart-area {
  padding-top: 3em;
  display: flex;
  flex-flow: wrap-reverse;
  width: 100%;
  height: 600px; }
  app-monitor .chart-area .chart-canvas {
    flex: 1;
    padding-left: 50px; }
  app-monitor .chart-area .chart-series {
    flex: 1;
    width: 250px;
    max-width: 350px;
    padding: 0 50px; }
    app-monitor .chart-area .chart-series .graph-legend ul {
      width: 300px; }
    app-monitor .chart-area .chart-series .graph-legend span {
      flex: 1; }
    app-monitor .chart-area .chart-series kn-view-template-selector a, app-monitor .chart-area .chart-series .graph-legend a {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      color: #000000; }
      app-monitor .chart-area .chart-series kn-view-template-selector a i, app-monitor .chart-area .chart-series .graph-legend a i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      app-monitor .chart-area .chart-series kn-view-template-selector a:hover, app-monitor .chart-area .chart-series kn-view-template-selector a:focus, app-monitor .chart-area .chart-series .graph-legend a:hover, app-monitor .chart-area .chart-series .graph-legend a:focus {
        opacity: 1;
        text-decoration: none; }
      app-monitor .chart-area .chart-series kn-view-template-selector a:active, app-monitor .chart-area .chart-series .graph-legend a:active {
        opacity: 1; }
      app-monitor .chart-area .chart-series kn-view-template-selector a[disabled], app-monitor .chart-area .chart-series .graph-legend a[disabled] {
        opacity: 0.3;
        background: none; }
      app-monitor .chart-area .chart-series kn-view-template-selector a:not([disabled]):hover, app-monitor .chart-area .chart-series kn-view-template-selector a:not([disabled]):focus, app-monitor .chart-area .chart-series .graph-legend a:not([disabled]):hover, app-monitor .chart-area .chart-series .graph-legend a:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      app-monitor .chart-area .chart-series kn-view-template-selector a:not([disabled]):active, app-monitor .chart-area .chart-series .graph-legend a:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }

app-monitor .graph-serie-name {
  display: flex;
  flex-direction: column; }

app-monitor .port-label .note {
  opacity: 0.5; }
  app-monitor .port-label .note::before {
    content: ' — ';
    margin-left: 2px; }

app-monitor .chart-canvas svg {
  overflow: visible; }

app-monitor .chart-canvas > div {
  padding: 30px 0 0 0;
  height: 300px; }

app-monitor .chart-canvas .ct-label.ct-horizontal {
  position: relative;
  transform: rotate(45deg);
  transform-origin: left top;
  width: 100px;
  white-space: nowrap;
  left: 50%;
  justify-content: flex-start !important; }

@keyframes indeterminate {
  0% {
    left: 0%;
    right: 100%; }
  30% {
    left: 0%;
    right: 50%; }
  80% {
    left: 70%;
    right: 0%; }
  100% {
    left: 100%;
    right: 0%; } }

/*$bg-color: #283038;
$fg-color: #c0c0c0;

$red-shade-color: #f06060;
$yellow-shade-color: #f0d060;
$green-shade-color: #a0f060;
$emerald-shade-color: #60f080;
$cyan-shade-color: #60e0f0;
$blue-shade-color: #6080f0;
$purle-shade-color: #b060f0;
$pink-shade-color: #f060c8;

$primary-color: $purle-shade-color;
$secondary-color: $yellow-shade-color;*/
/*$foreground-color: rgb(255, 255, 255);
$background-color: rgb(56, 56, 64);
$text-color: rgba(255, 255, 255, 0.9);
$text-secondary-color: rgba(255, 255, 255, 0.6);
$reading-animation-color: rgb(0, 150, 136);

$primary-color: rgb(128, 88, 72);
$accent-color: rgb(16, 160, 96);
$warn-color: rgb(192, 64, 96);

$divider-color: rgba(255, 255, 255, 0.1);
$header-divider-color: rgba(255, 255, 255, 0.2);
$row-divider-color: rgba(255, 255, 255, 0.15);*/
kn-audit-display {
  white-space: nowrap;
  margin: 10px 5px; }
  kn-audit-display strong {
    padding: 0.1em 0.4em 0.2em;
    margin: 0 0.2em;
    border-radius: 0.5em;
    font-weight: 400; }

kn-checkbox .kn-checkbox-mark {
  opacity: 0; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::before {
  border-radius: 50%; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border-radius: 2px;
  transition: 0.3s all ease; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark-path {
  stroke-dashoffset: 0;
  stroke-dasharray: 25; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox .kn-checkbox-mark-path {
  stroke-dashoffset: 25;
  stroke-dasharray: 25;
  stroke-width: 2px;
  transition: 0.3s transform ease, 0.3s stroke-dashoffset ease;
  transform-origin: 50% 50%;
  stroke: white; }

kn-checkbox .kn-checkbox-box::after, kn-checkbox label {
  transition: 0.3s color ease; }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox.indeterminate .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox.indeterminate .kn-checkbox-mark-path {
  transform: rotate(45deg) translate(-2px, 0);
  stroke-dashoffset: 20 !important;
  stroke-dasharray: 14 !important; }

app-print-template-edit kn-codemirror {
  height: 100%;
  flex: 1; }

app-print-template-edit > kn-resizable-container {
  height: 100%; }
  app-print-template-edit > kn-resizable-container kn-draggable-handler.left {
    z-index: 2;
    height: 50px !important;
    top: calc(100% - 50px) !important; }
  app-print-template-edit > kn-resizable-container .preview iframe {
    width: 100%;
    height: 100%;
    border: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror {
    height: 100%;
    overflow: visible;
    background: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror-scroll {
    margin: 0;
    padding: 0;
    overflow: visible !important; }
  app-print-template-edit > kn-resizable-container .CodeMirror-sizer {
    border-right-width: 0 !important; }
  app-print-template-edit > kn-resizable-container .box {
    width: 100%;
    height: 100%; }

app-print-template-edit form {
  width: 100%;
  height: 100%; }

app-print-template-edit kn-tabs {
  flex-direction: column-reverse; }
  app-print-template-edit kn-tabs a.sidepanel {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 6px 0 0; }
    app-print-template-edit kn-tabs a.sidepanel i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    app-print-template-edit kn-tabs a.sidepanel:hover, app-print-template-edit kn-tabs a.sidepanel:focus {
      opacity: 1;
      text-decoration: none; }
    app-print-template-edit kn-tabs a.sidepanel:active {
      opacity: 1; }
    app-print-template-edit kn-tabs a.sidepanel[disabled] {
      opacity: 0.3;
      background: none; }
    app-print-template-edit kn-tabs a.sidepanel i {
      transition: transform 0.5s ease 0.3s; }
    app-print-template-edit kn-tabs a.sidepanel.active i {
      transform: rotate(180deg); }

app-print-template-edit kn-tab.active {
  display: flex;
  flex-direction: column;
  flex: 1; }

app-print-template-edit kn-tab.home .box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }

app-print-template-edit kn-tab.home .fields {
  width: 100%;
  max-width: 700px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home i.banner {
  font-size: 192px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home h1 {
  text-align: center;
  margin: 50px 0; }

app-print-template-edit kn-tab.home .form-container {
  width: 80%;
  height: 100%;
  margin: 50px auto; }

app-print-template-edit kn-tab.home .form-layout {
  display: flex;
  flex-direction: column;
  height: 100%; }

app-print-template-edit kn-tab .no-print-context-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder i.banner {
    font-size: 128px;
    margin: 0 auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder strong {
    font-family: 'Exo 2';
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin: 20px 0 50px 0; }
  app-print-template-edit kn-tab .no-print-context-placeholder button {
    text-align: center; }

app-print-template-edit kn-menu.errors kn-menu-activator {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  margin: 0 8px 0 0;
  opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  app-print-template-edit kn-menu.errors kn-menu-activator:hover, app-print-template-edit kn-menu.errors kn-menu-activator:focus {
    opacity: 1;
    text-decoration: none; }
  app-print-template-edit kn-menu.errors kn-menu-activator:active {
    opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator[disabled] {
    opacity: 0.3;
    background: none; }

app-print-template-edit kn-menu.errors kn-menu-content {
  position: absolute;
  right: 8px;
  bottom: 50px;
  max-width: 1000px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-content [hidden] {
    display: none; }
  app-print-template-edit kn-menu.errors kn-menu-content strong {
    display: block; }
  app-print-template-edit kn-menu.errors kn-menu-content pre {
    font-size: 14px;
    margin-bottom: 0; }

kn-roles-table .role-permissions {
  position: relative;
  margin: 0 10px 76px 10px; }
  kn-roles-table .role-permissions > .scrollable {
    overflow-x: auto;
    margin: 0 54px 0 220px; }
  kn-roles-table .role-permissions table {
    border-collapse: separate;
    border-spacing: 0; }
    kn-roles-table .role-permissions table thead th {
      position: relative;
      width: 54px;
      min-width: 54px;
      height: 270px;
      padding: 0; }
      kn-roles-table .role-permissions table thead th.permission:not(:nth-child(2))::before {
        content: '';
        left: 0;
        bottom: 10px;
        position: absolute;
        display: block;
        width: 1px;
        height: calc(100% - 20px); }
    kn-roles-table .role-permissions table tbody td {
      padding: 0;
      height: 54px; }
    kn-roles-table .role-permissions table tbody.permissions-matrix td kn-checkbox {
      justify-content: center; }
    kn-roles-table .role-permissions table tbody.add-new-input td {
      height: 0; }
    kn-roles-table .role-permissions table div.rotate {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 54px;
      bottom: 0;
      left: 100%;
      transform: rotate(270deg);
      transform-origin: 0 100%;
      text-align: left; }
    kn-roles-table .role-permissions table th.name, kn-roles-table .role-permissions table td.name {
      position: absolute;
      left: 0;
      width: 220px;
      text-align: center;
      vertical-align: middle; }
      kn-roles-table .role-permissions table th.name kn-input, kn-roles-table .role-permissions table td.name kn-input {
        margin: 10px; }
        kn-roles-table .role-permissions table th.name kn-input input, kn-roles-table .role-permissions table td.name kn-input input {
          font-weight: 700; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.name, kn-roles-table .role-permissions table td.permission span.description {
      display: block;
      white-space: nowrap;
      padding: 1px 10px; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table td.permission span.name {
      font-size: 16px;
      font-weight: bold; }
    kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.description {
      font-size: 14px;
      font-weight: 400;
      opacity: 0.7; }
    kn-roles-table .role-permissions table th.spacer, kn-roles-table .role-permissions table td.spacer {
      width: 100%;
      min-width: 0; }
    kn-roles-table .role-permissions table th.actions, kn-roles-table .role-permissions table td.actions {
      position: absolute;
      right: 0;
      width: 54px; }
  kn-roles-table .role-permissions .actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 10px;
    height: 34px; }
    kn-roles-table .role-permissions .actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-roles-table .role-permissions .actions button:hover, kn-roles-table .role-permissions .actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-roles-table .role-permissions .actions button:active {
      opacity: 1; }
    kn-roles-table .role-permissions .actions button[disabled] {
      opacity: 0.3;
      background: none; }

kn-permission-actions-select kn-menu-content {
  position: absolute;
  z-index: 100;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3));
  padding: 10px;
  border-radius: 5px;
  transform: translate(calc(-50% + 23px), 5px); }
  kn-permission-actions-select kn-menu-content > div {
    padding: 5px; }
    kn-permission-actions-select kn-menu-content > div kn-checkbox label {
      flex: 1; }
  kn-permission-actions-select kn-menu-content::before {
    position: absolute;
    left: calc(50% - 10px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

kn-user-edit table.user-roles {
  width: 100%;
  border-collapse: collapse;
  margin: 13px 0 10px 0; }
  kn-user-edit table.user-roles tbody tr {
    height: 40px; }
  kn-user-edit table.user-roles tbody td {
    transition: 0.3s background-color ease;
    padding: 10px 0 10px 10px; }
  kn-user-edit table.user-roles td.actions {
    text-align: right; }
  kn-user-edit table.user-roles thead, kn-user-edit table.user-roles td.user-role input {
    font-weight: bold; }
  kn-user-edit table.user-roles thead {
    text-align: center; }
    kn-user-edit table.user-roles thead tr:first-child {
      text-align: center; }
    kn-user-edit table.user-roles thead tr:last-child {
      height: auto; }
      kn-user-edit table.user-roles thead tr:last-child td {
        font-weight: 400;
        font-style: italic;
        opacity: 0.7;
        padding-bottom: 5px; }
        kn-user-edit table.user-roles thead tr:last-child td > div {
          display: flex; }
          kn-user-edit table.user-roles thead tr:last-child td > div > span {
            flex: 1; }
  kn-user-edit table.user-roles td.user-role {
    width: 200px; }
  kn-user-edit table.user-roles td.user-role-customer-branch {
    width: 250px; }
    kn-user-edit table.user-roles td.user-role-customer-branch > div {
      display: flex; }
      kn-user-edit table.user-roles td.user-role-customer-branch > div input {
        text-align: right;
        width: 100%; }
  kn-user-edit table.user-roles td.actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 10px;
    height: 34px; }
    kn-user-edit table.user-roles td.actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-user-edit table.user-roles td.actions button:hover, kn-user-edit table.user-roles td.actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-user-edit table.user-roles td.actions button:active {
      opacity: 1; }
    kn-user-edit table.user-roles td.actions button[disabled] {
      opacity: 0.3;
      background: none; }
  kn-user-edit table.user-roles td.actions button:first-child {
    margin-left: 0; }
  kn-user-edit table.user-roles td.actions button:last-child {
    margin-right: 0; }

kn-control-messages {
  position: relative;
  height: 15px; }
  kn-control-messages > div {
    position: absolute;
    display: block; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave {
      transition: 0.3s all ease; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave.kn-leave-active {
      top: -5px;
      opacity: 0; }
    kn-control-messages > div.kn-leave, kn-control-messages > div.kn-enter.kn-enter-active {
      top: 0;
      opacity: 1; }

app-database-manage kn-tabs {
  position: relative;
  padding-top: 50px;
  margin: 0 0 20px 0; }
  app-database-manage kn-tabs .tab-group {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 400; }
  app-database-manage kn-tabs a i.material-icons {
    font-size: 72px; }
  app-database-manage kn-tabs a strong {
    font-weight: 400; }
  app-database-manage kn-tabs kn-tab {
    position: relative;
    padding: 30px;
    justify-content: center;
    text-align: center; }
    app-database-manage kn-tabs kn-tab .actions {
      margin: 20px auto 0 auto; }
    app-database-manage kn-tabs kn-tab p.note {
      margin-top: 0;
      font-style: italic;
      opacity: 0.5; }
    app-database-manage kn-tabs kn-tab .select-database {
      margin: 20px auto;
      padding: 20px;
      width: 400px; }
    app-database-manage kn-tabs kn-tab::after {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
      transition: 0.3s all ease; }
    app-database-manage kn-tabs kn-tab.kn-drag-over::after {
      opacity: 1;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      left: 10px;
      top: 10px; }

kn-datagrid tr td.strong {
  font-weight: bold; }

kn-datagrid tr td.highlight {
  color: #802020; }

kn-datagrid tr td.note {
  color: gray;
  font-size: 0.8em; }

kn-datagrid tr td.overflow {
  overflow: visible; }

kn-datagrid kn-cell-renderer span.user-database-tag, kn-datagrid kn-cell-renderer span.user-role-tag {
  color: white;
  padding: 4px 7px;
  margin: 0 5px 0 0;
  border-radius: 2px; }

kn-datagrid kn-cell-renderer span.user-ownership {
  color: rgba(0, 0, 0, 0.3); }
  kn-datagrid kn-cell-renderer span.user-ownership > span {
    color: black;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin: 0 4px;
    border-radius: 2px; }

kn-datepicker .viewport {
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-datepicker .viewport::before {
    content: '';
    position: absolute;
    display: block;
    left: calc(50% - 10px);
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  kn-datepicker .viewport.kn-enter, kn-datepicker .viewport.kn-leave {
    transition: 0.3s opacity ease, 0.3s margin-top ease, 0.3s transform ease; }
    kn-datepicker .viewport.kn-enter kn-date-view, kn-datepicker .viewport.kn-enter kn-day-view, kn-datepicker .viewport.kn-enter kn-hour-view, kn-datepicker .viewport.kn-leave kn-date-view, kn-datepicker .viewport.kn-leave kn-day-view, kn-datepicker .viewport.kn-leave kn-hour-view {
      opacity: 1 !important;
      transform: none !important; }
  kn-datepicker .viewport.kn-enter {
    opacity: 0;
    margin-top: 10px; }
  kn-datepicker .viewport.kn-leave, kn-datepicker .viewport.kn-enter.kn-enter-active {
    opacity: 1;
    margin-top: 0; }
  kn-datepicker .viewport.kn-leave.kn-leave-active {
    opacity: 0;
    margin-top: 10px; }

kn-datepicker kn-date-header a, kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a, kn-datepicker kn-time-header a:hover {
  text-decoration: none; }

kn-datepicker kn-date-header a {
  text-align: center;
  font-weight: 900; }

kn-datepicker kn-time-header a {
  font-weight: 400;
  border-radius: 10%; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-hour-view.kn-enter, kn-datepicker kn-hour-view.kn-leave {
  transition: 0.3s opacity ease, 0.3s transform ease; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-hour-view.kn-enter {
  opacity: 0;
  transform: scale(0.7, 0.7); }

kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-date-view.kn-enter.kn-enter-active, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-day-view.kn-enter.kn-enter-active, kn-datepicker kn-hour-view.kn-leave, kn-datepicker kn-hour-view.kn-enter.kn-enter-active {
  opacity: 1;
  transform: scale(1, 1); }

kn-datepicker kn-date-view.kn-leave.kn-leave-active, kn-datepicker kn-day-view.kn-leave.kn-leave-active, kn-datepicker kn-hour-view.kn-leave.kn-leave-active {
  opacity: 0;
  transform: scale(1.4, 1.4); }

kn-datepicker kn-month-view.animated {
  transition: 0.3s transform ease; }

kn-datepicker kn-month-view th, kn-datepicker kn-month-view td {
  text-align: center;
  border: 1px solid transparent; }

kn-datepicker kn-month-view th {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase; }

kn-datepicker kn-month-view td a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker kn-month-view td a, kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:active, kn-datepicker kn-month-view td a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    outline: none; }

kn-datepicker .picker-relative-container {
  position: relative;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  margin: 22px; }
  kn-datepicker .picker-relative-container.format-12-hours {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px; }
  kn-datepicker .picker-relative-container .center {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    z-index: 1;
    border-radius: 50%; }
  kn-datepicker .picker-relative-container .gauge {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: 0 0; }
  kn-datepicker .picker-relative-container li {
    text-align: center;
    border: 1px solid transparent; }
    kn-datepicker .picker-relative-container li::before {
      border-radius: 50%; }
    kn-datepicker .picker-relative-container li.minor a {
      width: 13px;
      height: 13px;
      line-height: 13px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent;
      font-size: 0; }
      kn-datepicker .picker-relative-container li.minor a, kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:active, kn-datepicker .picker-relative-container li.minor a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
        outline: none; }
    kn-datepicker .picker-relative-container li:not(.minor) a {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent; }
      kn-datepicker .picker-relative-container li:not(.minor) a, kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:active, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        outline: none; }

kn-datepicker .period-selector a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker .period-selector a, kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:active, kn-datepicker .period-selector a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    outline: none; }

.kn-ripple {
  overflow: hidden;
  position: relative; }

.kn-ripple.kn-ripple-unbounded {
  overflow: visible; }

.kn-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0); }

kn-export-button kn-menu {
  display: block;
  position: relative; }
  kn-export-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-export-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-export-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-export-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-export-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-export-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-export-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-export-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-export-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-export-button kn-menu kn-spinner {
    left: 32px; }

button.form-button, .form-input button {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 30px;
  font-size: 16px;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s; }
  button.form-button[disabled], .form-input button[disabled] {
    box-shadow: none; }
  button.form-button::-moz-focus-inner, .form-input button::-moz-focus-inner {
    border: none; }
  button.form-button::after, .form-input button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    bottom: -25%;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    transition: 0.2s all ease; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
    button.form-button:not([disabled]):active::after, .form-input button:not([disabled]):active::after {
      bottom: -70%;
      left: -50%;
      height: 200%;
      width: 200%;
      opacity: 0.5; }

@keyframes reveal-back-link {
  to {
    opacity: 1;
    left: calc(50% - 700px); } }

.form-container.heading, .form-container .form-loader-bar {
  position: relative; }
  .form-container.heading::before, .form-container.heading::after, .form-container .form-loader-bar::before, .form-container .form-loader-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    height: 5px;
    z-index: 3; }
  .form-container.heading::before, .form-container .form-loader-bar::before {
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.3s opacity ease; }
  .form-container.heading::after, .form-container .form-loader-bar::after {
    left: 0%;
    right: 100%;
    opacity: 0; }

.loading .form-container.heading::before, .loading .form-container.heading::after, .loading .form-container .form-loader-bar::before, .loading .form-container .form-loader-bar::after {
  opacity: 1; }

.loading .form-container.heading::after, .loading .form-container .form-loader-bar::after {
  animation: indeterminate 1s linear infinite; }

.form-container {
  margin: 30px 0; }
  .form-container.heading {
    position: relative;
    margin: 0;
    padding: 0; }
  .form-container h1, .form-container p, .form-container .form-layout {
    margin: auto;
    max-width: 1200px; }
  .form-container h1 {
    padding: 30px 0;
    margin: 0 auto;
    border: none; }
  .form-container .form-back {
    position: absolute;
    opacity: 0;
    left: calc(50% - 750px);
    top: calc(50% - 32px);
    transition: 0.3s all ease;
    animation-name: reveal-back-link;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
    .form-container .form-back::after {
      content: '';
      position: absolute;
      display: block;
      width: 64px;
      height: 64px;
      left: 20px;
      border-radius: 50%;
      transition: 0.3s all ease;
      transform: rotateY(45deg); }
    .form-container .form-back i {
      position: absolute;
      z-index: 10;
      font-size: 48px;
      line-height: 64px;
      text-align: center;
      width: 64px;
      height: 64px; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      left: 0;
      transform: rotateY(0); }
    .form-container .form-back:active::after {
      transition: none; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px; }
  .form-footer div:only-child {
    margin-left: auto; }

.form-actions-info {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  margin: 0 1em;
  white-space: nowrap; }
  .form-actions-info i.material-icons {
    padding: 0 0.3em; }

.form-buttons {
  text-align: right; }
  .form-buttons button {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    width: auto;
    margin-left: 10px;
    padding: 0 30px; }
    .form-buttons button[disabled] {
      box-shadow: none; }
    .form-buttons button::-moz-focus-inner {
      border: none; }
    .form-buttons button::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    .form-buttons button:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      .form-buttons button:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }

.form-errors {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .form-errors li {
    margin: 2px 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .form-errors li strong {
      display: flex;
      align-items: center;
      color: white;
      padding: 0.3em 0.5em;
      margin-right: 1em; }
      .form-errors li strong i {
        padding-right: 0.3em; }

.form-layout .info-bar {
  margin: 15px;
  padding: 15px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .info-bar strong {
    font-weight: 400; }

.form-layout .form-grid {
  display: flex;
  flex-direction: column; }

.form-layout .form-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }
  .form-layout .form-box .title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 5px;
    height: 34px;
    line-height: 34px; }
    .form-layout .form-box .title h2 {
      flex: 1;
      padding-left: 8px;
      margin: 0;
      font-weight: 800;
      font-size: 1em;
      text-transform: uppercase; }
    .form-layout .form-box .title .side-action {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      height: 24px;
      margin-left: 5px; }
      .form-layout .form-box .title .side-action i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .title .side-action:hover, .form-layout .form-box .title .side-action:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .title .side-action:active {
        opacity: 1; }
      .form-layout .form-box .title .side-action[disabled] {
        opacity: 0.3;
        background: none; }
  .form-layout .form-box .content {
    flex-grow: 1;
    padding: 0 15px 15px 15px; }
    .form-layout .form-box .content:first-child {
      padding-top: 15px; }
  .form-layout .form-box .info-bar {
    margin: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none; }
  .form-layout .form-box .container {
    display: flex; }
    .form-layout .form-box .container .content {
      flex: 1;
      width: 0; }
    .form-layout .form-box .container .side-actions {
      display: flex;
      align-items: center;
      justify-content: center; }
      .form-layout .form-box .container .side-actions a {
        display: inline-block;
        margin: 0;
        padding: 5px;
        opacity: 0.7;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
        height: 24px;
        margin: 10px; }
        .form-layout .form-box .container .side-actions a i {
          vertical-align: top;
          transition: all 0.5s ease;
          display: inline-block;
          width: 24px;
          height: 24px;
          overflow: hidden; }
        .form-layout .form-box .container .side-actions a:hover, .form-layout .form-box .container .side-actions a:focus {
          opacity: 1;
          text-decoration: none; }
        .form-layout .form-box .container .side-actions a:active {
          opacity: 1; }
        .form-layout .form-box .container .side-actions a[disabled] {
          opacity: 0.3;
          background: none; }
  .form-layout .form-box .alt p {
    margin: 0.5em;
    padding: 0; }
  .form-layout .form-box .alt-actions {
    display: flex; }
    .form-layout .form-box .alt-actions a {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 5px 7px;
      height: 24px; }
      .form-layout .form-box .alt-actions a i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .alt-actions a:hover, .form-layout .form-box .alt-actions a:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .alt-actions a:active {
        opacity: 1; }
      .form-layout .form-box .alt-actions a[disabled] {
        opacity: 0.3;
        background: none; }
      .form-layout .form-box .alt-actions a i.material-icons {
        margin-right: 5px; }

.form-layout .form-inline-box {
  margin: 15px; }
  .form-layout .form-inline-box .title h3 {
    flex: 1;
    padding: 2px 0 0 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center; }

.form-layout .form-expanssion {
  margin: 15px 0;
  z-index: 1; }
  .form-layout .form-expanssion .form-box {
    margin: 0 15px;
    transition: 0.2s margin ease;
    position: relative;
    box-shadow: none; }
    .form-layout .form-expanssion .form-box::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .form-expanssion .form-box.expanded {
    margin: 30px 15px; }
  .form-layout .form-expanssion .form-box:first-child {
    margin-top: 0; }
  .form-layout .form-expanssion .form-box:last-child {
    margin-bottom: 0; }

.form-layout .row {
  display: flex;
  flex-direction: row;
  width: 100%; }

.form-layout .column {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .form-layout .column .column-spacer {
    height: 100%; }

.form-layout .form-input {
  flex: 1;
  position: relative;
  padding: 3px 0;
  min-width: 0; }
  .form-layout .form-input.inlined {
    margin: 0;
    flex-grow: 0;
    min-width: auto; }
  .form-layout .form-input > * {
    margin: 0 10px; }
  .form-layout .form-input > input, .form-layout .form-input > select {
    width: calc(100% - 20px); }
  .form-layout .form-input > kn-control-messages {
    margin: -18px 0 0 15px; }

.form-layout .flex-1 {
  flex: 1; }

.form-layout .flex-2 {
  flex: 2; }

.form-layout .flex-3 {
  flex: 3; }

.form-layout .flex-4 {
  flex: 4; }

.form-layout .flex-5 {
  flex: 5; }

.form-layout .flex-6 {
  flex: 6; }

.form-layout .flex-start {
  justify-content: flex-start; }

.form-layout .flex-end {
  justify-content: flex-end; }

.form-layout .row.flex-reverse {
  flex-direction: row-reverse; }

.form-layout .column.flex-reverse {
  flex-direction: column-reverse; }

.form-layout .popover {
  position: relative;
  height: 34px; }
  .form-layout .popover kn-menu-activator {
    cursor: pointer; }
  .form-layout .popover .side-action {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    height: 24px; }
    .form-layout .popover .side-action i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .form-layout .popover .side-action:hover, .form-layout .popover .side-action:focus {
      opacity: 1;
      text-decoration: none; }
    .form-layout .popover .side-action:active {
      opacity: 1; }
    .form-layout .popover .side-action[disabled] {
      opacity: 0.3;
      background: none; }

kn-attached-portal .kn-form-layout-menu-content {
  z-index: 200;
  position: absolute;
  left: calc(100% - 490px);
  top: 40px;
  width: 500px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    font-weight: normal;
    margin: 0;
    padding: 15px 15px 15px 20px; }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:focus {
      opacity: 1;
      text-decoration: none; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:active {
      opacity: 1; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close[disabled] {
      opacity: 0.3;
      background: none; }
  kn-attached-portal .kn-form-layout-menu-content [hidden] {
    display: none; }
  kn-attached-portal .kn-form-layout-menu-content::before {
    position: absolute;
    left: calc(100% - 37px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

.form-slots-table {
  width: 100%;
  table-layout: fixed;
  margin-top: 2em;
  border-collapse: collapse; }
  .form-slots-table th {
    padding: 5px;
    font-weight: 400;
    position: relative; }
    .form-slots-table th::before {
      content: '';
      position: absolute;
      display: block;
      width: calc(100% - 22px);
      height: 100%;
      border: 1px solid transparent;
      top: 0;
      left: 11px; }
    .form-slots-table th.disabled::before {
      background-color: transparent; }
  .form-slots-table td {
    padding: 10px 0; }
  .form-slots-table caption {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1; }

kn-sticky.sticked > .grid-panel {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.grid-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px; }
  .grid-panel .selector {
    width: 200px; }
  .grid-panel .actions, .grid-panel kn-grid-actions {
    display: flex;
    flex-grow: 1;
    font-size: 0; }
  .grid-panel .widgets {
    display: flex; }
    .grid-panel .widgets > *:not(:last-child) {
      margin-right: 10px; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    padding: 5px 7px;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    display: inline-block;
    line-height: 24px; }
    .grid-panel .selector a i, .grid-panel .actions a i, .grid-panel kn-grid-actions a i {
      vertical-align: top;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      opacity: 1; }
      .grid-panel .selector a:hover i, .grid-panel .actions a:hover i, .grid-panel kn-grid-actions a:hover i {
        opacity: 1; }
    .grid-panel .selector a:hover, .grid-panel .selector a:focus, .grid-panel .selector a:active, .grid-panel .actions a:hover, .grid-panel .actions a:focus, .grid-panel .actions a:active, .grid-panel kn-grid-actions a:hover, .grid-panel kn-grid-actions a:focus, .grid-panel kn-grid-actions a:active {
      text-decoration: none; }

kn-grid-preset kn-menu {
  display: block;
  position: relative;
  width: 300px; }
  kn-grid-preset kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-preset kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-preset kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-preset kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-preset kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-preset kn-menu kn-menu-activator {
    display: block;
    opacity: 1; }

kn-grid-preset kn-menu-activator > div {
  padding: 0;
  margin: 0;
  line-height: 24px;
  display: flex;
  align-items: center; }
  kn-grid-preset kn-menu-activator > div[hidden] {
    display: none; }
  kn-grid-preset kn-menu-activator > div i {
    padding: 0; }
  kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
      opacity: 1; }
  kn-grid-preset kn-menu-activator > div span {
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    kn-grid-preset kn-menu-activator > div span.template-name {
      font-style: normal; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.ownerUid {
        font-size: 80%;
        font-style: italic; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.material-icons {
        font-size: 125%;
        vertical-align: middle; }
  kn-grid-preset kn-menu-activator > div input {
    height: 34px;
    padding: 0 5px;
    width: calc(100% - 10px);
    min-width: 0;
    border: none;
    background-color: transparent;
    font-family: Source Sans Pro;
    font-size: 16px;
    outline: none; }
  kn-grid-preset kn-menu-activator > div a {
    opacity: 0.7; }

kn-grid-preset kn-menu-content kn-select {
  width: 100%; }

kn-grid-preset kn-menu-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-grid-preset kn-menu-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-grid-preset kn-menu-content li:not(.user-select) span, kn-grid-preset kn-menu-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-grid-preset kn-menu-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  width: 100%; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-grid-query-filter kn-menu {
  display: block;
  position: relative; }
  kn-grid-query-filter kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-query-filter kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-query-filter kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-query-filter kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 5px 7px; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50px;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
      position: absolute;
      left: calc(50% - 10px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-attached-portal .kn-grid-menu-content {
    position: absolute;
    z-index: 20;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-attached-portal .kn-grid-menu-content::before {
      position: absolute;
      left: calc(100% - 100px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 0; }
    kn-grid-query-filter kn-menu kn-menu-activator > * {
      height: 24px;
      padding: 5px;
      transition: color 0.5s ease; }
      kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
        opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator > span {
      display: flex; }
    kn-grid-query-filter kn-menu kn-menu-activator > a {
      opacity: 0.7; }

kn-grid-reset {
  display: block;
  position: relative;
  padding: 0; }
  kn-grid-reset.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-reset kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-reset kn-menu-activator[hidden] {
      display: none; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-reset kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-reset kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-reset kn-menu-activator {
    padding: 0 7px; }
    kn-grid-reset kn-menu-activator i {
      padding: 5px 0; }
      kn-grid-reset kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-grid-reset > *:not(.disabled) {
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus {
      opacity: 1; }
  kn-grid-reset > span {
    display: flex; }
  kn-grid-reset > a {
    opacity: 0.7;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
    kn-grid-reset > a.disabled {
      cursor: default;
      pointer-events: none; }

kn-grid-search {
  position: relative;
  height: 50px;
  margin: -8px -8px -8px 0; }
  kn-grid-search input[type='search'] {
    border: none;
    padding: 0 10px 0 40px;
    height: 100%;
    width: 0;
    vertical-align: top;
    transition: 0.3s all ease; }
    kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
      width: 250px;
      outline: none; }
  kn-grid-search::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center; }

header.liner {
  height: 80px;
  display: flex;
  justify-content: space-between;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  header.liner > div {
    display: flex;
    align-items: center; }
  header.liner .logo {
    outline: none; }
    header.liner .logo img {
      margin: 10px; }
  header.liner button.main-action {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    margin: 0 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
    header.liner button.main-action[disabled] {
      box-shadow: none; }
    header.liner button.main-action::-moz-focus-inner {
      border: none; }
    header.liner button.main-action::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    header.liner button.main-action:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      header.liner button.main-action:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
  header.liner kn-menu {
    z-index: 2;
    position: relative; }
    header.liner kn-menu.expanded {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
    header.liner kn-menu kn-menu-activator {
      display: flex;
      padding: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
      outline: none; }
    header.liner kn-menu kn-menu-content {
      position: absolute;
      min-width: 100%;
      left: 0;
      margin-top: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      z-index: 100; }
      header.liner kn-menu kn-menu-content[hidden] {
        opacity: 0;
        margin-top: -10px;
        transition: all 0.3s ease; }
      header.liner kn-menu kn-menu-content ul {
        padding: 0;
        margin: 0;
        list-style-type: none; }
        header.liner kn-menu kn-menu-content ul li {
          padding: 0;
          margin: 0; }
      header.liner kn-menu kn-menu-content a {
        padding: 10px;
        display: block;
        white-space: nowrap;
        transition: all 0.3s ease; }
        header.liner kn-menu kn-menu-content a:hover {
          text-decoration: none; }

kn-attached-portal .header-liner.kn-menu-content {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 100; }
  kn-attached-portal .header-liner.kn-menu-content[hidden] {
    opacity: 0;
    margin-top: -10px;
    transition: all 0.3s ease; }
  kn-attached-portal .header-liner.kn-menu-content ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    kn-attached-portal .header-liner.kn-menu-content ul li {
      padding: 0;
      margin: 0; }
  kn-attached-portal .header-liner.kn-menu-content a {
    padding: 10px;
    display: block;
    white-space: nowrap;
    transition: all 0.3s ease; }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      text-decoration: none; }

header.liner .database-menu::before, header.liner .database-menu::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 1px;
  height: 40px;
  transition: top 0.5s ease; }

header.liner .database-menu::before {
  left: 0; }

header.liner .database-menu::after {
  right: 0; }

header.liner .database-menu.expanded::before, header.liner .database-menu.expanded::after, header.liner .database-menu:hover::before, header.liner .database-menu:hover::after {
  top: -50px; }

header.liner .database-menu.database-menu-hidden {
  display: none; }

header.liner .database-menu kn-database-selector {
  border: none; }
  header.liner .database-menu kn-database-selector .filter {
    font-size: 0; }
    header.liner .database-menu kn-database-selector .filter .clear {
      padding: 0 20px; }
    header.liner .database-menu kn-database-selector .filter:hover .clear {
      background-image: url("../kn-theme-strio/img/clear.svg"); }
  header.liner .database-menu kn-database-selector ul {
    max-height: 70%; }
    header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
      left: 0; }
    header.liner .database-menu kn-database-selector ul li a:hover {
      text-decoration: none; }

header.liner .database-menu kn-menu-activator {
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding-right: 40px; }
  header.liner .database-menu kn-menu-activator strong {
    display: block;
    font-weight: normal; }
  header.liner .database-menu kn-menu-activator .description {
    display: block; }
  header.liner .database-menu kn-menu-activator::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 32px;
    width: 16px;
    height: 16px;
    mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    transform: rotate(-90deg);
    transition: transform 0.5s ease; }
  header.liner .database-menu kn-menu-activator:hover::after {
    transform: rotate(0deg); }

header.liner .database-menu.expanded kn-menu-activator::after {
  transform: rotate(-180deg); }

header.liner > div:first-child, header.liner kn-navbar {
  flex: 1; }

header.liner nav > ul, header.liner kn-navbar > ul {
  height: 80px;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  display: flex; }
  header.liner nav > ul > li, header.liner kn-navbar > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
      display: block;
      margin: 10px 3px;
      height: 58px;
      padding: 0 18px;
      line-height: 58px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      header.liner nav > ul > li > a, header.liner nav > ul > li > a:hover, header.liner nav > ul > li > a:focus, header.liner nav > ul > li > kn-menu-activator, header.liner nav > ul > li > kn-menu-activator:hover, header.liner nav > ul > li > kn-menu-activator:focus, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > a:focus, header.liner kn-navbar > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > kn-menu-activator:focus {
        text-decoration: none; }

header.liner kn-navbar kn-menu {
  margin: 10px 3px;
  height: 60px;
  padding: 0 !important; }

header.liner kn-navbar kn-menu-activator {
  height: 60px;
  padding: 0 8px;
  align-items: center; }

kn-attached-portal .kn-navbar-expansion ul {
  margin: 0 10px;
  padding: 0;
  list-style-type: none; }
  kn-attached-portal .kn-navbar-expansion ul > li {
    margin: 0;
    padding: 0; }
    kn-attached-portal .kn-navbar-expansion ul > li > a {
      display: block;
      padding: 0 18px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      kn-attached-portal .kn-navbar-expansion ul > li > a, kn-attached-portal .kn-navbar-expansion ul > li > a:hover, kn-attached-portal .kn-navbar-expansion ul > li > a:focus {
        text-decoration: none; }

header.liner .user-menu kn-menu-activator {
  min-width: 120px;
  flex-direction: row-reverse;
  align-items: center; }
  header.liner .user-menu kn-menu-activator img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    background-image: url("../img/noavatar.svg"); }
  header.liner .user-menu kn-menu-activator kn-menu-content {
    right: 0; }

header.liner .user-menu kn-menu-content {
  right: 0;
  left: initial; }
  header.liner .user-menu kn-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-attached-portal .user-menu-content {
  right: 0;
  left: initial; }
  kn-attached-portal .user-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-input label, kn-input [kn-hint] {
  font-size: 14px; }

kn-input [kn-prefix], kn-input [kn-suffix] {
  display: flex; }

kn-input .kn-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-input .kn-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input .kn-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input.disabled .kn-input-container, kn-input.readonly .kn-input-container {
  border-bottom-style: dotted; }

kn-input.focused .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.focused .kn-input-underline::before, kn-input.focused .kn-input-underline::after {
  z-index: 111; }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.ng-touched.ng-pending .kn-input-underline::before, kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::after {
  top: -4px;
  height: 5px; }

kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-input input {
  min-height: 24px; }
  kn-input input:-webkit-autofill {
    -webkit-animation-name: kill-autofill;
    -webkit-animation-fill-mode: both; }

@-webkit-keyframes kill-autofill {
  to {
    background: transparent; } }

kn-date-input label, kn-date-input [kn-hint] {
  font-size: 14px; }

kn-date-input [kn-prefix], kn-date-input [kn-suffix] {
  display: flex; }

kn-date-input .kn-date-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-date-input .kn-date-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input .kn-date-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input.disabled .kn-date-input-container, kn-date-input.readonly .kn-date-input-container {
  border-bottom-style: dotted; }

kn-date-input.focused .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.focused .kn-date-input-underline::before, kn-date-input.focused .kn-date-input-underline::after {
  z-index: 111; }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before, kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::after {
  top: -4px;
  height: 5px; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-date-input input {
  min-height: 24px;
  text-align: right; }

kn-date-input .input-button i.material-icons {
  opacity: 0.5;
  transition: 0.3s opacity ease; }
  kn-date-input .input-button i.material-icons:hover, kn-date-input .input-button i.material-icons:focus {
    opacity: 1; }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  opacity: 0.5; }

kn-date-input .input-button > a {
  display: flex;
  text-decoration: none; }

@-moz-document url-prefix() {
  kn-date-input input {
    clip-path: inset(0 25px 0 0);
    margin-right: -20px !important;
    min-width: 70px !important; } }

kn-kcuni-settings {
  display: block;
  margin: 20px; }
  kn-kcuni-settings p strong {
    font-weight: 400; }
  kn-kcuni-settings .settings {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
    margin: 0 -10px 10px; }
    kn-kcuni-settings .settings kn-input {
      flex: 1; }
    kn-kcuni-settings .settings button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      margin-left: 10px; }
      kn-kcuni-settings .settings button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      kn-kcuni-settings .settings button:hover, kn-kcuni-settings .settings button:focus {
        opacity: 1;
        text-decoration: none; }
      kn-kcuni-settings .settings button:active {
        opacity: 1; }
      kn-kcuni-settings .settings button[disabled] {
        opacity: 0.3;
        background: none; }
  kn-kcuni-settings .message {
    padding: 10px;
    vertical-align: center; }
    kn-kcuni-settings .message i {
      vertical-align: bottom; }
  kn-kcuni-settings .doc-link {
    display: block;
    padding-top: 10px;
    margin-bottom: 20px;
    float: left; }
    kn-kcuni-settings .doc-link.app-link {
      float: right; }

.app-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }
  .app-loading-screen p {
    padding: 5px 10px;
    margin: 0;
    border-radius: 3px; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 600px;
  font-family: 'Source Sans Pro';
  font-size: 16px; }

input {
  font-family: 'Source Sans Pro';
  font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo 2'; }

h1 {
  font-weight: 300;
  font-size: 48px;
  padding-bottom: 10px; }

a {
  text-decoration: none; }

a:hover, a:focus {
  text-decoration: underline; }

kn-app-main {
  display: block; }

[knBackgroundFocusable] {
  outline: none; }

.country-display,
kn-select.country .option,
kn-select.country .kn-option-content {
  height: 24px;
  line-height: 24px; }
  .country-display img,
  kn-select.country .option img,
  kn-select.country .kn-option-content img {
    width: 24px;
    height: 16px;
    margin: 4px 4px 4px 0;
    vertical-align: bottom;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.flat-button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }
  .flat-button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  .flat-button:hover, .flat-button:focus {
    opacity: 1;
    text-decoration: none; }
  .flat-button:active {
    opacity: 1; }
  .flat-button[disabled] {
    opacity: 0.3;
    background: none; }

.flat-table {
  width: 100%;
  border-collapse: collapse; }
  .flat-table tbody tr {
    height: 55px; }
  .flat-table tbody td {
    transition: 0.3s background-color ease;
    padding: 10px; }
  .flat-table thead td {
    padding: 10px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7; }
  .flat-table .actions {
    text-align: right; }
    .flat-table .actions button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer; }
      .flat-table .actions button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .flat-table .actions button:hover, .flat-table .actions button:focus {
        opacity: 1;
        text-decoration: none; }
      .flat-table .actions button:active {
        opacity: 1; }
      .flat-table .actions button[disabled] {
        opacity: 0.3;
        background: none; }

kn-modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }

kn-modal.confirmation-dialog .overlay {
  display: flex;
  align-items: center;
  justify-content: center; }
  kn-modal.confirmation-dialog .overlay.kn-enter, kn-modal.confirmation-dialog .overlay.kn-leave {
    transition: 0.3s opacity ease; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container, kn-modal.confirmation-dialog .overlay.kn-leave .container {
      transition: 0.3s transform ease, 0.3s margin-top ease-out; }
  kn-modal.confirmation-dialog .overlay.kn-enter {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container {
      transform: perspective(1000px) rotate3d(1, 0, 0, 60deg); }
  kn-modal.confirmation-dialog .overlay.kn-leave, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active {
    opacity: 1; }
    kn-modal.confirmation-dialog .overlay.kn-leave .container, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active .container {
      transform: scale(1); }
  kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active .container {
      transform: scale(0.8);
      margin-top: 100px; }
  kn-modal.confirmation-dialog .overlay .container {
    overflow-y: auto;
    min-width: 300px;
    max-width: 750px;
    min-height: 200px;
    display: flex;
    flex-direction: column; }
  kn-modal.confirmation-dialog .overlay .content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; }
    kn-modal.confirmation-dialog .overlay .content span {
      white-space: pre-line;
      text-align: center;
      margin-top: 10px; }
  kn-modal.confirmation-dialog .overlay .buttons {
    display: flex; }
    kn-modal.confirmation-dialog .overlay .buttons button {
      position: relative;
      flex: 1;
      padding: 15px;
      min-width: 150px;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.5s ease, background-color 0.5s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        content: '';
        width: 60%;
        height: 3px;
        position: absolute;
        display: block;
        top: 0;
        left: 20%;
        opacity: 0.3; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover::before {
        opacity: 1; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        transition: color 0.2s ease, background-color 0.2s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button:active {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
        padding: 16px 15px 14px 15px; }

kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-options-container .kn-options-container-viewport {
    max-height: 310px; }
  kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-options-container .kn-options-container-filter .clear::before, kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-select.focused kn-options-container .kn-options-container-viewport, kn-input.focused kn-options-container .kn-options-container-viewport {
  z-index: 1000; }

kn-optgroup > strong {
  text-transform: uppercase; }

kn-option:not(.disabled):hover {
  transition: none; }

kn-option .kn-option-selector {
  transition: 0.3s color ease; }

kn-attached-portal .kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-attached-portal .kn-options-container .kn-options-container-viewport {
    max-height: 310px;
    overflow-y: scroll; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before, kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-attached-portal .kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-ownership-display > span {
  padding: 4px;
  margin: 0 4px;
  border-radius: 2px; }

kn-print-button kn-menu {
  display: block;
  position: relative; }
  kn-print-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-print-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-print-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-print-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-print-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-print-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-print-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-print-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-print-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-print-button kn-menu kn-menu-content {
    min-width: 200px; }
  kn-print-button kn-menu kn-spinner {
    left: 14px; }

kn-attached-portal .kn-menu-content.kn-print-button-content {
  min-width: 200px; }

kn-query-filter .query-filter > div[knFilterGroup] {
  display: block;
  min-width: 1000px;
  padding: 20px; }

kn-query-filter .filter-group {
  margin: auto; }
  kn-query-filter .filter-group .new-filter-actions {
    align-items: center;
    display: flex; }
    kn-query-filter .filter-group .new-filter-actions button {
      margin: 0 0 0 10px;
      padding: 5px 10px;
      border-radius: 3px;
      border: none;
      height: 30px;
      text-transform: uppercase; }
    kn-query-filter .filter-group .new-filter-actions .coalescing-operator {
      display: flex;
      align-items: center;
      margin-right: 10px; }
      kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
        content: '';
        display: block;
        flex: 1;
        height: 1px; }
    kn-query-filter .filter-group .new-filter-actions kn-select {
      width: 200px; }

kn-query-filter ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-query-filter li {
  padding: 10px 0 10px 10px; }

kn-query-filter li.boolean-operator {
  padding: 0;
  position: relative;
  height: 1px; }
  kn-query-filter li.boolean-operator span {
    position: absolute;
    display: block;
    padding: 0 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    top: -10px;
    left: 20px;
    text-transform: uppercase; }

kn-query-filter li[knFilterItem] {
  padding: 10px 0 10px 10px;
  display: flex;
  align-items: center;
  height: 40px; }
  kn-query-filter li[knFilterItem] > span {
    margin: 5px; }
  kn-query-filter li[knFilterItem]:first-child {
    padding-top: 0; }

kn-query-filter .filter-group .filter-name, kn-query-filter .filter-group .coalescing-operator {
  width: 225px; }

kn-query-filter .filter-group .coalescing-operator {
  width: 190px; }

kn-query-filter .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 205px; }

kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 170px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 185px; }

kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 150px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 165px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 130px; }

kn-query-filter .filter-name input {
  font-weight: bold; }

kn-query-filter .filter-operator {
  width: 150px; }
  kn-query-filter .filter-operator kn-input input {
    text-align: center; }
  kn-query-filter .filter-operator > * {
    width: 100%; }

kn-query-filter .filter-value {
  flex: 1; }
  kn-query-filter .filter-value .presenter {
    flex: 1;
    display: flex;
    align-items: center; }
    kn-query-filter .filter-value .presenter kn-input, kn-query-filter .filter-value .presenter kn-select {
      flex: 1; }
    kn-query-filter .filter-value .presenter kn-date-input span.required {
      display: none; }
    kn-query-filter .filter-value .presenter > span {
      margin: 0 10px; }
      kn-query-filter .filter-value .presenter > span:first-child {
        margin-left: 0; }

kn-query-filter .filter-actions {
  width: 70px;
  text-align: right; }

kn-query-filter .filter-actions button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  height: 34px; }
  kn-query-filter .filter-actions button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  kn-query-filter .filter-actions button:hover, kn-query-filter .filter-actions button:focus {
    opacity: 1;
    text-decoration: none; }
  kn-query-filter .filter-actions button:active {
    opacity: 1; }
  kn-query-filter .filter-actions button[disabled] {
    opacity: 0.3;
    background: none; }

kn-query-filter .footer {
  padding: 20px;
  text-align: right;
  display: flex; }
  kn-query-filter .footer button {
    padding: 5px 10px;
    margin-left: 20px;
    border-radius: 3px;
    border: none;
    height: 30px;
    text-transform: uppercase; }
  kn-query-filter .footer .left {
    text-align: left;
    flex: 1; }
    kn-query-filter .footer .left button {
      margin-left: 0;
      margin-right: 20px; }

kn-query-filter .filter-placeholder {
  width: 400px;
  margin: 30px auto 50px auto;
  text-align: center; }
  kn-query-filter .filter-placeholder span.placeholder {
    display: block; }
  kn-query-filter .filter-placeholder > i.material-icons {
    font-size: 150px; }
  kn-query-filter .filter-placeholder p {
    margin-top: -10px;
    margin-bottom: 50px;
    font-size: 24px;
    display: none; }
  kn-query-filter .filter-placeholder kn-select .kn-select-container {
    padding: 7px;
    transition: 0.3s all ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:hover {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
      transition: none;
      box-shadow: none; }

kn-radio input[type='radio'] + .kn-radio-box::before {
  border-radius: 50%; }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border-radius: 50%;
  transition: 0.3s border-color ease; }

kn-radio .kn-radio-mark {
  transition: 0.2s border linear; }

kn-radio .kn-radio-box, kn-radio label {
  transition: 0.3s color ease; }

kn-select label, kn-select [kn-hint] {
  font-size: 14px; }

kn-select [kn-prefix], kn-select [kn-suffix] {
  display: flex; }

kn-select .kn-select-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-select .kn-select-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select .kn-select-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select.disabled .kn-select-container, kn-select.readonly .kn-select-container {
  border-bottom-style: dotted; }

kn-select.focused .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.focused .kn-select-underline::before, kn-select.focused .kn-select-underline::after {
  z-index: 111; }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.ng-touched.ng-pending .kn-select-underline::before, kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::after {
  top: -4px;
  height: 5px; }

kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-select .kn-select-header {
  line-height: 24px; }
  kn-select .kn-select-header > * {
    min-height: 24px; }
  kn-select .kn-select-header .separator {
    padding-right: 0.3em; }
  kn-select .kn-select-header .option {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

kn-select.disabled .kn-select-header {
  pointer-events: none; }

kn-spinner {
  position: absolute;
  margin: 0 auto;
  width: 36px; }
  kn-spinner:before {
    content: '';
    display: block;
    padding-top: 100%; }
  kn-spinner .circular {
    animation: strio-spinner-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  kn-spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: strio-spinner-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: square;
    stroke-width: 8px; }

@keyframes strio-spinner-rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes strio-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

kn-tabs.boxlist div.tabs-viewport {
  margin-top: 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }

kn-tabs.boxlist div.tabs-labels ul {
  width: 100%; }

kn-tabs.boxlist div.tabs-labels li a {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  width: 170px;
  height: 150px !important;
  transition: 0.3s color ease; }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }

kn-tabs.boxlist div.tabs-labels li.active a {
  border-radius: 5px; }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    position: absolute;
    left: calc(50% - 15px);
    bottom: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; }

kn-tabs.notebook div.tabs-labels li a {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  transition: 0.3s color ease; }
  kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }
  kn-tabs.notebook div.tabs-labels li a::before {
    content: '';
    display: block;
    position: absolute;
    width: 80%;
    height: 4px;
    left: 10%;
    top: -10px;
    opacity: 0;
    z-index: 10;
    transform: scale(0.8);
    transition: 0.3s all ease; }
  kn-tabs.notebook div.tabs-labels li a:hover::before, kn-tabs.notebook div.tabs-labels li a:focus::before {
    opacity: 1;
    top: 0;
    transform: scale(1); }

kn-tabs.notebook div.tabs-labels li.active a::before {
  opacity: 1;
  top: 0;
  transform: scale(1);
  width: 100%;
  left: 0; }

kn-textarea label, kn-textarea [kn-hint] {
  font-size: 14px; }

kn-textarea [kn-prefix], kn-textarea [kn-suffix] {
  display: flex; }

kn-textarea .kn-textarea-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-textarea .kn-textarea-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea .kn-textarea-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea.disabled .kn-textarea-container, kn-textarea.readonly .kn-textarea-container {
  border-bottom-style: dotted; }

kn-textarea.focused .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.focused .kn-textarea-underline::before, kn-textarea.focused .kn-textarea-underline::after {
  z-index: 111; }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before, kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::after {
  top: -4px;
  height: 5px; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-textarea {
  height: 100%;
  display: flex !important;
  flex-direction: column; }
  kn-textarea .kn-textarea-container {
    flex: 1; }
  kn-textarea textarea {
    height: calc(100% - 20px);
    resize: none; }

kn-timeline {
  position: relative; }
  kn-timeline::before, kn-timeline::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none; }
  kn-timeline::before {
    left: 0; }
  kn-timeline::after {
    right: 0; }
  kn-timeline .time-viewport {
    overflow: hidden; }
  kn-timeline .time-container {
    display: flex;
    margin: 100px 0 50px 0; }
    kn-timeline .time-container > span {
      flex-shrink: 0; }
  kn-timeline .time-segment {
    font-size: 0;
    height: 3px;
    width: calc(50% - 2px); }
  kn-timeline .time-mark {
    position: relative;
    width: 3px;
    height: 3px; }
    kn-timeline .time-mark a {
      position: absolute;
      width: 13px;
      height: 13px;
      top: -5px;
      left: -5px;
      border-radius: 50%;
      z-index: 1;
      outline: none; }
      kn-timeline .time-mark a.selected::after {
        content: '';
        position: absolute;
        display: block;
        width: 23px;
        height: 23px;
        left: -7px;
        top: -7px;
        border-radius: 50%; }
      kn-timeline .time-mark a::before {
        content: '';
        position: absolute;
        display: block;
        width: 53px;
        height: 53px;
        top: -20px;
        left: -20px;
        border-radius: 50%;
        z-index: -1; }
      kn-timeline .time-mark a .date {
        position: absolute;
        display: block;
        white-space: nowrap;
        text-align: center;
        left: 7px;
        top: -68px;
        font-weight: bold;
        transform: translateX(-50%); }
      kn-timeline .time-mark a .year {
        display: block;
        font-weight: normal; }
    kn-timeline .time-mark.pin a {
      width: 9px;
      height: 9px;
      top: -7px;
      left: -7px; }
      kn-timeline .time-mark.pin a::before {
        top: -22px;
        left: -22px; }
      kn-timeline .time-mark.pin a.selected::after {
        left: -9px;
        top: -9px; }
      kn-timeline .time-mark.pin a .date {
        left: 5px;
        top: -70px; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
    kn-timeline .time-mark.today::before {
      content: '';
      position: absolute;
      display: block;
      width: 1px;
      height: 63px;
      left: 1px;
      top: -30px;
      opacity: 0.5; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
  kn-timeline .time-mark.today a .date {
    top: -60px; }
  kn-timeline kn-datepicker .viewport {
    top: -20px; }
  kn-timeline kn-datepicker.calendar-mark .viewport {
    top: 5px; }

kn-toast > div {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  left: 50px;
  bottom: 50px;
  z-index: 1000;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave {
    transition: 0.3s all ease; }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave.kn-leave-active {
    left: 35px;
    opacity: 0; }
  kn-toast > div.kn-leave, kn-toast > div.kn-enter.kn-enter-active {
    left: 50px;
    opacity: 1; }
  kn-toast > div .content {
    display: flex;
    flex-direction: column;
    padding: 15px 20px; }
    kn-toast > div .content span, kn-toast > div .content strong {
      display: block; }
  kn-toast > div a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-align: center; }
    kn-toast > div a, kn-toast > div a:hover, kn-toast > div a:focus, kn-toast > div a:active {
      text-decoration: none; }

kn-audit-display {
  color: rgba(0, 0, 0, 0.5); }
  kn-audit-display strong {
    background-color: rgba(0, 0, 0, 0.07); }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox input[type='checkbox']:focus + .kn-checkbox-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked):hover + .kn-checkbox-box::after, kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked) + .kn-checkbox-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-checkbox.disabled input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled input[type='checkbox']:not(:checked) + .kn-checkbox-box::after {
  background-color: transparent !important; }

kn-checkbox.disabled.indeterminate .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled label, kn-checkbox.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox.ng-touched.ng-invalid .kn-checkbox-box::after {
  border-color: #c04060; }

kn-checkbox.ng-touched.ng-invalid input[type='checkbox']:checked + .kn-checkbox-box::after, kn-checkbox.ng-touched.ng-invalid.indeterminate .kn-checkbox-box::after {
  background-color: #c04060; }

app-print-template-edit {
  background-color: #ffffff; }
  app-print-template-edit > kn-resizable-container .preview {
    border-left: 1px solid rgba(0, 0, 0, 0.15); }
  app-print-template-edit .preview div.tabs-viewport {
    background-color: #f9f7f6; }
  app-print-template-edit kn-codemirror {
    background-color: #ffffff; }
  app-print-template-edit kn-tabs a.sidepanel {
    color: #000000;
    color: rgba(0, 0, 0, 0.8); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):hover, app-print-template-edit kn-tabs a.sidepanel:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-tab.home i.banner {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-tab .no-print-context-placeholder {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-activator {
    color: #000000;
    color: #c04060; }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):hover, app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-menu.errors kn-menu-content {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.8); }

kn-roles-table .role-permissions table thead th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-roles-table .role-permissions table tbody.permissions-matrix td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); }

kn-roles-table .role-permissions table tbody.permissions-matrix tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

kn-roles-table .role-permissions .actions button {
  color: #000000; }
  kn-roles-table .role-permissions .actions button:not([disabled]):hover, kn-roles-table .role-permissions .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-roles-table .role-permissions .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-permission-actions-select kn-menu-content {
  background-color: #ffffff; }
  kn-permission-actions-select kn-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-user-edit table.user-roles tbody.user-roles-table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles tr.invalid td {
  background-color: rgba(192, 64, 96, 0.15); }

kn-user-edit table.user-roles thead tr:last-child td {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-user-edit table.user-roles tbody.user-roles-table tr td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles td.actions button {
  color: #000000; }
  kn-user-edit table.user-roles td.actions button:not([disabled]):hover, kn-user-edit table.user-roles td.actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-user-edit table.user-roles td.actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-control-messages > div {
  color: #c04060; }

app-database-manage kn-tabs .tab-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

app-database-manage kn-tabs a i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

app-database-manage kn-tabs li.active a i.material-icons, app-database-manage kn-tabs a:hover i.material-icons, app-database-manage kn-tabs a:focus i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

app-database-manage kn-tabs kn-tab .select-database {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15); }

app-database-manage kn-tabs kn-tab.kn-drag-over::after {
  background-color: rgba(255, 240, 216, 0.3);
  border: 1px dashed #ff9800; }

kn-datepicker .viewport {
  background-color: #ffffff; }
  kn-datepicker .viewport::before {
    border-bottom: 10px solid #f2f2f2; }
  kn-datepicker .viewport .header {
    background-color: #f2f2f2; }

kn-datepicker kn-date-header > *, kn-datepicker kn-time-header > * {
  color: #000000; }

kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a:hover {
  background-color: rgba(0, 0, 0, 0.1); }

kn-datepicker kn-date-header a:active, kn-datepicker kn-time-header a:active {
  background-color: rgba(0, 0, 0, 0.2); }

kn-datepicker kn-date-header a {
  color: rgba(0, 0, 0, 0.5); }

kn-datepicker kn-month-view th {
  color: rgba(0, 0, 0, 0.35); }

kn-datepicker kn-month-view td a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker kn-month-view td a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker kn-month-view td a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container .center {
  background-color: gray; }

kn-datepicker .picker-relative-container .gauge {
  background-color: rgba(0, 0, 0, 0.15); }

kn-datepicker .picker-relative-container li::before {
  background-color: #ffffff; }

kn-datepicker .picker-relative-container li.minor a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li.minor a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li.minor a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.minor::before {
  background-color: rgba(0, 0, 0, 0.8); }

kn-datepicker .picker-relative-container li:not(.minor) a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li:not(.minor) a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li:not(.minor) a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.major::before {
  background-color: #000000; }

kn-datepicker .period-selector a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .period-selector a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .period-selector a.selected {
    background-color: #805848;
    color: #ffffff; }

.kn-ripple-element {
  background-color: rgba(0, 0, 0, 0.05); }

kn-export-button kn-menu.expanded {
  background-color: #0b7244; }

kn-export-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-export-button kn-menu kn-menu-activator, kn-export-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

button.form-button, .form-input button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  button.form-button.danger, .form-input button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  button.form-button[disabled], .form-input button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  button.form-button::after, .form-input button::after {
    background-color: white; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    button.form-button:not([disabled]):hover.danger, button.form-button:not([disabled]):focus.danger, .form-input button:not([disabled]):hover.danger, .form-input button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    button.form-button:not([disabled]):active.danger, .form-input button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-container.heading::before, .form-container .form-loader-bar::before {
  background-color: rgba(128, 88, 72, 0.3); }

.form-container.heading::after, .form-container .form-loader-bar::after {
  background-color: #805848; }

.form-container.heading {
  background-color: #ffffff; }

.form-container .form-back {
  color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:hover, .form-container .form-back:focus {
    color: #ffffff; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      background-color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:active::after {
    background-color: rgba(0, 0, 0, 0.4); }

.form-actions-info {
  color: #c07000; }

.form-buttons button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  .form-buttons button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  .form-buttons button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  .form-buttons button::after {
    background-color: white; }
  .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    .form-buttons button:not([disabled]):hover.danger, .form-buttons button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  .form-buttons button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    .form-buttons button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-errors li {
  background-color: rgba(192, 64, 96, 0.2); }
  .form-errors li strong {
    background-color: #c04060; }

.form-layout .info-bar {
  color: rgba(255, 255, 255, 0.7);
  background-color: #10a060; }
  .form-layout .info-bar.error {
    background-color: #c04060; }
  .form-layout .info-bar strong {
    color: #ffffff; }

.form-layout .form-box {
  background-color: #ffffff; }
  .form-layout .form-box .title {
    color: #009688; }
    .form-layout .form-box .title .side-action {
      color: #000000; }
      .form-layout .form-box .title .side-action:not([disabled]):hover, .form-layout .form-box .title .side-action:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .title .side-action:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .container + .container {
    border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .form-layout .form-box .container .side-actions {
    border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .container .side-actions a {
      color: #000000; }
      .form-layout .form-box .container .side-actions a:not([disabled]):hover, .form-layout .form-box .container .side-actions a:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .container .side-actions a:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .alt {
    background-color: rgba(224, 192, 0, 0.1);
    border-top: 1px solid rgba(224, 192, 0, 0.3); }
  .form-layout .form-box .alt-actions a {
    color: #000000; }
    .form-layout .form-box .alt-actions a:not([disabled]):hover, .form-layout .form-box .alt-actions a:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .alt-actions a:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }

.form-layout .form-inline-box .title {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid rgba(0, 0, 0, 0.15) !important; }

.form-layout .form-inline-box .container {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(224, 192, 0, 0.1); }
  .form-layout .form-inline-box .container + .container {
    border-top: none; }

.form-layout .popover .side-action {
  color: #000000; }
  .form-layout .popover .side-action:not([disabled]):hover, .form-layout .popover .side-action:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-layout .popover .side-action:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-form-layout-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    color: #000000; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-form-layout-menu-content::before {
    border-bottom: 10px solid #ffffff; }

.form-slots-table th {
  color: rgba(0, 0, 0, 0.5); }
  .form-slots-table th::before {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-slots-table th.disabled::before {
    border: 1px solid rgba(0, 0, 0, 0.1); }

.form-slots-table caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

.grid-panel {
  background-color: #10a060; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    color: rgba(255, 255, 255, 0.7); }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-preset kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu kn-menu-activator, kn-grid-preset kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
  transition: color 0.5s ease; }
  kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-activator > div span {
  color: rgba(255, 255, 255, 0.5); }
  kn-grid-preset kn-menu-activator > div span.template-name {
    color: #ffd088; }

kn-grid-preset kn-menu-activator > div input {
  color: #ffffff; }
  kn-grid-preset kn-menu-activator > div input::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-activator > div a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content li:not(.user-select) span:hover, kn-grid-preset kn-menu-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-grid-preset kn-menu-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-grid-preset kn-menu-content kn-select kn-options-container, kn-grid-preset kn-menu-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span:hover, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-options-container, kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-grid-query-filter kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-query-filter kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-query-filter kn-menu kn-menu-activator, kn-grid-query-filter kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
    border-bottom: 10px solid #ffffff; }

kn-attached-portal .kn-grid-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-grid-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-grid-query-filter kn-menu kn-menu-activator {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-query-filter kn-menu kn-menu-activator em {
    color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-activator > * {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease; }
    kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator > span.template-name {
    color: #ffd088; }

kn-attached-portal .kn-menu-content.kn-grid-query-content {
  left: calc(50% - 900px);
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-menu-content.kn-grid-query-content::before {
    left: calc(50% + 375px); }

kn-grid-reset {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-reset.expanded {
    background-color: #0b7244; }
  kn-grid-reset:not(.expanded) kn-menu-activator:focus, kn-grid-reset kn-menu-activator:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset kn-menu-activator, kn-grid-reset kn-menu-activator i {
    color: rgba(255, 255, 255, 0.8); }
  kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i {
    color: #ffffff; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-button-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content) li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-attached-portal .kn-grid-button-content li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-attached-portal .kn-grid-button-content li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset > *:not(.disabled), kn-grid-reset a:not(.disabled) {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus, kn-grid-reset a:not(.disabled):hover, kn-grid-reset a:not(.disabled):focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-reset > *.disabled, kn-grid-reset a.disabled {
    color: rgba(255, 255, 255, 0.3); }

kn-grid-search input[type='search'] {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff; }
  kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
    background-color: rgba(0, 0, 0, 0.4); }
  kn-grid-search input[type='search']::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-search::after {
  background-color: #ffffff; }

header.liner .database-menu::before, header.liner .database-menu::after {
  background-color: rgba(255, 255, 255, 0.1); }

header.liner .database-menu kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  header.liner .database-menu kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  header.liner .database-menu kn-database-selector .filter input {
    color: #ffffff; }
    header.liner .database-menu kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

header.liner .database-menu kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

header.liner .database-menu kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  header.liner .database-menu kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

header.liner .database-menu kn-database-selector ul li strong {
  color: white; }

header.liner .database-menu kn-database-selector ul li span.uid {
  color: #b39b91; }

kn-attached-portal kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  kn-attached-portal kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  kn-attached-portal kn-database-selector .filter input {
    color: #ffffff; }
    kn-attached-portal kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

kn-attached-portal kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

kn-attached-portal kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  kn-attached-portal kn-database-selector ul li a.active::before, kn-attached-portal kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

kn-attached-portal kn-database-selector ul li strong {
  color: white; }

kn-attached-portal kn-database-selector ul li span.uid {
  color: #b39b91; }

header.liner .database-menu kn-menu-activator::after {
  background-color: rgba(255, 255, 255, 0.2); }

header.liner .database-menu kn-menu-activator strong {
  color: #ffffff; }

header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  header.liner nav > ul > li > a.router-link-active, header.liner nav > ul > li > kn-menu-activator.router-link-active, header.liner kn-navbar > ul > li > a.router-link-active, header.liner kn-navbar > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  header.liner nav > ul > li > a:hover, header.liner nav > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  header.liner nav > ul > li > a:not(.router-link-active):focus, header.liner nav > ul > li > kn-menu-activator:not(.router-link-active):focus, header.liner kn-navbar > ul > li > a:not(.router-link-active):focus, header.liner kn-navbar > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

kn-attached-portal .kn-navbar-expansion > ul > li > a, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-navbar-expansion > ul > li > a.router-link-active, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:hover, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:not(.router-link-active):focus, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

header.liner {
  background-color: #805848;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4) 80px); }
  header.liner .logo:hover, header.liner .logo:focus {
    background-color: rgba(255, 255, 255, 0.05); }
  header.liner button.main-action {
    color: white;
    background-color: rgba(128, 88, 72, 0.9);
    background-color: #10a060; }
    header.liner button.main-action.danger {
      background-color: rgba(192, 64, 96, 0.9); }
    header.liner button.main-action[disabled] {
      background-color: rgba(160, 160, 160, 0.5); }
    header.liner button.main-action::after {
      background-color: white; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      background-color: rgba(128, 88, 72, 0.7); }
      header.liner button.main-action:not([disabled]):hover.danger, header.liner button.main-action:not([disabled]):focus.danger {
        background-color: rgba(192, 64, 96, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      background-color: rgba(128, 88, 72, 0.8); }
      header.liner button.main-action:not([disabled]):active.danger {
        background-color: rgba(192, 64, 96, 0.8); }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus, header.liner button.main-action:not([disabled]):active {
      background-color: #58bd90; }
    header.liner button.main-action:not([disabled]):active {
      background-color: #40b380; }
  header.liner kn-menu {
    color: rgba(255, 255, 255, 0.5);
    z-index: 10; }
    header.liner kn-menu.expanded {
      background-color: #805848; }
      header.liner kn-menu.expanded kn-menu-content {
        border-top: 1px solid rgba(255, 255, 255, 0.1); }
    header.liner kn-menu kn-menu-activator:hover, header.liner kn-menu kn-menu-activator:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }
    header.liner kn-menu kn-menu-content {
      background-color: #805848; }
      header.liner kn-menu kn-menu-content a {
        color: rgba(255, 255, 255, 0.5); }
        header.liner kn-menu kn-menu-content a:hover {
          background-color: rgba(255, 255, 255, 0.1);
          color: #ffffff; }

kn-attached-portal .header-liner.kn-menu-content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #805848; }
  kn-attached-portal .header-liner.kn-menu-content a {
    color: rgba(255, 255, 255, 0.5); }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }

header.liner .user-menu kn-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .user-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-input label, kn-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-input label .required {
  color: #c04060; }

kn-input .kn-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-input:not(.disabled):not(.focused) .kn-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-input.focused .kn-input-container {
  border-color: transparent; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  background-color: #805848; }

kn-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  background-color: #c04060; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::before {
  background-color: #ecc6cf; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::after {
  background-color: #c04060; }

kn-input.ng-touched.ng-pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::before {
  background-color: #d9cdc8; }

kn-input input {
  color: #000000; }

kn-input.disabled input {
  color: rgba(0, 0, 0, 0.4); }

kn-input input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input label, kn-date-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-date-input label .required {
  color: #c04060; }

kn-date-input .kn-date-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-date-input:not(.disabled):not(.focused) .kn-date-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-date-input.focused .kn-date-input-container {
  border-color: transparent; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  background-color: #805848; }

kn-date-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::before {
  background-color: #ecc6cf; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::after {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::before {
  background-color: #d9cdc8; }

kn-date-input date-input {
  color: #000000; }

kn-date-input.disabled date-input {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input date-input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input .input-button i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

kn-kcuni-settings p {
  color: rgba(0, 0, 0, 0.5); }
  kn-kcuni-settings p strong {
    color: rgba(0, 0, 0, 0.8); }

kn-kcuni-settings .settings button {
  color: #000000; }
  kn-kcuni-settings .settings button:not([disabled]):hover, kn-kcuni-settings .settings button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-kcuni-settings .settings button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-kcuni-settings .settings:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-kcuni-settings .message {
  color: #c04060;
  background-color: rgba(192, 64, 96, 0.2); }

.app-loading-screen p {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

html, body {
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.8); }

a {
  color: #8040a0; }

kn-input.ownership [kn-prefix] {
  color: #10a060; }

.flat-button {
  color: #000000; }
  .flat-button:not([disabled]):hover, .flat-button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

.flat-table thead td {
  border-bottom: 3px solid #cccccc; }

.flat-table tbody td {
  border-bottom: 1px solid #ebebeb; }

.flat-table tbody tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

.flat-table .actions button {
  color: #000000; }
  .flat-table .actions button:not([disabled]):hover, .flat-table .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-table .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-modal.confirmation-dialog .overlay {
  background-color: rgba(48, 48, 48, 0.9); }
  kn-modal.confirmation-dialog .overlay .container {
    background-color: rgba(40, 40, 40, 0.7); }
  kn-modal.confirmation-dialog .overlay .content {
    color: white; }
  kn-modal.confirmation-dialog .overlay .buttons {
    background-color: rgba(0, 0, 0, 0.2); }
    kn-modal.confirmation-dialog .overlay .buttons button {
      color: rgba(255, 255, 255, 0.5); }
      kn-modal.confirmation-dialog .overlay .buttons button.primary {
        color: rgba(64, 128, 255, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.primary::before {
          background-color: #4080ff; }
        kn-modal.confirmation-dialog .overlay .buttons button.primary:hover, kn-modal.confirmation-dialog .overlay .buttons button.primary:focus {
          background-color: rgba(64, 128, 255, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button.danger {
        color: rgba(255, 64, 72, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.danger::before {
          background-color: #ff4048; }
        kn-modal.confirmation-dialog .overlay .buttons button.danger:hover, kn-modal.confirmation-dialog .overlay .buttons button.danger:focus {
          background-color: rgba(255, 64, 72, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        background-color: white; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        background-color: rgba(255, 255, 255, 0.7);
        color: rgba(0, 0, 0, 0.8); }

kn-options-container {
  background-color: #ffffff; }
  kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-optgroup > strong {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

kn-option.marked {
  background-color: rgba(0, 0, 0, 0.07); }

kn-option:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-option.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-option .kn-option-selector {
  color: rgba(0, 0, 0, 0.3); }

kn-option.selected .kn-option-selector {
  color: #805848; }

kn-attached-portal .kn-options-container {
  background-color: #ffffff; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-attached-portal .kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-attached-portal .kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-attached-portal .kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-ownership-display {
  color: rgba(0, 0, 0, 0.3); }
  kn-ownership-display > span {
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.1); }

kn-print-button kn-menu.expanded {
  background-color: #0b7244; }

kn-print-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-print-button kn-menu kn-menu-activator, kn-print-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-query-filter .query-filter > div[knFilterGroup] {
  color: rgba(0, 0, 0, 0.8); }

kn-query-filter .filter-group .new-filter-actions button {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .filter-group {
  border-left: 10px solid rgba(0, 0, 0, 0.1); }

kn-query-filter li.boolean-operator {
  background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter li.boolean-operator span {
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff; }

kn-query-filter .filter-name [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-operator kn-input [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-value .presenter > span {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-actions button {
  color: #000000; }
  kn-query-filter .filter-actions button:not([disabled]):hover, kn-query-filter .filter-actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter .filter-actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-query-filter .footer {
  background-color: rgba(0, 0, 0, 0.05); }
  kn-query-filter .footer button {
    background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-placeholder > i.material-icons {
  color: rgba(0, 0, 0, 0.35); }

kn-query-filter .filter-placeholder kn-select .kn-select-container {
  border: 1px solid rgba(0, 0, 0, 0.3); }
  kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
    background-color: rgba(0, 0, 0, 0.05); }

kn-query-filter .filter-placeholder kn-select .placeholder {
  color: rgba(0, 0, 0, 0.8); }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-radio input[type='radio']:checked + .kn-radio-box::after {
  border-color: #805848; }

kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border: 7px solid #805848; }

kn-radio input[type='radio']:focus + .kn-radio-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-radio:not(.disabled) input[type='radio']:not(:checked):hover + .kn-radio-box::after, kn-radio:not(.disabled) input[type='radio']:not(:checked) + .kn-radio-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-radio.disabled label, kn-radio.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-radio.disabled input[type='radio']:not(:checked) + .kn-radio-box::after, kn-radio.readonly input[type='radio']:not(:checked) + .kn-radio-box::after {
  background-color: transparent !important; }

kn-radio.disabled input[type='radio'] + .kn-radio-box::after, kn-radio.disabled input[type='radio'] + .kn-radio-box .kn-radio-mark, kn-radio.readonly input[type='radio'] + .kn-radio-box::after, kn-radio.readonly input[type='radio'] + .kn-radio-box .kn-radio-mark {
  border-color: rgba(0, 0, 0, 0.1); }

kn-radio-group.ng-touched.ng-invalid kn-radio .kn-radio-box::after, kn-radio-group.ng-touched.ng-invalid kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border-color: #c04060; }

kn-select label, kn-select [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-select label .required {
  color: #c04060; }

kn-select .kn-select-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-select:not(.disabled):not(.focused) .kn-select-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-select.focused .kn-select-container {
  border-color: transparent; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  background-color: #805848; }

kn-select.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  background-color: #c04060; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::before {
  background-color: #ecc6cf; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::after {
  background-color: #c04060; }

kn-select.ng-touched.ng-pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::before {
  background-color: #d9cdc8; }

kn-select .placeholder {
  color: rgba(0, 0, 0, 0.35); }

.kn-select-dropdown {
  border-left: 1px solid rgba(0, 0, 0, 0.05); }

kn-spinner {
  animation-name: strio-spinner-color-4; }
  kn-spinner .path {
    animation: strio-spinner-dash 1.5s ease-in-out infinite, strio-spinner-color-4 6s ease-in-out infinite; }

@keyframes strio-spinner-color-4 {
  0%, 20% {
    stroke: rgba(128, 88, 72, 0.6); }
  40% {
    stroke: rgba(128, 88, 72, 0.7); }
  60% {
    stroke: rgba(128, 88, 72, 0.8); }
  80% {
    stroke: rgba(128, 88, 72, 0.9); }
  100% {
    stroke: #805848; } }

kn-tabs.boxlist div.tabs-viewport {
  background-color: #ffffff; }

kn-tabs.boxlist div.tabs-labels li a {
  color: rgba(0, 0, 0, 0.5); }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    color: rgba(0, 0, 0, 0.8); }

kn-tabs.boxlist div.tabs-labels li.active a {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8); }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    border-bottom: 15px solid #ffffff; }

kn-tabs.notebook div.tabs-labels {
  background-color: rgba(0, 0, 0, 0.08); }
  kn-tabs.notebook div.tabs-labels li a {
    color: #805848; }
    kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
      color: #000000; }
    kn-tabs.notebook div.tabs-labels li a::before {
      background-color: rgba(0, 0, 0, 0.3); }
  kn-tabs.notebook div.tabs-labels li.active a {
    background-color: rgba(255, 255, 255, 0.5); }
    kn-tabs.notebook div.tabs-labels li.active a::before {
      background-color: #805848; }

kn-textarea label, kn-textarea [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-textarea label .required {
  color: #c04060; }

kn-textarea .kn-textarea-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-textarea:not(.disabled):not(.focused) .kn-textarea-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-textarea.focused .kn-textarea-container {
  border-color: transparent; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  background-color: #805848; }

kn-textarea.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::before {
  background-color: #ecc6cf; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::after {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::before {
  background-color: #d9cdc8; }

kn-textarea textarea {
  color: #000000; }

kn-textarea.disabled textarea {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea textarea::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-timeline::before {
  background: linear-gradient(90deg, #f0f0f0, transparent); }

kn-timeline::after {
  background: linear-gradient(270deg, #f0f0f0, transparent); }

kn-timeline .time-segment {
  background-color: #1860d8; }
  kn-timeline .time-segment.future {
    background-color: #8028d8; }
  kn-timeline .time-segment.selected {
    background-color: #0dc22b; }

kn-timeline .time-mark > .calendar-mark {
  position: relative;
  top: 25px;
  left: -5px; }
  kn-timeline .time-mark > .calendar-mark.today {
    left: -6px; }
  kn-timeline .time-mark > .calendar-mark.pin {
    left: -3px; }

kn-timeline .time-mark > a {
  background-color: #1860d8; }
  kn-timeline .time-mark > a.selected {
    background-color: #1860d8; }
    kn-timeline .time-mark > a.selected .date {
      color: rgba(0, 0, 0, 0.8); }
    kn-timeline .time-mark > a.selected::after {
      border: 2px solid #1860d8; }
  kn-timeline .time-mark > a:focus::before {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-timeline .time-mark > a .date {
    color: rgba(0, 0, 0, 0.5); }

kn-timeline .time-mark.pin > a {
  background-color: white;
  border: 4px solid #1860d8; }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.today::before {
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.8), transparent); }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.future > a {
  background-color: #8028d8; }
  kn-timeline .time-mark.future > a.selected::after {
    border-color: #8028d8; }

kn-timeline .time-mark.future.pin > a {
  background-color: white;
  border-color: #8028d8; }

kn-timeline .time-mark.today > a {
  background-color: #303030; }
  kn-timeline .time-mark.today > a.selected::after {
    border-color: #303030; }
  kn-timeline .time-mark.today > a .date {
    top: -60px; }

kn-timeline .time-mark.today.pin > a {
  background-color: white;
  border-color: #303030; }

kn-toast > div {
  background-color: rgba(0, 0, 0, 0.75);
  color: white; }
  kn-toast > div a {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-left: 1px solid rgba(255, 255, 255, 0.15); }
    kn-toast > div a:hover {
      background-color: rgba(0, 0, 0, 0.5); }
    kn-toast > div a:active {
      background-color: black; }

app-summary .heading {
  height: 80px;
  display: flex;
  align-items: center; }
  app-summary .heading h1 {
    margin: 0;
    padding: 0 50px;
    font-size: 32px; }
  app-summary .heading .spacer {
    width: 100%; }
  app-summary .heading kn-date-range {
    padding-right: 0;
    background: white; }

app-summary .form-container.heading {
  margin-bottom: 0; }

app-summary .grid {
  max-width: 1200px;
  display: flex;
  align-items: center;
  margin: 0 auto; }

app-summary td.device-port-total {
  font-style: italic; }

app-summary td.note {
  color: gray; }

app-summary td.material-icons {
  display: table-cell; }

app-summary .summary-aggregation {
  margin-left: 15px;
  display: flex; }
  app-summary .summary-aggregation kn-select {
    width: 350px; }
  app-summary .summary-aggregation .clear {
    color: rgba(0, 0, 0, 0.8);
    padding: 5px 5px 0 5px;
    margin-top: 5px;
    line-height: 20px; }
    app-summary .summary-aggregation .clear.disabled {
      color: rgba(0, 0, 0, 0.5);
      cursor: default; }
    app-summary .summary-aggregation .clear:hover:not(.disabled) {
      background-color: rgba(0, 0, 0, 0.1); }

app-summary .summary-row {
  background-color: rgba(0, 0, 0, 0.15); }
  app-summary .summary-row:hover:not(.disabled) {
    background-color: rgba(0, 0, 0, 0.075); }

@keyframes indeterminate {
  0% {
    left: 0%;
    right: 100%; }
  30% {
    left: 0%;
    right: 50%; }
  80% {
    left: 70%;
    right: 0%; }
  100% {
    left: 100%;
    right: 0%; } }

/*$bg-color: #283038;
$fg-color: #c0c0c0;

$red-shade-color: #f06060;
$yellow-shade-color: #f0d060;
$green-shade-color: #a0f060;
$emerald-shade-color: #60f080;
$cyan-shade-color: #60e0f0;
$blue-shade-color: #6080f0;
$purle-shade-color: #b060f0;
$pink-shade-color: #f060c8;

$primary-color: $purle-shade-color;
$secondary-color: $yellow-shade-color;*/
/*$foreground-color: rgb(255, 255, 255);
$background-color: rgb(56, 56, 64);
$text-color: rgba(255, 255, 255, 0.9);
$text-secondary-color: rgba(255, 255, 255, 0.6);
$reading-animation-color: rgb(0, 150, 136);

$primary-color: rgb(128, 88, 72);
$accent-color: rgb(16, 160, 96);
$warn-color: rgb(192, 64, 96);

$divider-color: rgba(255, 255, 255, 0.1);
$header-divider-color: rgba(255, 255, 255, 0.2);
$row-divider-color: rgba(255, 255, 255, 0.15);*/
kn-audit-display {
  white-space: nowrap;
  margin: 10px 5px; }
  kn-audit-display strong {
    padding: 0.1em 0.4em 0.2em;
    margin: 0 0.2em;
    border-radius: 0.5em;
    font-weight: 400; }

kn-checkbox .kn-checkbox-mark {
  opacity: 0; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::before {
  border-radius: 50%; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border-radius: 2px;
  transition: 0.3s all ease; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark-path {
  stroke-dashoffset: 0;
  stroke-dasharray: 25; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox .kn-checkbox-mark-path {
  stroke-dashoffset: 25;
  stroke-dasharray: 25;
  stroke-width: 2px;
  transition: 0.3s transform ease, 0.3s stroke-dashoffset ease;
  transform-origin: 50% 50%;
  stroke: white; }

kn-checkbox .kn-checkbox-box::after, kn-checkbox label {
  transition: 0.3s color ease; }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox.indeterminate .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox.indeterminate .kn-checkbox-mark-path {
  transform: rotate(45deg) translate(-2px, 0);
  stroke-dashoffset: 20 !important;
  stroke-dasharray: 14 !important; }

app-print-template-edit kn-codemirror {
  height: 100%;
  flex: 1; }

app-print-template-edit > kn-resizable-container {
  height: 100%; }
  app-print-template-edit > kn-resizable-container kn-draggable-handler.left {
    z-index: 2;
    height: 50px !important;
    top: calc(100% - 50px) !important; }
  app-print-template-edit > kn-resizable-container .preview iframe {
    width: 100%;
    height: 100%;
    border: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror {
    height: 100%;
    overflow: visible;
    background: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror-scroll {
    margin: 0;
    padding: 0;
    overflow: visible !important; }
  app-print-template-edit > kn-resizable-container .CodeMirror-sizer {
    border-right-width: 0 !important; }
  app-print-template-edit > kn-resizable-container .box {
    width: 100%;
    height: 100%; }

app-print-template-edit form {
  width: 100%;
  height: 100%; }

app-print-template-edit kn-tabs {
  flex-direction: column-reverse; }
  app-print-template-edit kn-tabs a.sidepanel {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 6px 0 0; }
    app-print-template-edit kn-tabs a.sidepanel i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    app-print-template-edit kn-tabs a.sidepanel:hover, app-print-template-edit kn-tabs a.sidepanel:focus {
      opacity: 1;
      text-decoration: none; }
    app-print-template-edit kn-tabs a.sidepanel:active {
      opacity: 1; }
    app-print-template-edit kn-tabs a.sidepanel[disabled] {
      opacity: 0.3;
      background: none; }
    app-print-template-edit kn-tabs a.sidepanel i {
      transition: transform 0.5s ease 0.3s; }
    app-print-template-edit kn-tabs a.sidepanel.active i {
      transform: rotate(180deg); }

app-print-template-edit kn-tab.active {
  display: flex;
  flex-direction: column;
  flex: 1; }

app-print-template-edit kn-tab.home .box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }

app-print-template-edit kn-tab.home .fields {
  width: 100%;
  max-width: 700px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home i.banner {
  font-size: 192px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home h1 {
  text-align: center;
  margin: 50px 0; }

app-print-template-edit kn-tab.home .form-container {
  width: 80%;
  height: 100%;
  margin: 50px auto; }

app-print-template-edit kn-tab.home .form-layout {
  display: flex;
  flex-direction: column;
  height: 100%; }

app-print-template-edit kn-tab .no-print-context-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder i.banner {
    font-size: 128px;
    margin: 0 auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder strong {
    font-family: 'Exo 2';
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin: 20px 0 50px 0; }
  app-print-template-edit kn-tab .no-print-context-placeholder button {
    text-align: center; }

app-print-template-edit kn-menu.errors kn-menu-activator {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  margin: 0 8px 0 0;
  opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  app-print-template-edit kn-menu.errors kn-menu-activator:hover, app-print-template-edit kn-menu.errors kn-menu-activator:focus {
    opacity: 1;
    text-decoration: none; }
  app-print-template-edit kn-menu.errors kn-menu-activator:active {
    opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator[disabled] {
    opacity: 0.3;
    background: none; }

app-print-template-edit kn-menu.errors kn-menu-content {
  position: absolute;
  right: 8px;
  bottom: 50px;
  max-width: 1000px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-content [hidden] {
    display: none; }
  app-print-template-edit kn-menu.errors kn-menu-content strong {
    display: block; }
  app-print-template-edit kn-menu.errors kn-menu-content pre {
    font-size: 14px;
    margin-bottom: 0; }

kn-roles-table .role-permissions {
  position: relative;
  margin: 0 10px 76px 10px; }
  kn-roles-table .role-permissions > .scrollable {
    overflow-x: auto;
    margin: 0 54px 0 220px; }
  kn-roles-table .role-permissions table {
    border-collapse: separate;
    border-spacing: 0; }
    kn-roles-table .role-permissions table thead th {
      position: relative;
      width: 54px;
      min-width: 54px;
      height: 270px;
      padding: 0; }
      kn-roles-table .role-permissions table thead th.permission:not(:nth-child(2))::before {
        content: '';
        left: 0;
        bottom: 10px;
        position: absolute;
        display: block;
        width: 1px;
        height: calc(100% - 20px); }
    kn-roles-table .role-permissions table tbody td {
      padding: 0;
      height: 54px; }
    kn-roles-table .role-permissions table tbody.permissions-matrix td kn-checkbox {
      justify-content: center; }
    kn-roles-table .role-permissions table tbody.add-new-input td {
      height: 0; }
    kn-roles-table .role-permissions table div.rotate {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 54px;
      bottom: 0;
      left: 100%;
      transform: rotate(270deg);
      transform-origin: 0 100%;
      text-align: left; }
    kn-roles-table .role-permissions table th.name, kn-roles-table .role-permissions table td.name {
      position: absolute;
      left: 0;
      width: 220px;
      text-align: center;
      vertical-align: middle; }
      kn-roles-table .role-permissions table th.name kn-input, kn-roles-table .role-permissions table td.name kn-input {
        margin: 10px; }
        kn-roles-table .role-permissions table th.name kn-input input, kn-roles-table .role-permissions table td.name kn-input input {
          font-weight: 700; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.name, kn-roles-table .role-permissions table td.permission span.description {
      display: block;
      white-space: nowrap;
      padding: 1px 10px; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table td.permission span.name {
      font-size: 16px;
      font-weight: bold; }
    kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.description {
      font-size: 14px;
      font-weight: 400;
      opacity: 0.7; }
    kn-roles-table .role-permissions table th.spacer, kn-roles-table .role-permissions table td.spacer {
      width: 100%;
      min-width: 0; }
    kn-roles-table .role-permissions table th.actions, kn-roles-table .role-permissions table td.actions {
      position: absolute;
      right: 0;
      width: 54px; }
  kn-roles-table .role-permissions .actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 10px;
    height: 34px; }
    kn-roles-table .role-permissions .actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-roles-table .role-permissions .actions button:hover, kn-roles-table .role-permissions .actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-roles-table .role-permissions .actions button:active {
      opacity: 1; }
    kn-roles-table .role-permissions .actions button[disabled] {
      opacity: 0.3;
      background: none; }

kn-permission-actions-select kn-menu-content {
  position: absolute;
  z-index: 100;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3));
  padding: 10px;
  border-radius: 5px;
  transform: translate(calc(-50% + 23px), 5px); }
  kn-permission-actions-select kn-menu-content > div {
    padding: 5px; }
    kn-permission-actions-select kn-menu-content > div kn-checkbox label {
      flex: 1; }
  kn-permission-actions-select kn-menu-content::before {
    position: absolute;
    left: calc(50% - 10px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

kn-user-edit table.user-roles {
  width: 100%;
  border-collapse: collapse;
  margin: 13px 0 10px 0; }
  kn-user-edit table.user-roles tbody tr {
    height: 40px; }
  kn-user-edit table.user-roles tbody td {
    transition: 0.3s background-color ease;
    padding: 10px 0 10px 10px; }
  kn-user-edit table.user-roles td.actions {
    text-align: right; }
  kn-user-edit table.user-roles thead, kn-user-edit table.user-roles td.user-role input {
    font-weight: bold; }
  kn-user-edit table.user-roles thead {
    text-align: center; }
    kn-user-edit table.user-roles thead tr:first-child {
      text-align: center; }
    kn-user-edit table.user-roles thead tr:last-child {
      height: auto; }
      kn-user-edit table.user-roles thead tr:last-child td {
        font-weight: 400;
        font-style: italic;
        opacity: 0.7;
        padding-bottom: 5px; }
        kn-user-edit table.user-roles thead tr:last-child td > div {
          display: flex; }
          kn-user-edit table.user-roles thead tr:last-child td > div > span {
            flex: 1; }
  kn-user-edit table.user-roles td.user-role {
    width: 200px; }
  kn-user-edit table.user-roles td.user-role-customer-branch {
    width: 250px; }
    kn-user-edit table.user-roles td.user-role-customer-branch > div {
      display: flex; }
      kn-user-edit table.user-roles td.user-role-customer-branch > div input {
        text-align: right;
        width: 100%; }
  kn-user-edit table.user-roles td.actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 10px;
    height: 34px; }
    kn-user-edit table.user-roles td.actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-user-edit table.user-roles td.actions button:hover, kn-user-edit table.user-roles td.actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-user-edit table.user-roles td.actions button:active {
      opacity: 1; }
    kn-user-edit table.user-roles td.actions button[disabled] {
      opacity: 0.3;
      background: none; }
  kn-user-edit table.user-roles td.actions button:first-child {
    margin-left: 0; }
  kn-user-edit table.user-roles td.actions button:last-child {
    margin-right: 0; }

kn-control-messages {
  position: relative;
  height: 15px; }
  kn-control-messages > div {
    position: absolute;
    display: block; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave {
      transition: 0.3s all ease; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave.kn-leave-active {
      top: -5px;
      opacity: 0; }
    kn-control-messages > div.kn-leave, kn-control-messages > div.kn-enter.kn-enter-active {
      top: 0;
      opacity: 1; }

app-database-manage kn-tabs {
  position: relative;
  padding-top: 50px;
  margin: 0 0 20px 0; }
  app-database-manage kn-tabs .tab-group {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 400; }
  app-database-manage kn-tabs a i.material-icons {
    font-size: 72px; }
  app-database-manage kn-tabs a strong {
    font-weight: 400; }
  app-database-manage kn-tabs kn-tab {
    position: relative;
    padding: 30px;
    justify-content: center;
    text-align: center; }
    app-database-manage kn-tabs kn-tab .actions {
      margin: 20px auto 0 auto; }
    app-database-manage kn-tabs kn-tab p.note {
      margin-top: 0;
      font-style: italic;
      opacity: 0.5; }
    app-database-manage kn-tabs kn-tab .select-database {
      margin: 20px auto;
      padding: 20px;
      width: 400px; }
    app-database-manage kn-tabs kn-tab::after {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
      transition: 0.3s all ease; }
    app-database-manage kn-tabs kn-tab.kn-drag-over::after {
      opacity: 1;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      left: 10px;
      top: 10px; }

kn-datagrid tr td.strong {
  font-weight: bold; }

kn-datagrid tr td.highlight {
  color: #802020; }

kn-datagrid tr td.note {
  color: gray;
  font-size: 0.8em; }

kn-datagrid tr td.overflow {
  overflow: visible; }

kn-datagrid kn-cell-renderer span.user-database-tag, kn-datagrid kn-cell-renderer span.user-role-tag {
  color: white;
  padding: 4px 7px;
  margin: 0 5px 0 0;
  border-radius: 2px; }

kn-datagrid kn-cell-renderer span.user-ownership {
  color: rgba(0, 0, 0, 0.3); }
  kn-datagrid kn-cell-renderer span.user-ownership > span {
    color: black;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin: 0 4px;
    border-radius: 2px; }

kn-datepicker .viewport {
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-datepicker .viewport::before {
    content: '';
    position: absolute;
    display: block;
    left: calc(50% - 10px);
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  kn-datepicker .viewport.kn-enter, kn-datepicker .viewport.kn-leave {
    transition: 0.3s opacity ease, 0.3s margin-top ease, 0.3s transform ease; }
    kn-datepicker .viewport.kn-enter kn-date-view, kn-datepicker .viewport.kn-enter kn-day-view, kn-datepicker .viewport.kn-enter kn-hour-view, kn-datepicker .viewport.kn-leave kn-date-view, kn-datepicker .viewport.kn-leave kn-day-view, kn-datepicker .viewport.kn-leave kn-hour-view {
      opacity: 1 !important;
      transform: none !important; }
  kn-datepicker .viewport.kn-enter {
    opacity: 0;
    margin-top: 10px; }
  kn-datepicker .viewport.kn-leave, kn-datepicker .viewport.kn-enter.kn-enter-active {
    opacity: 1;
    margin-top: 0; }
  kn-datepicker .viewport.kn-leave.kn-leave-active {
    opacity: 0;
    margin-top: 10px; }

kn-datepicker kn-date-header a, kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a, kn-datepicker kn-time-header a:hover {
  text-decoration: none; }

kn-datepicker kn-date-header a {
  text-align: center;
  font-weight: 900; }

kn-datepicker kn-time-header a {
  font-weight: 400;
  border-radius: 10%; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-hour-view.kn-enter, kn-datepicker kn-hour-view.kn-leave {
  transition: 0.3s opacity ease, 0.3s transform ease; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-hour-view.kn-enter {
  opacity: 0;
  transform: scale(0.7, 0.7); }

kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-date-view.kn-enter.kn-enter-active, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-day-view.kn-enter.kn-enter-active, kn-datepicker kn-hour-view.kn-leave, kn-datepicker kn-hour-view.kn-enter.kn-enter-active {
  opacity: 1;
  transform: scale(1, 1); }

kn-datepicker kn-date-view.kn-leave.kn-leave-active, kn-datepicker kn-day-view.kn-leave.kn-leave-active, kn-datepicker kn-hour-view.kn-leave.kn-leave-active {
  opacity: 0;
  transform: scale(1.4, 1.4); }

kn-datepicker kn-month-view.animated {
  transition: 0.3s transform ease; }

kn-datepicker kn-month-view th, kn-datepicker kn-month-view td {
  text-align: center;
  border: 1px solid transparent; }

kn-datepicker kn-month-view th {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase; }

kn-datepicker kn-month-view td a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker kn-month-view td a, kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:active, kn-datepicker kn-month-view td a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    outline: none; }

kn-datepicker .picker-relative-container {
  position: relative;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  margin: 22px; }
  kn-datepicker .picker-relative-container.format-12-hours {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px; }
  kn-datepicker .picker-relative-container .center {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    z-index: 1;
    border-radius: 50%; }
  kn-datepicker .picker-relative-container .gauge {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: 0 0; }
  kn-datepicker .picker-relative-container li {
    text-align: center;
    border: 1px solid transparent; }
    kn-datepicker .picker-relative-container li::before {
      border-radius: 50%; }
    kn-datepicker .picker-relative-container li.minor a {
      width: 13px;
      height: 13px;
      line-height: 13px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent;
      font-size: 0; }
      kn-datepicker .picker-relative-container li.minor a, kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:active, kn-datepicker .picker-relative-container li.minor a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
        outline: none; }
    kn-datepicker .picker-relative-container li:not(.minor) a {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent; }
      kn-datepicker .picker-relative-container li:not(.minor) a, kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:active, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        outline: none; }

kn-datepicker .period-selector a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker .period-selector a, kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:active, kn-datepicker .period-selector a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    outline: none; }

.kn-ripple {
  overflow: hidden;
  position: relative; }

.kn-ripple.kn-ripple-unbounded {
  overflow: visible; }

.kn-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0); }

kn-export-button kn-menu {
  display: block;
  position: relative; }
  kn-export-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-export-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-export-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-export-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-export-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-export-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-export-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-export-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-export-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-export-button kn-menu kn-spinner {
    left: 32px; }

button.form-button, .form-input button {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 30px;
  font-size: 16px;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s; }
  button.form-button[disabled], .form-input button[disabled] {
    box-shadow: none; }
  button.form-button::-moz-focus-inner, .form-input button::-moz-focus-inner {
    border: none; }
  button.form-button::after, .form-input button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    bottom: -25%;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    transition: 0.2s all ease; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
    button.form-button:not([disabled]):active::after, .form-input button:not([disabled]):active::after {
      bottom: -70%;
      left: -50%;
      height: 200%;
      width: 200%;
      opacity: 0.5; }

@keyframes reveal-back-link {
  to {
    opacity: 1;
    left: calc(50% - 700px); } }

.form-container.heading, .form-container .form-loader-bar {
  position: relative; }
  .form-container.heading::before, .form-container.heading::after, .form-container .form-loader-bar::before, .form-container .form-loader-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    height: 5px;
    z-index: 3; }
  .form-container.heading::before, .form-container .form-loader-bar::before {
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.3s opacity ease; }
  .form-container.heading::after, .form-container .form-loader-bar::after {
    left: 0%;
    right: 100%;
    opacity: 0; }

.loading .form-container.heading::before, .loading .form-container.heading::after, .loading .form-container .form-loader-bar::before, .loading .form-container .form-loader-bar::after {
  opacity: 1; }

.loading .form-container.heading::after, .loading .form-container .form-loader-bar::after {
  animation: indeterminate 1s linear infinite; }

.form-container {
  margin: 30px 0; }
  .form-container.heading {
    position: relative;
    margin: 0;
    padding: 0; }
  .form-container h1, .form-container p, .form-container .form-layout {
    margin: auto;
    max-width: 1200px; }
  .form-container h1 {
    padding: 30px 0;
    margin: 0 auto;
    border: none; }
  .form-container .form-back {
    position: absolute;
    opacity: 0;
    left: calc(50% - 750px);
    top: calc(50% - 32px);
    transition: 0.3s all ease;
    animation-name: reveal-back-link;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
    .form-container .form-back::after {
      content: '';
      position: absolute;
      display: block;
      width: 64px;
      height: 64px;
      left: 20px;
      border-radius: 50%;
      transition: 0.3s all ease;
      transform: rotateY(45deg); }
    .form-container .form-back i {
      position: absolute;
      z-index: 10;
      font-size: 48px;
      line-height: 64px;
      text-align: center;
      width: 64px;
      height: 64px; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      left: 0;
      transform: rotateY(0); }
    .form-container .form-back:active::after {
      transition: none; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px; }
  .form-footer div:only-child {
    margin-left: auto; }

.form-actions-info {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  margin: 0 1em;
  white-space: nowrap; }
  .form-actions-info i.material-icons {
    padding: 0 0.3em; }

.form-buttons {
  text-align: right; }
  .form-buttons button {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    width: auto;
    margin-left: 10px;
    padding: 0 30px; }
    .form-buttons button[disabled] {
      box-shadow: none; }
    .form-buttons button::-moz-focus-inner {
      border: none; }
    .form-buttons button::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    .form-buttons button:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      .form-buttons button:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }

.form-errors {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .form-errors li {
    margin: 2px 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .form-errors li strong {
      display: flex;
      align-items: center;
      color: white;
      padding: 0.3em 0.5em;
      margin-right: 1em; }
      .form-errors li strong i {
        padding-right: 0.3em; }

.form-layout .info-bar {
  margin: 15px;
  padding: 15px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .info-bar strong {
    font-weight: 400; }

.form-layout .form-grid {
  display: flex;
  flex-direction: column; }

.form-layout .form-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }
  .form-layout .form-box .title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 5px;
    height: 34px;
    line-height: 34px; }
    .form-layout .form-box .title h2 {
      flex: 1;
      padding-left: 8px;
      margin: 0;
      font-weight: 800;
      font-size: 1em;
      text-transform: uppercase; }
    .form-layout .form-box .title .side-action {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      height: 24px;
      margin-left: 5px; }
      .form-layout .form-box .title .side-action i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .title .side-action:hover, .form-layout .form-box .title .side-action:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .title .side-action:active {
        opacity: 1; }
      .form-layout .form-box .title .side-action[disabled] {
        opacity: 0.3;
        background: none; }
  .form-layout .form-box .content {
    flex-grow: 1;
    padding: 0 15px 15px 15px; }
    .form-layout .form-box .content:first-child {
      padding-top: 15px; }
  .form-layout .form-box .info-bar {
    margin: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none; }
  .form-layout .form-box .container {
    display: flex; }
    .form-layout .form-box .container .content {
      flex: 1;
      width: 0; }
    .form-layout .form-box .container .side-actions {
      display: flex;
      align-items: center;
      justify-content: center; }
      .form-layout .form-box .container .side-actions a {
        display: inline-block;
        margin: 0;
        padding: 5px;
        opacity: 0.7;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
        height: 24px;
        margin: 10px; }
        .form-layout .form-box .container .side-actions a i {
          vertical-align: top;
          transition: all 0.5s ease;
          display: inline-block;
          width: 24px;
          height: 24px;
          overflow: hidden; }
        .form-layout .form-box .container .side-actions a:hover, .form-layout .form-box .container .side-actions a:focus {
          opacity: 1;
          text-decoration: none; }
        .form-layout .form-box .container .side-actions a:active {
          opacity: 1; }
        .form-layout .form-box .container .side-actions a[disabled] {
          opacity: 0.3;
          background: none; }
  .form-layout .form-box .alt p {
    margin: 0.5em;
    padding: 0; }
  .form-layout .form-box .alt-actions {
    display: flex; }
    .form-layout .form-box .alt-actions a {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 5px 7px;
      height: 24px; }
      .form-layout .form-box .alt-actions a i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .alt-actions a:hover, .form-layout .form-box .alt-actions a:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .alt-actions a:active {
        opacity: 1; }
      .form-layout .form-box .alt-actions a[disabled] {
        opacity: 0.3;
        background: none; }
      .form-layout .form-box .alt-actions a i.material-icons {
        margin-right: 5px; }

.form-layout .form-inline-box {
  margin: 15px; }
  .form-layout .form-inline-box .title h3 {
    flex: 1;
    padding: 2px 0 0 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center; }

.form-layout .form-expanssion {
  margin: 15px 0;
  z-index: 1; }
  .form-layout .form-expanssion .form-box {
    margin: 0 15px;
    transition: 0.2s margin ease;
    position: relative;
    box-shadow: none; }
    .form-layout .form-expanssion .form-box::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .form-expanssion .form-box.expanded {
    margin: 30px 15px; }
  .form-layout .form-expanssion .form-box:first-child {
    margin-top: 0; }
  .form-layout .form-expanssion .form-box:last-child {
    margin-bottom: 0; }

.form-layout .row {
  display: flex;
  flex-direction: row;
  width: 100%; }

.form-layout .column {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .form-layout .column .column-spacer {
    height: 100%; }

.form-layout .form-input {
  flex: 1;
  position: relative;
  padding: 3px 0;
  min-width: 0; }
  .form-layout .form-input.inlined {
    margin: 0;
    flex-grow: 0;
    min-width: auto; }
  .form-layout .form-input > * {
    margin: 0 10px; }
  .form-layout .form-input > input, .form-layout .form-input > select {
    width: calc(100% - 20px); }
  .form-layout .form-input > kn-control-messages {
    margin: -18px 0 0 15px; }

.form-layout .flex-1 {
  flex: 1; }

.form-layout .flex-2 {
  flex: 2; }

.form-layout .flex-3 {
  flex: 3; }

.form-layout .flex-4 {
  flex: 4; }

.form-layout .flex-5 {
  flex: 5; }

.form-layout .flex-6 {
  flex: 6; }

.form-layout .flex-start {
  justify-content: flex-start; }

.form-layout .flex-end {
  justify-content: flex-end; }

.form-layout .row.flex-reverse {
  flex-direction: row-reverse; }

.form-layout .column.flex-reverse {
  flex-direction: column-reverse; }

.form-layout .popover {
  position: relative;
  height: 34px; }
  .form-layout .popover kn-menu-activator {
    cursor: pointer; }
  .form-layout .popover .side-action {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    height: 24px; }
    .form-layout .popover .side-action i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .form-layout .popover .side-action:hover, .form-layout .popover .side-action:focus {
      opacity: 1;
      text-decoration: none; }
    .form-layout .popover .side-action:active {
      opacity: 1; }
    .form-layout .popover .side-action[disabled] {
      opacity: 0.3;
      background: none; }

kn-attached-portal .kn-form-layout-menu-content {
  z-index: 200;
  position: absolute;
  left: calc(100% - 490px);
  top: 40px;
  width: 500px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    font-weight: normal;
    margin: 0;
    padding: 15px 15px 15px 20px; }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:focus {
      opacity: 1;
      text-decoration: none; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:active {
      opacity: 1; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close[disabled] {
      opacity: 0.3;
      background: none; }
  kn-attached-portal .kn-form-layout-menu-content [hidden] {
    display: none; }
  kn-attached-portal .kn-form-layout-menu-content::before {
    position: absolute;
    left: calc(100% - 37px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

.form-slots-table {
  width: 100%;
  table-layout: fixed;
  margin-top: 2em;
  border-collapse: collapse; }
  .form-slots-table th {
    padding: 5px;
    font-weight: 400;
    position: relative; }
    .form-slots-table th::before {
      content: '';
      position: absolute;
      display: block;
      width: calc(100% - 22px);
      height: 100%;
      border: 1px solid transparent;
      top: 0;
      left: 11px; }
    .form-slots-table th.disabled::before {
      background-color: transparent; }
  .form-slots-table td {
    padding: 10px 0; }
  .form-slots-table caption {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1; }

kn-sticky.sticked > .grid-panel {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.grid-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px; }
  .grid-panel .selector {
    width: 200px; }
  .grid-panel .actions, .grid-panel kn-grid-actions {
    display: flex;
    flex-grow: 1;
    font-size: 0; }
  .grid-panel .widgets {
    display: flex; }
    .grid-panel .widgets > *:not(:last-child) {
      margin-right: 10px; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    padding: 5px 7px;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    display: inline-block;
    line-height: 24px; }
    .grid-panel .selector a i, .grid-panel .actions a i, .grid-panel kn-grid-actions a i {
      vertical-align: top;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      opacity: 1; }
      .grid-panel .selector a:hover i, .grid-panel .actions a:hover i, .grid-panel kn-grid-actions a:hover i {
        opacity: 1; }
    .grid-panel .selector a:hover, .grid-panel .selector a:focus, .grid-panel .selector a:active, .grid-panel .actions a:hover, .grid-panel .actions a:focus, .grid-panel .actions a:active, .grid-panel kn-grid-actions a:hover, .grid-panel kn-grid-actions a:focus, .grid-panel kn-grid-actions a:active {
      text-decoration: none; }

kn-grid-preset kn-menu {
  display: block;
  position: relative;
  width: 300px; }
  kn-grid-preset kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-preset kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-preset kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-preset kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-preset kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-preset kn-menu kn-menu-activator {
    display: block;
    opacity: 1; }

kn-grid-preset kn-menu-activator > div {
  padding: 0;
  margin: 0;
  line-height: 24px;
  display: flex;
  align-items: center; }
  kn-grid-preset kn-menu-activator > div[hidden] {
    display: none; }
  kn-grid-preset kn-menu-activator > div i {
    padding: 0; }
  kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
      opacity: 1; }
  kn-grid-preset kn-menu-activator > div span {
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    kn-grid-preset kn-menu-activator > div span.template-name {
      font-style: normal; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.ownerUid {
        font-size: 80%;
        font-style: italic; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.material-icons {
        font-size: 125%;
        vertical-align: middle; }
  kn-grid-preset kn-menu-activator > div input {
    height: 34px;
    padding: 0 5px;
    width: calc(100% - 10px);
    min-width: 0;
    border: none;
    background-color: transparent;
    font-family: Source Sans Pro;
    font-size: 16px;
    outline: none; }
  kn-grid-preset kn-menu-activator > div a {
    opacity: 0.7; }

kn-grid-preset kn-menu-content kn-select {
  width: 100%; }

kn-grid-preset kn-menu-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-grid-preset kn-menu-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-grid-preset kn-menu-content li:not(.user-select) span, kn-grid-preset kn-menu-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-grid-preset kn-menu-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  width: 100%; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-grid-query-filter kn-menu {
  display: block;
  position: relative; }
  kn-grid-query-filter kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-query-filter kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-query-filter kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-query-filter kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 5px 7px; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50px;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
      position: absolute;
      left: calc(50% - 10px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-attached-portal .kn-grid-menu-content {
    position: absolute;
    z-index: 20;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-attached-portal .kn-grid-menu-content::before {
      position: absolute;
      left: calc(100% - 100px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 0; }
    kn-grid-query-filter kn-menu kn-menu-activator > * {
      height: 24px;
      padding: 5px;
      transition: color 0.5s ease; }
      kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
        opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator > span {
      display: flex; }
    kn-grid-query-filter kn-menu kn-menu-activator > a {
      opacity: 0.7; }

kn-grid-reset {
  display: block;
  position: relative;
  padding: 0; }
  kn-grid-reset.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-reset kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-reset kn-menu-activator[hidden] {
      display: none; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-reset kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-reset kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-reset kn-menu-activator {
    padding: 0 7px; }
    kn-grid-reset kn-menu-activator i {
      padding: 5px 0; }
      kn-grid-reset kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-grid-reset > *:not(.disabled) {
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus {
      opacity: 1; }
  kn-grid-reset > span {
    display: flex; }
  kn-grid-reset > a {
    opacity: 0.7;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
    kn-grid-reset > a.disabled {
      cursor: default;
      pointer-events: none; }

kn-grid-search {
  position: relative;
  height: 50px;
  margin: -8px -8px -8px 0; }
  kn-grid-search input[type='search'] {
    border: none;
    padding: 0 10px 0 40px;
    height: 100%;
    width: 0;
    vertical-align: top;
    transition: 0.3s all ease; }
    kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
      width: 250px;
      outline: none; }
  kn-grid-search::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center; }

header.liner {
  height: 80px;
  display: flex;
  justify-content: space-between;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  header.liner > div {
    display: flex;
    align-items: center; }
  header.liner .logo {
    outline: none; }
    header.liner .logo img {
      margin: 10px; }
  header.liner button.main-action {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    margin: 0 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
    header.liner button.main-action[disabled] {
      box-shadow: none; }
    header.liner button.main-action::-moz-focus-inner {
      border: none; }
    header.liner button.main-action::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    header.liner button.main-action:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      header.liner button.main-action:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
  header.liner kn-menu {
    z-index: 2;
    position: relative; }
    header.liner kn-menu.expanded {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
    header.liner kn-menu kn-menu-activator {
      display: flex;
      padding: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
      outline: none; }
    header.liner kn-menu kn-menu-content {
      position: absolute;
      min-width: 100%;
      left: 0;
      margin-top: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      z-index: 100; }
      header.liner kn-menu kn-menu-content[hidden] {
        opacity: 0;
        margin-top: -10px;
        transition: all 0.3s ease; }
      header.liner kn-menu kn-menu-content ul {
        padding: 0;
        margin: 0;
        list-style-type: none; }
        header.liner kn-menu kn-menu-content ul li {
          padding: 0;
          margin: 0; }
      header.liner kn-menu kn-menu-content a {
        padding: 10px;
        display: block;
        white-space: nowrap;
        transition: all 0.3s ease; }
        header.liner kn-menu kn-menu-content a:hover {
          text-decoration: none; }

kn-attached-portal .header-liner.kn-menu-content {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 100; }
  kn-attached-portal .header-liner.kn-menu-content[hidden] {
    opacity: 0;
    margin-top: -10px;
    transition: all 0.3s ease; }
  kn-attached-portal .header-liner.kn-menu-content ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    kn-attached-portal .header-liner.kn-menu-content ul li {
      padding: 0;
      margin: 0; }
  kn-attached-portal .header-liner.kn-menu-content a {
    padding: 10px;
    display: block;
    white-space: nowrap;
    transition: all 0.3s ease; }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      text-decoration: none; }

header.liner .database-menu::before, header.liner .database-menu::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 1px;
  height: 40px;
  transition: top 0.5s ease; }

header.liner .database-menu::before {
  left: 0; }

header.liner .database-menu::after {
  right: 0; }

header.liner .database-menu.expanded::before, header.liner .database-menu.expanded::after, header.liner .database-menu:hover::before, header.liner .database-menu:hover::after {
  top: -50px; }

header.liner .database-menu.database-menu-hidden {
  display: none; }

header.liner .database-menu kn-database-selector {
  border: none; }
  header.liner .database-menu kn-database-selector .filter {
    font-size: 0; }
    header.liner .database-menu kn-database-selector .filter .clear {
      padding: 0 20px; }
    header.liner .database-menu kn-database-selector .filter:hover .clear {
      background-image: url("../kn-theme-strio/img/clear.svg"); }
  header.liner .database-menu kn-database-selector ul {
    max-height: 70%; }
    header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
      left: 0; }
    header.liner .database-menu kn-database-selector ul li a:hover {
      text-decoration: none; }

header.liner .database-menu kn-menu-activator {
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding-right: 40px; }
  header.liner .database-menu kn-menu-activator strong {
    display: block;
    font-weight: normal; }
  header.liner .database-menu kn-menu-activator .description {
    display: block; }
  header.liner .database-menu kn-menu-activator::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 32px;
    width: 16px;
    height: 16px;
    mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    transform: rotate(-90deg);
    transition: transform 0.5s ease; }
  header.liner .database-menu kn-menu-activator:hover::after {
    transform: rotate(0deg); }

header.liner .database-menu.expanded kn-menu-activator::after {
  transform: rotate(-180deg); }

header.liner > div:first-child, header.liner kn-navbar {
  flex: 1; }

header.liner nav > ul, header.liner kn-navbar > ul {
  height: 80px;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  display: flex; }
  header.liner nav > ul > li, header.liner kn-navbar > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
      display: block;
      margin: 10px 3px;
      height: 58px;
      padding: 0 18px;
      line-height: 58px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      header.liner nav > ul > li > a, header.liner nav > ul > li > a:hover, header.liner nav > ul > li > a:focus, header.liner nav > ul > li > kn-menu-activator, header.liner nav > ul > li > kn-menu-activator:hover, header.liner nav > ul > li > kn-menu-activator:focus, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > a:focus, header.liner kn-navbar > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > kn-menu-activator:focus {
        text-decoration: none; }

header.liner kn-navbar kn-menu {
  margin: 10px 3px;
  height: 60px;
  padding: 0 !important; }

header.liner kn-navbar kn-menu-activator {
  height: 60px;
  padding: 0 8px;
  align-items: center; }

kn-attached-portal .kn-navbar-expansion ul {
  margin: 0 10px;
  padding: 0;
  list-style-type: none; }
  kn-attached-portal .kn-navbar-expansion ul > li {
    margin: 0;
    padding: 0; }
    kn-attached-portal .kn-navbar-expansion ul > li > a {
      display: block;
      padding: 0 18px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      kn-attached-portal .kn-navbar-expansion ul > li > a, kn-attached-portal .kn-navbar-expansion ul > li > a:hover, kn-attached-portal .kn-navbar-expansion ul > li > a:focus {
        text-decoration: none; }

header.liner .user-menu kn-menu-activator {
  min-width: 120px;
  flex-direction: row-reverse;
  align-items: center; }
  header.liner .user-menu kn-menu-activator img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    background-image: url("../img/noavatar.svg"); }
  header.liner .user-menu kn-menu-activator kn-menu-content {
    right: 0; }

header.liner .user-menu kn-menu-content {
  right: 0;
  left: initial; }
  header.liner .user-menu kn-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-attached-portal .user-menu-content {
  right: 0;
  left: initial; }
  kn-attached-portal .user-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-input label, kn-input [kn-hint] {
  font-size: 14px; }

kn-input [kn-prefix], kn-input [kn-suffix] {
  display: flex; }

kn-input .kn-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-input .kn-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input .kn-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input.disabled .kn-input-container, kn-input.readonly .kn-input-container {
  border-bottom-style: dotted; }

kn-input.focused .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.focused .kn-input-underline::before, kn-input.focused .kn-input-underline::after {
  z-index: 111; }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.ng-touched.ng-pending .kn-input-underline::before, kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::after {
  top: -4px;
  height: 5px; }

kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-input input {
  min-height: 24px; }
  kn-input input:-webkit-autofill {
    -webkit-animation-name: kill-autofill;
    -webkit-animation-fill-mode: both; }

@-webkit-keyframes kill-autofill {
  to {
    background: transparent; } }

kn-date-input label, kn-date-input [kn-hint] {
  font-size: 14px; }

kn-date-input [kn-prefix], kn-date-input [kn-suffix] {
  display: flex; }

kn-date-input .kn-date-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-date-input .kn-date-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input .kn-date-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input.disabled .kn-date-input-container, kn-date-input.readonly .kn-date-input-container {
  border-bottom-style: dotted; }

kn-date-input.focused .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.focused .kn-date-input-underline::before, kn-date-input.focused .kn-date-input-underline::after {
  z-index: 111; }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before, kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::after {
  top: -4px;
  height: 5px; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-date-input input {
  min-height: 24px;
  text-align: right; }

kn-date-input .input-button i.material-icons {
  opacity: 0.5;
  transition: 0.3s opacity ease; }
  kn-date-input .input-button i.material-icons:hover, kn-date-input .input-button i.material-icons:focus {
    opacity: 1; }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  opacity: 0.5; }

kn-date-input .input-button > a {
  display: flex;
  text-decoration: none; }

@-moz-document url-prefix() {
  kn-date-input input {
    clip-path: inset(0 25px 0 0);
    margin-right: -20px !important;
    min-width: 70px !important; } }

kn-kcuni-settings {
  display: block;
  margin: 20px; }
  kn-kcuni-settings p strong {
    font-weight: 400; }
  kn-kcuni-settings .settings {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
    margin: 0 -10px 10px; }
    kn-kcuni-settings .settings kn-input {
      flex: 1; }
    kn-kcuni-settings .settings button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      margin-left: 10px; }
      kn-kcuni-settings .settings button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      kn-kcuni-settings .settings button:hover, kn-kcuni-settings .settings button:focus {
        opacity: 1;
        text-decoration: none; }
      kn-kcuni-settings .settings button:active {
        opacity: 1; }
      kn-kcuni-settings .settings button[disabled] {
        opacity: 0.3;
        background: none; }
  kn-kcuni-settings .message {
    padding: 10px;
    vertical-align: center; }
    kn-kcuni-settings .message i {
      vertical-align: bottom; }
  kn-kcuni-settings .doc-link {
    display: block;
    padding-top: 10px;
    margin-bottom: 20px;
    float: left; }
    kn-kcuni-settings .doc-link.app-link {
      float: right; }

.app-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }
  .app-loading-screen p {
    padding: 5px 10px;
    margin: 0;
    border-radius: 3px; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 600px;
  font-family: 'Source Sans Pro';
  font-size: 16px; }

input {
  font-family: 'Source Sans Pro';
  font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo 2'; }

h1 {
  font-weight: 300;
  font-size: 48px;
  padding-bottom: 10px; }

a {
  text-decoration: none; }

a:hover, a:focus {
  text-decoration: underline; }

kn-app-main {
  display: block; }

[knBackgroundFocusable] {
  outline: none; }

.country-display,
kn-select.country .option,
kn-select.country .kn-option-content {
  height: 24px;
  line-height: 24px; }
  .country-display img,
  kn-select.country .option img,
  kn-select.country .kn-option-content img {
    width: 24px;
    height: 16px;
    margin: 4px 4px 4px 0;
    vertical-align: bottom;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.flat-button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }
  .flat-button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  .flat-button:hover, .flat-button:focus {
    opacity: 1;
    text-decoration: none; }
  .flat-button:active {
    opacity: 1; }
  .flat-button[disabled] {
    opacity: 0.3;
    background: none; }

.flat-table {
  width: 100%;
  border-collapse: collapse; }
  .flat-table tbody tr {
    height: 55px; }
  .flat-table tbody td {
    transition: 0.3s background-color ease;
    padding: 10px; }
  .flat-table thead td {
    padding: 10px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7; }
  .flat-table .actions {
    text-align: right; }
    .flat-table .actions button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer; }
      .flat-table .actions button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .flat-table .actions button:hover, .flat-table .actions button:focus {
        opacity: 1;
        text-decoration: none; }
      .flat-table .actions button:active {
        opacity: 1; }
      .flat-table .actions button[disabled] {
        opacity: 0.3;
        background: none; }

kn-modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }

kn-modal.confirmation-dialog .overlay {
  display: flex;
  align-items: center;
  justify-content: center; }
  kn-modal.confirmation-dialog .overlay.kn-enter, kn-modal.confirmation-dialog .overlay.kn-leave {
    transition: 0.3s opacity ease; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container, kn-modal.confirmation-dialog .overlay.kn-leave .container {
      transition: 0.3s transform ease, 0.3s margin-top ease-out; }
  kn-modal.confirmation-dialog .overlay.kn-enter {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container {
      transform: perspective(1000px) rotate3d(1, 0, 0, 60deg); }
  kn-modal.confirmation-dialog .overlay.kn-leave, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active {
    opacity: 1; }
    kn-modal.confirmation-dialog .overlay.kn-leave .container, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active .container {
      transform: scale(1); }
  kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active .container {
      transform: scale(0.8);
      margin-top: 100px; }
  kn-modal.confirmation-dialog .overlay .container {
    overflow-y: auto;
    min-width: 300px;
    max-width: 750px;
    min-height: 200px;
    display: flex;
    flex-direction: column; }
  kn-modal.confirmation-dialog .overlay .content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; }
    kn-modal.confirmation-dialog .overlay .content span {
      white-space: pre-line;
      text-align: center;
      margin-top: 10px; }
  kn-modal.confirmation-dialog .overlay .buttons {
    display: flex; }
    kn-modal.confirmation-dialog .overlay .buttons button {
      position: relative;
      flex: 1;
      padding: 15px;
      min-width: 150px;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.5s ease, background-color 0.5s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        content: '';
        width: 60%;
        height: 3px;
        position: absolute;
        display: block;
        top: 0;
        left: 20%;
        opacity: 0.3; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover::before {
        opacity: 1; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        transition: color 0.2s ease, background-color 0.2s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button:active {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
        padding: 16px 15px 14px 15px; }

kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-options-container .kn-options-container-viewport {
    max-height: 310px; }
  kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-options-container .kn-options-container-filter .clear::before, kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-select.focused kn-options-container .kn-options-container-viewport, kn-input.focused kn-options-container .kn-options-container-viewport {
  z-index: 1000; }

kn-optgroup > strong {
  text-transform: uppercase; }

kn-option:not(.disabled):hover {
  transition: none; }

kn-option .kn-option-selector {
  transition: 0.3s color ease; }

kn-attached-portal .kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-attached-portal .kn-options-container .kn-options-container-viewport {
    max-height: 310px;
    overflow-y: scroll; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before, kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-attached-portal .kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-ownership-display > span {
  padding: 4px;
  margin: 0 4px;
  border-radius: 2px; }

kn-print-button kn-menu {
  display: block;
  position: relative; }
  kn-print-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-print-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-print-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-print-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-print-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-print-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-print-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-print-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-print-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-print-button kn-menu kn-menu-content {
    min-width: 200px; }
  kn-print-button kn-menu kn-spinner {
    left: 14px; }

kn-attached-portal .kn-menu-content.kn-print-button-content {
  min-width: 200px; }

kn-query-filter .query-filter > div[knFilterGroup] {
  display: block;
  min-width: 1000px;
  padding: 20px; }

kn-query-filter .filter-group {
  margin: auto; }
  kn-query-filter .filter-group .new-filter-actions {
    align-items: center;
    display: flex; }
    kn-query-filter .filter-group .new-filter-actions button {
      margin: 0 0 0 10px;
      padding: 5px 10px;
      border-radius: 3px;
      border: none;
      height: 30px;
      text-transform: uppercase; }
    kn-query-filter .filter-group .new-filter-actions .coalescing-operator {
      display: flex;
      align-items: center;
      margin-right: 10px; }
      kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
        content: '';
        display: block;
        flex: 1;
        height: 1px; }
    kn-query-filter .filter-group .new-filter-actions kn-select {
      width: 200px; }

kn-query-filter ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-query-filter li {
  padding: 10px 0 10px 10px; }

kn-query-filter li.boolean-operator {
  padding: 0;
  position: relative;
  height: 1px; }
  kn-query-filter li.boolean-operator span {
    position: absolute;
    display: block;
    padding: 0 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    top: -10px;
    left: 20px;
    text-transform: uppercase; }

kn-query-filter li[knFilterItem] {
  padding: 10px 0 10px 10px;
  display: flex;
  align-items: center;
  height: 40px; }
  kn-query-filter li[knFilterItem] > span {
    margin: 5px; }
  kn-query-filter li[knFilterItem]:first-child {
    padding-top: 0; }

kn-query-filter .filter-group .filter-name, kn-query-filter .filter-group .coalescing-operator {
  width: 225px; }

kn-query-filter .filter-group .coalescing-operator {
  width: 190px; }

kn-query-filter .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 205px; }

kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 170px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 185px; }

kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 150px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 165px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 130px; }

kn-query-filter .filter-name input {
  font-weight: bold; }

kn-query-filter .filter-operator {
  width: 150px; }
  kn-query-filter .filter-operator kn-input input {
    text-align: center; }
  kn-query-filter .filter-operator > * {
    width: 100%; }

kn-query-filter .filter-value {
  flex: 1; }
  kn-query-filter .filter-value .presenter {
    flex: 1;
    display: flex;
    align-items: center; }
    kn-query-filter .filter-value .presenter kn-input, kn-query-filter .filter-value .presenter kn-select {
      flex: 1; }
    kn-query-filter .filter-value .presenter kn-date-input span.required {
      display: none; }
    kn-query-filter .filter-value .presenter > span {
      margin: 0 10px; }
      kn-query-filter .filter-value .presenter > span:first-child {
        margin-left: 0; }

kn-query-filter .filter-actions {
  width: 70px;
  text-align: right; }

kn-query-filter .filter-actions button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  height: 34px; }
  kn-query-filter .filter-actions button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  kn-query-filter .filter-actions button:hover, kn-query-filter .filter-actions button:focus {
    opacity: 1;
    text-decoration: none; }
  kn-query-filter .filter-actions button:active {
    opacity: 1; }
  kn-query-filter .filter-actions button[disabled] {
    opacity: 0.3;
    background: none; }

kn-query-filter .footer {
  padding: 20px;
  text-align: right;
  display: flex; }
  kn-query-filter .footer button {
    padding: 5px 10px;
    margin-left: 20px;
    border-radius: 3px;
    border: none;
    height: 30px;
    text-transform: uppercase; }
  kn-query-filter .footer .left {
    text-align: left;
    flex: 1; }
    kn-query-filter .footer .left button {
      margin-left: 0;
      margin-right: 20px; }

kn-query-filter .filter-placeholder {
  width: 400px;
  margin: 30px auto 50px auto;
  text-align: center; }
  kn-query-filter .filter-placeholder span.placeholder {
    display: block; }
  kn-query-filter .filter-placeholder > i.material-icons {
    font-size: 150px; }
  kn-query-filter .filter-placeholder p {
    margin-top: -10px;
    margin-bottom: 50px;
    font-size: 24px;
    display: none; }
  kn-query-filter .filter-placeholder kn-select .kn-select-container {
    padding: 7px;
    transition: 0.3s all ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:hover {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
      transition: none;
      box-shadow: none; }

kn-radio input[type='radio'] + .kn-radio-box::before {
  border-radius: 50%; }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border-radius: 50%;
  transition: 0.3s border-color ease; }

kn-radio .kn-radio-mark {
  transition: 0.2s border linear; }

kn-radio .kn-radio-box, kn-radio label {
  transition: 0.3s color ease; }

kn-select label, kn-select [kn-hint] {
  font-size: 14px; }

kn-select [kn-prefix], kn-select [kn-suffix] {
  display: flex; }

kn-select .kn-select-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-select .kn-select-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select .kn-select-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select.disabled .kn-select-container, kn-select.readonly .kn-select-container {
  border-bottom-style: dotted; }

kn-select.focused .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.focused .kn-select-underline::before, kn-select.focused .kn-select-underline::after {
  z-index: 111; }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.ng-touched.ng-pending .kn-select-underline::before, kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::after {
  top: -4px;
  height: 5px; }

kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-select .kn-select-header {
  line-height: 24px; }
  kn-select .kn-select-header > * {
    min-height: 24px; }
  kn-select .kn-select-header .separator {
    padding-right: 0.3em; }
  kn-select .kn-select-header .option {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

kn-select.disabled .kn-select-header {
  pointer-events: none; }

kn-spinner {
  position: absolute;
  margin: 0 auto;
  width: 36px; }
  kn-spinner:before {
    content: '';
    display: block;
    padding-top: 100%; }
  kn-spinner .circular {
    animation: strio-spinner-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  kn-spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: strio-spinner-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: square;
    stroke-width: 8px; }

@keyframes strio-spinner-rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes strio-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

kn-tabs.boxlist div.tabs-viewport {
  margin-top: 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }

kn-tabs.boxlist div.tabs-labels ul {
  width: 100%; }

kn-tabs.boxlist div.tabs-labels li a {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  width: 170px;
  height: 150px !important;
  transition: 0.3s color ease; }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }

kn-tabs.boxlist div.tabs-labels li.active a {
  border-radius: 5px; }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    position: absolute;
    left: calc(50% - 15px);
    bottom: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; }

kn-tabs.notebook div.tabs-labels li a {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  transition: 0.3s color ease; }
  kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }
  kn-tabs.notebook div.tabs-labels li a::before {
    content: '';
    display: block;
    position: absolute;
    width: 80%;
    height: 4px;
    left: 10%;
    top: -10px;
    opacity: 0;
    z-index: 10;
    transform: scale(0.8);
    transition: 0.3s all ease; }
  kn-tabs.notebook div.tabs-labels li a:hover::before, kn-tabs.notebook div.tabs-labels li a:focus::before {
    opacity: 1;
    top: 0;
    transform: scale(1); }

kn-tabs.notebook div.tabs-labels li.active a::before {
  opacity: 1;
  top: 0;
  transform: scale(1);
  width: 100%;
  left: 0; }

kn-textarea label, kn-textarea [kn-hint] {
  font-size: 14px; }

kn-textarea [kn-prefix], kn-textarea [kn-suffix] {
  display: flex; }

kn-textarea .kn-textarea-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-textarea .kn-textarea-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea .kn-textarea-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea.disabled .kn-textarea-container, kn-textarea.readonly .kn-textarea-container {
  border-bottom-style: dotted; }

kn-textarea.focused .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.focused .kn-textarea-underline::before, kn-textarea.focused .kn-textarea-underline::after {
  z-index: 111; }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before, kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::after {
  top: -4px;
  height: 5px; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-textarea {
  height: 100%;
  display: flex !important;
  flex-direction: column; }
  kn-textarea .kn-textarea-container {
    flex: 1; }
  kn-textarea textarea {
    height: calc(100% - 20px);
    resize: none; }

kn-timeline {
  position: relative; }
  kn-timeline::before, kn-timeline::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none; }
  kn-timeline::before {
    left: 0; }
  kn-timeline::after {
    right: 0; }
  kn-timeline .time-viewport {
    overflow: hidden; }
  kn-timeline .time-container {
    display: flex;
    margin: 100px 0 50px 0; }
    kn-timeline .time-container > span {
      flex-shrink: 0; }
  kn-timeline .time-segment {
    font-size: 0;
    height: 3px;
    width: calc(50% - 2px); }
  kn-timeline .time-mark {
    position: relative;
    width: 3px;
    height: 3px; }
    kn-timeline .time-mark a {
      position: absolute;
      width: 13px;
      height: 13px;
      top: -5px;
      left: -5px;
      border-radius: 50%;
      z-index: 1;
      outline: none; }
      kn-timeline .time-mark a.selected::after {
        content: '';
        position: absolute;
        display: block;
        width: 23px;
        height: 23px;
        left: -7px;
        top: -7px;
        border-radius: 50%; }
      kn-timeline .time-mark a::before {
        content: '';
        position: absolute;
        display: block;
        width: 53px;
        height: 53px;
        top: -20px;
        left: -20px;
        border-radius: 50%;
        z-index: -1; }
      kn-timeline .time-mark a .date {
        position: absolute;
        display: block;
        white-space: nowrap;
        text-align: center;
        left: 7px;
        top: -68px;
        font-weight: bold;
        transform: translateX(-50%); }
      kn-timeline .time-mark a .year {
        display: block;
        font-weight: normal; }
    kn-timeline .time-mark.pin a {
      width: 9px;
      height: 9px;
      top: -7px;
      left: -7px; }
      kn-timeline .time-mark.pin a::before {
        top: -22px;
        left: -22px; }
      kn-timeline .time-mark.pin a.selected::after {
        left: -9px;
        top: -9px; }
      kn-timeline .time-mark.pin a .date {
        left: 5px;
        top: -70px; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
    kn-timeline .time-mark.today::before {
      content: '';
      position: absolute;
      display: block;
      width: 1px;
      height: 63px;
      left: 1px;
      top: -30px;
      opacity: 0.5; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
  kn-timeline .time-mark.today a .date {
    top: -60px; }
  kn-timeline kn-datepicker .viewport {
    top: -20px; }
  kn-timeline kn-datepicker.calendar-mark .viewport {
    top: 5px; }

kn-toast > div {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  left: 50px;
  bottom: 50px;
  z-index: 1000;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave {
    transition: 0.3s all ease; }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave.kn-leave-active {
    left: 35px;
    opacity: 0; }
  kn-toast > div.kn-leave, kn-toast > div.kn-enter.kn-enter-active {
    left: 50px;
    opacity: 1; }
  kn-toast > div .content {
    display: flex;
    flex-direction: column;
    padding: 15px 20px; }
    kn-toast > div .content span, kn-toast > div .content strong {
      display: block; }
  kn-toast > div a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-align: center; }
    kn-toast > div a, kn-toast > div a:hover, kn-toast > div a:focus, kn-toast > div a:active {
      text-decoration: none; }

kn-audit-display {
  color: rgba(0, 0, 0, 0.5); }
  kn-audit-display strong {
    background-color: rgba(0, 0, 0, 0.07); }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox input[type='checkbox']:focus + .kn-checkbox-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked):hover + .kn-checkbox-box::after, kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked) + .kn-checkbox-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-checkbox.disabled input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled input[type='checkbox']:not(:checked) + .kn-checkbox-box::after {
  background-color: transparent !important; }

kn-checkbox.disabled.indeterminate .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled label, kn-checkbox.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox.ng-touched.ng-invalid .kn-checkbox-box::after {
  border-color: #c04060; }

kn-checkbox.ng-touched.ng-invalid input[type='checkbox']:checked + .kn-checkbox-box::after, kn-checkbox.ng-touched.ng-invalid.indeterminate .kn-checkbox-box::after {
  background-color: #c04060; }

app-print-template-edit {
  background-color: #ffffff; }
  app-print-template-edit > kn-resizable-container .preview {
    border-left: 1px solid rgba(0, 0, 0, 0.15); }
  app-print-template-edit .preview div.tabs-viewport {
    background-color: #f9f7f6; }
  app-print-template-edit kn-codemirror {
    background-color: #ffffff; }
  app-print-template-edit kn-tabs a.sidepanel {
    color: #000000;
    color: rgba(0, 0, 0, 0.8); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):hover, app-print-template-edit kn-tabs a.sidepanel:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-tab.home i.banner {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-tab .no-print-context-placeholder {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-activator {
    color: #000000;
    color: #c04060; }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):hover, app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-menu.errors kn-menu-content {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.8); }

kn-roles-table .role-permissions table thead th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-roles-table .role-permissions table tbody.permissions-matrix td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); }

kn-roles-table .role-permissions table tbody.permissions-matrix tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

kn-roles-table .role-permissions .actions button {
  color: #000000; }
  kn-roles-table .role-permissions .actions button:not([disabled]):hover, kn-roles-table .role-permissions .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-roles-table .role-permissions .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-permission-actions-select kn-menu-content {
  background-color: #ffffff; }
  kn-permission-actions-select kn-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-user-edit table.user-roles tbody.user-roles-table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles tr.invalid td {
  background-color: rgba(192, 64, 96, 0.15); }

kn-user-edit table.user-roles thead tr:last-child td {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-user-edit table.user-roles tbody.user-roles-table tr td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles td.actions button {
  color: #000000; }
  kn-user-edit table.user-roles td.actions button:not([disabled]):hover, kn-user-edit table.user-roles td.actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-user-edit table.user-roles td.actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-control-messages > div {
  color: #c04060; }

app-database-manage kn-tabs .tab-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

app-database-manage kn-tabs a i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

app-database-manage kn-tabs li.active a i.material-icons, app-database-manage kn-tabs a:hover i.material-icons, app-database-manage kn-tabs a:focus i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

app-database-manage kn-tabs kn-tab .select-database {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15); }

app-database-manage kn-tabs kn-tab.kn-drag-over::after {
  background-color: rgba(255, 240, 216, 0.3);
  border: 1px dashed #ff9800; }

kn-datepicker .viewport {
  background-color: #ffffff; }
  kn-datepicker .viewport::before {
    border-bottom: 10px solid #f2f2f2; }
  kn-datepicker .viewport .header {
    background-color: #f2f2f2; }

kn-datepicker kn-date-header > *, kn-datepicker kn-time-header > * {
  color: #000000; }

kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a:hover {
  background-color: rgba(0, 0, 0, 0.1); }

kn-datepicker kn-date-header a:active, kn-datepicker kn-time-header a:active {
  background-color: rgba(0, 0, 0, 0.2); }

kn-datepicker kn-date-header a {
  color: rgba(0, 0, 0, 0.5); }

kn-datepicker kn-month-view th {
  color: rgba(0, 0, 0, 0.35); }

kn-datepicker kn-month-view td a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker kn-month-view td a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker kn-month-view td a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container .center {
  background-color: gray; }

kn-datepicker .picker-relative-container .gauge {
  background-color: rgba(0, 0, 0, 0.15); }

kn-datepicker .picker-relative-container li::before {
  background-color: #ffffff; }

kn-datepicker .picker-relative-container li.minor a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li.minor a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li.minor a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.minor::before {
  background-color: rgba(0, 0, 0, 0.8); }

kn-datepicker .picker-relative-container li:not(.minor) a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li:not(.minor) a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li:not(.minor) a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.major::before {
  background-color: #000000; }

kn-datepicker .period-selector a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .period-selector a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .period-selector a.selected {
    background-color: #805848;
    color: #ffffff; }

.kn-ripple-element {
  background-color: rgba(0, 0, 0, 0.05); }

kn-export-button kn-menu.expanded {
  background-color: #0b7244; }

kn-export-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-export-button kn-menu kn-menu-activator, kn-export-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

button.form-button, .form-input button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  button.form-button.danger, .form-input button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  button.form-button[disabled], .form-input button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  button.form-button::after, .form-input button::after {
    background-color: white; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    button.form-button:not([disabled]):hover.danger, button.form-button:not([disabled]):focus.danger, .form-input button:not([disabled]):hover.danger, .form-input button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    button.form-button:not([disabled]):active.danger, .form-input button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-container.heading::before, .form-container .form-loader-bar::before {
  background-color: rgba(128, 88, 72, 0.3); }

.form-container.heading::after, .form-container .form-loader-bar::after {
  background-color: #805848; }

.form-container.heading {
  background-color: #ffffff; }

.form-container .form-back {
  color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:hover, .form-container .form-back:focus {
    color: #ffffff; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      background-color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:active::after {
    background-color: rgba(0, 0, 0, 0.4); }

.form-actions-info {
  color: #c07000; }

.form-buttons button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  .form-buttons button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  .form-buttons button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  .form-buttons button::after {
    background-color: white; }
  .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    .form-buttons button:not([disabled]):hover.danger, .form-buttons button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  .form-buttons button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    .form-buttons button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-errors li {
  background-color: rgba(192, 64, 96, 0.2); }
  .form-errors li strong {
    background-color: #c04060; }

.form-layout .info-bar {
  color: rgba(255, 255, 255, 0.7);
  background-color: #10a060; }
  .form-layout .info-bar.error {
    background-color: #c04060; }
  .form-layout .info-bar strong {
    color: #ffffff; }

.form-layout .form-box {
  background-color: #ffffff; }
  .form-layout .form-box .title {
    color: #009688; }
    .form-layout .form-box .title .side-action {
      color: #000000; }
      .form-layout .form-box .title .side-action:not([disabled]):hover, .form-layout .form-box .title .side-action:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .title .side-action:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .container + .container {
    border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .form-layout .form-box .container .side-actions {
    border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .container .side-actions a {
      color: #000000; }
      .form-layout .form-box .container .side-actions a:not([disabled]):hover, .form-layout .form-box .container .side-actions a:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .container .side-actions a:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .alt {
    background-color: rgba(224, 192, 0, 0.1);
    border-top: 1px solid rgba(224, 192, 0, 0.3); }
  .form-layout .form-box .alt-actions a {
    color: #000000; }
    .form-layout .form-box .alt-actions a:not([disabled]):hover, .form-layout .form-box .alt-actions a:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .alt-actions a:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }

.form-layout .form-inline-box .title {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid rgba(0, 0, 0, 0.15) !important; }

.form-layout .form-inline-box .container {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(224, 192, 0, 0.1); }
  .form-layout .form-inline-box .container + .container {
    border-top: none; }

.form-layout .popover .side-action {
  color: #000000; }
  .form-layout .popover .side-action:not([disabled]):hover, .form-layout .popover .side-action:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-layout .popover .side-action:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-form-layout-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    color: #000000; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-form-layout-menu-content::before {
    border-bottom: 10px solid #ffffff; }

.form-slots-table th {
  color: rgba(0, 0, 0, 0.5); }
  .form-slots-table th::before {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-slots-table th.disabled::before {
    border: 1px solid rgba(0, 0, 0, 0.1); }

.form-slots-table caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

.grid-panel {
  background-color: #10a060; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    color: rgba(255, 255, 255, 0.7); }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-preset kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu kn-menu-activator, kn-grid-preset kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
  transition: color 0.5s ease; }
  kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-activator > div span {
  color: rgba(255, 255, 255, 0.5); }
  kn-grid-preset kn-menu-activator > div span.template-name {
    color: #ffd088; }

kn-grid-preset kn-menu-activator > div input {
  color: #ffffff; }
  kn-grid-preset kn-menu-activator > div input::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-activator > div a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content li:not(.user-select) span:hover, kn-grid-preset kn-menu-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-grid-preset kn-menu-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-grid-preset kn-menu-content kn-select kn-options-container, kn-grid-preset kn-menu-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span:hover, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-options-container, kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-grid-query-filter kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-query-filter kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-query-filter kn-menu kn-menu-activator, kn-grid-query-filter kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
    border-bottom: 10px solid #ffffff; }

kn-attached-portal .kn-grid-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-grid-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-grid-query-filter kn-menu kn-menu-activator {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-query-filter kn-menu kn-menu-activator em {
    color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-activator > * {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease; }
    kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator > span.template-name {
    color: #ffd088; }

kn-attached-portal .kn-menu-content.kn-grid-query-content {
  left: calc(50% - 900px);
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-menu-content.kn-grid-query-content::before {
    left: calc(50% + 375px); }

kn-grid-reset {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-reset.expanded {
    background-color: #0b7244; }
  kn-grid-reset:not(.expanded) kn-menu-activator:focus, kn-grid-reset kn-menu-activator:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset kn-menu-activator, kn-grid-reset kn-menu-activator i {
    color: rgba(255, 255, 255, 0.8); }
  kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i {
    color: #ffffff; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-button-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content) li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-attached-portal .kn-grid-button-content li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-attached-portal .kn-grid-button-content li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset > *:not(.disabled), kn-grid-reset a:not(.disabled) {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus, kn-grid-reset a:not(.disabled):hover, kn-grid-reset a:not(.disabled):focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-reset > *.disabled, kn-grid-reset a.disabled {
    color: rgba(255, 255, 255, 0.3); }

kn-grid-search input[type='search'] {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff; }
  kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
    background-color: rgba(0, 0, 0, 0.4); }
  kn-grid-search input[type='search']::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-search::after {
  background-color: #ffffff; }

header.liner .database-menu::before, header.liner .database-menu::after {
  background-color: rgba(255, 255, 255, 0.1); }

header.liner .database-menu kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  header.liner .database-menu kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  header.liner .database-menu kn-database-selector .filter input {
    color: #ffffff; }
    header.liner .database-menu kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

header.liner .database-menu kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

header.liner .database-menu kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  header.liner .database-menu kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

header.liner .database-menu kn-database-selector ul li strong {
  color: white; }

header.liner .database-menu kn-database-selector ul li span.uid {
  color: #b39b91; }

kn-attached-portal kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  kn-attached-portal kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  kn-attached-portal kn-database-selector .filter input {
    color: #ffffff; }
    kn-attached-portal kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

kn-attached-portal kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

kn-attached-portal kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  kn-attached-portal kn-database-selector ul li a.active::before, kn-attached-portal kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

kn-attached-portal kn-database-selector ul li strong {
  color: white; }

kn-attached-portal kn-database-selector ul li span.uid {
  color: #b39b91; }

header.liner .database-menu kn-menu-activator::after {
  background-color: rgba(255, 255, 255, 0.2); }

header.liner .database-menu kn-menu-activator strong {
  color: #ffffff; }

header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  header.liner nav > ul > li > a.router-link-active, header.liner nav > ul > li > kn-menu-activator.router-link-active, header.liner kn-navbar > ul > li > a.router-link-active, header.liner kn-navbar > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  header.liner nav > ul > li > a:hover, header.liner nav > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  header.liner nav > ul > li > a:not(.router-link-active):focus, header.liner nav > ul > li > kn-menu-activator:not(.router-link-active):focus, header.liner kn-navbar > ul > li > a:not(.router-link-active):focus, header.liner kn-navbar > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

kn-attached-portal .kn-navbar-expansion > ul > li > a, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-navbar-expansion > ul > li > a.router-link-active, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:hover, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:not(.router-link-active):focus, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

header.liner {
  background-color: #805848;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4) 80px); }
  header.liner .logo:hover, header.liner .logo:focus {
    background-color: rgba(255, 255, 255, 0.05); }
  header.liner button.main-action {
    color: white;
    background-color: rgba(128, 88, 72, 0.9);
    background-color: #10a060; }
    header.liner button.main-action.danger {
      background-color: rgba(192, 64, 96, 0.9); }
    header.liner button.main-action[disabled] {
      background-color: rgba(160, 160, 160, 0.5); }
    header.liner button.main-action::after {
      background-color: white; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      background-color: rgba(128, 88, 72, 0.7); }
      header.liner button.main-action:not([disabled]):hover.danger, header.liner button.main-action:not([disabled]):focus.danger {
        background-color: rgba(192, 64, 96, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      background-color: rgba(128, 88, 72, 0.8); }
      header.liner button.main-action:not([disabled]):active.danger {
        background-color: rgba(192, 64, 96, 0.8); }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus, header.liner button.main-action:not([disabled]):active {
      background-color: #58bd90; }
    header.liner button.main-action:not([disabled]):active {
      background-color: #40b380; }
  header.liner kn-menu {
    color: rgba(255, 255, 255, 0.5);
    z-index: 10; }
    header.liner kn-menu.expanded {
      background-color: #805848; }
      header.liner kn-menu.expanded kn-menu-content {
        border-top: 1px solid rgba(255, 255, 255, 0.1); }
    header.liner kn-menu kn-menu-activator:hover, header.liner kn-menu kn-menu-activator:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }
    header.liner kn-menu kn-menu-content {
      background-color: #805848; }
      header.liner kn-menu kn-menu-content a {
        color: rgba(255, 255, 255, 0.5); }
        header.liner kn-menu kn-menu-content a:hover {
          background-color: rgba(255, 255, 255, 0.1);
          color: #ffffff; }

kn-attached-portal .header-liner.kn-menu-content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #805848; }
  kn-attached-portal .header-liner.kn-menu-content a {
    color: rgba(255, 255, 255, 0.5); }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }

header.liner .user-menu kn-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .user-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-input label, kn-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-input label .required {
  color: #c04060; }

kn-input .kn-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-input:not(.disabled):not(.focused) .kn-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-input.focused .kn-input-container {
  border-color: transparent; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  background-color: #805848; }

kn-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  background-color: #c04060; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::before {
  background-color: #ecc6cf; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::after {
  background-color: #c04060; }

kn-input.ng-touched.ng-pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::before {
  background-color: #d9cdc8; }

kn-input input {
  color: #000000; }

kn-input.disabled input {
  color: rgba(0, 0, 0, 0.4); }

kn-input input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input label, kn-date-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-date-input label .required {
  color: #c04060; }

kn-date-input .kn-date-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-date-input:not(.disabled):not(.focused) .kn-date-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-date-input.focused .kn-date-input-container {
  border-color: transparent; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  background-color: #805848; }

kn-date-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::before {
  background-color: #ecc6cf; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::after {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::before {
  background-color: #d9cdc8; }

kn-date-input date-input {
  color: #000000; }

kn-date-input.disabled date-input {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input date-input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input .input-button i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

kn-kcuni-settings p {
  color: rgba(0, 0, 0, 0.5); }
  kn-kcuni-settings p strong {
    color: rgba(0, 0, 0, 0.8); }

kn-kcuni-settings .settings button {
  color: #000000; }
  kn-kcuni-settings .settings button:not([disabled]):hover, kn-kcuni-settings .settings button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-kcuni-settings .settings button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-kcuni-settings .settings:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-kcuni-settings .message {
  color: #c04060;
  background-color: rgba(192, 64, 96, 0.2); }

.app-loading-screen p {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

html, body {
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.8); }

a {
  color: #8040a0; }

kn-input.ownership [kn-prefix] {
  color: #10a060; }

.flat-button {
  color: #000000; }
  .flat-button:not([disabled]):hover, .flat-button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

.flat-table thead td {
  border-bottom: 3px solid #cccccc; }

.flat-table tbody td {
  border-bottom: 1px solid #ebebeb; }

.flat-table tbody tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

.flat-table .actions button {
  color: #000000; }
  .flat-table .actions button:not([disabled]):hover, .flat-table .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-table .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-modal.confirmation-dialog .overlay {
  background-color: rgba(48, 48, 48, 0.9); }
  kn-modal.confirmation-dialog .overlay .container {
    background-color: rgba(40, 40, 40, 0.7); }
  kn-modal.confirmation-dialog .overlay .content {
    color: white; }
  kn-modal.confirmation-dialog .overlay .buttons {
    background-color: rgba(0, 0, 0, 0.2); }
    kn-modal.confirmation-dialog .overlay .buttons button {
      color: rgba(255, 255, 255, 0.5); }
      kn-modal.confirmation-dialog .overlay .buttons button.primary {
        color: rgba(64, 128, 255, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.primary::before {
          background-color: #4080ff; }
        kn-modal.confirmation-dialog .overlay .buttons button.primary:hover, kn-modal.confirmation-dialog .overlay .buttons button.primary:focus {
          background-color: rgba(64, 128, 255, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button.danger {
        color: rgba(255, 64, 72, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.danger::before {
          background-color: #ff4048; }
        kn-modal.confirmation-dialog .overlay .buttons button.danger:hover, kn-modal.confirmation-dialog .overlay .buttons button.danger:focus {
          background-color: rgba(255, 64, 72, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        background-color: white; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        background-color: rgba(255, 255, 255, 0.7);
        color: rgba(0, 0, 0, 0.8); }

kn-options-container {
  background-color: #ffffff; }
  kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-optgroup > strong {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

kn-option.marked {
  background-color: rgba(0, 0, 0, 0.07); }

kn-option:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-option.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-option .kn-option-selector {
  color: rgba(0, 0, 0, 0.3); }

kn-option.selected .kn-option-selector {
  color: #805848; }

kn-attached-portal .kn-options-container {
  background-color: #ffffff; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-attached-portal .kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-attached-portal .kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-attached-portal .kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-ownership-display {
  color: rgba(0, 0, 0, 0.3); }
  kn-ownership-display > span {
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.1); }

kn-print-button kn-menu.expanded {
  background-color: #0b7244; }

kn-print-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-print-button kn-menu kn-menu-activator, kn-print-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-query-filter .query-filter > div[knFilterGroup] {
  color: rgba(0, 0, 0, 0.8); }

kn-query-filter .filter-group .new-filter-actions button {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .filter-group {
  border-left: 10px solid rgba(0, 0, 0, 0.1); }

kn-query-filter li.boolean-operator {
  background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter li.boolean-operator span {
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff; }

kn-query-filter .filter-name [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-operator kn-input [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-value .presenter > span {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-actions button {
  color: #000000; }
  kn-query-filter .filter-actions button:not([disabled]):hover, kn-query-filter .filter-actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter .filter-actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-query-filter .footer {
  background-color: rgba(0, 0, 0, 0.05); }
  kn-query-filter .footer button {
    background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-placeholder > i.material-icons {
  color: rgba(0, 0, 0, 0.35); }

kn-query-filter .filter-placeholder kn-select .kn-select-container {
  border: 1px solid rgba(0, 0, 0, 0.3); }
  kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
    background-color: rgba(0, 0, 0, 0.05); }

kn-query-filter .filter-placeholder kn-select .placeholder {
  color: rgba(0, 0, 0, 0.8); }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-radio input[type='radio']:checked + .kn-radio-box::after {
  border-color: #805848; }

kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border: 7px solid #805848; }

kn-radio input[type='radio']:focus + .kn-radio-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-radio:not(.disabled) input[type='radio']:not(:checked):hover + .kn-radio-box::after, kn-radio:not(.disabled) input[type='radio']:not(:checked) + .kn-radio-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-radio.disabled label, kn-radio.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-radio.disabled input[type='radio']:not(:checked) + .kn-radio-box::after, kn-radio.readonly input[type='radio']:not(:checked) + .kn-radio-box::after {
  background-color: transparent !important; }

kn-radio.disabled input[type='radio'] + .kn-radio-box::after, kn-radio.disabled input[type='radio'] + .kn-radio-box .kn-radio-mark, kn-radio.readonly input[type='radio'] + .kn-radio-box::after, kn-radio.readonly input[type='radio'] + .kn-radio-box .kn-radio-mark {
  border-color: rgba(0, 0, 0, 0.1); }

kn-radio-group.ng-touched.ng-invalid kn-radio .kn-radio-box::after, kn-radio-group.ng-touched.ng-invalid kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border-color: #c04060; }

kn-select label, kn-select [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-select label .required {
  color: #c04060; }

kn-select .kn-select-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-select:not(.disabled):not(.focused) .kn-select-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-select.focused .kn-select-container {
  border-color: transparent; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  background-color: #805848; }

kn-select.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  background-color: #c04060; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::before {
  background-color: #ecc6cf; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::after {
  background-color: #c04060; }

kn-select.ng-touched.ng-pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::before {
  background-color: #d9cdc8; }

kn-select .placeholder {
  color: rgba(0, 0, 0, 0.35); }

.kn-select-dropdown {
  border-left: 1px solid rgba(0, 0, 0, 0.05); }

kn-spinner {
  animation-name: strio-spinner-color-5; }
  kn-spinner .path {
    animation: strio-spinner-dash 1.5s ease-in-out infinite, strio-spinner-color-5 6s ease-in-out infinite; }

@keyframes strio-spinner-color-5 {
  0%, 20% {
    stroke: rgba(128, 88, 72, 0.6); }
  40% {
    stroke: rgba(128, 88, 72, 0.7); }
  60% {
    stroke: rgba(128, 88, 72, 0.8); }
  80% {
    stroke: rgba(128, 88, 72, 0.9); }
  100% {
    stroke: #805848; } }

kn-tabs.boxlist div.tabs-viewport {
  background-color: #ffffff; }

kn-tabs.boxlist div.tabs-labels li a {
  color: rgba(0, 0, 0, 0.5); }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    color: rgba(0, 0, 0, 0.8); }

kn-tabs.boxlist div.tabs-labels li.active a {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8); }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    border-bottom: 15px solid #ffffff; }

kn-tabs.notebook div.tabs-labels {
  background-color: rgba(0, 0, 0, 0.08); }
  kn-tabs.notebook div.tabs-labels li a {
    color: #805848; }
    kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
      color: #000000; }
    kn-tabs.notebook div.tabs-labels li a::before {
      background-color: rgba(0, 0, 0, 0.3); }
  kn-tabs.notebook div.tabs-labels li.active a {
    background-color: rgba(255, 255, 255, 0.5); }
    kn-tabs.notebook div.tabs-labels li.active a::before {
      background-color: #805848; }

kn-textarea label, kn-textarea [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-textarea label .required {
  color: #c04060; }

kn-textarea .kn-textarea-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-textarea:not(.disabled):not(.focused) .kn-textarea-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-textarea.focused .kn-textarea-container {
  border-color: transparent; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  background-color: #805848; }

kn-textarea.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::before {
  background-color: #ecc6cf; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::after {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::before {
  background-color: #d9cdc8; }

kn-textarea textarea {
  color: #000000; }

kn-textarea.disabled textarea {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea textarea::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-timeline::before {
  background: linear-gradient(90deg, #f0f0f0, transparent); }

kn-timeline::after {
  background: linear-gradient(270deg, #f0f0f0, transparent); }

kn-timeline .time-segment {
  background-color: #1860d8; }
  kn-timeline .time-segment.future {
    background-color: #8028d8; }
  kn-timeline .time-segment.selected {
    background-color: #0dc22b; }

kn-timeline .time-mark > .calendar-mark {
  position: relative;
  top: 25px;
  left: -5px; }
  kn-timeline .time-mark > .calendar-mark.today {
    left: -6px; }
  kn-timeline .time-mark > .calendar-mark.pin {
    left: -3px; }

kn-timeline .time-mark > a {
  background-color: #1860d8; }
  kn-timeline .time-mark > a.selected {
    background-color: #1860d8; }
    kn-timeline .time-mark > a.selected .date {
      color: rgba(0, 0, 0, 0.8); }
    kn-timeline .time-mark > a.selected::after {
      border: 2px solid #1860d8; }
  kn-timeline .time-mark > a:focus::before {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-timeline .time-mark > a .date {
    color: rgba(0, 0, 0, 0.5); }

kn-timeline .time-mark.pin > a {
  background-color: white;
  border: 4px solid #1860d8; }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.today::before {
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.8), transparent); }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.future > a {
  background-color: #8028d8; }
  kn-timeline .time-mark.future > a.selected::after {
    border-color: #8028d8; }

kn-timeline .time-mark.future.pin > a {
  background-color: white;
  border-color: #8028d8; }

kn-timeline .time-mark.today > a {
  background-color: #303030; }
  kn-timeline .time-mark.today > a.selected::after {
    border-color: #303030; }
  kn-timeline .time-mark.today > a .date {
    top: -60px; }

kn-timeline .time-mark.today.pin > a {
  background-color: white;
  border-color: #303030; }

kn-toast > div {
  background-color: rgba(0, 0, 0, 0.75);
  color: white; }
  kn-toast > div a {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-left: 1px solid rgba(255, 255, 255, 0.15); }
    kn-toast > div a:hover {
      background-color: rgba(0, 0, 0, 0.5); }
    kn-toast > div a:active {
      background-color: black; }

app-history td.device-port-total {
  font-style: italic; }

app-history td.note {
  color: gray; }

app-history td.material-icons {
  display: table-cell; }

@keyframes indeterminate {
  0% {
    left: 0%;
    right: 100%; }
  30% {
    left: 0%;
    right: 50%; }
  80% {
    left: 70%;
    right: 0%; }
  100% {
    left: 100%;
    right: 0%; } }

/*$bg-color: #283038;
$fg-color: #c0c0c0;

$red-shade-color: #f06060;
$yellow-shade-color: #f0d060;
$green-shade-color: #a0f060;
$emerald-shade-color: #60f080;
$cyan-shade-color: #60e0f0;
$blue-shade-color: #6080f0;
$purle-shade-color: #b060f0;
$pink-shade-color: #f060c8;

$primary-color: $purle-shade-color;
$secondary-color: $yellow-shade-color;*/
/*$foreground-color: rgb(255, 255, 255);
$background-color: rgb(56, 56, 64);
$text-color: rgba(255, 255, 255, 0.9);
$text-secondary-color: rgba(255, 255, 255, 0.6);
$reading-animation-color: rgb(0, 150, 136);

$primary-color: rgb(128, 88, 72);
$accent-color: rgb(16, 160, 96);
$warn-color: rgb(192, 64, 96);

$divider-color: rgba(255, 255, 255, 0.1);
$header-divider-color: rgba(255, 255, 255, 0.2);
$row-divider-color: rgba(255, 255, 255, 0.15);*/
kn-audit-display {
  white-space: nowrap;
  margin: 10px 5px; }
  kn-audit-display strong {
    padding: 0.1em 0.4em 0.2em;
    margin: 0 0.2em;
    border-radius: 0.5em;
    font-weight: 400; }

kn-checkbox .kn-checkbox-mark {
  opacity: 0; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::before {
  border-radius: 50%; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border-radius: 2px;
  transition: 0.3s all ease; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark-path {
  stroke-dashoffset: 0;
  stroke-dasharray: 25; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox .kn-checkbox-mark-path {
  stroke-dashoffset: 25;
  stroke-dasharray: 25;
  stroke-width: 2px;
  transition: 0.3s transform ease, 0.3s stroke-dashoffset ease;
  transform-origin: 50% 50%;
  stroke: white; }

kn-checkbox .kn-checkbox-box::after, kn-checkbox label {
  transition: 0.3s color ease; }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox.indeterminate .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox.indeterminate .kn-checkbox-mark-path {
  transform: rotate(45deg) translate(-2px, 0);
  stroke-dashoffset: 20 !important;
  stroke-dasharray: 14 !important; }

app-print-template-edit kn-codemirror {
  height: 100%;
  flex: 1; }

app-print-template-edit > kn-resizable-container {
  height: 100%; }
  app-print-template-edit > kn-resizable-container kn-draggable-handler.left {
    z-index: 2;
    height: 50px !important;
    top: calc(100% - 50px) !important; }
  app-print-template-edit > kn-resizable-container .preview iframe {
    width: 100%;
    height: 100%;
    border: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror {
    height: 100%;
    overflow: visible;
    background: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror-scroll {
    margin: 0;
    padding: 0;
    overflow: visible !important; }
  app-print-template-edit > kn-resizable-container .CodeMirror-sizer {
    border-right-width: 0 !important; }
  app-print-template-edit > kn-resizable-container .box {
    width: 100%;
    height: 100%; }

app-print-template-edit form {
  width: 100%;
  height: 100%; }

app-print-template-edit kn-tabs {
  flex-direction: column-reverse; }
  app-print-template-edit kn-tabs a.sidepanel {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 6px 0 0; }
    app-print-template-edit kn-tabs a.sidepanel i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    app-print-template-edit kn-tabs a.sidepanel:hover, app-print-template-edit kn-tabs a.sidepanel:focus {
      opacity: 1;
      text-decoration: none; }
    app-print-template-edit kn-tabs a.sidepanel:active {
      opacity: 1; }
    app-print-template-edit kn-tabs a.sidepanel[disabled] {
      opacity: 0.3;
      background: none; }
    app-print-template-edit kn-tabs a.sidepanel i {
      transition: transform 0.5s ease 0.3s; }
    app-print-template-edit kn-tabs a.sidepanel.active i {
      transform: rotate(180deg); }

app-print-template-edit kn-tab.active {
  display: flex;
  flex-direction: column;
  flex: 1; }

app-print-template-edit kn-tab.home .box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }

app-print-template-edit kn-tab.home .fields {
  width: 100%;
  max-width: 700px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home i.banner {
  font-size: 192px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home h1 {
  text-align: center;
  margin: 50px 0; }

app-print-template-edit kn-tab.home .form-container {
  width: 80%;
  height: 100%;
  margin: 50px auto; }

app-print-template-edit kn-tab.home .form-layout {
  display: flex;
  flex-direction: column;
  height: 100%; }

app-print-template-edit kn-tab .no-print-context-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder i.banner {
    font-size: 128px;
    margin: 0 auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder strong {
    font-family: 'Exo 2';
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin: 20px 0 50px 0; }
  app-print-template-edit kn-tab .no-print-context-placeholder button {
    text-align: center; }

app-print-template-edit kn-menu.errors kn-menu-activator {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  margin: 0 8px 0 0;
  opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  app-print-template-edit kn-menu.errors kn-menu-activator:hover, app-print-template-edit kn-menu.errors kn-menu-activator:focus {
    opacity: 1;
    text-decoration: none; }
  app-print-template-edit kn-menu.errors kn-menu-activator:active {
    opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator[disabled] {
    opacity: 0.3;
    background: none; }

app-print-template-edit kn-menu.errors kn-menu-content {
  position: absolute;
  right: 8px;
  bottom: 50px;
  max-width: 1000px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-content [hidden] {
    display: none; }
  app-print-template-edit kn-menu.errors kn-menu-content strong {
    display: block; }
  app-print-template-edit kn-menu.errors kn-menu-content pre {
    font-size: 14px;
    margin-bottom: 0; }

kn-roles-table .role-permissions {
  position: relative;
  margin: 0 10px 76px 10px; }
  kn-roles-table .role-permissions > .scrollable {
    overflow-x: auto;
    margin: 0 54px 0 220px; }
  kn-roles-table .role-permissions table {
    border-collapse: separate;
    border-spacing: 0; }
    kn-roles-table .role-permissions table thead th {
      position: relative;
      width: 54px;
      min-width: 54px;
      height: 270px;
      padding: 0; }
      kn-roles-table .role-permissions table thead th.permission:not(:nth-child(2))::before {
        content: '';
        left: 0;
        bottom: 10px;
        position: absolute;
        display: block;
        width: 1px;
        height: calc(100% - 20px); }
    kn-roles-table .role-permissions table tbody td {
      padding: 0;
      height: 54px; }
    kn-roles-table .role-permissions table tbody.permissions-matrix td kn-checkbox {
      justify-content: center; }
    kn-roles-table .role-permissions table tbody.add-new-input td {
      height: 0; }
    kn-roles-table .role-permissions table div.rotate {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 54px;
      bottom: 0;
      left: 100%;
      transform: rotate(270deg);
      transform-origin: 0 100%;
      text-align: left; }
    kn-roles-table .role-permissions table th.name, kn-roles-table .role-permissions table td.name {
      position: absolute;
      left: 0;
      width: 220px;
      text-align: center;
      vertical-align: middle; }
      kn-roles-table .role-permissions table th.name kn-input, kn-roles-table .role-permissions table td.name kn-input {
        margin: 10px; }
        kn-roles-table .role-permissions table th.name kn-input input, kn-roles-table .role-permissions table td.name kn-input input {
          font-weight: 700; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.name, kn-roles-table .role-permissions table td.permission span.description {
      display: block;
      white-space: nowrap;
      padding: 1px 10px; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table td.permission span.name {
      font-size: 16px;
      font-weight: bold; }
    kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.description {
      font-size: 14px;
      font-weight: 400;
      opacity: 0.7; }
    kn-roles-table .role-permissions table th.spacer, kn-roles-table .role-permissions table td.spacer {
      width: 100%;
      min-width: 0; }
    kn-roles-table .role-permissions table th.actions, kn-roles-table .role-permissions table td.actions {
      position: absolute;
      right: 0;
      width: 54px; }
  kn-roles-table .role-permissions .actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 10px;
    height: 34px; }
    kn-roles-table .role-permissions .actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-roles-table .role-permissions .actions button:hover, kn-roles-table .role-permissions .actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-roles-table .role-permissions .actions button:active {
      opacity: 1; }
    kn-roles-table .role-permissions .actions button[disabled] {
      opacity: 0.3;
      background: none; }

kn-permission-actions-select kn-menu-content {
  position: absolute;
  z-index: 100;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3));
  padding: 10px;
  border-radius: 5px;
  transform: translate(calc(-50% + 23px), 5px); }
  kn-permission-actions-select kn-menu-content > div {
    padding: 5px; }
    kn-permission-actions-select kn-menu-content > div kn-checkbox label {
      flex: 1; }
  kn-permission-actions-select kn-menu-content::before {
    position: absolute;
    left: calc(50% - 10px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

kn-user-edit table.user-roles {
  width: 100%;
  border-collapse: collapse;
  margin: 13px 0 10px 0; }
  kn-user-edit table.user-roles tbody tr {
    height: 40px; }
  kn-user-edit table.user-roles tbody td {
    transition: 0.3s background-color ease;
    padding: 10px 0 10px 10px; }
  kn-user-edit table.user-roles td.actions {
    text-align: right; }
  kn-user-edit table.user-roles thead, kn-user-edit table.user-roles td.user-role input {
    font-weight: bold; }
  kn-user-edit table.user-roles thead {
    text-align: center; }
    kn-user-edit table.user-roles thead tr:first-child {
      text-align: center; }
    kn-user-edit table.user-roles thead tr:last-child {
      height: auto; }
      kn-user-edit table.user-roles thead tr:last-child td {
        font-weight: 400;
        font-style: italic;
        opacity: 0.7;
        padding-bottom: 5px; }
        kn-user-edit table.user-roles thead tr:last-child td > div {
          display: flex; }
          kn-user-edit table.user-roles thead tr:last-child td > div > span {
            flex: 1; }
  kn-user-edit table.user-roles td.user-role {
    width: 200px; }
  kn-user-edit table.user-roles td.user-role-customer-branch {
    width: 250px; }
    kn-user-edit table.user-roles td.user-role-customer-branch > div {
      display: flex; }
      kn-user-edit table.user-roles td.user-role-customer-branch > div input {
        text-align: right;
        width: 100%; }
  kn-user-edit table.user-roles td.actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 10px;
    height: 34px; }
    kn-user-edit table.user-roles td.actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-user-edit table.user-roles td.actions button:hover, kn-user-edit table.user-roles td.actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-user-edit table.user-roles td.actions button:active {
      opacity: 1; }
    kn-user-edit table.user-roles td.actions button[disabled] {
      opacity: 0.3;
      background: none; }
  kn-user-edit table.user-roles td.actions button:first-child {
    margin-left: 0; }
  kn-user-edit table.user-roles td.actions button:last-child {
    margin-right: 0; }

kn-control-messages {
  position: relative;
  height: 15px; }
  kn-control-messages > div {
    position: absolute;
    display: block; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave {
      transition: 0.3s all ease; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave.kn-leave-active {
      top: -5px;
      opacity: 0; }
    kn-control-messages > div.kn-leave, kn-control-messages > div.kn-enter.kn-enter-active {
      top: 0;
      opacity: 1; }

app-database-manage kn-tabs {
  position: relative;
  padding-top: 50px;
  margin: 0 0 20px 0; }
  app-database-manage kn-tabs .tab-group {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 400; }
  app-database-manage kn-tabs a i.material-icons {
    font-size: 72px; }
  app-database-manage kn-tabs a strong {
    font-weight: 400; }
  app-database-manage kn-tabs kn-tab {
    position: relative;
    padding: 30px;
    justify-content: center;
    text-align: center; }
    app-database-manage kn-tabs kn-tab .actions {
      margin: 20px auto 0 auto; }
    app-database-manage kn-tabs kn-tab p.note {
      margin-top: 0;
      font-style: italic;
      opacity: 0.5; }
    app-database-manage kn-tabs kn-tab .select-database {
      margin: 20px auto;
      padding: 20px;
      width: 400px; }
    app-database-manage kn-tabs kn-tab::after {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
      transition: 0.3s all ease; }
    app-database-manage kn-tabs kn-tab.kn-drag-over::after {
      opacity: 1;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      left: 10px;
      top: 10px; }

kn-datagrid tr td.strong {
  font-weight: bold; }

kn-datagrid tr td.highlight {
  color: #802020; }

kn-datagrid tr td.note {
  color: gray;
  font-size: 0.8em; }

kn-datagrid tr td.overflow {
  overflow: visible; }

kn-datagrid kn-cell-renderer span.user-database-tag, kn-datagrid kn-cell-renderer span.user-role-tag {
  color: white;
  padding: 4px 7px;
  margin: 0 5px 0 0;
  border-radius: 2px; }

kn-datagrid kn-cell-renderer span.user-ownership {
  color: rgba(0, 0, 0, 0.3); }
  kn-datagrid kn-cell-renderer span.user-ownership > span {
    color: black;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin: 0 4px;
    border-radius: 2px; }

kn-datepicker .viewport {
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-datepicker .viewport::before {
    content: '';
    position: absolute;
    display: block;
    left: calc(50% - 10px);
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  kn-datepicker .viewport.kn-enter, kn-datepicker .viewport.kn-leave {
    transition: 0.3s opacity ease, 0.3s margin-top ease, 0.3s transform ease; }
    kn-datepicker .viewport.kn-enter kn-date-view, kn-datepicker .viewport.kn-enter kn-day-view, kn-datepicker .viewport.kn-enter kn-hour-view, kn-datepicker .viewport.kn-leave kn-date-view, kn-datepicker .viewport.kn-leave kn-day-view, kn-datepicker .viewport.kn-leave kn-hour-view {
      opacity: 1 !important;
      transform: none !important; }
  kn-datepicker .viewport.kn-enter {
    opacity: 0;
    margin-top: 10px; }
  kn-datepicker .viewport.kn-leave, kn-datepicker .viewport.kn-enter.kn-enter-active {
    opacity: 1;
    margin-top: 0; }
  kn-datepicker .viewport.kn-leave.kn-leave-active {
    opacity: 0;
    margin-top: 10px; }

kn-datepicker kn-date-header a, kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a, kn-datepicker kn-time-header a:hover {
  text-decoration: none; }

kn-datepicker kn-date-header a {
  text-align: center;
  font-weight: 900; }

kn-datepicker kn-time-header a {
  font-weight: 400;
  border-radius: 10%; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-hour-view.kn-enter, kn-datepicker kn-hour-view.kn-leave {
  transition: 0.3s opacity ease, 0.3s transform ease; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-hour-view.kn-enter {
  opacity: 0;
  transform: scale(0.7, 0.7); }

kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-date-view.kn-enter.kn-enter-active, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-day-view.kn-enter.kn-enter-active, kn-datepicker kn-hour-view.kn-leave, kn-datepicker kn-hour-view.kn-enter.kn-enter-active {
  opacity: 1;
  transform: scale(1, 1); }

kn-datepicker kn-date-view.kn-leave.kn-leave-active, kn-datepicker kn-day-view.kn-leave.kn-leave-active, kn-datepicker kn-hour-view.kn-leave.kn-leave-active {
  opacity: 0;
  transform: scale(1.4, 1.4); }

kn-datepicker kn-month-view.animated {
  transition: 0.3s transform ease; }

kn-datepicker kn-month-view th, kn-datepicker kn-month-view td {
  text-align: center;
  border: 1px solid transparent; }

kn-datepicker kn-month-view th {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase; }

kn-datepicker kn-month-view td a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker kn-month-view td a, kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:active, kn-datepicker kn-month-view td a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    outline: none; }

kn-datepicker .picker-relative-container {
  position: relative;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  margin: 22px; }
  kn-datepicker .picker-relative-container.format-12-hours {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px; }
  kn-datepicker .picker-relative-container .center {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    z-index: 1;
    border-radius: 50%; }
  kn-datepicker .picker-relative-container .gauge {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: 0 0; }
  kn-datepicker .picker-relative-container li {
    text-align: center;
    border: 1px solid transparent; }
    kn-datepicker .picker-relative-container li::before {
      border-radius: 50%; }
    kn-datepicker .picker-relative-container li.minor a {
      width: 13px;
      height: 13px;
      line-height: 13px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent;
      font-size: 0; }
      kn-datepicker .picker-relative-container li.minor a, kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:active, kn-datepicker .picker-relative-container li.minor a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
        outline: none; }
    kn-datepicker .picker-relative-container li:not(.minor) a {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent; }
      kn-datepicker .picker-relative-container li:not(.minor) a, kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:active, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        outline: none; }

kn-datepicker .period-selector a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker .period-selector a, kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:active, kn-datepicker .period-selector a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    outline: none; }

.kn-ripple {
  overflow: hidden;
  position: relative; }

.kn-ripple.kn-ripple-unbounded {
  overflow: visible; }

.kn-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0); }

kn-export-button kn-menu {
  display: block;
  position: relative; }
  kn-export-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-export-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-export-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-export-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-export-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-export-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-export-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-export-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-export-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-export-button kn-menu kn-spinner {
    left: 32px; }

button.form-button, .form-input button {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 30px;
  font-size: 16px;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s; }
  button.form-button[disabled], .form-input button[disabled] {
    box-shadow: none; }
  button.form-button::-moz-focus-inner, .form-input button::-moz-focus-inner {
    border: none; }
  button.form-button::after, .form-input button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    bottom: -25%;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    transition: 0.2s all ease; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
    button.form-button:not([disabled]):active::after, .form-input button:not([disabled]):active::after {
      bottom: -70%;
      left: -50%;
      height: 200%;
      width: 200%;
      opacity: 0.5; }

@keyframes reveal-back-link {
  to {
    opacity: 1;
    left: calc(50% - 700px); } }

.form-container.heading, .form-container .form-loader-bar {
  position: relative; }
  .form-container.heading::before, .form-container.heading::after, .form-container .form-loader-bar::before, .form-container .form-loader-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    height: 5px;
    z-index: 3; }
  .form-container.heading::before, .form-container .form-loader-bar::before {
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.3s opacity ease; }
  .form-container.heading::after, .form-container .form-loader-bar::after {
    left: 0%;
    right: 100%;
    opacity: 0; }

.loading .form-container.heading::before, .loading .form-container.heading::after, .loading .form-container .form-loader-bar::before, .loading .form-container .form-loader-bar::after {
  opacity: 1; }

.loading .form-container.heading::after, .loading .form-container .form-loader-bar::after {
  animation: indeterminate 1s linear infinite; }

.form-container {
  margin: 30px 0; }
  .form-container.heading {
    position: relative;
    margin: 0;
    padding: 0; }
  .form-container h1, .form-container p, .form-container .form-layout {
    margin: auto;
    max-width: 1200px; }
  .form-container h1 {
    padding: 30px 0;
    margin: 0 auto;
    border: none; }
  .form-container .form-back {
    position: absolute;
    opacity: 0;
    left: calc(50% - 750px);
    top: calc(50% - 32px);
    transition: 0.3s all ease;
    animation-name: reveal-back-link;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
    .form-container .form-back::after {
      content: '';
      position: absolute;
      display: block;
      width: 64px;
      height: 64px;
      left: 20px;
      border-radius: 50%;
      transition: 0.3s all ease;
      transform: rotateY(45deg); }
    .form-container .form-back i {
      position: absolute;
      z-index: 10;
      font-size: 48px;
      line-height: 64px;
      text-align: center;
      width: 64px;
      height: 64px; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      left: 0;
      transform: rotateY(0); }
    .form-container .form-back:active::after {
      transition: none; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px; }
  .form-footer div:only-child {
    margin-left: auto; }

.form-actions-info {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  margin: 0 1em;
  white-space: nowrap; }
  .form-actions-info i.material-icons {
    padding: 0 0.3em; }

.form-buttons {
  text-align: right; }
  .form-buttons button {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    width: auto;
    margin-left: 10px;
    padding: 0 30px; }
    .form-buttons button[disabled] {
      box-shadow: none; }
    .form-buttons button::-moz-focus-inner {
      border: none; }
    .form-buttons button::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    .form-buttons button:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      .form-buttons button:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }

.form-errors {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .form-errors li {
    margin: 2px 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .form-errors li strong {
      display: flex;
      align-items: center;
      color: white;
      padding: 0.3em 0.5em;
      margin-right: 1em; }
      .form-errors li strong i {
        padding-right: 0.3em; }

.form-layout .info-bar {
  margin: 15px;
  padding: 15px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .info-bar strong {
    font-weight: 400; }

.form-layout .form-grid {
  display: flex;
  flex-direction: column; }

.form-layout .form-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }
  .form-layout .form-box .title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 5px;
    height: 34px;
    line-height: 34px; }
    .form-layout .form-box .title h2 {
      flex: 1;
      padding-left: 8px;
      margin: 0;
      font-weight: 800;
      font-size: 1em;
      text-transform: uppercase; }
    .form-layout .form-box .title .side-action {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      height: 24px;
      margin-left: 5px; }
      .form-layout .form-box .title .side-action i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .title .side-action:hover, .form-layout .form-box .title .side-action:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .title .side-action:active {
        opacity: 1; }
      .form-layout .form-box .title .side-action[disabled] {
        opacity: 0.3;
        background: none; }
  .form-layout .form-box .content {
    flex-grow: 1;
    padding: 0 15px 15px 15px; }
    .form-layout .form-box .content:first-child {
      padding-top: 15px; }
  .form-layout .form-box .info-bar {
    margin: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none; }
  .form-layout .form-box .container {
    display: flex; }
    .form-layout .form-box .container .content {
      flex: 1;
      width: 0; }
    .form-layout .form-box .container .side-actions {
      display: flex;
      align-items: center;
      justify-content: center; }
      .form-layout .form-box .container .side-actions a {
        display: inline-block;
        margin: 0;
        padding: 5px;
        opacity: 0.7;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
        height: 24px;
        margin: 10px; }
        .form-layout .form-box .container .side-actions a i {
          vertical-align: top;
          transition: all 0.5s ease;
          display: inline-block;
          width: 24px;
          height: 24px;
          overflow: hidden; }
        .form-layout .form-box .container .side-actions a:hover, .form-layout .form-box .container .side-actions a:focus {
          opacity: 1;
          text-decoration: none; }
        .form-layout .form-box .container .side-actions a:active {
          opacity: 1; }
        .form-layout .form-box .container .side-actions a[disabled] {
          opacity: 0.3;
          background: none; }
  .form-layout .form-box .alt p {
    margin: 0.5em;
    padding: 0; }
  .form-layout .form-box .alt-actions {
    display: flex; }
    .form-layout .form-box .alt-actions a {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 5px 7px;
      height: 24px; }
      .form-layout .form-box .alt-actions a i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .alt-actions a:hover, .form-layout .form-box .alt-actions a:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .alt-actions a:active {
        opacity: 1; }
      .form-layout .form-box .alt-actions a[disabled] {
        opacity: 0.3;
        background: none; }
      .form-layout .form-box .alt-actions a i.material-icons {
        margin-right: 5px; }

.form-layout .form-inline-box {
  margin: 15px; }
  .form-layout .form-inline-box .title h3 {
    flex: 1;
    padding: 2px 0 0 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center; }

.form-layout .form-expanssion {
  margin: 15px 0;
  z-index: 1; }
  .form-layout .form-expanssion .form-box {
    margin: 0 15px;
    transition: 0.2s margin ease;
    position: relative;
    box-shadow: none; }
    .form-layout .form-expanssion .form-box::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .form-expanssion .form-box.expanded {
    margin: 30px 15px; }
  .form-layout .form-expanssion .form-box:first-child {
    margin-top: 0; }
  .form-layout .form-expanssion .form-box:last-child {
    margin-bottom: 0; }

.form-layout .row {
  display: flex;
  flex-direction: row;
  width: 100%; }

.form-layout .column {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .form-layout .column .column-spacer {
    height: 100%; }

.form-layout .form-input {
  flex: 1;
  position: relative;
  padding: 3px 0;
  min-width: 0; }
  .form-layout .form-input.inlined {
    margin: 0;
    flex-grow: 0;
    min-width: auto; }
  .form-layout .form-input > * {
    margin: 0 10px; }
  .form-layout .form-input > input, .form-layout .form-input > select {
    width: calc(100% - 20px); }
  .form-layout .form-input > kn-control-messages {
    margin: -18px 0 0 15px; }

.form-layout .flex-1 {
  flex: 1; }

.form-layout .flex-2 {
  flex: 2; }

.form-layout .flex-3 {
  flex: 3; }

.form-layout .flex-4 {
  flex: 4; }

.form-layout .flex-5 {
  flex: 5; }

.form-layout .flex-6 {
  flex: 6; }

.form-layout .flex-start {
  justify-content: flex-start; }

.form-layout .flex-end {
  justify-content: flex-end; }

.form-layout .row.flex-reverse {
  flex-direction: row-reverse; }

.form-layout .column.flex-reverse {
  flex-direction: column-reverse; }

.form-layout .popover {
  position: relative;
  height: 34px; }
  .form-layout .popover kn-menu-activator {
    cursor: pointer; }
  .form-layout .popover .side-action {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    height: 24px; }
    .form-layout .popover .side-action i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .form-layout .popover .side-action:hover, .form-layout .popover .side-action:focus {
      opacity: 1;
      text-decoration: none; }
    .form-layout .popover .side-action:active {
      opacity: 1; }
    .form-layout .popover .side-action[disabled] {
      opacity: 0.3;
      background: none; }

kn-attached-portal .kn-form-layout-menu-content {
  z-index: 200;
  position: absolute;
  left: calc(100% - 490px);
  top: 40px;
  width: 500px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    font-weight: normal;
    margin: 0;
    padding: 15px 15px 15px 20px; }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:focus {
      opacity: 1;
      text-decoration: none; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:active {
      opacity: 1; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close[disabled] {
      opacity: 0.3;
      background: none; }
  kn-attached-portal .kn-form-layout-menu-content [hidden] {
    display: none; }
  kn-attached-portal .kn-form-layout-menu-content::before {
    position: absolute;
    left: calc(100% - 37px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

.form-slots-table {
  width: 100%;
  table-layout: fixed;
  margin-top: 2em;
  border-collapse: collapse; }
  .form-slots-table th {
    padding: 5px;
    font-weight: 400;
    position: relative; }
    .form-slots-table th::before {
      content: '';
      position: absolute;
      display: block;
      width: calc(100% - 22px);
      height: 100%;
      border: 1px solid transparent;
      top: 0;
      left: 11px; }
    .form-slots-table th.disabled::before {
      background-color: transparent; }
  .form-slots-table td {
    padding: 10px 0; }
  .form-slots-table caption {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1; }

kn-sticky.sticked > .grid-panel {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.grid-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px; }
  .grid-panel .selector {
    width: 200px; }
  .grid-panel .actions, .grid-panel kn-grid-actions {
    display: flex;
    flex-grow: 1;
    font-size: 0; }
  .grid-panel .widgets {
    display: flex; }
    .grid-panel .widgets > *:not(:last-child) {
      margin-right: 10px; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    padding: 5px 7px;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    display: inline-block;
    line-height: 24px; }
    .grid-panel .selector a i, .grid-panel .actions a i, .grid-panel kn-grid-actions a i {
      vertical-align: top;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      opacity: 1; }
      .grid-panel .selector a:hover i, .grid-panel .actions a:hover i, .grid-panel kn-grid-actions a:hover i {
        opacity: 1; }
    .grid-panel .selector a:hover, .grid-panel .selector a:focus, .grid-panel .selector a:active, .grid-panel .actions a:hover, .grid-panel .actions a:focus, .grid-panel .actions a:active, .grid-panel kn-grid-actions a:hover, .grid-panel kn-grid-actions a:focus, .grid-panel kn-grid-actions a:active {
      text-decoration: none; }

kn-grid-preset kn-menu {
  display: block;
  position: relative;
  width: 300px; }
  kn-grid-preset kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-preset kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-preset kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-preset kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-preset kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-preset kn-menu kn-menu-activator {
    display: block;
    opacity: 1; }

kn-grid-preset kn-menu-activator > div {
  padding: 0;
  margin: 0;
  line-height: 24px;
  display: flex;
  align-items: center; }
  kn-grid-preset kn-menu-activator > div[hidden] {
    display: none; }
  kn-grid-preset kn-menu-activator > div i {
    padding: 0; }
  kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
      opacity: 1; }
  kn-grid-preset kn-menu-activator > div span {
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    kn-grid-preset kn-menu-activator > div span.template-name {
      font-style: normal; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.ownerUid {
        font-size: 80%;
        font-style: italic; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.material-icons {
        font-size: 125%;
        vertical-align: middle; }
  kn-grid-preset kn-menu-activator > div input {
    height: 34px;
    padding: 0 5px;
    width: calc(100% - 10px);
    min-width: 0;
    border: none;
    background-color: transparent;
    font-family: Source Sans Pro;
    font-size: 16px;
    outline: none; }
  kn-grid-preset kn-menu-activator > div a {
    opacity: 0.7; }

kn-grid-preset kn-menu-content kn-select {
  width: 100%; }

kn-grid-preset kn-menu-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-grid-preset kn-menu-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-grid-preset kn-menu-content li:not(.user-select) span, kn-grid-preset kn-menu-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-grid-preset kn-menu-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  width: 100%; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-grid-query-filter kn-menu {
  display: block;
  position: relative; }
  kn-grid-query-filter kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-query-filter kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-query-filter kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-query-filter kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 5px 7px; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50px;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
      position: absolute;
      left: calc(50% - 10px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-attached-portal .kn-grid-menu-content {
    position: absolute;
    z-index: 20;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-attached-portal .kn-grid-menu-content::before {
      position: absolute;
      left: calc(100% - 100px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 0; }
    kn-grid-query-filter kn-menu kn-menu-activator > * {
      height: 24px;
      padding: 5px;
      transition: color 0.5s ease; }
      kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
        opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator > span {
      display: flex; }
    kn-grid-query-filter kn-menu kn-menu-activator > a {
      opacity: 0.7; }

kn-grid-reset {
  display: block;
  position: relative;
  padding: 0; }
  kn-grid-reset.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-reset kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-reset kn-menu-activator[hidden] {
      display: none; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-reset kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-reset kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-reset kn-menu-activator {
    padding: 0 7px; }
    kn-grid-reset kn-menu-activator i {
      padding: 5px 0; }
      kn-grid-reset kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-grid-reset > *:not(.disabled) {
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus {
      opacity: 1; }
  kn-grid-reset > span {
    display: flex; }
  kn-grid-reset > a {
    opacity: 0.7;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
    kn-grid-reset > a.disabled {
      cursor: default;
      pointer-events: none; }

kn-grid-search {
  position: relative;
  height: 50px;
  margin: -8px -8px -8px 0; }
  kn-grid-search input[type='search'] {
    border: none;
    padding: 0 10px 0 40px;
    height: 100%;
    width: 0;
    vertical-align: top;
    transition: 0.3s all ease; }
    kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
      width: 250px;
      outline: none; }
  kn-grid-search::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center; }

header.liner {
  height: 80px;
  display: flex;
  justify-content: space-between;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  header.liner > div {
    display: flex;
    align-items: center; }
  header.liner .logo {
    outline: none; }
    header.liner .logo img {
      margin: 10px; }
  header.liner button.main-action {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    margin: 0 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
    header.liner button.main-action[disabled] {
      box-shadow: none; }
    header.liner button.main-action::-moz-focus-inner {
      border: none; }
    header.liner button.main-action::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    header.liner button.main-action:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      header.liner button.main-action:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
  header.liner kn-menu {
    z-index: 2;
    position: relative; }
    header.liner kn-menu.expanded {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
    header.liner kn-menu kn-menu-activator {
      display: flex;
      padding: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
      outline: none; }
    header.liner kn-menu kn-menu-content {
      position: absolute;
      min-width: 100%;
      left: 0;
      margin-top: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      z-index: 100; }
      header.liner kn-menu kn-menu-content[hidden] {
        opacity: 0;
        margin-top: -10px;
        transition: all 0.3s ease; }
      header.liner kn-menu kn-menu-content ul {
        padding: 0;
        margin: 0;
        list-style-type: none; }
        header.liner kn-menu kn-menu-content ul li {
          padding: 0;
          margin: 0; }
      header.liner kn-menu kn-menu-content a {
        padding: 10px;
        display: block;
        white-space: nowrap;
        transition: all 0.3s ease; }
        header.liner kn-menu kn-menu-content a:hover {
          text-decoration: none; }

kn-attached-portal .header-liner.kn-menu-content {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 100; }
  kn-attached-portal .header-liner.kn-menu-content[hidden] {
    opacity: 0;
    margin-top: -10px;
    transition: all 0.3s ease; }
  kn-attached-portal .header-liner.kn-menu-content ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    kn-attached-portal .header-liner.kn-menu-content ul li {
      padding: 0;
      margin: 0; }
  kn-attached-portal .header-liner.kn-menu-content a {
    padding: 10px;
    display: block;
    white-space: nowrap;
    transition: all 0.3s ease; }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      text-decoration: none; }

header.liner .database-menu::before, header.liner .database-menu::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 1px;
  height: 40px;
  transition: top 0.5s ease; }

header.liner .database-menu::before {
  left: 0; }

header.liner .database-menu::after {
  right: 0; }

header.liner .database-menu.expanded::before, header.liner .database-menu.expanded::after, header.liner .database-menu:hover::before, header.liner .database-menu:hover::after {
  top: -50px; }

header.liner .database-menu.database-menu-hidden {
  display: none; }

header.liner .database-menu kn-database-selector {
  border: none; }
  header.liner .database-menu kn-database-selector .filter {
    font-size: 0; }
    header.liner .database-menu kn-database-selector .filter .clear {
      padding: 0 20px; }
    header.liner .database-menu kn-database-selector .filter:hover .clear {
      background-image: url("../kn-theme-strio/img/clear.svg"); }
  header.liner .database-menu kn-database-selector ul {
    max-height: 70%; }
    header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
      left: 0; }
    header.liner .database-menu kn-database-selector ul li a:hover {
      text-decoration: none; }

header.liner .database-menu kn-menu-activator {
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding-right: 40px; }
  header.liner .database-menu kn-menu-activator strong {
    display: block;
    font-weight: normal; }
  header.liner .database-menu kn-menu-activator .description {
    display: block; }
  header.liner .database-menu kn-menu-activator::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 32px;
    width: 16px;
    height: 16px;
    mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    transform: rotate(-90deg);
    transition: transform 0.5s ease; }
  header.liner .database-menu kn-menu-activator:hover::after {
    transform: rotate(0deg); }

header.liner .database-menu.expanded kn-menu-activator::after {
  transform: rotate(-180deg); }

header.liner > div:first-child, header.liner kn-navbar {
  flex: 1; }

header.liner nav > ul, header.liner kn-navbar > ul {
  height: 80px;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  display: flex; }
  header.liner nav > ul > li, header.liner kn-navbar > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
      display: block;
      margin: 10px 3px;
      height: 58px;
      padding: 0 18px;
      line-height: 58px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      header.liner nav > ul > li > a, header.liner nav > ul > li > a:hover, header.liner nav > ul > li > a:focus, header.liner nav > ul > li > kn-menu-activator, header.liner nav > ul > li > kn-menu-activator:hover, header.liner nav > ul > li > kn-menu-activator:focus, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > a:focus, header.liner kn-navbar > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > kn-menu-activator:focus {
        text-decoration: none; }

header.liner kn-navbar kn-menu {
  margin: 10px 3px;
  height: 60px;
  padding: 0 !important; }

header.liner kn-navbar kn-menu-activator {
  height: 60px;
  padding: 0 8px;
  align-items: center; }

kn-attached-portal .kn-navbar-expansion ul {
  margin: 0 10px;
  padding: 0;
  list-style-type: none; }
  kn-attached-portal .kn-navbar-expansion ul > li {
    margin: 0;
    padding: 0; }
    kn-attached-portal .kn-navbar-expansion ul > li > a {
      display: block;
      padding: 0 18px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      kn-attached-portal .kn-navbar-expansion ul > li > a, kn-attached-portal .kn-navbar-expansion ul > li > a:hover, kn-attached-portal .kn-navbar-expansion ul > li > a:focus {
        text-decoration: none; }

header.liner .user-menu kn-menu-activator {
  min-width: 120px;
  flex-direction: row-reverse;
  align-items: center; }
  header.liner .user-menu kn-menu-activator img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    background-image: url("../img/noavatar.svg"); }
  header.liner .user-menu kn-menu-activator kn-menu-content {
    right: 0; }

header.liner .user-menu kn-menu-content {
  right: 0;
  left: initial; }
  header.liner .user-menu kn-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-attached-portal .user-menu-content {
  right: 0;
  left: initial; }
  kn-attached-portal .user-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-input label, kn-input [kn-hint] {
  font-size: 14px; }

kn-input [kn-prefix], kn-input [kn-suffix] {
  display: flex; }

kn-input .kn-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-input .kn-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input .kn-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input.disabled .kn-input-container, kn-input.readonly .kn-input-container {
  border-bottom-style: dotted; }

kn-input.focused .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.focused .kn-input-underline::before, kn-input.focused .kn-input-underline::after {
  z-index: 111; }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.ng-touched.ng-pending .kn-input-underline::before, kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::after {
  top: -4px;
  height: 5px; }

kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-input input {
  min-height: 24px; }
  kn-input input:-webkit-autofill {
    -webkit-animation-name: kill-autofill;
    -webkit-animation-fill-mode: both; }

@-webkit-keyframes kill-autofill {
  to {
    background: transparent; } }

kn-date-input label, kn-date-input [kn-hint] {
  font-size: 14px; }

kn-date-input [kn-prefix], kn-date-input [kn-suffix] {
  display: flex; }

kn-date-input .kn-date-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-date-input .kn-date-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input .kn-date-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input.disabled .kn-date-input-container, kn-date-input.readonly .kn-date-input-container {
  border-bottom-style: dotted; }

kn-date-input.focused .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.focused .kn-date-input-underline::before, kn-date-input.focused .kn-date-input-underline::after {
  z-index: 111; }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before, kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::after {
  top: -4px;
  height: 5px; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-date-input input {
  min-height: 24px;
  text-align: right; }

kn-date-input .input-button i.material-icons {
  opacity: 0.5;
  transition: 0.3s opacity ease; }
  kn-date-input .input-button i.material-icons:hover, kn-date-input .input-button i.material-icons:focus {
    opacity: 1; }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  opacity: 0.5; }

kn-date-input .input-button > a {
  display: flex;
  text-decoration: none; }

@-moz-document url-prefix() {
  kn-date-input input {
    clip-path: inset(0 25px 0 0);
    margin-right: -20px !important;
    min-width: 70px !important; } }

kn-kcuni-settings {
  display: block;
  margin: 20px; }
  kn-kcuni-settings p strong {
    font-weight: 400; }
  kn-kcuni-settings .settings {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
    margin: 0 -10px 10px; }
    kn-kcuni-settings .settings kn-input {
      flex: 1; }
    kn-kcuni-settings .settings button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      margin-left: 10px; }
      kn-kcuni-settings .settings button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      kn-kcuni-settings .settings button:hover, kn-kcuni-settings .settings button:focus {
        opacity: 1;
        text-decoration: none; }
      kn-kcuni-settings .settings button:active {
        opacity: 1; }
      kn-kcuni-settings .settings button[disabled] {
        opacity: 0.3;
        background: none; }
  kn-kcuni-settings .message {
    padding: 10px;
    vertical-align: center; }
    kn-kcuni-settings .message i {
      vertical-align: bottom; }
  kn-kcuni-settings .doc-link {
    display: block;
    padding-top: 10px;
    margin-bottom: 20px;
    float: left; }
    kn-kcuni-settings .doc-link.app-link {
      float: right; }

.app-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }
  .app-loading-screen p {
    padding: 5px 10px;
    margin: 0;
    border-radius: 3px; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 600px;
  font-family: 'Source Sans Pro';
  font-size: 16px; }

input {
  font-family: 'Source Sans Pro';
  font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo 2'; }

h1 {
  font-weight: 300;
  font-size: 48px;
  padding-bottom: 10px; }

a {
  text-decoration: none; }

a:hover, a:focus {
  text-decoration: underline; }

kn-app-main {
  display: block; }

[knBackgroundFocusable] {
  outline: none; }

.country-display,
kn-select.country .option,
kn-select.country .kn-option-content {
  height: 24px;
  line-height: 24px; }
  .country-display img,
  kn-select.country .option img,
  kn-select.country .kn-option-content img {
    width: 24px;
    height: 16px;
    margin: 4px 4px 4px 0;
    vertical-align: bottom;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.flat-button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }
  .flat-button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  .flat-button:hover, .flat-button:focus {
    opacity: 1;
    text-decoration: none; }
  .flat-button:active {
    opacity: 1; }
  .flat-button[disabled] {
    opacity: 0.3;
    background: none; }

.flat-table {
  width: 100%;
  border-collapse: collapse; }
  .flat-table tbody tr {
    height: 55px; }
  .flat-table tbody td {
    transition: 0.3s background-color ease;
    padding: 10px; }
  .flat-table thead td {
    padding: 10px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7; }
  .flat-table .actions {
    text-align: right; }
    .flat-table .actions button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer; }
      .flat-table .actions button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .flat-table .actions button:hover, .flat-table .actions button:focus {
        opacity: 1;
        text-decoration: none; }
      .flat-table .actions button:active {
        opacity: 1; }
      .flat-table .actions button[disabled] {
        opacity: 0.3;
        background: none; }

kn-modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }

kn-modal.confirmation-dialog .overlay {
  display: flex;
  align-items: center;
  justify-content: center; }
  kn-modal.confirmation-dialog .overlay.kn-enter, kn-modal.confirmation-dialog .overlay.kn-leave {
    transition: 0.3s opacity ease; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container, kn-modal.confirmation-dialog .overlay.kn-leave .container {
      transition: 0.3s transform ease, 0.3s margin-top ease-out; }
  kn-modal.confirmation-dialog .overlay.kn-enter {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container {
      transform: perspective(1000px) rotate3d(1, 0, 0, 60deg); }
  kn-modal.confirmation-dialog .overlay.kn-leave, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active {
    opacity: 1; }
    kn-modal.confirmation-dialog .overlay.kn-leave .container, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active .container {
      transform: scale(1); }
  kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active .container {
      transform: scale(0.8);
      margin-top: 100px; }
  kn-modal.confirmation-dialog .overlay .container {
    overflow-y: auto;
    min-width: 300px;
    max-width: 750px;
    min-height: 200px;
    display: flex;
    flex-direction: column; }
  kn-modal.confirmation-dialog .overlay .content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; }
    kn-modal.confirmation-dialog .overlay .content span {
      white-space: pre-line;
      text-align: center;
      margin-top: 10px; }
  kn-modal.confirmation-dialog .overlay .buttons {
    display: flex; }
    kn-modal.confirmation-dialog .overlay .buttons button {
      position: relative;
      flex: 1;
      padding: 15px;
      min-width: 150px;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.5s ease, background-color 0.5s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        content: '';
        width: 60%;
        height: 3px;
        position: absolute;
        display: block;
        top: 0;
        left: 20%;
        opacity: 0.3; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover::before {
        opacity: 1; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        transition: color 0.2s ease, background-color 0.2s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button:active {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
        padding: 16px 15px 14px 15px; }

kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-options-container .kn-options-container-viewport {
    max-height: 310px; }
  kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-options-container .kn-options-container-filter .clear::before, kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-select.focused kn-options-container .kn-options-container-viewport, kn-input.focused kn-options-container .kn-options-container-viewport {
  z-index: 1000; }

kn-optgroup > strong {
  text-transform: uppercase; }

kn-option:not(.disabled):hover {
  transition: none; }

kn-option .kn-option-selector {
  transition: 0.3s color ease; }

kn-attached-portal .kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-attached-portal .kn-options-container .kn-options-container-viewport {
    max-height: 310px;
    overflow-y: scroll; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before, kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-attached-portal .kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-ownership-display > span {
  padding: 4px;
  margin: 0 4px;
  border-radius: 2px; }

kn-print-button kn-menu {
  display: block;
  position: relative; }
  kn-print-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-print-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-print-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-print-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-print-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-print-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-print-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-print-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-print-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-print-button kn-menu kn-menu-content {
    min-width: 200px; }
  kn-print-button kn-menu kn-spinner {
    left: 14px; }

kn-attached-portal .kn-menu-content.kn-print-button-content {
  min-width: 200px; }

kn-query-filter .query-filter > div[knFilterGroup] {
  display: block;
  min-width: 1000px;
  padding: 20px; }

kn-query-filter .filter-group {
  margin: auto; }
  kn-query-filter .filter-group .new-filter-actions {
    align-items: center;
    display: flex; }
    kn-query-filter .filter-group .new-filter-actions button {
      margin: 0 0 0 10px;
      padding: 5px 10px;
      border-radius: 3px;
      border: none;
      height: 30px;
      text-transform: uppercase; }
    kn-query-filter .filter-group .new-filter-actions .coalescing-operator {
      display: flex;
      align-items: center;
      margin-right: 10px; }
      kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
        content: '';
        display: block;
        flex: 1;
        height: 1px; }
    kn-query-filter .filter-group .new-filter-actions kn-select {
      width: 200px; }

kn-query-filter ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-query-filter li {
  padding: 10px 0 10px 10px; }

kn-query-filter li.boolean-operator {
  padding: 0;
  position: relative;
  height: 1px; }
  kn-query-filter li.boolean-operator span {
    position: absolute;
    display: block;
    padding: 0 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    top: -10px;
    left: 20px;
    text-transform: uppercase; }

kn-query-filter li[knFilterItem] {
  padding: 10px 0 10px 10px;
  display: flex;
  align-items: center;
  height: 40px; }
  kn-query-filter li[knFilterItem] > span {
    margin: 5px; }
  kn-query-filter li[knFilterItem]:first-child {
    padding-top: 0; }

kn-query-filter .filter-group .filter-name, kn-query-filter .filter-group .coalescing-operator {
  width: 225px; }

kn-query-filter .filter-group .coalescing-operator {
  width: 190px; }

kn-query-filter .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 205px; }

kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 170px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 185px; }

kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 150px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 165px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 130px; }

kn-query-filter .filter-name input {
  font-weight: bold; }

kn-query-filter .filter-operator {
  width: 150px; }
  kn-query-filter .filter-operator kn-input input {
    text-align: center; }
  kn-query-filter .filter-operator > * {
    width: 100%; }

kn-query-filter .filter-value {
  flex: 1; }
  kn-query-filter .filter-value .presenter {
    flex: 1;
    display: flex;
    align-items: center; }
    kn-query-filter .filter-value .presenter kn-input, kn-query-filter .filter-value .presenter kn-select {
      flex: 1; }
    kn-query-filter .filter-value .presenter kn-date-input span.required {
      display: none; }
    kn-query-filter .filter-value .presenter > span {
      margin: 0 10px; }
      kn-query-filter .filter-value .presenter > span:first-child {
        margin-left: 0; }

kn-query-filter .filter-actions {
  width: 70px;
  text-align: right; }

kn-query-filter .filter-actions button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  height: 34px; }
  kn-query-filter .filter-actions button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  kn-query-filter .filter-actions button:hover, kn-query-filter .filter-actions button:focus {
    opacity: 1;
    text-decoration: none; }
  kn-query-filter .filter-actions button:active {
    opacity: 1; }
  kn-query-filter .filter-actions button[disabled] {
    opacity: 0.3;
    background: none; }

kn-query-filter .footer {
  padding: 20px;
  text-align: right;
  display: flex; }
  kn-query-filter .footer button {
    padding: 5px 10px;
    margin-left: 20px;
    border-radius: 3px;
    border: none;
    height: 30px;
    text-transform: uppercase; }
  kn-query-filter .footer .left {
    text-align: left;
    flex: 1; }
    kn-query-filter .footer .left button {
      margin-left: 0;
      margin-right: 20px; }

kn-query-filter .filter-placeholder {
  width: 400px;
  margin: 30px auto 50px auto;
  text-align: center; }
  kn-query-filter .filter-placeholder span.placeholder {
    display: block; }
  kn-query-filter .filter-placeholder > i.material-icons {
    font-size: 150px; }
  kn-query-filter .filter-placeholder p {
    margin-top: -10px;
    margin-bottom: 50px;
    font-size: 24px;
    display: none; }
  kn-query-filter .filter-placeholder kn-select .kn-select-container {
    padding: 7px;
    transition: 0.3s all ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:hover {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
      transition: none;
      box-shadow: none; }

kn-radio input[type='radio'] + .kn-radio-box::before {
  border-radius: 50%; }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border-radius: 50%;
  transition: 0.3s border-color ease; }

kn-radio .kn-radio-mark {
  transition: 0.2s border linear; }

kn-radio .kn-radio-box, kn-radio label {
  transition: 0.3s color ease; }

kn-select label, kn-select [kn-hint] {
  font-size: 14px; }

kn-select [kn-prefix], kn-select [kn-suffix] {
  display: flex; }

kn-select .kn-select-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-select .kn-select-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select .kn-select-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select.disabled .kn-select-container, kn-select.readonly .kn-select-container {
  border-bottom-style: dotted; }

kn-select.focused .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.focused .kn-select-underline::before, kn-select.focused .kn-select-underline::after {
  z-index: 111; }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.ng-touched.ng-pending .kn-select-underline::before, kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::after {
  top: -4px;
  height: 5px; }

kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-select .kn-select-header {
  line-height: 24px; }
  kn-select .kn-select-header > * {
    min-height: 24px; }
  kn-select .kn-select-header .separator {
    padding-right: 0.3em; }
  kn-select .kn-select-header .option {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

kn-select.disabled .kn-select-header {
  pointer-events: none; }

kn-spinner {
  position: absolute;
  margin: 0 auto;
  width: 36px; }
  kn-spinner:before {
    content: '';
    display: block;
    padding-top: 100%; }
  kn-spinner .circular {
    animation: strio-spinner-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  kn-spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: strio-spinner-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: square;
    stroke-width: 8px; }

@keyframes strio-spinner-rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes strio-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

kn-tabs.boxlist div.tabs-viewport {
  margin-top: 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }

kn-tabs.boxlist div.tabs-labels ul {
  width: 100%; }

kn-tabs.boxlist div.tabs-labels li a {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  width: 170px;
  height: 150px !important;
  transition: 0.3s color ease; }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }

kn-tabs.boxlist div.tabs-labels li.active a {
  border-radius: 5px; }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    position: absolute;
    left: calc(50% - 15px);
    bottom: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; }

kn-tabs.notebook div.tabs-labels li a {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  transition: 0.3s color ease; }
  kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }
  kn-tabs.notebook div.tabs-labels li a::before {
    content: '';
    display: block;
    position: absolute;
    width: 80%;
    height: 4px;
    left: 10%;
    top: -10px;
    opacity: 0;
    z-index: 10;
    transform: scale(0.8);
    transition: 0.3s all ease; }
  kn-tabs.notebook div.tabs-labels li a:hover::before, kn-tabs.notebook div.tabs-labels li a:focus::before {
    opacity: 1;
    top: 0;
    transform: scale(1); }

kn-tabs.notebook div.tabs-labels li.active a::before {
  opacity: 1;
  top: 0;
  transform: scale(1);
  width: 100%;
  left: 0; }

kn-textarea label, kn-textarea [kn-hint] {
  font-size: 14px; }

kn-textarea [kn-prefix], kn-textarea [kn-suffix] {
  display: flex; }

kn-textarea .kn-textarea-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-textarea .kn-textarea-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea .kn-textarea-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea.disabled .kn-textarea-container, kn-textarea.readonly .kn-textarea-container {
  border-bottom-style: dotted; }

kn-textarea.focused .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.focused .kn-textarea-underline::before, kn-textarea.focused .kn-textarea-underline::after {
  z-index: 111; }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before, kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::after {
  top: -4px;
  height: 5px; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-textarea {
  height: 100%;
  display: flex !important;
  flex-direction: column; }
  kn-textarea .kn-textarea-container {
    flex: 1; }
  kn-textarea textarea {
    height: calc(100% - 20px);
    resize: none; }

kn-timeline {
  position: relative; }
  kn-timeline::before, kn-timeline::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none; }
  kn-timeline::before {
    left: 0; }
  kn-timeline::after {
    right: 0; }
  kn-timeline .time-viewport {
    overflow: hidden; }
  kn-timeline .time-container {
    display: flex;
    margin: 100px 0 50px 0; }
    kn-timeline .time-container > span {
      flex-shrink: 0; }
  kn-timeline .time-segment {
    font-size: 0;
    height: 3px;
    width: calc(50% - 2px); }
  kn-timeline .time-mark {
    position: relative;
    width: 3px;
    height: 3px; }
    kn-timeline .time-mark a {
      position: absolute;
      width: 13px;
      height: 13px;
      top: -5px;
      left: -5px;
      border-radius: 50%;
      z-index: 1;
      outline: none; }
      kn-timeline .time-mark a.selected::after {
        content: '';
        position: absolute;
        display: block;
        width: 23px;
        height: 23px;
        left: -7px;
        top: -7px;
        border-radius: 50%; }
      kn-timeline .time-mark a::before {
        content: '';
        position: absolute;
        display: block;
        width: 53px;
        height: 53px;
        top: -20px;
        left: -20px;
        border-radius: 50%;
        z-index: -1; }
      kn-timeline .time-mark a .date {
        position: absolute;
        display: block;
        white-space: nowrap;
        text-align: center;
        left: 7px;
        top: -68px;
        font-weight: bold;
        transform: translateX(-50%); }
      kn-timeline .time-mark a .year {
        display: block;
        font-weight: normal; }
    kn-timeline .time-mark.pin a {
      width: 9px;
      height: 9px;
      top: -7px;
      left: -7px; }
      kn-timeline .time-mark.pin a::before {
        top: -22px;
        left: -22px; }
      kn-timeline .time-mark.pin a.selected::after {
        left: -9px;
        top: -9px; }
      kn-timeline .time-mark.pin a .date {
        left: 5px;
        top: -70px; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
    kn-timeline .time-mark.today::before {
      content: '';
      position: absolute;
      display: block;
      width: 1px;
      height: 63px;
      left: 1px;
      top: -30px;
      opacity: 0.5; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
  kn-timeline .time-mark.today a .date {
    top: -60px; }
  kn-timeline kn-datepicker .viewport {
    top: -20px; }
  kn-timeline kn-datepicker.calendar-mark .viewport {
    top: 5px; }

kn-toast > div {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  left: 50px;
  bottom: 50px;
  z-index: 1000;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave {
    transition: 0.3s all ease; }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave.kn-leave-active {
    left: 35px;
    opacity: 0; }
  kn-toast > div.kn-leave, kn-toast > div.kn-enter.kn-enter-active {
    left: 50px;
    opacity: 1; }
  kn-toast > div .content {
    display: flex;
    flex-direction: column;
    padding: 15px 20px; }
    kn-toast > div .content span, kn-toast > div .content strong {
      display: block; }
  kn-toast > div a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-align: center; }
    kn-toast > div a, kn-toast > div a:hover, kn-toast > div a:focus, kn-toast > div a:active {
      text-decoration: none; }

kn-audit-display {
  color: rgba(0, 0, 0, 0.5); }
  kn-audit-display strong {
    background-color: rgba(0, 0, 0, 0.07); }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox input[type='checkbox']:focus + .kn-checkbox-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked):hover + .kn-checkbox-box::after, kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked) + .kn-checkbox-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-checkbox.disabled input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled input[type='checkbox']:not(:checked) + .kn-checkbox-box::after {
  background-color: transparent !important; }

kn-checkbox.disabled.indeterminate .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled label, kn-checkbox.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox.ng-touched.ng-invalid .kn-checkbox-box::after {
  border-color: #c04060; }

kn-checkbox.ng-touched.ng-invalid input[type='checkbox']:checked + .kn-checkbox-box::after, kn-checkbox.ng-touched.ng-invalid.indeterminate .kn-checkbox-box::after {
  background-color: #c04060; }

app-print-template-edit {
  background-color: #ffffff; }
  app-print-template-edit > kn-resizable-container .preview {
    border-left: 1px solid rgba(0, 0, 0, 0.15); }
  app-print-template-edit .preview div.tabs-viewport {
    background-color: #f9f7f6; }
  app-print-template-edit kn-codemirror {
    background-color: #ffffff; }
  app-print-template-edit kn-tabs a.sidepanel {
    color: #000000;
    color: rgba(0, 0, 0, 0.8); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):hover, app-print-template-edit kn-tabs a.sidepanel:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-tab.home i.banner {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-tab .no-print-context-placeholder {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-activator {
    color: #000000;
    color: #c04060; }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):hover, app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-menu.errors kn-menu-content {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.8); }

kn-roles-table .role-permissions table thead th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-roles-table .role-permissions table tbody.permissions-matrix td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); }

kn-roles-table .role-permissions table tbody.permissions-matrix tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

kn-roles-table .role-permissions .actions button {
  color: #000000; }
  kn-roles-table .role-permissions .actions button:not([disabled]):hover, kn-roles-table .role-permissions .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-roles-table .role-permissions .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-permission-actions-select kn-menu-content {
  background-color: #ffffff; }
  kn-permission-actions-select kn-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-user-edit table.user-roles tbody.user-roles-table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles tr.invalid td {
  background-color: rgba(192, 64, 96, 0.15); }

kn-user-edit table.user-roles thead tr:last-child td {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-user-edit table.user-roles tbody.user-roles-table tr td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles td.actions button {
  color: #000000; }
  kn-user-edit table.user-roles td.actions button:not([disabled]):hover, kn-user-edit table.user-roles td.actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-user-edit table.user-roles td.actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-control-messages > div {
  color: #c04060; }

app-database-manage kn-tabs .tab-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

app-database-manage kn-tabs a i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

app-database-manage kn-tabs li.active a i.material-icons, app-database-manage kn-tabs a:hover i.material-icons, app-database-manage kn-tabs a:focus i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

app-database-manage kn-tabs kn-tab .select-database {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15); }

app-database-manage kn-tabs kn-tab.kn-drag-over::after {
  background-color: rgba(255, 240, 216, 0.3);
  border: 1px dashed #ff9800; }

kn-datepicker .viewport {
  background-color: #ffffff; }
  kn-datepicker .viewport::before {
    border-bottom: 10px solid #f2f2f2; }
  kn-datepicker .viewport .header {
    background-color: #f2f2f2; }

kn-datepicker kn-date-header > *, kn-datepicker kn-time-header > * {
  color: #000000; }

kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a:hover {
  background-color: rgba(0, 0, 0, 0.1); }

kn-datepicker kn-date-header a:active, kn-datepicker kn-time-header a:active {
  background-color: rgba(0, 0, 0, 0.2); }

kn-datepicker kn-date-header a {
  color: rgba(0, 0, 0, 0.5); }

kn-datepicker kn-month-view th {
  color: rgba(0, 0, 0, 0.35); }

kn-datepicker kn-month-view td a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker kn-month-view td a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker kn-month-view td a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container .center {
  background-color: gray; }

kn-datepicker .picker-relative-container .gauge {
  background-color: rgba(0, 0, 0, 0.15); }

kn-datepicker .picker-relative-container li::before {
  background-color: #ffffff; }

kn-datepicker .picker-relative-container li.minor a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li.minor a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li.minor a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.minor::before {
  background-color: rgba(0, 0, 0, 0.8); }

kn-datepicker .picker-relative-container li:not(.minor) a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li:not(.minor) a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li:not(.minor) a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.major::before {
  background-color: #000000; }

kn-datepicker .period-selector a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .period-selector a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .period-selector a.selected {
    background-color: #805848;
    color: #ffffff; }

.kn-ripple-element {
  background-color: rgba(0, 0, 0, 0.05); }

kn-export-button kn-menu.expanded {
  background-color: #0b7244; }

kn-export-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-export-button kn-menu kn-menu-activator, kn-export-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

button.form-button, .form-input button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  button.form-button.danger, .form-input button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  button.form-button[disabled], .form-input button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  button.form-button::after, .form-input button::after {
    background-color: white; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    button.form-button:not([disabled]):hover.danger, button.form-button:not([disabled]):focus.danger, .form-input button:not([disabled]):hover.danger, .form-input button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    button.form-button:not([disabled]):active.danger, .form-input button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-container.heading::before, .form-container .form-loader-bar::before {
  background-color: rgba(128, 88, 72, 0.3); }

.form-container.heading::after, .form-container .form-loader-bar::after {
  background-color: #805848; }

.form-container.heading {
  background-color: #ffffff; }

.form-container .form-back {
  color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:hover, .form-container .form-back:focus {
    color: #ffffff; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      background-color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:active::after {
    background-color: rgba(0, 0, 0, 0.4); }

.form-actions-info {
  color: #c07000; }

.form-buttons button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  .form-buttons button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  .form-buttons button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  .form-buttons button::after {
    background-color: white; }
  .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    .form-buttons button:not([disabled]):hover.danger, .form-buttons button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  .form-buttons button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    .form-buttons button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-errors li {
  background-color: rgba(192, 64, 96, 0.2); }
  .form-errors li strong {
    background-color: #c04060; }

.form-layout .info-bar {
  color: rgba(255, 255, 255, 0.7);
  background-color: #10a060; }
  .form-layout .info-bar.error {
    background-color: #c04060; }
  .form-layout .info-bar strong {
    color: #ffffff; }

.form-layout .form-box {
  background-color: #ffffff; }
  .form-layout .form-box .title {
    color: #009688; }
    .form-layout .form-box .title .side-action {
      color: #000000; }
      .form-layout .form-box .title .side-action:not([disabled]):hover, .form-layout .form-box .title .side-action:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .title .side-action:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .container + .container {
    border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .form-layout .form-box .container .side-actions {
    border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .container .side-actions a {
      color: #000000; }
      .form-layout .form-box .container .side-actions a:not([disabled]):hover, .form-layout .form-box .container .side-actions a:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .container .side-actions a:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .alt {
    background-color: rgba(224, 192, 0, 0.1);
    border-top: 1px solid rgba(224, 192, 0, 0.3); }
  .form-layout .form-box .alt-actions a {
    color: #000000; }
    .form-layout .form-box .alt-actions a:not([disabled]):hover, .form-layout .form-box .alt-actions a:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .alt-actions a:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }

.form-layout .form-inline-box .title {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid rgba(0, 0, 0, 0.15) !important; }

.form-layout .form-inline-box .container {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(224, 192, 0, 0.1); }
  .form-layout .form-inline-box .container + .container {
    border-top: none; }

.form-layout .popover .side-action {
  color: #000000; }
  .form-layout .popover .side-action:not([disabled]):hover, .form-layout .popover .side-action:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-layout .popover .side-action:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-form-layout-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    color: #000000; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-form-layout-menu-content::before {
    border-bottom: 10px solid #ffffff; }

.form-slots-table th {
  color: rgba(0, 0, 0, 0.5); }
  .form-slots-table th::before {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-slots-table th.disabled::before {
    border: 1px solid rgba(0, 0, 0, 0.1); }

.form-slots-table caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

.grid-panel {
  background-color: #10a060; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    color: rgba(255, 255, 255, 0.7); }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-preset kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu kn-menu-activator, kn-grid-preset kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
  transition: color 0.5s ease; }
  kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-activator > div span {
  color: rgba(255, 255, 255, 0.5); }
  kn-grid-preset kn-menu-activator > div span.template-name {
    color: #ffd088; }

kn-grid-preset kn-menu-activator > div input {
  color: #ffffff; }
  kn-grid-preset kn-menu-activator > div input::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-activator > div a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content li:not(.user-select) span:hover, kn-grid-preset kn-menu-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-grid-preset kn-menu-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-grid-preset kn-menu-content kn-select kn-options-container, kn-grid-preset kn-menu-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span:hover, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-options-container, kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-grid-query-filter kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-query-filter kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-query-filter kn-menu kn-menu-activator, kn-grid-query-filter kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
    border-bottom: 10px solid #ffffff; }

kn-attached-portal .kn-grid-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-grid-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-grid-query-filter kn-menu kn-menu-activator {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-query-filter kn-menu kn-menu-activator em {
    color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-activator > * {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease; }
    kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator > span.template-name {
    color: #ffd088; }

kn-attached-portal .kn-menu-content.kn-grid-query-content {
  left: calc(50% - 900px);
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-menu-content.kn-grid-query-content::before {
    left: calc(50% + 375px); }

kn-grid-reset {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-reset.expanded {
    background-color: #0b7244; }
  kn-grid-reset:not(.expanded) kn-menu-activator:focus, kn-grid-reset kn-menu-activator:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset kn-menu-activator, kn-grid-reset kn-menu-activator i {
    color: rgba(255, 255, 255, 0.8); }
  kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i {
    color: #ffffff; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-button-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content) li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-attached-portal .kn-grid-button-content li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-attached-portal .kn-grid-button-content li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset > *:not(.disabled), kn-grid-reset a:not(.disabled) {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus, kn-grid-reset a:not(.disabled):hover, kn-grid-reset a:not(.disabled):focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-reset > *.disabled, kn-grid-reset a.disabled {
    color: rgba(255, 255, 255, 0.3); }

kn-grid-search input[type='search'] {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff; }
  kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
    background-color: rgba(0, 0, 0, 0.4); }
  kn-grid-search input[type='search']::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-search::after {
  background-color: #ffffff; }

header.liner .database-menu::before, header.liner .database-menu::after {
  background-color: rgba(255, 255, 255, 0.1); }

header.liner .database-menu kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  header.liner .database-menu kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  header.liner .database-menu kn-database-selector .filter input {
    color: #ffffff; }
    header.liner .database-menu kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

header.liner .database-menu kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

header.liner .database-menu kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  header.liner .database-menu kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

header.liner .database-menu kn-database-selector ul li strong {
  color: white; }

header.liner .database-menu kn-database-selector ul li span.uid {
  color: #b39b91; }

kn-attached-portal kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  kn-attached-portal kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  kn-attached-portal kn-database-selector .filter input {
    color: #ffffff; }
    kn-attached-portal kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

kn-attached-portal kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

kn-attached-portal kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  kn-attached-portal kn-database-selector ul li a.active::before, kn-attached-portal kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

kn-attached-portal kn-database-selector ul li strong {
  color: white; }

kn-attached-portal kn-database-selector ul li span.uid {
  color: #b39b91; }

header.liner .database-menu kn-menu-activator::after {
  background-color: rgba(255, 255, 255, 0.2); }

header.liner .database-menu kn-menu-activator strong {
  color: #ffffff; }

header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  header.liner nav > ul > li > a.router-link-active, header.liner nav > ul > li > kn-menu-activator.router-link-active, header.liner kn-navbar > ul > li > a.router-link-active, header.liner kn-navbar > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  header.liner nav > ul > li > a:hover, header.liner nav > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  header.liner nav > ul > li > a:not(.router-link-active):focus, header.liner nav > ul > li > kn-menu-activator:not(.router-link-active):focus, header.liner kn-navbar > ul > li > a:not(.router-link-active):focus, header.liner kn-navbar > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

kn-attached-portal .kn-navbar-expansion > ul > li > a, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-navbar-expansion > ul > li > a.router-link-active, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:hover, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:not(.router-link-active):focus, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

header.liner {
  background-color: #805848;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4) 80px); }
  header.liner .logo:hover, header.liner .logo:focus {
    background-color: rgba(255, 255, 255, 0.05); }
  header.liner button.main-action {
    color: white;
    background-color: rgba(128, 88, 72, 0.9);
    background-color: #10a060; }
    header.liner button.main-action.danger {
      background-color: rgba(192, 64, 96, 0.9); }
    header.liner button.main-action[disabled] {
      background-color: rgba(160, 160, 160, 0.5); }
    header.liner button.main-action::after {
      background-color: white; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      background-color: rgba(128, 88, 72, 0.7); }
      header.liner button.main-action:not([disabled]):hover.danger, header.liner button.main-action:not([disabled]):focus.danger {
        background-color: rgba(192, 64, 96, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      background-color: rgba(128, 88, 72, 0.8); }
      header.liner button.main-action:not([disabled]):active.danger {
        background-color: rgba(192, 64, 96, 0.8); }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus, header.liner button.main-action:not([disabled]):active {
      background-color: #58bd90; }
    header.liner button.main-action:not([disabled]):active {
      background-color: #40b380; }
  header.liner kn-menu {
    color: rgba(255, 255, 255, 0.5);
    z-index: 10; }
    header.liner kn-menu.expanded {
      background-color: #805848; }
      header.liner kn-menu.expanded kn-menu-content {
        border-top: 1px solid rgba(255, 255, 255, 0.1); }
    header.liner kn-menu kn-menu-activator:hover, header.liner kn-menu kn-menu-activator:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }
    header.liner kn-menu kn-menu-content {
      background-color: #805848; }
      header.liner kn-menu kn-menu-content a {
        color: rgba(255, 255, 255, 0.5); }
        header.liner kn-menu kn-menu-content a:hover {
          background-color: rgba(255, 255, 255, 0.1);
          color: #ffffff; }

kn-attached-portal .header-liner.kn-menu-content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #805848; }
  kn-attached-portal .header-liner.kn-menu-content a {
    color: rgba(255, 255, 255, 0.5); }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }

header.liner .user-menu kn-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .user-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-input label, kn-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-input label .required {
  color: #c04060; }

kn-input .kn-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-input:not(.disabled):not(.focused) .kn-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-input.focused .kn-input-container {
  border-color: transparent; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  background-color: #805848; }

kn-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  background-color: #c04060; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::before {
  background-color: #ecc6cf; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::after {
  background-color: #c04060; }

kn-input.ng-touched.ng-pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::before {
  background-color: #d9cdc8; }

kn-input input {
  color: #000000; }

kn-input.disabled input {
  color: rgba(0, 0, 0, 0.4); }

kn-input input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input label, kn-date-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-date-input label .required {
  color: #c04060; }

kn-date-input .kn-date-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-date-input:not(.disabled):not(.focused) .kn-date-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-date-input.focused .kn-date-input-container {
  border-color: transparent; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  background-color: #805848; }

kn-date-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::before {
  background-color: #ecc6cf; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::after {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::before {
  background-color: #d9cdc8; }

kn-date-input date-input {
  color: #000000; }

kn-date-input.disabled date-input {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input date-input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input .input-button i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

kn-kcuni-settings p {
  color: rgba(0, 0, 0, 0.5); }
  kn-kcuni-settings p strong {
    color: rgba(0, 0, 0, 0.8); }

kn-kcuni-settings .settings button {
  color: #000000; }
  kn-kcuni-settings .settings button:not([disabled]):hover, kn-kcuni-settings .settings button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-kcuni-settings .settings button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-kcuni-settings .settings:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-kcuni-settings .message {
  color: #c04060;
  background-color: rgba(192, 64, 96, 0.2); }

.app-loading-screen p {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

html, body {
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.8); }

a {
  color: #8040a0; }

kn-input.ownership [kn-prefix] {
  color: #10a060; }

.flat-button {
  color: #000000; }
  .flat-button:not([disabled]):hover, .flat-button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

.flat-table thead td {
  border-bottom: 3px solid #cccccc; }

.flat-table tbody td {
  border-bottom: 1px solid #ebebeb; }

.flat-table tbody tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

.flat-table .actions button {
  color: #000000; }
  .flat-table .actions button:not([disabled]):hover, .flat-table .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-table .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-modal.confirmation-dialog .overlay {
  background-color: rgba(48, 48, 48, 0.9); }
  kn-modal.confirmation-dialog .overlay .container {
    background-color: rgba(40, 40, 40, 0.7); }
  kn-modal.confirmation-dialog .overlay .content {
    color: white; }
  kn-modal.confirmation-dialog .overlay .buttons {
    background-color: rgba(0, 0, 0, 0.2); }
    kn-modal.confirmation-dialog .overlay .buttons button {
      color: rgba(255, 255, 255, 0.5); }
      kn-modal.confirmation-dialog .overlay .buttons button.primary {
        color: rgba(64, 128, 255, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.primary::before {
          background-color: #4080ff; }
        kn-modal.confirmation-dialog .overlay .buttons button.primary:hover, kn-modal.confirmation-dialog .overlay .buttons button.primary:focus {
          background-color: rgba(64, 128, 255, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button.danger {
        color: rgba(255, 64, 72, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.danger::before {
          background-color: #ff4048; }
        kn-modal.confirmation-dialog .overlay .buttons button.danger:hover, kn-modal.confirmation-dialog .overlay .buttons button.danger:focus {
          background-color: rgba(255, 64, 72, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        background-color: white; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        background-color: rgba(255, 255, 255, 0.7);
        color: rgba(0, 0, 0, 0.8); }

kn-options-container {
  background-color: #ffffff; }
  kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-optgroup > strong {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

kn-option.marked {
  background-color: rgba(0, 0, 0, 0.07); }

kn-option:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-option.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-option .kn-option-selector {
  color: rgba(0, 0, 0, 0.3); }

kn-option.selected .kn-option-selector {
  color: #805848; }

kn-attached-portal .kn-options-container {
  background-color: #ffffff; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-attached-portal .kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-attached-portal .kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-attached-portal .kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-ownership-display {
  color: rgba(0, 0, 0, 0.3); }
  kn-ownership-display > span {
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.1); }

kn-print-button kn-menu.expanded {
  background-color: #0b7244; }

kn-print-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-print-button kn-menu kn-menu-activator, kn-print-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-query-filter .query-filter > div[knFilterGroup] {
  color: rgba(0, 0, 0, 0.8); }

kn-query-filter .filter-group .new-filter-actions button {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .filter-group {
  border-left: 10px solid rgba(0, 0, 0, 0.1); }

kn-query-filter li.boolean-operator {
  background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter li.boolean-operator span {
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff; }

kn-query-filter .filter-name [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-operator kn-input [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-value .presenter > span {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-actions button {
  color: #000000; }
  kn-query-filter .filter-actions button:not([disabled]):hover, kn-query-filter .filter-actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter .filter-actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-query-filter .footer {
  background-color: rgba(0, 0, 0, 0.05); }
  kn-query-filter .footer button {
    background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-placeholder > i.material-icons {
  color: rgba(0, 0, 0, 0.35); }

kn-query-filter .filter-placeholder kn-select .kn-select-container {
  border: 1px solid rgba(0, 0, 0, 0.3); }
  kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
    background-color: rgba(0, 0, 0, 0.05); }

kn-query-filter .filter-placeholder kn-select .placeholder {
  color: rgba(0, 0, 0, 0.8); }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-radio input[type='radio']:checked + .kn-radio-box::after {
  border-color: #805848; }

kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border: 7px solid #805848; }

kn-radio input[type='radio']:focus + .kn-radio-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-radio:not(.disabled) input[type='radio']:not(:checked):hover + .kn-radio-box::after, kn-radio:not(.disabled) input[type='radio']:not(:checked) + .kn-radio-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-radio.disabled label, kn-radio.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-radio.disabled input[type='radio']:not(:checked) + .kn-radio-box::after, kn-radio.readonly input[type='radio']:not(:checked) + .kn-radio-box::after {
  background-color: transparent !important; }

kn-radio.disabled input[type='radio'] + .kn-radio-box::after, kn-radio.disabled input[type='radio'] + .kn-radio-box .kn-radio-mark, kn-radio.readonly input[type='radio'] + .kn-radio-box::after, kn-radio.readonly input[type='radio'] + .kn-radio-box .kn-radio-mark {
  border-color: rgba(0, 0, 0, 0.1); }

kn-radio-group.ng-touched.ng-invalid kn-radio .kn-radio-box::after, kn-radio-group.ng-touched.ng-invalid kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border-color: #c04060; }

kn-select label, kn-select [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-select label .required {
  color: #c04060; }

kn-select .kn-select-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-select:not(.disabled):not(.focused) .kn-select-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-select.focused .kn-select-container {
  border-color: transparent; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  background-color: #805848; }

kn-select.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  background-color: #c04060; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::before {
  background-color: #ecc6cf; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::after {
  background-color: #c04060; }

kn-select.ng-touched.ng-pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::before {
  background-color: #d9cdc8; }

kn-select .placeholder {
  color: rgba(0, 0, 0, 0.35); }

.kn-select-dropdown {
  border-left: 1px solid rgba(0, 0, 0, 0.05); }

kn-spinner {
  animation-name: strio-spinner-color-6; }
  kn-spinner .path {
    animation: strio-spinner-dash 1.5s ease-in-out infinite, strio-spinner-color-6 6s ease-in-out infinite; }

@keyframes strio-spinner-color-6 {
  0%, 20% {
    stroke: rgba(128, 88, 72, 0.6); }
  40% {
    stroke: rgba(128, 88, 72, 0.7); }
  60% {
    stroke: rgba(128, 88, 72, 0.8); }
  80% {
    stroke: rgba(128, 88, 72, 0.9); }
  100% {
    stroke: #805848; } }

kn-tabs.boxlist div.tabs-viewport {
  background-color: #ffffff; }

kn-tabs.boxlist div.tabs-labels li a {
  color: rgba(0, 0, 0, 0.5); }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    color: rgba(0, 0, 0, 0.8); }

kn-tabs.boxlist div.tabs-labels li.active a {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8); }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    border-bottom: 15px solid #ffffff; }

kn-tabs.notebook div.tabs-labels {
  background-color: rgba(0, 0, 0, 0.08); }
  kn-tabs.notebook div.tabs-labels li a {
    color: #805848; }
    kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
      color: #000000; }
    kn-tabs.notebook div.tabs-labels li a::before {
      background-color: rgba(0, 0, 0, 0.3); }
  kn-tabs.notebook div.tabs-labels li.active a {
    background-color: rgba(255, 255, 255, 0.5); }
    kn-tabs.notebook div.tabs-labels li.active a::before {
      background-color: #805848; }

kn-textarea label, kn-textarea [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-textarea label .required {
  color: #c04060; }

kn-textarea .kn-textarea-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-textarea:not(.disabled):not(.focused) .kn-textarea-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-textarea.focused .kn-textarea-container {
  border-color: transparent; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  background-color: #805848; }

kn-textarea.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::before {
  background-color: #ecc6cf; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::after {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::before {
  background-color: #d9cdc8; }

kn-textarea textarea {
  color: #000000; }

kn-textarea.disabled textarea {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea textarea::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-timeline::before {
  background: linear-gradient(90deg, #f0f0f0, transparent); }

kn-timeline::after {
  background: linear-gradient(270deg, #f0f0f0, transparent); }

kn-timeline .time-segment {
  background-color: #1860d8; }
  kn-timeline .time-segment.future {
    background-color: #8028d8; }
  kn-timeline .time-segment.selected {
    background-color: #0dc22b; }

kn-timeline .time-mark > .calendar-mark {
  position: relative;
  top: 25px;
  left: -5px; }
  kn-timeline .time-mark > .calendar-mark.today {
    left: -6px; }
  kn-timeline .time-mark > .calendar-mark.pin {
    left: -3px; }

kn-timeline .time-mark > a {
  background-color: #1860d8; }
  kn-timeline .time-mark > a.selected {
    background-color: #1860d8; }
    kn-timeline .time-mark > a.selected .date {
      color: rgba(0, 0, 0, 0.8); }
    kn-timeline .time-mark > a.selected::after {
      border: 2px solid #1860d8; }
  kn-timeline .time-mark > a:focus::before {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-timeline .time-mark > a .date {
    color: rgba(0, 0, 0, 0.5); }

kn-timeline .time-mark.pin > a {
  background-color: white;
  border: 4px solid #1860d8; }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.today::before {
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.8), transparent); }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.future > a {
  background-color: #8028d8; }
  kn-timeline .time-mark.future > a.selected::after {
    border-color: #8028d8; }

kn-timeline .time-mark.future.pin > a {
  background-color: white;
  border-color: #8028d8; }

kn-timeline .time-mark.today > a {
  background-color: #303030; }
  kn-timeline .time-mark.today > a.selected::after {
    border-color: #303030; }
  kn-timeline .time-mark.today > a .date {
    top: -60px; }

kn-timeline .time-mark.today.pin > a {
  background-color: white;
  border-color: #303030; }

kn-toast > div {
  background-color: rgba(0, 0, 0, 0.75);
  color: white; }
  kn-toast > div a {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-left: 1px solid rgba(255, 255, 255, 0.15); }
    kn-toast > div a:hover {
      background-color: rgba(0, 0, 0, 0.5); }
    kn-toast > div a:active {
      background-color: black; }

app-maintenances-view td.tool-life-10, app-tools-view td.tool-life-10 {
  background-color: rgba(200, 231, 104, 0.5); }

app-maintenances-view td.tool-life-20, app-tools-view td.tool-life-20 {
  background-color: rgba(192, 255, 0, 0.5); }

app-maintenances-view td.tool-life-30, app-tools-view td.tool-life-30 {
  background-color: rgba(202, 255, 0, 0.5); }

app-maintenances-view td.tool-life-40, app-tools-view td.tool-life-40 {
  background-color: rgba(213, 255, 0, 0.5); }

app-maintenances-view td.tool-life-50, app-tools-view td.tool-life-50 {
  background-color: rgba(224, 255, 0, 0.5); }

app-maintenances-view td.tool-life-60, app-tools-view td.tool-life-60 {
  background-color: rgba(239, 255, 0, 0.5); }

app-maintenances-view td.tool-life-70, app-tools-view td.tool-life-70 {
  background-color: rgba(255, 255, 0, 0.5); }

app-maintenances-view td.tool-life-80, app-tools-view td.tool-life-80 {
  background-color: rgba(255, 128, 0, 0.5); }

app-maintenances-view td.tool-life-90, app-tools-view td.tool-life-90 {
  background-color: rgba(255, 0, 0, 0.5); }

/*$bg-color: #283038;
$fg-color: #c0c0c0;

$red-shade-color: #f06060;
$yellow-shade-color: #f0d060;
$green-shade-color: #a0f060;
$emerald-shade-color: #60f080;
$cyan-shade-color: #60e0f0;
$blue-shade-color: #6080f0;
$purle-shade-color: #b060f0;
$pink-shade-color: #f060c8;

$primary-color: $purle-shade-color;
$secondary-color: $yellow-shade-color;*/
/*$foreground-color: rgb(255, 255, 255);
$background-color: rgb(56, 56, 64);
$text-color: rgba(255, 255, 255, 0.9);
$text-secondary-color: rgba(255, 255, 255, 0.6);
$reading-animation-color: rgb(0, 150, 136);

$primary-color: rgb(128, 88, 72);
$accent-color: rgb(16, 160, 96);
$warn-color: rgb(192, 64, 96);

$divider-color: rgba(255, 255, 255, 0.1);
$header-divider-color: rgba(255, 255, 255, 0.2);
$row-divider-color: rgba(255, 255, 255, 0.15);*/
.ct-series-a .ct-line {
  fill: none;
  stroke: #d70206; }

.ct-series-a .ct-point {
  stroke: #d70206; }

.ct-series-a .ct-area {
  fill: #d70206; }

.ct-series-b .ct-line {
  fill: none;
  stroke: #59922b; }

.ct-series-b .ct-point {
  stroke: #59922b; }

.ct-series-b .ct-area {
  fill: #59922b; }

.ct-series-c .ct-line {
  fill: none;
  stroke: #f4c63d; }

.ct-series-c .ct-point {
  stroke: #f4c63d; }

.ct-series-c .ct-area {
  fill: #f4c63d; }

.ct-series-d .ct-line {
  fill: none;
  stroke: #6b0392; }

.ct-series-d .ct-point {
  stroke: #6b0392; }

.ct-series-d .ct-area {
  fill: #6b0392; }

.ct-series-e .ct-line {
  fill: none;
  stroke: #ee4e43; }

.ct-series-e .ct-point {
  stroke: #ee4e43; }

.ct-series-e .ct-area {
  fill: #ee4e43; }

.ct-series-f .ct-line {
  fill: none;
  stroke: #453d3f; }

.ct-series-f .ct-point {
  stroke: #453d3f; }

.ct-series-f .ct-area {
  fill: #453d3f; }

.ct-series-g .ct-line {
  fill: none;
  stroke: #d17905; }

.ct-series-g .ct-point {
  stroke: #d17905; }

.ct-series-g .ct-area {
  fill: #d17905; }

.ct-series-h .ct-line {
  fill: none;
  stroke: #0544d3; }

.ct-series-h .ct-point {
  stroke: #0544d3; }

.ct-series-h .ct-area {
  fill: #0544d3; }

.ct-series-i .ct-line {
  fill: none;
  stroke: #df7068; }

.ct-series-i .ct-point {
  stroke: #df7068; }

.ct-series-i .ct-area {
  fill: #df7068; }

.ct-series-j .ct-line {
  fill: none;
  stroke: #b2c326; }

.ct-series-j .ct-point {
  stroke: #b2c326; }

.ct-series-j .ct-area {
  fill: #b2c326; }

.ct-series-k .ct-line {
  fill: none;
  stroke: #eacf7d; }

.ct-series-k .ct-point {
  stroke: #eacf7d; }

.ct-series-k .ct-area {
  fill: #eacf7d; }

.ct-series-l .ct-line {
  fill: none;
  stroke: #a748ca; }

.ct-series-l .ct-point {
  stroke: #a748ca; }

.ct-series-l .ct-area {
  fill: #a748ca; }

.ct-series-m .ct-line {
  fill: none;
  stroke: #86797d; }

.ct-series-m .ct-point {
  stroke: #86797d; }

.ct-series-m .ct-area {
  fill: #86797d; }

.ct-series-n .ct-line {
  fill: none;
  stroke: #6188e2; }

.ct-series-n .ct-point {
  stroke: #6188e2; }

.ct-series-n .ct-area {
  fill: #6188e2; }

.ct-series-o .ct-line {
  fill: none;
  stroke: #dda458; }

.ct-series-o .ct-point {
  stroke: #dda458; }

.ct-series-o .ct-area {
  fill: #dda458; }

.ct-weekend {
  opacity: 0.05; }

.graph-legend {
  display: flex;
  align-items: center; }
  .graph-legend ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .graph-legend li {
    display: flex;
    align-items: center;
    margin: 10px 0; }
    .graph-legend li::before {
      content: '';
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 10px; }
  .graph-legend li:nth-child(1)::before {
    background-color: #d70206; }
  .graph-legend li:nth-child(2)::before {
    background-color: #59922b; }
  .graph-legend li:nth-child(3)::before {
    background-color: #f4c63d; }
  .graph-legend li:nth-child(4)::before {
    background-color: #6b0392; }
  .graph-legend li:nth-child(5)::before {
    background-color: #ee4e43; }
  .graph-legend li:nth-child(6)::before {
    background-color: #453d3f; }
  .graph-legend li:nth-child(7)::before {
    background-color: #d17905; }
  .graph-legend li:nth-child(8)::before {
    background-color: #0544d3; }
  .graph-legend li:nth-child(9)::before {
    background-color: #df7068; }
  .graph-legend li:nth-child(10)::before {
    background-color: #b2c326; }
  .graph-legend li:nth-child(11)::before {
    background-color: #eacf7d; }
  .graph-legend li:nth-child(12)::before {
    background-color: #a748ca; }
  .graph-legend li:nth-child(13)::before {
    background-color: #86797d; }
  .graph-legend li:nth-child(14)::before {
    background-color: #6188e2; }
  .graph-legend li:nth-child(15)::before {
    background-color: #dda458; }

.graph-containers > div, .graph-timemap > div {
  padding: 30px 0 0 0;
  height: 300px; }

.graph-containers .ct-label.ct-horizontal, .graph-timemap .ct-label.ct-horizontal {
  position: relative;
  transform: rotate(45deg);
  transform-origin: left top;
  width: 100px;
  left: 50%;
  justify-content: flex-start !important; }

kn-chartist[type='timemap'].heatmap .ct-series-a .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-b .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-c .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-d .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-e .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-f .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-g .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-h .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-i .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-j .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-k .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-l .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-m .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-n .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

kn-chartist[type='timemap'].heatmap .ct-series-o .ct-segment {
  fill: #009688;
  stroke: none;
  fill-opacity: 0.5; }

svg {
  transform: translateZ(0); }

.color-display {
  width: 30px;
  height: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  margin-right: 5px; }

.color-selector {
  display: flex;
  align-items: center;
  justify-content: center; }
  .color-selector .form-button {
    width: 35px;
    height: 35px;
    padding: 0;
    margin: 5px; }

.option span.note, .kn-option-content span.note {
  opacity: 0.5; }
  .option span.note:not(:empty)::before, .kn-option-content span.note:not(:empty)::before {
    content: ' — ';
    margin-left: 2px; }

.option span.color, .kn-option-content span.color {
  display: inline-block;
  width: 24px;
  height: 20px;
  margin-right: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.textarea-medium-height {
  min-height: 150px; }

.details-link {
  position: relative;
  top: -20px; }

.form-message {
  margin: 50px auto;
  max-width: 1200px;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c04060; }
  .form-message i {
    margin-right: 10px;
    font-size: 32px; }

kn-view-template-selector {
  display: flex;
  margin: 10px 0 20px 0; }
  kn-view-template-selector kn-input, kn-view-template-selector kn-select {
    flex: 1; }

kn-dynamic-subform .title {
  font-weight: bold; }

kn-dynamic-subform .subform-border-top {
  border-top: 2px solid rgba(0, 0, 0, 0.3);
  margin-top: 10px;
  padding-top: 10px; }

.kn-textarea-suffix .counter {
  color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 13px;
  font-weight: normal;
  font-style: italic; }

.row.highlight:hover {
  background-color: rgba(0, 0, 0, 0.1); }

@keyframes indeterminate {
  0% {
    left: 0%;
    right: 100%; }
  30% {
    left: 0%;
    right: 50%; }
  80% {
    left: 70%;
    right: 0%; }
  100% {
    left: 100%;
    right: 0%; } }

/*$bg-color: #283038;
$fg-color: #c0c0c0;

$red-shade-color: #f06060;
$yellow-shade-color: #f0d060;
$green-shade-color: #a0f060;
$emerald-shade-color: #60f080;
$cyan-shade-color: #60e0f0;
$blue-shade-color: #6080f0;
$purle-shade-color: #b060f0;
$pink-shade-color: #f060c8;

$primary-color: $purle-shade-color;
$secondary-color: $yellow-shade-color;*/
/*$foreground-color: rgb(255, 255, 255);
$background-color: rgb(56, 56, 64);
$text-color: rgba(255, 255, 255, 0.9);
$text-secondary-color: rgba(255, 255, 255, 0.6);
$reading-animation-color: rgb(0, 150, 136);

$primary-color: rgb(128, 88, 72);
$accent-color: rgb(16, 160, 96);
$warn-color: rgb(192, 64, 96);

$divider-color: rgba(255, 255, 255, 0.1);
$header-divider-color: rgba(255, 255, 255, 0.2);
$row-divider-color: rgba(255, 255, 255, 0.15);*/
kn-audit-display {
  white-space: nowrap;
  margin: 10px 5px; }
  kn-audit-display strong {
    padding: 0.1em 0.4em 0.2em;
    margin: 0 0.2em;
    border-radius: 0.5em;
    font-weight: 400; }

kn-checkbox .kn-checkbox-mark {
  opacity: 0; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::before {
  border-radius: 50%; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border-radius: 2px;
  transition: 0.3s all ease; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark-path {
  stroke-dashoffset: 0;
  stroke-dasharray: 25; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox .kn-checkbox-mark-path {
  stroke-dashoffset: 25;
  stroke-dasharray: 25;
  stroke-width: 2px;
  transition: 0.3s transform ease, 0.3s stroke-dashoffset ease;
  transform-origin: 50% 50%;
  stroke: white; }

kn-checkbox .kn-checkbox-box::after, kn-checkbox label {
  transition: 0.3s color ease; }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox.indeterminate .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox.indeterminate .kn-checkbox-mark-path {
  transform: rotate(45deg) translate(-2px, 0);
  stroke-dashoffset: 20 !important;
  stroke-dasharray: 14 !important; }

app-print-template-edit kn-codemirror {
  height: 100%;
  flex: 1; }

app-print-template-edit > kn-resizable-container {
  height: 100%; }
  app-print-template-edit > kn-resizable-container kn-draggable-handler.left {
    z-index: 2;
    height: 50px !important;
    top: calc(100% - 50px) !important; }
  app-print-template-edit > kn-resizable-container .preview iframe {
    width: 100%;
    height: 100%;
    border: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror {
    height: 100%;
    overflow: visible;
    background: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror-scroll {
    margin: 0;
    padding: 0;
    overflow: visible !important; }
  app-print-template-edit > kn-resizable-container .CodeMirror-sizer {
    border-right-width: 0 !important; }
  app-print-template-edit > kn-resizable-container .box {
    width: 100%;
    height: 100%; }

app-print-template-edit form {
  width: 100%;
  height: 100%; }

app-print-template-edit kn-tabs {
  flex-direction: column-reverse; }
  app-print-template-edit kn-tabs a.sidepanel {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 6px 0 0; }
    app-print-template-edit kn-tabs a.sidepanel i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    app-print-template-edit kn-tabs a.sidepanel:hover, app-print-template-edit kn-tabs a.sidepanel:focus {
      opacity: 1;
      text-decoration: none; }
    app-print-template-edit kn-tabs a.sidepanel:active {
      opacity: 1; }
    app-print-template-edit kn-tabs a.sidepanel[disabled] {
      opacity: 0.3;
      background: none; }
    app-print-template-edit kn-tabs a.sidepanel i {
      transition: transform 0.5s ease 0.3s; }
    app-print-template-edit kn-tabs a.sidepanel.active i {
      transform: rotate(180deg); }

app-print-template-edit kn-tab.active {
  display: flex;
  flex-direction: column;
  flex: 1; }

app-print-template-edit kn-tab.home .box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }

app-print-template-edit kn-tab.home .fields {
  width: 100%;
  max-width: 700px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home i.banner {
  font-size: 192px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home h1 {
  text-align: center;
  margin: 50px 0; }

app-print-template-edit kn-tab.home .form-container {
  width: 80%;
  height: 100%;
  margin: 50px auto; }

app-print-template-edit kn-tab.home .form-layout {
  display: flex;
  flex-direction: column;
  height: 100%; }

app-print-template-edit kn-tab .no-print-context-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder i.banner {
    font-size: 128px;
    margin: 0 auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder strong {
    font-family: 'Exo 2';
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin: 20px 0 50px 0; }
  app-print-template-edit kn-tab .no-print-context-placeholder button {
    text-align: center; }

app-print-template-edit kn-menu.errors kn-menu-activator {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  margin: 0 8px 0 0;
  opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  app-print-template-edit kn-menu.errors kn-menu-activator:hover, app-print-template-edit kn-menu.errors kn-menu-activator:focus {
    opacity: 1;
    text-decoration: none; }
  app-print-template-edit kn-menu.errors kn-menu-activator:active {
    opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator[disabled] {
    opacity: 0.3;
    background: none; }

app-print-template-edit kn-menu.errors kn-menu-content {
  position: absolute;
  right: 8px;
  bottom: 50px;
  max-width: 1000px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-content [hidden] {
    display: none; }
  app-print-template-edit kn-menu.errors kn-menu-content strong {
    display: block; }
  app-print-template-edit kn-menu.errors kn-menu-content pre {
    font-size: 14px;
    margin-bottom: 0; }

kn-roles-table .role-permissions {
  position: relative;
  margin: 0 10px 76px 10px; }
  kn-roles-table .role-permissions > .scrollable {
    overflow-x: auto;
    margin: 0 54px 0 220px; }
  kn-roles-table .role-permissions table {
    border-collapse: separate;
    border-spacing: 0; }
    kn-roles-table .role-permissions table thead th {
      position: relative;
      width: 54px;
      min-width: 54px;
      height: 270px;
      padding: 0; }
      kn-roles-table .role-permissions table thead th.permission:not(:nth-child(2))::before {
        content: '';
        left: 0;
        bottom: 10px;
        position: absolute;
        display: block;
        width: 1px;
        height: calc(100% - 20px); }
    kn-roles-table .role-permissions table tbody td {
      padding: 0;
      height: 54px; }
    kn-roles-table .role-permissions table tbody.permissions-matrix td kn-checkbox {
      justify-content: center; }
    kn-roles-table .role-permissions table tbody.add-new-input td {
      height: 0; }
    kn-roles-table .role-permissions table div.rotate {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 54px;
      bottom: 0;
      left: 100%;
      transform: rotate(270deg);
      transform-origin: 0 100%;
      text-align: left; }
    kn-roles-table .role-permissions table th.name, kn-roles-table .role-permissions table td.name {
      position: absolute;
      left: 0;
      width: 220px;
      text-align: center;
      vertical-align: middle; }
      kn-roles-table .role-permissions table th.name kn-input, kn-roles-table .role-permissions table td.name kn-input {
        margin: 10px; }
        kn-roles-table .role-permissions table th.name kn-input input, kn-roles-table .role-permissions table td.name kn-input input {
          font-weight: 700; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.name, kn-roles-table .role-permissions table td.permission span.description {
      display: block;
      white-space: nowrap;
      padding: 1px 10px; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table td.permission span.name {
      font-size: 16px;
      font-weight: bold; }
    kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.description {
      font-size: 14px;
      font-weight: 400;
      opacity: 0.7; }
    kn-roles-table .role-permissions table th.spacer, kn-roles-table .role-permissions table td.spacer {
      width: 100%;
      min-width: 0; }
    kn-roles-table .role-permissions table th.actions, kn-roles-table .role-permissions table td.actions {
      position: absolute;
      right: 0;
      width: 54px; }
  kn-roles-table .role-permissions .actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 10px;
    height: 34px; }
    kn-roles-table .role-permissions .actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-roles-table .role-permissions .actions button:hover, kn-roles-table .role-permissions .actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-roles-table .role-permissions .actions button:active {
      opacity: 1; }
    kn-roles-table .role-permissions .actions button[disabled] {
      opacity: 0.3;
      background: none; }

kn-permission-actions-select kn-menu-content {
  position: absolute;
  z-index: 100;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3));
  padding: 10px;
  border-radius: 5px;
  transform: translate(calc(-50% + 23px), 5px); }
  kn-permission-actions-select kn-menu-content > div {
    padding: 5px; }
    kn-permission-actions-select kn-menu-content > div kn-checkbox label {
      flex: 1; }
  kn-permission-actions-select kn-menu-content::before {
    position: absolute;
    left: calc(50% - 10px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

kn-user-edit table.user-roles {
  width: 100%;
  border-collapse: collapse;
  margin: 13px 0 10px 0; }
  kn-user-edit table.user-roles tbody tr {
    height: 40px; }
  kn-user-edit table.user-roles tbody td {
    transition: 0.3s background-color ease;
    padding: 10px 0 10px 10px; }
  kn-user-edit table.user-roles td.actions {
    text-align: right; }
  kn-user-edit table.user-roles thead, kn-user-edit table.user-roles td.user-role input {
    font-weight: bold; }
  kn-user-edit table.user-roles thead {
    text-align: center; }
    kn-user-edit table.user-roles thead tr:first-child {
      text-align: center; }
    kn-user-edit table.user-roles thead tr:last-child {
      height: auto; }
      kn-user-edit table.user-roles thead tr:last-child td {
        font-weight: 400;
        font-style: italic;
        opacity: 0.7;
        padding-bottom: 5px; }
        kn-user-edit table.user-roles thead tr:last-child td > div {
          display: flex; }
          kn-user-edit table.user-roles thead tr:last-child td > div > span {
            flex: 1; }
  kn-user-edit table.user-roles td.user-role {
    width: 200px; }
  kn-user-edit table.user-roles td.user-role-customer-branch {
    width: 250px; }
    kn-user-edit table.user-roles td.user-role-customer-branch > div {
      display: flex; }
      kn-user-edit table.user-roles td.user-role-customer-branch > div input {
        text-align: right;
        width: 100%; }
  kn-user-edit table.user-roles td.actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 10px;
    height: 34px; }
    kn-user-edit table.user-roles td.actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-user-edit table.user-roles td.actions button:hover, kn-user-edit table.user-roles td.actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-user-edit table.user-roles td.actions button:active {
      opacity: 1; }
    kn-user-edit table.user-roles td.actions button[disabled] {
      opacity: 0.3;
      background: none; }
  kn-user-edit table.user-roles td.actions button:first-child {
    margin-left: 0; }
  kn-user-edit table.user-roles td.actions button:last-child {
    margin-right: 0; }

kn-control-messages {
  position: relative;
  height: 15px; }
  kn-control-messages > div {
    position: absolute;
    display: block; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave {
      transition: 0.3s all ease; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave.kn-leave-active {
      top: -5px;
      opacity: 0; }
    kn-control-messages > div.kn-leave, kn-control-messages > div.kn-enter.kn-enter-active {
      top: 0;
      opacity: 1; }

app-database-manage kn-tabs {
  position: relative;
  padding-top: 50px;
  margin: 0 0 20px 0; }
  app-database-manage kn-tabs .tab-group {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 400; }
  app-database-manage kn-tabs a i.material-icons {
    font-size: 72px; }
  app-database-manage kn-tabs a strong {
    font-weight: 400; }
  app-database-manage kn-tabs kn-tab {
    position: relative;
    padding: 30px;
    justify-content: center;
    text-align: center; }
    app-database-manage kn-tabs kn-tab .actions {
      margin: 20px auto 0 auto; }
    app-database-manage kn-tabs kn-tab p.note {
      margin-top: 0;
      font-style: italic;
      opacity: 0.5; }
    app-database-manage kn-tabs kn-tab .select-database {
      margin: 20px auto;
      padding: 20px;
      width: 400px; }
    app-database-manage kn-tabs kn-tab::after {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
      transition: 0.3s all ease; }
    app-database-manage kn-tabs kn-tab.kn-drag-over::after {
      opacity: 1;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      left: 10px;
      top: 10px; }

kn-datagrid tr td.strong {
  font-weight: bold; }

kn-datagrid tr td.highlight {
  color: #802020; }

kn-datagrid tr td.note {
  color: gray;
  font-size: 0.8em; }

kn-datagrid tr td.overflow {
  overflow: visible; }

kn-datagrid kn-cell-renderer span.user-database-tag, kn-datagrid kn-cell-renderer span.user-role-tag {
  color: white;
  padding: 4px 7px;
  margin: 0 5px 0 0;
  border-radius: 2px; }

kn-datagrid kn-cell-renderer span.user-ownership {
  color: rgba(0, 0, 0, 0.3); }
  kn-datagrid kn-cell-renderer span.user-ownership > span {
    color: black;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin: 0 4px;
    border-radius: 2px; }

kn-datepicker .viewport {
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-datepicker .viewport::before {
    content: '';
    position: absolute;
    display: block;
    left: calc(50% - 10px);
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  kn-datepicker .viewport.kn-enter, kn-datepicker .viewport.kn-leave {
    transition: 0.3s opacity ease, 0.3s margin-top ease, 0.3s transform ease; }
    kn-datepicker .viewport.kn-enter kn-date-view, kn-datepicker .viewport.kn-enter kn-day-view, kn-datepicker .viewport.kn-enter kn-hour-view, kn-datepicker .viewport.kn-leave kn-date-view, kn-datepicker .viewport.kn-leave kn-day-view, kn-datepicker .viewport.kn-leave kn-hour-view {
      opacity: 1 !important;
      transform: none !important; }
  kn-datepicker .viewport.kn-enter {
    opacity: 0;
    margin-top: 10px; }
  kn-datepicker .viewport.kn-leave, kn-datepicker .viewport.kn-enter.kn-enter-active {
    opacity: 1;
    margin-top: 0; }
  kn-datepicker .viewport.kn-leave.kn-leave-active {
    opacity: 0;
    margin-top: 10px; }

kn-datepicker kn-date-header a, kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a, kn-datepicker kn-time-header a:hover {
  text-decoration: none; }

kn-datepicker kn-date-header a {
  text-align: center;
  font-weight: 900; }

kn-datepicker kn-time-header a {
  font-weight: 400;
  border-radius: 10%; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-hour-view.kn-enter, kn-datepicker kn-hour-view.kn-leave {
  transition: 0.3s opacity ease, 0.3s transform ease; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-hour-view.kn-enter {
  opacity: 0;
  transform: scale(0.7, 0.7); }

kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-date-view.kn-enter.kn-enter-active, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-day-view.kn-enter.kn-enter-active, kn-datepicker kn-hour-view.kn-leave, kn-datepicker kn-hour-view.kn-enter.kn-enter-active {
  opacity: 1;
  transform: scale(1, 1); }

kn-datepicker kn-date-view.kn-leave.kn-leave-active, kn-datepicker kn-day-view.kn-leave.kn-leave-active, kn-datepicker kn-hour-view.kn-leave.kn-leave-active {
  opacity: 0;
  transform: scale(1.4, 1.4); }

kn-datepicker kn-month-view.animated {
  transition: 0.3s transform ease; }

kn-datepicker kn-month-view th, kn-datepicker kn-month-view td {
  text-align: center;
  border: 1px solid transparent; }

kn-datepicker kn-month-view th {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase; }

kn-datepicker kn-month-view td a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker kn-month-view td a, kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:active, kn-datepicker kn-month-view td a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    outline: none; }

kn-datepicker .picker-relative-container {
  position: relative;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  margin: 22px; }
  kn-datepicker .picker-relative-container.format-12-hours {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px; }
  kn-datepicker .picker-relative-container .center {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    z-index: 1;
    border-radius: 50%; }
  kn-datepicker .picker-relative-container .gauge {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: 0 0; }
  kn-datepicker .picker-relative-container li {
    text-align: center;
    border: 1px solid transparent; }
    kn-datepicker .picker-relative-container li::before {
      border-radius: 50%; }
    kn-datepicker .picker-relative-container li.minor a {
      width: 13px;
      height: 13px;
      line-height: 13px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent;
      font-size: 0; }
      kn-datepicker .picker-relative-container li.minor a, kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:active, kn-datepicker .picker-relative-container li.minor a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
        outline: none; }
    kn-datepicker .picker-relative-container li:not(.minor) a {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent; }
      kn-datepicker .picker-relative-container li:not(.minor) a, kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:active, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        outline: none; }

kn-datepicker .period-selector a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker .period-selector a, kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:active, kn-datepicker .period-selector a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    outline: none; }

.kn-ripple {
  overflow: hidden;
  position: relative; }

.kn-ripple.kn-ripple-unbounded {
  overflow: visible; }

.kn-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0); }

kn-export-button kn-menu {
  display: block;
  position: relative; }
  kn-export-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-export-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-export-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-export-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-export-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-export-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-export-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-export-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-export-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-export-button kn-menu kn-spinner {
    left: 32px; }

button.form-button, .form-input button {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 30px;
  font-size: 16px;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s; }
  button.form-button[disabled], .form-input button[disabled] {
    box-shadow: none; }
  button.form-button::-moz-focus-inner, .form-input button::-moz-focus-inner {
    border: none; }
  button.form-button::after, .form-input button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    bottom: -25%;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    transition: 0.2s all ease; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
    button.form-button:not([disabled]):active::after, .form-input button:not([disabled]):active::after {
      bottom: -70%;
      left: -50%;
      height: 200%;
      width: 200%;
      opacity: 0.5; }

@keyframes reveal-back-link {
  to {
    opacity: 1;
    left: calc(50% - 700px); } }

.form-container.heading, .form-container .form-loader-bar {
  position: relative; }
  .form-container.heading::before, .form-container.heading::after, .form-container .form-loader-bar::before, .form-container .form-loader-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    height: 5px;
    z-index: 3; }
  .form-container.heading::before, .form-container .form-loader-bar::before {
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.3s opacity ease; }
  .form-container.heading::after, .form-container .form-loader-bar::after {
    left: 0%;
    right: 100%;
    opacity: 0; }

.loading .form-container.heading::before, .loading .form-container.heading::after, .loading .form-container .form-loader-bar::before, .loading .form-container .form-loader-bar::after {
  opacity: 1; }

.loading .form-container.heading::after, .loading .form-container .form-loader-bar::after {
  animation: indeterminate 1s linear infinite; }

.form-container {
  margin: 30px 0; }
  .form-container.heading {
    position: relative;
    margin: 0;
    padding: 0; }
  .form-container h1, .form-container p, .form-container .form-layout {
    margin: auto;
    max-width: 1200px; }
  .form-container h1 {
    padding: 30px 0;
    margin: 0 auto;
    border: none; }
  .form-container .form-back {
    position: absolute;
    opacity: 0;
    left: calc(50% - 750px);
    top: calc(50% - 32px);
    transition: 0.3s all ease;
    animation-name: reveal-back-link;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
    .form-container .form-back::after {
      content: '';
      position: absolute;
      display: block;
      width: 64px;
      height: 64px;
      left: 20px;
      border-radius: 50%;
      transition: 0.3s all ease;
      transform: rotateY(45deg); }
    .form-container .form-back i {
      position: absolute;
      z-index: 10;
      font-size: 48px;
      line-height: 64px;
      text-align: center;
      width: 64px;
      height: 64px; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      left: 0;
      transform: rotateY(0); }
    .form-container .form-back:active::after {
      transition: none; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px; }
  .form-footer div:only-child {
    margin-left: auto; }

.form-actions-info {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  margin: 0 1em;
  white-space: nowrap; }
  .form-actions-info i.material-icons {
    padding: 0 0.3em; }

.form-buttons {
  text-align: right; }
  .form-buttons button {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    width: auto;
    margin-left: 10px;
    padding: 0 30px; }
    .form-buttons button[disabled] {
      box-shadow: none; }
    .form-buttons button::-moz-focus-inner {
      border: none; }
    .form-buttons button::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    .form-buttons button:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      .form-buttons button:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }

.form-errors {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .form-errors li {
    margin: 2px 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .form-errors li strong {
      display: flex;
      align-items: center;
      color: white;
      padding: 0.3em 0.5em;
      margin-right: 1em; }
      .form-errors li strong i {
        padding-right: 0.3em; }

.form-layout .info-bar {
  margin: 15px;
  padding: 15px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .info-bar strong {
    font-weight: 400; }

.form-layout .form-grid {
  display: flex;
  flex-direction: column; }

.form-layout .form-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }
  .form-layout .form-box .title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 5px;
    height: 34px;
    line-height: 34px; }
    .form-layout .form-box .title h2 {
      flex: 1;
      padding-left: 8px;
      margin: 0;
      font-weight: 800;
      font-size: 1em;
      text-transform: uppercase; }
    .form-layout .form-box .title .side-action {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      height: 24px;
      margin-left: 5px; }
      .form-layout .form-box .title .side-action i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .title .side-action:hover, .form-layout .form-box .title .side-action:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .title .side-action:active {
        opacity: 1; }
      .form-layout .form-box .title .side-action[disabled] {
        opacity: 0.3;
        background: none; }
  .form-layout .form-box .content {
    flex-grow: 1;
    padding: 0 15px 15px 15px; }
    .form-layout .form-box .content:first-child {
      padding-top: 15px; }
  .form-layout .form-box .info-bar {
    margin: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none; }
  .form-layout .form-box .container {
    display: flex; }
    .form-layout .form-box .container .content {
      flex: 1;
      width: 0; }
    .form-layout .form-box .container .side-actions {
      display: flex;
      align-items: center;
      justify-content: center; }
      .form-layout .form-box .container .side-actions a {
        display: inline-block;
        margin: 0;
        padding: 5px;
        opacity: 0.7;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
        height: 24px;
        margin: 10px; }
        .form-layout .form-box .container .side-actions a i {
          vertical-align: top;
          transition: all 0.5s ease;
          display: inline-block;
          width: 24px;
          height: 24px;
          overflow: hidden; }
        .form-layout .form-box .container .side-actions a:hover, .form-layout .form-box .container .side-actions a:focus {
          opacity: 1;
          text-decoration: none; }
        .form-layout .form-box .container .side-actions a:active {
          opacity: 1; }
        .form-layout .form-box .container .side-actions a[disabled] {
          opacity: 0.3;
          background: none; }
  .form-layout .form-box .alt p {
    margin: 0.5em;
    padding: 0; }
  .form-layout .form-box .alt-actions {
    display: flex; }
    .form-layout .form-box .alt-actions a {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 5px 7px;
      height: 24px; }
      .form-layout .form-box .alt-actions a i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .alt-actions a:hover, .form-layout .form-box .alt-actions a:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .alt-actions a:active {
        opacity: 1; }
      .form-layout .form-box .alt-actions a[disabled] {
        opacity: 0.3;
        background: none; }
      .form-layout .form-box .alt-actions a i.material-icons {
        margin-right: 5px; }

.form-layout .form-inline-box {
  margin: 15px; }
  .form-layout .form-inline-box .title h3 {
    flex: 1;
    padding: 2px 0 0 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center; }

.form-layout .form-expanssion {
  margin: 15px 0;
  z-index: 1; }
  .form-layout .form-expanssion .form-box {
    margin: 0 15px;
    transition: 0.2s margin ease;
    position: relative;
    box-shadow: none; }
    .form-layout .form-expanssion .form-box::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .form-expanssion .form-box.expanded {
    margin: 30px 15px; }
  .form-layout .form-expanssion .form-box:first-child {
    margin-top: 0; }
  .form-layout .form-expanssion .form-box:last-child {
    margin-bottom: 0; }

.form-layout .row {
  display: flex;
  flex-direction: row;
  width: 100%; }

.form-layout .column {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .form-layout .column .column-spacer {
    height: 100%; }

.form-layout .form-input {
  flex: 1;
  position: relative;
  padding: 3px 0;
  min-width: 0; }
  .form-layout .form-input.inlined {
    margin: 0;
    flex-grow: 0;
    min-width: auto; }
  .form-layout .form-input > * {
    margin: 0 10px; }
  .form-layout .form-input > input, .form-layout .form-input > select {
    width: calc(100% - 20px); }
  .form-layout .form-input > kn-control-messages {
    margin: -18px 0 0 15px; }

.form-layout .flex-1 {
  flex: 1; }

.form-layout .flex-2 {
  flex: 2; }

.form-layout .flex-3 {
  flex: 3; }

.form-layout .flex-4 {
  flex: 4; }

.form-layout .flex-5 {
  flex: 5; }

.form-layout .flex-6 {
  flex: 6; }

.form-layout .flex-start {
  justify-content: flex-start; }

.form-layout .flex-end {
  justify-content: flex-end; }

.form-layout .row.flex-reverse {
  flex-direction: row-reverse; }

.form-layout .column.flex-reverse {
  flex-direction: column-reverse; }

.form-layout .popover {
  position: relative;
  height: 34px; }
  .form-layout .popover kn-menu-activator {
    cursor: pointer; }
  .form-layout .popover .side-action {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    height: 24px; }
    .form-layout .popover .side-action i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .form-layout .popover .side-action:hover, .form-layout .popover .side-action:focus {
      opacity: 1;
      text-decoration: none; }
    .form-layout .popover .side-action:active {
      opacity: 1; }
    .form-layout .popover .side-action[disabled] {
      opacity: 0.3;
      background: none; }

kn-attached-portal .kn-form-layout-menu-content {
  z-index: 200;
  position: absolute;
  left: calc(100% - 490px);
  top: 40px;
  width: 500px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    font-weight: normal;
    margin: 0;
    padding: 15px 15px 15px 20px; }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:focus {
      opacity: 1;
      text-decoration: none; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:active {
      opacity: 1; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close[disabled] {
      opacity: 0.3;
      background: none; }
  kn-attached-portal .kn-form-layout-menu-content [hidden] {
    display: none; }
  kn-attached-portal .kn-form-layout-menu-content::before {
    position: absolute;
    left: calc(100% - 37px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

.form-slots-table {
  width: 100%;
  table-layout: fixed;
  margin-top: 2em;
  border-collapse: collapse; }
  .form-slots-table th {
    padding: 5px;
    font-weight: 400;
    position: relative; }
    .form-slots-table th::before {
      content: '';
      position: absolute;
      display: block;
      width: calc(100% - 22px);
      height: 100%;
      border: 1px solid transparent;
      top: 0;
      left: 11px; }
    .form-slots-table th.disabled::before {
      background-color: transparent; }
  .form-slots-table td {
    padding: 10px 0; }
  .form-slots-table caption {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1; }

kn-sticky.sticked > .grid-panel {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.grid-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px; }
  .grid-panel .selector {
    width: 200px; }
  .grid-panel .actions, .grid-panel kn-grid-actions {
    display: flex;
    flex-grow: 1;
    font-size: 0; }
  .grid-panel .widgets {
    display: flex; }
    .grid-panel .widgets > *:not(:last-child) {
      margin-right: 10px; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    padding: 5px 7px;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    display: inline-block;
    line-height: 24px; }
    .grid-panel .selector a i, .grid-panel .actions a i, .grid-panel kn-grid-actions a i {
      vertical-align: top;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      opacity: 1; }
      .grid-panel .selector a:hover i, .grid-panel .actions a:hover i, .grid-panel kn-grid-actions a:hover i {
        opacity: 1; }
    .grid-panel .selector a:hover, .grid-panel .selector a:focus, .grid-panel .selector a:active, .grid-panel .actions a:hover, .grid-panel .actions a:focus, .grid-panel .actions a:active, .grid-panel kn-grid-actions a:hover, .grid-panel kn-grid-actions a:focus, .grid-panel kn-grid-actions a:active {
      text-decoration: none; }

kn-grid-preset kn-menu {
  display: block;
  position: relative;
  width: 300px; }
  kn-grid-preset kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-preset kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-preset kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-preset kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-preset kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-preset kn-menu kn-menu-activator {
    display: block;
    opacity: 1; }

kn-grid-preset kn-menu-activator > div {
  padding: 0;
  margin: 0;
  line-height: 24px;
  display: flex;
  align-items: center; }
  kn-grid-preset kn-menu-activator > div[hidden] {
    display: none; }
  kn-grid-preset kn-menu-activator > div i {
    padding: 0; }
  kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
      opacity: 1; }
  kn-grid-preset kn-menu-activator > div span {
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    kn-grid-preset kn-menu-activator > div span.template-name {
      font-style: normal; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.ownerUid {
        font-size: 80%;
        font-style: italic; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.material-icons {
        font-size: 125%;
        vertical-align: middle; }
  kn-grid-preset kn-menu-activator > div input {
    height: 34px;
    padding: 0 5px;
    width: calc(100% - 10px);
    min-width: 0;
    border: none;
    background-color: transparent;
    font-family: Source Sans Pro;
    font-size: 16px;
    outline: none; }
  kn-grid-preset kn-menu-activator > div a {
    opacity: 0.7; }

kn-grid-preset kn-menu-content kn-select {
  width: 100%; }

kn-grid-preset kn-menu-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-grid-preset kn-menu-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-grid-preset kn-menu-content li:not(.user-select) span, kn-grid-preset kn-menu-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-grid-preset kn-menu-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  width: 100%; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-grid-query-filter kn-menu {
  display: block;
  position: relative; }
  kn-grid-query-filter kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-query-filter kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-query-filter kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-query-filter kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 5px 7px; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50px;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
      position: absolute;
      left: calc(50% - 10px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-attached-portal .kn-grid-menu-content {
    position: absolute;
    z-index: 20;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-attached-portal .kn-grid-menu-content::before {
      position: absolute;
      left: calc(100% - 100px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 0; }
    kn-grid-query-filter kn-menu kn-menu-activator > * {
      height: 24px;
      padding: 5px;
      transition: color 0.5s ease; }
      kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
        opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator > span {
      display: flex; }
    kn-grid-query-filter kn-menu kn-menu-activator > a {
      opacity: 0.7; }

kn-grid-reset {
  display: block;
  position: relative;
  padding: 0; }
  kn-grid-reset.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-reset kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-reset kn-menu-activator[hidden] {
      display: none; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-reset kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-reset kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-reset kn-menu-activator {
    padding: 0 7px; }
    kn-grid-reset kn-menu-activator i {
      padding: 5px 0; }
      kn-grid-reset kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-grid-reset > *:not(.disabled) {
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus {
      opacity: 1; }
  kn-grid-reset > span {
    display: flex; }
  kn-grid-reset > a {
    opacity: 0.7;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
    kn-grid-reset > a.disabled {
      cursor: default;
      pointer-events: none; }

kn-grid-search {
  position: relative;
  height: 50px;
  margin: -8px -8px -8px 0; }
  kn-grid-search input[type='search'] {
    border: none;
    padding: 0 10px 0 40px;
    height: 100%;
    width: 0;
    vertical-align: top;
    transition: 0.3s all ease; }
    kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
      width: 250px;
      outline: none; }
  kn-grid-search::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center; }

header.liner {
  height: 80px;
  display: flex;
  justify-content: space-between;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  header.liner > div {
    display: flex;
    align-items: center; }
  header.liner .logo {
    outline: none; }
    header.liner .logo img {
      margin: 10px; }
  header.liner button.main-action {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    margin: 0 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
    header.liner button.main-action[disabled] {
      box-shadow: none; }
    header.liner button.main-action::-moz-focus-inner {
      border: none; }
    header.liner button.main-action::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    header.liner button.main-action:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      header.liner button.main-action:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
  header.liner kn-menu {
    z-index: 2;
    position: relative; }
    header.liner kn-menu.expanded {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
    header.liner kn-menu kn-menu-activator {
      display: flex;
      padding: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
      outline: none; }
    header.liner kn-menu kn-menu-content {
      position: absolute;
      min-width: 100%;
      left: 0;
      margin-top: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      z-index: 100; }
      header.liner kn-menu kn-menu-content[hidden] {
        opacity: 0;
        margin-top: -10px;
        transition: all 0.3s ease; }
      header.liner kn-menu kn-menu-content ul {
        padding: 0;
        margin: 0;
        list-style-type: none; }
        header.liner kn-menu kn-menu-content ul li {
          padding: 0;
          margin: 0; }
      header.liner kn-menu kn-menu-content a {
        padding: 10px;
        display: block;
        white-space: nowrap;
        transition: all 0.3s ease; }
        header.liner kn-menu kn-menu-content a:hover {
          text-decoration: none; }

kn-attached-portal .header-liner.kn-menu-content {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 100; }
  kn-attached-portal .header-liner.kn-menu-content[hidden] {
    opacity: 0;
    margin-top: -10px;
    transition: all 0.3s ease; }
  kn-attached-portal .header-liner.kn-menu-content ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    kn-attached-portal .header-liner.kn-menu-content ul li {
      padding: 0;
      margin: 0; }
  kn-attached-portal .header-liner.kn-menu-content a {
    padding: 10px;
    display: block;
    white-space: nowrap;
    transition: all 0.3s ease; }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      text-decoration: none; }

header.liner .database-menu::before, header.liner .database-menu::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 1px;
  height: 40px;
  transition: top 0.5s ease; }

header.liner .database-menu::before {
  left: 0; }

header.liner .database-menu::after {
  right: 0; }

header.liner .database-menu.expanded::before, header.liner .database-menu.expanded::after, header.liner .database-menu:hover::before, header.liner .database-menu:hover::after {
  top: -50px; }

header.liner .database-menu.database-menu-hidden {
  display: none; }

header.liner .database-menu kn-database-selector {
  border: none; }
  header.liner .database-menu kn-database-selector .filter {
    font-size: 0; }
    header.liner .database-menu kn-database-selector .filter .clear {
      padding: 0 20px; }
    header.liner .database-menu kn-database-selector .filter:hover .clear {
      background-image: url("../kn-theme-strio/img/clear.svg"); }
  header.liner .database-menu kn-database-selector ul {
    max-height: 70%; }
    header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
      left: 0; }
    header.liner .database-menu kn-database-selector ul li a:hover {
      text-decoration: none; }

header.liner .database-menu kn-menu-activator {
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding-right: 40px; }
  header.liner .database-menu kn-menu-activator strong {
    display: block;
    font-weight: normal; }
  header.liner .database-menu kn-menu-activator .description {
    display: block; }
  header.liner .database-menu kn-menu-activator::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 32px;
    width: 16px;
    height: 16px;
    mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    transform: rotate(-90deg);
    transition: transform 0.5s ease; }
  header.liner .database-menu kn-menu-activator:hover::after {
    transform: rotate(0deg); }

header.liner .database-menu.expanded kn-menu-activator::after {
  transform: rotate(-180deg); }

header.liner > div:first-child, header.liner kn-navbar {
  flex: 1; }

header.liner nav > ul, header.liner kn-navbar > ul {
  height: 80px;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  display: flex; }
  header.liner nav > ul > li, header.liner kn-navbar > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
      display: block;
      margin: 10px 3px;
      height: 58px;
      padding: 0 18px;
      line-height: 58px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      header.liner nav > ul > li > a, header.liner nav > ul > li > a:hover, header.liner nav > ul > li > a:focus, header.liner nav > ul > li > kn-menu-activator, header.liner nav > ul > li > kn-menu-activator:hover, header.liner nav > ul > li > kn-menu-activator:focus, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > a:focus, header.liner kn-navbar > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > kn-menu-activator:focus {
        text-decoration: none; }

header.liner kn-navbar kn-menu {
  margin: 10px 3px;
  height: 60px;
  padding: 0 !important; }

header.liner kn-navbar kn-menu-activator {
  height: 60px;
  padding: 0 8px;
  align-items: center; }

kn-attached-portal .kn-navbar-expansion ul {
  margin: 0 10px;
  padding: 0;
  list-style-type: none; }
  kn-attached-portal .kn-navbar-expansion ul > li {
    margin: 0;
    padding: 0; }
    kn-attached-portal .kn-navbar-expansion ul > li > a {
      display: block;
      padding: 0 18px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      kn-attached-portal .kn-navbar-expansion ul > li > a, kn-attached-portal .kn-navbar-expansion ul > li > a:hover, kn-attached-portal .kn-navbar-expansion ul > li > a:focus {
        text-decoration: none; }

header.liner .user-menu kn-menu-activator {
  min-width: 120px;
  flex-direction: row-reverse;
  align-items: center; }
  header.liner .user-menu kn-menu-activator img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    background-image: url("../img/noavatar.svg"); }
  header.liner .user-menu kn-menu-activator kn-menu-content {
    right: 0; }

header.liner .user-menu kn-menu-content {
  right: 0;
  left: initial; }
  header.liner .user-menu kn-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-attached-portal .user-menu-content {
  right: 0;
  left: initial; }
  kn-attached-portal .user-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-input label, kn-input [kn-hint] {
  font-size: 14px; }

kn-input [kn-prefix], kn-input [kn-suffix] {
  display: flex; }

kn-input .kn-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-input .kn-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input .kn-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input.disabled .kn-input-container, kn-input.readonly .kn-input-container {
  border-bottom-style: dotted; }

kn-input.focused .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.focused .kn-input-underline::before, kn-input.focused .kn-input-underline::after {
  z-index: 111; }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.ng-touched.ng-pending .kn-input-underline::before, kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::after {
  top: -4px;
  height: 5px; }

kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-input input {
  min-height: 24px; }
  kn-input input:-webkit-autofill {
    -webkit-animation-name: kill-autofill;
    -webkit-animation-fill-mode: both; }

@-webkit-keyframes kill-autofill {
  to {
    background: transparent; } }

kn-date-input label, kn-date-input [kn-hint] {
  font-size: 14px; }

kn-date-input [kn-prefix], kn-date-input [kn-suffix] {
  display: flex; }

kn-date-input .kn-date-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-date-input .kn-date-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input .kn-date-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input.disabled .kn-date-input-container, kn-date-input.readonly .kn-date-input-container {
  border-bottom-style: dotted; }

kn-date-input.focused .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.focused .kn-date-input-underline::before, kn-date-input.focused .kn-date-input-underline::after {
  z-index: 111; }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before, kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::after {
  top: -4px;
  height: 5px; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-date-input input {
  min-height: 24px;
  text-align: right; }

kn-date-input .input-button i.material-icons {
  opacity: 0.5;
  transition: 0.3s opacity ease; }
  kn-date-input .input-button i.material-icons:hover, kn-date-input .input-button i.material-icons:focus {
    opacity: 1; }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  opacity: 0.5; }

kn-date-input .input-button > a {
  display: flex;
  text-decoration: none; }

@-moz-document url-prefix() {
  kn-date-input input {
    clip-path: inset(0 25px 0 0);
    margin-right: -20px !important;
    min-width: 70px !important; } }

kn-kcuni-settings {
  display: block;
  margin: 20px; }
  kn-kcuni-settings p strong {
    font-weight: 400; }
  kn-kcuni-settings .settings {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
    margin: 0 -10px 10px; }
    kn-kcuni-settings .settings kn-input {
      flex: 1; }
    kn-kcuni-settings .settings button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      margin-left: 10px; }
      kn-kcuni-settings .settings button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      kn-kcuni-settings .settings button:hover, kn-kcuni-settings .settings button:focus {
        opacity: 1;
        text-decoration: none; }
      kn-kcuni-settings .settings button:active {
        opacity: 1; }
      kn-kcuni-settings .settings button[disabled] {
        opacity: 0.3;
        background: none; }
  kn-kcuni-settings .message {
    padding: 10px;
    vertical-align: center; }
    kn-kcuni-settings .message i {
      vertical-align: bottom; }
  kn-kcuni-settings .doc-link {
    display: block;
    padding-top: 10px;
    margin-bottom: 20px;
    float: left; }
    kn-kcuni-settings .doc-link.app-link {
      float: right; }

.app-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }
  .app-loading-screen p {
    padding: 5px 10px;
    margin: 0;
    border-radius: 3px; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 600px;
  font-family: 'Source Sans Pro';
  font-size: 16px; }

input {
  font-family: 'Source Sans Pro';
  font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo 2'; }

h1 {
  font-weight: 300;
  font-size: 48px;
  padding-bottom: 10px; }

a {
  text-decoration: none; }

a:hover, a:focus {
  text-decoration: underline; }

kn-app-main {
  display: block; }

[knBackgroundFocusable] {
  outline: none; }

.country-display,
kn-select.country .option,
kn-select.country .kn-option-content {
  height: 24px;
  line-height: 24px; }
  .country-display img,
  kn-select.country .option img,
  kn-select.country .kn-option-content img {
    width: 24px;
    height: 16px;
    margin: 4px 4px 4px 0;
    vertical-align: bottom;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.flat-button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }
  .flat-button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  .flat-button:hover, .flat-button:focus {
    opacity: 1;
    text-decoration: none; }
  .flat-button:active {
    opacity: 1; }
  .flat-button[disabled] {
    opacity: 0.3;
    background: none; }

.flat-table {
  width: 100%;
  border-collapse: collapse; }
  .flat-table tbody tr {
    height: 55px; }
  .flat-table tbody td {
    transition: 0.3s background-color ease;
    padding: 10px; }
  .flat-table thead td {
    padding: 10px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7; }
  .flat-table .actions {
    text-align: right; }
    .flat-table .actions button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer; }
      .flat-table .actions button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .flat-table .actions button:hover, .flat-table .actions button:focus {
        opacity: 1;
        text-decoration: none; }
      .flat-table .actions button:active {
        opacity: 1; }
      .flat-table .actions button[disabled] {
        opacity: 0.3;
        background: none; }

kn-modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }

kn-modal.confirmation-dialog .overlay {
  display: flex;
  align-items: center;
  justify-content: center; }
  kn-modal.confirmation-dialog .overlay.kn-enter, kn-modal.confirmation-dialog .overlay.kn-leave {
    transition: 0.3s opacity ease; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container, kn-modal.confirmation-dialog .overlay.kn-leave .container {
      transition: 0.3s transform ease, 0.3s margin-top ease-out; }
  kn-modal.confirmation-dialog .overlay.kn-enter {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container {
      transform: perspective(1000px) rotate3d(1, 0, 0, 60deg); }
  kn-modal.confirmation-dialog .overlay.kn-leave, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active {
    opacity: 1; }
    kn-modal.confirmation-dialog .overlay.kn-leave .container, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active .container {
      transform: scale(1); }
  kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active .container {
      transform: scale(0.8);
      margin-top: 100px; }
  kn-modal.confirmation-dialog .overlay .container {
    overflow-y: auto;
    min-width: 300px;
    max-width: 750px;
    min-height: 200px;
    display: flex;
    flex-direction: column; }
  kn-modal.confirmation-dialog .overlay .content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; }
    kn-modal.confirmation-dialog .overlay .content span {
      white-space: pre-line;
      text-align: center;
      margin-top: 10px; }
  kn-modal.confirmation-dialog .overlay .buttons {
    display: flex; }
    kn-modal.confirmation-dialog .overlay .buttons button {
      position: relative;
      flex: 1;
      padding: 15px;
      min-width: 150px;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.5s ease, background-color 0.5s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        content: '';
        width: 60%;
        height: 3px;
        position: absolute;
        display: block;
        top: 0;
        left: 20%;
        opacity: 0.3; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover::before {
        opacity: 1; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        transition: color 0.2s ease, background-color 0.2s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button:active {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
        padding: 16px 15px 14px 15px; }

kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-options-container .kn-options-container-viewport {
    max-height: 310px; }
  kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-options-container .kn-options-container-filter .clear::before, kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-select.focused kn-options-container .kn-options-container-viewport, kn-input.focused kn-options-container .kn-options-container-viewport {
  z-index: 1000; }

kn-optgroup > strong {
  text-transform: uppercase; }

kn-option:not(.disabled):hover {
  transition: none; }

kn-option .kn-option-selector {
  transition: 0.3s color ease; }

kn-attached-portal .kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-attached-portal .kn-options-container .kn-options-container-viewport {
    max-height: 310px;
    overflow-y: scroll; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before, kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-attached-portal .kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-ownership-display > span {
  padding: 4px;
  margin: 0 4px;
  border-radius: 2px; }

kn-print-button kn-menu {
  display: block;
  position: relative; }
  kn-print-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-print-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-print-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-print-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-print-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-print-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-print-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-print-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-print-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-print-button kn-menu kn-menu-content {
    min-width: 200px; }
  kn-print-button kn-menu kn-spinner {
    left: 14px; }

kn-attached-portal .kn-menu-content.kn-print-button-content {
  min-width: 200px; }

kn-query-filter .query-filter > div[knFilterGroup] {
  display: block;
  min-width: 1000px;
  padding: 20px; }

kn-query-filter .filter-group {
  margin: auto; }
  kn-query-filter .filter-group .new-filter-actions {
    align-items: center;
    display: flex; }
    kn-query-filter .filter-group .new-filter-actions button {
      margin: 0 0 0 10px;
      padding: 5px 10px;
      border-radius: 3px;
      border: none;
      height: 30px;
      text-transform: uppercase; }
    kn-query-filter .filter-group .new-filter-actions .coalescing-operator {
      display: flex;
      align-items: center;
      margin-right: 10px; }
      kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
        content: '';
        display: block;
        flex: 1;
        height: 1px; }
    kn-query-filter .filter-group .new-filter-actions kn-select {
      width: 200px; }

kn-query-filter ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-query-filter li {
  padding: 10px 0 10px 10px; }

kn-query-filter li.boolean-operator {
  padding: 0;
  position: relative;
  height: 1px; }
  kn-query-filter li.boolean-operator span {
    position: absolute;
    display: block;
    padding: 0 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    top: -10px;
    left: 20px;
    text-transform: uppercase; }

kn-query-filter li[knFilterItem] {
  padding: 10px 0 10px 10px;
  display: flex;
  align-items: center;
  height: 40px; }
  kn-query-filter li[knFilterItem] > span {
    margin: 5px; }
  kn-query-filter li[knFilterItem]:first-child {
    padding-top: 0; }

kn-query-filter .filter-group .filter-name, kn-query-filter .filter-group .coalescing-operator {
  width: 225px; }

kn-query-filter .filter-group .coalescing-operator {
  width: 190px; }

kn-query-filter .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 205px; }

kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 170px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 185px; }

kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 150px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 165px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 130px; }

kn-query-filter .filter-name input {
  font-weight: bold; }

kn-query-filter .filter-operator {
  width: 150px; }
  kn-query-filter .filter-operator kn-input input {
    text-align: center; }
  kn-query-filter .filter-operator > * {
    width: 100%; }

kn-query-filter .filter-value {
  flex: 1; }
  kn-query-filter .filter-value .presenter {
    flex: 1;
    display: flex;
    align-items: center; }
    kn-query-filter .filter-value .presenter kn-input, kn-query-filter .filter-value .presenter kn-select {
      flex: 1; }
    kn-query-filter .filter-value .presenter kn-date-input span.required {
      display: none; }
    kn-query-filter .filter-value .presenter > span {
      margin: 0 10px; }
      kn-query-filter .filter-value .presenter > span:first-child {
        margin-left: 0; }

kn-query-filter .filter-actions {
  width: 70px;
  text-align: right; }

kn-query-filter .filter-actions button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  height: 34px; }
  kn-query-filter .filter-actions button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  kn-query-filter .filter-actions button:hover, kn-query-filter .filter-actions button:focus {
    opacity: 1;
    text-decoration: none; }
  kn-query-filter .filter-actions button:active {
    opacity: 1; }
  kn-query-filter .filter-actions button[disabled] {
    opacity: 0.3;
    background: none; }

kn-query-filter .footer {
  padding: 20px;
  text-align: right;
  display: flex; }
  kn-query-filter .footer button {
    padding: 5px 10px;
    margin-left: 20px;
    border-radius: 3px;
    border: none;
    height: 30px;
    text-transform: uppercase; }
  kn-query-filter .footer .left {
    text-align: left;
    flex: 1; }
    kn-query-filter .footer .left button {
      margin-left: 0;
      margin-right: 20px; }

kn-query-filter .filter-placeholder {
  width: 400px;
  margin: 30px auto 50px auto;
  text-align: center; }
  kn-query-filter .filter-placeholder span.placeholder {
    display: block; }
  kn-query-filter .filter-placeholder > i.material-icons {
    font-size: 150px; }
  kn-query-filter .filter-placeholder p {
    margin-top: -10px;
    margin-bottom: 50px;
    font-size: 24px;
    display: none; }
  kn-query-filter .filter-placeholder kn-select .kn-select-container {
    padding: 7px;
    transition: 0.3s all ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:hover {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
      transition: none;
      box-shadow: none; }

kn-radio input[type='radio'] + .kn-radio-box::before {
  border-radius: 50%; }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border-radius: 50%;
  transition: 0.3s border-color ease; }

kn-radio .kn-radio-mark {
  transition: 0.2s border linear; }

kn-radio .kn-radio-box, kn-radio label {
  transition: 0.3s color ease; }

kn-select label, kn-select [kn-hint] {
  font-size: 14px; }

kn-select [kn-prefix], kn-select [kn-suffix] {
  display: flex; }

kn-select .kn-select-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-select .kn-select-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select .kn-select-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select.disabled .kn-select-container, kn-select.readonly .kn-select-container {
  border-bottom-style: dotted; }

kn-select.focused .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.focused .kn-select-underline::before, kn-select.focused .kn-select-underline::after {
  z-index: 111; }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.ng-touched.ng-pending .kn-select-underline::before, kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::after {
  top: -4px;
  height: 5px; }

kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-select .kn-select-header {
  line-height: 24px; }
  kn-select .kn-select-header > * {
    min-height: 24px; }
  kn-select .kn-select-header .separator {
    padding-right: 0.3em; }
  kn-select .kn-select-header .option {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

kn-select.disabled .kn-select-header {
  pointer-events: none; }

kn-spinner {
  position: absolute;
  margin: 0 auto;
  width: 36px; }
  kn-spinner:before {
    content: '';
    display: block;
    padding-top: 100%; }
  kn-spinner .circular {
    animation: strio-spinner-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  kn-spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: strio-spinner-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: square;
    stroke-width: 8px; }

@keyframes strio-spinner-rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes strio-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

kn-tabs.boxlist div.tabs-viewport {
  margin-top: 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }

kn-tabs.boxlist div.tabs-labels ul {
  width: 100%; }

kn-tabs.boxlist div.tabs-labels li a {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  width: 170px;
  height: 150px !important;
  transition: 0.3s color ease; }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }

kn-tabs.boxlist div.tabs-labels li.active a {
  border-radius: 5px; }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    position: absolute;
    left: calc(50% - 15px);
    bottom: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; }

kn-tabs.notebook div.tabs-labels li a {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  transition: 0.3s color ease; }
  kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }
  kn-tabs.notebook div.tabs-labels li a::before {
    content: '';
    display: block;
    position: absolute;
    width: 80%;
    height: 4px;
    left: 10%;
    top: -10px;
    opacity: 0;
    z-index: 10;
    transform: scale(0.8);
    transition: 0.3s all ease; }
  kn-tabs.notebook div.tabs-labels li a:hover::before, kn-tabs.notebook div.tabs-labels li a:focus::before {
    opacity: 1;
    top: 0;
    transform: scale(1); }

kn-tabs.notebook div.tabs-labels li.active a::before {
  opacity: 1;
  top: 0;
  transform: scale(1);
  width: 100%;
  left: 0; }

kn-textarea label, kn-textarea [kn-hint] {
  font-size: 14px; }

kn-textarea [kn-prefix], kn-textarea [kn-suffix] {
  display: flex; }

kn-textarea .kn-textarea-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-textarea .kn-textarea-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea .kn-textarea-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea.disabled .kn-textarea-container, kn-textarea.readonly .kn-textarea-container {
  border-bottom-style: dotted; }

kn-textarea.focused .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.focused .kn-textarea-underline::before, kn-textarea.focused .kn-textarea-underline::after {
  z-index: 111; }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before, kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::after {
  top: -4px;
  height: 5px; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-textarea {
  height: 100%;
  display: flex !important;
  flex-direction: column; }
  kn-textarea .kn-textarea-container {
    flex: 1; }
  kn-textarea textarea {
    height: calc(100% - 20px);
    resize: none; }

kn-timeline {
  position: relative; }
  kn-timeline::before, kn-timeline::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none; }
  kn-timeline::before {
    left: 0; }
  kn-timeline::after {
    right: 0; }
  kn-timeline .time-viewport {
    overflow: hidden; }
  kn-timeline .time-container {
    display: flex;
    margin: 100px 0 50px 0; }
    kn-timeline .time-container > span {
      flex-shrink: 0; }
  kn-timeline .time-segment {
    font-size: 0;
    height: 3px;
    width: calc(50% - 2px); }
  kn-timeline .time-mark {
    position: relative;
    width: 3px;
    height: 3px; }
    kn-timeline .time-mark a {
      position: absolute;
      width: 13px;
      height: 13px;
      top: -5px;
      left: -5px;
      border-radius: 50%;
      z-index: 1;
      outline: none; }
      kn-timeline .time-mark a.selected::after {
        content: '';
        position: absolute;
        display: block;
        width: 23px;
        height: 23px;
        left: -7px;
        top: -7px;
        border-radius: 50%; }
      kn-timeline .time-mark a::before {
        content: '';
        position: absolute;
        display: block;
        width: 53px;
        height: 53px;
        top: -20px;
        left: -20px;
        border-radius: 50%;
        z-index: -1; }
      kn-timeline .time-mark a .date {
        position: absolute;
        display: block;
        white-space: nowrap;
        text-align: center;
        left: 7px;
        top: -68px;
        font-weight: bold;
        transform: translateX(-50%); }
      kn-timeline .time-mark a .year {
        display: block;
        font-weight: normal; }
    kn-timeline .time-mark.pin a {
      width: 9px;
      height: 9px;
      top: -7px;
      left: -7px; }
      kn-timeline .time-mark.pin a::before {
        top: -22px;
        left: -22px; }
      kn-timeline .time-mark.pin a.selected::after {
        left: -9px;
        top: -9px; }
      kn-timeline .time-mark.pin a .date {
        left: 5px;
        top: -70px; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
    kn-timeline .time-mark.today::before {
      content: '';
      position: absolute;
      display: block;
      width: 1px;
      height: 63px;
      left: 1px;
      top: -30px;
      opacity: 0.5; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
  kn-timeline .time-mark.today a .date {
    top: -60px; }
  kn-timeline kn-datepicker .viewport {
    top: -20px; }
  kn-timeline kn-datepicker.calendar-mark .viewport {
    top: 5px; }

kn-toast > div {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  left: 50px;
  bottom: 50px;
  z-index: 1000;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave {
    transition: 0.3s all ease; }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave.kn-leave-active {
    left: 35px;
    opacity: 0; }
  kn-toast > div.kn-leave, kn-toast > div.kn-enter.kn-enter-active {
    left: 50px;
    opacity: 1; }
  kn-toast > div .content {
    display: flex;
    flex-direction: column;
    padding: 15px 20px; }
    kn-toast > div .content span, kn-toast > div .content strong {
      display: block; }
  kn-toast > div a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-align: center; }
    kn-toast > div a, kn-toast > div a:hover, kn-toast > div a:focus, kn-toast > div a:active {
      text-decoration: none; }

kn-audit-display {
  color: rgba(0, 0, 0, 0.5); }
  kn-audit-display strong {
    background-color: rgba(0, 0, 0, 0.07); }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox input[type='checkbox']:focus + .kn-checkbox-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked):hover + .kn-checkbox-box::after, kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked) + .kn-checkbox-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-checkbox.disabled input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled input[type='checkbox']:not(:checked) + .kn-checkbox-box::after {
  background-color: transparent !important; }

kn-checkbox.disabled.indeterminate .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled label, kn-checkbox.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox.ng-touched.ng-invalid .kn-checkbox-box::after {
  border-color: #c04060; }

kn-checkbox.ng-touched.ng-invalid input[type='checkbox']:checked + .kn-checkbox-box::after, kn-checkbox.ng-touched.ng-invalid.indeterminate .kn-checkbox-box::after {
  background-color: #c04060; }

app-print-template-edit {
  background-color: #ffffff; }
  app-print-template-edit > kn-resizable-container .preview {
    border-left: 1px solid rgba(0, 0, 0, 0.15); }
  app-print-template-edit .preview div.tabs-viewport {
    background-color: #f9f7f6; }
  app-print-template-edit kn-codemirror {
    background-color: #ffffff; }
  app-print-template-edit kn-tabs a.sidepanel {
    color: #000000;
    color: rgba(0, 0, 0, 0.8); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):hover, app-print-template-edit kn-tabs a.sidepanel:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-tab.home i.banner {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-tab .no-print-context-placeholder {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-activator {
    color: #000000;
    color: #c04060; }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):hover, app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-menu.errors kn-menu-content {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.8); }

kn-roles-table .role-permissions table thead th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-roles-table .role-permissions table tbody.permissions-matrix td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); }

kn-roles-table .role-permissions table tbody.permissions-matrix tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

kn-roles-table .role-permissions .actions button {
  color: #000000; }
  kn-roles-table .role-permissions .actions button:not([disabled]):hover, kn-roles-table .role-permissions .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-roles-table .role-permissions .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-permission-actions-select kn-menu-content {
  background-color: #ffffff; }
  kn-permission-actions-select kn-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-user-edit table.user-roles tbody.user-roles-table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles tr.invalid td {
  background-color: rgba(192, 64, 96, 0.15); }

kn-user-edit table.user-roles thead tr:last-child td {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-user-edit table.user-roles tbody.user-roles-table tr td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles td.actions button {
  color: #000000; }
  kn-user-edit table.user-roles td.actions button:not([disabled]):hover, kn-user-edit table.user-roles td.actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-user-edit table.user-roles td.actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-control-messages > div {
  color: #c04060; }

app-database-manage kn-tabs .tab-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

app-database-manage kn-tabs a i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

app-database-manage kn-tabs li.active a i.material-icons, app-database-manage kn-tabs a:hover i.material-icons, app-database-manage kn-tabs a:focus i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

app-database-manage kn-tabs kn-tab .select-database {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15); }

app-database-manage kn-tabs kn-tab.kn-drag-over::after {
  background-color: rgba(255, 240, 216, 0.3);
  border: 1px dashed #ff9800; }

kn-datepicker .viewport {
  background-color: #ffffff; }
  kn-datepicker .viewport::before {
    border-bottom: 10px solid #f2f2f2; }
  kn-datepicker .viewport .header {
    background-color: #f2f2f2; }

kn-datepicker kn-date-header > *, kn-datepicker kn-time-header > * {
  color: #000000; }

kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a:hover {
  background-color: rgba(0, 0, 0, 0.1); }

kn-datepicker kn-date-header a:active, kn-datepicker kn-time-header a:active {
  background-color: rgba(0, 0, 0, 0.2); }

kn-datepicker kn-date-header a {
  color: rgba(0, 0, 0, 0.5); }

kn-datepicker kn-month-view th {
  color: rgba(0, 0, 0, 0.35); }

kn-datepicker kn-month-view td a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker kn-month-view td a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker kn-month-view td a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container .center {
  background-color: gray; }

kn-datepicker .picker-relative-container .gauge {
  background-color: rgba(0, 0, 0, 0.15); }

kn-datepicker .picker-relative-container li::before {
  background-color: #ffffff; }

kn-datepicker .picker-relative-container li.minor a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li.minor a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li.minor a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.minor::before {
  background-color: rgba(0, 0, 0, 0.8); }

kn-datepicker .picker-relative-container li:not(.minor) a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li:not(.minor) a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li:not(.minor) a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.major::before {
  background-color: #000000; }

kn-datepicker .period-selector a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .period-selector a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .period-selector a.selected {
    background-color: #805848;
    color: #ffffff; }

.kn-ripple-element {
  background-color: rgba(0, 0, 0, 0.05); }

kn-export-button kn-menu.expanded {
  background-color: #0b7244; }

kn-export-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-export-button kn-menu kn-menu-activator, kn-export-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

button.form-button, .form-input button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  button.form-button.danger, .form-input button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  button.form-button[disabled], .form-input button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  button.form-button::after, .form-input button::after {
    background-color: white; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    button.form-button:not([disabled]):hover.danger, button.form-button:not([disabled]):focus.danger, .form-input button:not([disabled]):hover.danger, .form-input button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    button.form-button:not([disabled]):active.danger, .form-input button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-container.heading::before, .form-container .form-loader-bar::before {
  background-color: rgba(128, 88, 72, 0.3); }

.form-container.heading::after, .form-container .form-loader-bar::after {
  background-color: #805848; }

.form-container.heading {
  background-color: #ffffff; }

.form-container .form-back {
  color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:hover, .form-container .form-back:focus {
    color: #ffffff; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      background-color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:active::after {
    background-color: rgba(0, 0, 0, 0.4); }

.form-actions-info {
  color: #c07000; }

.form-buttons button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  .form-buttons button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  .form-buttons button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  .form-buttons button::after {
    background-color: white; }
  .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    .form-buttons button:not([disabled]):hover.danger, .form-buttons button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  .form-buttons button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    .form-buttons button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-errors li {
  background-color: rgba(192, 64, 96, 0.2); }
  .form-errors li strong {
    background-color: #c04060; }

.form-layout .info-bar {
  color: rgba(255, 255, 255, 0.7);
  background-color: #10a060; }
  .form-layout .info-bar.error {
    background-color: #c04060; }
  .form-layout .info-bar strong {
    color: #ffffff; }

.form-layout .form-box {
  background-color: #ffffff; }
  .form-layout .form-box .title {
    color: #009688; }
    .form-layout .form-box .title .side-action {
      color: #000000; }
      .form-layout .form-box .title .side-action:not([disabled]):hover, .form-layout .form-box .title .side-action:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .title .side-action:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .container + .container {
    border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .form-layout .form-box .container .side-actions {
    border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .container .side-actions a {
      color: #000000; }
      .form-layout .form-box .container .side-actions a:not([disabled]):hover, .form-layout .form-box .container .side-actions a:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .container .side-actions a:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .alt {
    background-color: rgba(224, 192, 0, 0.1);
    border-top: 1px solid rgba(224, 192, 0, 0.3); }
  .form-layout .form-box .alt-actions a {
    color: #000000; }
    .form-layout .form-box .alt-actions a:not([disabled]):hover, .form-layout .form-box .alt-actions a:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .alt-actions a:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }

.form-layout .form-inline-box .title {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid rgba(0, 0, 0, 0.15) !important; }

.form-layout .form-inline-box .container {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(224, 192, 0, 0.1); }
  .form-layout .form-inline-box .container + .container {
    border-top: none; }

.form-layout .popover .side-action {
  color: #000000; }
  .form-layout .popover .side-action:not([disabled]):hover, .form-layout .popover .side-action:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-layout .popover .side-action:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-form-layout-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    color: #000000; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-form-layout-menu-content::before {
    border-bottom: 10px solid #ffffff; }

.form-slots-table th {
  color: rgba(0, 0, 0, 0.5); }
  .form-slots-table th::before {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-slots-table th.disabled::before {
    border: 1px solid rgba(0, 0, 0, 0.1); }

.form-slots-table caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

.grid-panel {
  background-color: #10a060; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    color: rgba(255, 255, 255, 0.7); }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-preset kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu kn-menu-activator, kn-grid-preset kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
  transition: color 0.5s ease; }
  kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-activator > div span {
  color: rgba(255, 255, 255, 0.5); }
  kn-grid-preset kn-menu-activator > div span.template-name {
    color: #ffd088; }

kn-grid-preset kn-menu-activator > div input {
  color: #ffffff; }
  kn-grid-preset kn-menu-activator > div input::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-activator > div a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content li:not(.user-select) span:hover, kn-grid-preset kn-menu-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-grid-preset kn-menu-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-grid-preset kn-menu-content kn-select kn-options-container, kn-grid-preset kn-menu-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span:hover, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-options-container, kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-grid-query-filter kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-query-filter kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-query-filter kn-menu kn-menu-activator, kn-grid-query-filter kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
    border-bottom: 10px solid #ffffff; }

kn-attached-portal .kn-grid-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-grid-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-grid-query-filter kn-menu kn-menu-activator {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-query-filter kn-menu kn-menu-activator em {
    color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-activator > * {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease; }
    kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator > span.template-name {
    color: #ffd088; }

kn-attached-portal .kn-menu-content.kn-grid-query-content {
  left: calc(50% - 900px);
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-menu-content.kn-grid-query-content::before {
    left: calc(50% + 375px); }

kn-grid-reset {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-reset.expanded {
    background-color: #0b7244; }
  kn-grid-reset:not(.expanded) kn-menu-activator:focus, kn-grid-reset kn-menu-activator:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset kn-menu-activator, kn-grid-reset kn-menu-activator i {
    color: rgba(255, 255, 255, 0.8); }
  kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i {
    color: #ffffff; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-button-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content) li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-attached-portal .kn-grid-button-content li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-attached-portal .kn-grid-button-content li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset > *:not(.disabled), kn-grid-reset a:not(.disabled) {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus, kn-grid-reset a:not(.disabled):hover, kn-grid-reset a:not(.disabled):focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-reset > *.disabled, kn-grid-reset a.disabled {
    color: rgba(255, 255, 255, 0.3); }

kn-grid-search input[type='search'] {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff; }
  kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
    background-color: rgba(0, 0, 0, 0.4); }
  kn-grid-search input[type='search']::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-search::after {
  background-color: #ffffff; }

header.liner .database-menu::before, header.liner .database-menu::after {
  background-color: rgba(255, 255, 255, 0.1); }

header.liner .database-menu kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  header.liner .database-menu kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  header.liner .database-menu kn-database-selector .filter input {
    color: #ffffff; }
    header.liner .database-menu kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

header.liner .database-menu kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

header.liner .database-menu kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  header.liner .database-menu kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

header.liner .database-menu kn-database-selector ul li strong {
  color: white; }

header.liner .database-menu kn-database-selector ul li span.uid {
  color: #b39b91; }

kn-attached-portal kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  kn-attached-portal kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  kn-attached-portal kn-database-selector .filter input {
    color: #ffffff; }
    kn-attached-portal kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

kn-attached-portal kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

kn-attached-portal kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  kn-attached-portal kn-database-selector ul li a.active::before, kn-attached-portal kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

kn-attached-portal kn-database-selector ul li strong {
  color: white; }

kn-attached-portal kn-database-selector ul li span.uid {
  color: #b39b91; }

header.liner .database-menu kn-menu-activator::after {
  background-color: rgba(255, 255, 255, 0.2); }

header.liner .database-menu kn-menu-activator strong {
  color: #ffffff; }

header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  header.liner nav > ul > li > a.router-link-active, header.liner nav > ul > li > kn-menu-activator.router-link-active, header.liner kn-navbar > ul > li > a.router-link-active, header.liner kn-navbar > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  header.liner nav > ul > li > a:hover, header.liner nav > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  header.liner nav > ul > li > a:not(.router-link-active):focus, header.liner nav > ul > li > kn-menu-activator:not(.router-link-active):focus, header.liner kn-navbar > ul > li > a:not(.router-link-active):focus, header.liner kn-navbar > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

kn-attached-portal .kn-navbar-expansion > ul > li > a, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-navbar-expansion > ul > li > a.router-link-active, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:hover, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:not(.router-link-active):focus, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

header.liner {
  background-color: #805848;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4) 80px); }
  header.liner .logo:hover, header.liner .logo:focus {
    background-color: rgba(255, 255, 255, 0.05); }
  header.liner button.main-action {
    color: white;
    background-color: rgba(128, 88, 72, 0.9);
    background-color: #10a060; }
    header.liner button.main-action.danger {
      background-color: rgba(192, 64, 96, 0.9); }
    header.liner button.main-action[disabled] {
      background-color: rgba(160, 160, 160, 0.5); }
    header.liner button.main-action::after {
      background-color: white; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      background-color: rgba(128, 88, 72, 0.7); }
      header.liner button.main-action:not([disabled]):hover.danger, header.liner button.main-action:not([disabled]):focus.danger {
        background-color: rgba(192, 64, 96, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      background-color: rgba(128, 88, 72, 0.8); }
      header.liner button.main-action:not([disabled]):active.danger {
        background-color: rgba(192, 64, 96, 0.8); }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus, header.liner button.main-action:not([disabled]):active {
      background-color: #58bd90; }
    header.liner button.main-action:not([disabled]):active {
      background-color: #40b380; }
  header.liner kn-menu {
    color: rgba(255, 255, 255, 0.5);
    z-index: 10; }
    header.liner kn-menu.expanded {
      background-color: #805848; }
      header.liner kn-menu.expanded kn-menu-content {
        border-top: 1px solid rgba(255, 255, 255, 0.1); }
    header.liner kn-menu kn-menu-activator:hover, header.liner kn-menu kn-menu-activator:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }
    header.liner kn-menu kn-menu-content {
      background-color: #805848; }
      header.liner kn-menu kn-menu-content a {
        color: rgba(255, 255, 255, 0.5); }
        header.liner kn-menu kn-menu-content a:hover {
          background-color: rgba(255, 255, 255, 0.1);
          color: #ffffff; }

kn-attached-portal .header-liner.kn-menu-content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #805848; }
  kn-attached-portal .header-liner.kn-menu-content a {
    color: rgba(255, 255, 255, 0.5); }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }

header.liner .user-menu kn-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .user-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-input label, kn-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-input label .required {
  color: #c04060; }

kn-input .kn-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-input:not(.disabled):not(.focused) .kn-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-input.focused .kn-input-container {
  border-color: transparent; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  background-color: #805848; }

kn-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  background-color: #c04060; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::before {
  background-color: #ecc6cf; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::after {
  background-color: #c04060; }

kn-input.ng-touched.ng-pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::before {
  background-color: #d9cdc8; }

kn-input input {
  color: #000000; }

kn-input.disabled input {
  color: rgba(0, 0, 0, 0.4); }

kn-input input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input label, kn-date-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-date-input label .required {
  color: #c04060; }

kn-date-input .kn-date-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-date-input:not(.disabled):not(.focused) .kn-date-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-date-input.focused .kn-date-input-container {
  border-color: transparent; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  background-color: #805848; }

kn-date-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::before {
  background-color: #ecc6cf; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::after {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::before {
  background-color: #d9cdc8; }

kn-date-input date-input {
  color: #000000; }

kn-date-input.disabled date-input {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input date-input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input .input-button i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

kn-kcuni-settings p {
  color: rgba(0, 0, 0, 0.5); }
  kn-kcuni-settings p strong {
    color: rgba(0, 0, 0, 0.8); }

kn-kcuni-settings .settings button {
  color: #000000; }
  kn-kcuni-settings .settings button:not([disabled]):hover, kn-kcuni-settings .settings button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-kcuni-settings .settings button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-kcuni-settings .settings:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-kcuni-settings .message {
  color: #c04060;
  background-color: rgba(192, 64, 96, 0.2); }

.app-loading-screen p {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

html, body {
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.8); }

a {
  color: #8040a0; }

kn-input.ownership [kn-prefix] {
  color: #10a060; }

.flat-button {
  color: #000000; }
  .flat-button:not([disabled]):hover, .flat-button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

.flat-table thead td {
  border-bottom: 3px solid #cccccc; }

.flat-table tbody td {
  border-bottom: 1px solid #ebebeb; }

.flat-table tbody tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

.flat-table .actions button {
  color: #000000; }
  .flat-table .actions button:not([disabled]):hover, .flat-table .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-table .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-modal.confirmation-dialog .overlay {
  background-color: rgba(48, 48, 48, 0.9); }
  kn-modal.confirmation-dialog .overlay .container {
    background-color: rgba(40, 40, 40, 0.7); }
  kn-modal.confirmation-dialog .overlay .content {
    color: white; }
  kn-modal.confirmation-dialog .overlay .buttons {
    background-color: rgba(0, 0, 0, 0.2); }
    kn-modal.confirmation-dialog .overlay .buttons button {
      color: rgba(255, 255, 255, 0.5); }
      kn-modal.confirmation-dialog .overlay .buttons button.primary {
        color: rgba(64, 128, 255, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.primary::before {
          background-color: #4080ff; }
        kn-modal.confirmation-dialog .overlay .buttons button.primary:hover, kn-modal.confirmation-dialog .overlay .buttons button.primary:focus {
          background-color: rgba(64, 128, 255, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button.danger {
        color: rgba(255, 64, 72, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.danger::before {
          background-color: #ff4048; }
        kn-modal.confirmation-dialog .overlay .buttons button.danger:hover, kn-modal.confirmation-dialog .overlay .buttons button.danger:focus {
          background-color: rgba(255, 64, 72, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        background-color: white; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        background-color: rgba(255, 255, 255, 0.7);
        color: rgba(0, 0, 0, 0.8); }

kn-options-container {
  background-color: #ffffff; }
  kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-optgroup > strong {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

kn-option.marked {
  background-color: rgba(0, 0, 0, 0.07); }

kn-option:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-option.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-option .kn-option-selector {
  color: rgba(0, 0, 0, 0.3); }

kn-option.selected .kn-option-selector {
  color: #805848; }

kn-attached-portal .kn-options-container {
  background-color: #ffffff; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-attached-portal .kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-attached-portal .kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-attached-portal .kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-ownership-display {
  color: rgba(0, 0, 0, 0.3); }
  kn-ownership-display > span {
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.1); }

kn-print-button kn-menu.expanded {
  background-color: #0b7244; }

kn-print-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-print-button kn-menu kn-menu-activator, kn-print-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-query-filter .query-filter > div[knFilterGroup] {
  color: rgba(0, 0, 0, 0.8); }

kn-query-filter .filter-group .new-filter-actions button {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .filter-group {
  border-left: 10px solid rgba(0, 0, 0, 0.1); }

kn-query-filter li.boolean-operator {
  background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter li.boolean-operator span {
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff; }

kn-query-filter .filter-name [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-operator kn-input [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-value .presenter > span {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-actions button {
  color: #000000; }
  kn-query-filter .filter-actions button:not([disabled]):hover, kn-query-filter .filter-actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter .filter-actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-query-filter .footer {
  background-color: rgba(0, 0, 0, 0.05); }
  kn-query-filter .footer button {
    background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-placeholder > i.material-icons {
  color: rgba(0, 0, 0, 0.35); }

kn-query-filter .filter-placeholder kn-select .kn-select-container {
  border: 1px solid rgba(0, 0, 0, 0.3); }
  kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
    background-color: rgba(0, 0, 0, 0.05); }

kn-query-filter .filter-placeholder kn-select .placeholder {
  color: rgba(0, 0, 0, 0.8); }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-radio input[type='radio']:checked + .kn-radio-box::after {
  border-color: #805848; }

kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border: 7px solid #805848; }

kn-radio input[type='radio']:focus + .kn-radio-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-radio:not(.disabled) input[type='radio']:not(:checked):hover + .kn-radio-box::after, kn-radio:not(.disabled) input[type='radio']:not(:checked) + .kn-radio-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-radio.disabled label, kn-radio.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-radio.disabled input[type='radio']:not(:checked) + .kn-radio-box::after, kn-radio.readonly input[type='radio']:not(:checked) + .kn-radio-box::after {
  background-color: transparent !important; }

kn-radio.disabled input[type='radio'] + .kn-radio-box::after, kn-radio.disabled input[type='radio'] + .kn-radio-box .kn-radio-mark, kn-radio.readonly input[type='radio'] + .kn-radio-box::after, kn-radio.readonly input[type='radio'] + .kn-radio-box .kn-radio-mark {
  border-color: rgba(0, 0, 0, 0.1); }

kn-radio-group.ng-touched.ng-invalid kn-radio .kn-radio-box::after, kn-radio-group.ng-touched.ng-invalid kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border-color: #c04060; }

kn-select label, kn-select [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-select label .required {
  color: #c04060; }

kn-select .kn-select-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-select:not(.disabled):not(.focused) .kn-select-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-select.focused .kn-select-container {
  border-color: transparent; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  background-color: #805848; }

kn-select.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  background-color: #c04060; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::before {
  background-color: #ecc6cf; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::after {
  background-color: #c04060; }

kn-select.ng-touched.ng-pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::before {
  background-color: #d9cdc8; }

kn-select .placeholder {
  color: rgba(0, 0, 0, 0.35); }

.kn-select-dropdown {
  border-left: 1px solid rgba(0, 0, 0, 0.05); }

kn-spinner {
  animation-name: strio-spinner-color-7; }
  kn-spinner .path {
    animation: strio-spinner-dash 1.5s ease-in-out infinite, strio-spinner-color-7 6s ease-in-out infinite; }

@keyframes strio-spinner-color-7 {
  0%, 20% {
    stroke: rgba(128, 88, 72, 0.6); }
  40% {
    stroke: rgba(128, 88, 72, 0.7); }
  60% {
    stroke: rgba(128, 88, 72, 0.8); }
  80% {
    stroke: rgba(128, 88, 72, 0.9); }
  100% {
    stroke: #805848; } }

kn-tabs.boxlist div.tabs-viewport {
  background-color: #ffffff; }

kn-tabs.boxlist div.tabs-labels li a {
  color: rgba(0, 0, 0, 0.5); }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    color: rgba(0, 0, 0, 0.8); }

kn-tabs.boxlist div.tabs-labels li.active a {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8); }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    border-bottom: 15px solid #ffffff; }

kn-tabs.notebook div.tabs-labels {
  background-color: rgba(0, 0, 0, 0.08); }
  kn-tabs.notebook div.tabs-labels li a {
    color: #805848; }
    kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
      color: #000000; }
    kn-tabs.notebook div.tabs-labels li a::before {
      background-color: rgba(0, 0, 0, 0.3); }
  kn-tabs.notebook div.tabs-labels li.active a {
    background-color: rgba(255, 255, 255, 0.5); }
    kn-tabs.notebook div.tabs-labels li.active a::before {
      background-color: #805848; }

kn-textarea label, kn-textarea [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-textarea label .required {
  color: #c04060; }

kn-textarea .kn-textarea-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-textarea:not(.disabled):not(.focused) .kn-textarea-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-textarea.focused .kn-textarea-container {
  border-color: transparent; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  background-color: #805848; }

kn-textarea.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::before {
  background-color: #ecc6cf; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::after {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::before {
  background-color: #d9cdc8; }

kn-textarea textarea {
  color: #000000; }

kn-textarea.disabled textarea {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea textarea::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-timeline::before {
  background: linear-gradient(90deg, #f0f0f0, transparent); }

kn-timeline::after {
  background: linear-gradient(270deg, #f0f0f0, transparent); }

kn-timeline .time-segment {
  background-color: #1860d8; }
  kn-timeline .time-segment.future {
    background-color: #8028d8; }
  kn-timeline .time-segment.selected {
    background-color: #0dc22b; }

kn-timeline .time-mark > .calendar-mark {
  position: relative;
  top: 25px;
  left: -5px; }
  kn-timeline .time-mark > .calendar-mark.today {
    left: -6px; }
  kn-timeline .time-mark > .calendar-mark.pin {
    left: -3px; }

kn-timeline .time-mark > a {
  background-color: #1860d8; }
  kn-timeline .time-mark > a.selected {
    background-color: #1860d8; }
    kn-timeline .time-mark > a.selected .date {
      color: rgba(0, 0, 0, 0.8); }
    kn-timeline .time-mark > a.selected::after {
      border: 2px solid #1860d8; }
  kn-timeline .time-mark > a:focus::before {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-timeline .time-mark > a .date {
    color: rgba(0, 0, 0, 0.5); }

kn-timeline .time-mark.pin > a {
  background-color: white;
  border: 4px solid #1860d8; }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.today::before {
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.8), transparent); }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.future > a {
  background-color: #8028d8; }
  kn-timeline .time-mark.future > a.selected::after {
    border-color: #8028d8; }

kn-timeline .time-mark.future.pin > a {
  background-color: white;
  border-color: #8028d8; }

kn-timeline .time-mark.today > a {
  background-color: #303030; }
  kn-timeline .time-mark.today > a.selected::after {
    border-color: #303030; }
  kn-timeline .time-mark.today > a .date {
    top: -60px; }

kn-timeline .time-mark.today.pin > a {
  background-color: white;
  border-color: #303030; }

kn-toast > div {
  background-color: rgba(0, 0, 0, 0.75);
  color: white; }
  kn-toast > div a {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-left: 1px solid rgba(255, 255, 255, 0.15); }
    kn-toast > div a:hover {
      background-color: rgba(0, 0, 0, 0.5); }
    kn-toast > div a:active {
      background-color: black; }

.form-container.featured {
  background-color: white;
  margin: 0;
  padding: 0 0 50px 0;
  position: relative; }
  .form-container.featured hr {
    display: block;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    border: none; }
  .form-container.featured h2 {
    text-align: center;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.5);
    margin: 1em 0 0 0; }
    .form-container.featured h2 span {
      position: relative;
      display: inline-block;
      background-color: white;
      padding: 3px 10px; }
    .form-container.featured h2::before {
      content: '';
      display: block;
      position: relative;
      top: 20px;
      height: 1px;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.2); }
  .form-container.featured .boxes {
    width: 100%;
    display: flex;
    justify-content: space-between; }
    .form-container.featured .boxes > div {
      flex: 1; }
      .form-container.featured .boxes > div > strong {
        display: block;
        font-weight: normal;
        opacity: 0.5;
        padding-top: 10px; }
      .form-container.featured .boxes > div > span {
        display: block;
        font-size: 200%;
        padding-bottom: 10px; }
  .form-container.featured .featured-info {
    padding: 30px 0; }
    .form-container.featured .featured-info .note {
      margin: 2em 0 1em 0;
      font-style: italic;
      opacity: 0.5; }
  .form-container.featured .placeholder {
    padding: 20px;
    display: inline-flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.1); }
    .form-container.featured .placeholder i {
      font-size: 36px;
      margin-right: 20px; }
    .form-container.featured .placeholder[hidden] {
      display: none; }
  .form-container.featured .actions {
    display: flex;
    border-top: 3px solid rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    padding-top: 10px; }
    .form-container.featured .actions button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      color: #000000;
      display: inline-flex;
      align-items: center;
      position: relative;
      padding: 10px; }
      .form-container.featured .actions button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-container.featured .actions button:hover, .form-container.featured .actions button:focus {
        opacity: 1;
        text-decoration: none; }
      .form-container.featured .actions button:active {
        opacity: 1; }
      .form-container.featured .actions button[disabled] {
        opacity: 0.3;
        background: none; }
      .form-container.featured .actions button:not([disabled]):hover, .form-container.featured .actions button:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-container.featured .actions button:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
      .form-container.featured .actions button:not(:last-child) {
        margin-right: 20px; }
        .form-container.featured .actions button:not(:last-child)::after {
          content: '';
          display: block;
          position: absolute;
          width: 1px;
          height: 30%;
          top: 35%;
          right: -10px;
          background-color: rgba(0, 0, 0, 0.3); }
      .form-container.featured .actions button i {
        margin-right: 10px; }

@keyframes indeterminate {
  0% {
    left: 0%;
    right: 100%; }
  30% {
    left: 0%;
    right: 50%; }
  80% {
    left: 70%;
    right: 0%; }
  100% {
    left: 100%;
    right: 0%; } }

/*$bg-color: #283038;
$fg-color: #c0c0c0;

$red-shade-color: #f06060;
$yellow-shade-color: #f0d060;
$green-shade-color: #a0f060;
$emerald-shade-color: #60f080;
$cyan-shade-color: #60e0f0;
$blue-shade-color: #6080f0;
$purle-shade-color: #b060f0;
$pink-shade-color: #f060c8;

$primary-color: $purle-shade-color;
$secondary-color: $yellow-shade-color;*/
/*$foreground-color: rgb(255, 255, 255);
$background-color: rgb(56, 56, 64);
$text-color: rgba(255, 255, 255, 0.9);
$text-secondary-color: rgba(255, 255, 255, 0.6);
$reading-animation-color: rgb(0, 150, 136);

$primary-color: rgb(128, 88, 72);
$accent-color: rgb(16, 160, 96);
$warn-color: rgb(192, 64, 96);

$divider-color: rgba(255, 255, 255, 0.1);
$header-divider-color: rgba(255, 255, 255, 0.2);
$row-divider-color: rgba(255, 255, 255, 0.15);*/
kn-audit-display {
  white-space: nowrap;
  margin: 10px 5px; }
  kn-audit-display strong {
    padding: 0.1em 0.4em 0.2em;
    margin: 0 0.2em;
    border-radius: 0.5em;
    font-weight: 400; }

kn-checkbox .kn-checkbox-mark {
  opacity: 0; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::before {
  border-radius: 50%; }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border-radius: 2px;
  transition: 0.3s all ease; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark-path {
  stroke-dashoffset: 0;
  stroke-dasharray: 25; }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox .kn-checkbox-mark-path {
  stroke-dashoffset: 25;
  stroke-dasharray: 25;
  stroke-width: 2px;
  transition: 0.3s transform ease, 0.3s stroke-dashoffset ease;
  transform-origin: 50% 50%;
  stroke: white; }

kn-checkbox .kn-checkbox-box::after, kn-checkbox label {
  transition: 0.3s color ease; }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  border-color: transparent; }

kn-checkbox.indeterminate .kn-checkbox-mark {
  opacity: 1; }

kn-checkbox.indeterminate .kn-checkbox-mark-path {
  transform: rotate(45deg) translate(-2px, 0);
  stroke-dashoffset: 20 !important;
  stroke-dasharray: 14 !important; }

app-print-template-edit kn-codemirror {
  height: 100%;
  flex: 1; }

app-print-template-edit > kn-resizable-container {
  height: 100%; }
  app-print-template-edit > kn-resizable-container kn-draggable-handler.left {
    z-index: 2;
    height: 50px !important;
    top: calc(100% - 50px) !important; }
  app-print-template-edit > kn-resizable-container .preview iframe {
    width: 100%;
    height: 100%;
    border: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror {
    height: 100%;
    overflow: visible;
    background: none; }
  app-print-template-edit > kn-resizable-container .CodeMirror-scroll {
    margin: 0;
    padding: 0;
    overflow: visible !important; }
  app-print-template-edit > kn-resizable-container .CodeMirror-sizer {
    border-right-width: 0 !important; }
  app-print-template-edit > kn-resizable-container .box {
    width: 100%;
    height: 100%; }

app-print-template-edit form {
  width: 100%;
  height: 100%; }

app-print-template-edit kn-tabs {
  flex-direction: column-reverse; }
  app-print-template-edit kn-tabs a.sidepanel {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 6px 0 0; }
    app-print-template-edit kn-tabs a.sidepanel i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    app-print-template-edit kn-tabs a.sidepanel:hover, app-print-template-edit kn-tabs a.sidepanel:focus {
      opacity: 1;
      text-decoration: none; }
    app-print-template-edit kn-tabs a.sidepanel:active {
      opacity: 1; }
    app-print-template-edit kn-tabs a.sidepanel[disabled] {
      opacity: 0.3;
      background: none; }
    app-print-template-edit kn-tabs a.sidepanel i {
      transition: transform 0.5s ease 0.3s; }
    app-print-template-edit kn-tabs a.sidepanel.active i {
      transform: rotate(180deg); }

app-print-template-edit kn-tab.active {
  display: flex;
  flex-direction: column;
  flex: 1; }

app-print-template-edit kn-tab.home .box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }

app-print-template-edit kn-tab.home .fields {
  width: 100%;
  max-width: 700px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home i.banner {
  font-size: 192px;
  margin: 0 auto; }

app-print-template-edit kn-tab.home h1 {
  text-align: center;
  margin: 50px 0; }

app-print-template-edit kn-tab.home .form-container {
  width: 80%;
  height: 100%;
  margin: 50px auto; }

app-print-template-edit kn-tab.home .form-layout {
  display: flex;
  flex-direction: column;
  height: 100%; }

app-print-template-edit kn-tab .no-print-context-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder i.banner {
    font-size: 128px;
    margin: 0 auto; }
  app-print-template-edit kn-tab .no-print-context-placeholder strong {
    font-family: 'Exo 2';
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    margin: 20px 0 50px 0; }
  app-print-template-edit kn-tab .no-print-context-placeholder button {
    text-align: center; }

app-print-template-edit kn-menu.errors kn-menu-activator {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  margin: 0 8px 0 0;
  opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  app-print-template-edit kn-menu.errors kn-menu-activator:hover, app-print-template-edit kn-menu.errors kn-menu-activator:focus {
    opacity: 1;
    text-decoration: none; }
  app-print-template-edit kn-menu.errors kn-menu-activator:active {
    opacity: 1; }
  app-print-template-edit kn-menu.errors kn-menu-activator[disabled] {
    opacity: 0.3;
    background: none; }

app-print-template-edit kn-menu.errors kn-menu-content {
  position: absolute;
  right: 8px;
  bottom: 50px;
  max-width: 1000px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-content [hidden] {
    display: none; }
  app-print-template-edit kn-menu.errors kn-menu-content strong {
    display: block; }
  app-print-template-edit kn-menu.errors kn-menu-content pre {
    font-size: 14px;
    margin-bottom: 0; }

kn-roles-table .role-permissions {
  position: relative;
  margin: 0 10px 76px 10px; }
  kn-roles-table .role-permissions > .scrollable {
    overflow-x: auto;
    margin: 0 54px 0 220px; }
  kn-roles-table .role-permissions table {
    border-collapse: separate;
    border-spacing: 0; }
    kn-roles-table .role-permissions table thead th {
      position: relative;
      width: 54px;
      min-width: 54px;
      height: 270px;
      padding: 0; }
      kn-roles-table .role-permissions table thead th.permission:not(:nth-child(2))::before {
        content: '';
        left: 0;
        bottom: 10px;
        position: absolute;
        display: block;
        width: 1px;
        height: calc(100% - 20px); }
    kn-roles-table .role-permissions table tbody td {
      padding: 0;
      height: 54px; }
    kn-roles-table .role-permissions table tbody.permissions-matrix td kn-checkbox {
      justify-content: center; }
    kn-roles-table .role-permissions table tbody.add-new-input td {
      height: 0; }
    kn-roles-table .role-permissions table div.rotate {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 54px;
      bottom: 0;
      left: 100%;
      transform: rotate(270deg);
      transform-origin: 0 100%;
      text-align: left; }
    kn-roles-table .role-permissions table th.name, kn-roles-table .role-permissions table td.name {
      position: absolute;
      left: 0;
      width: 220px;
      text-align: center;
      vertical-align: middle; }
      kn-roles-table .role-permissions table th.name kn-input, kn-roles-table .role-permissions table td.name kn-input {
        margin: 10px; }
        kn-roles-table .role-permissions table th.name kn-input input, kn-roles-table .role-permissions table td.name kn-input input {
          font-weight: 700; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.name, kn-roles-table .role-permissions table td.permission span.description {
      display: block;
      white-space: nowrap;
      padding: 1px 10px; }
    kn-roles-table .role-permissions table th.permission span.name, kn-roles-table .role-permissions table td.permission span.name {
      font-size: 16px;
      font-weight: bold; }
    kn-roles-table .role-permissions table th.permission span.description, kn-roles-table .role-permissions table td.permission span.description {
      font-size: 14px;
      font-weight: 400;
      opacity: 0.7; }
    kn-roles-table .role-permissions table th.spacer, kn-roles-table .role-permissions table td.spacer {
      width: 100%;
      min-width: 0; }
    kn-roles-table .role-permissions table th.actions, kn-roles-table .role-permissions table td.actions {
      position: absolute;
      right: 0;
      width: 54px; }
  kn-roles-table .role-permissions .actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 10px;
    height: 34px; }
    kn-roles-table .role-permissions .actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-roles-table .role-permissions .actions button:hover, kn-roles-table .role-permissions .actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-roles-table .role-permissions .actions button:active {
      opacity: 1; }
    kn-roles-table .role-permissions .actions button[disabled] {
      opacity: 0.3;
      background: none; }

kn-permission-actions-select kn-menu-content {
  position: absolute;
  z-index: 100;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3));
  padding: 10px;
  border-radius: 5px;
  transform: translate(calc(-50% + 23px), 5px); }
  kn-permission-actions-select kn-menu-content > div {
    padding: 5px; }
    kn-permission-actions-select kn-menu-content > div kn-checkbox label {
      flex: 1; }
  kn-permission-actions-select kn-menu-content::before {
    position: absolute;
    left: calc(50% - 10px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

kn-user-edit table.user-roles {
  width: 100%;
  border-collapse: collapse;
  margin: 13px 0 10px 0; }
  kn-user-edit table.user-roles tbody tr {
    height: 40px; }
  kn-user-edit table.user-roles tbody td {
    transition: 0.3s background-color ease;
    padding: 10px 0 10px 10px; }
  kn-user-edit table.user-roles td.actions {
    text-align: right; }
  kn-user-edit table.user-roles thead, kn-user-edit table.user-roles td.user-role input {
    font-weight: bold; }
  kn-user-edit table.user-roles thead {
    text-align: center; }
    kn-user-edit table.user-roles thead tr:first-child {
      text-align: center; }
    kn-user-edit table.user-roles thead tr:last-child {
      height: auto; }
      kn-user-edit table.user-roles thead tr:last-child td {
        font-weight: 400;
        font-style: italic;
        opacity: 0.7;
        padding-bottom: 5px; }
        kn-user-edit table.user-roles thead tr:last-child td > div {
          display: flex; }
          kn-user-edit table.user-roles thead tr:last-child td > div > span {
            flex: 1; }
  kn-user-edit table.user-roles td.user-role {
    width: 200px; }
  kn-user-edit table.user-roles td.user-role-customer-branch {
    width: 250px; }
    kn-user-edit table.user-roles td.user-role-customer-branch > div {
      display: flex; }
      kn-user-edit table.user-roles td.user-role-customer-branch > div input {
        text-align: right;
        width: 100%; }
  kn-user-edit table.user-roles td.actions button {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    margin: 0 10px;
    height: 34px; }
    kn-user-edit table.user-roles td.actions button i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-user-edit table.user-roles td.actions button:hover, kn-user-edit table.user-roles td.actions button:focus {
      opacity: 1;
      text-decoration: none; }
    kn-user-edit table.user-roles td.actions button:active {
      opacity: 1; }
    kn-user-edit table.user-roles td.actions button[disabled] {
      opacity: 0.3;
      background: none; }
  kn-user-edit table.user-roles td.actions button:first-child {
    margin-left: 0; }
  kn-user-edit table.user-roles td.actions button:last-child {
    margin-right: 0; }

kn-control-messages {
  position: relative;
  height: 15px; }
  kn-control-messages > div {
    position: absolute;
    display: block; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave {
      transition: 0.3s all ease; }
    kn-control-messages > div.kn-enter, kn-control-messages > div.kn-leave.kn-leave-active {
      top: -5px;
      opacity: 0; }
    kn-control-messages > div.kn-leave, kn-control-messages > div.kn-enter.kn-enter-active {
      top: 0;
      opacity: 1; }

app-database-manage kn-tabs {
  position: relative;
  padding-top: 50px;
  margin: 0 0 20px 0; }
  app-database-manage kn-tabs .tab-group {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 400; }
  app-database-manage kn-tabs a i.material-icons {
    font-size: 72px; }
  app-database-manage kn-tabs a strong {
    font-weight: 400; }
  app-database-manage kn-tabs kn-tab {
    position: relative;
    padding: 30px;
    justify-content: center;
    text-align: center; }
    app-database-manage kn-tabs kn-tab .actions {
      margin: 20px auto 0 auto; }
    app-database-manage kn-tabs kn-tab p.note {
      margin-top: 0;
      font-style: italic;
      opacity: 0.5; }
    app-database-manage kn-tabs kn-tab .select-database {
      margin: 20px auto;
      padding: 20px;
      width: 400px; }
    app-database-manage kn-tabs kn-tab::after {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 10;
      pointer-events: none;
      transition: 0.3s all ease; }
    app-database-manage kn-tabs kn-tab.kn-drag-over::after {
      opacity: 1;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      left: 10px;
      top: 10px; }

kn-datagrid tr td.strong {
  font-weight: bold; }

kn-datagrid tr td.highlight {
  color: #802020; }

kn-datagrid tr td.note {
  color: gray;
  font-size: 0.8em; }

kn-datagrid tr td.overflow {
  overflow: visible; }

kn-datagrid kn-cell-renderer span.user-database-tag, kn-datagrid kn-cell-renderer span.user-role-tag {
  color: white;
  padding: 4px 7px;
  margin: 0 5px 0 0;
  border-radius: 2px; }

kn-datagrid kn-cell-renderer span.user-ownership {
  color: rgba(0, 0, 0, 0.3); }
  kn-datagrid kn-cell-renderer span.user-ownership > span {
    color: black;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 4px;
    margin: 0 4px;
    border-radius: 2px; }

kn-datepicker .viewport {
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-datepicker .viewport::before {
    content: '';
    position: absolute;
    display: block;
    left: calc(50% - 10px);
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  kn-datepicker .viewport.kn-enter, kn-datepicker .viewport.kn-leave {
    transition: 0.3s opacity ease, 0.3s margin-top ease, 0.3s transform ease; }
    kn-datepicker .viewport.kn-enter kn-date-view, kn-datepicker .viewport.kn-enter kn-day-view, kn-datepicker .viewport.kn-enter kn-hour-view, kn-datepicker .viewport.kn-leave kn-date-view, kn-datepicker .viewport.kn-leave kn-day-view, kn-datepicker .viewport.kn-leave kn-hour-view {
      opacity: 1 !important;
      transform: none !important; }
  kn-datepicker .viewport.kn-enter {
    opacity: 0;
    margin-top: 10px; }
  kn-datepicker .viewport.kn-leave, kn-datepicker .viewport.kn-enter.kn-enter-active {
    opacity: 1;
    margin-top: 0; }
  kn-datepicker .viewport.kn-leave.kn-leave-active {
    opacity: 0;
    margin-top: 10px; }

kn-datepicker kn-date-header a, kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a, kn-datepicker kn-time-header a:hover {
  text-decoration: none; }

kn-datepicker kn-date-header a {
  text-align: center;
  font-weight: 900; }

kn-datepicker kn-time-header a {
  font-weight: 400;
  border-radius: 10%; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-hour-view.kn-enter, kn-datepicker kn-hour-view.kn-leave {
  transition: 0.3s opacity ease, 0.3s transform ease; }

kn-datepicker kn-date-view.kn-enter, kn-datepicker kn-day-view.kn-enter, kn-datepicker kn-hour-view.kn-enter {
  opacity: 0;
  transform: scale(0.7, 0.7); }

kn-datepicker kn-date-view.kn-leave, kn-datepicker kn-date-view.kn-enter.kn-enter-active, kn-datepicker kn-day-view.kn-leave, kn-datepicker kn-day-view.kn-enter.kn-enter-active, kn-datepicker kn-hour-view.kn-leave, kn-datepicker kn-hour-view.kn-enter.kn-enter-active {
  opacity: 1;
  transform: scale(1, 1); }

kn-datepicker kn-date-view.kn-leave.kn-leave-active, kn-datepicker kn-day-view.kn-leave.kn-leave-active, kn-datepicker kn-hour-view.kn-leave.kn-leave-active {
  opacity: 0;
  transform: scale(1.4, 1.4); }

kn-datepicker kn-month-view.animated {
  transition: 0.3s transform ease; }

kn-datepicker kn-month-view th, kn-datepicker kn-month-view td {
  text-align: center;
  border: 1px solid transparent; }

kn-datepicker kn-month-view th {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase; }

kn-datepicker kn-month-view td a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker kn-month-view td a, kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:active, kn-datepicker kn-month-view td a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    outline: none; }

kn-datepicker .picker-relative-container {
  position: relative;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  margin: 22px; }
  kn-datepicker .picker-relative-container.format-12-hours {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    margin: 40px; }
  kn-datepicker .picker-relative-container .center {
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    z-index: 1;
    border-radius: 50%; }
  kn-datepicker .picker-relative-container .gauge {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 1px;
    transform-origin: 0 0; }
  kn-datepicker .picker-relative-container li {
    text-align: center;
    border: 1px solid transparent; }
    kn-datepicker .picker-relative-container li::before {
      border-radius: 50%; }
    kn-datepicker .picker-relative-container li.minor a {
      width: 13px;
      height: 13px;
      line-height: 13px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent;
      font-size: 0; }
      kn-datepicker .picker-relative-container li.minor a, kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:active, kn-datepicker .picker-relative-container li.minor a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
        outline: none; }
    kn-datepicker .picker-relative-container li:not(.minor) a {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid transparent; }
      kn-datepicker .picker-relative-container li:not(.minor) a, kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:active, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        text-decoration: none;
        z-index: 1; }
      kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
        outline: none; }

kn-datepicker .period-selector a {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent; }
  kn-datepicker .period-selector a, kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:active, kn-datepicker .period-selector a:focus {
    text-decoration: none;
    z-index: 1; }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    outline: none; }

.kn-ripple {
  overflow: hidden;
  position: relative; }

.kn-ripple.kn-ripple-unbounded {
  overflow: visible; }

.kn-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0); }

kn-export-button kn-menu {
  display: block;
  position: relative; }
  kn-export-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-export-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-export-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-export-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-export-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-export-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-export-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-export-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-export-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-export-button kn-menu kn-spinner {
    left: 32px; }

button.form-button, .form-input button {
  position: relative;
  width: 100%;
  height: 50px;
  border: none;
  outline: none;
  padding: 0 30px;
  font-size: 16px;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s; }
  button.form-button[disabled], .form-input button[disabled] {
    box-shadow: none; }
  button.form-button::-moz-focus-inner, .form-input button::-moz-focus-inner {
    border: none; }
  button.form-button::after, .form-input button::after {
    content: '';
    position: absolute;
    pointer-events: none;
    left: 50%;
    bottom: -25%;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 50%;
    transition: 0.2s all ease; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
    button.form-button:not([disabled]):active::after, .form-input button:not([disabled]):active::after {
      bottom: -70%;
      left: -50%;
      height: 200%;
      width: 200%;
      opacity: 0.5; }

@keyframes reveal-back-link {
  to {
    opacity: 1;
    left: calc(50% - 700px); } }

.form-container.heading, .form-container .form-loader-bar {
  position: relative; }
  .form-container.heading::before, .form-container.heading::after, .form-container .form-loader-bar::before, .form-container .form-loader-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    height: 5px;
    z-index: 3; }
  .form-container.heading::before, .form-container .form-loader-bar::before {
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.3s opacity ease; }
  .form-container.heading::after, .form-container .form-loader-bar::after {
    left: 0%;
    right: 100%;
    opacity: 0; }

.loading .form-container.heading::before, .loading .form-container.heading::after, .loading .form-container .form-loader-bar::before, .loading .form-container .form-loader-bar::after {
  opacity: 1; }

.loading .form-container.heading::after, .loading .form-container .form-loader-bar::after {
  animation: indeterminate 1s linear infinite; }

.form-container {
  margin: 30px 0; }
  .form-container.heading {
    position: relative;
    margin: 0;
    padding: 0; }
  .form-container h1, .form-container p, .form-container .form-layout {
    margin: auto;
    max-width: 1200px; }
  .form-container h1 {
    padding: 30px 0;
    margin: 0 auto;
    border: none; }
  .form-container .form-back {
    position: absolute;
    opacity: 0;
    left: calc(50% - 750px);
    top: calc(50% - 32px);
    transition: 0.3s all ease;
    animation-name: reveal-back-link;
    animation-duration: 1s;
    animation-fill-mode: forwards; }
    .form-container .form-back::after {
      content: '';
      position: absolute;
      display: block;
      width: 64px;
      height: 64px;
      left: 20px;
      border-radius: 50%;
      transition: 0.3s all ease;
      transform: rotateY(45deg); }
    .form-container .form-back i {
      position: absolute;
      z-index: 10;
      font-size: 48px;
      line-height: 64px;
      text-align: center;
      width: 64px;
      height: 64px; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      left: 0;
      transform: rotateY(0); }
    .form-container .form-back:active::after {
      transition: none; }

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px; }
  .form-footer div:only-child {
    margin-left: auto; }

.form-actions-info {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  margin: 0 1em;
  white-space: nowrap; }
  .form-actions-info i.material-icons {
    padding: 0 0.3em; }

.form-buttons {
  text-align: right; }
  .form-buttons button {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    width: auto;
    margin-left: 10px;
    padding: 0 30px; }
    .form-buttons button[disabled] {
      box-shadow: none; }
    .form-buttons button::-moz-focus-inner {
      border: none; }
    .form-buttons button::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    .form-buttons button:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      .form-buttons button:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }

.form-errors {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .form-errors li {
    margin: 2px 0;
    padding: 0;
    display: flex;
    align-items: center; }
    .form-errors li strong {
      display: flex;
      align-items: center;
      color: white;
      padding: 0.3em 0.5em;
      margin-right: 1em; }
      .form-errors li strong i {
        padding-right: 0.3em; }

.form-layout .info-bar {
  margin: 15px;
  padding: 15px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .info-bar strong {
    font-weight: 400; }

.form-layout .form-grid {
  display: flex;
  flex-direction: column; }

.form-layout .form-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 2px; }
  .form-layout .form-box .title {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 5px;
    height: 34px;
    line-height: 34px; }
    .form-layout .form-box .title h2 {
      flex: 1;
      padding-left: 8px;
      margin: 0;
      font-weight: 800;
      font-size: 1em;
      text-transform: uppercase; }
    .form-layout .form-box .title .side-action {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      height: 24px;
      margin-left: 5px; }
      .form-layout .form-box .title .side-action i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .title .side-action:hover, .form-layout .form-box .title .side-action:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .title .side-action:active {
        opacity: 1; }
      .form-layout .form-box .title .side-action[disabled] {
        opacity: 0.3;
        background: none; }
  .form-layout .form-box .content {
    flex-grow: 1;
    padding: 0 15px 15px 15px; }
    .form-layout .form-box .content:first-child {
      padding-top: 15px; }
  .form-layout .form-box .info-bar {
    margin: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none; }
  .form-layout .form-box .container {
    display: flex; }
    .form-layout .form-box .container .content {
      flex: 1;
      width: 0; }
    .form-layout .form-box .container .side-actions {
      display: flex;
      align-items: center;
      justify-content: center; }
      .form-layout .form-box .container .side-actions a {
        display: inline-block;
        margin: 0;
        padding: 5px;
        opacity: 0.7;
        border: none;
        outline: none;
        background: none;
        cursor: pointer;
        height: 24px;
        margin: 10px; }
        .form-layout .form-box .container .side-actions a i {
          vertical-align: top;
          transition: all 0.5s ease;
          display: inline-block;
          width: 24px;
          height: 24px;
          overflow: hidden; }
        .form-layout .form-box .container .side-actions a:hover, .form-layout .form-box .container .side-actions a:focus {
          opacity: 1;
          text-decoration: none; }
        .form-layout .form-box .container .side-actions a:active {
          opacity: 1; }
        .form-layout .form-box .container .side-actions a[disabled] {
          opacity: 0.3;
          background: none; }
  .form-layout .form-box .alt p {
    margin: 0.5em;
    padding: 0; }
  .form-layout .form-box .alt-actions {
    display: flex; }
    .form-layout .form-box .alt-actions a {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 5px 7px;
      height: 24px; }
      .form-layout .form-box .alt-actions a i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .form-layout .form-box .alt-actions a:hover, .form-layout .form-box .alt-actions a:focus {
        opacity: 1;
        text-decoration: none; }
      .form-layout .form-box .alt-actions a:active {
        opacity: 1; }
      .form-layout .form-box .alt-actions a[disabled] {
        opacity: 0.3;
        background: none; }
      .form-layout .form-box .alt-actions a i.material-icons {
        margin-right: 5px; }

.form-layout .form-inline-box {
  margin: 15px; }
  .form-layout .form-inline-box .title h3 {
    flex: 1;
    padding: 2px 0 0 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center; }

.form-layout .form-expanssion {
  margin: 15px 0;
  z-index: 1; }
  .form-layout .form-expanssion .form-box {
    margin: 0 15px;
    transition: 0.2s margin ease;
    position: relative;
    box-shadow: none; }
    .form-layout .form-expanssion .form-box::before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }
  .form-layout .form-expanssion .form-box.expanded {
    margin: 30px 15px; }
  .form-layout .form-expanssion .form-box:first-child {
    margin-top: 0; }
  .form-layout .form-expanssion .form-box:last-child {
    margin-bottom: 0; }

.form-layout .row {
  display: flex;
  flex-direction: row;
  width: 100%; }

.form-layout .column {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .form-layout .column .column-spacer {
    height: 100%; }

.form-layout .form-input {
  flex: 1;
  position: relative;
  padding: 3px 0;
  min-width: 0; }
  .form-layout .form-input.inlined {
    margin: 0;
    flex-grow: 0;
    min-width: auto; }
  .form-layout .form-input > * {
    margin: 0 10px; }
  .form-layout .form-input > input, .form-layout .form-input > select {
    width: calc(100% - 20px); }
  .form-layout .form-input > kn-control-messages {
    margin: -18px 0 0 15px; }

.form-layout .flex-1 {
  flex: 1; }

.form-layout .flex-2 {
  flex: 2; }

.form-layout .flex-3 {
  flex: 3; }

.form-layout .flex-4 {
  flex: 4; }

.form-layout .flex-5 {
  flex: 5; }

.form-layout .flex-6 {
  flex: 6; }

.form-layout .flex-start {
  justify-content: flex-start; }

.form-layout .flex-end {
  justify-content: flex-end; }

.form-layout .row.flex-reverse {
  flex-direction: row-reverse; }

.form-layout .column.flex-reverse {
  flex-direction: column-reverse; }

.form-layout .popover {
  position: relative;
  height: 34px; }
  .form-layout .popover kn-menu-activator {
    cursor: pointer; }
  .form-layout .popover .side-action {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    height: 24px; }
    .form-layout .popover .side-action i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .form-layout .popover .side-action:hover, .form-layout .popover .side-action:focus {
      opacity: 1;
      text-decoration: none; }
    .form-layout .popover .side-action:active {
      opacity: 1; }
    .form-layout .popover .side-action[disabled] {
      opacity: 0.3;
      background: none; }

kn-attached-portal .kn-form-layout-menu-content {
  z-index: 200;
  position: absolute;
  left: calc(100% - 490px);
  top: 40px;
  width: 500px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    font-weight: normal;
    margin: 0;
    padding: 15px 15px 15px 20px; }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 24px; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:focus {
      opacity: 1;
      text-decoration: none; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:active {
      opacity: 1; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close[disabled] {
      opacity: 0.3;
      background: none; }
  kn-attached-portal .kn-form-layout-menu-content [hidden] {
    display: none; }
  kn-attached-portal .kn-form-layout-menu-content::before {
    position: absolute;
    left: calc(100% - 37px);
    top: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }

.form-slots-table {
  width: 100%;
  table-layout: fixed;
  margin-top: 2em;
  border-collapse: collapse; }
  .form-slots-table th {
    padding: 5px;
    font-weight: 400;
    position: relative; }
    .form-slots-table th::before {
      content: '';
      position: absolute;
      display: block;
      width: calc(100% - 22px);
      height: 100%;
      border: 1px solid transparent;
      top: 0;
      left: 11px; }
    .form-slots-table th.disabled::before {
      background-color: transparent; }
  .form-slots-table td {
    padding: 10px 0; }
  .form-slots-table caption {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1; }

kn-sticky.sticked > .grid-panel {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.grid-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px; }
  .grid-panel .selector {
    width: 200px; }
  .grid-panel .actions, .grid-panel kn-grid-actions {
    display: flex;
    flex-grow: 1;
    font-size: 0; }
  .grid-panel .widgets {
    display: flex; }
    .grid-panel .widgets > *:not(:last-child) {
      margin-right: 10px; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    padding: 5px 7px;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    display: inline-block;
    line-height: 24px; }
    .grid-panel .selector a i, .grid-panel .actions a i, .grid-panel kn-grid-actions a i {
      vertical-align: top;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      opacity: 1; }
      .grid-panel .selector a:hover i, .grid-panel .actions a:hover i, .grid-panel kn-grid-actions a:hover i {
        opacity: 1; }
    .grid-panel .selector a:hover, .grid-panel .selector a:focus, .grid-panel .selector a:active, .grid-panel .actions a:hover, .grid-panel .actions a:focus, .grid-panel .actions a:active, .grid-panel kn-grid-actions a:hover, .grid-panel kn-grid-actions a:focus, .grid-panel kn-grid-actions a:active {
      text-decoration: none; }

kn-grid-preset kn-menu {
  display: block;
  position: relative;
  width: 300px; }
  kn-grid-preset kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-preset kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-preset kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-preset kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-preset kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-preset kn-menu kn-menu-activator {
    display: block;
    opacity: 1; }

kn-grid-preset kn-menu-activator > div {
  padding: 0;
  margin: 0;
  line-height: 24px;
  display: flex;
  align-items: center; }
  kn-grid-preset kn-menu-activator > div[hidden] {
    display: none; }
  kn-grid-preset kn-menu-activator > div i {
    padding: 0; }
  kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
      opacity: 1; }
  kn-grid-preset kn-menu-activator > div span {
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    kn-grid-preset kn-menu-activator > div span.template-name {
      font-style: normal; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.ownerUid {
        font-size: 80%;
        font-style: italic; }
      kn-grid-preset kn-menu-activator > div span.template-name > i.material-icons {
        font-size: 125%;
        vertical-align: middle; }
  kn-grid-preset kn-menu-activator > div input {
    height: 34px;
    padding: 0 5px;
    width: calc(100% - 10px);
    min-width: 0;
    border: none;
    background-color: transparent;
    font-family: Source Sans Pro;
    font-size: 16px;
    outline: none; }
  kn-grid-preset kn-menu-activator > div a {
    opacity: 0.7; }

kn-grid-preset kn-menu-content kn-select {
  width: 100%; }

kn-grid-preset kn-menu-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-grid-preset kn-menu-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-grid-preset kn-menu-content li:not(.user-select) span, kn-grid-preset kn-menu-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-grid-preset kn-menu-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-grid-preset kn-menu-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  width: 100%; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.ownerUid {
      font-size: 80%;
      font-style: italic; }
    kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span > i.material-icons {
      font-size: 125%;
      vertical-align: middle; }

kn-grid-query-filter kn-menu {
  display: block;
  position: relative; }
  kn-grid-query-filter kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-query-filter kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-query-filter kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-query-filter kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 5px 7px; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50px;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
      position: absolute;
      left: calc(50% - 10px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-attached-portal .kn-grid-menu-content {
    position: absolute;
    z-index: 20;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-attached-portal .kn-grid-menu-content::before {
      position: absolute;
      left: calc(100% - 100px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-grid-query-filter kn-menu kn-menu-activator {
    padding: 0; }
    kn-grid-query-filter kn-menu kn-menu-activator > * {
      height: 24px;
      padding: 5px;
      transition: color 0.5s ease; }
      kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
        opacity: 1; }
    kn-grid-query-filter kn-menu kn-menu-activator > span {
      display: flex; }
    kn-grid-query-filter kn-menu kn-menu-activator > a {
      opacity: 0.7; }

kn-grid-reset {
  display: block;
  position: relative;
  padding: 0; }
  kn-grid-reset.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-grid-reset kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-grid-reset kn-menu-activator[hidden] {
      display: none; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:focus i {
      opacity: 1; }
    kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:focus, kn-grid-reset kn-menu-activator:active {
      text-decoration: none; }
    kn-grid-reset kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-grid-reset kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-grid-reset kn-menu-activator {
    padding: 0 7px; }
    kn-grid-reset kn-menu-activator i {
      padding: 5px 0; }
      kn-grid-reset kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-grid-reset > *:not(.disabled) {
    height: 24px;
    padding: 5px;
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus {
      opacity: 1; }
  kn-grid-reset > span {
    display: flex; }
  kn-grid-reset > a {
    opacity: 0.7;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px; }
    kn-grid-reset > a.disabled {
      cursor: default;
      pointer-events: none; }

kn-grid-search {
  position: relative;
  height: 50px;
  margin: -8px -8px -8px 0; }
  kn-grid-search input[type='search'] {
    border: none;
    padding: 0 10px 0 40px;
    height: 100%;
    width: 0;
    vertical-align: top;
    transition: 0.3s all ease; }
    kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
      width: 250px;
      outline: none; }
  kn-grid-search::after {
    content: '';
    display: block;
    position: absolute;
    pointer-events: none;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center; }

header.liner {
  height: 80px;
  display: flex;
  justify-content: space-between;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  header.liner > div {
    display: flex;
    align-items: center; }
  header.liner .logo {
    outline: none; }
    header.liner .logo img {
      margin: 10px; }
  header.liner button.main-action {
    position: relative;
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 30px;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    margin: 0 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
    header.liner button.main-action[disabled] {
      box-shadow: none; }
    header.liner button.main-action::-moz-focus-inner {
      border: none; }
    header.liner button.main-action::after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 50%;
      bottom: -25%;
      width: 0;
      height: 0;
      opacity: 0;
      border-radius: 50%;
      transition: 0.2s all ease; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); }
    header.liner button.main-action:not([disabled]):active {
      transform: scale(0.97);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
      header.liner button.main-action:not([disabled]):active::after {
        bottom: -70%;
        left: -50%;
        height: 200%;
        width: 200%;
        opacity: 0.5; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
  header.liner kn-menu {
    z-index: 2;
    position: relative; }
    header.liner kn-menu.expanded {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
    header.liner kn-menu kn-menu-activator {
      display: flex;
      padding: 16px;
      transition: all 0.3s ease;
      cursor: pointer;
      outline: none; }
    header.liner kn-menu kn-menu-content {
      position: absolute;
      min-width: 100%;
      left: 0;
      margin-top: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      z-index: 100; }
      header.liner kn-menu kn-menu-content[hidden] {
        opacity: 0;
        margin-top: -10px;
        transition: all 0.3s ease; }
      header.liner kn-menu kn-menu-content ul {
        padding: 0;
        margin: 0;
        list-style-type: none; }
        header.liner kn-menu kn-menu-content ul li {
          padding: 0;
          margin: 0; }
      header.liner kn-menu kn-menu-content a {
        padding: 10px;
        display: block;
        white-space: nowrap;
        transition: all 0.3s ease; }
        header.liner kn-menu kn-menu-content a:hover {
          text-decoration: none; }

kn-attached-portal .header-liner.kn-menu-content {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 100; }
  kn-attached-portal .header-liner.kn-menu-content[hidden] {
    opacity: 0;
    margin-top: -10px;
    transition: all 0.3s ease; }
  kn-attached-portal .header-liner.kn-menu-content ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    kn-attached-portal .header-liner.kn-menu-content ul li {
      padding: 0;
      margin: 0; }
  kn-attached-portal .header-liner.kn-menu-content a {
    padding: 10px;
    display: block;
    white-space: nowrap;
    transition: all 0.3s ease; }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      text-decoration: none; }

header.liner .database-menu::before, header.liner .database-menu::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 1px;
  height: 40px;
  transition: top 0.5s ease; }

header.liner .database-menu::before {
  left: 0; }

header.liner .database-menu::after {
  right: 0; }

header.liner .database-menu.expanded::before, header.liner .database-menu.expanded::after, header.liner .database-menu:hover::before, header.liner .database-menu:hover::after {
  top: -50px; }

header.liner .database-menu.database-menu-hidden {
  display: none; }

header.liner .database-menu kn-database-selector {
  border: none; }
  header.liner .database-menu kn-database-selector .filter {
    font-size: 0; }
    header.liner .database-menu kn-database-selector .filter .clear {
      padding: 0 20px; }
    header.liner .database-menu kn-database-selector .filter:hover .clear {
      background-image: url("../kn-theme-strio/img/clear.svg"); }
  header.liner .database-menu kn-database-selector ul {
    max-height: 70%; }
    header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
      left: 0; }
    header.liner .database-menu kn-database-selector ul li a:hover {
      text-decoration: none; }

header.liner .database-menu kn-menu-activator {
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  height: 48px;
  padding-right: 40px; }
  header.liner .database-menu kn-menu-activator strong {
    display: block;
    font-weight: normal; }
  header.liner .database-menu kn-menu-activator .description {
    display: block; }
  header.liner .database-menu kn-menu-activator::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 32px;
    width: 16px;
    height: 16px;
    mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    -webkit-mask: url("../kn-theme-strio/img/selector-expand.svg") no-repeat center;
    transform: rotate(-90deg);
    transition: transform 0.5s ease; }
  header.liner .database-menu kn-menu-activator:hover::after {
    transform: rotate(0deg); }

header.liner .database-menu.expanded kn-menu-activator::after {
  transform: rotate(-180deg); }

header.liner > div:first-child, header.liner kn-navbar {
  flex: 1; }

header.liner nav > ul, header.liner kn-navbar > ul {
  height: 80px;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  display: flex; }
  header.liner nav > ul > li, header.liner kn-navbar > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
      display: block;
      margin: 10px 3px;
      height: 58px;
      padding: 0 18px;
      line-height: 58px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      header.liner nav > ul > li > a, header.liner nav > ul > li > a:hover, header.liner nav > ul > li > a:focus, header.liner nav > ul > li > kn-menu-activator, header.liner nav > ul > li > kn-menu-activator:hover, header.liner nav > ul > li > kn-menu-activator:focus, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > a:focus, header.liner kn-navbar > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > kn-menu-activator:focus {
        text-decoration: none; }

header.liner kn-navbar kn-menu {
  margin: 10px 3px;
  height: 60px;
  padding: 0 !important; }

header.liner kn-navbar kn-menu-activator {
  height: 60px;
  padding: 0 8px;
  align-items: center; }

kn-attached-portal .kn-navbar-expansion ul {
  margin: 0 10px;
  padding: 0;
  list-style-type: none; }
  kn-attached-portal .kn-navbar-expansion ul > li {
    margin: 0;
    padding: 0; }
    kn-attached-portal .kn-navbar-expansion ul > li > a {
      display: block;
      padding: 0 18px;
      transition: 0.3s all ease;
      border: 1px solid transparent;
      outline: none; }
      kn-attached-portal .kn-navbar-expansion ul > li > a, kn-attached-portal .kn-navbar-expansion ul > li > a:hover, kn-attached-portal .kn-navbar-expansion ul > li > a:focus {
        text-decoration: none; }

header.liner .user-menu kn-menu-activator {
  min-width: 120px;
  flex-direction: row-reverse;
  align-items: center; }
  header.liner .user-menu kn-menu-activator img {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    background-image: url("../img/noavatar.svg"); }
  header.liner .user-menu kn-menu-activator kn-menu-content {
    right: 0; }

header.liner .user-menu kn-menu-content {
  right: 0;
  left: initial; }
  header.liner .user-menu kn-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-attached-portal .user-menu-content {
  right: 0;
  left: initial; }
  kn-attached-portal .user-menu-content .separator::before {
    content: '';
    display: block;
    height: 1px;
    width: calc(100% - 20px);
    margin: 10px; }

kn-input label, kn-input [kn-hint] {
  font-size: 14px; }

kn-input [kn-prefix], kn-input [kn-suffix] {
  display: flex; }

kn-input .kn-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-input .kn-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input .kn-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-input.disabled .kn-input-container, kn-input.readonly .kn-input-container {
  border-bottom-style: dotted; }

kn-input.focused .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.focused .kn-input-underline::before, kn-input.focused .kn-input-underline::after {
  z-index: 111; }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-input.ng-touched.ng-pending .kn-input-underline::before, kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::after {
  top: -4px;
  height: 5px; }

kn-input.ng-touched.ng-pending .kn-input-underline::after,
kn-input.ng-touched.pending .kn-input-underline::after,
kn-input.focused.ng-pending .kn-input-underline::after,
kn-input.focused.pending .kn-input-underline::after,
kn-input.focused.loading .kn-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-input input {
  min-height: 24px; }
  kn-input input:-webkit-autofill {
    -webkit-animation-name: kill-autofill;
    -webkit-animation-fill-mode: both; }

@-webkit-keyframes kill-autofill {
  to {
    background: transparent; } }

kn-date-input label, kn-date-input [kn-hint] {
  font-size: 14px; }

kn-date-input [kn-prefix], kn-date-input [kn-suffix] {
  display: flex; }

kn-date-input .kn-date-input-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-date-input .kn-date-input-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input .kn-date-input-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-date-input.disabled .kn-date-input-container, kn-date-input.readonly .kn-date-input-container {
  border-bottom-style: dotted; }

kn-date-input.focused .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.focused .kn-date-input-underline::before, kn-date-input.focused .kn-date-input-underline::after {
  z-index: 111; }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before, kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::after {
  top: -4px;
  height: 5px; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::after,
kn-date-input.ng-touched.pending .kn-date-input-underline::after,
kn-date-input.focused.ng-pending .kn-date-input-underline::after,
kn-date-input.focused.pending .kn-date-input-underline::after,
kn-date-input.focused.loading .kn-date-input-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-date-input input {
  min-height: 24px;
  text-align: right; }

kn-date-input .input-button i.material-icons {
  opacity: 0.5;
  transition: 0.3s opacity ease; }
  kn-date-input .input-button i.material-icons:hover, kn-date-input .input-button i.material-icons:focus {
    opacity: 1; }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  opacity: 0.5; }

kn-date-input .input-button > a {
  display: flex;
  text-decoration: none; }

@-moz-document url-prefix() {
  kn-date-input input {
    clip-path: inset(0 25px 0 0);
    margin-right: -20px !important;
    min-width: 70px !important; } }

kn-kcuni-settings {
  display: block;
  margin: 20px; }
  kn-kcuni-settings p strong {
    font-weight: 400; }
  kn-kcuni-settings .settings {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 10px;
    margin: 0 -10px 10px; }
    kn-kcuni-settings .settings kn-input {
      flex: 1; }
    kn-kcuni-settings .settings button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer;
      margin-left: 10px; }
      kn-kcuni-settings .settings button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      kn-kcuni-settings .settings button:hover, kn-kcuni-settings .settings button:focus {
        opacity: 1;
        text-decoration: none; }
      kn-kcuni-settings .settings button:active {
        opacity: 1; }
      kn-kcuni-settings .settings button[disabled] {
        opacity: 0.3;
        background: none; }
  kn-kcuni-settings .message {
    padding: 10px;
    vertical-align: center; }
    kn-kcuni-settings .message i {
      vertical-align: bottom; }
  kn-kcuni-settings .doc-link {
    display: block;
    padding-top: 10px;
    margin-bottom: 20px;
    float: left; }
    kn-kcuni-settings .doc-link.app-link {
      float: right; }

.app-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; }
  .app-loading-screen p {
    padding: 5px 10px;
    margin: 0;
    border-radius: 3px; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 600px;
  font-family: 'Source Sans Pro';
  font-size: 16px; }

input {
  font-family: 'Source Sans Pro';
  font-size: 16px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo 2'; }

h1 {
  font-weight: 300;
  font-size: 48px;
  padding-bottom: 10px; }

a {
  text-decoration: none; }

a:hover, a:focus {
  text-decoration: underline; }

kn-app-main {
  display: block; }

[knBackgroundFocusable] {
  outline: none; }

.country-display,
kn-select.country .option,
kn-select.country .kn-option-content {
  height: 24px;
  line-height: 24px; }
  .country-display img,
  kn-select.country .option img,
  kn-select.country .kn-option-content img {
    width: 24px;
    height: 16px;
    margin: 4px 4px 4px 0;
    vertical-align: bottom;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.flat-button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer; }
  .flat-button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  .flat-button:hover, .flat-button:focus {
    opacity: 1;
    text-decoration: none; }
  .flat-button:active {
    opacity: 1; }
  .flat-button[disabled] {
    opacity: 0.3;
    background: none; }

.flat-table {
  width: 100%;
  border-collapse: collapse; }
  .flat-table tbody tr {
    height: 55px; }
  .flat-table tbody td {
    transition: 0.3s background-color ease;
    padding: 10px; }
  .flat-table thead td {
    padding: 10px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.7; }
  .flat-table .actions {
    text-align: right; }
    .flat-table .actions button {
      display: inline-block;
      margin: 0;
      padding: 5px;
      opacity: 0.7;
      border: none;
      outline: none;
      background: none;
      cursor: pointer; }
      .flat-table .actions button i {
        vertical-align: top;
        transition: all 0.5s ease;
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden; }
      .flat-table .actions button:hover, .flat-table .actions button:focus {
        opacity: 1;
        text-decoration: none; }
      .flat-table .actions button:active {
        opacity: 1; }
      .flat-table .actions button[disabled] {
        opacity: 0.3;
        background: none; }

kn-modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }

kn-modal.confirmation-dialog .overlay {
  display: flex;
  align-items: center;
  justify-content: center; }
  kn-modal.confirmation-dialog .overlay.kn-enter, kn-modal.confirmation-dialog .overlay.kn-leave {
    transition: 0.3s opacity ease; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container, kn-modal.confirmation-dialog .overlay.kn-leave .container {
      transition: 0.3s transform ease, 0.3s margin-top ease-out; }
  kn-modal.confirmation-dialog .overlay.kn-enter {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-enter .container {
      transform: perspective(1000px) rotate3d(1, 0, 0, 60deg); }
  kn-modal.confirmation-dialog .overlay.kn-leave, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active {
    opacity: 1; }
    kn-modal.confirmation-dialog .overlay.kn-leave .container, kn-modal.confirmation-dialog .overlay.kn-enter.kn-enter-active .container {
      transform: scale(1); }
  kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active {
    opacity: 0; }
    kn-modal.confirmation-dialog .overlay.kn-leave.kn-leave-active .container {
      transform: scale(0.8);
      margin-top: 100px; }
  kn-modal.confirmation-dialog .overlay .container {
    overflow-y: auto;
    min-width: 300px;
    max-width: 750px;
    min-height: 200px;
    display: flex;
    flex-direction: column; }
  kn-modal.confirmation-dialog .overlay .content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1; }
    kn-modal.confirmation-dialog .overlay .content span {
      white-space: pre-line;
      text-align: center;
      margin-top: 10px; }
  kn-modal.confirmation-dialog .overlay .buttons {
    display: flex; }
    kn-modal.confirmation-dialog .overlay .buttons button {
      position: relative;
      flex: 1;
      padding: 15px;
      min-width: 150px;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.5s ease, background-color 0.5s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        content: '';
        width: 60%;
        height: 3px;
        position: absolute;
        display: block;
        top: 0;
        left: 20%;
        opacity: 0.3; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover::before {
        opacity: 1; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        transition: color 0.2s ease, background-color 0.2s ease; }
      kn-modal.confirmation-dialog .overlay .buttons button:active {
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
        padding: 16px 15px 14px 15px; }

kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-options-container .kn-options-container-viewport {
    max-height: 310px; }
  kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-options-container .kn-options-container-filter .clear::before, kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-select.focused kn-options-container .kn-options-container-viewport, kn-input.focused kn-options-container .kn-options-container-viewport {
  z-index: 1000; }

kn-optgroup > strong {
  text-transform: uppercase; }

kn-option:not(.disabled):hover {
  transition: none; }

kn-option .kn-option-selector {
  transition: 0.3s color ease; }

kn-attached-portal .kn-options-container {
  display: block;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  z-index: 110; }
  kn-attached-portal .kn-options-container .kn-options-container-viewport {
    max-height: 310px;
    overflow-y: scroll; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    display: flex; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear {
      position: relative;
      font-size: 0;
      width: 40px;
      height: 40px; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before, kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        content: '';
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
        mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/search.svg") no-repeat center;
        opacity: 1; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
        mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        -webkit-mask: url("../kn-theme-strio/img/clear.svg") no-repeat center;
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::before {
        opacity: 0; }
      kn-attached-portal .kn-options-container .kn-options-container-filter .clear:hover::after {
        opacity: 1; }
    kn-attached-portal .kn-options-container .kn-options-container-filter input {
      flex: 1;
      border: none;
      background: none;
      padding: 5px;
      outline: none; }

kn-ownership-display > span {
  padding: 4px;
  margin: 0 4px;
  border-radius: 2px; }

kn-print-button kn-menu {
  display: block;
  position: relative; }
  kn-print-button kn-menu.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-print-button kn-menu kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    kn-print-button kn-menu kn-menu-activator[hidden] {
      display: none; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:focus i {
      opacity: 1; }
    kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:active {
      text-decoration: none; }
    kn-print-button kn-menu kn-menu-activator i {
      width: 24px;
      height: 24px; }
      kn-print-button kn-menu kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-print-button kn-menu kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  kn-print-button kn-menu kn-menu-activator {
    padding: 0 7px; }
    kn-print-button kn-menu kn-menu-activator i {
      padding: 5px 0; }
      kn-print-button kn-menu kn-menu-activator i.drop-down {
        padding: 5px 0;
        margin-right: -5px; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-attached-portal .kn-grid-button-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  kn-attached-portal .kn-grid-button-content li {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between; }
  kn-attached-portal .kn-grid-button-content li span {
    white-space: nowrap;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 5px;
    flex: 1; }
  kn-print-button kn-menu kn-menu-content {
    min-width: 200px; }
  kn-print-button kn-menu kn-spinner {
    left: 14px; }

kn-attached-portal .kn-menu-content.kn-print-button-content {
  min-width: 200px; }

kn-query-filter .query-filter > div[knFilterGroup] {
  display: block;
  min-width: 1000px;
  padding: 20px; }

kn-query-filter .filter-group {
  margin: auto; }
  kn-query-filter .filter-group .new-filter-actions {
    align-items: center;
    display: flex; }
    kn-query-filter .filter-group .new-filter-actions button {
      margin: 0 0 0 10px;
      padding: 5px 10px;
      border-radius: 3px;
      border: none;
      height: 30px;
      text-transform: uppercase; }
    kn-query-filter .filter-group .new-filter-actions .coalescing-operator {
      display: flex;
      align-items: center;
      margin-right: 10px; }
      kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
        content: '';
        display: block;
        flex: 1;
        height: 1px; }
    kn-query-filter .filter-group .new-filter-actions kn-select {
      width: 200px; }

kn-query-filter ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

kn-query-filter li {
  padding: 10px 0 10px 10px; }

kn-query-filter li.boolean-operator {
  padding: 0;
  position: relative;
  height: 1px; }
  kn-query-filter li.boolean-operator span {
    position: absolute;
    display: block;
    padding: 0 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    top: -10px;
    left: 20px;
    text-transform: uppercase; }

kn-query-filter li[knFilterItem] {
  padding: 10px 0 10px 10px;
  display: flex;
  align-items: center;
  height: 40px; }
  kn-query-filter li[knFilterItem] > span {
    margin: 5px; }
  kn-query-filter li[knFilterItem]:first-child {
    padding-top: 0; }

kn-query-filter .filter-group .filter-name, kn-query-filter .filter-group .coalescing-operator {
  width: 225px; }

kn-query-filter .filter-group .coalescing-operator {
  width: 190px; }

kn-query-filter .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 205px; }

kn-query-filter .filter-group .filter-group .coalescing-operator {
  width: 170px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 185px; }

kn-query-filter .filter-group .filter-group .filter-group .coalescing-operator {
  width: 150px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .filter-name, kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 165px; }

kn-query-filter .filter-group .filter-group .filter-group .filter-group .coalescing-operator {
  width: 130px; }

kn-query-filter .filter-name input {
  font-weight: bold; }

kn-query-filter .filter-operator {
  width: 150px; }
  kn-query-filter .filter-operator kn-input input {
    text-align: center; }
  kn-query-filter .filter-operator > * {
    width: 100%; }

kn-query-filter .filter-value {
  flex: 1; }
  kn-query-filter .filter-value .presenter {
    flex: 1;
    display: flex;
    align-items: center; }
    kn-query-filter .filter-value .presenter kn-input, kn-query-filter .filter-value .presenter kn-select {
      flex: 1; }
    kn-query-filter .filter-value .presenter kn-date-input span.required {
      display: none; }
    kn-query-filter .filter-value .presenter > span {
      margin: 0 10px; }
      kn-query-filter .filter-value .presenter > span:first-child {
        margin-left: 0; }

kn-query-filter .filter-actions {
  width: 70px;
  text-align: right; }

kn-query-filter .filter-actions button {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  height: 34px; }
  kn-query-filter .filter-actions button i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  kn-query-filter .filter-actions button:hover, kn-query-filter .filter-actions button:focus {
    opacity: 1;
    text-decoration: none; }
  kn-query-filter .filter-actions button:active {
    opacity: 1; }
  kn-query-filter .filter-actions button[disabled] {
    opacity: 0.3;
    background: none; }

kn-query-filter .footer {
  padding: 20px;
  text-align: right;
  display: flex; }
  kn-query-filter .footer button {
    padding: 5px 10px;
    margin-left: 20px;
    border-radius: 3px;
    border: none;
    height: 30px;
    text-transform: uppercase; }
  kn-query-filter .footer .left {
    text-align: left;
    flex: 1; }
    kn-query-filter .footer .left button {
      margin-left: 0;
      margin-right: 20px; }

kn-query-filter .filter-placeholder {
  width: 400px;
  margin: 30px auto 50px auto;
  text-align: center; }
  kn-query-filter .filter-placeholder span.placeholder {
    display: block; }
  kn-query-filter .filter-placeholder > i.material-icons {
    font-size: 150px; }
  kn-query-filter .filter-placeholder p {
    margin-top: -10px;
    margin-bottom: 50px;
    font-size: 24px;
    display: none; }
  kn-query-filter .filter-placeholder kn-select .kn-select-container {
    padding: 7px;
    transition: 0.3s all ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:hover {
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); }
    kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
      transition: none;
      box-shadow: none; }

kn-radio input[type='radio'] + .kn-radio-box::before {
  border-radius: 50%; }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border-radius: 50%;
  transition: 0.3s border-color ease; }

kn-radio .kn-radio-mark {
  transition: 0.2s border linear; }

kn-radio .kn-radio-box, kn-radio label {
  transition: 0.3s color ease; }

kn-select label, kn-select [kn-hint] {
  font-size: 14px; }

kn-select [kn-prefix], kn-select [kn-suffix] {
  display: flex; }

kn-select .kn-select-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-select .kn-select-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select .kn-select-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-select.disabled .kn-select-container, kn-select.readonly .kn-select-container {
  border-bottom-style: dotted; }

kn-select.focused .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.focused .kn-select-underline::before, kn-select.focused .kn-select-underline::after {
  z-index: 111; }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-select.ng-touched.ng-pending .kn-select-underline::before, kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::after {
  top: -4px;
  height: 5px; }

kn-select.ng-touched.ng-pending .kn-select-underline::after,
kn-select.ng-touched.pending .kn-select-underline::after,
kn-select.focused.ng-pending .kn-select-underline::after,
kn-select.focused.pending .kn-select-underline::after,
kn-select.focused.loading .kn-select-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-select .kn-select-header {
  line-height: 24px; }
  kn-select .kn-select-header > * {
    min-height: 24px; }
  kn-select .kn-select-header .separator {
    padding-right: 0.3em; }
  kn-select .kn-select-header .option {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

kn-select.disabled .kn-select-header {
  pointer-events: none; }

kn-spinner {
  position: absolute;
  margin: 0 auto;
  width: 36px; }
  kn-spinner:before {
    content: '';
    display: block;
    padding-top: 100%; }
  kn-spinner .circular {
    animation: strio-spinner-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  kn-spinner .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: strio-spinner-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: square;
    stroke-width: 8px; }

@keyframes strio-spinner-rotate {
  100% {
    transform: rotate(360deg); } }

@keyframes strio-spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

kn-tabs.boxlist div.tabs-viewport {
  margin-top: 10px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); }

kn-tabs.boxlist div.tabs-labels ul {
  width: 100%; }

kn-tabs.boxlist div.tabs-labels li a {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  width: 170px;
  height: 150px !important;
  transition: 0.3s color ease; }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }

kn-tabs.boxlist div.tabs-labels li.active a {
  border-radius: 5px; }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    position: absolute;
    left: calc(50% - 15px);
    bottom: -10px;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; }

kn-tabs.notebook div.tabs-labels li a {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  transition: 0.3s color ease; }
  kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
    text-decoration: none;
    outline: none; }
  kn-tabs.notebook div.tabs-labels li a::before {
    content: '';
    display: block;
    position: absolute;
    width: 80%;
    height: 4px;
    left: 10%;
    top: -10px;
    opacity: 0;
    z-index: 10;
    transform: scale(0.8);
    transition: 0.3s all ease; }
  kn-tabs.notebook div.tabs-labels li a:hover::before, kn-tabs.notebook div.tabs-labels li a:focus::before {
    opacity: 1;
    top: 0;
    transform: scale(1); }

kn-tabs.notebook div.tabs-labels li.active a::before {
  opacity: 1;
  top: 0;
  transform: scale(1);
  width: 100%;
  left: 0; }

kn-textarea label, kn-textarea [kn-hint] {
  font-size: 14px; }

kn-textarea [kn-prefix], kn-textarea [kn-suffix] {
  display: flex; }

kn-textarea .kn-textarea-container {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-radius: 2px;
  transition: 150ms all ease; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  content: '';
  position: absolute;
  top: -3px;
  height: 3px;
  display: block;
  z-index: 101; }

kn-textarea .kn-textarea-underline::before {
  left: 50%;
  width: 0;
  opacity: 0;
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea .kn-textarea-underline::after {
  transition: 0.3s all ease, 0.5s background-color ease; }

kn-textarea.disabled .kn-textarea-container, kn-textarea.readonly .kn-textarea-container {
  border-bottom-style: dotted; }

kn-textarea.focused .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.focused .kn-textarea-underline::before, kn-textarea.focused .kn-textarea-underline::after {
  z-index: 111; }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  left: 0%;
  width: 100%;
  opacity: 1; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before, kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::after {
  top: -4px;
  height: 5px; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::after,
kn-textarea.ng-touched.pending .kn-textarea-underline::after,
kn-textarea.focused.ng-pending .kn-textarea-underline::after,
kn-textarea.focused.pending .kn-textarea-underline::after,
kn-textarea.focused.loading .kn-textarea-underline::after {
  animation: indeterminate 1s linear infinite; }

kn-textarea {
  height: 100%;
  display: flex !important;
  flex-direction: column; }
  kn-textarea .kn-textarea-container {
    flex: 1; }
  kn-textarea textarea {
    height: calc(100% - 20px);
    resize: none; }

kn-timeline {
  position: relative; }
  kn-timeline::before, kn-timeline::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 2;
    pointer-events: none; }
  kn-timeline::before {
    left: 0; }
  kn-timeline::after {
    right: 0; }
  kn-timeline .time-viewport {
    overflow: hidden; }
  kn-timeline .time-container {
    display: flex;
    margin: 100px 0 50px 0; }
    kn-timeline .time-container > span {
      flex-shrink: 0; }
  kn-timeline .time-segment {
    font-size: 0;
    height: 3px;
    width: calc(50% - 2px); }
  kn-timeline .time-mark {
    position: relative;
    width: 3px;
    height: 3px; }
    kn-timeline .time-mark a {
      position: absolute;
      width: 13px;
      height: 13px;
      top: -5px;
      left: -5px;
      border-radius: 50%;
      z-index: 1;
      outline: none; }
      kn-timeline .time-mark a.selected::after {
        content: '';
        position: absolute;
        display: block;
        width: 23px;
        height: 23px;
        left: -7px;
        top: -7px;
        border-radius: 50%; }
      kn-timeline .time-mark a::before {
        content: '';
        position: absolute;
        display: block;
        width: 53px;
        height: 53px;
        top: -20px;
        left: -20px;
        border-radius: 50%;
        z-index: -1; }
      kn-timeline .time-mark a .date {
        position: absolute;
        display: block;
        white-space: nowrap;
        text-align: center;
        left: 7px;
        top: -68px;
        font-weight: bold;
        transform: translateX(-50%); }
      kn-timeline .time-mark a .year {
        display: block;
        font-weight: normal; }
    kn-timeline .time-mark.pin a {
      width: 9px;
      height: 9px;
      top: -7px;
      left: -7px; }
      kn-timeline .time-mark.pin a::before {
        top: -22px;
        left: -22px; }
      kn-timeline .time-mark.pin a.selected::after {
        left: -9px;
        top: -9px; }
      kn-timeline .time-mark.pin a .date {
        left: 5px;
        top: -70px; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
    kn-timeline .time-mark.today::before {
      content: '';
      position: absolute;
      display: block;
      width: 1px;
      height: 63px;
      left: 1px;
      top: -30px;
      opacity: 0.5; }
    kn-timeline .time-mark.today:not(.selectable)::after {
      content: '';
      position: absolute;
      display: block;
      width: 3px;
      height: 15px;
      left: 0;
      top: -6px; }
  kn-timeline .time-mark.today a .date {
    top: -60px; }
  kn-timeline kn-datepicker .viewport {
    top: -20px; }
  kn-timeline kn-datepicker.calendar-mark .viewport {
    top: 5px; }

kn-toast > div {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
  left: 50px;
  bottom: 50px;
  z-index: 1000;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave {
    transition: 0.3s all ease; }
  kn-toast > div.kn-enter, kn-toast > div.kn-leave.kn-leave-active {
    left: 35px;
    opacity: 0; }
  kn-toast > div.kn-leave, kn-toast > div.kn-enter.kn-enter-active {
    left: 50px;
    opacity: 1; }
  kn-toast > div .content {
    display: flex;
    flex-direction: column;
    padding: 15px 20px; }
    kn-toast > div .content span, kn-toast > div .content strong {
      display: block; }
  kn-toast > div a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    text-align: center; }
    kn-toast > div a, kn-toast > div a:hover, kn-toast > div a:focus, kn-toast > div a:active {
      text-decoration: none; }

kn-audit-display {
  color: rgba(0, 0, 0, 0.5); }
  kn-audit-display strong {
    background-color: rgba(0, 0, 0, 0.07); }

kn-checkbox input[type='checkbox'] + .kn-checkbox-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox input[type='checkbox']:focus + .kn-checkbox-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked):hover + .kn-checkbox-box::after, kn-checkbox:not(.disabled):not(.indeterminate) input[type='checkbox']:not(:checked) + .kn-checkbox-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-checkbox.disabled input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled input[type='checkbox']:not(:checked) + .kn-checkbox-box::after {
  background-color: transparent !important; }

kn-checkbox.disabled.indeterminate .kn-checkbox-box::after {
  background-color: rgba(0, 0, 0, 0.2); }

kn-checkbox.disabled label, kn-checkbox.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-checkbox.indeterminate input[type='checkbox'] + .kn-checkbox-box::after {
  background-color: #805848; }

kn-checkbox.ng-touched.ng-invalid .kn-checkbox-box::after {
  border-color: #c04060; }

kn-checkbox.ng-touched.ng-invalid input[type='checkbox']:checked + .kn-checkbox-box::after, kn-checkbox.ng-touched.ng-invalid.indeterminate .kn-checkbox-box::after {
  background-color: #c04060; }

app-print-template-edit {
  background-color: #ffffff; }
  app-print-template-edit > kn-resizable-container .preview {
    border-left: 1px solid rgba(0, 0, 0, 0.15); }
  app-print-template-edit .preview div.tabs-viewport {
    background-color: #f9f7f6; }
  app-print-template-edit kn-codemirror {
    background-color: #ffffff; }
  app-print-template-edit kn-tabs a.sidepanel {
    color: #000000;
    color: rgba(0, 0, 0, 0.8); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):hover, app-print-template-edit kn-tabs a.sidepanel:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-tabs a.sidepanel:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-tab.home i.banner {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-tab .no-print-context-placeholder {
    color: rgba(0, 0, 0, 0.3); }
  app-print-template-edit kn-menu.errors kn-menu-activator {
    color: #000000;
    color: #c04060; }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):hover, app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    app-print-template-edit kn-menu.errors kn-menu-activator:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  app-print-template-edit kn-menu.errors kn-menu-content {
    background-color: #ffffff;
    color: rgba(0, 0, 0, 0.8); }

kn-roles-table .role-permissions table thead th {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-roles-table .role-permissions table tbody.permissions-matrix td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); }

kn-roles-table .role-permissions table tbody.permissions-matrix tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

kn-roles-table .role-permissions .actions button {
  color: #000000; }
  kn-roles-table .role-permissions .actions button:not([disabled]):hover, kn-roles-table .role-permissions .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-roles-table .role-permissions .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-permission-actions-select kn-menu-content {
  background-color: #ffffff; }
  kn-permission-actions-select kn-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-user-edit table.user-roles tbody.user-roles-table tr:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles tr.invalid td {
  background-color: rgba(192, 64, 96, 0.15); }

kn-user-edit table.user-roles thead tr:last-child td {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2); }

kn-user-edit table.user-roles tbody.user-roles-table tr td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

kn-user-edit table.user-roles td.actions button {
  color: #000000; }
  kn-user-edit table.user-roles td.actions button:not([disabled]):hover, kn-user-edit table.user-roles td.actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-user-edit table.user-roles td.actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-control-messages > div {
  color: #c04060; }

app-database-manage kn-tabs .tab-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

app-database-manage kn-tabs a i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

app-database-manage kn-tabs li.active a i.material-icons, app-database-manage kn-tabs a:hover i.material-icons, app-database-manage kn-tabs a:focus i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

app-database-manage kn-tabs kn-tab .select-database {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15); }

app-database-manage kn-tabs kn-tab.kn-drag-over::after {
  background-color: rgba(255, 240, 216, 0.3);
  border: 1px dashed #ff9800; }

kn-datepicker .viewport {
  background-color: #ffffff; }
  kn-datepicker .viewport::before {
    border-bottom: 10px solid #f2f2f2; }
  kn-datepicker .viewport .header {
    background-color: #f2f2f2; }

kn-datepicker kn-date-header > *, kn-datepicker kn-time-header > * {
  color: #000000; }

kn-datepicker kn-date-header a:hover, kn-datepicker kn-time-header a:hover {
  background-color: rgba(0, 0, 0, 0.1); }

kn-datepicker kn-date-header a:active, kn-datepicker kn-time-header a:active {
  background-color: rgba(0, 0, 0, 0.2); }

kn-datepicker kn-date-header a {
  color: rgba(0, 0, 0, 0.5); }

kn-datepicker kn-month-view th {
  color: rgba(0, 0, 0, 0.35); }

kn-datepicker kn-month-view td a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker kn-month-view td a:hover, kn-datepicker kn-month-view td a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker kn-month-view td a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker kn-month-view td a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container .center {
  background-color: gray; }

kn-datepicker .picker-relative-container .gauge {
  background-color: rgba(0, 0, 0, 0.15); }

kn-datepicker .picker-relative-container li::before {
  background-color: #ffffff; }

kn-datepicker .picker-relative-container li.minor a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li.minor a:hover, kn-datepicker .picker-relative-container li.minor a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li.minor a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li.minor a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.minor::before {
  background-color: rgba(0, 0, 0, 0.8); }

kn-datepicker .picker-relative-container li:not(.minor) a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .picker-relative-container li:not(.minor) a:hover, kn-datepicker .picker-relative-container li:not(.minor) a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .picker-relative-container li:not(.minor) a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .picker-relative-container li:not(.minor) a.selected {
    background-color: #805848;
    color: #ffffff; }

kn-datepicker .picker-relative-container li.major::before {
  background-color: #000000; }

kn-datepicker .period-selector a {
  color: rgba(0, 0, 0, 0.8); }
  kn-datepicker .period-selector a:hover, kn-datepicker .period-selector a:focus {
    background-color: rgba(160, 160, 160, 0.15); }
  kn-datepicker .period-selector a.now {
    color: #805848;
    border: 1px solid #805848; }
  kn-datepicker .period-selector a.selected {
    background-color: #805848;
    color: #ffffff; }

.kn-ripple-element {
  background-color: rgba(0, 0, 0, 0.05); }

kn-export-button kn-menu.expanded {
  background-color: #0b7244; }

kn-export-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-export-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-export-button kn-menu kn-menu-activator, kn-export-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-export-button kn-menu kn-menu-activator:hover, kn-export-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-export-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

button.form-button, .form-input button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  button.form-button.danger, .form-input button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  button.form-button[disabled], .form-input button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  button.form-button::after, .form-input button::after {
    background-color: white; }
  button.form-button:not([disabled]):hover, button.form-button:not([disabled]):focus, .form-input button:not([disabled]):hover, .form-input button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    button.form-button:not([disabled]):hover.danger, button.form-button:not([disabled]):focus.danger, .form-input button:not([disabled]):hover.danger, .form-input button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  button.form-button:not([disabled]):active, .form-input button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    button.form-button:not([disabled]):active.danger, .form-input button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-container.heading::before, .form-container .form-loader-bar::before {
  background-color: rgba(128, 88, 72, 0.3); }

.form-container.heading::after, .form-container .form-loader-bar::after {
  background-color: #805848; }

.form-container.heading {
  background-color: #ffffff; }

.form-container .form-back {
  color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:hover, .form-container .form-back:focus {
    color: #ffffff; }
    .form-container .form-back:hover::after, .form-container .form-back:focus::after {
      background-color: rgba(0, 0, 0, 0.2); }
  .form-container .form-back:active::after {
    background-color: rgba(0, 0, 0, 0.4); }

.form-actions-info {
  color: #c07000; }

.form-buttons button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  .form-buttons button.danger {
    background-color: rgba(192, 64, 96, 0.9); }
  .form-buttons button[disabled] {
    background-color: rgba(160, 160, 160, 0.5); }
  .form-buttons button::after {
    background-color: white; }
  .form-buttons button:not([disabled]):hover, .form-buttons button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }
    .form-buttons button:not([disabled]):hover.danger, .form-buttons button:not([disabled]):focus.danger {
      background-color: rgba(192, 64, 96, 0.7); }
  .form-buttons button:not([disabled]):active {
    background-color: rgba(128, 88, 72, 0.8); }
    .form-buttons button:not([disabled]):active.danger {
      background-color: rgba(192, 64, 96, 0.8); }

.form-errors li {
  background-color: rgba(192, 64, 96, 0.2); }
  .form-errors li strong {
    background-color: #c04060; }

.form-layout .info-bar {
  color: rgba(255, 255, 255, 0.7);
  background-color: #10a060; }
  .form-layout .info-bar.error {
    background-color: #c04060; }
  .form-layout .info-bar strong {
    color: #ffffff; }

.form-layout .form-box {
  background-color: #ffffff; }
  .form-layout .form-box .title {
    color: #009688; }
    .form-layout .form-box .title .side-action {
      color: #000000; }
      .form-layout .form-box .title .side-action:not([disabled]):hover, .form-layout .form-box .title .side-action:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .title .side-action:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .container + .container {
    border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .form-layout .form-box .container .side-actions {
    border-left: 1px solid rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .container .side-actions a {
      color: #000000; }
      .form-layout .form-box .container .side-actions a:not([disabled]):hover, .form-layout .form-box .container .side-actions a:not([disabled]):focus {
        background-color: rgba(0, 0, 0, 0.1); }
      .form-layout .form-box .container .side-actions a:not([disabled]):active {
        background-color: rgba(0, 0, 0, 0.2); }
  .form-layout .form-box .alt {
    background-color: rgba(224, 192, 0, 0.1);
    border-top: 1px solid rgba(224, 192, 0, 0.3); }
  .form-layout .form-box .alt-actions a {
    color: #000000; }
    .form-layout .form-box .alt-actions a:not([disabled]):hover, .form-layout .form-box .alt-actions a:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    .form-layout .form-box .alt-actions a:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }

.form-layout .form-inline-box .title {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 3px solid rgba(0, 0, 0, 0.15) !important; }

.form-layout .form-inline-box .container {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-color: rgba(224, 192, 0, 0.1); }
  .form-layout .form-inline-box .container + .container {
    border-top: none; }

.form-layout .popover .side-action {
  color: #000000; }
  .form-layout .popover .side-action:not([disabled]):hover, .form-layout .popover .side-action:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-layout .popover .side-action:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-form-layout-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-form-layout-menu-content h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  kn-attached-portal .kn-form-layout-menu-content .popover-close {
    color: #000000; }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):hover, kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    kn-attached-portal .kn-form-layout-menu-content .popover-close:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-form-layout-menu-content::before {
    border-bottom: 10px solid #ffffff; }

.form-slots-table th {
  color: rgba(0, 0, 0, 0.5); }
  .form-slots-table th::before {
    background-color: rgba(0, 0, 0, 0.1); }
  .form-slots-table th.disabled::before {
    border: 1px solid rgba(0, 0, 0, 0.1); }

.form-slots-table caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5); }

.grid-panel {
  background-color: #10a060; }
  .grid-panel .selector a, .grid-panel .actions a, .grid-panel kn-grid-actions a {
    color: rgba(255, 255, 255, 0.7); }
    .grid-panel .selector a:hover, .grid-panel .actions a:hover, .grid-panel kn-grid-actions a:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-preset kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-preset kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-preset kn-menu kn-menu-activator, kn-grid-preset kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-preset kn-menu kn-menu-activator:hover, kn-grid-preset kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-preset kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-preset kn-menu-activator > div span, kn-grid-preset kn-menu-activator > div a {
  transition: color 0.5s ease; }
  kn-grid-preset kn-menu-activator > div span:hover, kn-grid-preset kn-menu-activator > div span:focus, kn-grid-preset kn-menu-activator > div a:hover, kn-grid-preset kn-menu-activator > div a:focus {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-activator > div span {
  color: rgba(255, 255, 255, 0.5); }
  kn-grid-preset kn-menu-activator > div span.template-name {
    color: #ffd088; }

kn-grid-preset kn-menu-activator > div input {
  color: #ffffff; }
  kn-grid-preset kn-menu-activator > div input::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-activator > div a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content li:not(.user-select) span:hover, kn-grid-preset kn-menu-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-grid-preset kn-menu-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-grid-preset kn-menu-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-grid-preset kn-menu-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-grid-preset kn-menu-content kn-select kn-options-container, kn-grid-preset kn-menu-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span:hover, kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) span {
  color: rgba(255, 255, 255, 0.7); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content li:not(.user-select) a {
  color: rgba(255, 255, 255, 0.5); }

kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select {
  color: rgba(0, 0, 0, 0.8);
  background-color: #ffffff; }
  kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-options-container, kn-attached-portal .kn-menu-content.kn-preset-selector-content kn-select kn-option {
    color: rgba(0, 0, 0, 0.8); }

kn-grid-query-filter kn-menu.expanded {
  background-color: #0b7244; }

kn-grid-query-filter kn-menu:not(.expanded) kn-menu-activator:focus, kn-grid-query-filter kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-grid-query-filter kn-menu kn-menu-activator, kn-grid-query-filter kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-grid-query-filter kn-menu kn-menu-activator:hover, kn-grid-query-filter kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-content:not(.kn-menu-content)::before {
    border-bottom: 10px solid #ffffff; }

kn-attached-portal .kn-grid-menu-content {
  background-color: #ffffff; }
  kn-attached-portal .kn-grid-menu-content::before {
    border-bottom: 10px solid #ffffff; }

kn-grid-query-filter kn-menu kn-menu-activator {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-query-filter kn-menu kn-menu-activator em {
    color: #ffffff; }
  kn-grid-query-filter kn-menu kn-menu-activator > * {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease; }
    kn-grid-query-filter kn-menu kn-menu-activator > *:hover, kn-grid-query-filter kn-menu kn-menu-activator > *:focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-query-filter kn-menu kn-menu-activator > span.template-name {
    color: #ffd088; }

kn-attached-portal .kn-menu-content.kn-grid-query-content {
  left: calc(50% - 900px);
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  kn-attached-portal .kn-menu-content.kn-grid-query-content::before {
    left: calc(50% + 375px); }

kn-grid-reset {
  color: rgba(255, 255, 255, 0.6); }
  kn-grid-reset.expanded {
    background-color: #0b7244; }
  kn-grid-reset:not(.expanded) kn-menu-activator:focus, kn-grid-reset kn-menu-activator:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset kn-menu-activator, kn-grid-reset kn-menu-activator i {
    color: rgba(255, 255, 255, 0.8); }
  kn-grid-reset kn-menu-activator:hover, kn-grid-reset kn-menu-activator:hover i {
    color: #ffffff; }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-button-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-grid-reset kn-menu-content:not(.kn-menu-content) li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-grid-reset kn-menu-content:not(.kn-menu-content) li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-attached-portal .kn-grid-button-content li span {
    color: rgba(255, 255, 255, 0.7); }
    kn-attached-portal .kn-grid-button-content li span:hover {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.3); }
  kn-grid-reset > *:not(.disabled), kn-grid-reset a:not(.disabled) {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.5s ease; }
    kn-grid-reset > *:not(.disabled):hover, kn-grid-reset > *:not(.disabled):focus, kn-grid-reset a:not(.disabled):hover, kn-grid-reset a:not(.disabled):focus {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2); }
  kn-grid-reset > *.disabled, kn-grid-reset a.disabled {
    color: rgba(255, 255, 255, 0.3); }

kn-grid-search input[type='search'] {
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff; }
  kn-grid-search input[type='search']:focus, kn-grid-search input[type='search'].active {
    background-color: rgba(0, 0, 0, 0.4); }
  kn-grid-search input[type='search']::placeholder {
    color: rgba(255, 255, 255, 0.5); }

kn-grid-search::after {
  background-color: #ffffff; }

header.liner .database-menu::before, header.liner .database-menu::after {
  background-color: rgba(255, 255, 255, 0.1); }

header.liner .database-menu kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  header.liner .database-menu kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  header.liner .database-menu kn-database-selector .filter input {
    color: #ffffff; }
    header.liner .database-menu kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

header.liner .database-menu kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

header.liner .database-menu kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  header.liner .database-menu kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  header.liner .database-menu kn-database-selector ul li a.active::before, header.liner .database-menu kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

header.liner .database-menu kn-database-selector ul li strong {
  color: white; }

header.liner .database-menu kn-database-selector ul li span.uid {
  color: #b39b91; }

kn-attached-portal kn-database-selector .filter {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  kn-attached-portal kn-database-selector .filter .counter {
    color: rgba(255, 255, 255, 0.5); }
  kn-attached-portal kn-database-selector .filter input {
    color: #ffffff; }
    kn-attached-portal kn-database-selector .filter input::placeholder {
      color: rgba(255, 255, 255, 0.5); }

kn-attached-portal kn-database-selector ul li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

kn-attached-portal kn-database-selector ul li a {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal kn-database-selector ul li a::before {
    border-left: 7px solid rgba(179, 155, 145, 0); }
  kn-attached-portal kn-database-selector ul li a.active::before, kn-attached-portal kn-database-selector ul li a:focus::before {
    border-left: 7px solid #b39b91; }

kn-attached-portal kn-database-selector ul li strong {
  color: white; }

kn-attached-portal kn-database-selector ul li span.uid {
  color: #b39b91; }

header.liner .database-menu kn-menu-activator::after {
  background-color: rgba(255, 255, 255, 0.2); }

header.liner .database-menu kn-menu-activator strong {
  color: #ffffff; }

header.liner nav > ul > li > a, header.liner nav > ul > li > kn-menu-activator, header.liner kn-navbar > ul > li > a, header.liner kn-navbar > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  header.liner nav > ul > li > a.router-link-active, header.liner nav > ul > li > kn-menu-activator.router-link-active, header.liner kn-navbar > ul > li > a.router-link-active, header.liner kn-navbar > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  header.liner nav > ul > li > a:hover, header.liner nav > ul > li > kn-menu-activator:hover, header.liner kn-navbar > ul > li > a:hover, header.liner kn-navbar > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  header.liner nav > ul > li > a:not(.router-link-active):focus, header.liner nav > ul > li > kn-menu-activator:not(.router-link-active):focus, header.liner kn-navbar > ul > li > a:not(.router-link-active):focus, header.liner kn-navbar > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

kn-attached-portal .kn-navbar-expansion > ul > li > a, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-navbar-expansion > ul > li > a.router-link-active, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator.router-link-active {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:hover, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff; }
  kn-attached-portal .kn-navbar-expansion > ul > li > a:not(.router-link-active):focus, kn-attached-portal .kn-navbar-expansion > ul > li > kn-menu-activator:not(.router-link-active):focus {
    border: 1px solid rgba(255, 255, 255, 0.2); }

header.liner {
  background-color: #805848;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4) 80px); }
  header.liner .logo:hover, header.liner .logo:focus {
    background-color: rgba(255, 255, 255, 0.05); }
  header.liner button.main-action {
    color: white;
    background-color: rgba(128, 88, 72, 0.9);
    background-color: #10a060; }
    header.liner button.main-action.danger {
      background-color: rgba(192, 64, 96, 0.9); }
    header.liner button.main-action[disabled] {
      background-color: rgba(160, 160, 160, 0.5); }
    header.liner button.main-action::after {
      background-color: white; }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus {
      background-color: rgba(128, 88, 72, 0.7); }
      header.liner button.main-action:not([disabled]):hover.danger, header.liner button.main-action:not([disabled]):focus.danger {
        background-color: rgba(192, 64, 96, 0.7); }
    header.liner button.main-action:not([disabled]):active {
      background-color: rgba(128, 88, 72, 0.8); }
      header.liner button.main-action:not([disabled]):active.danger {
        background-color: rgba(192, 64, 96, 0.8); }
    header.liner button.main-action:not([disabled]):hover, header.liner button.main-action:not([disabled]):focus, header.liner button.main-action:not([disabled]):active {
      background-color: #58bd90; }
    header.liner button.main-action:not([disabled]):active {
      background-color: #40b380; }
  header.liner kn-menu {
    color: rgba(255, 255, 255, 0.5);
    z-index: 10; }
    header.liner kn-menu.expanded {
      background-color: #805848; }
      header.liner kn-menu.expanded kn-menu-content {
        border-top: 1px solid rgba(255, 255, 255, 0.1); }
    header.liner kn-menu kn-menu-activator:hover, header.liner kn-menu kn-menu-activator:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }
    header.liner kn-menu kn-menu-content {
      background-color: #805848; }
      header.liner kn-menu kn-menu-content a {
        color: rgba(255, 255, 255, 0.5); }
        header.liner kn-menu kn-menu-content a:hover {
          background-color: rgba(255, 255, 255, 0.1);
          color: #ffffff; }

kn-attached-portal .header-liner.kn-menu-content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #805848; }
  kn-attached-portal .header-liner.kn-menu-content a {
    color: rgba(255, 255, 255, 0.5); }
    kn-attached-portal .header-liner.kn-menu-content a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #ffffff; }

header.liner .user-menu kn-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .user-menu-content .separator::before {
  background-color: rgba(0, 0, 0, 0.3); }

kn-input label, kn-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-input label .required {
  color: #c04060; }

kn-input .kn-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-input:not(.disabled):not(.focused) .kn-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-input.focused .kn-input-container {
  border-color: transparent; }

kn-input .kn-input-underline::before, kn-input .kn-input-underline::after {
  background-color: #805848; }

kn-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-input.ng-touched.ng-invalid .kn-input-underline::before {
  background-color: #c04060; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::before {
  background-color: #ecc6cf; }

kn-input.ng-touched.ng-invalid.loading .kn-input-underline::after {
  background-color: #c04060; }

kn-input.ng-touched.ng-pending .kn-input-underline::before,
kn-input.ng-touched.pending .kn-input-underline::before,
kn-input.focused.ng-pending .kn-input-underline::before,
kn-input.focused.pending .kn-input-underline::before,
kn-input.focused.loading .kn-input-underline::before {
  background-color: #d9cdc8; }

kn-input input {
  color: #000000; }

kn-input.disabled input {
  color: rgba(0, 0, 0, 0.4); }

kn-input input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input label, kn-date-input [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-date-input label .required {
  color: #c04060; }

kn-date-input .kn-date-input-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-date-input:not(.disabled):not(.focused) .kn-date-input-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-date-input.focused .kn-date-input-container {
  border-color: transparent; }

kn-date-input .kn-date-input-underline::before, kn-date-input .kn-date-input-underline::after {
  background-color: #805848; }

kn-date-input.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input.ng-touched.ng-invalid .kn-date-input-underline::before {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::before {
  background-color: #ecc6cf; }

kn-date-input.ng-touched.ng-invalid.loading .kn-date-input-underline::after {
  background-color: #c04060; }

kn-date-input.ng-touched.ng-pending .kn-date-input-underline::before,
kn-date-input.ng-touched.pending .kn-date-input-underline::before,
kn-date-input.focused.ng-pending .kn-date-input-underline::before,
kn-date-input.focused.pending .kn-date-input-underline::before,
kn-date-input.focused.loading .kn-date-input-underline::before {
  background-color: #d9cdc8; }

kn-date-input date-input {
  color: #000000; }

kn-date-input.disabled date-input {
  color: rgba(0, 0, 0, 0.4); }

kn-date-input date-input::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-date-input .input-button i.material-icons {
  color: rgba(0, 0, 0, 0.8); }

kn-date-input .input-button.disabled i.material-icons, kn-date-input .input-button.readonly i.material-icons {
  color: rgba(0, 0, 0, 0.4); }

kn-kcuni-settings p {
  color: rgba(0, 0, 0, 0.5); }
  kn-kcuni-settings p strong {
    color: rgba(0, 0, 0, 0.8); }

kn-kcuni-settings .settings button {
  color: #000000; }
  kn-kcuni-settings .settings button:not([disabled]):hover, kn-kcuni-settings .settings button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-kcuni-settings .settings button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-kcuni-settings .settings:hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-kcuni-settings .message {
  color: #c04060;
  background-color: rgba(192, 64, 96, 0.2); }

.app-loading-screen p {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2); }

html, body {
  background-color: #f0f0f0;
  color: rgba(0, 0, 0, 0.8); }

a {
  color: #8040a0; }

kn-input.ownership [kn-prefix] {
  color: #10a060; }

.flat-button {
  color: #000000; }
  .flat-button:not([disabled]):hover, .flat-button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

.flat-table thead td {
  border-bottom: 3px solid #cccccc; }

.flat-table tbody td {
  border-bottom: 1px solid #ebebeb; }

.flat-table tbody tr:hover > td {
  background-color: rgba(0, 0, 0, 0.05); }

.flat-table .actions button {
  color: #000000; }
  .flat-table .actions button:not([disabled]):hover, .flat-table .actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .flat-table .actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-modal.confirmation-dialog .overlay {
  background-color: rgba(48, 48, 48, 0.9); }
  kn-modal.confirmation-dialog .overlay .container {
    background-color: rgba(40, 40, 40, 0.7); }
  kn-modal.confirmation-dialog .overlay .content {
    color: white; }
  kn-modal.confirmation-dialog .overlay .buttons {
    background-color: rgba(0, 0, 0, 0.2); }
    kn-modal.confirmation-dialog .overlay .buttons button {
      color: rgba(255, 255, 255, 0.5); }
      kn-modal.confirmation-dialog .overlay .buttons button.primary {
        color: rgba(64, 128, 255, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.primary::before {
          background-color: #4080ff; }
        kn-modal.confirmation-dialog .overlay .buttons button.primary:hover, kn-modal.confirmation-dialog .overlay .buttons button.primary:focus {
          background-color: rgba(64, 128, 255, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button.danger {
        color: rgba(255, 64, 72, 0.8); }
        kn-modal.confirmation-dialog .overlay .buttons button.danger::before {
          background-color: #ff4048; }
        kn-modal.confirmation-dialog .overlay .buttons button.danger:hover, kn-modal.confirmation-dialog .overlay .buttons button.danger:focus {
          background-color: rgba(255, 64, 72, 0.7);
          color: rgba(0, 0, 0, 0.8); }
      kn-modal.confirmation-dialog .overlay .buttons button::before {
        background-color: white; }
      kn-modal.confirmation-dialog .overlay .buttons button:hover, kn-modal.confirmation-dialog .overlay .buttons button:focus {
        background-color: rgba(255, 255, 255, 0.7);
        color: rgba(0, 0, 0, 0.8); }

kn-options-container {
  background-color: #ffffff; }
  kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-optgroup > strong {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

kn-option.marked {
  background-color: rgba(0, 0, 0, 0.07); }

kn-option:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.05); }

kn-option.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-option .kn-option-selector {
  color: rgba(0, 0, 0, 0.3); }

kn-option.selected .kn-option-selector {
  color: #805848; }

kn-attached-portal .kn-options-container {
  background-color: #ffffff; }
  kn-attached-portal .kn-options-container .kn-options-container-filter {
    background-color: #f2f2f2; }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::before {
      background-color: rgba(0, 0, 0, 0.4); }
    kn-attached-portal .kn-options-container .kn-options-container-filter .clear::after {
      background-color: rgba(0, 0, 0, 0.8); }
  kn-attached-portal .kn-options-container .kn-options-container-hints {
    border-top: 1px dashed rgba(0, 0, 0, 0.15); }
    kn-attached-portal .kn-options-container .kn-options-container-hints li {
      color: rgba(0, 0, 0, 0.5); }
      kn-attached-portal .kn-options-container .kn-options-container-hints li em {
        color: rgba(0, 0, 0, 0.8); }

kn-ownership-display {
  color: rgba(0, 0, 0, 0.3); }
  kn-ownership-display > span {
    color: rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.1); }

kn-print-button kn-menu.expanded {
  background-color: #0b7244; }

kn-print-button kn-menu:not(.expanded) kn-menu-activator:focus, kn-print-button kn-menu kn-menu-activator:hover {
  background-color: rgba(0, 0, 0, 0.3); }

kn-print-button kn-menu kn-menu-activator, kn-print-button kn-menu kn-menu-activator i {
  color: rgba(255, 255, 255, 0.8); }

kn-print-button kn-menu kn-menu-activator:hover, kn-print-button kn-menu kn-menu-activator:hover i {
  color: #ffffff; }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-menu-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-attached-portal .kn-grid-button-content {
  background-color: #0b7244;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }

kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-print-button kn-menu kn-menu-content:not(.kn-menu-content) li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-attached-portal .kn-grid-button-content li span {
  color: rgba(255, 255, 255, 0.7); }
  kn-attached-portal .kn-grid-button-content li span:hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.3); }

kn-query-filter .query-filter > div[knFilterGroup] {
  color: rgba(0, 0, 0, 0.8); }

kn-query-filter .filter-group .new-filter-actions button {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .new-filter-actions .coalescing-operator::before {
  background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-group .filter-group {
  border-left: 10px solid rgba(0, 0, 0, 0.1); }

kn-query-filter li.boolean-operator {
  background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter li.boolean-operator span {
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff; }

kn-query-filter .filter-name [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-operator kn-input [kn-suffix] {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-value .presenter > span {
  color: rgba(0, 0, 0, 0.5); }

kn-query-filter .filter-actions button {
  color: #000000; }
  kn-query-filter .filter-actions button:not([disabled]):hover, kn-query-filter .filter-actions button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-query-filter .filter-actions button:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }

kn-query-filter .footer {
  background-color: rgba(0, 0, 0, 0.05); }
  kn-query-filter .footer button {
    background-color: rgba(0, 0, 0, 0.1); }

kn-query-filter .filter-placeholder > i.material-icons {
  color: rgba(0, 0, 0, 0.35); }

kn-query-filter .filter-placeholder kn-select .kn-select-container {
  border: 1px solid rgba(0, 0, 0, 0.3); }
  kn-query-filter .filter-placeholder kn-select .kn-select-container:active {
    background-color: rgba(0, 0, 0, 0.05); }

kn-query-filter .filter-placeholder kn-select .placeholder {
  color: rgba(0, 0, 0, 0.8); }

kn-radio input[type='radio'] + .kn-radio-box::after {
  border: 2px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.03); }

kn-radio input[type='radio']:checked + .kn-radio-box::after {
  border-color: #805848; }

kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border: 7px solid #805848; }

kn-radio input[type='radio']:focus + .kn-radio-box::before {
  background-color: rgba(160, 160, 160, 0.15); }

kn-radio:not(.disabled) input[type='radio']:not(:checked):hover + .kn-radio-box::after, kn-radio:not(.disabled) input[type='radio']:not(:checked) + .kn-radio-box:hover::after {
  border-color: rgba(0, 0, 0, 0.3); }

kn-radio.disabled label, kn-radio.readonly label {
  color: rgba(0, 0, 0, 0.4); }

kn-radio.disabled input[type='radio']:not(:checked) + .kn-radio-box::after, kn-radio.readonly input[type='radio']:not(:checked) + .kn-radio-box::after {
  background-color: transparent !important; }

kn-radio.disabled input[type='radio'] + .kn-radio-box::after, kn-radio.disabled input[type='radio'] + .kn-radio-box .kn-radio-mark, kn-radio.readonly input[type='radio'] + .kn-radio-box::after, kn-radio.readonly input[type='radio'] + .kn-radio-box .kn-radio-mark {
  border-color: rgba(0, 0, 0, 0.1); }

kn-radio-group.ng-touched.ng-invalid kn-radio .kn-radio-box::after, kn-radio-group.ng-touched.ng-invalid kn-radio input[type='radio']:checked + .kn-radio-box .kn-radio-mark {
  border-color: #c04060; }

kn-select label, kn-select [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-select label .required {
  color: #c04060; }

kn-select .kn-select-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-select:not(.disabled):not(.focused) .kn-select-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-select.focused .kn-select-container {
  border-color: transparent; }

kn-select .kn-select-underline::before, kn-select .kn-select-underline::after {
  background-color: #805848; }

kn-select.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-select.ng-touched.ng-invalid .kn-select-underline::before {
  background-color: #c04060; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::before {
  background-color: #ecc6cf; }

kn-select.ng-touched.ng-invalid.loading .kn-select-underline::after {
  background-color: #c04060; }

kn-select.ng-touched.ng-pending .kn-select-underline::before,
kn-select.ng-touched.pending .kn-select-underline::before,
kn-select.focused.ng-pending .kn-select-underline::before,
kn-select.focused.pending .kn-select-underline::before,
kn-select.focused.loading .kn-select-underline::before {
  background-color: #d9cdc8; }

kn-select .placeholder {
  color: rgba(0, 0, 0, 0.35); }

.kn-select-dropdown {
  border-left: 1px solid rgba(0, 0, 0, 0.05); }

kn-spinner {
  animation-name: strio-spinner-color-8; }
  kn-spinner .path {
    animation: strio-spinner-dash 1.5s ease-in-out infinite, strio-spinner-color-8 6s ease-in-out infinite; }

@keyframes strio-spinner-color-8 {
  0%, 20% {
    stroke: rgba(128, 88, 72, 0.6); }
  40% {
    stroke: rgba(128, 88, 72, 0.7); }
  60% {
    stroke: rgba(128, 88, 72, 0.8); }
  80% {
    stroke: rgba(128, 88, 72, 0.9); }
  100% {
    stroke: #805848; } }

kn-tabs.boxlist div.tabs-viewport {
  background-color: #ffffff; }

kn-tabs.boxlist div.tabs-labels li a {
  color: rgba(0, 0, 0, 0.5); }
  kn-tabs.boxlist div.tabs-labels li a:hover, kn-tabs.boxlist div.tabs-labels li a:focus {
    color: rgba(0, 0, 0, 0.8); }

kn-tabs.boxlist div.tabs-labels li.active a {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8); }
  kn-tabs.boxlist div.tabs-labels li.active a::after {
    border-bottom: 15px solid #ffffff; }

kn-tabs.notebook div.tabs-labels {
  background-color: rgba(0, 0, 0, 0.08); }
  kn-tabs.notebook div.tabs-labels li a {
    color: #805848; }
    kn-tabs.notebook div.tabs-labels li a:hover, kn-tabs.notebook div.tabs-labels li a:focus {
      color: #000000; }
    kn-tabs.notebook div.tabs-labels li a::before {
      background-color: rgba(0, 0, 0, 0.3); }
  kn-tabs.notebook div.tabs-labels li.active a {
    background-color: rgba(255, 255, 255, 0.5); }
    kn-tabs.notebook div.tabs-labels li.active a::before {
      background-color: #805848; }

kn-textarea label, kn-textarea [kn-hint] {
  color: rgba(0, 0, 0, 0.5); }

kn-textarea label .required {
  color: #c04060; }

kn-textarea .kn-textarea-container {
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom-color: rgba(0, 0, 0, 0.1); }

kn-textarea:not(.disabled):not(.focused) .kn-textarea-container:hover {
  border-color: rgba(0, 0, 0, 0.3); }

kn-textarea.focused .kn-textarea-container {
  border-color: transparent; }

kn-textarea .kn-textarea-underline::before, kn-textarea .kn-textarea-underline::after {
  background-color: #805848; }

kn-textarea.disabled {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea.ng-touched.ng-invalid .kn-textarea-underline::before {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::before {
  background-color: #ecc6cf; }

kn-textarea.ng-touched.ng-invalid.loading .kn-textarea-underline::after {
  background-color: #c04060; }

kn-textarea.ng-touched.ng-pending .kn-textarea-underline::before,
kn-textarea.ng-touched.pending .kn-textarea-underline::before,
kn-textarea.focused.ng-pending .kn-textarea-underline::before,
kn-textarea.focused.pending .kn-textarea-underline::before,
kn-textarea.focused.loading .kn-textarea-underline::before {
  background-color: #d9cdc8; }

kn-textarea textarea {
  color: #000000; }

kn-textarea.disabled textarea {
  color: rgba(0, 0, 0, 0.4); }

kn-textarea textarea::placeholder {
  color: rgba(0, 0, 0, 0.35); }

kn-timeline::before {
  background: linear-gradient(90deg, #f0f0f0, transparent); }

kn-timeline::after {
  background: linear-gradient(270deg, #f0f0f0, transparent); }

kn-timeline .time-segment {
  background-color: #1860d8; }
  kn-timeline .time-segment.future {
    background-color: #8028d8; }
  kn-timeline .time-segment.selected {
    background-color: #0dc22b; }

kn-timeline .time-mark > .calendar-mark {
  position: relative;
  top: 25px;
  left: -5px; }
  kn-timeline .time-mark > .calendar-mark.today {
    left: -6px; }
  kn-timeline .time-mark > .calendar-mark.pin {
    left: -3px; }

kn-timeline .time-mark > a {
  background-color: #1860d8; }
  kn-timeline .time-mark > a.selected {
    background-color: #1860d8; }
    kn-timeline .time-mark > a.selected .date {
      color: rgba(0, 0, 0, 0.8); }
    kn-timeline .time-mark > a.selected::after {
      border: 2px solid #1860d8; }
  kn-timeline .time-mark > a:focus::before {
    background-color: rgba(0, 0, 0, 0.1); }
  kn-timeline .time-mark > a .date {
    color: rgba(0, 0, 0, 0.5); }

kn-timeline .time-mark.pin > a {
  background-color: white;
  border: 4px solid #1860d8; }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.today::before {
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.8), transparent); }

kn-timeline .time-mark.today:not(.selectable)::after {
  background-color: #303030; }

kn-timeline .time-mark.future > a {
  background-color: #8028d8; }
  kn-timeline .time-mark.future > a.selected::after {
    border-color: #8028d8; }

kn-timeline .time-mark.future.pin > a {
  background-color: white;
  border-color: #8028d8; }

kn-timeline .time-mark.today > a {
  background-color: #303030; }
  kn-timeline .time-mark.today > a.selected::after {
    border-color: #303030; }
  kn-timeline .time-mark.today > a .date {
    top: -60px; }

kn-timeline .time-mark.today.pin > a {
  background-color: white;
  border-color: #303030; }

kn-toast > div {
  background-color: rgba(0, 0, 0, 0.75);
  color: white; }
  kn-toast > div a {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-left: 1px solid rgba(255, 255, 255, 0.15); }
    kn-toast > div a:hover {
      background-color: rgba(0, 0, 0, 0.5); }
    kn-toast > div a:active {
      background-color: black; }

.grid-reader, kn-attached-portal .grid-reader-content {
  display: block;
  position: relative; }
  .grid-reader.expanded, kn-attached-portal .grid-reader-content.expanded {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  .grid-reader kn-menu-activator, kn-attached-portal .grid-reader-content kn-menu-activator {
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
    opacity: 0.7;
    transition: background-color 0.5s ease;
    cursor: pointer; }
    .grid-reader kn-menu-activator[hidden], kn-attached-portal .grid-reader-content kn-menu-activator[hidden] {
      display: none; }
    .grid-reader kn-menu-activator:hover, .grid-reader kn-menu-activator:hover i, .grid-reader kn-menu-activator:focus, .grid-reader kn-menu-activator:focus i, kn-attached-portal .grid-reader-content kn-menu-activator:hover, kn-attached-portal .grid-reader-content kn-menu-activator:hover i, kn-attached-portal .grid-reader-content kn-menu-activator:focus, kn-attached-portal .grid-reader-content kn-menu-activator:focus i {
      opacity: 1; }
    .grid-reader kn-menu-activator:hover, .grid-reader kn-menu-activator:focus, .grid-reader kn-menu-activator:active, kn-attached-portal .grid-reader-content kn-menu-activator:hover, kn-attached-portal .grid-reader-content kn-menu-activator:focus, kn-attached-portal .grid-reader-content kn-menu-activator:active {
      text-decoration: none; }
    .grid-reader kn-menu-activator i, kn-attached-portal .grid-reader-content kn-menu-activator i {
      width: 24px;
      height: 24px; }
      .grid-reader kn-menu-activator i:first-child, kn-attached-portal .grid-reader-content kn-menu-activator i:first-child {
        margin-right: 0.1em; }
  .grid-reader kn-menu-content:not(.kn-menu-content), kn-attached-portal .grid-reader-content kn-menu-content:not(.kn-menu-content) {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    .grid-reader kn-menu-content:not(.kn-menu-content).empty, kn-attached-portal .grid-reader-content kn-menu-content:not(.kn-menu-content).empty {
      display: none; }
  kn-attached-portal .kn-grid-menu-content {
    min-width: 100%;
    position: absolute;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
    kn-attached-portal .kn-grid-menu-content.empty {
      display: none; }
  .grid-reader kn-menu-activator, kn-attached-portal .grid-reader-content kn-menu-activator {
    padding: 5px 7px; }
  .grid-reader kn-menu-content:not(.kn-menu-content), kn-attached-portal .grid-reader-content kn-menu-content:not(.kn-menu-content) {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50px;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    .grid-reader kn-menu-content:not(.kn-menu-content)::before, kn-attached-portal .grid-reader-content kn-menu-content:not(.kn-menu-content)::before {
      position: absolute;
      left: calc(50% - 10px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  kn-attached-portal .kn-grid-menu-content {
    position: absolute;
    z-index: 20;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.3)); }
    kn-attached-portal .kn-grid-menu-content::before {
      position: absolute;
      left: calc(100% - 100px);
      top: -10px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent; }
  .grid-reader.expanded, kn-attached-portal .grid-reader-content.expanded {
    background-color: #0b7244; }
  .grid-reader:not(.expanded) kn-menu-activator:focus, .grid-reader kn-menu-activator:hover, kn-attached-portal .grid-reader-content:not(.expanded) kn-menu-activator:focus, kn-attached-portal .grid-reader-content kn-menu-activator:hover {
    background-color: rgba(0, 0, 0, 0.3); }
  .grid-reader kn-menu-activator, .grid-reader kn-menu-activator i, kn-attached-portal .grid-reader-content kn-menu-activator, kn-attached-portal .grid-reader-content kn-menu-activator i {
    color: rgba(255, 255, 255, 0.8); }
  .grid-reader kn-menu-activator:hover, .grid-reader kn-menu-activator:hover i, kn-attached-portal .grid-reader-content kn-menu-activator:hover, kn-attached-portal .grid-reader-content kn-menu-activator:hover i {
    color: #ffffff; }
  .grid-reader kn-menu-content:not(.kn-menu-content), kn-attached-portal .grid-reader-content kn-menu-content:not(.kn-menu-content) {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  kn-attached-portal .kn-grid-button-content {
    background-color: #0b7244;
    border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .grid-reader kn-menu-content:not(.kn-menu-content), kn-attached-portal .grid-reader-content kn-menu-content:not(.kn-menu-content) {
    background-color: #ffffff; }
    .grid-reader kn-menu-content:not(.kn-menu-content)::before, kn-attached-portal .grid-reader-content kn-menu-content:not(.kn-menu-content)::before {
      border-bottom: 10px solid #ffffff; }
  kn-attached-portal .kn-grid-menu-content {
    background-color: #ffffff; }
    kn-attached-portal .kn-grid-menu-content::before {
      border-bottom: 10px solid #ffffff; }
  .grid-reader h3, kn-attached-portal .grid-reader-content h3 {
    font-weight: normal;
    margin: 0;
    padding: 15px 15px 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
  .grid-reader .popover-close, kn-attached-portal .grid-reader-content .popover-close {
    display: inline-block;
    margin: 0;
    padding: 5px;
    opacity: 0.7;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: #000000;
    position: absolute;
    top: 10px;
    right: 10px; }
    .grid-reader .popover-close i, kn-attached-portal .grid-reader-content .popover-close i {
      vertical-align: top;
      transition: all 0.5s ease;
      display: inline-block;
      width: 24px;
      height: 24px;
      overflow: hidden; }
    .grid-reader .popover-close:hover, .grid-reader .popover-close:focus, kn-attached-portal .grid-reader-content .popover-close:hover, kn-attached-portal .grid-reader-content .popover-close:focus {
      opacity: 1;
      text-decoration: none; }
    .grid-reader .popover-close:active, kn-attached-portal .grid-reader-content .popover-close:active {
      opacity: 1; }
    .grid-reader .popover-close[disabled], kn-attached-portal .grid-reader-content .popover-close[disabled] {
      opacity: 0.3;
      background: none; }
    .grid-reader .popover-close:not([disabled]):hover, .grid-reader .popover-close:not([disabled]):focus, kn-attached-portal .grid-reader-content .popover-close:not([disabled]):hover, kn-attached-portal .grid-reader-content .popover-close:not([disabled]):focus {
      background-color: rgba(0, 0, 0, 0.1); }
    .grid-reader .popover-close:not([disabled]):active, kn-attached-portal .grid-reader-content .popover-close:not([disabled]):active {
      background-color: rgba(0, 0, 0, 0.2); }

kn-attached-portal .grid-reader-content {
  left: calc(50% - 250px);
  width: 500px; }
  kn-attached-portal .grid-reader-content::before {
    left: calc(50% - 10px); }

app-usage {
  display: flex;
  flex-direction: column;
  height: calc(100% - 10px); }
  app-usage .heading {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    app-usage .heading h1 {
      margin: 0;
      padding: 20px 50px;
      font-size: 32px; }
    app-usage .heading .legend {
      list-style-type: none;
      padding: 0 30px; }
      app-usage .heading .legend > li {
        display: inline-flex;
        align-items: center; }
        app-usage .heading .legend > li::before {
          content: '';
          width: 20px;
          height: 20px;
          margin: 7px; }
        app-usage .heading .legend > li.used::before {
          background-color: #60c090; }
        app-usage .heading .legend > li.unused::before {
          background-color: #c88898; }
      app-usage .heading .legend .help-activator {
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer; }
        app-usage .heading .legend .help-activator i.icon {
          margin-left: 10px; }

app-usage-timeline {
  margin: 0 50px;
  flex: 1; }

app-usage-timeline {
  display: block; }
  app-usage-timeline > svg {
    width: 100%;
    height: 100%; }
  app-usage-timeline .viewport-divider {
    fill: #a0a0a0;
    stroke: none; }
  app-usage-timeline .viewport-box {
    fill: #f8f8f8;
    stroke: #a0a0a0;
    stroke-width: 1; }
  app-usage-timeline .ticks .tick-ruler {
    stroke: #000000;
    stroke-opacity: 0.125;
    stroke-dasharray: 4;
    pointer-events: none; }
    app-usage-timeline .ticks .tick-ruler.major {
      stroke-opacity: 0.25; }
    app-usage-timeline .ticks .tick-ruler.mark {
      stroke-opacity: 0.5; }
  app-usage-timeline .ticks .year {
    font-weight: bold; }
  app-usage-timeline .ticks .time {
    fill-opacity: 0.5; }
  app-usage-timeline .ticks .now {
    stroke: #e00000;
    stroke-opacity: 1; }
  app-usage-timeline .slice .box {
    fill-opacity: 0.8; }
  app-usage-timeline .slice .label {
    font-size: 14px;
    pointer-events: none; }
  app-usage-timeline .slice.used .box {
    fill: #60c090; }
  app-usage-timeline .slice.used .label {
    fill: #225a3e; }
  app-usage-timeline .slice.unused .box {
    fill: #c88898; }
  app-usage-timeline .slice.unused .label {
    fill: #8e352e; }
  app-usage-timeline .slice .box:hover {
    fill-opacity: 1; }
  app-usage-timeline .labels tspan {
    font-weight: bold; }
  app-usage-timeline .view-usage-label {
    font-size: 14px;
    fill: #808080; }
  app-usage-timeline .view-usage-graph .box {
    stroke: none;
    fill: #c0c0c0; }
  app-usage-timeline .view-usage-graph .fill {
    stroke: none;
    fill: #c88898; }
  app-usage-timeline .view-usage-graph .fill-used {
    stroke: none;
    fill: #60c090; }
  app-usage-timeline .view-usage-graph .mark {
    stroke: none;
    fill: #808080; }

.dark-theme .side-action {
  display: inline-block;
  margin: 0;
  padding: 5px;
  opacity: 0.7;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  color: black;
  margin-left: 5px;
  position: absolute;
  right: 0;
  top: 0; }
  .dark-theme .side-action i {
    vertical-align: top;
    transition: all 0.5s ease;
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden; }
  .dark-theme .side-action:hover, .dark-theme .side-action:focus {
    opacity: 1;
    text-decoration: none; }
  .dark-theme .side-action:active {
    opacity: 1; }
  .dark-theme .side-action[disabled] {
    opacity: 0.3;
    background: none; }
  .dark-theme .side-action:not([disabled]):hover, .dark-theme .side-action:not([disabled]):focus {
    background-color: rgba(0, 0, 0, 0.1); }
  .dark-theme .side-action:not([disabled]):active {
    background-color: rgba(0, 0, 0, 0.2); }
  .dark-theme .side-action, .dark-theme .side-action .material-icons {
    color: rgba(255, 255, 255, 0.5); }
  .dark-theme .side-action:hover, .dark-theme .side-action:hover .material-icons {
    color: white; }

.dark-theme .form-buttons button:not([disabled]) {
  background-color: rgba(48, 160, 240, 0.9); }
  .dark-theme .form-buttons button:not([disabled]):hover, .dark-theme .form-buttons button:not([disabled]):focus {
    background-color: rgba(48, 160, 240, 0.7); }
  .dark-theme .form-buttons button:not([disabled]):active {
    background-color: rgba(48, 160, 240, 0.8); }

.dark-theme kn-checkbox label {
  color: rgba(255, 255, 255, 0.5); }

.dark-theme kn-checkbox input[type='checkbox']:not(:checked) + .kn-checkbox-box::after {
  border-color: rgba(255, 255, 255, 0.15); }

.dark-theme kn-checkbox input[type='checkbox']:checked + .kn-checkbox-box::after {
  background-color: #30a0f0; }

.dark-theme kn-checkbox.indeterminate .kn-checkbox-box::after {
  background-color: #30a0f0; }

.dark-theme kn-input input::-webkit-input-placeholder, .dark-theme kn-date-input input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic; }

.dark-theme kn-input input::-moz-placeholder, .dark-theme kn-date-input input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  opacity: 1; }

.dark-theme kn-date-input .input-button i {
  color: white !important; }

.dark-theme kn-input .kn-input-container, .dark-theme kn-input [kn-hint], .dark-theme kn-input label, .dark-theme kn-select .kn-input-container, .dark-theme kn-select [kn-hint], .dark-theme kn-select label, .dark-theme kn-date-input .kn-input-container, .dark-theme kn-date-input [kn-hint], .dark-theme kn-date-input label {
  color: rgba(255, 255, 255, 0.5); }
  .dark-theme kn-input .kn-input-container .required, .dark-theme kn-input [kn-hint] .required, .dark-theme kn-input label .required, .dark-theme kn-select .kn-input-container .required, .dark-theme kn-select [kn-hint] .required, .dark-theme kn-select label .required, .dark-theme kn-date-input .kn-input-container .required, .dark-theme kn-date-input [kn-hint] .required, .dark-theme kn-date-input label .required {
    color: #f07080; }
  .dark-theme kn-input .kn-input-container input, .dark-theme kn-input [kn-hint] input, .dark-theme kn-input label input, .dark-theme kn-select .kn-input-container input, .dark-theme kn-select [kn-hint] input, .dark-theme kn-select label input, .dark-theme kn-date-input .kn-input-container input, .dark-theme kn-date-input [kn-hint] input, .dark-theme kn-date-input label input {
    color: white; }

.dark-theme kn-input .kn-date-input-container, .dark-theme kn-input [kn-hint], .dark-theme kn-input label, .dark-theme kn-select .kn-date-input-container, .dark-theme kn-select [kn-hint], .dark-theme kn-select label, .dark-theme kn-date-input .kn-date-input-container, .dark-theme kn-date-input [kn-hint], .dark-theme kn-date-input label {
  color: rgba(255, 255, 255, 0.5); }
  .dark-theme kn-input .kn-date-input-container .required, .dark-theme kn-input [kn-hint] .required, .dark-theme kn-input label .required, .dark-theme kn-select .kn-date-input-container .required, .dark-theme kn-select [kn-hint] .required, .dark-theme kn-select label .required, .dark-theme kn-date-input .kn-date-input-container .required, .dark-theme kn-date-input [kn-hint] .required, .dark-theme kn-date-input label .required {
    color: #f07080; }
  .dark-theme kn-input .kn-date-input-container input, .dark-theme kn-input [kn-hint] input, .dark-theme kn-input label input, .dark-theme kn-select .kn-date-input-container input, .dark-theme kn-select [kn-hint] input, .dark-theme kn-select label input, .dark-theme kn-date-input .kn-date-input-container input, .dark-theme kn-date-input [kn-hint] input, .dark-theme kn-date-input label input {
    color: white; }

.dark-theme kn-input .kn-select-container, .dark-theme kn-select .kn-select-container, .dark-theme kn-date-input .kn-select-container {
  color: rgba(255, 255, 255, 0.8); }

.dark-theme kn-input .placeholder, .dark-theme kn-select .placeholder, .dark-theme kn-date-input .placeholder {
  color: rgba(255, 255, 255, 0.3); }

.dark-theme kn-input .kn-input-underline, .dark-theme kn-input .kn-select-underline, .dark-theme kn-select .kn-input-underline, .dark-theme kn-select .kn-select-underline, .dark-theme kn-date-input .kn-input-underline, .dark-theme kn-date-input .kn-select-underline {
  background-color: rgba(255, 255, 255, 0.15); }

.dark-theme kn-input kn-control-messages div, .dark-theme kn-select kn-control-messages div, .dark-theme kn-date-input kn-control-messages div {
  color: #f07080; }

.dark-theme kn-input .kn-select-underline::before, .dark-theme kn-input .kn-input-underline::before, .dark-theme kn-select .kn-select-underline::before, .dark-theme kn-select .kn-input-underline::before, .dark-theme kn-date-input .kn-select-underline::before, .dark-theme kn-date-input .kn-input-underline::before {
  background-color: #30a0f0; }

.dark-theme kn-input.ng-touched.ng-invalid .kn-select-underline::before, .dark-theme kn-input.ng-touched.ng-invalid .kn-input-underline::before, .dark-theme kn-select.ng-touched.ng-invalid .kn-select-underline::before, .dark-theme kn-select.ng-touched.ng-invalid .kn-input-underline::before, .dark-theme kn-date-input.ng-touched.ng-invalid .kn-select-underline::before, .dark-theme kn-date-input.ng-touched.ng-invalid .kn-input-underline::before {
  background-color: #f07080; }

.dark-theme kn-input.disabled .kn-input-underline, .dark-theme kn-input.noninteractive .kn-input-underline, .dark-theme kn-select.disabled .kn-input-underline, .dark-theme kn-select.noninteractive .kn-input-underline, .dark-theme kn-date-input.disabled .kn-input-underline, .dark-theme kn-date-input.noninteractive .kn-input-underline {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 0%);
  background-color: transparent; }

.dark-theme kn-input.disabled input, .dark-theme kn-input.noninteractive input, .dark-theme kn-select.disabled input, .dark-theme kn-select.noninteractive input, .dark-theme kn-date-input.disabled input, .dark-theme kn-date-input.noninteractive input {
  color: rgba(255, 255, 255, 0.4) !important; }

kn-app-container-edit {
  background-color: #303038; }

@keyframes reading-animation {
  to {
    color: #009688; } }

kn-input i.material-icons.reader {
  opacity: 0.3; }

kn-input.reader-active.focused i.material-icons.reader {
  opacity: 1;
  animation: reading-animation 300ms steps(2, start) infinite; }

kn-sticky.sticked > * {
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0; }

kn-app-viewport, app-print-template-edit {
  display: block;
  height: 100%; }

div.main {
  height: calc(100% - 80px); }

header.liner .user-menu kn-menu-activator {
  min-width: 150px; }

app-worker-edit .form-layout .popover {
  right: 10px; }

.user-menu-content .version {
  padding: 4px;
  display: block;
  white-space: nowrap;
  text-align: right;
  font-size: 80%; }
  .user-menu-content .version strong {
    font-weight: normal;
    color: #ffffff; }

kn-kcuni-settings .settings button {
  color: white;
  background-color: rgba(128, 88, 72, 0.9); }
  kn-kcuni-settings .settings button[disabled] {
    background-color: rgba(0, 0, 0, 0.5); }
  kn-kcuni-settings .settings button:not([disabled]):hover, kn-kcuni-settings .settings button:not([disabled]):focus {
    background-color: rgba(128, 88, 72, 0.7); }

kn-attached-portal .grid-preset-menu-content {
  max-height: 750px;
  overflow-y: auto; }

kn-attached-portal .usage-help-content {
  margin-top: 10px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
  kn-attached-portal .usage-help-content ul {
    padding-inline-start: 20px;
    padding-inline-end: 20px; }
    kn-attached-portal .usage-help-content ul li {
      list-style-type: none; }

kn-attached-portal .help-box {
  background-color: antiquewhite; }

kn-database-selector,
kn-attached-portal kn-database-selector {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
  kn-database-selector .filter,
  kn-attached-portal kn-database-selector .filter {
    display: flex;
    background-color: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
    kn-database-selector .filter > *,
    kn-attached-portal kn-database-selector .filter > * {
      line-height: 20px; }
    kn-database-selector .filter .clear, kn-database-selector .filter .counter,
    kn-attached-portal kn-database-selector .filter .clear,
    kn-attached-portal kn-database-selector .filter .counter {
      flex: 0 0; }
    kn-database-selector .filter .clear,
    kn-attached-portal kn-database-selector .filter .clear {
      display: inline-block;
      padding: 10px 5px 10px 20px;
      color: transparent;
      user-select: none;
      background: url("../img/search.svg") no-repeat center;
      opacity: 0.5;
      transition: background-image 0.2s ease-in-out, opacity 0.2s ease; }
      kn-database-selector .filter .clear:hover,
      kn-attached-portal kn-database-selector .filter .clear:hover {
        opacity: 1;
        color: transparent; }
    kn-database-selector .filter:hover .clear,
    kn-attached-portal kn-database-selector .filter:hover .clear {
      background-image: url("../img/clear.svg"); }
    kn-database-selector .filter .counter,
    kn-attached-portal kn-database-selector .filter .counter {
      display: inline-block;
      padding: 10px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.5); }
    kn-database-selector .filter input,
    kn-attached-portal kn-database-selector .filter input {
      padding: 10px 10px 10px 5px;
      outline: none;
      flex: 1 1;
      border: none;
      font-size: 16px;
      background-color: transparent;
      min-width: 0; }
  kn-database-selector ul,
  kn-attached-portal kn-database-selector ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 150px; }
  kn-database-selector ul li:not(:last-child),
  kn-attached-portal kn-database-selector ul li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  kn-database-selector ul li a,
  kn-attached-portal kn-database-selector ul li a {
    position: relative;
    padding: 10px 10px 10px 17px;
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    display: block;
    background-color: transparent;
    transition: all 0.5s ease;
    background-size: 200% 100%;
    background-position: 300% 0%; }
  kn-database-selector ul li a::before,
  kn-attached-portal kn-database-selector ul li a::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    left: -3px;
    width: 0;
    height: 0;
    transition: all 0.3s linear;
    z-index: 10;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgba(64, 96, 192, 0); }
  kn-database-selector ul li a.active::before, kn-database-selector ul li a:focus::before,
  kn-attached-portal kn-database-selector ul li a.active::before,
  kn-attached-portal kn-database-selector ul li a:focus::before {
    left: 0; }
  kn-database-selector ul li a:hover,
  kn-attached-portal kn-database-selector ul li a:hover {
    text-decoration: none; }
  kn-database-selector ul li strong,
  kn-attached-portal kn-database-selector ul li strong {
    display: inline-block; }
  kn-database-selector ul li span.uid,
  kn-attached-portal kn-database-selector ul li span.uid {
    float: right; }
  kn-database-selector ul li span.description,
  kn-attached-portal kn-database-selector ul li span.description {
    display: block;
    font-style: italic; }

kn-attached-portal .kn-grid-button-content.kn-menu-content.monitor-export-button {
  background-color: #805848;
  color: #f0f0f0; }
  kn-attached-portal .kn-grid-button-content.kn-menu-content.monitor-export-button li span {
    color: rgba(240, 240, 240, 0.7); }
    kn-attached-portal .kn-grid-button-content.kn-menu-content.monitor-export-button li span:hover {
      color: black;
      background-color: rgba(0, 0, 0, 0.3); }

.form-container > .content {
  max-width: 1200px;
  margin: auto;
  display: flex; }
  .form-container > .content h1 {
    padding: 20px 0;
    font-size: 32px;
    max-width: none;
    margin: 0;
    flex: 1; }
  .form-container > .content .form-buttons {
    display: flex;
    align-items: center; }

.flex-middle {
  display: flex;
  align-items: center; }

kn-sticky.sticked > .form-container.heading {
  position: fixed !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); }

.grid-panel {
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.7); }
  .grid-panel kn-options-container {
    color: rgba(0, 0, 0, 0.8); }
    .grid-panel kn-options-container input {
      color: rgba(0, 0, 0, 0.8); }
  .grid-panel input {
    color: rgba(255, 255, 255, 0.7); }
  .grid-panel .menu {
    padding: 0 8px;
    display: flex;
    flex-flow: row;
    width: 70%; }
    .grid-panel .menu kn-radio-group {
      display: flex;
      flex-flow: row;
      flex: 1;
      margin-left: 20px; }
    .grid-panel .menu kn-select {
      flex: 1; }
  .grid-panel .panel {
    padding: 0 8px;
    align-items: flex-end;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; }
    .grid-panel .panel kn-date-range {
      margin: 0px;
      padding: 0px;
      margin-left: auto;
      background-color: transparent; }
      .grid-panel .panel kn-date-range label {
        display: none; }

.grid-panel .menu.center {
  width: 100%; }
  .grid-panel .menu.center .form-buttons {
    margin: 0 auto; }

.toggle-button {
  background-color: #805848; }
  .toggle-button.toggled:not(:disabled) {
    background-color: #484060; }
    .toggle-button.toggled:not(:disabled):hover, .toggle-button.toggled:not(:disabled):focus, .toggle-button.toggled:not(:disabled):active {
      background-color: #484060; }