.incontext-iframe {
  border: none;
  height: 100%;
  min-height: 60vh;
  width: 100%;
  background: #fff;
  overflow: scroll;
}
.btn.icon-btn.header-action-button {
  background-color: #1463b1;
}

.btn.icon-btn.header-action-button:hover,
.btn.icon-btn.header-action-button.header-action-button-active {
  background-color: var(--locize-primaryDark);
}

.header-actions-tabs {
  position: relative;
  overflow: hidden;
  padding: 7px 5px 0 5px;
  margin-bottom: -5px;
  display: flex;
  align-items: center;
  margin-right: 15px;
  z-index: 10001;
}

.header-actions-tab {
  position: relative;
  padding: 2px 5px;
  margin-left: -2px;
  display: flex;
  align-items: center;
  color: var(--locize-lightGray);
  font-size: 12px;
  background-color: var(--locize-primary);
  z-index: 10001;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}

.header-actions-tab > span {
  font-family: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  margin-left: 2px;
  user-select: none;
  display: none;
}

.header-actions-tab:hover,
.header-actions-tab.header-actions-tab-active {
  color: var(--locize-white);
  background-color: rgba(33, 150, 243, 1);
  box-shadow: 0 0 5px 2px var(--locize-primary);
  z-index: 10002;
}

@media (min-width: 1156px) {
  .header-actions-tab > span {
    display: inline;
  }
}
.locize-filtersearch {
  position: relative;
  flex: 1;
  margin-right: 5px;
}

.locize-filtersearch-input {
  position: relative;
  display: block;
  border: none;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 10px 3px 30px;
  height: 30px;
  background-color: var(--locize-white);
  appearance: none;
  border-radius: 15px;
  /* border: 1px solid var(--locize-primary); */
  color: var(--locize-textGray);
  transition: background-color ease-in 0.3s;
}

.locize-filtersearch-input:hover,
.locize-filtersearch-input:focus {
  box-shadow: none;
  outline: none;
  background-color: var(--locize-white);
}

.locize-filtersearch-input-active {
  background-color: var(--locize-primaryHover);
}

.locize-filtersearch-input:disabled {
  background: var(--locize-lightGray);
  cursor: not-allowed;
}

.locize-filtersearch-input::placeholder {
  color: var(--locize-middleGray);
  font-weight: 200;
}

.locize-filtersearch-searchicon {
  position: absolute;
  left: 5px;
  top: 4px;
}.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.grid-item {
  position: relative;
  max-height: fit-content;
}

.grid-box {
  position: relative;
  background: var(--locize-white);
  border-radius: 8px;
  padding: 15px;
  height: calc(100% - 30px);

  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 20px 5px rgba(0, 0, 0, 0.05);
}

.grid-box.grid-box-nooverride {
  transform: translate(3px, 3px);
}

.grid-box.grid-box-override::after {
  content: '';
  background: var(--locize-lightGray);
  border-radius: 8px;
  padding: 15px;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(3px, 3px);

  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 20px 5px rgba(0, 0, 0, 0.05);

  z-index: -1;
}

.grid-box.grid-box-notexisting {
  transform: translate(3px, 3px);
  background: var(--locize-lightGray);
}



.grid-box.grid-box-primary {
  background: #2196f3d4;
}

.grid-box.grid-box-fallback {
  background: #ffffff8f;
  color: var(--locize-middleGray);
  box-shadow: none;
}

.grid-box.grid-box-secondary {
  background: #ffffffb5;
}

.grid-box.grid-box-empty {
  background: #ffffffdb;
  color: var(--locize-labelGray);
  box-shadow: none;
}

.grid-box.grid-box-empty a {
  color: #818181;
}

.grid-box.grid-box-active {
  background: #2196f38a;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 20px 5px rgba(0, 0, 0, 0.1);
}

.grid-box.grid-box-clickable:hover {
  cursor: pointer;
  transform: translateY(-1px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 10px 3px rgba(0, 0, 0, 0.2);
}

.grid-box.grid-box-override.grid-box-clickable:hover {
  transform: none;
}

.grid-box.grid-box-override.grid-box-clickable:hover::after {
  transform: translate(4px, 4px);
  z-index: -1;
}.locize-daterangepicker-wrapper {
  position: relative;
}

.locize-daterangepicker-panel {
  position: absolute;
  width: 530px;
  top: 40px;
  right: 0;

  background: linear-gradient(to right, #ffffff45, #fefefe52);
  /* color: var(--locize-primaryLight); */

  /* background: linear-gradient(to right, #00000008, #ffffff57);
  color: #ffffffa8; */

  background-color: #ffffff7d;
  /* background-color: #1b71da7d; */
  border-radius: 15px;
  backdrop-filter: blur(5px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 10px 3px rgba(0, 0, 0, 0.2);

  padding: 10px;
  font-weight: 400;
  font-family: var(--locize-font-family-readable);

  z-index: 90000000;
}


calendar-range svg {
  height: 16px;
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}


calendar-range svg path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

calendar-range::part(months) {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  justify-content: center;
}

calendar-range::part(button) {
  border: 1px solid #adb5bd;
  background-color: #fff;
  border-radius: 3px;
  width: 26px;
  height: 26px;
}

calendar-range svg path::part(button):focus-visible {
  outline: 2px solid #7048e8;
}

calendar-month {
  --color-accent: var(--locize-primaryLight);
  --color-text-on-accent: #ffffff;
}

calendar-month::part(button) {
  border-radius: 50%;
}

calendar-month::part(range-inner) {
  border-radius: 0;
  background-color: #2196f3a6;
}

calendar-month::part(range-start) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

calendar-month::part(range-end) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

calendar-month::part(range-start range-end) {
  border-radius: 3px;
}.post-date {
  border: 1px solid var(--locize-primary);
  background-color: transparent;
  color: var(--locize-font);
  border-radius: 100px;
  margin-bottom: 12px;
  padding: 6px 10px;
  font-family: Instrument Sans, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  display: inline-flex;
}

.blog-card-title {
  color: var(--brand-color--dark);
  margin-bottom: 8px;
  font-family: Instrument Sans, Verdana, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.blog-card-content p,
.blog-card-content ul {
  font-family: Instrument Sans, Verdana, sans-serif;
  color: #5f6778;
}

.blog-card-content li {
  margin-bottom: 15px;
}

.blog-card-content a {
  font-family: Instrument Sans, Verdana, sans-serif;
  color: var(--locize-primary);
}

.blog-card-content a:hover,
.blog-card-content a:visited {
  color: var(--locize-primaryDark);
}


.blog-hero-image {
  width: 100%;
  margin-bottom: 10px;
}

.blog-hero-image img {
  border-radius: 8px;
  max-width: 100%;
  display: inline-block;
}.changelog h4 {
  font-size: 14px;
  color: var(--locize-middleGray);
}

.locize-favStar {
  color: var(--locize-lightGray);
}

.locize-favStar.active {
  color: #ffbe00;
}

.locize-favStar:hover {
  cursor: pointer;
  transform: translateY(-2px);
  color: #ffbf0076;
}div.projectheader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  /* background-color: var(--locize-primary); */
  width: 100%;
  height: 50px;
  padding: 0;

  color: var(--locize-lightGray);
}

.locize-projectheader-item {
  font-size: 18px;
  color: var(--locize-white);
}

div.projectheader .dropdown-panel-wrapper {
  margin-top: 11px;
}

div.projectheader .dropdown-panel-wrapper .dropdown-panel {
  border-radius: 0 0 5px 5px;
}div.settingsheader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  /* background-color: #c5c5c5; */
  width: 100%;
  height: 40px;
  margin: 0;

  color: var(--locize-white);
}

.locize-settingsheader-item {
  font-size: 18px;
  color: var(--locize-white);
}

div.settingsheader .dropdown-panel-wrapper {
  margin-top: 11px;
}

div.settingsheader .dropdown-panel-wrapper .dropdown-panel {
  border-radius: 0 0 5px 5px;
}

div.settingsheader .tab {
  padding: 0 30px;
}.locize-cat-incontext .cat-ui-editor-segment {
  background-color: transparent;
}

.locize-cat-incontext .cat-ui-editor-segment .cat-ui-editor-segment-subKey {
  border-radius: 15px;
  margin: 15px;
  background-color: var(--cat-ui-bg-middle-opac);
}.locize-cat-screenshot-assignedkeys .cat-ui-keylistitem,
.locize-cat-screenshot-assignedkeys .cat-ui-keylistitem.cat-ui-keylistitem-selected,
.locize-cat-screenshot-assignedkeys .cat-ui-keylistitem:hover {
  background-color: transparent;
  /*cursor: initial;*/
}

.locize-cat-screenshot-assignedkeys-item:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .locize-cat-screenshot-assignedkeys-item:not(.locize-cat-screenshot-assignedkeys-item-selected):nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}

.locize-cat-screenshot-assignedkeys-item.locize-cat-screenshot-assignedkeys-item-selected,
.locize-cat-screenshot-assignedkeys-item:hover {
  background-color: var(--cat-ui-keylist-item-selected) !important;
  cursor: pointer;
}

.locize-cat-screenshot-assignedkeys-item .cat-ui-keylistitem-primarykey-state,
.locize-cat-screenshot-assignedkeys-item .cat-ui-keylistitem-subkey-state {
  display: none;
}

.locize-cat-screenshot-assignedkeys-item .cat-ui-keylistitem-primarykey-value {
  padding-left: 0;
}



.locize-cat-screenshot .cat-ui-col-left .cat-ui-infos.cat-ui-sectiontitle,
.locize-cat-screenshot .cat-ui-col-right .cat-ui-infos.cat-ui-sectiontitle,
[data-theme="light"] .locize-cat-screenshot .cat-ui-col-right .cat-ui-infos.cat-ui-sectiontitle {
  min-height: 50px;
  background-color: var(--cat-ui-bg-dark);
  background: var(--cat-ui-bg-dark);
  display: flex;
  align-items: center;
}

.locize-cat-screenshot .cat-ui-col-right .cat-ui-selectkeylistfilter-filter {
  margin: 10px;
  background-color: var(--cat-ui-bg-dark);
}div.catheader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  background-color: var(--locize-primary);
  width: 100%;
  height: 40px;
  padding: 0 2px;

  color: var(--locize-lightGray);
}

.locize-catheader-item {
  font-size: 16px;
  color: var(--locize-white);
}

div.catheader .dropdown-panel-wrapper {
  margin-top: 1px;
}

div.catheader .dropdown-panel-wrapper .dropdown-panel {
  border-radius: 0 0 5px 5px;
}

div.catheader ul.menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

div.catheader ul.menu li {
  margin: 0;
  user-select: none;
  font-size: 14px;
  font-family: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  font-weight: 400;
}
div.catheader ul.menu li * {
  display: inline-block;
  padding: 0;
}

div.catheader ul.menu li.active,
div.catheader ul.menu li.active * {
  color: var(--locize-middleGray);
  font-style: italic;
}

div.catheader ul.menu li a:hover {
  color: var(--locize-middleGray);
}
.cat-ui-keylistfilter-panel-section-item-count-zero {
  color: var(--cat-ui-font-secondary);
}
.progress-chart canvas {
  border-radius: 100%;
}

.cat-ui-segment-state-circle {
  position: relative;
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.cat-ui-segment-state-circle-10 {
  width: 14px;
  height: 14px;
}

.cat-ui-segment-state-circle-untranslated {
  background-color: var(--cat-ui-state-untranslated);
}
.cat-ui-segment-state-circle-review {
  background-color: var(--cat-ui-state-review);
}
.cat-ui-segment-state-circle-translated {
  background-color: var(--cat-ui-state-success);
}
.cat-ui-segment-state-circle-fuzzy {
  background-color: var(--cat-ui-state-fuzzy);
}
.cat-ui-segment-state-circle-ordered {
  background-color: var(--cat-ui-state-ordered);
}
.cat-ui-segment-state-circle-warnings {
  background-color: var(--cat-ui-state-warning);
}
.cat-ui-segment-state-circle-errors {
  background-color: var(--cat-ui-state-error);
}
.cat-ui-segment-state-circle-deleted {
  background-color: var(--cat-ui-state-error);
}
.cat-ui-segment-state-circle-overridden {
  background-color: var(--cat-ui-state-overridden);
}

.cat-ui-segment-state-icon {
  position: relative;
  margin: 2px;
}
.cat-ui-segment-state-icon-10 {
  margin: 2px;
}

.cat-ui-segment-state-icon-translated path:not([fill='none']),
.cat-ui-segment-state-icon-translated circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-segment-state-icon-review path:not([fill='none']),
.cat-ui-segment-state-icon-review circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-segment-state-icon-fuzzy path:not([fill='none']),
.cat-ui-segment-state-icon-fuzzy circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-segment-state-icon-warnings path:not([fill='none']),
.cat-ui-segment-state-icon-warnings circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-segment-state-icon-errors path:not([fill='none']),
.cat-ui-segment-state-icon-errors circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-segment-state-icon-untranslated path:not([fill='none']),
.cat-ui-segment-state-icon-untranslated circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-segment-state-icon-deleted path:not([fill='none']),
.cat-ui-segment-state-icon-deleted circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-segment-state-icon-ordered path:not([fill='none']),
.cat-ui-segment-state-icon-ordered circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-segment-state-icon-overridden path:not([fill='none']),
.cat-ui-segment-state-icon-overridden circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

.cat-ui-segment-state-circle-dirty {
  animation: cat-ui-segment-state-pulsate 2s ease-in-out infinite;
}

.cat-ui-segment-state-icon-committing {
  animation: cat-ui-segment-state-spin 1s ease-in-out infinite;
}

@keyframes cat-ui-segment-state-pulsate {
  0% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.9;
  }
}
@keyframes cat-ui-segment-state-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


[data-theme="light"] .cat-ui-segment-state-icon-translated path:not([fill='none']),
[data-theme="light"] .cat-ui-segment-state-icon-translated circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
[data-theme="light"] .cat-ui-segment-state-icon-review path:not([fill='none']),
[data-theme="light"] .cat-ui-segment-state-icon-review circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
[data-theme="light"] .cat-ui-segment-state-icon-fuzzy path:not([fill='none']),
[data-theme="light"] .cat-ui-segment-state-icon-fuzzy circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
[data-theme="light"] .cat-ui-segment-state-icon-warnings path:not([fill='none']),
[data-theme="light"] .cat-ui-segment-state-icon-warnings circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
[data-theme="light"] .cat-ui-segment-state-icon-errors path:not([fill='none']),
[data-theme="light"] .cat-ui-segment-state-icon-errors circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
[data-theme="light"] .cat-ui-segment-state-icon-untranslated path:not([fill='none']),
[data-theme="light"] .cat-ui-segment-state-icon-untranslated circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
[data-theme="light"] .cat-ui-segment-state-icon-deleted path:not([fill='none']),
[data-theme="light"] .cat-ui-segment-state-icon-deleted circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
[data-theme="light"] .cat-ui-segment-state-icon-ordered path:not([fill='none']),
[data-theme="light"] .cat-ui-segment-state-icon-ordered circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
[data-theme="light"] .cat-ui-segment-state-icon-overridden path:not([fill='none']),
[data-theme="light"] .cat-ui-segment-state-icon-overridden circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
.cat-ui-toggle-wrapper {
  display: inline-flex;
  align-items: center;
}

.cat-ui-toggle-label {
  margin-right: 5px;
  font-size: var(--cat-ui-font-12px);
  color: var(--cat-ui-font-primary);
}

.cat-ui-toggle-wrapper-disabled .react-switch-bg {
  background: var(--cat-ui-bg-middle2) !important;
}

.cat-ui-avatar-wrapper {
  display: inline-flex;
  justify-content: center;
  text-align: center;
  min-width: 26px;
  width: 26px;
  height: 26px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  line-height: 26px;
  color: var(--cat-ui-font-primary);
  font-size: 9px;
}

.cat-ui-avatar-wrapper.cat-ui-avatar-wrapper-small {
  min-width: 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 8px;
}

.cat-ui-avatar-image {
  position: absolute;
  opacity: 1;
  display: inline-block;
  margin: 0 auto;
  height: 100%;
  width: auto;
  transition: opacity 1s;
}

.cat-ui-avatar-icon {
  align-self: center;
}

.cat-ui-avatar-icon path:not([fill='none']),
.cat-ui-avatar-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

[data-theme="light"] .cat-ui-avatar-wrapper {
  color: var(--cat-ui-bg-middle);
}
[data-theme="light"] .cat-ui-avatar-icon path:not([fill='none']),
[data-theme="light"] .cat-ui-avatar-icon circle:not([fill='none']) {
  fill: var(--cat-ui-bg-middle);
}
.cat-ui-info-item.cat-ui-info-item-doneby {
  padding: 0;
  align-items: center;
}

.cat-ui-info-item.cat-ui-info-item-doneby .cat-ui-info-label {
  color: var(--cat-ui-font-primary2);
}
.cat-ui-select-wrapper {
  position: relative;
  flex: 1;
}
.cat-ui-select-wrapper-form {
  padding: 5px 0 5px 0;
}
.cat-ui-select-wrapper-form svg {
  margin-right: 10px;
  margin-top: 5px;
  z-index: 3;
}

.cat-ui-select {
  position: relative;
  border: none;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: var(--cat-ui-font-15px);
  color: var(--cat-ui-font-primary2);
  padding: 5px 15px 5px 5px;
  cursor: pointer;
  z-index: 2 !important;
}
.cat-ui-select-form {
  height: 30px;
  border-radius: 5px;
  color: var(--cat-ui-font-primary);
  transition: background-color ease-in 0.3s;
  padding: 2px 15px 4px 10px;

  background: rgba(75, 75, 75, 0.85);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 
              inset -1px -1px 1px rgba(255,255,255, 0.02),
              0 0 8px  rgba(154, 154, 154, 0.1);
}
.cat-ui-select-form:hover,
.cat-ui-select-form:focus {
  box-shadow: none;
  border: none;
  outline: none;
  background-color: var(--cat-ui-input-bg-hover);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 
              inset -1px -1px 1px rgba(255,255,255, 0.02),
              0 0 12px  rgba(0, 0, 0, 0.2);
}

.cat-ui-select:focus {
  box-shadow: none;
  border: none;
  outline: none;
}

.cat-ui-select-icon {
  pointer-events: none;
  position: absolute;
  right: -5px;
  top: 5px;
}
.cat-ui-select-icon-small {
  position: absolute;
  right: -8px;
  top: 3px;
}
.cat-ui-select-icon path:not([fill='none']),
.cat-ui-select-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary2);
}

.cat-ui-select-small {
  font-size: var(--cat-ui-font-12px);
  height: 24px;
  padding: 1px 10px 2px 10px;
}

.cat-ui-select-small .cat-ui-select-icon path:not([fill='none']),
.cat-ui-select-small .cat-ui-select-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}


[data-theme="light"] .cat-ui-select-form {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 
              inset -1px -1px 1px rgba(255,255,255, 0.02),
              0 0 8px  rgba(154, 154, 154, 0.1);
}
[data-theme="light"] .cat-ui-select-form:hover,
[data-theme="light"] .cat-ui-select-form:focus {
  background-color: var(--cat-ui-input-bg-hover);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 
              inset -1px -1px 1px rgba(255,255,255, 0.02),
              0 0 12px  rgba(0, 0, 0, 0.2);
}
.cat-ui-tabs {
  font-family: var(--font-family-readable);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  color: var(--cat-ui-font-primary);
  font-size: var(--cat-ui-font-14px);
}

.cat-ui-tab {
  position: relative;
  display: flex;
  align-items: center;
  flex: 9;
  justify-content: center;
  height: 30px;
  padding: 10px;
  transition: background-color ease-in 0.3s;
}
.cat-ui-tab:hover {
  cursor: pointer;
  background-color: var(--cat-ui-bg-middle);
}

.cat-ui-tab-active {
  background-color: var(--cat-ui-bg-dark2);
}

.cat-ui-col-right .cat-ui-infos.cat-ui-sectiontitle {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 48px  rgba(154, 154, 154, 0.1);
}
.cat-ui-col-right .cat-ui-infos.cat-ui-sectiontitle .cat-ui-info-item .cat-ui-info-label {
  font-size: var(--cat-ui-font-16px);
  font-family: var(--font-family-readable);
}

[data-theme="light"] .cat-ui-col-right .cat-ui-infos.cat-ui-sectiontitle {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 48px  rgba(154, 154, 154, 0.1);
}
.cat-ui-ribbon {
  display: inline-flex;
  align-items: center;
  background: var(--cat-ui-bg-middle3);
  color: var(--cat-ui-font-primary);
  margin-left: 5px;
  font-weight: 300;
  font-size: 9px;
  height: 16px;
  border-radius: 10px;
  padding: 0 10px;
  text-transform: uppercase;
  justify-content: center;
}
.cat-ui-ribbon.cat-ui-ribbon-success {
  background: var(--cat-ui-state-success);
}
.cat-ui-ribbon.cat-ui-ribbon-warning {
  background: var(--cat-ui-state-warning);
}
.cat-ui-ribbon.cat-ui-ribbon-error {
  background: var(--cat-ui-state-error);
}
.cat-ui-ribbon.cat-ui-ribbon-action {
  cursor: pointer;
}

.cat-ui-ribbon.cat-ui-ribbon-small {
  font-size: 8px;
  min-width: 7px;
  height: 14px;
  padding: 1px 4px 0px;
}

.cat-ui-ribbon.cat-ui-ribbon-disabled {
  background: var(--cat-ui-bg-middle2);
  color: var(--cat-ui-bg-light);
}


.spaces.spaces-y-l > *:not(hr) {
  margin-bottom: 20px;
}

.spaces.spaces-y > *:not(hr) {
  margin-bottom: 15px;
}

.spaces.spaces-y-c > *:not(hr) {
  margin-bottom: 5px;
}

.spaces.spaces-y > *:not(hr):last-child,
.spaces.spaces-y-l > *:not(hr):last-child,
.spaces.spaces-y-c > *:not(hr):last-child {
  margin-bottom: 0;
}

.spaces.spaces-x-l > *:not(hr) {
  margin-right: 20px;
}

.spaces.spaces-x > *:not(hr) {
  margin-right: 15px;
}

.spaces.spaces-x-c > *:not(hr) {
  margin-right: 5px;
}

.spaces.spaces-x > *:not(hr):last-child,
.spaces.spaces-x-l > *:not(hr):last-child,
.spaces.spaces-x-c > *:not(hr):last-child {
  margin-right: 0;
}

.spaces.spaces-singlechild > *:not(hr):last-child {
  /* padding-bottom: 20px; */
  margin-bottom: 0;
}

body.react-confirm-alert-body-element {
  overflow: hidden;
}

.react-confirm-alert {
  max-height: 90%;
  overflow-y: auto;
}

.react-confirm-alert-blur {
  filter: url(#gaussian-blur);
  filter: blur(1px);
}

.react-confirm-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  opacity: 0;
  animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
  backdrop-filter: blur(5px);
}

/* .react-confirm-alert-body {
    font-family: var(--font-family-readable);
    width: 400px;
    padding: 30px;
    text-align: left;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
    color: #666;
  } */

.react-confirm-alert-svg {
  position: absolute;
  top: 0;
  left: 0;
}

/* .react-confirm-alert-body > h1 {
    margin-top: 0;
  }
  
  .react-confirm-alert-body > h3 {
    margin: 0;
    font-size: 16px;
  } */

.react-confirm-alert-button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* .react-confirm-alert-button-group > button {
    outline: none;
    background: #333;
    border: none;
    display: inline-block;
    padding: 6px 18px;
    color: #eee;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
  } */

@keyframes react-confirm-alert-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (min-height: 575px) {
  .react-confirm-alert {
    overflow-y: visible;
  }
}

.locize-tiptap-container {
  position: relative;
  display: block;
  font-size: var(--cat-ui-font-15px);
  border: none;
  width: calc(100% - 15px);
  box-sizing: border-box;
  padding: 2px 10px 4px 10px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px;
  transition: background-color ease-in 0.3s;
  margin-bottom: 5px;
  box-shadow: none;
  outline: none;
  background-color: var(--cat-ui-font-editor-bg-focus);

  --white: #ffffff;
  --black: #101010;
  --gray-1: #424242;
  --gray-3: #6d6d6d;
  --gray-3: #c5c5c5;
  --code-bg: #000000;
}

