@keyframes cf-button-icon-loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.cf-button {
  display: flex;
  align-items: center;
  font-family: 'worksans-regular';
  color: #ffffff;
  padding: 8px;
  border: none;
  font-size: 16px;
  transition: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  line-height: 16px;
  outline: none;
  justify-content: center; }
  .cf-button[disabled], .cf-button.cf-button-loading {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed; }
  .cf-button.cf-button-disabled {
    opacity: 0.6; }
  .cf-button .cf-button-icon {
    font-style: normal;
    font-size: 16px; }
    .cf-button .cf-button-icon.loader-line {
      animation: 1s infinite cf-button-icon-loading linear; }
  .cf-button.cf-button-fitwidth {
    width: 100%; }
  .cf-button.cf-button-raised {
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f; }
  .cf-button.cf-button-rounded {
    border-radius: 16px; }
  .cf-button.cf-button-text {
    background-color: transparent !important;
    border-color: transparent !important; }
  .cf-button.cf-button-primary {
    background: var(--primary-color);
    border: 1px solid var(--primary-color); }
    .cf-button.cf-button-primary:hover {
      background: var(--button-primary-color-hover);
      border-color: var(--button-primary-color-hover); }
    .cf-button.cf-button-primary:focus {
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--primary-color), 0 1px 2px 0 #00000000; }
    .cf-button.cf-button-primary.cf-button-outlined {
      background-color: transparent;
      color: var(--primary-color); }
      .cf-button.cf-button-primary.cf-button-outlined:hover {
        background: var(--primary-color)30 !important; }
    .cf-button.cf-button-primary.cf-button-text {
      color: var(--primary-color); }
      .cf-button.cf-button-primary.cf-button-text:hover {
        background: var(--primary-color)30 !important; }
  .cf-button.cf-button-secondary {
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color); }
    .cf-button.cf-button-secondary:hover {
      background: var(--button-secondary-color-hover);
      border-color: var(--button-secondary-color-hover); }
    .cf-button.cf-button-secondary:focus {
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--secondary-color), 0 1px 2px 0 #00000000; }
    .cf-button.cf-button-secondary.cf-button-outlined {
      background-color: transparent;
      color: var(--secondary-color); }
      .cf-button.cf-button-secondary.cf-button-outlined:hover {
        background: var(--secondary-color)30 !important; }
    .cf-button.cf-button-secondary.cf-button-text {
      color: var(--secondary-color); }
      .cf-button.cf-button-secondary.cf-button-text:hover {
        background: var(--secondary-color)30 !important; }
  .cf-button.cf-button-info {
    background: var(--info-color);
    border: 1px solid var(--info-color); }
    .cf-button.cf-button-info:hover {
      background: var(--button-info-color-hover);
      border-color: var(--button-info-color-hover); }
    .cf-button.cf-button-info:focus {
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--info-color), 0 1px 2px 0 #00000000; }
    .cf-button.cf-button-info.cf-button-outlined {
      background-color: transparent;
      color: var(--info-color); }
      .cf-button.cf-button-info.cf-button-outlined:hover {
        background: var(--info-color)30 !important; }
    .cf-button.cf-button-info.cf-button-text {
      color: var(--info-color); }
      .cf-button.cf-button-info.cf-button-text:hover {
        background: var(--info-color)30 !important; }
  .cf-button.cf-button-success {
    background: var(--success-color);
    border: 1px solid var(--success-color); }
    .cf-button.cf-button-success:hover {
      background: var(--button-success-color-hover);
      border-color: var(--button-success-color-hover); }
    .cf-button.cf-button-success:focus {
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--success-color), 0 1px 2px 0 #00000000; }
    .cf-button.cf-button-success.cf-button-outlined {
      background-color: transparent;
      color: var(--success-color); }
      .cf-button.cf-button-success.cf-button-outlined:hover {
        background: var(--success-color)30 !important; }
    .cf-button.cf-button-success.cf-button-text {
      color: var(--success-color); }
      .cf-button.cf-button-success.cf-button-text:hover {
        background: var(--success-color)30 !important; }
  .cf-button.cf-button-warning {
    background: var(--warning-color);
    border: 1px solid var(--warning-color); }
    .cf-button.cf-button-warning:hover {
      background: var(--button-warning-color-hover);
      border-color: var(--button-warning-color-hover); }
    .cf-button.cf-button-warning:focus {
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--warning-color), 0 1px 2px 0 #00000000; }
    .cf-button.cf-button-warning.cf-button-outlined {
      background-color: transparent;
      color: var(--warning-color); }
      .cf-button.cf-button-warning.cf-button-outlined:hover {
        background: var(--warning-color)30 !important; }
    .cf-button.cf-button-warning.cf-button-text {
      color: var(--warning-color); }
      .cf-button.cf-button-warning.cf-button-text:hover {
        background: var(--warning-color)30 !important; }
  .cf-button.cf-button-danger {
    background: var(--danger-color);
    border: 1px solid var(--danger-color); }
    .cf-button.cf-button-danger:hover {
      background: var(--button-danger-color-hover);
      border-color: var(--button-danger-color-hover); }
    .cf-button.cf-button-danger:focus {
      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--danger-color), 0 1px 2px 0 #00000000; }
    .cf-button.cf-button-danger.cf-button-outlined {
      background-color: transparent;
      color: var(--danger-color); }
      .cf-button.cf-button-danger.cf-button-outlined:hover {
        background: var(--danger-color)30 !important; }
    .cf-button.cf-button-danger.cf-button-text {
      color: var(--danger-color); }
      .cf-button.cf-button-danger.cf-button-text:hover {
        background: var(--danger-color)30 !important; }

.cf-table {
  width: 100%;
  border-collapse: collapse; }
  .cf-table:not(.cf-table-grouping).alternate-colors tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.05); }
  .cf-table thead tr th {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px;
    font-weight: 700;
    font-size: 16px;
    font-family: 'worksans-semibold'; }
    .cf-table thead tr th.sortable {
      cursor: pointer; }
  .cf-table tbody tr.grouped-row {
    background: rgba(0, 0, 0, 0.1);
    font-weight: bold; }
  .cf-table tbody tr td {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px;
    font-size: 14px;
    vertical-align: top; }
    .cf-table tbody tr td.cf-td-icon {
      position: relative; }
      .cf-table tbody tr td.cf-td-icon .remixicon {
        position: absolute;
        font-size: 18px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer; }
        .cf-table tbody tr td.cf-td-icon .remixicon.cf-td-icon-primary {
          color: #4F46E5; }
        .cf-table tbody tr td.cf-td-icon .remixicon.cf-td-icon-secondary {
          color: #64748B; }
        .cf-table tbody tr td.cf-td-icon .remixicon.cf-td-icon-info {
          color: #3B82F6; }
        .cf-table tbody tr td.cf-td-icon .remixicon.cf-td-icon-success {
          color: #22C55E; }
        .cf-table tbody tr td.cf-td-icon .remixicon.cf-td-icon-warning {
          color: #F59E0B; }
        .cf-table tbody tr td.cf-td-icon .remixicon.cf-td-icon-danger {
          color: #EF4444; }
  .cf-table ~ .cf-table-paging {
    margin-bottom: 16px; }

.cf-table-paging {
  user-select: none; }
  .cf-table-paging .cf-table-page-item {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-right: none;
    line-height: 40px;
    text-align: center; }
    .cf-table-paging .cf-table-page-item:last-child {
      border-right: 1px solid rgba(0, 0, 0, 0.1); }
    .cf-table-paging .cf-table-page-item.cf-table-page-item-active {
      background: #4F46E5;
      color: #fff;
      border: 1px solid #4F46E5 !important; }

.cf-progressbar {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: var(--progressbar-background);
  border-radius: 4px; }
  .cf-progressbar .cf-progressbar-determinate {
    height: 100%;
    width: 0%;
    background-color: #4F46E5; }
    .cf-progressbar .cf-progressbar-determinate.animated {
      transition: width 0.5s ease-in-out; }
    .cf-progressbar .cf-progressbar-determinate label {
      font-size: 18px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--progressbar-text-color);
      mix-blend-mode: difference;
      user-select: none; }
  .cf-progressbar .cf-progressbar-indeterminate {
    position: absolute;
    height: 100%;
    background-color: #4F46E5;
    will-change: left, right;
    animation: cf-progressbar-indeterminate-anim 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }

@keyframes cf-progressbar-indeterminate-anim {
  0% {
    left: -35%;
    right: 100%; }
  50% {
    left: 107%;
    right: -90%; }
  100% {
    left: 100%; } }

#cf-toasts-top-container, #cf-toasts-bottom-container {
  position: absolute;
  z-index: 999999;
  height: 100%;
  overflow: hidden;
  bottom: 0px;
  right: 0px;
  pointer-events: none;
  padding: 16px;
  width: 100%;
  max-width: 350px; }
  #cf-toasts-top-container .cf-toast, #cf-toasts-bottom-container .cf-toast {
    position: relative;
    padding: 20px;
    border: none;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 16px var(--toast-box-shadow-color);
    animation: toastfadein 1s cubic-bezier(0, 0, 0, 0.97);
    pointer-events: auto;
    margin-bottom: 16px; }
    #cf-toasts-top-container .cf-toast.hidden-toast, #cf-toasts-bottom-container .cf-toast.hidden-toast {
      animation: toastfadeout 1s cubic-bezier(0, 0, 0, 0.97); }
    #cf-toasts-top-container .cf-toast .cf-toast-title, #cf-toasts-bottom-container .cf-toast .cf-toast-title {
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 8px; }
    #cf-toasts-top-container .cf-toast i, #cf-toasts-bottom-container .cf-toast i {
      font-style: normal;
      position: absolute;
      font-weight: bold; }
    #cf-toasts-top-container .cf-toast .close-icon, #cf-toasts-bottom-container .cf-toast .close-icon {
      font-size: 22px;
      top: 4px;
      right: 4px;
      cursor: pointer; }
  #cf-toasts-top-container .cf-primary-toast, #cf-toasts-bottom-container .cf-primary-toast {
    color: var(--primary-color);
    background: var(--toast-primary-background-color); }
  #cf-toasts-top-container .cf-secondary-toast, #cf-toasts-bottom-container .cf-secondary-toast {
    color: var(--secondary-color);
    background: var(--toast-secondary-background-color); }
  #cf-toasts-top-container .cf-info-toast, #cf-toasts-bottom-container .cf-info-toast {
    color: var(--info-color);
    background: var(--toast-info-background-color); }
  #cf-toasts-top-container .cf-success-toast, #cf-toasts-bottom-container .cf-success-toast {
    color: var(--success-color);
    background: var(--toast-success-background-color); }
  #cf-toasts-top-container .cf-warning-toast, #cf-toasts-bottom-container .cf-warning-toast {
    color: var(--warning-color);
    background: var(--toast-warning-background-color); }
  #cf-toasts-top-container .cf-danger-toast, #cf-toasts-bottom-container .cf-danger-toast {
    color: var(--danger-color);
    background: var(--toast-danger-background-color); }

#cf-toasts-bottom-container {
  display: flex;
  flex-direction: column-reverse; }

@keyframes toastfadein {
  0% {
    transform: translateX(400px);
    filter: opacity(0); }
  100% {
    transform: translateX(0);
    filter: opacity(1); } }

@keyframes toastfadeout {
  0% {
    transform: translateX(0);
    filter: opacity(1); }
  100% {
    transform: translateX(400px);
    filter: opacity(0); } }