.locize-tiptap-container.locize-tiptap-readonly {
  background-color: transparent;

  --black: var(--cat-ui-font-primary2);
  --white: #101010;
  --gray-3: #424242;
  --gray-2: #6d6d6d;
  --gray-1: #c5c5c5;
  --code-bg: #ccc;
}

.cat-ui-button.cat-ui-button-tiptap {
  background-color: var(--cat-ui-input-bg);
  border-radius: 4px;
  margin: 2px 2px 2px 0px;
  height: 25px;
}

.cat-ui-button.cat-ui-button-tiptap.is-active:not(:disabled) {
  background-color: var(--cat-ui-input-bg-active);
}

.tiptap-control-group {
  margin-bottom: 15px;
}

.tiptap {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  outline: none;
  color: var(--black);
}

/* STYLE FOR INLINE HTML */

/* List styles */
.tiptap ul,
.tiptap ol {
  padding: 0 1rem;
  margin: 1.25rem 1rem 1.25rem 0.4rem;
}

.tiptap li p {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

/* Heading styles */
.tiptap h1,
.tiptap h2,
.tiptap h3,
.tiptap h4,
.tiptap h5,
.tiptap h6 {
  line-height: 1.1;
  margin-top: 2.5rem;
  text-wrap: pretty;
}

.tiptap h1,
.tiptap h2 {
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
}

.tiptap h1 {
  font-size: 1.4rem;
}

.tiptap h2 {
  font-size: 1.2rem;
}

.tiptap h3 {
  font-size: 1.1rem;
}

.tiptap h4,
.tiptap h5,
.tiptap h6 {
  font-size: 1rem;
}

/* Code and preformatted text styles */
.tiptap code {
  background-color: var(--code-bg);
  border-radius: 0.4rem;
  color: var(--black);
  font-size: 0.85rem;
  padding: 0.25em 0.3em;
}

.tiptap pre {
  background: var(--black);
  border-radius: 0.5rem;
  color: var(--white);
  font-family: var(--font-family-monospace);
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
}

.tiptap code {
  background: none;
  color: inherit;
  font-size: 0.8rem;
  padding: 0;
}

.tiptap blockquote {
  border-left: 3px solid var(--gray-3);
  margin: 1.5rem 0;
  padding-left: 1rem;
}

.tiptap hr {
  border: none;
  border-top: 1px solid var(--gray-2);
  margin: 2rem 0;
}

.tiptap :first-child {
  margin-top: 0 !important;
}

.cat-ui-textarea-resize {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}

.cat-ui-textarea-resize::after,
.cat-ui-textarea-resize .cat-ui-textarea-resize-replicated {
  margin: 0;

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
  word-break: break-word;
}

.cat-ui-textarea-resize>textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}

.cat-ui-textarea-resize>textarea,
.cat-ui-textarea-resize .cat-ui-textarea-resize-replicated {
  /* Identical styling required!! */

  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}
.cat-ui-progressbar-panel-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
}

.cat-ui-progress-infos {
  margin-bottom: 10px;
}

.cat-ui-progress-infos .cat-ui-info-item {
  margin: 0 -10px;
  padding: 5px 10px;
  background-color: var(--cat-ui-bg-dark2);
  justify-content: space-between;
}

.cat-ui-progress-infos .cat-ui-info-item:first-child {
  margin-top: -10px;
}

.cat-ui-progressbar-percentage {
  position: absolute;
  color: var(--cat-ui-font-primary);
  font-size: 8px;
  font-weight: 300;
}
.cat-ui-progressbar-percentage small {
  font-size: 5px;
}

.cat-ui-i18nformat-panel-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
}

.cat-ui-i18nformat-infos {
  margin-bottom: 10px;
}

.cat-ui-i18nformat-infos .cat-ui-info-item {
  margin: 0 -10px;
  padding: 5px 10px;
  background-color: var(--cat-ui-bg-dark2);
  justify-content: space-between;
}

.cat-ui-i18nformat-infos .cat-ui-info-item:first-child {
  margin-top: -10px;
}

.cat-ui-i18nformat-infos-item {
  padding: 3px 0px;
  display: flex;
  align-items: center;
}
.cat-ui-i18nformat-infos-item:hover {
  font-weight: 600;
  color: var(--cat-ui-font-primary);
  cursor: pointer;
}

.cat-ui-i18nformat-infos-item-selected {
  font-weight: 600;
  color: var(--cat-ui-font-primary);
}

.cat-ui-i18nformat-infos-item-title {
  margin-left: 5px;
}

.cat-ui-file-panel-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
}

.cat-ui-file-button-label {
  /* font-size: 10px; */
  color: var(--cat-ui-font-primary);
}

.cat-ui-file-infos {
  position: relative;
  margin-bottom: 10px;
}

.cat-ui-file-infos-button {
  display: inline-block;
  width: calc(100% - 20px);
  color: var(--cat-ui-font-primary2);
  padding: 6px 10px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 15px;

  transition: all 0.3s ease, transform 0.1s ease;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.65));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 48px  rgba(154, 154, 154, 0.1);
}
.cat-ui-file-infos-button:hover {
  cursor: pointer;
  background-color: var(--cat-ui-bg-dark);
  
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.75));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.6),
            0 0 12px  rgba(0, 0, 0, 0.2);
}

.cat-ui-file-infos-section {
  margin-top: 10px;
}

.cat-ui-file-infos-section:first-child {
  margin-top: -10px;
}

.cat-ui-file-infos .cat-ui-info-item {
  margin: 0 -10px 10px;
  padding: 5px 10px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.65));
  justify-content: space-between;
}

.cat-ui-file-infos-item {
  padding: 4px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-ui-file-infos-item.cat-ui-file-infos-item-score-low  {
  opacity: 0.25;
}
.cat-ui-file-infos-item:hover {
  font-weight: 600;
  color: var(--cat-ui-font-primary);
  cursor: pointer;
  opacity: 1;
}

.cat-ui-file-tag {
  color: var(--cat-ui-font-primary);
  font-weight: 600;
  font-size: var(--cat-ui-font-12px);
  margin-right: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.cat-ui-file-infos-item-title {
  color: var(--cat-ui-font-primary3);
  font-size: var(--cat-ui-font-15px);
  flex: 1;
}
.cat-ui-file-infos-item-title:hover {
  color: var(--cat-ui-font-primary);
}

.cat-ui-file-infos-item:hover .cat-ui-file-lngs {
  font-weight: 300;
}

.cat-ui-file-info-label-filtered strong {
  color: var(--cat-ui-input-bg-active);
}

.cat-ui-file-infos-item-score {
  margin-right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--cat-ui-state-warning);
}
.cat-ui-file-infos-item-score.cat-ui-file-infos-item-score-1 {
  background-color: var(--cat-ui-state-success);
}

.cat-ui-import-error path:not([fill='none']),
.cat-ui-import-error circle:not([fill='none']) {
  fill: var(--cat-ui-state-error);
}


[data-theme="light"] .cat-ui-file-infos .cat-ui-info-item {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1));
}

[data-theme="light"] .cat-ui-file-infos-button {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1));
}
[data-theme="light"] .cat-ui-file-infos-button:hover {
  background-color: var(--cat-ui-input-bg-hover);
}
.cat-ui-dropdown-wrapper.cat-ui-dropdown-save-wrapper {
  display: inline-flex;
  margin-left: -60px;
  transition: margin 500ms;
}

.cat-ui-dropdown-wrapper.cat-ui-dropdown-save-wrapper.cat-ui-dropdown-wrapper-undo-visible {
  margin-left: -15px;
}

.cat-ui-save-panel-wrapper {
  width: 250px;
  position: absolute;
  top: 0;
  right: 35px;
}

.cat-ui-save-panel-section-item {
  padding: 2px 15px 2px 5px;
  margin: 0 -10px;
}

.cat-ui-save-panel-section-item:last-child {
  margin-bottom: 10px;
}

.cat-ui-dropdown-save-wrapper .cat-ui-dropdown-openbutton-counter,
.cat-ui-dropdown-save-wrapper .cat-ui-dropdown-openbutton-counter:hover {
  box-shadow: none;
  width: 30px;
  opacity: 1;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.cat-ui-save-button-label {
  font-size: var(--cat-ui-font-12px);
  color: var(--cat-ui-font-primary);
}

.cat-ui-button.cat-ui-save-button {
  height: 24px;
  padding: 0 10px 0 20px;
  background-color: var(--cat-ui-bg-light);
  color: var(--cat-ui-font-primary);
  z-index: 1;
  font-size: var(--cat-ui-font-15px);

  transition: all 0.3s ease, transform 0.1s ease;
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 3px 12px rgba(0, 0, 0, 0.1);
}

.cat-ui-button.cat-ui-save-button-haspendings {
  background: linear-gradient(135deg, rgba(29, 151, 55, 0.8), rgba(12, 150, 46, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.6),
    0 0 12px rgba(0, 0, 0, 0.3);
}

.cat-ui-button.cat-ui-save-button:hover {
  cursor: pointer;

  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(29, 151, 55, 0.7), rgba(12, 150, 46, 0.5));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.6),
    0 0 12px rgba(0, 0, 0, 0.5);
}

.cat-ui-button.cat-ui-save-button:disabled {
  cursor: not-allowed;

  transform: translateY(0);
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 3px 12px rgba(0, 0, 0, 0.1);
}

.cat-ui-button.cat-ui-undo-button {
  height: 24px;
  right: 60px;
  padding: 0 20px 0 10px;
  background-color: var(--cat-ui-bg-middle3);
  color: var(--cat-ui-font-primary2);
  z-index: 2;
  font-size: var(--cat-ui-font-12px);
  transition: right 500ms;
}

.cat-ui-button.cat-ui-undo-button.cat-ui-undo-button-visible {
  left: 15px;
}

.cat-ui-button.cat-ui-undo-button:hover {
  background-color: var(--cat-ui-bg-light);
  cursor: pointer;
}

.cat-ui-button.cat-ui-undo-button:disabled {
  background-color: transparent;
  color: transparent;
  cursor: default;
  right: -150px;
}

.cat-ui-button.cat-ui-undo-button:disabled:hover {
  background-color: transparent;
}

.cat-ui-save-button-icon path:not([fill='none']),
.cat-ui-save-button-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

/* spinner */
.cat-ui-save-button-icon-saving path:not([fill='none']),
.cat-ui-save-button-icon-saving circle:not([fill='none']) {
  fill: rgba(53, 170, 53, 0.884);
}

.cat-ui-save-button-icon-saving {
  position: absolute;
  animation: cat-ui-save-button-icon-saving-spin 1s ease-in-out infinite;
}

@keyframes cat-ui-save-button-icon-saving-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.cat-ui-dropdown-openbutton.cat-ui-dropdown-openbutton-counter {
  margin-right: -25px;
}

.cat-ui-dropdown-openbutton.cat-ui-dropdown-openbutton-haspendings {
  background-color: var(--cat-ui-bg-dark2);
  box-shadow: inset 0 0 2px 2px rgba(53, 170, 53, 0.884);
}

/* @keyframes cat-ui-save-state-pulsate {
  0% {
    background-color: var(--cat-ui-input-bg);
  }
  50% {
    background-color: var(--cat-ui-input-bg-active);
  }
  100% {
    background-color: var(--cat-ui-input-bg);
  }
} */


[data-theme="light"] .cat-ui-dropdown-openbutton.cat-ui-dropdown-openbutton-haspendings {
  background-color: var(--cat-ui-bg-middle4);
}
.cat-ui-segmentlistfilter {
  position: relative;
  padding: 0 10px 10px;
}

.cat-ui-segmentfilter-search .cat-ui-filtersearch {
  margin-right: 0;
}

.cat-ui-segmentfilter-search .cat-ui-filtersearch-input {
  border-radius: 20px;
  padding: 15px 15px 15px 35px;
  height: 40px;
}

.cat-ui-segmentfilter-search .cat-ui-filtersearch .cat-ui-filtersearch-searchicon {
  top: 8px;
  left: 10px;
}

.cat-ui-segmentfilter-filter {
  margin-top: 10px;
  border-radius: 20px;
  padding: 10px 15px;
}

.cat-ui-segmentfilter-filter, .cat-ui-segmentfilter-search .cat-ui-filtersearch-input {
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 48px  rgba(154, 154, 154, 0.1);
}

.cat-ui-segmentfilter-filter:hover,  .cat-ui-segmentfilter-search .cat-ui-filtersearch-input:hover {
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.6),
            0 0 12px  rgba(0, 0, 0, 0.2);
}

.cat-ui-segmentfilter-filter-active, input.cat-ui-filtersearch-input-active {
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(98, 173, 183, 0.5), rgba(98, 173, 183, 0.45));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
              inset -1px -1px 1px rgba(61, 67, 69, 0.6),
              0 3px 12px rgba(0, 0, 0, 0.3);
}

.cat-ui-segmentfilter-filter-active:hover,  input.cat-ui-filtersearch-input-active:hover {
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(98, 173, 183, 0.5), rgba(98, 173, 183, 0.45));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
              inset -1px -1px 1px rgba(61, 67, 69, 0.6),
              0 0 12px  rgba(0, 0, 0, 0.5);
}

/* .cat-ui-segmentfilter-filter-active .cat-ui-keylistfilter-panel-section-item-label {
  color: var(--cat-ui-font-primary2);
} */


[data-theme="light"] .cat-ui-segmentfilter-filter, [data-theme="light"] .cat-ui-segmentfilter-search .cat-ui-filtersearch-input {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 48px  rgba(154, 154, 154, 0.1);
}

[data-theme="light"] .cat-ui-segmentfilter-filter:hover,  [data-theme="light"] .cat-ui-segmentfilter-search .cat-ui-filtersearch-input:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.6),
            0 0 12px  rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .cat-ui-segmentfilter-filter-active, [data-theme="light"] .cat-ui-segmentfilter-search  input.cat-ui-filtersearch-input-active {
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(111, 149, 210, 0.5), rgba(86, 121, 184, 0.45));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
              inset -1px -1px 1px rgba(61, 67, 69, 0.6),
              0 3px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .cat-ui-segmentfilter-filter-active:hover,  [data-theme="light"] .cat-ui-segmentfilter-search input.cat-ui-filtersearch-input-active:hover {
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(111, 149, 210, 0.5), rgba(86, 121, 184, 0.45));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
              inset -1px -1px 1px rgba(61, 67, 69, 0.6),
              0 0 12px  rgba(0, 0, 0, 0.5);
}
.cat-ui-filterpanel-container .cat-ui-editor-tag,
.cat-ui-filterpanel-container .cat-ui-editor-tag:hover {
  font-size: 10px;
  padding: 2px 5px;

  font-weight: 400;

  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.2);
}

.cat-ui-filterpanel-container .cat-ui-editor-tag-inactive {
  box-shadow: none;
  opacity: 0.6;
  font-weight: 300;
}

.cat-ui-filterpanel-container .cat-ui-editor-tag-inactive:hover {
  box-shadow: 0 0 8px rgba(154, 154, 154, 0.5);
  opacity: 0.8;
  font-weight: 400;
}
.cat-ui-filterpanel-container hr {
  margin: 10px 0;
  border: none;
  border: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

.cat-ui-keylistfilter-panel-section-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 3px 0;
  color: var(--cat-ui-font-primary2);
  font-weight: 300;
  cursor: pointer;
}


.cat-ui-keylistfilter-panel-section-item-selected {
  color: var(--cat-ui-font-primary);
  font-weight: 400;
}

.cat-ui-keylistfilter-panel-section-item-label {
  flex: 1;
  margin: 0 5px;
  font-size: var(--cat-ui-font-16px);
  line-height: var(--cat-ui-font-lineheight-16px);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cat-ui-keylistfilter-panel-section-item-label-zero,
.cat-ui-keylistfilter-panel-section-item-count-zero,
.cat-ui-keylistfilter-panel-section-item-label-zero {
  color: var(--cat-ui-font-secondary);
}

.cat-ui-keylistfilter-panel-section-item-selected .cat-ui-keylistfilter-panel-section-item-label-zero,
.cat-ui-keylistfilter-panel-section-item-selected .cat-ui-keylistfilter-panel-section-item-count-zero,
.cat-ui-keylistfilter-panel-section-item-selected .cat-ui-keylistfilter-panel-section-item-label-zero {
  color: var(--cat-ui-font-primary);
}

.cat-ui-keylistfilter-panel-section-issue-item-label {
  flex: 1;
  margin: 0 5px;
  font-size: var(--cat-ui-font-14px);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-style: italic;
}

.cat-ui-keylistfilter-panel-section-item-count {
  font-size: var(--cat-ui-font-14px);
}

.cat-ui-keylistfilter-panel-section-issue-item-count {
  font-size: var(--cat-ui-font-14px);
}
.cat-ui-filtersearch {
  position: relative;
  flex: 1;
  margin-right: 5px;
}

.cat-ui-filtersearch-input {
  position: relative;
  display: block;
  font-size: var(--cat-ui-font-16px);
  border: none;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 10px 3px 30px;
  height: 30px;
  background-color: var(--cat-ui-input-bg);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 15px;
  color: var(--cat-ui-font-primary);
  transition: background-color ease-in 0.3s;
}
.cat-ui-filtersearch-input:hover,
.cat-ui-filtersearch-input:focus {
  box-shadow: none;
  border: none;
  outline: none;
  background-color: var(--cat-ui-input-bg-hover);
}

.cat-ui-filtersearch-input-active {
  background-color: var(--cat-ui-input-bg-active);
}

.cat-ui-filtersearch-input:disabled {
  background: green;
  cursor: not-allowed;
}

.cat-ui-filtersearch-input::-moz-placeholder {
  color: var(--cat-ui-font-primary);
  font-weight: 200;
}

.cat-ui-filtersearch-input::placeholder {
  color: var(--cat-ui-font-primary);
  font-weight: 200;
}
.cat-ui-filtersearch-searchicon {
  position: absolute;
  left: 5px;
  top: 3px;
}
.cat-ui-filtersearch-searchicon path:not([fill='none']),
.cat-ui-filtersearch-searchicon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary3);
}

.cat-ui-filefilter-select {
  display: flex;
  align-items: center;
  position: relative;
}

.cat-ui-filefilter-select select {
  color: transparent;
}

.cat-ui-filefilter-select-value-overlay {
  position: absolute;
  left: 22px;
  right: 40px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  font-size: var(--cat-ui-font-16px);
  color: var(--cat-ui-font-primary2);
}

.cat-ui-filefilter-select-value-overlay small{
  margin-left: 5px;
  color: var(--cat-ui-font-secondary);
}

.cat-ui-filefilter-icon {
  position: absolute;
  left: 0;
  top: 4px;
}

.cat-ui-filefilter-icon path:not([fill='none']),
.cat-ui-filefilter-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary3);
}

label.cat-ui-filefilter-label {
 color: var(--cat-ui-font-primary2);
 font-family: var(--font-family-primary);
 font-size: var(--cat-ui-font-15px);
}

.cat-ui-localefilter-select {
  display: flex;
  align-items: center;
}

.cat-ui-localefilter-icon {
}

.cat-ui-localefilter-icon path:not([fill='none']),
.cat-ui-localefilter-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

.cat-ui-nsfilter-select {
  display: flex;
  align-items: center;
}

.cat-ui-nsfilter-icon {
}

.cat-ui-nsfilter-icon path:not([fill='none']),
.cat-ui-nsfilter-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

.cat-ui-segmentlisttab-container {
  position: relative;
  padding: 8px 0 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.cat-ui-segmentlisttab {
  border-radius: 18px;
  position: relative;
  padding: 3px 3px 4px;
  margin: 0 10px 5px;
  display: flex;
  justify-content: space-between;


  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(113, 113, 113, 0.8), rgba(113, 113, 113, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 48px  rgba(154, 154, 154, 0.1);
}

.cat-ui-segmentlisttab:hover {
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(113, 113, 113, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.6),
            0 0 12px  rgba(0, 0, 0, 0.2);
}

.cat-ui-segmentlisttab::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 50%;
  height: calc(100% - 6px);
  transition: left 0.4s ease;

  background-color: var(--cat-ui-bg-middle-opac);
  border-radius: 15px;

  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
          inset -1px -1px 1px rgba(61, 67, 69, 0.6),
          0 0 48px  rgba(154, 154, 154, 0.1);
}

.cat-ui-segmentlisttab.cat-ui-segmentlisttab-righttab-active::before {
  left: calc(50% - 4px)
}

.cat-ui-segmentlisttab-righttab,
.cat-ui-segmentlisttab-lefttab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 9;
  cursor: pointer;
  padding: 3px;
  overflow: hidden;
}

.cat-ui-segmentlisttab-title {
  text-transform: uppercase;
  color: var(--cat-ui-font-primary2);
  margin-right: 5px;
  font-weight: 300;
  font-size: var(--cat-ui-font-15px);
}

.cat-ui-segmentlisttab-lefttab-active,
.cat-ui-segmentlisttab-righttab-active {
  cursor: default;
} 

.cat-ui-segmentlisttab-icon path:not([fill='none']),
.cat-ui-segmentlisttab-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

/* .cat-ui-segmentlisttab-righttab-active > .cat-ui-segmentlisttab-icon path:not([fill='none']),
.cat-ui-segmentlisttab-icon circle:not([fill='none']) {
  fill: var(--cat-ui-bg-dark2) !important;
}

.cat-ui-segmentlisttab-lefttab-active > .cat-ui-segmentlisttab-icon path:not([fill='none']),
.cat-ui-segmentlisttab-icon circle:not([fill='none']) {
  fill: var(--cat-ui-bg-dark2) !important;
} */


[data-theme="light"] .cat-ui-segmentlisttab {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 48px  rgba(154, 154, 154, 0.1);
}

[data-theme="light"] .cat-ui-segmentlisttab:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.25));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.6),
            0 0 12px  rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .cat-ui-segmentlisttab::before {
  background-color: var(--cat-ui-bg-middle-opac);
  border-radius: 15px;

  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
          inset -1px -1px 1px rgba(61, 67, 69, 0.6),
          0 0 48px  rgba(154, 154, 154, 0.1);
}
.cat-ui-bulk-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--cat-ui-bg-dark2);
  margin-right: 1px;
}
.cat-ui-bulk-section-title:hover, .cat-ui-bulk-section-open .cat-ui-bulk-section-title {
  background-color: var(--cat-ui-bg-dark);
}
.cat-ui-bulk-section-title .cat-ui-info-label {
  font-size: var(--cat-ui-font-15px);
  color: var(--cat-ui-font-primary3);
}

.cat-ui-bulk-section-content {
  background: linear-gradient(135deg, rgba(55, 55, 55, 0.8), rgba(66, 66, 66, 0.85));
  box-sizing: content-box;
}
.cat-ui-bulk-section-content > div > *:first-child {
  padding-top: 15px;
}

.cat-ui-bulk-section-info {
  display: flex;
  align-items: center;
  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-secondary);
  padding: 15px 10px;
}

.cat-ui-button.cat-ui-bulk-action-button {
  height: 24px;
  padding: 0 10px;
  color: var(--cat-ui-font-primary);
  z-index: 1;
  font-size: var(--cat-ui-font-14px);
  transition: all 0.3s ease, transform 0.1s ease;

  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));

  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 8px  rgba(154, 154, 154, 0.1);
}
.cat-ui-button.cat-ui-bulk-action-button-transparent {
  background: transparent;
  box-shadow: none;
}
.cat-ui-button.cat-ui-bulk-action-button:hover {
  cursor: pointer;

  transform: translateY(-1px);
  background: rgba(113, 113, 113, 0.85);
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
          inset -1px -1px 1px rgba(61, 67, 69, 0.6),
          0 0 12px  rgba(0, 0, 0, 0.2);
}

.cat-ui-button.cat-ui-bulk-action-button:disabled {
  cursor: not-allowed;
  color: var(--cat-ui-font-primary2);
  background-color: var(--cat-ui-bg-middle2);
}

.cat-ui-button.cat-ui-bulk-action-button.cat-ui-bulk-action-button-transparent:disabled {
  color: var(--cat-ui-bg-middle3);
  background-color: transparent;
}

.cat-ui-info-bulk-block {
  padding: 5px 10px;
  align-items: center;
  justify-content: space-between;
}


.cat-ui-bulk-section-content .cat-ui-editor-tag {
  font-size: 10px;
  padding: 2px 5px;
  font-weight: 400;

  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.6),
            0 3px 8px rgba(0, 0, 0, 0.2);
}

.cat-ui-bulk-section-content .cat-ui-editor-tag-inactive {
  box-shadow: none;
  opacity: 0.6;
  font-weight: 300;
}

.cat-ui-bulk-section-content .cat-ui-editor-tag-inactive:hover {
  box-shadow:  0 0 8px  rgba(154, 154, 154, 0.5);
  opacity: 0.8;
  font-weight: 400;
}


[data-theme="light"] .cat-ui-bulk-section-content {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
}

[data-theme="light"] .cat-ui-bulk-section-title {
  background-color: var(--cat-ui-bg-middle2);
}
[data-theme="light"] .cat-ui-bulk-section-title:hover, .cat-ui-bulk-section-open .cat-ui-bulk-section-title {
  background-color: var(--cat-ui-bg-middle3);
}

[data-theme="light"] .cat-ui-button.cat-ui-bulk-action-button {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));

  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 8px  rgba(154, 154, 154, 0.1);
}
[data-theme="light"] .cat-ui-button.cat-ui-bulk-action-button-transparent {
  background: transparent;
  box-shadow: none;
} 
[data-theme="light"] .cat-ui-button.cat-ui-bulk-action-button:hover {
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
          inset -1px -1px 1px rgba(61, 67, 69, 0.6),
          0 0 12px  rgba(0, 0, 0, 0.2);
}
:root {
  --cat-ui-font-primary: #e2e2e2;
  --cat-ui-font-primary2: #d9d9d9/* #b4b4b4 */;
  --cat-ui-font-primary3: #b4b4b4;
  --cat-ui-font-secondary: #949494;
  --cat-ui-font-dark: #222;

  --cat-ui-bg-dark: #222;
  --cat-ui-bg-dark2: #333;
  --cat-ui-bg-middle: #444;
  --cat-ui-bg-middle2: #555;
  --cat-ui-bg-middle3: #666;
  --cat-ui-bg-light: #777;
  --cat-ui-bg-ultralight: #eee;

  --cat-ui-bg-middle-opac: rgba(68, 68, 68, 0.8);
  --cat-ui-bg-middle2-opac: rgba(85, 85, 85, 0.8);

  --cat-ui-input-bg: #5f5f5f;
  --cat-ui-input-bg-active: #489ea9;

  --cat-ui-panel-bg-active: #4a6f74;

  --cat-ui-alternate-row: #2d2d2d;

  --cat-ui-keylist-item-hover: #424242;
  --cat-ui-input-bg-hover: #777;
  --cat-ui-keylist-item-selected: #353535;

  --cat-ui-bg-dropdown-panel: #777;

  --cat-ui-font-editor-text: #555;
  --cat-ui-font-editor-var: #549ae4;
  --cat-ui-font-editor-tag: #1562b3;
  --cat-ui-font-editor-prefix: #1562b3;
  --cat-ui-font-editor-suffix: #1562b3;
  --cat-ui-font-editor-syntax: #1976d2;
  --cat-ui-font-editor-bg-focus: #f3f3f3;


  --cat-ui-diff-same: #ebebeb;
  --cat-ui-diff-add: lightgreen;
  --cat-ui-diff-bg-add: #6a806a;
  --cat-ui-diff-remove: salmon;
  --cat-ui-diff-bg-remove: #a9746e;

  --cat-ui-state-warning: #e67a00;
  --cat-ui-state-error: #d50000;
  --cat-ui-state-success: #54a229;
  --cat-ui-state-fuzzy: #dea53b;
  --cat-ui-state-untranslated: #464646;
  --cat-ui-state-ordered: #777777;
  --cat-ui-state-review: #0672b1;
  --cat-ui-state-overridden: #458323;

  --cat-ui-tag-0: #eb5a46;
  --cat-ui-tag-1: #ffab4a;
  --cat-ui-tag-2: #f2d600;
  --cat-ui-tag-3: #77e262;
  --cat-ui-tag-4: #61bd4f;
  --cat-ui-tag-5: #519839;
  --cat-ui-tag-6: #0672b1;
  --cat-ui-tag-7: #00c2e0;
  --cat-ui-tag-8: #c377e0;
  --cat-ui-tag-9: #4d4d4d;

  --cat-ui-i18nfeature-interpolation: #54a229;
  --cat-ui-i18nfeature-nesting: #2f98b7;
  --cat-ui-i18nfeature-plural: #60b72f;
  --cat-ui-i18nfeature-context: #60b72f;
  --cat-ui-i18nfeature-unset: #464646;
}


/* light mode styles: https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting */
[data-theme="light"] {
  --cat-ui-font-primary: #222222;
  --cat-ui-font-primary2: #272727;
  --cat-ui-font-primary3: #5b5b5b;
  --cat-ui-font-secondary: #6e6e6e;

  --cat-ui-bg-dark: #f6f6f6;
  --cat-ui-bg-dark2: #eeeded;
  --cat-ui-bg-middle: #fafafa;
  --cat-ui-bg-middle2: #e0e0e0;
  --cat-ui-bg-middle3: #ccc;
  --cat-ui-bg-middle4: #777;
  --cat-ui-bg-light: #7ab1e6;
  
  --cat-ui-bg-middle-opac: rgba(255, 255, 255, 0.7);
  --cat-ui-bg-middle2-opac: rgba(225, 225, 225, 0.8);

  --cat-ui-input-bg: #e6e7e8;
  --cat-ui-input-bg-active: #4a78d4;

  --cat-ui-alternate-row: #f1f1f1a4;

  --cat-ui-keylist-item-hover: #d7e4fc;
  --cat-ui-input-bg-hover: #d7e4fc;
  --cat-ui-keylist-item-selected: #d7e4fc;

  --cat-ui-bg-dropdown-panel: #e6e7e8;

  --cat-ui-font-editor-text: #555;
  --cat-ui-font-editor-var: #549ae4;
  --cat-ui-font-editor-tag: #1562b3;
  --cat-ui-font-editor-prefix: #1562b3;
  --cat-ui-font-editor-suffix: #1562b3;
  --cat-ui-font-editor-bg-focus: #f7f7f7;

  --cat-ui-diff-same: #6e6e6e;
  --cat-ui-diff-add: lightgreen;
  --cat-ui-diff-bg-add: #6a806a;
  --cat-ui-diff-remove: rgb(232, 172, 166);
  --cat-ui-diff-bg-remove: #a9746e;

  --cat-ui-state-warning: #e67a00;
  --cat-ui-state-error: #d50000;
  --cat-ui-state-success: #54a229;
  --cat-ui-state-fuzzy: #dea53b;
  --cat-ui-state-untranslated: #464646;
  --cat-ui-state-ordered: #777777;
  --cat-ui-state-review: #0672b1;
  --cat-ui-state-overridden: #458323;

  --cat-ui-tag-0: #eb5a46;
  --cat-ui-tag-1: #ffab4a;
  --cat-ui-tag-2: #f2d600;
  --cat-ui-tag-3: #77e262;
  --cat-ui-tag-4: #61bd4f;
  --cat-ui-tag-5: #519839;
  --cat-ui-tag-6: #0672b1;
  --cat-ui-tag-7: #00c2e0;
  --cat-ui-tag-8: #c377e0;
  --cat-ui-tag-9: #4d4d4d;

  --cat-ui-i18nfeature-interpolation: #54a229;
  --cat-ui-i18nfeature-nesting: #2f98b7;
  --cat-ui-i18nfeature-plural: #60b72f;
  --cat-ui-i18nfeature-context: #60b72f;
  --cat-ui-i18nfeature-unset: #464646;
}

/* [data-theme="light"] input::placeholder {
  color: var(--cat-ui-font-primary2);
} */

:root {
  --cat-ui-font-10px: 10px;
  --cat-ui-font-12px: 12px;
  --cat-ui-font-13px: 13px;
  --cat-ui-font-14px: 14px;
  --cat-ui-font-15px: 15px;
  --cat-ui-font-16px: 16px;

  --cat-ui-font-lineheight-10px: 12px;
  --cat-ui-font-lineheight-12px: 14px;
  --cat-ui-font-lineheight-13px: 15px;
  --cat-ui-font-lineheight-14px: 17px;
  --cat-ui-font-lineheight-15px: 18px;
  --cat-ui-font-lineheight-16px: 20px;
  
  --font-family-primary: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  --font-family-readable: -apple-system, 'system-ui', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-monospace: 'JetBrainsMono', monospace;
}

.cat-ui, .cat-ui input:not(.cat-ui-textfield), .cat-ui select, .cat-ui button  {
  font-family: var(--font-family-primary);
  font-weight: 300;
}

a {
  color: inherit;
}

.cat-ui-icon path:not([fill='none']),
.cat-ui-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

.cat-ui-icon-active path:not([fill='none']),
.cat-ui-icon-active circle:not([fill='none']) {
  fill: var(--cat-ui-input-bg-active);
}



/* BUTTON (with/out left icon) */
.cat-ui-button {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  margin-left: 10px;
  font-size: var(--cat-ui-font-15px);
  border: none;
  box-sizing: border-box;
  height: 30px;
  background-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 15px;
  cursor: pointer;
  z-index: 2;
  color: var(--cat-ui-font-primary);
  text-transform: uppercase;
  font-weight: 300;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cat-ui-button.cat-ui-button-withicon {
  padding: 0 10px 0 25px;
}
.cat-ui-button.cat-ui-button-active {
  background-color: var(--cat-ui-input-bg-active);
}
.cat-ui-button.cat-ui-button-small {
  padding: 0 5px;
  height: 20px;
  font-size: var(--cat-ui-font-12px);
}
.cat-ui-button.cat-ui-button-small.cat-ui-button-withicon {
  padding: 0 5px 0 20px;
}
.cat-ui-button:hover {
  transform: translateY(-1px);
  background-color: var(--cat-ui-bg-light);
}

.cat-ui-button:disabled {
  cursor: not-allowed;
  transform: none;
  color: var(--cat-ui-font-primary3);
  background-color: transparent;
}
.cat-ui-button:focus {
  box-shadow: none;
  border: none;
  outline: none;
}

.cat-ui-button-icon {
  position: absolute;
  top: 3px;
  left: 3px;
}

.cat-ui-button-icon path:not([fill='none']),
.cat-ui-button-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-button-icon-active path:not([fill='none']),
.cat-ui-button-icon-active circle:not([fill='none']) {
  fill: var(--cat-ui-input-bg-active);
}

.cat-ui-button-bg {
  transition: all 0.3s ease, transform 0.1s ease;
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.6),
            0 0 12px  rgba(0, 0, 0, 0.2);
}
.cat-ui-button-bg:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.6),
            0 0 12px  rgba(0, 0, 0, 0.2);
}
.cat-ui-button-bg:disabled, .cat-ui-button-bg:disabled:hover {
  transform: none;
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.6),
            0 0 12px  rgba(0, 0, 0, 0.2);
}

/* button[type="submit"]::before, .cat-ui-button::before, .cat-ui-shimmer-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
  transition: left 0.6s ease;
}

button[type="submit"]:hover::before, .cat-ui-button:hover::before, .cat-ui-shimmer-effect:hover::before {
  left: 100%;
} */

/* ICON BUTTON */
.cat-ui-iconbutton {
  position: relative;
  display: inline-block;
  padding: 2px 5px 0 5px;
  border: none;
  box-sizing: border-box;
  height: 28px;
  background-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 15px;
  cursor: pointer;
  z-index: 2;
  color: var(--cat-ui-font-primary);
  transition: background-color ease-in 0.3s;
  text-transform: uppercase;
  font-weight: 300;
}
.cat-ui-iconbutton-small {
  padding: 2px 4px 0 4px;
  height: 24px;
  border-radius: 12px;
}
.cat-ui-iconbutton:hover {
  background-color: var(--cat-ui-input-bg-hover);
}
.cat-ui-iconbutton:focus {
  box-shadow: none;
  border: none;
  outline: none;
}
.cat-ui-iconbutton.cat-ui-iconbutton-active {
  background-color: var(--cat-ui-input-bg-active);
}
.cat-ui-iconbutton-transparent:hover {
  background: transparent !important;
}

.cat-ui-iconbutton-icon path:not([fill='none']),
.cat-ui-iconbutton-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-iconbutton-icon-secondary path:not([fill='none']),
.cat-ui-iconbutton-icon-secondary circle:not([fill='none']) {
  fill: var(--cat-ui-font-secondary);
}
.cat-ui-iconbutton-icon-error path:not([fill='none']),
.cat-ui-iconbutton-icon-error circle:not([fill='none']) {
  fill: var(--cat-ui-state-error);
}
.cat-ui-iconbutton-icon-warning path:not([fill='none']),
.cat-ui-iconbutton-icon-warning circle:not([fill='none']) {
  fill: var(--cat-ui-state-warning);
}
.cat-ui-iconbutton-icon-success path:not([fill='none']),
.cat-ui-iconbutton-icon-success circle:not([fill='none']) {
  fill: var(--cat-ui-state-success);
}
.cat-ui-iconbutton-icon-active path:not([fill='none']),
.cat-ui-iconbutton-icon-active circle:not([fill='none']) {
  fill: var(--cat-ui-input-bg-active);
}

.cat-ui-iconbutton:disabled {
  background-color: transparent !important;
  cursor: not-allowed;
}

.cat-ui-iconbutton-active .cat-ui-iconbutton-icon path:not([fill='none']),
.cat-ui-iconbutton-active .cat-ui-iconbutton-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-dark) !important;
}

.cat-ui-iconbutton:disabled .cat-ui-iconbutton-icon path:not([fill='none']),
.cat-ui-iconbutton:disabled .cat-ui-iconbutton-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary2) !important;
}

[data-theme="light"] .cat-ui-button.cat-ui-button-active {
  background-color: var(--cat-ui-bg-light);
}
.cat-ui-info-item {
  display: flex;
  padding: 10px;
}

.cat-ui-info-text {
  color: var(--cat-ui-font-secondary);
  font-weight: 300;
  font-size: var(--cat-ui-font-12px);
}
.cat-ui-info-text-warning {
  color: var(--cat-ui-state-warning) !important;
}

.cat-ui-info-label {
  text-transform: uppercase;
  color: var(--cat-ui-font-primary2);
  margin-right: 5px;
  /* font-style: italic; */
  font-weight: 300;
  font-size: var(--cat-ui-font-13px);
}

.cat-ui-info-score {
  text-transform: uppercase;
  color: var(--cat-ui-font-secondary);
  margin-right: 5px;
  font-size: var(--cat-ui-font-13px);
}

.cat-ui-info-score-success {
  color: var(--cat-ui-state-success) !important;
}

.cat-ui-diff-part-same {
  padding: 1px 0;
  color: var(--cat-ui-diff-same);
  font-size: var(--cat-ui-font-12px);
}

.cat-ui-diff-part-added {
  padding: 1px 2px;
  background-color: var(--cat-ui-diff-bg-add);
  color: var(--cat-ui-diff-add);
  font-size: var(--cat-ui-font-12px);
}

.cat-ui-diff-part-removed {
  padding: 1px 2px;
  background-color: var(--cat-ui-diff-bg-remove);
  color: var(--cat-ui-diff-remove);
  text-decoration: line-through;
  font-size: var(--cat-ui-font-12px);
}

.cat-ui-tag {
  display: flex;
  align-items: center;
  margin-left: 5px;
  font-weight: 300;
  font-size: 9px;
  height: 16px;
  border-radius: 8px;
  padding: 0 10px;
  background-color: var(--cat-ui-bg-middle3);
  text-transform: uppercase;
}

.cat-ui-tag-success {
  background-color: var(--cat-ui-state-success);
  color: #fff;
}

.cat-ui-tag-warning {
  background-color: var(--cat-ui-state-warning);
  color: #fff;
}

.cat-ui-tag-error {
  background-color: var(--cat-ui-state-error);
  color: #fff;
}

.cat-ui-editor-tags {
  display: flex;
}

.cat-ui-editor-tag {
  display: inline-flex;
  align-items: center;
  margin: 2px;
  font-weight: 300;
  font-size: 7px;
  height: 13px;
  width: 13px;
  border-radius: 7px;
  padding: 0;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 1;
}

.cat-ui-editor-tag-showlabel {
  color: #fff;
  width: auto;
  content: initial;
  padding: 0 5px 0;
}

.cat-ui-editor-tag:hover {
  width: auto;
  cursor: pointer;
  content: initial;
  padding: 0 5px 0;
  color: #fff;
}

.cat-ui-editor-tag-0 {
  background-color: var(--cat-ui-tag-0);
}

.cat-ui-editor-tag-1,
.cat-ui-editor-tag-1:hover {
  background-color: var(--cat-ui-tag-1);
  color: #000;
}

.cat-ui-editor-tag-2,
.cat-ui-editor-tag-2:hover {
  background-color: var(--cat-ui-tag-2);
  color: #000;
}

.cat-ui-editor-tag-3,
.cat-ui-editor-tag-3:hover {
  background-color: var(--cat-ui-tag-3);
  color: #000;
}

.cat-ui-editor-tag-4,
.cat-ui-editor-tag-4:hover {
  background-color: var(--cat-ui-tag-4);
  color: #000;
}

.cat-ui-editor-tag-5 {
  background-color: var(--cat-ui-tag-5);
}

.cat-ui-editor-tag-6 {
  background-color: var(--cat-ui-tag-6);
}

.cat-ui-editor-tag-7,
.cat-ui-editor-tag-7:hover {
  background-color: var(--cat-ui-tag-7);
  color: #000;
}

.cat-ui-editor-tag-8,
.cat-ui-editor-tag-8:hover {
  background-color: var(--cat-ui-tag-8);
  color: #000;
}

.cat-ui-editor-tag-9 {
  background-color: var(--cat-ui-tag-9);
}

.cat-ui-editor-tag-inactive:not(.cat-ui-editor-tag-showlabel):not(:hover) {
  color: transparent;
}

.cat-ui-editor-tag-inactive {
  opacity: 0.4;
}

.cat-ui-editor-tag-inactive:hover {
  opacity: 0.8;
}
.cat-ui-flex-col {
  display: flex;
  align-items: center;
}

.cat-ui-flex-col-rtl {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.cat-ui-flex-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


.cat-ui-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-ui-dropdown-wrapper {
  margin-right: 10px;
  position: relative;
  height: 50px;
  align-items: center;
  display: flex;
}

/* Button */
.cat-ui-dropdown-openbutton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cat-ui-font-14px);
  border: none;
  /* width: 30px; */
  box-sizing: border-box;
  height: 30px;
  background-color: var(--cat-ui-input-bg);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 15px;
  cursor: pointer;
  padding: 0 15px;
  z-index: 2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.9;

  transition: all 0.3s ease, transform 0.1s ease;
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
          inset -1px -1px 1px rgba(61, 67, 69, 0.3),
          0 0 8px  rgba(154, 154, 154, 0.1);
}
.cat-ui-dropdown-openbutton:hover {
  transform: translateY(-1px);
  background: rgba(113, 113, 113, 0.85);
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
          inset -1px -1px 1px rgba(61, 67, 69, 0.6),
          0 0 12px 3px  rgba(0, 0, 0, 0.2);
}

.cat-ui-dropdown-openbutton-open,
.cat-ui-dropdown-openbutton:hover {
  background-color: var(--cat-ui-input-bg-hover);
}

.cat-ui-dropdown-openbutton-active {
  background-color: var(--cat-ui-input-bg-active);
}

.cat-ui-dropdown-openbutton:focus {
  box-shadow: none;
  border: none;
  outline: none;
}

.cat-ui-dropdown-openbutton:disabled {
  background-color: var(--cat-ui-input-bg);
  opacity: 0.5;
  cursor: not-allowed;
}

.cat-ui-dropdown-icon {
  position: absolute;
  top: 3px;
  left: 3px;
}

.cat-ui-dropdown-icon path:not([fill='none']),
.cat-ui-dropdown-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

.cat-ui-dropdown-icon-open {
  animation: cat-ui-dropdown-icon-spin 0.25s ease-in;
}

@keyframes cat-ui-dropdown-icon-spin {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(180deg);
  }
}

/* Panel */
.cat-ui-dropdown-panel {
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 10px;
  height: 30px;
  width: 30px;
  overflow: hidden;
  opacity: 0;
  border-radius: 15px;

  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(99, 99, 99, 0.968), rgba(83, 83, 83, 0.937));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 25px 10px  rgba(0, 0, 0, 0.2);
  /* transition: background-color 0.1s, width 0.2s, height 0.2s; */
}
.cat-ui-dropdown-panel-right {
  left: 10px;
  right: initial;
}
.cat-ui-dropdown-panel-borderradius {
  border-radius: 15px;
}

.cat-ui-dropdown-panel > div {
  margin: 10px;
}

.cat-ui-dropdown-panel-open {
  width: calc(100% - 20px);
  height: auto;
  top: 60px;
  opacity: 1;
  animation: cat-ui-dropdown-panel-show-left 0.25s ease-in;
}
.cat-ui-dropdown-panel-open-right {
  animation: cat-ui-dropdown-panel-show-right 0.25s ease-in;
}
.cat-ui-dropdown-panel-closing {
  animation: cat-ui-dropdown-panel-hide-left 0.25s ease-in reverse;
}
.cat-ui-dropdown-panel-closing-right {
  animation: cat-ui-dropdown-panel-hide-right 0.25s ease-in reverse;
}

.cat-ui-dropdown-panel-open > div {
  opacity: 1;
  animation: cat-ui-dropdown-panel-inner-show 0.25s ease-in;
}
.cat-ui-dropdown-panel-closing > div {
  opacity: 0;
  animation: cat-ui-dropdown-panel-inner-hide 0.25s ease-in reverse;
}

@keyframes cat-ui-dropdown-panel-show-left {
  0% {
    top: 10px;
    right: 10px;
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
  }
  50% {
    width: 30px;
    height: 30px;
    top: 40px;
    right: 5px;
    opacity: 0.5;
    border-radius: 15px;
  }
  75% {
    width: 100px;
    height: 100px;
    top: 80px;
    right: 5px;
    opacity: 0.8;
  }
  100% {
    width: calc(100% - 20px);
    height: auto;
    right: 10px;
    top: 60px;
    opacity: 1;
  }
}
@keyframes cat-ui-dropdown-panel-hide-left {
  0% {
    top: 10px;
    right: 10px;
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
  }
  50% {
    width: 30px;
    height: 30px;
    top: 40px;
    right: 5px;
    opacity: 0.5;
    border-radius: 15px;
  }
  75% {
    width: 100px;
    height: 100px;
    top: 80px;
    right: 5px;
    opacity: 0.8;
  }
  100% {
    width: calc(100% - 20px);
    height: auto;
    right: 10px;
    top: 60px;
    opacity: 1;
  }
}

@keyframes cat-ui-dropdown-panel-show-right {
  0% {
    top: 10px;
    left: 0px;
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
  }
  50% {
    width: 30px;
    height: 30px;
    top: 40px;
    left: -10px;
    opacity: 0.8;
    border-radius: 15px;
  }
  75% {
    width: 100px;
    height: 100px;
    top: 80px;
    left: -5px;
    opacity: 0.8;
  }
  100% {
    width: calc(100% - 20px);
    height: auto;
    left: 0px;
    top: 60px;
    opacity: 1;
  }
}
@keyframes cat-ui-dropdown-panel-hide-right {
  0% {
    top: 10px;
    left: 0px;
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
  }
  50% {
    width: 30px;
    height: 30px;
    top: 40px;
    left: -10px;
    opacity: 0.8;
    border-radius: 15px;
  }
  75% {
    width: 100px;
    height: 100px;
    top: 80px;
    left: -5px;
    opacity: 0.8;
  }
  100% {
    width: calc(100% - 20px);
    height: auto;
    left: 0px;
    top: 60px;
    opacity: 1;
  }
}

@keyframes cat-ui-dropdown-panel-inner-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cat-ui-dropdown-panel-inner-hide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}


[data-theme="light"] .cat-ui-dropdown-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.968), rgba(255, 255, 255, 0.937));
}
.cat-ui-label {
  display: block;
  font-weight: 300;
  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-primary2);
  margin-bottom: 4px;
}