.cf-dialog-container {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--dialog-container-background-color);
  height: 100%;
  width: 100%;
  z-index: 1000; }
  .cf-dialog-container .cf-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--dialog-background-color);
    color: var(--dialog-text-color);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    gap: 16px; }
    .cf-dialog-container .cf-dialog .cf-dialog-close {
      position: absolute;
      right: 16px;
      font-size: 22px;
      cursor: pointer; }
    .cf-dialog-container .cf-dialog .cf-dialog-title {
      font-size: 22px;
      font-weight: bold;
      padding-right: 40px; }
    .cf-dialog-container .cf-dialog .cf-dialog-content {
      flex-grow: 1;
      overflow-y: auto;
      overflow-x: auto; }
    .cf-dialog-container .cf-dialog .cf-dialog-buttons {
      display: flex;
      gap: 8px; }
    .cf-dialog-container .cf-dialog.no-padding {
      padding: 0; }

.cf-confirm-component {
  width: 400px; }

.cf-mediapreview {
  width: 100%;
  object-fit: contain; }

.cf-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 16px; }
  .cf-breadcrumb .item {
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    cursor: default; }
    .cf-breadcrumb .item.nav-item {
      cursor: pointer; }
      .cf-breadcrumb .item.nav-item:hover {
        background-color: #4338CA20; }
      .cf-breadcrumb .item.nav-item:active {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #4338CA, 0 1px 2px 0 #00000000; }
    .cf-breadcrumb .item .icon + .label {
      margin-left: 4px; }

cf-tabView {
  display: block; }

.cf-tabview {
  height: 100%; }
  .cf-tabview .hidden-input {
    position: absolute;
    transform: scale(0); }
  .cf-tabview .cf-tabview-header {
    display: flex;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    background: var(--tabview-header-background); }
    .cf-tabview .cf-tabview-header .cf-tabview-header-items {
      display: flex;
      flex-grow: 1;
      overflow: hidden;
      position: relative;
      background: var(--tabview-header-items-background); }
      .cf-tabview .cf-tabview-header .cf-tabview-header-items .cf-tabview-header-item {
        color: var(--tabview-header-item-text-color);
        padding: 8px 16px;
        font-weight: bold;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        transition: none;
        user-select: none;
        cursor: pointer;
        z-index: 1;
        display: flex;
        align-items: center; }
        .cf-tabview .cf-tabview-header .cf-tabview-header-items .cf-tabview-header-item .remixicon {
          font-size: 20px;
          margin-right: 8px; }
        .cf-tabview .cf-tabview-header .cf-tabview-header-items .cf-tabview-header-item .cf-tabview-header-item-title {
          white-space: nowrap; }
        .cf-tabview .cf-tabview-header .cf-tabview-header-items .cf-tabview-header-item.disabled-tab {
          color: var(--tabview-header-item-disabled-text-color); }
        .cf-tabview .cf-tabview-header .cf-tabview-header-items .cf-tabview-header-item.active-tab {
          background: var(--tabview-header-item-background);
          border-bottom: 2px solid #4F46E5;
          color: #4F46E5; }
        .cf-tabview .cf-tabview-header .cf-tabview-header-items .cf-tabview-header-item.cf-form-error {
          border-bottom: 2px solid #dd2121;
          color: #dd2121; }
        .cf-tabview .cf-tabview-header .cf-tabview-header-items .cf-tabview-header-item:not(.disabled-tab):active {
          border-bottom: 2px solid #4F46E5; }
        .cf-tabview .cf-tabview-header .cf-tabview-header-items .cf-tabview-header-item:first-child {
          margin-left: 0px; }
        .cf-tabview .cf-tabview-header .cf-tabview-header-items .cf-tabview-header-item:last-child {
          margin-right: 0px; }
    .cf-tabview .cf-tabview-header .close-icon {
      height: 38px;
      width: 38px;
      background: #00b894;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      cursor: pointer;
      user-select: none;
      flex: 0 0 38px; }
  .cf-tabview .cf-tabpanels {
    height: calc(100% - 38px);
    padding-top: 16px;
    overflow-y: auto; }
    .cf-tabview .cf-tabpanels .cf-tabpanel {
      height: calc(100% - 16px); }
      .cf-tabview .cf-tabpanels .cf-tabpanel .cf-tabpanel-disabled {
        background: var(--tabpanel-disabled-background);
        position: relative;
        height: 100%; }
        .cf-tabview .cf-tabpanels .cf-tabpanel .cf-tabpanel-disabled .cf-tabpanel-disabled-content {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          flex-direction: column;
          text-align: center;
          color: var(--tabpanel-disabled-content-text-color); }
          .cf-tabview .cf-tabpanels .cf-tabpanel .cf-tabpanel-disabled .cf-tabpanel-disabled-content .remixicon {
            font-size: 42px; }

.cf-tags-container .input {
  position: relative;
  flex-grow: 1;
  min-width: 150px; }
  .cf-tags-container .input input {
    width: 100%;
    font-size: 16px;
    font-family: 'worksans-regular';
    color: #3f3f46;
    appearance: none;
    height: 36px;
    padding: 6px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d4d4d8;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); }
  .cf-tags-container .input label {
    position: absolute;
    pointer-events: none;
    font-size: 16px;
    top: 16px;
    left: 8px;
    margin-top: -6px;
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 0.2s;
    line-height: 1; }

.cf-tags-container .cf-tags {
  margin-top: 8px; }

.cf-tags-container.focused input {
  outline: none 0px;
  outline-offset: 0px;
  box-shadow: #6366f1 0px 0px 0px 1px;
  border-color: #4f46e5; }

.cf-tags-container.focused .input label, .cf-tags-container.filled .input label, .cf-tags-container.unfilledtext .input label {
  font-size: 12px;
  color: #3f3f46;
  top: -12px;
  background-color: #ffffff;
  padding: 2px 4px;
  margin-left: -4px;
  margin-top: 0;
  border-radius: 4px;
  border: 1px solid #d4d4d8; }

.cf-tags-container .dropdown-items {
  position: absolute;
  left: -1px;
  top: 34px;
  width: calc(100% + 2px);
  display: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-top: none;
  overflow: hidden;
  overflow-y: auto;
  z-index: 2; }
  .cf-tags-container .dropdown-items .dropdown-item {
    padding: 12px;
    cursor: pointer; }
    .cf-tags-container .dropdown-items .dropdown-item.hovered {
      background: #4338ca20 !important; }
    .cf-tags-container .dropdown-items .dropdown-item.selected {
      background: #4338ca40;
      font-weight: bold; }

.cf-tags-container.opened .dropdown-items {
  margin-top: 1px;
  display: block;
  border-top: 1px solid #4f46e5; }

.cf-context-menu-items {
  position: absolute;
  z-index: 2000;
  background: #ffffff;
  min-width: 180px;
  box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.5); }
  .cf-context-menu-items .context-menu-item {
    color: #000000;
    padding: 12px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 210px; }
    .cf-context-menu-items .context-menu-item:hover {
      background: #ededed; }
    .cf-context-menu-items .context-menu-item .context-menu-icon {
      margin-right: 8px; }
    .cf-context-menu-items .context-menu-item .context-menu-title {
      font-size: 15px; }
    .cf-context-menu-items .context-menu-item .context-menu-submenu-icon {
      margin-left: auto; }
    .cf-context-menu-items .context-menu-item .cf-context-submenu-items {
      position: absolute;
      left: 100%;
      top: 0%;
      background: #ffffff;
      box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.5);
      display: none; }
    .cf-context-menu-items .context-menu-item:hover .cf-context-submenu-items {
      display: block; }

.cf-checkbox {
  display: flex;
  align-items: center;
  user-select: none; }
  .cf-checkbox .cf-checkbox-label {
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--cf-checkbox-label-color); }
  .cf-checkbox.focused > .cf-checkbox-label {
    box-shadow: var(--cf-checkbox-focused-label-color) 0px 0px 0px 1px; }
  .cf-checkbox.disabled {
    opacity: 0.5; }
    .cf-checkbox.disabled > .check {
      background: var(--cf-checkbox-disabled-check-background-color);
      opacity: 0.5; }
    .cf-checkbox.disabled.checked > .check {
      filter: saturate(25%); }
  .cf-checkbox.readonly {
    background: var(--cf-checkbox-readonly-background-color); }

.cf-check {
  width: 18px;
  height: 18px;
  display: inline-block;
  border: 1px solid var(--cf-checkbox-check-border-color);
  border-radius: 4px;
  background: var(--cf-checkbox-check-background-color);
  margin-right: 8px;
  line-height: 18px;
  text-align: center;
  flex: 0 0 18px;
  font-size: 18px;
  cursor: pointer;
  position: relative; }
  .cf-check span {
    opacity: 0;
    color: var(--cf-checkbox-check-icon-color);
    font-size: 13px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
  .cf-check.checked {
    background: var(--cf-checkbox-checked-check-background-color);
    border: 1px solid var(--cf-checkbox-checked-check-border-color); }
    .cf-check.checked span {
      color: var(--cf-checkbox-checked-check-icon-color);
      opacity: 1; }

.radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none; }
  .radio > .check {
    width: 18px;
    height: 18px;
    display: inline-block;
    border: 1px solid var(--radio-border-color);
    border-radius: 9px;
    background: var(--radio-background-color);
    line-height: 17px;
    text-align: center;
    flex: 0 0 18px;
    font-size: 18px; }
    .radio > .check span {
      opacity: 0;
      color: var(--radio-background-color);
      font-size: 13px; }
    .radio > .check.checked {
      background: var(--radio-checked-background-color);
      border: 1px solid var(--radio-checked-border-color);
      color: var(--radio-checked-icon-color); }
      .radio > .check.checked span {
        opacity: 1; }
  .radio .label {
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    margin-left: 8px;
    color: var(--radio-label-text-color); }

.switch {
  display: flex;
  align-items: center;
  user-select: none;
  gap: 8px;
  -webkit-transition: .2s;
  transition: .2s;
  cursor: pointer; }
  .switch .label {
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--switch-label-color); }
  .switch.switched .cf-switch-slider {
    background: var(--switch-background-color-checked);
    border: 1px solid var(--switch-border-color-checked); }
    .switch.switched .cf-switch-slider:before {
      background: var(--switch-dot-background-color-checked);
      -webkit-transform: translateX(24px);
      -ms-transform: translateX(24px);
      transform: translateX(24px); }
  .switch .cf-switch-slider {
    display: inline-block;
    width: 48px;
    height: 21px;
    background: var(--switch-background-color);
    border: 1px solid var(--switch-border-color);
    border-radius: 34px;
    flex-shrink: 0; }
    .switch .cf-switch-slider::before {
      position: relative;
      display: block;
      content: "";
      height: 15px;
      width: 15px;
      left: 4px;
      bottom: -1px;
      background-color: var(--switch-dot-background-color);
      transition: 0.2s;
      border-radius: 50%;
      box-shadow: #00000025 0px 2px 0px 0px !important; }

/* VARIABLES */
* {
  box-sizing: border-box; }

body {
  font-family: 'worksans-regular'; }

h1, h2, h3, h4, h5, h6 {
  margin: 0; }

.cf-100vw {
  width: 100vw; }

.cf-100vh {
  height: 100vh; }

.cf-min-height-0 {
  min-height: 0; }

/* CURSORS */
.cf-cursor-alias {
  cursor: alias; }

.cf-cursor-all-scroll {
  cursor: all-scroll; }

.cf-cursor-auto {
  cursor: auto; }

.cf-cursor-cell {
  cursor: cell; }

.cf-cursor-col-resize {
  cursor: col-resize; }

.cf-cursor-context-menu {
  cursor: context-menu; }

.cf-cursor-copy {
  cursor: copy; }

.cf-cursor-crosshair {
  cursor: crosshair; }

.cf-cursor-default {
  cursor: default; }

.cf-cursor-e-resize {
  cursor: e-resize; }

.cf-cursor-ew-resize {
  cursor: ew-resize; }

.cf-cursor-grab {
  cursor: grab; }

.cf-cursor-grabbing {
  cursor: grabbing; }

.cf-cursor-help {
  cursor: help; }

.cf-cursor-move {
  cursor: move; }

.cf-cursor-n-resize {
  cursor: n-resize; }

.cf-cursor-ne-resize {
  cursor: ne-resize; }

.cf-cursor-nesw-resize {
  cursor: nesw-resize; }

.cf-cursor-ns-resize {
  cursor: ns-resize; }

.cf-cursor-nw-resize {
  cursor: nw-resize; }

.cf-cursor-nwse-resize {
  cursor: nwse-resize; }

.cf-cursor-no-drop {
  cursor: no-drop; }

.cf-cursor-none {
  cursor: none; }

.cf-cursor-not-allowed {
  cursor: not-allowed; }

.cf-cursor-pointer {
  cursor: pointer; }

.cf-cursor-progress {
  cursor: progress; }

.cf-cursor-row-resize {
  cursor: row-resize; }

.cf-cursor-s-resize {
  cursor: s-resize; }

.cf-cursor-se-resize {
  cursor: se-resize; }

.cf-cursor-sw-resize {
  cursor: sw-resize; }

.cf-cursor-text {
  cursor: text; }

.cf-cursor-w-resize {
  cursor: w-resize; }

.cf-cursor-wait {
  cursor: wait; }

.cf-cursor-zoom-in {
  cursor: zoom-in; }

.cf-cursor-zoom-out {
  cursor: zoom-out; }

.remixicon.cf-icon-color-primary {
  color: var(--primary-color); }

.remixicon.cf-icon-color-secondary {
  color: var(--secondary-color); }

.remixicon.cf-icon-color-info {
  color: var(--info-color); }

.remixicon.cf-icon-color-success {
  color: var(--success-color); }

.remixicon.cf-icon-color-warning {
  color: var(--warning-color); }

.remixicon.cf-icon-color-danger {
  color: var(--danger-color); }

.cf-user-select-none {
  user-select: none; }

.cf-tag {
  display: inline-block;
  padding: 4px;
  font-size: 14px;
  border-radius: 4px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap; }
  .cf-tag.cf-tag-fit-width {
    width: 100%; }
  .cf-tag.cf-tag-primary {
    background: var(--primary-color); }
  .cf-tag.cf-tag-secondary {
    background: var(--secondary-color); }
  .cf-tag.cf-tag-info {
    background: var(--info-color); }
  .cf-tag.cf-tag-success {
    background: var(--success-color); }
  .cf-tag.cf-tag-warning {
    background: var(--warning-color); }
  .cf-tag.cf-tag-danger {
    background: var(--danger-color); }

.phone-input-container {
  display: flex;
  position: relative; }
  .phone-input-container > cf-dropdown {
    flex: 0 0 100px; }
    .phone-input-container > cf-dropdown > .input-container .dropdown {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-right: none; }
  .phone-input-container > cf-inputtext {
    flex-grow: 1; }
    .phone-input-container > cf-inputtext > .input-container input {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px; }

.floating-label-container {
  position: relative; }
  .floating-label-container > label {
    position: absolute;
    pointer-events: none;
    font-size: 16px;
    top: 16px;
    left: 8px;
    margin-top: -6px;
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 0.2s;
    line-height: 1; }
  .floating-label-container > input:autofill ~ label,
  .floating-label-container > input:-webkit-autofill ~ label,
  .floating-label-container > input.cf-filled ~ label {
    font-size: 12px;
    color: #3f3f46;
    top: -12px;
    background-color: #ffffff;
    padding: 2px 4px;
    margin-left: -4px;
    margin-top: 0;
    border-radius: 4px;
    border: 1px solid #d4d4d8; }

.cf-hidden-input {
  position: absolute;
  transform: scale(0); }

/* INVALID */
.cf-input-container.ng-invalid {
  background: var(--input-container-background-color-invalid);
  border: 1px solid var(--input-container-border-color-invalid); }

cf-switch.ng-invalid .switch .cf-switch-slider {
  background: var(--switch-background-color-invalid);
  border: 1px solid var(--switch-border-color-invalid); }
  cf-switch.ng-invalid .switch .cf-switch-slider:before {
    background: var(--switch-dot-background-color-invalid); }

cf-radio.ng-invalid .radio .check {
  background: var(--input-container-background-color-invalid);
  border: 1px solid var(--input-container-border-color-invalid); }

cf-checkbox.ng-invalid .cf-checkbox .cf-check {
  background: var(--input-container-background-color-invalid);
  border: 1px solid var(--input-container-border-color-invalid); }

cf-tags.ng-invalid .cf-input-container {
  background: var(--input-container-background-color-invalid);
  border: 1px solid var(--input-container-border-color-invalid); }

cf-tags .cf-tag-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }
  cf-tags .cf-tag-items .cf-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px; }
    cf-tags .cf-tag-items .cf-tag span {
      overflow: hidden;
      text-overflow: ellipsis; }
    cf-tags .cf-tag-items .cf-tag .remixicon {
      cursor: pointer; }

/* FOCUSED */
.cf-input-container.cf-focused {
  border: 1px solid var(--input-container-border-color-focused); }

cf-checkbox.cf-focused .cf-checkbox .cf-checkbox-label {
  border: 1px solid var(--cf-checkbox-border-color-focused); }

cf-radio.cf-focused .radio .label {
  border: 1px solid var(--radio-border-color-focused); }

cf-switch.cf-focused .switch .label {
  border: 1px solid var(--switch-border-color-focused); }

/* DISABLED */
.cf-input-container.cf-disabled {
  opacity: 0.8;
  background: var(--input-container-background-color-disabled);
  border: 1px solid var(--input-container-border-color-disabled); }

cf-checkbox.cf-disabled .cf-checkbox .cf-check {
  background: var(--input-container-background-color-disabled);
  border: 1px solid var(--input-container-border-color-disabled); }

cf-radio.cf-disabled .radio .check {
  background: var(--input-container-background-color-disabled);
  border: 1px solid var(--input-container-border-color-disabled); }

cf-tags.cf-disabled .cf-input-container {
  opacity: 0.8;
  background: var(--input-container-background-color-disabled);
  border: 1px solid var(--input-container-border-color-disabled); }

cf-switch.cf-disabled .switch .cf-switch-slider {
  background: var(--switch-background-color-disabled);
  border: 1px solid var(--switch-border-color-disabled); }
  cf-switch.cf-disabled .switch .cf-switch-slider:before {
    background: var(--switch-dot-background-color-disabled); }

.cf-input-group {
  display: flex; }
  .cf-input-group > :not(:first-child) {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important; }
  .cf-input-group > :not(:last-child) {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important; }
  .cf-input-group .cf-input-container {
    flex-grow: 1; }

/* INPUT CONTAINER */
.cf-input-container {
  background: var(--input-container-background-color);
  border: 1px solid var(--input-container-border-color);
  display: inline-block;
  height: 36px;
  border-radius: 4px;
  display: flex;
  position: relative;
  /* BORDEER RADIUS ON FIRST AND LAST ELEMENT */ }
  .cf-input-container.cf-input-container-auto-height {
    height: auto; }
  .cf-input-container .cf-input-open:first-child,
  .cf-input-container .cf-input-prefix:first-child,
  .cf-input-container .cf-input-suffix:first-child,
  .cf-input-container .cf-input-clear:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px; }
  .cf-input-container .cf-input-open:last-child,
  .cf-input-container .cf-input-prefix:last-child,
  .cf-input-container .cf-input-suffix:last-child,
  .cf-input-container .cf-input-clear:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px; }
  .cf-input-container .cf-floating-label-container:first-child .cf-input-container-default-input {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px; }
  .cf-input-container .cf-floating-label-container:last-child .cf-input-container-default-input {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px; }
  .cf-input-container.cf-colorpicker .cf-floating-label-container .cf-input-container-default-input {
    text-align: center; }
  .cf-input-container.cf-listbox:not(.cf-readonly):not(.cf-disabled) .cf-floating-label-container .cf-listbox-items-container .cf-listbox-item:hover {
    background-color: var(--hover-color); }
  .cf-input-container.cf-dropdown:not(.cf-readonly):not(.cf-disabled) .dropdown-value-container {
    cursor: pointer; }
  .cf-input-container.cf-dropdown .dropdown-value-container {
    flex-grow: 1;
    padding: 6px;
    padding-top: 8px;
    color: var(--input-color);
    font-size: 16px; }
    .cf-input-container.cf-dropdown .dropdown-value-container .dropdown-value {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 36px;
      line-height: 34px;
      padding-left: 12px;
      padding-right: 36px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
      .cf-input-container.cf-dropdown .dropdown-value-container .dropdown-value span::after {
        content: ', ';
        display: inline-block;
        margin-right: 4px; }
      .cf-input-container.cf-dropdown .dropdown-value-container .dropdown-value span:last-child::after {
        content: '';
        display: none;
        margin-right: 0px; }
  .cf-input-container.cf-inputnumber .cf-inputnumber-buttons {
    width: 18px; }
    .cf-input-container.cf-inputnumber .cf-inputnumber-buttons .cf-inputnumber-button {
      background: #16A34A;
      color: #ffffff;
      font-size: 17px;
      cursor: pointer;
      user-select: none; }
      .cf-input-container.cf-inputnumber .cf-inputnumber-buttons .cf-inputnumber-button:hover {
        opacity: 0.8; }
      .cf-input-container.cf-inputnumber .cf-inputnumber-buttons .cf-inputnumber-button.disabled, .cf-input-container.cf-inputnumber .cf-inputnumber-buttons .cf-inputnumber-button.readonly {
        filter: grayscale(1); }
      .cf-input-container.cf-inputnumber .cf-inputnumber-buttons .cf-inputnumber-button.cf-inputnumber-button-up {
        border-top-right-radius: 4px; }
      .cf-input-container.cf-inputnumber .cf-inputnumber-buttons .cf-inputnumber-button.cf-inputnumber-button-down {
        border-bottom-right-radius: 4px; }
    .cf-input-container.cf-inputnumber .cf-inputnumber-buttons:not(:last-child) .cf-inputnumber-button.cf-inputnumber-button-up {
      border-top-right-radius: 0px; }
    .cf-input-container.cf-inputnumber .cf-inputnumber-buttons:not(:last-child) .cf-inputnumber-button.cf-inputnumber-button-down {
      border-bottom-right-radius: 0px; }
  .cf-input-container .cf-input-container-default-input {
    width: 100%;
    border: none;
    outline: none;
    padding: 6px;
    padding-top: 8px;
    font-size: 16px;
    font-family: 'worksans-regular';
    color: var(--input-color);
    flex-grow: 1;
    background: none; }
  .cf-input-container .cf-floating-label-container {
    height: 100%;
    position: relative;
    flex-grow: 1;
    display: flex; }
    .cf-input-container .cf-floating-label-container .cf-floating-label {
      position: absolute;
      pointer-events: none;
      font-size: 16px;
      top: 16px;
      left: 8px;
      margin-top: -6px;
      transition-property: all;
      transition-timing-function: ease;
      transition-duration: 0.2s;
      line-height: 1;
      color: var(--floating-label-color);
      max-width: calc(100% - 16px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .cf-input-container .cf-floating-label-container .cf-floating-label.float {
        font-size: 12px;
        color: var(--floating-label-float-color);
        top: -12px;
        background-color: var(--floating-label-float-background-color);
        padding: 2px 4px;
        margin-left: -4px;
        margin-top: 0;
        border-radius: 4px;
        border: 1px solid var(--floating-label-float-border-color); }
  .cf-input-container .cf-input-prefix {
    padding: 0px 10px;
    background: var(--input-prefix-background-color);
    align-items: center;
    display: flex;
    white-space: nowrap;
    color: var(--input-prefix-color); }
  .cf-input-container .cf-input-suffix {
    padding: 0px 10px;
    background: var(--input-suffix-background-color);
    align-items: center;
    display: flex;
    white-space: nowrap;
    color: var(--input-suffix-color); }
  .cf-input-container .cf-input-clear {
    display: flex;
    flex: 0 0 34px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--input-clear-color);
    font-size: 19px;
    background: var(--input-clear-background-color); }
  .cf-input-container .cf-input-open {
    display: flex;
    flex: 0 0 34px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--input-open-color);
    font-size: 19px;
    background: var(--input-open-background-color); }
    .cf-input-container .cf-input-open::before {
      transition: transform 0.2s; }
    .cf-input-container .cf-input-open.opened::before {
      transform: rotate(180deg); }
  .cf-input-container .cf-input-separator {
    display: flex;
    flex: 0 0 1px;
    background: var(--input-separator-color); }

.input-container {
  position: relative; }
  .input-container > .dragdroplist .hidden-input {
    display: none; }
  .input-container > .autocomplete .autocomplete-value input {
    background: none; }
  .input-container > .autocomplete.readonly .autocomplete-value input {
    background-color: #eeeeee; }
  .input-container > .dropdown.readonly {
    background-color: #eeeeee; }
  .input-container > .calendar.readonly {
    background-color: #eeeeee; }
    .input-container > .calendar.readonly input {
      background: none; }
  .input-container > .cf-tags-container.readonly input {
    background-color: #eeeeee; }
  .input-container > label {
    position: absolute;
    pointer-events: none;
    font-size: 16px;
    top: 16px;
    left: 8px;
    margin-top: -6px;
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 0.2s;
    line-height: 1;
    color: #a7a7a7; }
  .input-container > input,
  .input-container > textarea,
  .input-container > .floating-label-container input {
    width: 100%;
    font-size: 16px;
    font-family: 'worksans-regular';
    color: #3f3f46;
    appearance: none;
    height: 36px;
    padding: 6px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d4d4d8;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); }
    .input-container > input:disabled,
    .input-container > textarea:disabled,
    .input-container > .floating-label-container input:disabled {
      opacity: 0.5; }
      .input-container > input:disabled ~ label,
      .input-container > textarea:disabled ~ label,
      .input-container > .floating-label-container input:disabled ~ label {
        opacity: 0.5; }
    .input-container > input.readonly,
    .input-container > textarea.readonly,
    .input-container > .floating-label-container input.readonly {
      background-color: #eeeeee; }
    .input-container > input.cf-filled ~ label,
    .input-container > textarea.cf-filled ~ label,
    .input-container > .floating-label-container input.cf-filled ~ label {
      font-size: 12px;
      color: #3f3f46;
      top: -12px;
      background-color: #ffffff;
      padding: 2px 4px;
      margin-left: -4px;
      margin-top: 0;
      border-radius: 4px;
      border: 1px solid #d4d4d8; }
    .input-container > input.align-to-right,
    .input-container > textarea.align-to-right,
    .input-container > .floating-label-container input.align-to-right {
      text-align: right; }
    .input-container > input:enabled:focus,
    .input-container > textarea:enabled:focus,
    .input-container > .floating-label-container input:enabled:focus {
      outline: none 0px;
      outline-offset: 0px;
      box-shadow: #6366f1 0px 0px 0px 1px;
      border-color: #4f46e5; }
      .input-container > input:enabled:focus ~ label,
      .input-container > textarea:enabled:focus ~ label,
      .input-container > .floating-label-container input:enabled:focus ~ label {
        font-size: 12px;
        color: #3F51B5;
        top: -12px;
        background-color: #ffffff;
        padding: 2px 4px;
        margin-left: -4px;
        margin-top: 0;
        border-radius: 4px;
        border: 1px solid #6366f1; }
    .input-container > input:not(:read-only).ng-invalid,
    .input-container > textarea:not(:read-only).ng-invalid,
    .input-container > .floating-label-container input:not(:read-only).ng-invalid {
      border-color: #f0a9a7;
      background-color: #f0a9a730; }
      .input-container > input:not(:read-only).ng-invalid.cf-filled ~ label,
      .input-container > textarea:not(:read-only).ng-invalid.cf-filled ~ label,
      .input-container > .floating-label-container input:not(:read-only).ng-invalid.cf-filled ~ label {
        color: #e78d8a;
        border-color: #f0a9a7; }
      .input-container > input:not(:read-only).ng-invalid:focus,
      .input-container > textarea:not(:read-only).ng-invalid:focus,
      .input-container > .floating-label-container input:not(:read-only).ng-invalid:focus {
        box-shadow: #e78d8a 0px 0px 0px 1px;
        border-color: #e78d8a; }
        .input-container > input:not(:read-only).ng-invalid:focus ~ label,
        .input-container > textarea:not(:read-only).ng-invalid:focus ~ label,
        .input-container > .floating-label-container input:not(:read-only).ng-invalid:focus ~ label {
          color: #e78d8a;
          border-color: #f0a9a7; }
  .input-container > .dropdown {
    width: 100%;
    font-size: 16px;
    font-family: 'worksans-regular';
    appearance: none;
    padding: 6px;
    color: #3f3f46;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d4d4d8;
    appearance: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
    height: 36px;
    position: relative;
    cursor: pointer; }
    .input-container > .dropdown.focused {
      outline: none 0px;
      outline-offset: 0px;
      box-shadow: #6366f1 0px 0px 0px 1px;
      border-color: #4f46e5; }
    .input-container > .dropdown.disabled {
      opacity: 0.5; }
      .input-container > .dropdown.disabled ~ label {
        opacity: 0.5; }
    .input-container > .dropdown.focused ~ label,
    .input-container > .dropdown.filled ~ label,
    .input-container > .dropdown.unfilledtext ~ label {
      font-size: 12px;
      color: #3f3f46;
      top: -12px;
      background-color: #ffffff;
      padding: 2px 4px;
      margin-left: -4px;
      margin-top: 0;
      border-radius: 4px;
      border: 1px solid #d4d4d8; }
    .input-container > .dropdown .hidden-input {
      position: absolute;
      transform: scale(0); }
    .input-container > .dropdown.opened {
      outline: none 0px;
      outline-offset: 0px;
      box-shadow: #6366f1 0px 0px 0px 1px;
      border-color: #4f46e5;
      border-radius: 4px 4px 2px 2px; }
      .input-container > .dropdown.opened .dropdown-items {
        margin-top: 1px;
        display: flex;
        border-top: 1px solid #4f46e5; }
  .input-container > .autocomplete {
    width: 100%;
    font-size: 16px;
    font-family: 'worksans-regular';
    appearance: none;
    padding: 6px;
    color: #3f3f46;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d4d4d8;
    appearance: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
    height: 36px;
    position: relative;
    cursor: pointer; }
    .input-container > .autocomplete .autocomplete-value {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0; }
      .input-container > .autocomplete .autocomplete-value input {
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        border: none;
        outline: none;
        border-radius: 4px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 16px;
        font-family: 'worksans-regular';
        color: #3f3f46; }
      .input-container > .autocomplete .autocomplete-value .autocomplete-value-clear {
        position: absolute;
        right: 7px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        color: #EF4444; }
    .input-container > .autocomplete.disabled {
      opacity: 0.5; }
      .input-container > .autocomplete.disabled ~ label {
        opacity: 0.5; }
    .input-container > .autocomplete.focused {
      outline: none 0px;
      outline-offset: 0px;
      box-shadow: #6366f1 0px 0px 0px 1px;
      border-color: #4f46e5; }
    .input-container > .autocomplete.focused ~ label,
    .input-container > .autocomplete.filled ~ label {
      font-size: 12px;
      color: #3f3f46;
      top: -12px;
      background-color: #ffffff;
      padding: 2px 4px;
      margin-left: -4px;
      margin-top: 0;
      border-radius: 4px;
      border: 1px solid #d4d4d8; }
  .input-container > .editor {
    border-radius: 4px;
    border: 1px solid #d4d4d8;
    display: flex;
    flex-direction: column; }
    .input-container > .editor .hidden-input {
      display: none; }
    .input-container > .editor .editor-header {
      border-bottom: 1px solid #d4d4d8; }
      .input-container > .editor .editor-header .editor-header-menu {
        display: flex; }
        .input-container > .editor .editor-header .editor-header-menu .editor-header-menu-item {
          width: 30px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative; }
          .input-container > .editor .editor-header .editor-header-menu .editor-header-menu-item:hover {
            background: #ececec;
            cursor: pointer; }
          .input-container > .editor .editor-header .editor-header-menu .editor-header-menu-item .editor-header-menu-item-heading {
            display: none;
            position: absolute;
            top: 30px;
            left: 0px;
            width: 130px;
            border: 1px solid #d4d4d8;
            background: #ffffff; }
            .input-container > .editor .editor-header .editor-header-menu .editor-header-menu-item .editor-header-menu-item-heading div {
              padding: 3px 10px;
              cursor: pointer; }
              .input-container > .editor .editor-header .editor-header-menu .editor-header-menu-item .editor-header-menu-item-heading div:hover {
                background: #f3f3f3; }
          .input-container > .editor .editor-header .editor-header-menu .editor-header-menu-item:hover .editor-header-menu-item-heading {
            display: block; }
    .input-container > .editor .editor-content {
      flex-grow: 1;
      position: relative; }
      .input-container > .editor .editor-content > iframe {
        border: none;
        display: block;
        width: 100%;
        height: 100%; }
      .input-container > .editor .editor-content > textarea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: none;
        padding: 12px;
        resize: none; }
  .input-container > .colorpicker {
    width: 100%;
    font-size: 16px;
    font-family: 'worksans-regular';
    appearance: none;
    padding: 6px;
    color: #3f3f46;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d4d4d8;
    appearance: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
    height: 36px;
    position: relative;
    cursor: pointer; }
    .input-container > .colorpicker.disabled, .input-container > .colorpicker.readonly {
      opacity: 0.6; }
    .input-container > .colorpicker.disabled + label {
      opacity: 0.6; }
    .input-container > .colorpicker .hidden-input {
      position: absolute;
      transform: scale(0); }
    .input-container > .colorpicker .colorpicker-value {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 36px;
      line-height: 34px;
      padding-left: 12px;
      padding-right: 36px; }
      .input-container > .colorpicker .colorpicker-value .colorpicker-value-inner {
        background-color: red;
        position: absolute;
        width: calc(100% - 4px);
        height: calc(100% - 6px);
        border-radius: 4px;
        top: 2px;
        left: 2px; }
        .input-container > .colorpicker .colorpicker-value .colorpicker-value-inner .colorpicker-value-inner-input {
          background: none;
          border: none;
          color: #ffffff;
          height: 100%;
          position: absolute;
          width: 100%;
          text-align: center;
          outline: none; }
          .input-container > .colorpicker .colorpicker-value .colorpicker-value-inner .colorpicker-value-inner-input.dark {
            color: #000000; }
    .input-container > .colorpicker .colorpicker-dropdown {
      display: none;
      width: 350px;
      height: 300px;
      position: absolute;
      left: 0;
      top: 34px;
      background: #ffffff;
      user-select: none;
      z-index: 2000; }
      .input-container > .colorpicker .colorpicker-dropdown .colorpicker-block {
        position: absolute;
        left: 0;
        top: 0; }
      .input-container > .colorpicker .colorpicker-dropdown .colorpicker-strip {
        position: absolute;
        right: 0;
        top: 0; }
      .input-container > .colorpicker .colorpicker-dropdown .colorpicker-block-position {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none; }
      .input-container > .colorpicker .colorpicker-dropdown .colorpicker-strip-line {
        position: absolute;
        right: 0;
        top: 0;
        pointer-events: none; }
    .input-container > .colorpicker.opened .colorpicker-dropdown {
      display: grid; }
    .input-container > .colorpicker.focused {
      outline: none 0px;
      outline-offset: 0px;
      box-shadow: #6366f1 0px 0px 0px 1px;
      border-color: #4f46e5; }
    .input-container > .colorpicker.focused ~ label,
    .input-container > .colorpicker.filled ~ label {
      font-size: 12px;
      color: #3f3f46;
      top: -12px;
      background-color: #ffffff;
      padding: 2px 4px;
      margin-left: -4px;
      margin-top: 0;
      border-radius: 4px;
      border: 1px solid #d4d4d8; }
  .input-container > .calendar {
    width: 100%;
    font-size: 16px;
    font-family: 'worksans-regular';
    appearance: none;
    padding: 0px 6px;
    overflow: hidden;
    color: #3f3f46;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d4d4d8;
    appearance: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
    height: 36px;
    position: relative;
    cursor: pointer; }
    .input-container > .calendar .hidden-input {
      position: absolute;
      transform: scale(0); }
    .input-container > .calendar .calendar-value-clear {
      display: flex;
      flex: 0 0 36px;
      height: 36px;
      font-size: 22px;
      color: #EF4444;
      align-items: center;
      justify-content: center; }
    .input-container > .calendar .calendar-open-dropdown {
      display: flex;
      flex: 0 0 36px;
      height: 36px;
      color: #000000;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      .input-container > .calendar .calendar-open-dropdown.opened {
        transform: rotate(180deg); }
    .input-container > .calendar.focused {
      outline: none 0px;
      outline-offset: 0px;
      box-shadow: #6366f1 0px 0px 0px 1px;
      border-color: #4f46e5; }
    .input-container > .calendar.disabled {
      opacity: 0.5; }
      .input-container > .calendar.disabled ~ label {
        opacity: 0.5; }
    .input-container > .calendar > input {
      outline: none;
      border: none;
      font-family: 'worksans-regular';
      font-size: 16px;
      width: 100%; }
    .input-container > .calendar.focused ~ label,
    .input-container > .calendar.filled ~ label {
      font-size: 12px;
      color: #3f3f46;
      top: -12px;
      background-color: #ffffff;
      padding: 2px 4px;
      margin-left: -4px;
      margin-top: 0;
      border-radius: 4px;
      border: 1px solid #d4d4d8; }

cf-inputnumber .input-container .floating-label-container:not(:first-child) input {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px; }

cf-inputnumber .input-container .floating-label-container:not(:last-child) input {
  border-right: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px; }

cf-inputtextarea.fit-height {
  height: 100%; }
  cf-inputtextarea.fit-height .input-container {
    height: 100%; }
    cf-inputtextarea.fit-height .input-container textarea {
      height: 100%; }

@keyframes onAutoFillStart {
  from {
    /**/ }
  to {
    /**/ } }

@keyframes onAutoFillCancel {
  from {
    /**/ }
  to {
    /**/ } }

*:-webkit-autofill {
  animation-name: onAutoFillStart;
  transition: background-color 50000s ease-in-out 0s; }

*:not(:-webkit-autofill) {
  animation-name: onAutoFillCancel; }

cf-inputtext.ng-invalid .input-container input:not(:read-only).cf-filled ~ label, cf-inputtext.ng-invalid .input-container input :not(.readonly).cf-filled ~ label,
cf-inputtext.ng-invalid .input-container textarea:not(:read-only).cf-filled ~ label,
cf-inputtext.ng-invalid .input-container textarea :not(.readonly).cf-filled ~ label,
cf-inputtext.ng-invalid .input-container .calendar:not(:read-only).cf-filled ~ label,
cf-inputtext.ng-invalid .input-container .calendar :not(.readonly).cf-filled ~ label,
cf-inputtext.ng-invalid .input-container .dropdown:not(:read-only).cf-filled ~ label,
cf-inputtext.ng-invalid .input-container .dropdown :not(.readonly).cf-filled ~ label,
cf-inputtextarea.ng-invalid .input-container input:not(:read-only).cf-filled ~ label,
cf-inputtextarea.ng-invalid .input-container input :not(.readonly).cf-filled ~ label,
cf-inputtextarea.ng-invalid .input-container textarea:not(:read-only).cf-filled ~ label,
cf-inputtextarea.ng-invalid .input-container textarea :not(.readonly).cf-filled ~ label,
cf-inputtextarea.ng-invalid .input-container .calendar:not(:read-only).cf-filled ~ label,
cf-inputtextarea.ng-invalid .input-container .calendar :not(.readonly).cf-filled ~ label,
cf-inputtextarea.ng-invalid .input-container .dropdown:not(:read-only).cf-filled ~ label,
cf-inputtextarea.ng-invalid .input-container .dropdown :not(.readonly).cf-filled ~ label,
cf-inputnumber.ng-invalid .input-container input:not(:read-only).cf-filled ~ label,
cf-inputnumber.ng-invalid .input-container input :not(.readonly).cf-filled ~ label,
cf-inputnumber.ng-invalid .input-container textarea:not(:read-only).cf-filled ~ label,
cf-inputnumber.ng-invalid .input-container textarea :not(.readonly).cf-filled ~ label,
cf-inputnumber.ng-invalid .input-container .calendar:not(:read-only).cf-filled ~ label,
cf-inputnumber.ng-invalid .input-container .calendar :not(.readonly).cf-filled ~ label,
cf-inputnumber.ng-invalid .input-container .dropdown:not(:read-only).cf-filled ~ label,
cf-inputnumber.ng-invalid .input-container .dropdown :not(.readonly).cf-filled ~ label,
cf-dropdown.ng-invalid .input-container input:not(:read-only).cf-filled ~ label,
cf-dropdown.ng-invalid .input-container input :not(.readonly).cf-filled ~ label,
cf-dropdown.ng-invalid .input-container textarea:not(:read-only).cf-filled ~ label,
cf-dropdown.ng-invalid .input-container textarea :not(.readonly).cf-filled ~ label,
cf-dropdown.ng-invalid .input-container .calendar:not(:read-only).cf-filled ~ label,
cf-dropdown.ng-invalid .input-container .calendar :not(.readonly).cf-filled ~ label,
cf-dropdown.ng-invalid .input-container .dropdown:not(:read-only).cf-filled ~ label,
cf-dropdown.ng-invalid .input-container .dropdown :not(.readonly).cf-filled ~ label,
cf-calendar.ng-invalid .input-container input:not(:read-only).cf-filled ~ label,
cf-calendar.ng-invalid .input-container input :not(.readonly).cf-filled ~ label,
cf-calendar.ng-invalid .input-container textarea:not(:read-only).cf-filled ~ label,
cf-calendar.ng-invalid .input-container textarea :not(.readonly).cf-filled ~ label,
cf-calendar.ng-invalid .input-container .calendar:not(:read-only).cf-filled ~ label,
cf-calendar.ng-invalid .input-container .calendar :not(.readonly).cf-filled ~ label,
cf-calendar.ng-invalid .input-container .dropdown:not(:read-only).cf-filled ~ label,
cf-calendar.ng-invalid .input-container .dropdown :not(.readonly).cf-filled ~ label,
cf-datetimepicker.ng-invalid .input-container input:not(:read-only).cf-filled ~ label,
cf-datetimepicker.ng-invalid .input-container input :not(.readonly).cf-filled ~ label,
cf-datetimepicker.ng-invalid .input-container textarea:not(:read-only).cf-filled ~ label,
cf-datetimepicker.ng-invalid .input-container textarea :not(.readonly).cf-filled ~ label,
cf-datetimepicker.ng-invalid .input-container .calendar:not(:read-only).cf-filled ~ label,
cf-datetimepicker.ng-invalid .input-container .calendar :not(.readonly).cf-filled ~ label,
cf-datetimepicker.ng-invalid .input-container .dropdown:not(:read-only).cf-filled ~ label,
cf-datetimepicker.ng-invalid .input-container .dropdown :not(.readonly).cf-filled ~ label,
cf-autocomplete.ng-invalid .input-container input:not(:read-only).cf-filled ~ label,
cf-autocomplete.ng-invalid .input-container input :not(.readonly).cf-filled ~ label,
cf-autocomplete.ng-invalid .input-container textarea:not(:read-only).cf-filled ~ label,
cf-autocomplete.ng-invalid .input-container textarea :not(.readonly).cf-filled ~ label,
cf-autocomplete.ng-invalid .input-container .calendar:not(:read-only).cf-filled ~ label,
cf-autocomplete.ng-invalid .input-container .calendar :not(.readonly).cf-filled ~ label,
cf-autocomplete.ng-invalid .input-container .dropdown:not(:read-only).cf-filled ~ label,
cf-autocomplete.ng-invalid .input-container .dropdown :not(.readonly).cf-filled ~ label {
  color: #e78d8a;
  border-color: #f0a9a7; }

cf-inputtext.ng-invalid .input-container input:not(:read-only):focus, cf-inputtext.ng-invalid .input-container input :not(.readonly):focus,
cf-inputtext.ng-invalid .input-container textarea:not(:read-only):focus,
cf-inputtext.ng-invalid .input-container textarea :not(.readonly):focus,
cf-inputtext.ng-invalid .input-container .calendar:not(:read-only):focus,
cf-inputtext.ng-invalid .input-container .calendar :not(.readonly):focus,
cf-inputtext.ng-invalid .input-container .dropdown:not(:read-only):focus,
cf-inputtext.ng-invalid .input-container .dropdown :not(.readonly):focus,
cf-inputtextarea.ng-invalid .input-container input:not(:read-only):focus,
cf-inputtextarea.ng-invalid .input-container input :not(.readonly):focus,
cf-inputtextarea.ng-invalid .input-container textarea:not(:read-only):focus,
cf-inputtextarea.ng-invalid .input-container textarea :not(.readonly):focus,
cf-inputtextarea.ng-invalid .input-container .calendar:not(:read-only):focus,
cf-inputtextarea.ng-invalid .input-container .calendar :not(.readonly):focus,
cf-inputtextarea.ng-invalid .input-container .dropdown:not(:read-only):focus,
cf-inputtextarea.ng-invalid .input-container .dropdown :not(.readonly):focus,
cf-inputnumber.ng-invalid .input-container input:not(:read-only):focus,
cf-inputnumber.ng-invalid .input-container input :not(.readonly):focus,
cf-inputnumber.ng-invalid .input-container textarea:not(:read-only):focus,
cf-inputnumber.ng-invalid .input-container textarea :not(.readonly):focus,
cf-inputnumber.ng-invalid .input-container .calendar:not(:read-only):focus,
cf-inputnumber.ng-invalid .input-container .calendar :not(.readonly):focus,
cf-inputnumber.ng-invalid .input-container .dropdown:not(:read-only):focus,
cf-inputnumber.ng-invalid .input-container .dropdown :not(.readonly):focus,
cf-dropdown.ng-invalid .input-container input:not(:read-only):focus,
cf-dropdown.ng-invalid .input-container input :not(.readonly):focus,
cf-dropdown.ng-invalid .input-container textarea:not(:read-only):focus,
cf-dropdown.ng-invalid .input-container textarea :not(.readonly):focus,
cf-dropdown.ng-invalid .input-container .calendar:not(:read-only):focus,
cf-dropdown.ng-invalid .input-container .calendar :not(.readonly):focus,
cf-dropdown.ng-invalid .input-container .dropdown:not(:read-only):focus,
cf-dropdown.ng-invalid .input-container .dropdown :not(.readonly):focus,
cf-calendar.ng-invalid .input-container input:not(:read-only):focus,
cf-calendar.ng-invalid .input-container input :not(.readonly):focus,
cf-calendar.ng-invalid .input-container textarea:not(:read-only):focus,
cf-calendar.ng-invalid .input-container textarea :not(.readonly):focus,
cf-calendar.ng-invalid .input-container .calendar:not(:read-only):focus,
cf-calendar.ng-invalid .input-container .calendar :not(.readonly):focus,
cf-calendar.ng-invalid .input-container .dropdown:not(:read-only):focus,
cf-calendar.ng-invalid .input-container .dropdown :not(.readonly):focus,
cf-datetimepicker.ng-invalid .input-container input:not(:read-only):focus,
cf-datetimepicker.ng-invalid .input-container input :not(.readonly):focus,
cf-datetimepicker.ng-invalid .input-container textarea:not(:read-only):focus,
cf-datetimepicker.ng-invalid .input-container textarea :not(.readonly):focus,
cf-datetimepicker.ng-invalid .input-container .calendar:not(:read-only):focus,
cf-datetimepicker.ng-invalid .input-container .calendar :not(.readonly):focus,
cf-datetimepicker.ng-invalid .input-container .dropdown:not(:read-only):focus,
cf-datetimepicker.ng-invalid .input-container .dropdown :not(.readonly):focus,
cf-autocomplete.ng-invalid .input-container input:not(:read-only):focus,
cf-autocomplete.ng-invalid .input-container input :not(.readonly):focus,
cf-autocomplete.ng-invalid .input-container textarea:not(:read-only):focus,
cf-autocomplete.ng-invalid .input-container textarea :not(.readonly):focus,
cf-autocomplete.ng-invalid .input-container .calendar:not(:read-only):focus,
cf-autocomplete.ng-invalid .input-container .calendar :not(.readonly):focus,
cf-autocomplete.ng-invalid .input-container .dropdown:not(:read-only):focus,
cf-autocomplete.ng-invalid .input-container .dropdown :not(.readonly):focus {
  box-shadow: #e78d8a 0px 0px 0px 1px;
  border-color: #e78d8a; }
  cf-inputtext.ng-invalid .input-container input:not(:read-only):focus ~ label, cf-inputtext.ng-invalid .input-container input :not(.readonly):focus ~ label,
  cf-inputtext.ng-invalid .input-container textarea:not(:read-only):focus ~ label,
  cf-inputtext.ng-invalid .input-container textarea :not(.readonly):focus ~ label,
  cf-inputtext.ng-invalid .input-container .calendar:not(:read-only):focus ~ label,
  cf-inputtext.ng-invalid .input-container .calendar :not(.readonly):focus ~ label,
  cf-inputtext.ng-invalid .input-container .dropdown:not(:read-only):focus ~ label,
  cf-inputtext.ng-invalid .input-container .dropdown :not(.readonly):focus ~ label,
  cf-inputtextarea.ng-invalid .input-container input:not(:read-only):focus ~ label,
  cf-inputtextarea.ng-invalid .input-container input :not(.readonly):focus ~ label,
  cf-inputtextarea.ng-invalid .input-container textarea:not(:read-only):focus ~ label,
  cf-inputtextarea.ng-invalid .input-container textarea :not(.readonly):focus ~ label,
  cf-inputtextarea.ng-invalid .input-container .calendar:not(:read-only):focus ~ label,
  cf-inputtextarea.ng-invalid .input-container .calendar :not(.readonly):focus ~ label,
  cf-inputtextarea.ng-invalid .input-container .dropdown:not(:read-only):focus ~ label,
  cf-inputtextarea.ng-invalid .input-container .dropdown :not(.readonly):focus ~ label,
  cf-inputnumber.ng-invalid .input-container input:not(:read-only):focus ~ label,
  cf-inputnumber.ng-invalid .input-container input :not(.readonly):focus ~ label,
  cf-inputnumber.ng-invalid .input-container textarea:not(:read-only):focus ~ label,
  cf-inputnumber.ng-invalid .input-container textarea :not(.readonly):focus ~ label,
  cf-inputnumber.ng-invalid .input-container .calendar:not(:read-only):focus ~ label,
  cf-inputnumber.ng-invalid .input-container .calendar :not(.readonly):focus ~ label,
  cf-inputnumber.ng-invalid .input-container .dropdown:not(:read-only):focus ~ label,
  cf-inputnumber.ng-invalid .input-container .dropdown :not(.readonly):focus ~ label,
  cf-dropdown.ng-invalid .input-container input:not(:read-only):focus ~ label,
  cf-dropdown.ng-invalid .input-container input :not(.readonly):focus ~ label,
  cf-dropdown.ng-invalid .input-container textarea:not(:read-only):focus ~ label,
  cf-dropdown.ng-invalid .input-container textarea :not(.readonly):focus ~ label,
  cf-dropdown.ng-invalid .input-container .calendar:not(:read-only):focus ~ label,
  cf-dropdown.ng-invalid .input-container .calendar :not(.readonly):focus ~ label,
  cf-dropdown.ng-invalid .input-container .dropdown:not(:read-only):focus ~ label,
  cf-dropdown.ng-invalid .input-container .dropdown :not(.readonly):focus ~ label,
  cf-calendar.ng-invalid .input-container input:not(:read-only):focus ~ label,
  cf-calendar.ng-invalid .input-container input :not(.readonly):focus ~ label,
  cf-calendar.ng-invalid .input-container textarea:not(:read-only):focus ~ label,
  cf-calendar.ng-invalid .input-container textarea :not(.readonly):focus ~ label,
  cf-calendar.ng-invalid .input-container .calendar:not(:read-only):focus ~ label,
  cf-calendar.ng-invalid .input-container .calendar :not(.readonly):focus ~ label,
  cf-calendar.ng-invalid .input-container .dropdown:not(:read-only):focus ~ label,
  cf-calendar.ng-invalid .input-container .dropdown :not(.readonly):focus ~ label,
  cf-datetimepicker.ng-invalid .input-container input:not(:read-only):focus ~ label,
  cf-datetimepicker.ng-invalid .input-container input :not(.readonly):focus ~ label,
  cf-datetimepicker.ng-invalid .input-container textarea:not(:read-only):focus ~ label,
  cf-datetimepicker.ng-invalid .input-container textarea :not(.readonly):focus ~ label,
  cf-datetimepicker.ng-invalid .input-container .calendar:not(:read-only):focus ~ label,
  cf-datetimepicker.ng-invalid .input-container .calendar :not(.readonly):focus ~ label,
  cf-datetimepicker.ng-invalid .input-container .dropdown:not(:read-only):focus ~ label,
  cf-datetimepicker.ng-invalid .input-container .dropdown :not(.readonly):focus ~ label,
  cf-autocomplete.ng-invalid .input-container input:not(:read-only):focus ~ label,
  cf-autocomplete.ng-invalid .input-container input :not(.readonly):focus ~ label,
  cf-autocomplete.ng-invalid .input-container textarea:not(:read-only):focus ~ label,
  cf-autocomplete.ng-invalid .input-container textarea :not(.readonly):focus ~ label,
  cf-autocomplete.ng-invalid .input-container .calendar:not(:read-only):focus ~ label,
  cf-autocomplete.ng-invalid .input-container .calendar :not(.readonly):focus ~ label,
  cf-autocomplete.ng-invalid .input-container .dropdown:not(:read-only):focus ~ label,
  cf-autocomplete.ng-invalid .input-container .dropdown :not(.readonly):focus ~ label {
    color: #e78d8a;
    border-color: #f0a9a7; }

cf-inputtext.ng-invalid .input-container input:not(:read-only),
cf-inputtext.ng-invalid .input-container textarea:not(:read-only),
cf-inputtextarea.ng-invalid .input-container input:not(:read-only),
cf-inputtextarea.ng-invalid .input-container textarea:not(:read-only),
cf-inputnumber.ng-invalid .input-container input:not(:read-only),
cf-inputnumber.ng-invalid .input-container textarea:not(:read-only),
cf-dropdown.ng-invalid .input-container input:not(:read-only),
cf-dropdown.ng-invalid .input-container textarea:not(:read-only),
cf-calendar.ng-invalid .input-container input:not(:read-only),
cf-calendar.ng-invalid .input-container textarea:not(:read-only),
cf-datetimepicker.ng-invalid .input-container input:not(:read-only),
cf-datetimepicker.ng-invalid .input-container textarea:not(:read-only),
cf-autocomplete.ng-invalid .input-container input:not(:read-only),
cf-autocomplete.ng-invalid .input-container textarea:not(:read-only) {
  border-color: #f0a9a7;
  background: #f0a9a730; }

cf-inputtext.ng-invalid .input-container .dropdown.focused,
cf-inputtextarea.ng-invalid .input-container .dropdown.focused,
cf-inputnumber.ng-invalid .input-container .dropdown.focused,
cf-dropdown.ng-invalid .input-container .dropdown.focused,
cf-calendar.ng-invalid .input-container .dropdown.focused,
cf-datetimepicker.ng-invalid .input-container .dropdown.focused,
cf-autocomplete.ng-invalid .input-container .dropdown.focused {
  box-shadow: #e78d8a 0px 0px 0px 1px;
  border-color: #e78d8a; }

cf-inputtext.ng-invalid .input-container .dropdown.opened .dropdown-items,
cf-inputtextarea.ng-invalid .input-container .dropdown.opened .dropdown-items,
cf-inputnumber.ng-invalid .input-container .dropdown.opened .dropdown-items,
cf-dropdown.ng-invalid .input-container .dropdown.opened .dropdown-items,
cf-calendar.ng-invalid .input-container .dropdown.opened .dropdown-items,
cf-datetimepicker.ng-invalid .input-container .dropdown.opened .dropdown-items,
cf-autocomplete.ng-invalid .input-container .dropdown.opened .dropdown-items {
  border-top: 1px solid #e78d8a; }

cf-inputtext.ng-invalid .input-container .dropdown:not(.readonly) .dropdown-value-container,
cf-inputtextarea.ng-invalid .input-container .dropdown:not(.readonly) .dropdown-value-container,
cf-inputnumber.ng-invalid .input-container .dropdown:not(.readonly) .dropdown-value-container,
cf-dropdown.ng-invalid .input-container .dropdown:not(.readonly) .dropdown-value-container,
cf-calendar.ng-invalid .input-container .dropdown:not(.readonly) .dropdown-value-container,
cf-datetimepicker.ng-invalid .input-container .dropdown:not(.readonly) .dropdown-value-container,
cf-autocomplete.ng-invalid .input-container .dropdown:not(.readonly) .dropdown-value-container {
  border-color: #f0a9a7;
  background: #f0a9a730; }

cf-inputtext.ng-invalid .input-container .calendar.focused,
cf-inputtextarea.ng-invalid .input-container .calendar.focused,
cf-inputnumber.ng-invalid .input-container .calendar.focused,
cf-dropdown.ng-invalid .input-container .calendar.focused,
cf-calendar.ng-invalid .input-container .calendar.focused,
cf-datetimepicker.ng-invalid .input-container .calendar.focused,
cf-autocomplete.ng-invalid .input-container .calendar.focused {
  box-shadow: #e78d8a 0px 0px 0px 1px;
  border-color: #e78d8a; }

cf-inputtext.ng-invalid .input-container .calendar:not(.readonly),
cf-inputtextarea.ng-invalid .input-container .calendar:not(.readonly),
cf-inputnumber.ng-invalid .input-container .calendar:not(.readonly),
cf-dropdown.ng-invalid .input-container .calendar:not(.readonly),
cf-calendar.ng-invalid .input-container .calendar:not(.readonly),
cf-datetimepicker.ng-invalid .input-container .calendar:not(.readonly),
cf-autocomplete.ng-invalid .input-container .calendar:not(.readonly) {
  border-color: #f0a9a7;
  background: #f0a9a730; }

cf-inputtext.ng-invalid .input-container .calendar input,
cf-inputtextarea.ng-invalid .input-container .calendar input,
cf-inputnumber.ng-invalid .input-container .calendar input,
cf-dropdown.ng-invalid .input-container .calendar input,
cf-calendar.ng-invalid .input-container .calendar input,
cf-datetimepicker.ng-invalid .input-container .calendar input,
cf-autocomplete.ng-invalid .input-container .calendar input {
  box-shadow: none !important;
  border-color: #e78d8a !important;
  background: none !important; }

cf-inputtext.ng-invalid .input-container .autocomplete.focused,
cf-inputtextarea.ng-invalid .input-container .autocomplete.focused,
cf-inputnumber.ng-invalid .input-container .autocomplete.focused,
cf-dropdown.ng-invalid .input-container .autocomplete.focused,
cf-calendar.ng-invalid .input-container .autocomplete.focused,
cf-datetimepicker.ng-invalid .input-container .autocomplete.focused,
cf-autocomplete.ng-invalid .input-container .autocomplete.focused {
  box-shadow: #e78d8a 0px 0px 0px 1px;
  border-color: #e78d8a; }

cf-inputtext.ng-invalid .input-container .autocomplete:not(.readonly),
cf-inputtextarea.ng-invalid .input-container .autocomplete:not(.readonly),
cf-inputnumber.ng-invalid .input-container .autocomplete:not(.readonly),
cf-dropdown.ng-invalid .input-container .autocomplete:not(.readonly),
cf-calendar.ng-invalid .input-container .autocomplete:not(.readonly),
cf-datetimepicker.ng-invalid .input-container .autocomplete:not(.readonly),
cf-autocomplete.ng-invalid .input-container .autocomplete:not(.readonly) {
  border-color: #f0a9a7;
  background: #f0a9a730; }

cf-checkbox.ng-invalid .checkbox.focused .label {
  box-shadow: #e78d8a 0px 0px 0px 1px !important; }

cf-checkbox.ng-invalid .checkbox:not(.readonly) .label {
  background: #f0a9a730;
  border-radius: 4px; }

cf-checkbox.ng-invalid .checkbox:not(.readonly) .check, cf-checkbox.ng-invalid .checkbox:not(.readonly) .label {
  border-color: #f0a9a7; }

cf-listbox.ng-invalid .input-container .cf-listbox-container:not(.cf-listbox-readonly) {
  background: #f0a9a730;
  border-color: #f0a9a7; }

cf-listbox.ng-invalid .input-container .cf-listbox-label {
  color: #e78d8a;
  border-color: #f0a9a7; }

cf-fieldset {
  display: block; }
  cf-fieldset fieldset {
    display: block;
    border: 1px solid var(--fieldset-border-color);
    padding: 16px;
    padding-top: 8px;
    border-radius: 4px;
    margin: 0;
    height: 100%; }
    cf-fieldset fieldset legend .cf-fieldset-title {
      color: var(--fieldset-title-color); }

/* DATETIMEPICKER CONTENT */
.cf-datetimepicker-dropdown {
  position: absolute;
  background: var(--datetimepicker-background-color);
  border-radius: 4px;
  border: 1px solid var(--datetimepicker-border-color);
  color: var(--datetimepicker-text-color);
  width: 252px;
  z-index: 2000; }
  .cf-datetimepicker-dropdown .year-and-month {
    display: flex;
    gap: 20px;
    text-align: center;
    line-height: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--datetimepicker-year-and-month-border-color); }
    .cf-datetimepicker-dropdown .year-and-month .year {
      display: flex; }
    .cf-datetimepicker-dropdown .year-and-month .month {
      display: flex;
      flex-grow: 1; }
      .cf-datetimepicker-dropdown .year-and-month .month .month-text {
        flex-grow: 1; }
  .cf-datetimepicker-dropdown .dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--datetimepicker-dates-background-color); }
    .cf-datetimepicker-dropdown .dates .date {
      text-align: center;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      background: var(--datetimepicker-date-background-color); }
      .cf-datetimepicker-dropdown .dates .date.cf-calendar-header {
        font-weight: bold; }
      .cf-datetimepicker-dropdown .dates .date.normal {
        cursor: pointer; }
        .cf-datetimepicker-dropdown .dates .date.normal:hover {
          background: var(--datetimepicker-date-hover-background-color);
          color: var(--datetimepicker-date-hover-text-color); }
        .cf-datetimepicker-dropdown .dates .date.normal.today {
          background: var(--datetimepicker-date-today-background-color);
          color: var(--datetimepicker-date-today-text-color); }
        .cf-datetimepicker-dropdown .dates .date.normal.othermonth {
          background: var(--datetimepicker-date-othermonth-background-color);
          color: var(--datetimepicker-date-othermonth-text-color); }
        .cf-datetimepicker-dropdown .dates .date.normal.selected {
          background: var(--datetimepicker-date-selected-background-color);
          color: var(--datetimepicker-date-selected-text-color); }
        .cf-datetimepicker-dropdown .dates .date.normal.disabled {
          pointer-events: none;
          opacity: 0.3; }
  .cf-datetimepicker-dropdown .todayline {
    padding: 10px 0px;
    text-align: center;
    cursor: pointer; }

/* DROPDOWN ITEMS */
.cf-dropdown-items {
  position: absolute;
  border-radius: 4px;
  background: var(--dropdown-items-background);
  border: 1px solid var(--dropdown-items-border-color);
  flex-direction: column;
  display: flex;
  z-index: 2000; }
  .cf-dropdown-items .cf-dropdown-item-search {
    padding: 12px; }
    .cf-dropdown-items .cf-dropdown-item-search > input {
      width: 100%;
      font-size: 16px;
      font-family: 'worksans-regular';
      color: var(--input-color);
      appearance: none;
      height: 36px;
      padding: 6px;
      background: var(--input-container-background-color);
      border-radius: 4px;
      border: 1px solid var(--input-container-border-color);
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); }
      .cf-dropdown-items .cf-dropdown-item-search > input:disabled {
        opacity: 0.5; }
        .cf-dropdown-items .cf-dropdown-item-search > input:disabled ~ label {
          opacity: 0.5; }
  .cf-dropdown-items .cf-dropdown-items-list {
    flex-grow: 1;
    overflow: hidden;
    overflow-y: auto; }
    .cf-dropdown-items .cf-dropdown-items-list .cf-dropdown-item {
      padding: 12px;
      cursor: pointer;
      color: var(--dropdown-item-text-color); }
      .cf-dropdown-items .cf-dropdown-items-list .cf-dropdown-item.selected {
        font-weight: bold; }
      .cf-dropdown-items .cf-dropdown-items-list .cf-dropdown-item.active {
        background: var(--hover-color); }
      .cf-dropdown-items .cf-dropdown-items-list .cf-dropdown-item.disabled {
        opacity: 0.5; }

/* AUTOCOMPLETE ITEMS */
.cf-autocomplete-items {
  position: absolute;
  background: var(--autocomplete-items-background);
  border-radius: 4px;
  border: 1px solid var(--autocomplete-items-border-color);
  overflow-y: auto;
  z-index: 2000; }
  .cf-autocomplete-items .autocomplete-item {
    padding: 12px;
    cursor: pointer;
    color: var(--autocomplete-item-text-color); }
    .cf-autocomplete-items .autocomplete-item.hovered {
      background: var(--hover-color) !important; }

.cf-fullpage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh; }
  .cf-fullpage.cf-fullpage-flex {
    display: flex;
    flex-direction: column; }

.cf-transform-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

.cf-header {
  display: block;
  width: 100vw;
  grid-area: header; }
  .cf-header.cf-header-default-style {
    background: #ffffff;
    border-bottom: 1px solid #dddddd; }
  .cf-header.cf-header-default-position {
    position: absolute;
    top: 0;
    left: 0; }

.cf-footer {
  display: block;
  width: 100vw;
  grid-area: footer; }
  .cf-footer.cf-footer-default-style {
    background: #ffffff;
    border-top: 1px solid #dddddd; }
  .cf-footer.cf-footer-default-position {
    position: absolute;
    top: 0;
    left: 0; }

.cf-menu {
  display: block;
  width: 240px;
  overflow-y: auto;
  grid-area: menu; }
  .cf-menu.cf-menu-default-style {
    background: #ffffff;
    border-right: 1px solid #dddddd; }
  .cf-menu.cf-menu-default-position {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh; }

.cf-sidebar {
  display: block; }
  .cf-sidebar.cf-left-sidebar-default-style {
    background: #ffffff;
    border-right: 1px solid #dddddd; }
  .cf-sidebar.cf-right-sidebar-default-style {
    background: #ffffff;
    border-left: 1px solid #dddddd; }

.cf-menu-item {
  display: flex;
  color: #000000;
  align-items: center;
  padding: 8px 16px;
  margin: 0px 8px;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: 0.2s;
  cursor: pointer; }
  .cf-menu-item i {
    margin-right: 4px; }
  .cf-menu-item:hover, .cf-menu-item.active {
    background-color: #4e46e520;
    color: #4e46e5; }
  .cf-menu-item:focus {
    border-color: #4F46E5; }
  .cf-menu-item .cf-menu-item-img {
    width: 19px;
    height: 19px; }

.cf-content-container {
  position: absolute;
  left: 240px;
  top: 80px;
  width: calc(100vw - 240px);
  height: calc(100vh - 80px);
  overflow: hidden;
  overflow-y: auto; }

.cf-overflow-a-auto {
  overflow-y: auto; }

.cf-flex {
  display: flex; }
  .cf-flex.cf-flex-justify-content-flex-start {
    justify-content: flex-start; }
  .cf-flex.cf-flex-justify-content-flex-end {
    justify-content: flex-end; }
  .cf-flex.cf-flex-justify-content-center {
    justify-content: center; }
  .cf-flex.cf-flex-justify-content-space-between {
    justify-content: space-between; }
  .cf-flex.cf-flex-justify-content-space-around {
    justify-content: space-around; }
  .cf-flex.cf-flex-justify-content-space-evenly {
    justify-content: space-evenly; }
  .cf-flex.cf-flex-column {
    flex-direction: column; }

.cf-flex-align-self-flex-start {
  align-self: flex-start; }

.cf-flex-align-self-flex-end {
  align-self: flex-end; }

.cf-flex-align-self-center {
  align-self: center; }

.cf-flex-align-self-baseline {
  align-self: baseline; }

.cf-flex-align-self-stretch {
  align-self: stretch; }

.cf-flex-spacer {
  gap: 16px; }

.cf-flex-grow {
  flex-grow: 1; }

.cf-flex-left {
  justify-content: left; }

.cf-flex-center {
  justify-content: center; }

.cf-flex-right {
  justify-content: right; }

.cf-flex-wrap {
  flex-wrap: wrap; }

.cf-flex-nowrap {
  flex-wrap: nowrap; }

.cf-flex-wrap-reverse {
  flex-wrap: wrap-reverse; }

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

.cf-ml-auto {
  margin-left: auto; }

.cf-white-space-nowrap {
  white-space: nowrap; }

.cf-text-overflow-ellipsis {
  text-overflow: ellipsis; }

.cf-background-color-primary {
  background: var(--primary-color); }

.cf-background-color-secondary {
  background: var(--secondary-color); }

.cf-background-color-info {
  background: var(--info-color); }

.cf-background-color-success {
  background: var(--success-color); }

.cf-background-color-warning {
  background: var(--warning-color); }

.cf-background-color-danger {
  background: var(--danger-color); }

.cf-text-color-white {
  color: #ffffff; }

.cf-text-color-primary {
  color: var(--primary-color); }

.cf-text-color-secondary {
  color: var(--secondary-color); }

.cf-text-color-info {
  color: var(--info-color); }

.cf-text-color-success {
  color: var(--success-color); }

.cf-text-color-warning {
  color: var(--warning-color); }

.cf-text-color-danger {
  color: var(--danger-color); }

.cf-text-bold {
  font-weight: bold; }

.cf-text-italic {
  font-style: italic; }

.cf-text-underline {
  text-decoration: underline; }

.cf-text-left {
  text-align: left; }

.cf-text-right {
  text-align: right; }

.cf-text-center {
  text-align: center; }

.cf-fill-height {
  height: 100%; }

.cf-fill-width {
  width: 100%; }

/* MARGINS, PADDINGS */
.cf-ml-0 {
  margin-left: 0px; }

.cf-mt-0 {
  margin-top: 0px; }

.cf-mb-0 {
  margin-bottom: 0px; }

.cf-mr-0 {
  margin-right: 0px; }

.cf-m-0 {
  margin: 0px; }

.cf-pl-0 {
  padding-left: 0px; }

.cf-pt-0 {
  padding-top: 0px; }

.cf-pb-0 {
  padding-bottom: 0px; }

.cf-pr-0 {
  padding-right: 0px; }

.cf-p-0 {
  padding: 0px; }

.cf-flex-spacer-0 {
  gap: 0px; }

.cf-ml-1 {
  margin-left: 4px; }

.cf-mt-1 {
  margin-top: 4px; }

.cf-mb-1 {
  margin-bottom: 4px; }

.cf-mr-1 {
  margin-right: 4px; }

.cf-m-1 {
  margin: 4px; }

.cf-pl-1 {
  padding-left: 4px; }

.cf-pt-1 {
  padding-top: 4px; }

.cf-pb-1 {
  padding-bottom: 4px; }

.cf-pr-1 {
  padding-right: 4px; }

.cf-p-1 {
  padding: 4px; }

.cf-flex-spacer-1 {
  gap: 4px; }

.cf-ml-2 {
  margin-left: 8px; }

.cf-mt-2 {
  margin-top: 8px; }

.cf-mb-2 {
  margin-bottom: 8px; }

.cf-mr-2 {
  margin-right: 8px; }

.cf-m-2 {
  margin: 8px; }

.cf-pl-2 {
  padding-left: 8px; }

.cf-pt-2 {
  padding-top: 8px; }

.cf-pb-2 {
  padding-bottom: 8px; }

.cf-pr-2 {
  padding-right: 8px; }

.cf-p-2 {
  padding: 8px; }

.cf-flex-spacer-2 {
  gap: 8px; }

.cf-ml-3 {
  margin-left: 12px; }

.cf-mt-3 {
  margin-top: 12px; }

.cf-mb-3 {
  margin-bottom: 12px; }

.cf-mr-3 {
  margin-right: 12px; }

.cf-m-3 {
  margin: 12px; }

.cf-pl-3 {
  padding-left: 12px; }

.cf-pt-3 {
  padding-top: 12px; }

.cf-pb-3 {
  padding-bottom: 12px; }

.cf-pr-3 {
  padding-right: 12px; }

.cf-p-3 {
  padding: 12px; }

.cf-flex-spacer-3 {
  gap: 12px; }

.cf-ml-4 {
  margin-left: 16px; }

.cf-mt-4 {
  margin-top: 16px; }

.cf-mb-4 {
  margin-bottom: 16px; }

.cf-mr-4 {
  margin-right: 16px; }

.cf-m-4 {
  margin: 16px; }

.cf-pl-4 {
  padding-left: 16px; }

.cf-pt-4 {
  padding-top: 16px; }

.cf-pb-4 {
  padding-bottom: 16px; }

.cf-pr-4 {
  padding-right: 16px; }

.cf-p-4 {
  padding: 16px; }

.cf-flex-spacer-4 {
  gap: 16px; }

.cf-shadow {
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); }

.cf-card {
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); }
  .cf-card.no-padding {
    padding: 0px; }

/* GRID */
.cf-vgrid {
  display: grid;
  grid-auto-flow: row;
  gap: 16px; }

.cf-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px; }
  .cf-grid.cf-cols-2 {
    grid-template-columns: repeat(2, 1fr); }
  .cf-grid.cf-cols-3 {
    grid-template-columns: repeat(3, 1fr); }
  .cf-grid.cf-cols-4 {
    grid-template-columns: repeat(4, 1fr); }
  .cf-grid.cf-cols-5 {
    grid-template-columns: repeat(5, 1fr); }
  .cf-grid.cf-cols-6 {
    grid-template-columns: repeat(6, 1fr); }
  .cf-grid.cf-cols-7 {
    grid-template-columns: repeat(7, 1fr); }
  .cf-grid.cf-cols-8 {
    grid-template-columns: repeat(8, 1fr); }
  .cf-grid.cf-cols-9 {
    grid-template-columns: repeat(9, 1fr); }
  .cf-grid.cf-cols-10 {
    grid-template-columns: repeat(10, 1fr); }
  .cf-grid.cf-cols-11 {
    grid-template-columns: repeat(11, 1fr); }

.cf-grid.cf-grid-gap-0,
.cf-vgrid.cf-grid-gap-0 {
  gap: 0px; }

.cf-grid.cf-grid-gap-1,
.cf-vgrid.cf-grid-gap-1 {
  gap: 4px; }

.cf-grid.cf-grid-gap-2,
.cf-vgrid.cf-grid-gap-2 {
  gap: 8px; }

.cf-grid.cf-grid-gap-3,
.cf-vgrid.cf-grid-gap-3 {
  gap: 12px; }

.cf-grid.cf-grid-gap-4,
.cf-vgrid.cf-grid-gap-4 {
  gap: 16px; }

.cf-grid-justify-self-start {
  justify-self: start; }

.cf-grid-align-self-start {
  align-self: start; }

.cf-grid-justify-self-end {
  justify-self: end; }

.cf-grid-align-self-end {
  align-self: end; }

.cf-grid-justify-self-center {
  justify-self: center; }

.cf-grid-align-self-center {
  align-self: center; }

.cf-grid-justify-self-stretch {
  justify-self: stretch; }

.cf-grid-align-self-stretch {
  align-self: stretch; }

.cf-grid-place-self-center {
  place-self: center; }

.cf-col-1 {
  grid-column: span 1; }

.cf-col-2 {
  grid-column: span 2; }

.cf-col-3 {
  grid-column: span 3; }

.cf-col-4 {
  grid-column: span 4; }

.cf-col-5 {
  grid-column: span 5; }

.cf-col-6 {
  grid-column: span 6; }

.cf-col-7 {
  grid-column: span 7; }

.cf-col-8 {
  grid-column: span 8; }

.cf-col-9 {
  grid-column: span 9; }

.cf-col-10 {
  grid-column: span 10; }

.cf-col-11 {
  grid-column: span 11; }

.cf-col-12 {
  grid-column: span 12; }

.cf-code {
  border-radius: 4px;
  padding: 16px;
  font-size: 16px;
  background: #242424;
  color: #ededed;
  white-space: pre; }

.cf-tooltip {
  position: absolute;
  display: inline-block;
  background: #000000e7;
  padding: 8px 16px;
  color: #fefefe;
  border-radius: 4px; }

.cf-min-width-0 {
  min-width: 0; }

.cf-ai-start {
  align-items: start; }

.cf-ai-end {
  align-items: end; }

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

.cf-ai-baseline {
  align-items: baseline; }

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

.cf-ai-flex-end {
  align-items: flex-end; }

.cf-ai-stretch {
  align-items: stretch; }

.cf-display-none {
  display: none; }

.cf-display-block {
  display: block; }

.cf-display-inline {
  display: inline; }

.cf-display-inline-block {
  display: inline-block; }

.cf-overflow-y-none {
  overflow-y: none; }

.cf-overflow-x-none {
  overflow-x: none; }

.cf-overflow-none {
  overflow: none; }

.cf-overflow-y-visible {
  overflow-y: visible; }

.cf-overflow-x-visible {
  overflow-x: visible; }

.cf-overflow-visible {
  overflow: visible; }

.cf-overflow-y-hidden {
  overflow-y: hidden; }

.cf-overflow-x-hidden {
  overflow-x: hidden; }

.cf-overflow-hidden {
  overflow: hidden; }

.cf-overflow-y-scroll {
  overflow-y: scroll; }

.cf-overflow-x-scroll {
  overflow-x: scroll; }

.cf-overflow-scroll {
  overflow: scroll; }

.cf-overflow-y-overlay {
  overflow-y: overlay; }

.cf-overflow-x-overlay {
  overflow-x: overlay; }

.cf-overflow-overlay {
  overflow: overlay; }

.cf-overflow-y-auto {
  overflow-y: auto; }

.cf-overflow-x-auto {
  overflow-x: auto; }

.cf-overflow-auto {
  overflow: auto; }

.cf-position-top {
  border-bottom: none;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px; }

.cf-position-bottom {
  border-top: none;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px; }