.cat-ui-textfield {
  position: relative;
  display: block;
  font-size: var(--cat-ui-font-15px);
  border: none;
  width: 100%;
  box-sizing: border-box;
  padding: 2px 10px 4px 10px;
  height: 30px;
  background-color: var(--cat-ui-input-bg);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px;
  color: var(--cat-ui-font-primary);
  transition: background-color ease-in 0.3s;
  margin-bottom: 5px;
  font-family: var(--font-family-readable);

  background: rgba(75, 75, 75, 0.85);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 
              inset -1px -1px 1px rgba(255,255,255, 0.02),
              0 0 8px  rgba(154, 154, 154, 0.1);
}
.cat-ui-textfield::-moz-placeholder {
  color: var(--cat-ui-font-secondary);
}
.cat-ui-textfield::placeholder {
  color: var(--cat-ui-font-secondary);
}
.cat-ui-textfield:hover,
.cat-ui-textfield:focus {
  box-shadow: none;
  border: none;
  outline: none;

  background-color: var(--cat-ui-input-bg-hover);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 
              inset -1px -1px 1px rgba(255,255,255, 0.02),
              0 0 12px  rgba(0, 0, 0, 0.2);
}

.cat-ui-textfield-active {
  background-color: var(--cat-ui-input-bg-active);
}

.cat-ui-textfield-small {
  font-size: var(--cat-ui-font-13px);
  height: 24px;
  padding: 1px 10px 2px 10px;
}

.cat-ui-input-error,
.cat-ui-input-warning {
  display: inline-block;
  position: relative;
  font-size: var(--cat-ui-font-12px);
  font-weight: 300;
  color: var(--cat-ui-state-error);
  text-shadow: 1px 1px var(--cat-ui-bg-middle);
  top: -5px;
  margin-bottom: 5px;
}

.cat-ui-input-error {
  color: var(--cat-ui-state-error);
}

.cat-ui-input-warning {
  color: var(--cat-ui-state-warning);
}

select option {
  color: #000000;
}

/* date picker native stuff */

input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
  background-color: transparent;
  font-weight: 300;
  outline: none;
}
::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}


[data-theme="light"] .cat-ui-textfield {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 
              inset -1px -1px 1px rgba(255,255,255, 0.02),
              0 0 8px  rgba(154, 154, 154, 0.1);
}
[data-theme="light"] .cat-ui-textfield::-moz-placeholder {
  color: var(--cat-ui-font-secondary);
}
[data-theme="light"] .cat-ui-textfield::placeholder {
  color: var(--cat-ui-font-secondary);
}
[data-theme="light"] .cat-ui-textfield:hover,
[data-theme="light"] .cat-ui-textfield:focus {
  background-color: var(--cat-ui-input-bg-hover);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 
              inset -1px -1px 1px rgba(255,255,255, 0.02),
              0 0 12px  rgba(0, 0, 0, 0.2);
}

[data-theme="light"] ::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%235b5b5b" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}
.cat-ui-spin {
  animation: cat-ui-anim-spin 1s ease-in-out infinite;
}

@keyframes cat-ui-anim-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #cccccc;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #666666;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.cat-ui-card {
  position: relative;
  padding: 15px;
  font-family: var(--font-family-readable);
  color: var(--cat-ui-font-primary2);
  /*background-color: var(--locize-white);*/

  background: var(--cat-ui-bg-middle2);
  border: solid 1px var(--cat-ui-bg-middle3);
  border-radius: 15px;

  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(99, 99, 99, 0.968), rgba(83, 83, 83, 0.937));
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 25px 10px  rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .cat-ui-card {
  background: var(--cat-ui-bg-dark);

    box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 25px 10px  rgba(0, 0, 0, 0.2);
}
.cat-ui-layout {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  display: flex;
  background: linear-gradient(135deg, rgba(41, 41, 41, 0.8), rgba(57, 57, 57, 0.85));
  overflow: hidden;
}

.cat-ui-col-left {
  position: relative;
  width: 25%;
  display: flex;
  flex-direction: column;
}

.cat-ui-col-middle {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cat-ui-col-right {
  position: relative;
  width: 25%;
  display: flex;
  flex-direction: column;
  z-index: 1001;
}

.cat-ui-col-right-open {
  margin-right: 0;
  animation: cat-ui-col-right-show 0.5s ease-in;
}
.cat-ui-col-right-closing {
  margin-right: -25%;
  animation: cat-ui-col-right-hide 0.5s ease-out;
}
@keyframes cat-ui-col-right-show {
  0% {
    margin-right: -25%;
  }

  100% {
    margin-right: 0;
  }
}
@keyframes cat-ui-col-right-hide {
  0% {
    margin-right: 0;
  }

  100% {
    margin-right: -25%;
  }
}
.cat-ui-col-right-openbutton {
  position: absolute;
  /* margin-top: calc(50vh - 20px); */
  top: 0;
  left: -15px;
  width: 15px;
  background-color: var(--cat-ui-bg-middle);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
  padding: 14px 0;
  border: none;
}
.cat-ui-col-right-openbutton .cat-ui-iconbutton-icon {
  margin-left: -2px;
}
.cat-ui-col-right-openbutton:hover {
  background-color: var(--cat-ui-input-bg-hover);
}
.cat-ui-col-right-openbutton:focus {
  box-shadow: none;
  border: none;
  outline: none;
}

.cat-ui-section-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.cat-ui-section-scroll > .cat-ui-infos {
  margin-bottom: 1px;
}

.cat-ui-col-middle .cat-ui-section-scroll {
  background-color: var(--cat-ui-bg-dark);
}

@media (min-width: 1400px) {
  .cat-ui-col-left {
    width: 350px;
  }
  .cat-ui-col-right {
    width: 350px;
  }

  .cat-ui-col-right-closing {
    margin-right: -350px;
  }

  @keyframes cat-ui-col-right-show {
    0% {
      margin-right: -350px;
    }

    100% {
      margin-right: 0;
    }
  }
  @keyframes cat-ui-col-right-hide {
    0% {
      margin-right: 0;
    }

    100% {
      margin-right: -350px;
    }
  }
}


[data-theme="light"] .cat-ui-layout {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.85));
}

[data-theme="light"] .cat-ui-col-right-openbutton {
  background-color: rgba(255, 255, 255, 0.5);
} 

[data-theme="light"] .cat-ui-col-right-openbutton:hover {
  background-color: var(--cat-ui-input-bg-hover);
}
.cat-ui-segmentlistitem {
  padding: 5px 10px;
  background-color: var(--cat-ui-bg-dark);
}

.cat-ui-segmentlistitem-even {
  background-color: var(--cat-ui-bg-dark2);
}

.cat-ui-segmentlistitem-primarykey,
.cat-ui-segmentlistitem-subkey {
  display: flex;
  align-items: center;
  color: var(--cat-ui-font-primary2);
  font-weight: 300;
  font-size: var(--cat-ui-font-15px);
  font-family: var(--font-family-readable);
  word-break: break-all;
}

.cat-ui-segmentlistitem-primarykey {
  color: var(--cat-ui-font-primary2);
  margin: 0 0 10px;
}

.cat-ui-segmentlistitem-primarykey-title {
  flex: 1;
}

.cat-ui-segmentlistitem-subkey {
  color: var(--cat-ui-input-bg-active);
  font-weight: 400;
  margin: 10px 5px 5px;
}

.cat-ui-segmentlistitem-primarykey small,
.cat-ui-segmentlistitem-subkey small {
  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-secondary);
  font-weight: 300;
}

.cat-ui-segmentlistitem-primarykey .cat-ui-iconbutton path:not([fill='none']),
.cat-ui-segmentlistitem-primarykey .cat-ui-iconbutton circle:not([fill='none']) {
  fill: var(--cat-ui-font-secondary);
}

.cat-ui-segmentlistitem-subkey-value .cat-ui-keylistitem-subkey-state {
  align-items: start;
  margin-top: 15px;
}

.cat-ui-segmentlist-subkey-info {
  display: flex;
  width: 120px;
  height: 45px;
  justify-content: space-between;
  align-items: center;
}

.cat-ui-segmentlist-subkey-info .cat-ui-info-label {
  text-transform: initial;
  font-family: var(--font-family-readable);
}

.cat-ui-keylistitem-subkey-actions {
  /* width: 96px; */
  margin-left: 5px;
  margin-top: 10px;
}

.cat-ui-segmentlistitem-subkey-wrapper {
  position: relative;
  border-bottom: solid 1px #ffffff12;
}

.cat-ui-segmentlistitem-subkey-wrapper:first-child {
  border-top: solid 1px #ffffff12;
}

.cat-ui-segmentlistitem-subkey-value {
  display: flex;
  align-items: start;
  margin: 0 5px 0 10px;
}

.cat-ui-keylistitem-subkey-highlight {
  position: absolute;
  left: -2px;
  top: 5%;
  width: 2px;
  height: 90%;
  border-radius: 1px;
  background-color: var(--cat-ui-input-bg-active);
}

.cat-ui-segmentlistitem-info-item {
  flex: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 10px 0 10px 10px !important;
}

.cat-ui-segmentlistitem-info-item .cat-ui-info-label {
  flex-direction: row;
  display: flex;
  align-items: start;
  justify-content: flex-end;
  min-width: 100px;
  text-align: right;
  margin-right: 10px;
  margin-top: 5px;
  text-transform: none;
}

.cat-ui-segmentlistitem-info-item .cat-ui-info-label.cat-ui-info-label-withTag {
  justify-content: space-between;
}

.cat-ui-segmentlistitem-info-item .cat-ui-segmentlistitem-info-text {
  flex: 1;
  padding-right: 20px;
  word-break: break-word;
}

.cat-ui-segmentlistitem .cat-ui-editor-reviews-title {
  font-size: var(--cat-ui-font-12px);
  margin: 5px 0 0;
}

/* ACTIONS */
.cat-ui-segmentlist-iconbutton.cat-ui-iconbutton .cat-ui-iconbutton-icon path:not([fill='none']),
.cat-ui-segmentlist-iconbutton.cat-ui-iconbutton .cat-ui-iconbutton-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-secondary);
}

/* ACTIONS ON HOVER*/
/* .cat-ui-segmentlist-subkey-actions {
  position: absolute;
  left: 20px;
  width: 20px;
  background-color: var(--cat-ui-bg-dark);
}
.cat-ui-segmentlistitem-even .cat-ui-segmentlist-subkey-actions {
  background-color: var(--cat-ui-bg-dark2);
}
.cat-ui-segmentlist-subkey-actions .cat-ui-segmentlist-subkey-actions-inner {
  position: absolute;
  display: none;
  top: 0;
}
.cat-ui-segmentlist-subkey-actions:hover {
  width: 200px;
}
.cat-ui-segmentlist-subkey-actions:hover .cat-ui-segmentlist-subkey-actions-inner {
  display: block;
} */

/* TAGS */
.cat-ui-segmentlist-tags {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  margin-top: 5px;
}

/* .cat-ui-segmentlist-tag-wrapper {
  position: relative;
  padding: 2px;
  height: 5px;
  width: 5px;
  display: inline-flex;
  cursor: pointer;
}

.cat-ui-segmentlist-tag-wrapper:hover {
  top: -3px;
} */

.cat-ui-editor-tag.cat-ui-segmentlist-tag {
  font-weight: 300;
  font-size: 8px;
  width: auto;
  border-radius: 15px;
  padding: 1px 5px 0;
  line-height: 7px;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.8;
}

.cat-ui-segmentlist-tag-0 {
  background-color: var(--cat-ui-tag-0);
}

.cat-ui-segmentlist-tag-1 {
  background-color: var(--cat-ui-tag-1);
}

.cat-ui-segmentlist-tag-2 {
  background-color: var(--cat-ui-tag-2);
}

.cat-ui-segmentlist-tag-3 {
  background-color: var(--cat-ui-tag-3);
}

.cat-ui-segmentlist-tag-4 {
  background-color: var(--cat-ui-tag-4);
}

.cat-ui-segmentlist-tag-5 {
  background-color: var(--cat-ui-tag-5);
}

.cat-ui-segmentlist-tag-6 {
  background-color: var(--cat-ui-tag-6);
}

.cat-ui-segmentlist-tag-7 {
  background-color: var(--cat-ui-tag-7);
}

.cat-ui-segmentlist-tag-8 {
  background-color: var(--cat-ui-tag-8);
}

.cat-ui-segmentlist-tag-9 {
  background-color: var(--cat-ui-tag-9);
}

.cat-ui-segmentlist-tag-inactive {
  opacity: 0.4;
}

/* textarea & overlay */
.cat-ui-editor-segmentlist-subKey-textarea {
  position: relative;
  display: block;
  font-family: var(--font-family-readable);
  font-size: var(--cat-ui-font-14px);
  border: none;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 10px 6px 10px;
  min-height: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px;
  color: transparent;
  /*transition: background-color ease-in 0.3s, color ease-in 0.3s;*/
  resize: none;
  overflow: hidden;
  line-height: var(--cat-ui-font-lineheight-14px);
  font-weight: 400;
}

.cat-ui-editor-segmentlist-subKey-textarea:hover {
  box-shadow: none;
  border: none;
  outline: none;
  background-color: var(--cat-ui-font-editor-bg-focus);
  color: transparent;
}

.cat-ui-editor-segmentlist-subKey-textarea-overlayVisible:focus,
.cat-ui-editor-segmentlist-subKey-textarea-focus {
  box-shadow: none;
  border: none;
  outline: none;
  background-color: var(--cat-ui-font-editor-bg-focus);
  color: var(--cat-ui-font-editor-text) !important;
  caret-color: var(--cat-ui-font-editor-text);
}

.cat-ui-editor-segmentlist-subKey-textarea:disabled {
  background: transparent;
  cursor: not-allowed;
}

.cat-ui-editor-segmentlist-subKey-textarea::-moz-placeholder {
  color: var(--cat-ui-font-secondary);
  opacity: 0.5;
  font-weight: 200;
}

.cat-ui-editor-segmentlist-subKey-textarea::placeholder {
  color: var(--cat-ui-font-secondary);
  opacity: 0.5;
  font-weight: 200;
}

.cat-ui-segmentlistitem .cat-ui-editor-syntax,
.cat-ui-segmentlistitem .cat-ui-editor-syntax * {
  font-size: var(--cat-ui-font-14px);
  font-family: var(--font-family-readable);
  line-height: var(--cat-ui-font-lineheight-14px);
  font-weight: 400;
}

.cat-ui-editor-segmentlist-diffoverlay {
  /* position: absolute; 
  top: 0;
  bottom: 0; */
  width: 100%;
  font-family: var(--font-family-readable);
  display: inline-block;
  background: inherit;
  font-size: var(--cat-ui-font-14px);
  padding: 4px 10px 6px 10px;
  pointer-events: none;
  color: var(--cat-ui-font-editor-text);
  white-space: pre-wrap;
  line-height: var(--cat-ui-font-lineheight-14px);
  grid-area: 1 / 1 / 2 / 2;
  /* using grid to overlay on textarea */
}

.cat-ui-editor-segmentlist-diffoverlay *,
.cat-ui-editor-segmentlist-diffoverlay .cat-ui-info-text {
  font-family: var(--font-family-readable) !important;
  font-size: var(--cat-ui-font-14px) !important;
  line-height: var(--cat-ui-font-lineheight-14px) !important;
  font-weight: 400;
}

.cat-ui-editor-segmentlist-row {
  position: relative;
}

.cat-ui-editor-segmentlist-col-left,
.cat-ui-editor-segmentlist-col-right {
  display: inline-block;
  width: 100%;
}

.cat-ui-editor-segmentlist-col-left {
  padding-right: 0;
}

.cat-ui-editor-segmentlist-col-right {
  padding-left: 0;
}

/* responsive and not one col forced */
@media only screen and (min-width: 1750px) {
  .cat-ui-editor-segmentlist-row:not(.cat-ui-editor-segmentlist-row-nr_cols_one) {
    display: flex;
  }

  .cat-ui-editor-segmentlist-row:not(.cat-ui-editor-segmentlist-row-nr_cols_one) .cat-ui-editor-segmentlist-col-left,
  .cat-ui-editor-segmentlist-row:not(.cat-ui-editor-segmentlist-row-nr_cols_one) .cat-ui-editor-segmentlist-col-right {
    width: calc(50% - 10px);
  }

  .cat-ui-editor-segmentlist-row:not(.cat-ui-editor-segmentlist-row-nr_cols_one) .cat-ui-editor-segmentlist-col-left {
    padding-right: 10px;
  }

  .cat-ui-editor-segmentlist-row:not(.cat-ui-editor-segmentlist-row-nr_cols_one) .cat-ui-editor-segmentlist-col-right {
    background-color: var(--cat-ui-alternate-row);
    padding-left: 10px;
  }
}

/* forced two cols */
.cat-ui-editor-segmentlist-row.cat-ui-editor-segmentlist-row-nr_cols_two {
  display: flex;
}

.cat-ui-editor-segmentlist-row.cat-ui-editor-segmentlist-row-nr_cols_two .cat-ui-editor-segmentlist-col-left,
.cat-ui-editor-segmentlist-row.cat-ui-editor-segmentlist-row-nr_cols_two .cat-ui-editor-segmentlist-col-right {
  width: calc(50% - 10px);
}

.cat-ui-editor-segmentlist-row.cat-ui-editor-segmentlist-row-nr_cols_two .cat-ui-editor-segmentlist-col-left {
  padding-right: 10px;
}

.cat-ui-editor-segmentlist-row.cat-ui-editor-segmentlist-row-nr_cols_two .cat-ui-editor-segmentlist-col-right {
  background-color: var(--cat-ui-alternate-row);
  padding-left: 10px;
}


.cat-ui-segmentlistitem-subkey-value .cat-ui-keylistitem-subkey-actions .cat-ui-iconbutton:disabled {
  opacity: 0.5;
}

.cat-ui-segmentlistitem-info-text-highlighted-result,
.cat-ui-segmentlistitem-primarykey-title-highlighted-result {
  font-weight: 400;
  color: var(--cat-ui-input-bg-active);
}


[data-theme="light"] .cat-ui-segmentlistitem {
  background-color: var(--cat-ui-bg-dark);
}

[data-theme="light"] .cat-ui-segmentlistitem-even {
  background-color: var(--cat-ui-bg-dark2);
}

[data-theme="light"] .cat-ui-editor-segmentlist-subKey-textarea {
  background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .cat-ui-editor-segmentlist-subKey-textarea:hover {
  background-color: var(--cat-ui-font-editor-bg-focus);
  color: transparent;

  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.1),
    0 0 5px 1px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .cat-ui-editor-segmentlist-subKey-textarea-overlayVisible:focus,
[data-theme="light"] .cat-ui-editor-segmentlist-subKey-textarea-focus {
  background-color: var(--cat-ui-font-editor-bg-focus);
  color: var(--cat-ui-font-editor-text) !important;

  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.1),
    0 0 10px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .cat-ui-segmentlistitem-subkey-wrapper {
  border-bottom: solid 1px #00000012;
}

[data-theme="light"] .cat-ui-segmentlistitem-subkey-wrapper:first-child {
  border-top: solid 1px #00000012;
}
.cat-ui-editor-reviews {
  margin-top: 10px;
  background-color: var(--cat-ui-bg-dark2);
}
.cat-ui-editor-reviews-title {
  display: flex;
  align-items: center;
  margin: 35px 10px 0;
  padding: 10px 5px 5px;
  font-size: 16px;
  color: var(--cat-ui-font-primary2);
  font-size: var(--cat-ui-font-15px);
  font-weight: 300;
  background-color: var(--cat-ui-bg-dark);
}
.cat-ui-editor-review {
  padding: 10px 10px 0;
}
.cat-ui-editor-review:nth-child(even) {
  background-color: var(--cat-ui-bg-middle);
}

.cat-ui-editor-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cat-ui-editor-review-header .cat-ui-info-label {
  margin-top: 0;
  display: block;
  min-width: 0;
}

.cat-ui-editor-review-value {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px 0px;
  font-family: var(--font-family-readable);
}

.cat-ui-editor-reviews-button-decline .cat-ui-iconbutton-icon path:not([fill='none']),
.cat-ui-editor-reviews-button-decline .cat-ui-iconbutton-icon circle:not([fill='none']) {
  fill: var(--cat-ui-state-error);
}

.cat-ui-editor-reviews-button-accept {
  margin-left: 2px;
}
.cat-ui-editor-reviews-button-accept .cat-ui-iconbutton-icon path:not([fill='none']),
.cat-ui-editor-reviews-button-accept .cat-ui-iconbutton-icon circle:not([fill='none']) {
  fill: var(--cat-ui-state-success);
}

.cat-ui-editor-reviews-button-decline.cat-ui-editor-reviews-button-declined {
  background-color: var(--cat-ui-state-error);
}
.cat-ui-editor-reviews-button-decline.cat-ui-editor-reviews-button-declined
  .cat-ui-iconbutton-icon
  path:not([fill='none']),
.cat-ui-editor-reviews-button-decline.cat-ui-editor-reviews-button-declined
  .cat-ui-iconbutton-icon
  circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-editor-reviews-button-accept.cat-ui-editor-reviews-button-accepted {
  background-color: var(--cat-ui-state-success);
}
.cat-ui-editor-reviews-button-accept.cat-ui-editor-reviews-button-accepted
  .cat-ui-iconbutton-icon
  path:not([fill='none']),
.cat-ui-editor-reviews-button-accept.cat-ui-editor-reviews-button-accepted
  .cat-ui-iconbutton-icon
  circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

.cat-ui-segmentlistitem-warnings {
  color: var(--cat-ui-state-warning);
  font-size: var(--cat-ui-font-12px);
  font-family: var(--font-family-readable);
  padding: 0 10px 10px;
}

.cat-ui-segmentlistitem-errors {
  color: var(--cat-ui-state-error);
  font-size: var(--cat-ui-font-12px);
  font-family: var(--font-family-readable);
  padding: 0 10px 10px;
}

.cat-ui-dropdown-wrapper-segment-actions.cat-ui-dropdown-wrapper {
  position: relative;
  height: 30px;
  margin: 0;
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-dropdown-panel {
  opacity: 0;
  z-index: 1001;
  width: 0;
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-infos-title {
  background: var(--cat-ui-bg-dark);
  margin-bottom: 10px;
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-infos-title .cat-ui-info-item {
  padding: 5px 10px
}


.cat-ui-dropdown-wrapper-segment-actions .cat-ui-infos-title .cat-ui-info-label {
  justify-content: flex-start;
  text-transform: uppercase;
  font-size: var(--cat-ui-font-13px);
  font-family: var(--font-family-readable);
  color: var(--cat-ui-font-primary2);
  margin: 0;
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-dropdown-panel .cat-ui-editor-tag {
  font-size: 10px;
  padding: 2px 5px;
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-dropdown-openbutton {
  width: 30px;
  background: transparent;
  box-shadow: none;
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-dropdown-icon path:not([fill='none']),
.cat-ui-dropdown-wrapper-segment-actions .cat-ui-dropdown-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-secondary);
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-dropdown-panel-open {
  width: calc(100% - 20px);
  height: auto;
  top: 40px;
  left: calc(-100% + 50px);
  opacity: 1;
  animation: cat-ui-dropdown-panel-show-left-segment-actions 0.2s ease-in;
}
.cat-ui-dropdown-wrapper-segment-actions .cat-ui-dropdown-panel-closing {
  animation: cat-ui-dropdown-panel-hide-left-segment-actions 0.2s ease-in reverse;
}
/* 
.cat-ui-dropdown-wrapper-segment-actions .cat-ui-dropdown-panel-open > div {
  opacity: 1;
  animation: none;
}
.cat-ui-dropdown-wrapper-segment-actions .cat-ui-dropdown-panel-closing > div {
  opacity: 1;
  animation: none;
} */

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-segmentaction-button {
  display: flex;
  align-items: center;
  font-size: var(--cat-ui-font-15px);
  background-color: var(--cat-ui-bg-middle-opac);
  padding: 15px;
  width: 100%;
  margin: 0;
  margin-bottom: 10px;
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-segmentaction-button:disabled {
  background-color: var(--cat-ui-bg-middle-opac);
  color: var(--cat-ui-font-secondary)
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-segmentaction-button .cat-ui-iconbutton-icon {
  margin-right: 5px;
}

.cat-ui-dropdown-wrapper-segment-actions .cat-ui-segmentaction-button:disabled .cat-ui-iconbutton-icon path:not([fill='none']),
.cat-ui-dropdown-wrapper-segment-actions .cat-ui-segmentaction-button:disabled .cat-ui-iconbutton-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-secondary) !important;
}

@keyframes cat-ui-dropdown-panel-show-left-segment-actions {
  0% {
    top: 10px;
    left: 10px;
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
  }
  /* 50% {
    width: 30px;
    height: 30px;
    top: 40px;
    left: calc(-100% + 80px);
    opacity: 0.5;
    border-radius: 15px;
  }
  75% {
    width: 100px;
    height: 100px;
    top: 80px;
    left: calc(-100% + 90px);
    opacity: 0.8;
  } */
  100% {
    width: calc(100% - 20px);
    height: auto;
    left: calc(-100% + 50px);
    top: 40px;
    opacity: 1;
  }
}
@keyframes cat-ui-dropdown-panel-hide-left-segment-actions {
  0% {
    top: 10px;
    left: 10px;
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
  }
  /* 50% {
    width: 30px;
    height: 30px;
    top: 40px;
    left: calc(-100% + 80px);
    opacity: 0.5;
    border-radius: 15px;
  }
  75% {
    width: 100px;
    height: 100px;
    top: 80px;
    left: calc(-100% + 90px);
    opacity: 0.8;
  } */
  100% {
    width: calc(100% - 20px);
    height: auto;
    left: calc(-100% + 50px);
    top: 40px;
    opacity: 1;
  }
}


.cat-ui-editor-syntax {
  /* position: absolute;
  top: 0; */
  width: calc(100% - 20px);
  font-family: var(--font-family-readable);
  display: inline-block;
  background: inherit;
  font-size: var(--cat-ui-font-15px);
  padding: 4px 10px 6px 10px;
  pointer-events: none;
  color: var(--cat-ui-font-editor-text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: var(--cat-ui-font-lineheight-15px);
  grid-area: 1 / 1 / 2 / 2;
  z-index: 2;
}

.cat-ui-editor-syntax * {
  font-family: var(--font-family-readable);
  font-size: var(--cat-ui-font-15px);
  line-height: var(--cat-ui-font-lineheight-15px);
  font-weight: 400;
}

.cat-ui-editor-syntax-type-syntax {
  color: var(--cat-ui-font-editor-syntax);
}

.cat-ui-editor-syntax-type-attr {
  color: var(--cat-ui-font-primary2);
}

.cat-ui-editor-syntax-type-var {
  color: var(--cat-ui-font-editor-var);
}

.cat-ui-editor-syntax-type-tag {
  color: var(--cat-ui-font-editor-tag);
}

.cat-ui-editor-syntax-type-prefix {
  color: var(--cat-ui-font-editor-prefix);
}

.cat-ui-editor-syntax-type-suffix {
  color: var(--cat-ui-font-editor-suffix);
}

.cat-ui-editor-syntax-type-locked {
  color: var(--cat-ui-font-editor-var);
  opacity: 0.5;
}
.cat-ui-segmentlist {
  display: flex;
  flex-direction: column;
  background-color: var(--cat-ui-bg-middle2);
  height: calc(100% - 50px);
  /* with new dyncamic list heights must be somewhat predetermined as AutoSizer stopped working as expected */
}

.cat-ui-segmentlist-list {
  flex: 1 1 auto;
  height: 100%
}
.cat-ui-dropdown-wrapper.cat-ui-dropdown-shopping-wrapper {
  display: inline-flex;
}

.cat-ui-shopping-panel-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
}

.cat-ui-shopping-panel-section-item {
  padding: 2px 15px 2px 5px;
  margin: 0 -10px;
}
.cat-ui-shopping-panel-section-item:last-child {
  margin-bottom: 10px;
}

.cat-ui-shopping-button-label {
  font-size: var(--cat-ui-font-12px);
  color: var(--cat-ui-font-primary);
}

.cat-ui-button.cat-ui-shopping-button {
  height: 24px;
  right: 10px;
  padding: 0 25px 0 10px;
  background-color: var(--cat-ui-bg-light);
  color: var(--cat-ui-font-primary);
  z-index: 1;
  font-size: var(--cat-ui-font-12px);
}
.cat-ui-button.cat-ui-shopping-button:hover {
  background-color: var(--cat-ui-bg-middle3);
  cursor: pointer;
}

.cat-ui-shopping-button-icon path:not([fill='none']),
.cat-ui-shopping-button-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

/* spinner */
.cat-ui-shopping-button-icon-saving path:not([fill='none']),
.cat-ui-shopping-button-icon-saving circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-shopping-button-icon-saving {
  animation: cat-ui-shopping-button-icon-saving-spin 1s ease-in-out infinite;
}

@keyframes cat-ui-shopping-button-icon-saving-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* .cat-ui-dropdown-openbutton.cat-ui-dropdown-openbutton-haspendings {
  background-color: var(--cat-ui-input-bg-active);
   animation: cat-ui-shopping-state-pulsate 5s ease-in-out infinite; 
} */

/* @keyframes cat-ui-shopping-state-pulsate {
    0% {
      background-color: var(--cat-ui-input-bg);
    }
    50% {
      background-color: var(--cat-ui-input-bg-active);
    }
    100% {
      background-color: var(--cat-ui-input-bg);
    }
  } */

.cat-ui-tag.cat-ui-shopping-tag {
  position: absolute;
  left: 60%;
  top: -2px;
  padding: 0 4px;
  color: var(--cat-ui-font-primary2);
  background-color: var(--cat-ui-state-error);
}

.cat-ui-uiconfig-panel-wrapper {

}

.cat-ui-uiconfig-infos .cat-ui-info-item {
  align-items: center;
  justify-content: space-between;
}

.cat-ui-uiconfig-infos .cat-ui-info-item .cat-ui-info-label {
  text-transform: initial;
}

.cat-ui-uiconfig-panel-wrapper .cat-ui-dropdown-icon path:not([fill='none']),
.cat-ui-uiconfig-panel-wrapper .cat-ui-dropdown-icon circle:not([fill='none']) {
  fill: var(--cat-ui-font-secondary);
}

/* .cat-ui-uiconfig-infos {
  margin-bottom: 10px;
}

.cat-ui-uiconfig-infos .cat-ui-info-item {
  margin: 0 -10px;
  padding: 5px 10px;
  background-color: var(--cat-ui-bg-dark2);
  justify-content: space-between;
}

.cat-ui-uiconfig-infos .cat-ui-info-item:first-child {
  margin-top: -10px;
}

.cat-ui-uiconfig-infos-item {
  padding: 3px 0px;
  display: flex;
  align-items: center;
}
.cat-ui-uiconfig-infos-item:hover {
  font-weight: 600;
  color: var(--cat-ui-font-primary);
  cursor: pointer;
}

.cat-ui-uiconfig-infos-item-selected {
  font-weight: 600;
  color: var(--cat-ui-font-primary);
}

.cat-ui-uiconfig-infos-item-title {
  margin-left: 5px;
} */

.cat-ui-segmentlist-header {
  font-family: var(--font-family-readable);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 10px 10px 10px 0;
  color: var(--cat-ui-font-primary);
  font-size: var(--cat-ui-font-14px);
  z-index: 1001;
}

.cat-ui-segmentlist-title {
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  font-weight: 300;
  flex: 1;
  color: var(--cat-ui-font-secondary);
}
.cat-ui-segmentlist-title-separator::after {
  content: '|';
  color: var(--cat-ui-font-primary);
  opacity: 0.5;
  margin: 0 5px;
}
.cat-ui-segmentlist-title-active {
  font-weight: 600;
  color: var(--cat-ui-font-primary);
}

.cat-ui-segmentadd-wrapper {
  position: relative;
}

.cat-ui-segmentadd {
  position: relative;
  width: calc(100% - 20px);
  z-index: 1000;
  margin-top: -100%;
  background-color: var(--cat-ui-bg-middle2-opac);
  padding: 10px;
  color: var(--cat-ui-font-primary2);
}

.cat-ui-segmentadd-show {
  margin-top: 0;
  animation: cat-ui-segmentadd-slide-in 0.25s ease-out;
}

.cat-ui-segmentadd-hide {
  margin-top: -100%;
  animation: cat-ui-segmentadd-slide-out 0.25s ease-in reverse;
}

.cat-ui-add-textfield {
  max-height: 300px;
}

@keyframes cat-ui-segmentadd-slide-in {
  0% {
    margin-top: -100%;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes cat-ui-segmentadd-slide-out {
  0% {
    margin-top: -100%;
  }
  100% {
    margin-top: 0;
  }
}

.cat-ui-info-item.cat-ui-info-item-add-select {
  padding: 0 10px;
  align-items: center;
  min-height: 27px;
}

.cat-ui-info-item.cat-ui-info-item-add-select .cat-ui-info-label {
  min-width: 130px;
}

.cat-ui-info-item.cat-ui-info-item-add-input {
  padding: 0 10px;
  align-items: center;
  min-height: 27px;
}
.cat-ui-info-item.cat-ui-info-item-add-input .cat-ui-info-label {
  min-width: 130px;
}
.cat-ui-info-item.cat-ui-info-item-add-input .cat-ui-info-text {
  flex: 9;
}
.cat-ui-info-item.cat-ui-info-item-add-input .cat-ui-info-text .cat-ui-textfield {
  margin-bottom: 0;
}

.cat-ui-segmentadd-wrapper .cat-ui-input-error, .cat-ui-segmentadd-wrapper .cat-ui-input-warning {
  margin-top: 5px;
  font-size: var(--cat-ui-font-14px);
  font-family: var(--font-family-readable);
}
.cat-ui-segmentcopy {
  position: absolute;
  width: calc(100% - 120px);
  z-index: 1000;
  top: -400px;
  left: 40px;
  background-color: var(--cat-ui-bg-middle2);
  padding: 10px;

  border-radius: 15px;

  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(99, 99, 99, 0.968), rgba(83, 83, 83, 0.937));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 25px 10px rgba(0, 0, 0, 0.2);
}

.cat-ui-segmentcopy-show {
  z-index: 100000000;
  top: 80px;
  animation: cat-ui-segmentcopy-slide-in 0.5s ease-out;
}

.cat-ui-segmentcopy-hide {
  top: -400px;
  animation: cat-ui-segmentcopy-slide-out 0.5s ease-in reverse;
}

@keyframes cat-ui-segmentcopy-slide-in {
  0% {
    top: -400px;
  }

  100% {
    top: 80px;
  }
}

@keyframes cat-ui-segmentcopy-slide-out {
  0% {
    top: -400px;
  }

  100% {
    top: 80px;
  }
}

.cat-ui-segmentcopy .cat-ui-input-error,
.cat-ui-segmentcopy .cat-ui-input-warning {
  margin-top: 5px;
  font-size: var(--cat-ui-font-14px);
  font-family: var(--font-family-readable);
}



[data-theme="light"] .cat-ui-segmentcopy {
  background: var(--cat-ui-bg-dark);

  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 25px 10px rgba(0, 0, 0, 0.2);
}
.cat-ui-editor-header {
  font-family: var(--font-family-readable);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 10px 10px 10px 10px;
  color: var(--cat-ui-font-primary);
  font-size: var(--cat-ui-font-14px);
  z-index: 1001;
}

.cat-ui-editor-title {
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  font-weight: 300;
  flex: 1;
  color: var(--cat-ui-font-secondary);
}
.cat-ui-editor-title-separator::after {
  content: '|';
  color: var(--cat-ui-font-primary);
  opacity: 0.5;
  margin: 0 5px;
}
.cat-ui-editor-title-active {
  font-weight: 600;
  color: var(--cat-ui-font-primary);
}

.cat-ui-editor-buttons {
  display: flex;
  align-items: center;
}

.cat-ui-editor-tags {
  display: flex;
}

.cat-ui-editor-tag {
  display: inline-flex;
  align-items: center;
  margin: 2px;
  font-weight: 300;
  font-size: 7px;
  height: 13px;
  width: 13px;
  border-radius: 7px;
  padding: 0;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 1;
}
.cat-ui-editor-tag-showlabel {
  color: #fff;
  width: auto;
  content: initial;
  padding: 0 5px 0;
}
.cat-ui-editor-tag:hover {
  width: auto;
  cursor: pointer;
  content: initial;
  padding: 0 5px 0;
  color: #fff;
}

.cat-ui-editor-tag-0 {
  background-color: var(--cat-ui-tag-0);
}
.cat-ui-editor-tag-1,
.cat-ui-editor-tag-1:hover {
  background-color: var(--cat-ui-tag-1);
  color: #000;
}
.cat-ui-editor-tag-2,
.cat-ui-editor-tag-2:hover {
  background-color: var(--cat-ui-tag-2);
  color: #000;
}
.cat-ui-editor-tag-3,
.cat-ui-editor-tag-3:hover {
  background-color: var(--cat-ui-tag-3);
  color: #000;
}
.cat-ui-editor-tag-4,
.cat-ui-editor-tag-4:hover {
  background-color: var(--cat-ui-tag-4);
  color: #000;
}
.cat-ui-editor-tag-5 {
  background-color: var(--cat-ui-tag-5);
}
.cat-ui-editor-tag-6 {
  background-color: var(--cat-ui-tag-6);
}
.cat-ui-editor-tag-7,
.cat-ui-editor-tag-7:hover {
  background-color: var(--cat-ui-tag-7);
  color: #000;
}
.cat-ui-editor-tag-8,
.cat-ui-editor-tag-8:hover {
  background-color: var(--cat-ui-tag-8);
  color: #000;
}
.cat-ui-editor-tag-9 {
  background-color: var(--cat-ui-tag-9);
}

.cat-ui-editor-tag-inactive:not(.cat-ui-editor-tag-showlabel):not(:hover) {
  color: transparent;
}

.cat-ui-editor-tag-inactive {
  opacity: 0.4;
}

.cat-ui-editor-tag-inactive:hover {
  opacity: 0.8;
}

.cat-ui-editor-segment-subKey {
  padding: 10px;
  background-color: var(--cat-ui-bg-dark2);
  margin-bottom: 1px;
}

.cat-ui-editor-segment-subKey-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cat-ui-editor-segment-subKey-title {
  display: flex;
  align-items: center;
  margin: 5px 0;
  font-size: 16px;
  color: var(--cat-ui-font-primary);
  font-size: var(--cat-ui-font-15px);
  font-weight: 300;
}

.cat-ui-editor-segment-subKey-title-right {
  display: flex;
  align-items: center;
}

.cat-ui-editor-segment-subKey-title .cat-ui-tag:first-child {
  margin-left: 0;
}

.cat-ui-editor-segment-subKey-title-groupKey {
  margin-left: 5px;
  color: var(--cat-ui-font-primary);
}
.cat-ui-editor-segment-subKey-title-groupKey:first-child {
  margin-left: 0;
}

.cat-ui-editor-segment-subKey-textarea {
  position: relative;
  display: block;
  font-family: var(--font-family-readable);
  font-size: var(--cat-ui-font-15px);
  border: none;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 10px 6px 10px;
  min-height: 46px;
  background-color: var(--cat-ui-input-bg);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px;
  color: var(--cat-ui-font-primary2);
  transition: background-color ease-in 0.3s;
  resize: none;
  overflow: hidden;
  line-height: var(--cat-ui-font-lineheight-15px);
}

.cat-ui-editor-segment-subKey-textarea:hover,
.cat-ui-editor-segment-subKey-textarea:focus {
  box-shadow: none;
  border: none;
  outline: none;
  background-color: var(--cat-ui-font-editor-bg-focus);
  color: var(--cat-ui-font-editor-text);
}
.cat-ui-editor-segment-subKey-textarea-overlayVisible:focus {
  color: var(--cat-ui-font-editor-bg-focus) !important;
  caret-color: var(--cat-ui-font-editor-text);
}

.cat-ui-editor-segment-subKey-textarea:disabled {
  background: transparent;
  cursor: not-allowed;
}

.cat-ui-editor-segment-subKey-textarea::-moz-placeholder {
  color: var(--cat-ui-font-secondary);
  opacity: 0.5;
  font-weight: 200;
}

.cat-ui-editor-segment-subKey-textarea::placeholder {
  color: var(--cat-ui-font-secondary);
  opacity: 0.5;
  font-weight: 200;
}

.cat-ui-editor-segment-subKey-actions {
  justify-content: flex-end;
  display: flex;
  align-items: center;
}

.cat-ui-editor-segment-subKey-source {
  flex: 1;
  padding: 5px 10px;
}

.cat-ui-editor-segment-subKey-source-noTitle {
  padding: 0 10px 5px 0;
}

.cat-ui-editor-segment-subKey-pre {
  font-family: var(--font-family-readable);
  position: relative;
  display: block;
  font-size: var(--cat-ui-font-15px);
  border: none;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 10px 6px 0px;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px;
  color: var(--cat-ui-font-primary2);
  transition: background-color ease-in 0.3s;
  resize: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.cat-ui-editor-segment {
  flex: 1;
  background-color: var(--cat-ui-bg-middle);
}

.cat-ui-editor-segment-info-section {
  background-color: var(--cat-ui-bg-dark2);
  padding: 10px;
}

.cat-ui-editor-row {
  position: relative;
}

.cat-ui-editor-col-left,
.cat-ui-editor-col-right {
  display: inline-block;
  width: 100%;
}

.cat-ui-editor-col-left {
  padding-right: 0;
}

.cat-ui-editor-col-right {
  padding-left: 0;
}

@media only screen and (min-width: 1350px) {
  .cat-ui-editor-row {
    display: flex;
  }

  .cat-ui-editor-col-left,
  .cat-ui-editor-col-right {
    width: calc(50% - 10px);
  }

  .cat-ui-editor-col-left {
    padding-right: 10px;
  }

  .cat-ui-editor-col-right {
    padding-left: 10px;
  }
}

.cat-ui-keylistfilter {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 10px;
  flex: 0 1 auto;
  background-color: var(--cat-ui-bg-dark);
}

.cat-ui-keylistfilter-search {
  flex: 1;
}

.cat-ui-keylistfilter .cat-ui-dropdown-icon {
  top: 4px;
}

.cat-ui-keylistfilter-search .cat-ui-filtersearch-input,
.cat-ui-keylistfilter .cat-ui-dropdown-openbutton {
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 48px rgba(154, 154, 154, 0.1);
}

.cat-ui-keylistfilter-search .cat-ui-filtersearch-input:hover,
.cat-ui-keylistfilter .cat-ui-dropdown-openbutton:hover {
  background: linear-gradient(135deg, rgba(95, 95, 95, 0.8), rgba(95, 95, 95, 0.85));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.6),
    0 0 12px rgba(0, 0, 0, 0.2);
}

.cat-ui-keylistfilter-search input.cat-ui-filtersearch-input-active,
.cat-ui-keylistfilter .cat-ui-dropdown-openbutton-active {
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(98, 173, 183, 0.5), rgba(98, 173, 183, 0.45));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.6),
    0 3px 12px rgba(0, 0, 0, 0.3);
}

input.cat-ui-filtersearch-input-active:hover,
.cat-ui-keylistfilter .cat-ui-dropdown-openbutton-active:hover {
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(98, 173, 183, 0.5), rgba(98, 173, 183, 0.45));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.6),
    0 0 12px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .cat-ui-keylistfilter-search .cat-ui-filtersearch-input,
[data-theme="light"] .cat-ui-keylistfilter .cat-ui-dropdown-openbutton {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 48px rgba(154, 154, 154, 0.1);
}

[data-theme="light"] .cat-ui-keylistfilter-search .cat-ui-filtersearch-input:hover,
[data-theme="light"] .cat-ui-keylistfilter .cat-ui-dropdown-openbutton:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.6),
    0 0 12px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .cat-ui-keylistfilter-search input.cat-ui-filtersearch-input-active,
[data-theme="light"] .cat-ui-keylistfilter .cat-ui-dropdown-openbutton-active {
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(111, 149, 210, 0.5), rgba(86, 121, 184, 0.45));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.6),
    0 3px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .cat-ui-keylistfilter-search input.cat-ui-filtersearch-input-active:hover,
[data-theme="light"] .cat-ui-keylistfilter .cat-ui-dropdown-openbutton-active:hover {
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(111, 149, 210, 0.5), rgba(86, 121, 184, 0.45));
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.6),
    0 0 12px rgba(0, 0, 0, 0.5);
}

.cat-ui-keylistitem {
  padding: 5px 10px;

  transition: background-color ease-in 0.3s;
}

.cat-ui-keylistitem:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .cat-ui-keylistitem:not(.cat-ui-keylistitem-selected):nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}

.cat-ui-keylistitem:hover {
  background-color: var(--cat-ui-keylist-item-hover) !important;
  cursor: pointer;
}

.cat-ui-keylistitem.cat-ui-keylistitem-selected {
  background-color: var(--cat-ui-keylist-item-selected);
}

.cat-ui-keylistitem-primarykey,
.cat-ui-keylistitem-subkey {
  display: flex;
  align-items: center;
  color: var(--cat-ui-font-primary2);
  font-weight: 600;
  font-size: var(--cat-ui-font-12px);
  width: 100%;
  word-break: break-all;
}

.cat-ui-keylistitem-primarykey {
  font-family: var(--font-family-readable);
  color: var(--cat-ui-font-primary);
  margin: 3px 0;
  padding: 0 02px;
}

.cat-ui-keylistitem-subkey {
  padding: 1px 0;
  padding-left: 20px;
  width: calc(100% - 20px);
  font-weight: 400;
  color: var(--cat-ui-input-bg-active);
  margin: 2px 0;
}

.cat-ui-keylistitem-primarykey-state,
.cat-ui-keylistitem-subkey-state {
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.cat-ui-keylistitem-primarykey-value {
  position: relative;
  color: var(--cat-ui-font-secondary);
  font-weight: 300;
  font-size: var(--cat-ui-font-12px);
  margin-top: 4px;
  padding-left: 20px;
  word-break: break-all;
  font-family: var(--font-family-primary);
}
.cat-ui-keylist {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cat-ui-keylist-list {
  flex: 1 1 auto;
  height: calc(100% - 50px);
}
.cat-ui-selectkeylistfilter-filter {
  position: relative;
  margin-top: 10px;
  background-color: var(--cat-ui-input-bg);
  border-radius: 15px;
  padding: 2px 10px;
  margin: 0 10px 10px;
}

.cat-ui-selectkeylistfilter-filter-active {
  background-color: var(--cat-ui-input-bg-active);
}

.cat-ui-addon-machine-item {
  margin: 10px;
  border-radius: 20px;
  padding: 10px 15px;

  backdrop-filter: blur(4px);
  background-color: var(--cat-ui-bg-middle-opac);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 8px rgba(255, 255, 255, 0.05);
}

.cat-ui-addon-machine-item-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cat-ui-font-secondary);
  padding: 5px 5px 5px 0;
  font-weight: 300;
  font-size: var(--cat-ui-font-12px);
  text-align: right;
}

.cat-ui-addon-machine-item-info .cat-ui-info-label {
  color: var(--cat-ui-font-secondary)
}

.cat-ui-addon-machine-item-info .cat-ui-info-text {
  color: var(--cat-ui-input-bg-active);
  font-family: var(--font-family-readable);
}

.cat-ui-addon-machine-item-value {
  margin: 10px 0;
  font-family: var(--font-family-readable);
  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-primary2);
  word-wrap: break-word;
  cursor: pointer;
}

.cat-ui-addon-machine-item-error {
  display: flex;
  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-primary);
  background-color: #e9959570;
  padding: 4px;
  border-radius: 5px;
  font-family: var(--font-family-readable);
}

.cat-ui-addon-machine-item-error div {
  overflow-wrap: anywhere;
}

.cat-ui-addon-machine-item-info-error {
  margin-right: 10px;
}

.cat-ui-addon-machine-item-info-error path:not([fill='none']),
.cat-ui-addon-machine-item-info-error circle:not([fill='none']) {
  fill: var(--cat-ui-state-error);
}

.cat-ui-addon-machine-item-info-loading {
  margin-right: 5px;
}

.cat-ui-addon-machine-item-info-loading path:not([fill='none']),
.cat-ui-addon-machine-item-info-loading circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}

.cat-ui-addon-machine-item-info-loading {
  animation: cat-ui-addon-machine-item-info-loading-spin 1s ease-in-out infinite;
}

@keyframes cat-ui-addon-machine-item-info-loading-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.cat-ui-addon-machine {
  font-family: var(--font-family-primary);
}

.cat-ui-addon-memory-item {
  margin: 10px;
  border-radius: 20px;
  padding: 10px 15px;

  backdrop-filter: blur(4px);
  background-color: var(--cat-ui-bg-middle-opac);
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 8px  rgba(255, 255, 255, 0.05);
}
.cat-ui-addon-memory-item-diff-result {
  margin: 10px 0;
}

.cat-ui-addon-memory-item-diff-result .cat-ui-diff-part-same {
  color: var(--cat-ui-font-primary3);
}

.cat-ui-addon-memory-item-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px;
  font-weight: 300;
  text-align: right;
}

.cat-ui-addon-memory-item-value {
  margin: 10px 0;
  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-primary2);
  cursor: pointer;
}

.cat-ui-addon-memory {
  font-family: var(--font-family-readable);
}

.cat-ui-addon-lexica-item {
  margin: 10px;
  border-radius: 20px;
  padding: 10px 15px;

  backdrop-filter: blur(4px);
  background-color: var(--cat-ui-bg-middle-opac);
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 8px  rgba(255, 255, 255, 0.05);
}
.cat-ui-addon-lexica-item-term {
  margin: 10px 0;

  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-primary2);
}
.cat-ui-addon-lexica-item-term-alternatives {
  margin: 10px 0;

  font-size: var(--cat-ui-font-12px);
  color: var(--cat-ui-font-primary2);
}

.cat-ui-addon-lexica-item-term-alternatives .cat-ui-info-label {
  color: var(--cat-ui-font-secondary);
}

.cat-ui-addon-lexica-item-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px;
  font-weight: 300;
  text-align: right;
}

.cat-ui-addon-lexica-item-info .cat-ui-info-label {
  color: var(--cat-ui-font-secondary);
}

.cat-ui-addon-lexica-item-info .cat-ui-info-text {
  color: var(--cat-ui-font-primary2);
  font-size: var(--cat-ui-font-15px);
}

.cat-ui-addon-lexica-item-state {
  margin-right: 5px;
  font-size: var(--cat-ui-font-14px);

  color: var(--cat-ui-state-warning);
}

.cat-ui-addon-lexica-item-state-ok {
  color: var(--cat-ui-state-success);
}

.cat-ui-addon-lexica-item-state-nok {
  color: var(--cat-ui-state-error);
}

.cat-ui-addon-lexica {
  font-family: var(--font-family-readable);
}

.cat-ui-addon-otherlocalesvalue-item {
  margin: 10px;
  border-radius: 20px;
  padding: 10px 15px;

  backdrop-filter: blur(4px);
  background-color: var(--cat-ui-bg-middle-opac);
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 8px  rgba(255, 255, 255, 0.05);
}

.cat-ui-addon-otherlocalesvalue-item-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px;
  font-weight: 300;
  text-align: right;
}

.cat-ui-addon-otherlocalesvalue-item-info .cat-ui-info-label {
  color: var(--cat-ui-font-secondary);
}

.cat-ui-addon-otherlocalesvalue-item-value {
  margin: 10px 0;
  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-primary2);
  cursor: pointer;
}

.cat-ui-addon-otherlocalesvalue {
  font-family: var(--font-family-readable);
}

.cat-ui-addon-overriddenvalue-item {
  margin: 10px;
  border-radius: 20px;
  padding: 10px 15px;

  backdrop-filter: blur(4px);
  background-color: var(--cat-ui-bg-middle-opac);
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 8px  rgba(255, 255, 255, 0.05);
}

.cat-ui-addon-overriddenvalue-item-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px;
  font-weight: 300;
  text-align: right;
}

.cat-ui-addon-overriddenvalue-item-info .cat-ui-info-label {
  color: var(--cat-ui-font-secondary);
}

.cat-ui-addon-overriddenvalue-item-value {
  margin: 10px 0;
  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-primary2);
  cursor: pointer;
}

.cat-ui-addon-overriddenvalue {
  font-family: var(--font-family-readable);
}

.cat-ui-addon-fuzzyvalue-item {
  margin: 10px;
  border-radius: 20px;
  padding: 10px 15px;

  backdrop-filter: blur(4px);
  background-color: var(--cat-ui-bg-middle-opac);
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.1), 
            inset -1px -1px 1px rgba(61, 67, 69, 0.3),
            0 0 8px  rgba(255, 255, 255, 0.05);
}

.cat-ui-addon-fuzzyvalue-item-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px;
  font-weight: 300;
  text-align: right;
}

.cat-ui-addon-fuzzyvalue-item-value {
  margin: 10px 0;
  font-size: var(--cat-ui-font-14px);
  color: var(--cat-ui-font-primary3);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.cat-ui-addon-fuzzyvalue {
  font-family: var(--font-family-readable);
}

.cat-ui-addon-history-item {
  margin: 10px;
  border-radius: 5px;
  padding: 10px 15px;

  backdrop-filter: blur(4px);
  background-color: var(--cat-ui-bg-middle-opac);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 8px rgba(255, 255, 255, 0.05);
}

/* .cat-ui-addon-history-item:nth-child(even) {
  background-color: var(--cat-ui-bg-middle2);
} */

.cat-ui-addon-history-item-value {
  margin: 10px 0;
  font-size: var(--cat-ui-font-15px);
  color: var(--cat-ui-font-primary2);
  font-family: var(--font-family-readable);
}

.cat-ui-addon-history-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cat-ui-addon-history-item-review {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cat-ui-info-history-label {
  color: var(--cat-ui-font-secondary);
  font-size: var(--cat-ui-font-12px);
}

.cat-ui-addon-history-item-icon-success path:not([fill='none']),
.cat-ui-addon-history-item-icon-success circle:not([fill='none']) {
  fill: var(--cat-ui-state-success);
}

.cat-ui-addon-history-item-icon-error path:not([fill='none']),
.cat-ui-addon-history-item-icon-error circle:not([fill='none']) {
  fill: var(--cat-ui-state-error);
}

.cat-ui-addon-issues {
  font-family: var(--font-family-readable);
  background-color: var(--cat-ui-bg-middle-opac);
}


.cat-ui-addon-issues .cat-ui-info-text {
  font-size: var(--cat-ui-font-14px);
}
.cat-ui-addon-aiassistant {
  font-family: var(--font-family-readable);
  margin: 10px 5px;
}

.cat-ui-addon-ai-currenttext {
  position: relative;
  display: block;
  font-size: var(--cat-ui-font-15px);
  border: none;
  width: calc(100% - 10px);
  box-sizing: border-box;
  padding: 4px 10px;
  background-color: var(--cat-ui-input-bg-hover);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 5px;
  color: var(--cat-ui-font-primary);

  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25), 
              inset -1px -1px 1px rgba(255,255,255, 0.1),
              0 0 8px  rgba(0, 0, 0, 0.1);
}

.cat-ui-addon-aiassistant .cat-ui-ribbon.cat-ui-ribbon-action {
    font-family: var(--font-family-primary);
    font-size: var(--cat-ui-font-12px);
}

.cat-ui-addon-aiassistant .cat-ui-ribbon.cat-ui-ribbon-action:hover {
  background-color: var(--cat-ui-input-bg-hover);
}

/* .cat-ui-addon-aiassistant-markdown h1 {
  font-size: var(--cat-ui-font-14px);
  margin: 0 0 2px 0;
}

.cat-ui-addon-aiassistant-markdown h2 {
  font-size: var(--cat-ui-font-13px);
  margin: 0 0 2px 0;
}

.cat-ui-addon-aiassistant-markdown h3,
.cat-ui-addon-aiassistant-markdown h4,
.cat-ui-addon-aiassistant-markdown h5,
.cat-ui-addon-aiassistant-markdown h6 {
  font-size: var(--cat-ui-font-12px);
  margin: 0 0 2px 0;
}

.cat-ui-addon-aiassistant-markdown p {
  margin: 2px 0;
}

.cat-ui-addon-aiassistant-markdown img {
  max-width: 100%;
} */

.cat-ui-addon-maxcharacters {
  font-family: var(--font-family-readable);
  background-color: var(--cat-ui-bg-middle-opac);
}

.cat-ui-addon-context {
  font-family: var(--font-family-readable);
  background-color: var(--cat-ui-bg-middle-opac);
}

.cat-ui-addon-context-markdown h1 {
  font-size: var(--cat-ui-font-14px);
  margin: 0 0 2px 0;
}

.cat-ui-addon-context-markdown h2 {
  font-size: var(--cat-ui-font-13px);
  margin: 0 0 2px 0;
}

.cat-ui-addon-context-markdown h3,
.cat-ui-addon-context-markdown h4,
.cat-ui-addon-context-markdown h5,
.cat-ui-addon-context-markdown h6 {
  font-size: var(--cat-ui-font-12px);
  margin: 0 0 2px 0;
}

.cat-ui-addon-context-markdown p {
  margin: 2px 0;
}

.cat-ui-addon-context-markdown img {
  max-width: 100%;
}

/* .cat-ui-addon-languageselectionwrapper {
  background-color: var(--cat-ui-bg-middle-opac);
} */

.cat-ui-addon-languageselectionwrapper-toggle {
  padding: 10px 40px;
}

.cat-ui-addon-languageselectionwrapper-lng {
  color: var(--cat-ui-font-primary);
  margin: 5px;
}

.cat-ui-addon-languageselectionwrapper .cat-ui-button-direction {
  box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.2), 
              inset -1px -1px 1px rgba(61, 67, 69, 0.6),
              0 0 12px  rgba(0, 0, 0, 0.5) !important;
}

.cat-ui-addon-languageselectionwrapper-direction path:not([fill='none']),
.cat-ui-addon-languageselectionwrapper-direction circle:not([fill='none']) {
  fill: var(--cat-ui-font-primary);
}
.cat-ui-addon-languageselectionwrapper-direction {
  transition: transform 0.5s ease;
}
.cat-ui-addon-languageselectionwrapper-reverse {
  transform: rotate(180deg);
}


.cat-ui-addon-languageselectionwrapper hr {
  margin: 0 10px;
  border: none;
  border: none;
  border-bottom:  solid 1px rgba(255, 255, 255, 0.1);
}
.cat-ui-clickedelement-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(254, 254, 254, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: cat-ui-clickedelement-fadeIn 0.5s 0.2s forwards;
}

@keyframes cat-ui-clickedelement-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.incontext-iframe {
  border: none;
  height: 100%;
  min-height: 60vh;
  width: 100%;
  background: #fff;
  overflow: scroll;
}

.incontext-iframe-warning {
  color: var(--cat-ui-font-secondary);
  padding: 0 10px;
}

.cat-ui-incontextkeylistfilter-filter {
  position: relative;
  margin-top: 10px;
  background-color: var(--cat-ui-input-bg);
  border-radius: 15px;
  padding: 2px 10px;
  margin: 0 10px 10px;
}

.cat-ui-incontextkeylistfilter-filter-active {
  background-color: var(--cat-ui-input-bg-active);
}
.material-icons {
  font-family: 'Material Icons' !important;
}

.incontext-iframe-warning {
  background-color: var(--cat-ui-bg-dark2);
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
}

.locize-dropzone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-width: 2;
  border-radius: 3;
  border-color: #eeeeee;
  border-style: dashed;
  background-color: #fafafa;
  color: #bdbdbd;
  outline: none;
  transition: border .24s ease-in-out;
}


.locize-dropzone.locize-dropzone-isdragaccept {
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
}

.locize-dropzone.locize-dropzone-isdragreject {
  border-color: var(--locize-state-error);
}.orderoverview-microtranslate-section {
  margin-top: 25px;
}

.orderoverview-microtranslate-section:first-child {
  margin-top: 0;
}.gotoCAT_NSItem {
  padding: 2px;
  border-radius: 3px;
}

.gotoCAT_NSItem:hover {
  background: rgba(33, 150, 243, 0.2);
  cursor: pointer;
}

/* .gotocat_action_container {
  margin: -16px;
} */

.gotocat_action,
.gotocat_nonaction {
  padding: 15px;
  background: #ffffff8f;
  color: var(--locize-middleGray);
  box-shadow: none;
  border-radius: 8px;
}

.gotocat_action:hover {
  cursor: pointer;
  background-color: var(--locize-primaryHover);
}

.gotocat_action:first-child {
  border-radius: 8px 8px 0 0;
}

.gotocat_action * {
  color: var(--locize-textGray);
}

.gotocat_action:hover * {
  color: var(--locize-white);
}

.gotocat_action h5 {
  flex: 1;
}.locize-tier-usage-metric {
  position: relative;
  width: 100%;
  display: grid;
  gap: 1px;
}



.locize-tier-usage-metric .locize-tier-usage-metric-block-header,
.locize-tier-usage-metric .locize-tier-usage-metric-block-footer {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 0 11px;
  /* remove gap */
  margin-bottom: -1px;
}

.locize-tier-usage-metric .locize-tier-usage-metric-block-header.locize-tier-usage-metric-block-header-current {
  background-color: #2196f3;
  color: #fff;
  border-radius: 10px 10px 0 0;
}

.locize-tier-usage-metric .locize-tier-usage-metric-block-footer.locize-tier-usage-metric-block-footer-current {
  background-color: #2196f3;
  color: #fff;
  border-radius: 0 0 10px 10px;
}

.locize-tier-usage-metric-block-label {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  max-width: 120px;
  overflow: hidden;
  padding: 10px 0;
}

.locize-tier-usage-metric-limit {
  font-size: 12px;
  position: absolute;
  right: 2px;
  bottom: 5px;
}

.locize-tier-usage-block-inner {
  width: auto;
  height: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.locize-tier-usage-metric .locize-tier-usage-metric-block {
  position: relative;
  display: inline-block;
  background-color: #e16d6d21;
  text-align: center;
  margin: 1px;
  font-size: 14px;
}


.locize-tier-usage-metric .locize-tier-usage-metric-block.locize-tier-usage-metric-block-meetslimit {
  background-color: rgba(110, 156, 110, 0.151);
}

.locize-tier-usage-metric .locize-tier-usage-metric-block.locize-tier-usage-metric-block-current {
  background-color: #2195f33e;
}

/* .locize-tier-usage-metric-block-unmeet {
  box-shadow: inset 0 0 15px 2px rgba(187, 54, 54, 0.207)
} */

.locize-tier-usage-metric-line {
  display: inline-block;
  width: 100%;
  height: 5px;
  margin: 20px 0;
  background-color: #e16d6d;
  text-align: center;
  margin-right: 2px;
  font-size: 14px;
}

.locize-tier-usage-metric-line.locize-tier-usage-metric-line-meetslimit {
  background-color: rgb(110, 156, 110);
}table.locize-project-growth {
  /* white-space: nowrap; */
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}

table.locize-project-growth td,
table.locize-project-growth th {
  /* padding: 0.5rem 1rem; */
}

table.locize-project-growth thead th {
  border-bottom: 1px solid var(--locize-middleGray);
  padding: 0 3px 10px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
  font-weight: 300;
}

table.locize-project-growth tfoot th {
  border-top: 1px solid var(--locize-middleGray);
  padding: 10px 3px 0;
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: white;
  font-weight: 300;
}

table.locize-project-growth td {
  background: #fff;
  padding: 4px 5px;
  text-align: center;
}

table.locize-project-growth tbody th,
table.locize-project-growth tbody td {
  text-align: left;
  position: relative;
  font-weight: 300;
  padding: 3px;
}

table.locize-project-growth tbody tr:first-child th,
table.locize-project-growth tbody tr:first-child td {
  padding-top: 10px
}

table.locize-project-growth tbody tr:last-child th,
table.locize-project-growth tbody tr:last-child td {
  padding-bottom: 10px
}


table.locize-project-growth thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 120px;
}

table.locize-project-growth tfoot th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 120px;
}


table.locize-project-growth tbody th {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
  width: 120px;
}

table.locize-project-growth tbody tr:hover th,
table.locize-project-growth tbody tr:hover td {
  background-color: rgba(118, 178, 224, 0.1);
}.locize-header-item {
  overflow: hidden;

  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
}

/* temporal fix until changed in cat-ui */
.cat-ui-col-right {
  z-index: 1001;
}::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #96afc3;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #ffffff;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-track:active {
  background: rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.rounded-shadow-parent {
  z-index: 1;
}
.rounded-shadow {
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.rounded-shadow:after {
  content: '';
  position: absolute;
  z-index: -1;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  bottom: 4px;
  left: 10%;
  right: 10%;
  width: 80%;
  height: 15%;
  border-radius: 100%;
}

.container-padding {
  padding: 15px;
}

body {
  color: var(--locize-textGray);
  margin: 0;
  padding: 0;

  font-family: var(--locize-font-family-readable);
  font-weight: 300;
  font-optical-sizing: auto;
}

strong {
  font-weight: 600;
}

a {
  opacity: 0.9;
  color: inherit;
}

a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.clickable:hover {
  cursor: pointer;
  opacity: 0.7;
}

ul.unstyled {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.unstyled li {
  margin: 0;
  padding: 0;
}

ul.alignRight li {
  text-align: right;
}

ul.padLi li {
  padding: 2px 2px 2px 0;
}

hr {
  border: none;
  border-top: 1px solid var(--locize-labelGray);
}

hr.primary {
  border: none;
  border-top: 1px solid var(--locize-primary);
}

/* color sets */
.fg-white {
  color: var(--locize-white);
}

.fg-success {
  color: var(--locize-green);
}

.fg-warning {
  color: var(--locize-brightOrange);
}

.fg-error {
  color: var(--locize-red);
}

.fg-primary {
  color: var(--locize-primary);
}

.fg-middleGray {
  color: var(--locize-middleGray);
}

/* form */
label {
  font-weight: 300;
  font-family: var(--locize-font-family-readable);
  color: var(--locize-labelGray);
  font-size: 14px;
  margin-bottom: 5px;
}

label.error {
  color: var(--locize-red);
}

input,
select {
  color: var(--locize-textGray);
  font-weight: 400;
  font-family: var(--locize-font-family-readable);
}

input::-moz-placeholder {
  color: var(--locize-placeholderGray);
  font-weight: 200;
  font-family: var(--locize-font-family-readable);
}

input::placeholder {
  color: var(--locize-placeholderGray);
  font-weight: 200;
  font-family: var(--locize-font-family-readable);
}

/* markdown */
span p:first-child {
  margin-top: 0;
}

span p:last-child {
  margin-bottom: 0;
}
.grayscale {
  filter: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;filter id='grayscale'&gt;&lt;feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

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

  50% {
    opacity: 0;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation: fadeIn 2s ease;
}

.loading-ellipsis:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis-animation steps(1, end) 2s infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  /* Enable this to see what is going on: */
  /* background-color: red; */
}

@keyframes ellipsis-animation {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  25% {
    clip-path: inset(0 66.6% 0 0);
  }

  50% {
    clip-path: inset(0 33.3% 0 0);
  }

  75% {
    clip-path: inset(0 0 0 0);
  }
}
.grecaptcha-badge {
  visibility: hidden;
}

.show-grecaptcha-badge .grecaptcha-badge {
  visibility: visible;
}

:root {
  /* --cat-ui-font-10px: 10px;
  --cat-ui-font-12px: 12px;
  --cat-ui-font-13px: 13px;
  --cat-ui-font-14px: 14px;
  --cat-ui-font-15px: 15px;
  --cat-ui-font-16px: 16px;

  --cat-ui-font-lineheight-10px: 12px;
  --cat-ui-font-lineheight-12px: 14px;
  --cat-ui-font-lineheight-13px: 15px;
  --cat-ui-font-lineheight-14px: 17px;
  --cat-ui-font-lineheight-15px: 18px;
  --cat-ui-font-lineheight-16px: 20px; */

  --locize-font-family-primary: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  --locize-font-family-readable: -apple-system, 'system-ui', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --locize-font-family-monospace: 'JetBrainsMono', monospace;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--locize-font-family-readable);
  font-weight: 300;
  color: var(--locize-darkGray);
  margin: 0;
  padding: 0;
  font-optical-sizing: auto;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

.use_highlight_font {
  font-family: -apple-system, 'system-ui', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}
ul.dropdown-menu {
  margin: 0 -10px;
  width: calc(100% + 20px) !important;
  padding: 0;
  list-style-type: none;
}

ul.dropdown-menu li {
  margin: 0;
  padding: 5px 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 15px;
  font-family: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-align: left;
  color: var(--locize-lightGray);
}

ul.dropdown-menu a {
  text-decoration: none;
}

ul.dropdown-menu li.active {
  background-color: #15419aad;
  color: var(--locize-middleGray);
  font-style: italic;
  border-radius: 15px;
}

ul.dropdown-menu li a:hover,
ul.dropdown-menu li:hover {
  background-color: #15419aad;
  color: var(--locize-middleGray);
  cursor: pointer;
  border-radius: 15px;
}
:root {
  --locize-white: #fff;

  --locize-primary: #1976d2;
  --locize-primaryDark: #15419a;
  --locize-primaryLight: #2196f3;
  --locize-primaryHover: #4b8dce;
  --locize-primaryNotification: #5c9bda;

  --locize-brightOrange: #ff8700;

  --locize-red: #d50000;
  --locize-blue: #0099cf;
  --locize-darkBlue: #002957;
  --locize-green: #54a229;

  --locize-textGray: #333;
  --locize-darkGray: #464646;
  --locize-middleGray: #b4b4b4;
  --locize-lightGray: #dedede;
  --locize-placeholderGray: #c9c9c9;
  --locize-labelGray: #979797;
  /* #666;  */
  --locize-backgroundGray: #ededed;

  /* locize refresh end 24 */
  --locize-cream-darkBlue: #6484c4;
  --locize-cream-lightBlue: #b4d9fd;
  --locize-cream-borderBlue: #b6d5f1;
  --locize-cream-bgBlue: #dceeff;
  --locize-cream-borderGray: #ddd;
  --locize-cream-borderDarkGray: #ddd;
  --locize-cream-bgGray: #f5f5f5;
  --locize-cream-inputLine: #afb3b6;

  --locize-locizeOrange: #df7800;
  --locize-locizeFuchsia: #c90a79;
  --locize-locizeBrightBlue: #0099cf;
  --locize-locizeRed: #d50000;
  --locize-locizeGreen: #54a229;

  --locize-locizeDarkRed: #e35102;
  --locize-locizeLightRed: #ff495c;
  --locize-locizeOcher: #b0851e;
  --locize-locizeYellow: #ffd923;
  --locize-locizePurple: #762057;
  --locize-locizeMagenta: #e13eaf;
  --locize-locizePetrol: #006241;
  --locize-locizeTurquoise: #00c18b;
  --locize-locizeBlue: #1d4f90;
  --locize-locizeLightBlue: #129be0;
  --locize-locizeDarkBrown: #512c1d;
  --locize-locizeLightBrown: #bc6124;

  --locize-tag-0: #eb5a46;
  --locize-tag-1: #ffab4a;
  --locize-tag-2: #f2d600;
  --locize-tag-3: #77e262;
  --locize-tag-4: #61bd4f;
  --locize-tag-5: #519839;
  --locize-tag-6: #0672b1;
  --locize-tag-7: #00c2e0;
  --locize-tag-8: #c377e0;
  --locize-tag-9: #4d4d4d;

  --locize-tag-bg-0: #f5ada3;
  --locize-tag-bg-1: #ffd5a5;
  --locize-tag-bg-2: #f9eb80;
  --locize-tag-bg-3: #bbf1b1;
  --locize-tag-bg-4: #b0dea7;
  --locize-tag-bg-5: #a8cc9c;
  --locize-tag-bg-6: #80bcdf;
  --locize-tag-bg-7: #80e1f0;
  --locize-tag-bg-8: #e1bbf0;
  --locize-tag-bg-9: #a6a6a6;

  --locize-state-ordered: #e67a00;
  --locize-state-warning: #e67a00;
  --locize-state-error: #d50000;
  --locize-state-success: #54a229;
  --locize-state-fuzzy: #dea53b;
  --locize-state-untranslated: #ccc;
  /*#464646*/
  --locize-state-review: #0672b1;
}
.modallayout-container {
  position: relative;
  width: 100%;
  /*min-height: 100vh;*/

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.authlayout-container {
  background: var(--locize-primaryLight);
  background: linear-gradient(180deg,
      rgba(33, 150, 243, 0.8) 0%,
      rgba(33, 150, 243, 0.8) 59%,
      rgba(25, 118, 210, 0.8) 100%);
  position: relative;
  width: 100%;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.layout-container {
  background: var(--locize-primaryLight);
  background: linear-gradient(
    180deg,
    rgba(33, 150, 243, 1) 0%,
    rgba(33, 150, 243, 1) 59%,
    rgba(25, 118, 210, 1) 100%
  );
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.icon-base {
  font-size: 24px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.icon-clickable {
  cursor: pointer;
}

.tag {
  display: inline-block;
  background: var(--locize-primary);
  color: var(--locize-white);
  font-size: 14px;
  padding: 2px 10px;
  border-radius: 1em;
  text-transform: uppercase;
}

.tag-success {
  background: var(--locize-green);
}

.tag-warning {
  background: var(--locize-brightOrange);
}

.tag-error {
  background: var(--locize-red);
}

.tag-small {
  font-size: 8px;
  padding: 2px 5px 1px;
  text-overflow: ellipsis;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}

.tag-disabled {
  background: var(--locize-lightGray);
  color: var(--locize-middleGray);
}
/* holygrail layout + sticky footer: https://philipwalton.github.io/solved-by-flexbox/ */
html,
body,
#root {
  height: 100%;
}

.locize-layout {
  display: flex;
  height: 100%;
  flex-direction: row;
  background: var(--locize-primaryLight);
  background: linear-gradient(180deg,
      rgba(33, 150, 243, 0.8) 0%,
      rgba(33, 150, 243, 0.8) 59%,
      rgba(25, 118, 210, 0.8) 100%);
  position: relative;
  width: 100%;
  overflow: hidden;
}

.locize-layout.locize-layout-gray {
  background: var(--locize-backgroundGray);
  background: linear-gradient(180deg,
      rgba(234, 234, 234, 0.9) 0%,
      rgba(219, 219, 219, 0.9) 59%,
      rgba(199, 199, 199, 0.9) 100%);
}

.locize-layout-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 1000000;
  background: var(--locize-primaryLight);
}

.locize-layout-header.locize-layout-header-shadow {
  background: linear-gradient(180deg,
      rgba(33, 150, 243, 1) 0%,
      rgba(33, 150, 243, 1) 69%,
      rgba(25, 118, 210, 1) 100%);
}

.locize-layout-header,
.locize-layout-footer {
  flex: none;
}

.locize-layout-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  padding-top: 40px;
}

.locize-layout-body-subheader:not(.locize-layout-body-tab) {
  padding-top: 90px;
}

.locize-layout-body-tab:not(.locize-layout-body-subheader) {
  padding-top: 95px;
}

.locize-layout-body-tab.locize-layout-body-subheader {
  padding-top: 135px;
}

.locize-layout-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100% - 10px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px 0 10px 0;
}

.locize-layout-content {
  flex: 1 0 auto;
  padding: 0 20px;
  width: calc(100% - 40px);
}

.locize-layout-content::after {
  content: '\00a0';
  /* &nbsp; */
  display: block;
  margin-top: '0';
  height: 0px;
  visibility: hidden;
}

.locize-layout-nav {
  order: -1;
  margin-left: -15em;
  position: absolute;
  width: 15em;
  top: 0;
  bottom: 0;
  transition: margin-left 0.5s;
}

.locize-layout-nav.open {
  margin-left: 0;
}

.locize-layout-nav,
.locize-layout-ads {
  flex: 0 0 15em;
  background: #ccc;
}

/* loader.fullpage if nested in defaultlayout */
.locize-layout-content .authlayout-container {
  background: transparent !important;
}

/* @media (min-width: 960px) {
  .locize-layout-nav {
    position: relative;
    margin-left: 0;
  }

  .locize-layout-header {
    display: none;
  }

  .locize-layout-body {
    padding-top: 0;
  }
} */

/* @media only screen and (min-width: 48em) {
  .col-left {
    padding-right: 0.5em;
  }
  .col-right {
    padding-right: 0.5em;
    padding-top: 0em;
  }
} */
.card {
  position: relative;
  /*background-color: var(--locize-white);*/

  /* background: rgb(255, 255, 255); */
  /* border: solid 1px var(--locize-primary); */
  border-radius: 15px;

  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.4));
}

.card-white {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.95));
}

.modallayout-container .card {
  background: var(--locize-white);
  backdrop-filter: none;
}

.locize-layout-gray .card {
  background: rgba(255, 255, 255, 0.65);

  /* border: solid 1px var(--locize-middleGray); */
}

.locize-layout-gray .card.card-primary {
  background: rgb(153 204 255);
}

.card.card-50gray {
  background: linear-gradient(90deg,
      rgb(242 242 242) 50%,
      rgba(255 255 255) 50%,
      rgb(255 255 255) 100%);
}

.card.card50line {
  background: linear-gradient(90deg,
      rgb(255 255 255) 50%,
      rgb(150 150 150) calc(50% + 1px),
      rgba(255 255 255) 50%,
      rgb(255 255 255) 100%);
}

.card-highlight {
  background: linear-gradient(165deg, rgba(255, 255, 255, 1) 0%, rgba(245, 245, 245, 1) 100%);
}

.card-primary {
  background: rgb(153 204 255);
}

.card-warning {
  background: rgb(251, 202, 147);
  background: linear-gradient(165deg, rgba(251, 202, 147, 1) 0%, rgba(218, 171, 117, 1) 100%);
}

.card-error {
  background: rgb(255, 162, 162);
  background: linear-gradient(165deg, rgba(255, 162, 162, 1) 0%, rgba(224, 133, 133, 1) 100%);
}

.card-shadow {
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 20px 5px rgba(0, 0, 0, 0.1);
}

/* 
.card-shadow-rounded {
  position: absolute;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  bottom: 4px;
  left: 10%;
  right: 10%;
  width: 80%;
  height: 15%;
  border-radius: 100%;
} */

.card-clickable:hover {
  cursor: pointer;
  /* background: linear-gradient(165deg, rgba(255, 255, 255, 1) 0%, rgba(210, 210, 210, 1) 100%); */
}

.card-shadow.card-clickable:hover {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* SECTION */

.card_section {
  background: var(--locize-cream-bgGray);
  padding: 10px;
  border-radius: 6px;
  margin-top: 20px;
}

.card_section.no_margin_top {
  margin-top: 0px;
}

.card_section.card_section_blue {
  background: var(--locize-cream-bgBlue);
}

.card_section.card_section_border {
  background: transparent;
  border: solid 1px var(--locize-cream-borderGray);
}

.card_section.card_section_blue.card_section_border {
  border: solid 1px var(--locize-cream-borderBlue);
}

.card_section.card_section_not_card {
  background: transparent;
  border-radius: 0;
  margin-left: -10px;
  margin-right: -10px;
  border-top: solid 1px var(--locize-cream-borderDarkGray);
}

.card_section.card_section_not_card:first-child {
  border-top: none;
  padding: 0 10px 10px;
}


.card_section_title {
  color: rgb(102, 102, 102);
  font-size: 22px;
  font-weight: 100;
  margin: 20px 0px 15px;
}

h6.card_section_title,
.card_section_title h6 {
  color: rgb(102, 102, 102);
  font-size: 16px;
  font-weight: 100;
  margin: 15px 0px 10px;
  font-style: italic;
}

.card_section_title.no_margin_top {
  margin-top: 0px;
}

.card_section_title.no_margin {
  margin: 0px;
}

.card_section_title.flex-center {
  display: flex;
  align-items: center;
}



.card_box {
  background: var(--locize-white);
  border-radius: 8px;
  padding: 15px;

  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 20px 5px rgba(0, 0, 0, 0.05);
}


.card_box.card_box_primary {
  background: #2196f3d4;
}

.card_box.card_box_fallback {
  background: #ffffff8f;
  color: var(--locize-middleGray);
  box-shadow: none;
}

.card_box.card_box_secondary {
  background: #ffffffb5;
}

.card_box.card_box_active {
  background: #2196f38a;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 20px 5px rgba(0, 0, 0, 0.1);
}

.card_box.card_box_clickable:hover {
  cursor: pointer;
  transform: translateY(-1px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 10px 3px rgba(0, 0, 0, 0.2);
}
.flex {
  display: flex;
  align-items: center;
}

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

.flex-col-rtl {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.flex-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.spaces.spaces-y-xl > *:not(hr) {
  margin-bottom: 50px;
}

.spaces.spaces-y-l > *:not(hr) {
  margin-bottom: 20px;
}

.spaces.spaces-y > *:not(hr) {
  margin-bottom: 15px;
}

.spaces.spaces-y-c > *:not(hr) {
  margin-bottom: 5px;
}

.spaces.spaces-y-uc > *:not(hr) {
  margin-bottom: 1px;
}

.spaces.spaces-y > *:not(hr):last-child,
.spaces.spaces-y-xl > *:not(hr):last-child,
.spaces.spaces-y-l > *:not(hr):last-child,
.spaces.spaces-y-c > *:not(hr):last-child,
.spaces.spaces-y-uc > *:not(hr):last-child {
  margin-bottom: 0;
}

.spaces.spaces-x-xl > *:not(hr) {
  margin-right: 50px;
}

.spaces.spaces-x-l > *:not(hr) {
  margin-right: 20px;
}

.spaces.spaces-x > *:not(hr) {
  margin-right: 15px;
}

.spaces.spaces-x-c > *:not(hr) {
  margin-right: 5px;
}

.spaces.spaces-x-uc > *:not(hr) {
  margin-right: 1px;
}

.spaces.spaces-x > *:not(hr):last-child,
.spaces.spaces-x-xl > *:not(hr):last-child,
.spaces.spaces-x-l > *:not(hr):last-child,
.spaces.spaces-x-c > *:not(hr):last-child,
.spaces.spaces-x-uc > *:not(hr):last-child {
  margin-right: 0;
}

.spaces.spaces-singlechild > *:not(hr):last-child {
  /* padding-bottom: 20px; */
  margin-bottom: 0;
}

/* http://flexboxgrid.com/ */

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 0rem;
  padding-left: 0rem;
}

.row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -0rem;
  margin-left: -0rem;
}

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

.col.reverse {
  flex-direction: column-reverse;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding-right: 0rem;
  padding-left: 0rem;
}

.col-xs {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

.col-xs-1 {
  flex-basis: 8.333%;
  max-width: 8.333%;
}

.col-xs-2 {
  flex-basis: 16.667%;
  max-width: 16.667%;
}

.col-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  flex-basis: 33.333%;
  max-width: 33.333%;
}

.col-xs-5 {
  flex-basis: 41.667%;
  max-width: 41.667%;
}

.col-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  flex-basis: 58.333%;
  max-width: 58.333%;
}

.col-xs-8 {
  flex-basis: 66.667%;
  max-width: 66.667%;
}

.col-xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  flex-basis: 83.333%;
  max-width: 83.333%;
}

.col-xs-11 {
  flex-basis: 91.667%;
  max-width: 91.667%;
}

.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.col-xs-offset-1 {
  margin-left: 8.333%;
}

.col-xs-offset-2 {
  margin-left: 16.667%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-4 {
  margin-left: 33.333%;
}

.col-xs-offset-5 {
  margin-left: 41.667%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-7 {
  margin-left: 58.333%;
}

.col-xs-offset-8 {
  margin-left: 66.667%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-10 {
  margin-left: 83.333%;
}

.col-xs-offset-11 {
  margin-left: 91.667%;
}

.start-xs {
  justify-content: flex-start;
  text-align: start;
}

.center-xs {
  justify-content: center;
  text-align: center;
}

.end-xs {
  justify-content: flex-end;
  text-align: end;
}

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

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

.bottom-xs {
  align-items: flex-end;
}

.around-xs {
  justify-content: space-around;
}

.between-xs {
  justify-content: space-between;
}

.first-xs {
  order: -1;
}

.last-xs {
  order: 1;
}

@media only screen and (min-width: 48em) {
  .container {
    width: 46rem;
  }

  .col-sm,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: 0rem;
    padding-left: 0rem;
  }

  .col-sm {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-sm-1 {
    flex-basis: 8.333%;
    max-width: 8.333%;
  }

  .col-sm-2 {
    flex-basis: 16.667%;
    max-width: 16.667%;
  }

  .col-sm-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .col-sm-5 {
    flex-basis: 41.667%;
    max-width: 41.667%;
  }

  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex-basis: 58.333%;
    max-width: 58.333%;
  }

  .col-sm-8 {
    flex-basis: 66.667%;
    max-width: 66.667%;
  }

  .col-sm-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex-basis: 83.333%;
    max-width: 83.333%;
  }

  .col-sm-11 {
    flex-basis: 91.667%;
    max-width: 91.667%;
  }

  .col-sm-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-sm-offset-1 {
    margin-left: 8.333%;
  }

  .col-sm-offset-2 {
    margin-left: 16.667%;
  }

  .col-sm-offset-3 {
    margin-left: 25%;
  }

  .col-sm-offset-4 {
    margin-left: 33.333%;
  }

  .col-sm-offset-5 {
    margin-left: 41.667%;
  }

  .col-sm-offset-6 {
    margin-left: 50%;
  }

  .col-sm-offset-7 {
    margin-left: 58.333%;
  }

  .col-sm-offset-8 {
    margin-left: 66.667%;
  }

  .col-sm-offset-9 {
    margin-left: 75%;
  }

  .col-sm-offset-10 {
    margin-left: 83.333%;
  }

  .col-sm-offset-11 {
    margin-left: 91.667%;
  }

  .start-sm {
    justify-content: flex-start;
    text-align: start;
  }

  .center-sm {
    justify-content: center;
    text-align: center;
  }

  .end-sm {
    justify-content: flex-end;
    text-align: end;
  }

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

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

  .bottom-sm {
    align-items: flex-end;
  }

  .around-sm {
    justify-content: space-around;
  }

  .between-sm {
    justify-content: space-between;
  }

  .first-sm {
    order: -1;
  }

  .last-sm {
    order: 1;
  }
}

@media only screen and (min-width: 62em) {
  .container {
    width: 61rem;
  }

  .col-md,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: 0rem;
    padding-left: 0rem;
  }

  .col-md {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-md-1 {
    flex-basis: 8.333%;
    max-width: 8.333%;
  }

  .col-md-2 {
    flex-basis: 16.667%;
    max-width: 16.667%;
  }

  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .col-md-5 {
    flex-basis: 41.667%;
    max-width: 41.667%;
  }

  .col-md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex-basis: 58.333%;
    max-width: 58.333%;
  }

  .col-md-8 {
    flex-basis: 66.667%;
    max-width: 66.667%;
  }

  .col-md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex-basis: 83.333%;
    max-width: 83.333%;
  }

  .col-md-11 {
    flex-basis: 91.667%;
    max-width: 91.667%;
  }

  .col-md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-md-offset-1 {
    margin-left: 8.333%;
  }

  .col-md-offset-2 {
    margin-left: 16.667%;
  }

  .col-md-offset-3 {
    margin-left: 25%;
  }

  .col-md-offset-4 {
    margin-left: 33.333%;
  }

  .col-md-offset-5 {
    margin-left: 41.667%;
  }

  .col-md-offset-6 {
    margin-left: 50%;
  }

  .col-md-offset-7 {
    margin-left: 58.333%;
  }

  .col-md-offset-8 {
    margin-left: 66.667%;
  }

  .col-md-offset-9 {
    margin-left: 75%;
  }

  .col-md-offset-10 {
    margin-left: 83.333%;
  }

  .col-md-offset-11 {
    margin-left: 91.667%;
  }

  .start-md {
    justify-content: flex-start;
    text-align: start;
  }

  .center-md {
    justify-content: center;
    text-align: center;
  }

  .end-md {
    justify-content: flex-end;
    text-align: end;
  }

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

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

  .bottom-md {
    align-items: flex-end;
  }

  .around-md {
    justify-content: space-around;
  }

  .between-md {
    justify-content: space-between;
  }

  .first-md {
    order: -1;
  }

  .last-md {
    order: 1;
  }
}

@media only screen and (min-width: 75em) {
  .container {
    width: 71rem;
  }

  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: 0rem;
    padding-left: 0rem;
  }

  .col-lg {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-lg-1 {
    flex-basis: 8.333%;
    max-width: 8.333%;
  }

  .col-lg-2 {
    flex-basis: 16.667%;
    max-width: 16.667%;
  }

  .col-lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .col-lg-5 {
    flex-basis: 41.667%;
    max-width: 41.667%;
  }

  .col-lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex-basis: 58.333%;
    max-width: 58.333%;
  }

  .col-lg-8 {
    flex-basis: 66.667%;
    max-width: 66.667%;
  }

  .col-lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex-basis: 83.333%;
    max-width: 83.333%;
  }

  .col-lg-11 {
    flex-basis: 91.667%;
    max-width: 91.667%;
  }

  .col-lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-lg-offset-1 {
    margin-left: 8.333%;
  }

  .col-lg-offset-2 {
    margin-left: 16.667%;
  }

  .col-lg-offset-3 {
    margin-left: 25%;
  }

  .col-lg-offset-4 {
    margin-left: 33.333%;
  }

  .col-lg-offset-5 {
    margin-left: 41.667%;
  }

  .col-lg-offset-6 {
    margin-left: 50%;
  }

  .col-lg-offset-7 {
    margin-left: 58.333%;
  }

  .col-lg-offset-8 {
    margin-left: 66.667%;
  }

  .col-lg-offset-9 {
    margin-left: 75%;
  }

  .col-lg-offset-10 {
    margin-left: 83.333%;
  }

  .col-lg-offset-11 {
    margin-left: 91.667%;
  }

  .start-lg {
    justify-content: flex-start;
    text-align: start;
  }

  .center-lg {
    justify-content: center;
    text-align: center;
  }

  .end-lg {
    justify-content: flex-end;
    text-align: end;
  }

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

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

  .bottom-lg {
    align-items: flex-end;
  }

  .around-lg {
    justify-content: space-around;
  }

  .between-lg {
    justify-content: space-between;
  }

  .first-lg {
    order: -1;
  }

  .last-lg {
    order: 1;
  }
}

.dropdown-wrapper {
  position: relative;
  /*height: 50px;*/
  align-items: center;
  display: inline-flex;
  z-index: 900000;
}

.dropdown-icon-open {
  animation: dropdown-icon-spin 0.25s ease-in;
}

@keyframes dropdown-icon-spin {
  from {
    transform: rotate(45deg);
  }

  to {
    transform: rotate(180deg);
  }
}

/* Panel */
.dropdown-panel-wrapper {
  position: absolute;
  z-index: 22;
}

.dropdown-panel-wrapper-closed * {
  pointer-events: none;
}

.dropdown-panel {
  position: absolute;
  background-color: #1976d2c4;
  z-index: 1;
  top: 10px;
  right: 10px;
  height: 30px;
  overflow: hidden;
  opacity: 0;
  backdrop-filter: blur(4px);
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.26);
  /* transition: background-color 0.1s, width 0.2s, height 0.2s; */
}

.dropdown-panel-buttongroup {
  backdrop-filter: unset;
  background-color: transparent;
  box-shadow: none;
}

.dropdown-panel-right {
  left: 0;
  right: initial;
}

.dropdown-panel>div {
  margin: 10px;
  /* width: 100%; */
  padding: 10px;
  display: block;
}

.dropdown-panel>div>* {
  width: 100%;
}

.dropdown-panel-buttongroup>div {
  margin: 0;
}

.dropdown-panel-open {
  /* width: calc(100% - 15px); */
  height: auto;
  top: 20px;
  opacity: 1;
  overflow-y: auto;
}

.dropdown-panel-tiny.dropdown-panel-open {
  top: 12px;
}

.dropdown-panel-open-downleft {
  right: calc(100% - 30px);
  animation: dropdown-panel-show-left 0.25s ease-in;
}

.dropdown-panel-tiny.dropdown-panel-open-downleft {
  right: calc(100% - 23px);
}

.dropdown-panel-open-downright {
  animation: dropdown-panel-show-right 0.25s ease-in;
}

.dropdown-panel-closing-downleft {
  animation: dropdown-panel-hide-left 0.3s ease-in reverse;
}

.dropdown-panel-closing-downright {
  animation: dropdown-panel-hide-right 0.3s ease-in reverse;
}

.dropdown-panel-open>div {
  opacity: 1;
  animation: dropdown-panel-inner-show 0.25s ease-in;
}

.dropdown-panel-closing>div {
  opacity: 0;
  animation: dropdown-panel-inner-hide 0.3s ease-in reverse;
}

/* start modern liquid dropdown */
.dropdown-wrapper-liquid .dropdown-panel.dropdown-panel-buttongroup.dropdown-panel-open {
  background-color: #ffffff7d;
  /* background-color: #1b71da7d; */
  border-radius: 15px;
  backdrop-filter: blur(5px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 10px 3px rgba(0, 0, 0, 0.2);
}

.dropdown-wrapper-liquid .dropdown-panel.dropdown-panel-tiny.dropdown-panel-buttongroup.dropdown-panel-open-downleft {
  right: calc(100% - 21px)
}

.dropdown-wrapper-liquid .dropdown-panel.dropdown-panel-buttongroup.dropdown-panel-open ul {
  /* width: 100%; */
}

.dropdown-wrapper-liquid .dropdown-panel.dropdown-panel-buttongroup.dropdown-panel-open li {
  /* width: 100%; */
  padding: 4px 0;
}

.dropdown-wrapper-liquid.dropdown-wrapper .btn.btn-active.icon-btn:not(.btn-transparent) {
  background-color: #ffffff7d;
  color: var(--locize-primaryLight);
  /* background-color: #1b71da7d; */
  backdrop-filter: blur(5px);
}

.dropdown-wrapper-liquid .dropdown-panel.dropdown-panel-buttongroup.dropdown-panel-open .btn:not(.btn-icon-only) {
  display: flex;
  width: 100%;
  white-space: nowrap;

  background: linear-gradient(to right, #ffffff45, #fefefe52);
  color: var(--locize-primaryLight);

  /* background: linear-gradient(to right, #00000008, #ffffff57);
  color: #ffffffa8; */

  backdrop-filter: blur(15px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 5px 3px rgba(0, 0, 0, 0.05);
  justify-content: flex-start;
  align-items: center;
  font-weight: 400;
  font-family: var(--locize-font-family-readable);
}

.dropdown-wrapper-liquid .dropdown-panel.dropdown-panel-buttongroup.dropdown-panel-open .btn:not(.btn-icon-only).btn:not(:disabled):hover {
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4),
    inset -1px -1px 1px rgba(61, 67, 69, 0.4),
    0 3px 5px 3px rgba(0, 0, 0, 0.08);
}

.dropdown-wrapper-liquid .dropdown-panel.dropdown-panel-buttongroup.dropdown-panel-open .btn:not(.btn-icon-only):disabled {
  box-shadow: none;
  color: var(--locize-lightGray);
}

/* end modern liquid dropdown */

@keyframes dropdown-panel-show-left {
  0% {
    top: -10px;
    right: calc(100% - 30px);
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
    overflow-y: hidden;
  }

  50% {
    width: 30px;
    height: 30px;
    top: 40px;
    right: calc(100% - 40px);
    opacity: 0.8;
    border-radius: 15px;
    overflow-y: hidden;
  }

  75% {
    width: 100px;
    height: 100px;
    top: 30px;
    right: calc(100% - 35px);
    opacity: 0.8;
    overflow-y: hidden;
  }

  100% {
    /* width: calc(100% - 20px); */
    height: auto;
    right: calc(100% - 30px);
    top: 20px;
    opacity: 1;
    overflow-y: auto;
  }
}

@keyframes dropdown-panel-hide-left {
  0% {
    top: -10px;
    right: calc(100% - 30px);
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
    overflow-y: hidden;
  }

  50% {
    width: 30px;
    height: 30px;
    top: 40px;
    right: calc(100% - 40px);
    opacity: 0.8;
    border-radius: 15px;
    overflow-y: hidden;
  }

  75% {
    width: 100px;
    height: 100px;
    top: 30px;
    right: calc(100% - 35px);
    opacity: 0.8;
    overflow-y: hidden;
  }

  100% {
    width: calc(100% - 20px);
    height: auto;
    right: calc(100% - 30px);
    top: 20px;
    opacity: 1;
    overflow-y: auto;
  }
}

@keyframes dropdown-panel-show-right {
  0% {
    top: -10px;
    left: 0px;
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
    overflow-y: hidden;
  }

  50% {
    width: 30px;
    height: 40px;
    top: 40px;
    left: -10px;
    opacity: 0.8;
    border-radius: 15px;
    overflow-y: hidden;
  }

  75% {
    width: 100px;
    height: 100px;
    top: 30px;
    left: -5px;
    opacity: 0.8;
    overflow-y: hidden;
  }

  100% {
    width: calc(100% - 20px);
    height: auto;
    left: 0px;
    top: 20px;
    opacity: 1;
    overflow-y: auto;
  }
}

@keyframes dropdown-panel-hide-right {
  0% {
    top: -10px;
    left: 0px;
    height: 30px;
    width: 30px;
    opacity: 0;
    border-radius: 15px;
    overflow-y: hidden;
  }

  50% {
    width: 30px;
    height: 40px;
    top: 40px;
    left: -10px;
    opacity: 0.8;
    border-radius: 15px;
    overflow-y: hidden;
  }

  75% {
    width: 100px;
    height: 100px;
    top: 30px;
    left: -5px;
    opacity: 0.8;
    overflow-y: hidden;
  }

  100% {
    width: calc(100% - 20px);
    height: auto;
    left: 0px;
    top: 20px;
    opacity: 1;
    overflow-y: auto;
  }
}

@keyframes dropdown-panel-inner-show {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dropdown-panel-inner-hide {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}
.hint {
  display: inline-block;
  position: relative;
  font-size: 14px;
  margin-top: 5px;
  color: var(--locize-middleGray);
}
.hint-primary {
  color: var(--locize-primaryLight);
}
.hint-success {
  color: var(--locize-green);
}
.hint-warning {
  color: var(--locize-brightOrange);
}
.hint-error {
  color: var(--locize-red);
}

.spaces.spaces-y-l > .hint {
  top: -20px;
}

.spaces.spaces-y > .hint {
  top: -15px;
}

.spaces.spaces-y-c > .hint {
  top: -5px;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-text {
  color: var(--locize-textGray);
  font-weight: 300;
  font-size: 16px;
  text-align: right;
  display: flex;
  align-items: center;
}
.info-text-warning {
  color: var(--locize-brightOrange);
}

.info-label {
  /*text-transform: uppercase;*/
  color: var(--locize-labelGray);
  margin-right: 5px;
  /* font-style: italic; */
  font-weight: 300;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.locize-markdown li {
  margin-bottom: 5px
}
.__react_component_tooltip {
  z-index: 9999999 !important;
}

.__react_component_tooltip.show.locize-tooltip {
  padding: 12px 21px;
}
.btn {
  font-family: var(--locize-font-family-readable);
  position: relative;
  display: inline-block;
  padding: 0 15px;
  font-size: 15px;
  border: none;
  box-sizing: border-box;
  min-height: 30px;
  background-color: var(--locize-primaryLight);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border-radius: 15px;
  cursor: pointer;
  z-index: 2;
  color: var(--locize-white);
  transition: background-color ease-in 0.3s;
  text-transform: uppercase;
  font-weight: 300;
  backdrop-filter: blur(4px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 0 5px 3px rgba(0, 0, 0, 0.05);
}



.btn * {
  font-family: var(--locize-font-family-readable);
}

.btn:hover {
  background-color: var(--locize-primaryHover);
  transform: translateY(-1px);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.3),
    0 3px 5px 3px rgba(0, 0, 0, 0.08);
}

.btn-active {
  background-color: var(--locize-primaryDark);
}

.btn.btn-left-icon {
  padding: 0 15px 0 30px;
}

.btn.btn-icon-only {
  padding: 0 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.btn.btn-left-icon i {
  position: absolute;
  top: 7px;
  left: 7px;
  font-size: 16px;
}

.btn.btn-icon-only.btn-left-icon i {
  padding: 0;
  top: initial;
  left: initial;
}

.btn.btn-icon-only.btn-tiny {
  padding: 0 10px;
  min-height: 21px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.btn.btn-icon-only.btn-left-icon.btn-tiny i {
  font-size: 12px;
}

.btn.btn-block {
  width: 100%;
}

.btn.btn-secondary {
  background-color: var(--locize-white);
  color: var(--locize-textGray);

  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.1),
    0 0 5px 3px rgba(0, 0, 0, 0.05);
}

.btn.btn.btn-secondary:not(:disabled):hover {
  background-color: var(--locize-primaryHover);
  transform: translateY(-1px);
  color: var(--locize-white) !important;
}

.btn.btn-semitransparent {
  background-color: #ffffff7d;
  color: var(--locize-primaryLight);
  /* background-color: #1b71da7d; */
  backdrop-filter: blur(5px);
  /* background-color: rgba(25, 118, 210, 0.4);
  color: var(--locize-primary); */
}

.btn.btn-semitransparent:not(:disabled):hover {
  background-color: rgba(25, 118, 210, 0.6);
  color: var(--locize-white) !important;
}

.btn.btn-transparent {
  box-shadow: none;
  backdrop-filter: unset;
  background-color: transparent;
  color: var(--locize-primary);
}

.btn.btn-transparent:hover {
  background-color: rgba(25, 118, 210, 0.6);
  color: var(--locize-white) !important;
}

.btn.btn-tiny {
  padding: 0 10px;
  min-height: 20px;
  font-size: 14px;
}

.btn.btn-left-icon.btn-tiny:not(.btn-icon-only) {
  padding: 4px 10px 4px 22px;
  min-height: 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.btn.btn-left-icon.btn-tiny:not(.btn-icon-only) i {
  position: absolute;
  top: 4px;
  left: 4px;
}

.btn.btn-success {
  color: var(--locize-white);
  background-color: var(--locize-green);
}

.btn.btn-error {
  color: var(--locize-white);
  background-color: var(--locize-red);
}

.btn.btn-dropdown {
  position: relative;
  padding-right: 40px;
}

.btn.btn-dropdown::before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga' 1;

  content: 'expand_more';
  position: absolute;
  top: 3px;
  right: 5px;
  color: var(--locize-textGray);
  z-index: 100;
  pointer-events: none;
}

.btn.btn-dropdown.btn-dropdown-opne::before {
  content: 'expand_less';
}

.btn.btn-select {
  padding: 0 10px;
  min-height: 20px;
  font-size: 12px;
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
}

.btn.btn-select option {
  text-align: left;
}

.btn:disabled {
  color: var(--locize-lightGray);
  cursor: not-allowed;
  box-shadow: none;
}

.btn:not(.btn-transparent):disabled {
  transform: none;
  background-color: #4f4f4f12;
  color: #c6c6c6;
  box-shadow: none;
  /* background-color: var(--locize-backgroundGray); */
}
.notification {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--locize-primaryNotification);
  background-color: #dce8f5;
  color: var(--locize-textGray);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 5px;
}

.notification i.material-icons.icon-base {
  margin-top: 2; 
  flex-shrink: 0;
  color: var(--locize-primaryNotification);
}

.notification h1,
.notification h2,
.notification h3,
.notification h4,
.notification h5,
.notification h6 {
  color: var(--locize-textGray);
}

.notification-success {
  background-color: #e6f5de;
  border: 1px solid var(--locize-green);
}
.notification.notification-success i.material-icons.icon-base {
  color: var(--locize-green);
}

.notification-warning {
  background-color: #fff8e1;
  border: 1px solid  #ffe082;
}

.notification.notification-warning i.material-icons.icon-base {
  color: #ffe082;
}

.notification-error {
  background-color: #fceaea;
  border: 1px solid var(--locize-red);
}
.notification.notification-error i.material-icons.icon-base {
  color: var(--locize-red);
}
.tab {
  background-color: #1976d2c4;
  display: inline-block;
  height: 50px;
  padding: 0 10px;
  position: relative;
  margin-right: 2px;
}

.tab:last-child,
.tab.tab-no-margin-right {
  margin-right: 0;
}

.tab.tab-margin-right {
  margin-right: 1;
}

.tab.tab-onmain {
  height: 40px;
}

.tab.tab-clickable:hover {
  background-color: var(--locize-primary);
  cursor: pointer;
}

.tab.tab-active,
.tab.tab-active:hover {
  background-color: var(--locize-primaryDark);
  cursor: initial;
}

.tab.tab-gray {
  background-color: #c5c5c578;
  color: #8a8a8a;
}

.tab.tab-gray.tab-clickable:hover {
  background-color: var(--locize-primaryLight);
  cursor: pointer;
}

.tab.tab-gray.tab-active,
.tab.tab-gray.tab-active:hover {
  color: var(--locize-textGray);
  /* background-color: #e6e6e6; */
  background-color: transparent;
  cursor: initial;
}

.tab.tab-oncard {
  height: 40px;
  background-color: var(--locize-cream-lightBlue);
  color: #fff;
  text-transform: uppercase;
}

.tab.tab-oncard.tab-clickable:hover {
  background-color: var(--locize-cream-darkBlue);
  cursor: pointer;
}

.tab.tab-oncard.tab-active,
.tab.tab-active:hover {
  background-color: var(--locize-cream-darkBlue);
  cursor: initial;
}

.tab.tab-oncard.tab-disabled {
  color: #888888;
  background-color: #ccc;
  cursor: not-allowed !important;
  opacity: 0.5;
}

.tab.tab-disabled {
  color: #ccc;
  cursor: not-allowed !important;
  opacity: 0.5;
}
.col-right,
.col-middle {
  padding-top: 20px;
}

@media only screen and (min-width: 48em) {
  .col-left {
    padding-right: 10px !important;
  }
  .col-right {
    padding-left: 10px !important;
    padding-top: 0;
  }
  .col-middle {
    padding: 0 10px !important;
  }
}

.btn.icon-btn {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  backdrop-filter: blur(4px);
}

.btn.icon-btn:not(:disabled):hover {
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.08),
    0 0 5px 3px rgba(0, 0, 0, 0.05);
}

.btn.icon-btn.icon-btn-secondary {
  background-color: var(--locize-white);
  color: var(--locize-textGray);

  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.1),
    0 0 5px 3px rgba(0, 0, 0, 0.05);
}

.btn.icon-btn.icon-btn-moreshadow {
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    inset -1px -1px 1px rgba(61, 67, 69, 0.1),
    0 0 5px 3px rgba(0, 0, 0, 0.3);
}

.btn.icon-btn.icon-btn-secondary:not(:disabled):hover {
  background-color: var(--locize-primaryHover);
  transform: translateY(-1px);
  color: var(--locize-white) !important;
}

.btn.icon-btn.btn-transparent {
  backdrop-filter: unset;
}

.btn.icon-btn:disabled {
  box-shadow: none;
}

.icon-btn-opacity {
  opacity: 0.2;
}

.icon-btn-opacity:hover {
  opacity: 1;
}

.btn.icon-btn.btn-tiny {
  width: 25px;
  height: 25px;
}

.btn.icon-btn.btn-tiny i {
  font-size: 15px;
}
.list {
  position: relative;
  border-top: 1px solid var(--locize-lightGray);
  border-bottom: 1px solid var(--locize-lightGray);
}

.listitem {
  position: relative;
  padding: 0 10px;
  border-bottom: solid 1px var(--locize-lightGray);
  background-color: transparent;
}

.listitem:before {
  content: '';
  height: 100%;
  width: 2px;
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
}

.listitem:last-child {
  border-bottom: none;
}

.listitem.error:before {
  background-color: var(--locize-red);
}

.listitem.success:before {
  background-color: var(--locize-green);
}

.listitem.warning:before {
  background-color: var(--locize-brightOrange);
}

.listitem.info:before {
  background-color: var(--locize-primaryLight);
}

.list .listitem .itemcell {
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.list .listitem .itemcell.itemcell-right {
  align-items: flex-end;
}

.list .listitem .itemcell.itemcell-center {
  align-items: center;
}

body.react-confirm-alert-body-element {
  overflow: hidden;
}

.react-confirm-alert {
  max-height: 90%;
  overflow-y: auto;
}

.react-confirm-alert-blur {
  filter: url(#gaussian-blur);
  filter: blur(1px);
}

.react-confirm-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: 'rgba(254, 254, 254, 0.9)';
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  opacity: 0;
  animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
}

/* .react-confirm-alert-body {
  font-family: Arial, Helvetica, sans-serif;
  width: 400px;
  padding: 30px;
  text-align: left;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
  color: #666;
} */

.react-confirm-alert-svg {
  position: absolute;
  top: 0;
  left: 0;
}

/* .react-confirm-alert-body > h1 {
  margin-top: 0;
}

.react-confirm-alert-body > h3 {
  margin: 0;
  font-size: 16px;
} */

.react-confirm-alert-button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* .react-confirm-alert-button-group > button {
  outline: none;
  background: #333;
  border: none;
  display: inline-block;
  padding: 6px 18px;
  color: #eee;
  margin-right: 10px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
} */

@keyframes react-confirm-alert-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (min-height: 575px) {
  .react-confirm-alert {
    overflow-y: visible;
  }
}

.progress-chart canvas {
  border-radius: 100%;
}

.avatar-wrapper {
  display: inline-flex;
  justify-content: center;
  text-align: center;
  min-width: 30px;
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  line-height: 30px;
  color: var(--locize-white);
  font-size: 9px;
}

.avatar-image {
  position: absolute;
  opacity: 1;
  display: inline-block;
  margin: 0 auto;
  height: 100%;
  width: auto;
  transition: opacity 1s;
}

.avatar-icon {
  align-self: center;
}

.avatar-icon path:not([fill='none']),
.avatar-icon circle:not([fill='none']) {
  fill: var(--locize-white);
}

.pagination-container {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0
}

.pagination-container .pagination-item {
  padding: 0 12px;
  height: 32px;
  text-align: center;
  margin: auto 4px;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  box-sizing: border-box;
  align-items: center;
  letter-spacing: 0.01071em;
  border-radius: 16px;
  line-height: 1.43;
  font-size: 13px;
  min-width: 32px;
}

.pagination-container .pagination-item .dots:hover {
  background-color: transparent;
  cursor: default;
}

.pagination-container .pagination-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.pagination-container .pagination-item.selected {
  background-color: rgba(0, 0, 0, 0.08);
}

.pagination-container .pagination-item .arrow::before {
  position: relative;
  /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
  content: '';
  /* By using an em scale, the arrows will size with the font */
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.12em solid rgba(0, 0, 0, 0.87);
  border-top: 0.12em solid rgba(0, 0, 0, 0.87);
}

.pagination-container .pagination-item .arrow.left {
  transform: rotate(-135deg) translate(-50%);
  margin-bottom: 3px;
}

.pagination-container .pagination-item .arrow.right {
  transform: rotate(45deg);
  margin-bottom: 3px;
}

.pagination-container .pagination-item.disabled {
  pointer-events: none;
}

.pagination-container .pagination-item.disabled .arrow::before {
  border-right: 0.12em solid rgba(0, 0, 0, 0.43);
  border-top: 0.12em solid rgba(0, 0, 0, 0.43);
}

.pagination-container .pagination-item.disabled:hover {
  background-color: transparent;
  cursor: default;
}
.locize-rect {
  position: absolute;
  border: 2px dashed var(--locize-primary);
}
.locize-rect.single-resizer {
  cursor: move;
}

.locize-rect .resizable-handler {
  position: absolute;
  width: 14px;
  height: 14px;
  cursor: pointer;
  z-index: 1;
}

.locize-rect .resizable-handler.tl,
.locize-rect .resizable-handler.t,
.locize-rect .resizable-handler.tr {
  top: -7px;
}

.locize-rect .resizable-handler.tl,
.locize-rect .resizable-handler.l,
.locize-rect .resizable-handler.bl {
  left: -7px;
}

.locize-rect .resizable-handler.bl,
.locize-rect .resizable-handler.b,
.locize-rect .resizable-handler.br {
  bottom: -7px;
}

.locize-rect .resizable-handler.br,
.locize-rect .resizable-handler.r,
.locize-rect .resizable-handler.tr {
  right: -7px;
}

.locize-rect .resizable-handler.l,
.locize-rect .resizable-handler.r {
  margin-top: -7px;
}

.locize-rect .resizable-handler.t,
.locize-rect .resizable-handler.b {
  margin-left: -7px;
}

.square {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--locize-primaryLight);
  border: 1px solid var(--locize-primary);
  border-radius: 1px;
}

.t,
.tl,
.tr {
  top: -3px;
}

.b,
.bl,
.br {
  bottom: -3px;
}

.r,
.tr,
.br {
  right: -3px;
}

.tl,
.l,
.bl {
  left: -3px;
}

.l,
.r {
  top: 50%;
  margin-top: -3px;
}

.t,
.b {
  left: 50%;
  margin-left: -3px;
}

.locize-rect .rotate {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.progress-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 5px;
  margin: 0 5px 5px 0;
  width: 70px;
  height: 65px;
  overflow: hidden;
  color: var(--locize-textGray);
}

.progress-stat-inline {
  margin: 0;
  padding: 0;
  width: auto;
  height: initial;
}

.progress-stat-white {
  color: var(--locize-white);
}

.progress-stat .progress-stat-progress-titlebox {
  justify-self: start;
  color: var(--locize-textGray);
  font-size: 12px;
  margin-bottom: 2px;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  height: 18px;
}

.progress-stat .progress-stat-progress-titlebox h6 {
  color: var(--locize-textGray);
  font-size: 12px;
  text-align: center;
  word-break: break-all;
}

.progress-stat.progress-stat-clickable .progress-stat-progress-titlebox:hover h6 {
  color: var(--locize-darkGray);
  font-weight: 600;
}

.progress-stat-progress-container {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
}

.progress-stat-progress {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.progress-stat-progress-label {
  position: absolute;
  font-weight: 300;
}
.progress-stat-progress-label small {
  font-size: 8px;
}

.progress-stat.progress-stat-clickable:hover {
  background: rgba(33, 150, 243, 0.3);
  background: linear-gradient(165deg, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0.1) 100%);
  border-radius: 15px;
}

.progress-stat.progress-stat-clickable:hover h6 {
  color: var(--locize-darkGray);
  font-weight: 600;
}

.progress-stat.progress-stat-clickable:hover .progress-stat-progress-label {
  color: var(--locize-darkGray);
  font-weight: 600;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  height: 40px;
}

.header-container h1 {
  font-family: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--locize-white);
  margin: 0;
  padding: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
}

.header-container h1 span,
.header-container h1 a {
  margin-right: 3px;
  font-size: 14px;
  font-family: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
}

.header-container h1 a {
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
}

.header-actions > * {
  margin-left: 2px;
}

.header-container ul.menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.header-container ul.menu li {
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 14px;
  font-family: 'Roboto Condensed', Roboto, Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.header-container ul.menu li * {
  display: block;
  padding: 3px 0;
}

.header-container ul.menu li.active,
.header-container ul.menu li.active * {
  color: var(--locize-lightGray);
  font-style: italic;
}

.header-container ul.menu li a:hover {
  color: var(--locize-middleGray);
}

.input-field {
  width: calc(100% - 38px);
  font-size: 16px;
  padding: 6px 30px 7px 8px;
  background-color: rgba(255, 255, 255, 0.5) !important;

  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  backdrop-filter: blur(4px);

  border-radius: 3px;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1)rgba(61, 67, 69, 0.3),
    inset -1px -1px 1px rgba(255, 255, 255, 0.1),
    0 0 5px 3px rgba(255, 255, 255, 0.1);
}

.input-field-textarea {
  padding: 5px;
  width: calc(100% - 10px);
}

.input-field-disabled {
  color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
}

.input-container.error .input-field {
  background-color: #ff000005 !important;
}
.select {
  position: relative;
  width: 100%;
  font-size: 16px;
  padding: 6px 2px 7px 8px;
  background-color: rgba(255, 255, 255, 0.5);

  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;

  backdrop-filter: blur(4px);
  border-radius: 3px;

  cursor: pointer;
  z-index: 2;
}

.select-disabled {
  color: var(--locize-middleGray);
  cursor: not-allowed;
}

.react-select__placeholder {
  font-size: 16px;
  color: var(--locize-placeholderGray);
  font-weight: 200;
  font-family: -apple-system, 'system-ui', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.react-select__menu {
  z-index: 10 !important;
}


/* customized like
   https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
*/
select.select.select-custom,
select.select.select-custom::picker(select) {
  -webkit-appearance: base-select;
     -moz-appearance: base-select;
          appearance: base-select;
  border: none;
  opacity: 0;
  transition: all 0.4s allow-discrete;
  top: calc(anchor(bottom) + 1px);
  left: anchor(0%);
}

select.select.select-custom::picker-icon {
  display: none;
}

select.select.select-custom,
select.select.select-custom::picker(select):popover-open {
  opacity: 1;
}

@starting-style {

  select.select.select-custom,
  select.select.select-custom::picker(select):popover-open {
    opacity: 0;
  }

}

select.select.select-custom option {
  display: flex;
  justify-content: flex-start;
  gap: 20px;

  border: 1px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
  transition: 0.4s;
}

select.select.select-custom option:first-of-type {
  border-radius: 8px 8px 0 0;
}

select.select.select-custom option:last-of-type {
  border-radius: 0 0 8px 8px;
}

select.select.select-custom::picker(select) {
  border-radius: 8px;
}

select.select.select-custom option:not(option:last-of-type) {
  border-bottom: none;
}

select.select.select-custom option:nth-of-type(odd) {
  background: white;
}

select.select.select-custom option:hover {
  background: #2196f3a6;
}

select.select.select-customoption:focus {
  outline: none;
}

/* option::checkmark {
  display: none;
} */
.switch-no-handle .react-switch-handle {
  visibility: hidden;
}

.input-checkbox {
  opacity: 0;
}

@keyframes input-container-dirty {
  0% {
    background-color: rgba(33, 150, 243, 1);
  }

  50% {
    background-color: rgba(33, 150, 243, 0.3);
  }

  100% {
    background-color: rgba(33, 150, 243, 1);
  }
}

@keyframes input-container-saving {
  0% {
    width: 0;
  }

  20% {
    margin-left: 10%;
    width: 20%;
  }

  100% {
    margin-left: 70%;
    width: 30%;
  }
}

@keyframes input-container-saved {
  0% {
    width: 0;
    background-color: rgba(84, 162, 41, 1);
  }

  50% {
    width: 30%;
    background-color: rgba(84, 162, 41, 1);
  }

  80% {
    width: 100%;
    background-color: rgba(84, 162, 41, 1);
  }

  100% {
    width: 100%;
    background-color: rgba(84, 162, 41, 1);
  }
}

.input-container {
  position: relative;
  width: 100%;
  min-height: 23px;
}

.input-container:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  /* background: var(--locize-primary); */
  border-bottom: solid 1px var(--locize-cream-inputLine);
  border-radius: 3px;
  z-index: 4;
}

.input-container:focus-within::after {
  height: 2px;
}

.input-container .input-container-errorwrapper {
  position: relative;
  z-index: 10;
}

.input-container i {
  position: absolute;
  top: 0px;
  right: 2px;
  font-size: 21px;
  color: var(--locize-green);
}

.input-container.dirty:after {
  /* animation: input-container-dirty 2.5s infinite; */
  /* background: linear-gradient(
    90deg,
    rgba(25, 118, 210, 0.5) 0%,
    rgba(25, 118, 210, 1) 59%,
    rgba(25, 118, 210, 0.35) 100%
  ); */
  border-bottom: dotted 1px var(--locize-cream-inputLine);
}

.input-container.saving:after {
  animation: input-container-saving 2s infinite;
  border-bottom: solid 1px transparent;
}

.input-container.saved:after {
  /* animation: input-container-saved 2s infinite; */
  border-bottom: solid 1px var(--locize-green);
}

.input-container-disabled:after {
  /* background: var(--locize-middleGray); */
  border-bottom: solid 1px var(--locize-middleGray);
}

.input-container.error:after {
  /* background: var(--locize-red); */
  border-bottom: dashed 1px var(--locize-red);
}
.react-select--is-disabled {
  pointer-events: initial !important;
}

.react-select__control {
  /* background-color: transparent !important; */
  background-color: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(4px);
  border: none !important;
  border-radius: none !important;
  padding: 0px 2px 0px 8px !important;
}

.react-select__control.react-select__control--is-focused {
  border: none !important;
  box-shadow: none !important;
}

.react-select__control.react-select__control--is-disabled * {
  cursor: not-allowed !important;
}

.react-select__control.react-select__control--is-disabled>.react-select__value-container * {
  color: var(--locize-middleGray) !important;
}

.react-select__value-container {
  padding: 0 !important;
  padding-right: 5px !important;
}

.react-select__indicator {
  padding: 8px 4px !important;
}