@charset "UTF-8";
:root {
  --colorPrimary-100: #322bf0;
  --colorPrimary-200: #5b43f3;
  --colorPrimary-300: #775af5;
  --colorPrimary-400: #8f70f8;
  --colorPrimary-500: #a587fa;
  --colorPrimary-600: #b99ffb;
  --colorSurface-100: #121212;
  --colorSurface-200: #282828;
  --colorSurface-300: #3f3f3f;
  --colorSurface-400: #575757;
  --colorSurface-500: #717171;
  --colorSurface-600: #8b8b8b;
  --colorSurface-700: #cfcfd4;
  --colorSurface-0: #ffffff;
  --colorSurfaceMixed-200: #2f2b3a;
  --colorGrayTransparent: rgb(0, 0, 0, 0.1);
  --colorSuccess: #4fc46d;
  --colorSuccessTransparent: rgb(79, 196, 109, 0.1);
  --colorError: #ff3d3d;
  --colorErrorTransparent: rgb(255, 61, 61, 0.1);
  --colorErrorDark: #d63030;
  --colorWarning: #f0c929;
  --colorWarningDark: #dbb324;
  --colorWarningTransparent: rgb(240, 201, 41, 0.1);
  --colorOrange:#fd7e14;
  --colorOrangeDark:#e67312;
  --colorOrangeTransparent: rgba(255, 119, 0, 0.1);
  --colorBlue:#4169E1;
  --colorBlueTransparent: rgba(29, 53, 87, 0.1);
  --colorInfo: #a587fa;
  --colorInfoTransparent: rgb(165, 135, 250, 0.1);
  --colorOnBorders: #282828;
  --colorBeige: #faf9f6;
  --scheme: dark;
}

body {
  background: var(--colorSurface-100);
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  display: flex;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--colorSurface-0);
}

a {
  color: var(--colorSurface-600);
  text-decoration: none;
  transition: 0.3s ease all;
}
@media (hover: hover) {
  a:hover {
    color: var(--colorPrimary-500);
  }
}

main {
  flex: 1;
  overflow-y: auto;
  max-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
}
main #mainTop {
  padding: 0.7rem 2rem;
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--colorSurface-200);
}
@media (max-width: 1024px) {
  main #mainTop {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--colorSurface-200);
  }
}
main #mainTop h1 {
  font-size: 1rem;
}
@media (max-width: 1024px) {
  main #mainTop h1 {
    margin-left: 3rem;
  }
}
main #mainTop button, main #mainTop a {
  margin: 0;
}
main #mainTop {
  order: 1;
}
main #messageContainer {
  order: 3;
}
main #messageContainerFixed {
  order: 4;
}
main #mainTable {
  order: 5;
}

#developmentWarning {
  order: 2;
  margin: 1rem 2rem;
  width: unset;
}

.btn {
  border-radius: 4px;
  outline: none;
  border: none;
  margin: 1rem 0;
  width: max-content;
  padding: 0.5rem 0.7rem;
  transition: 0.3s ease all;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  background: var(--colorSurface-200);
  color: var(--colorSurface-600);
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.btn.small {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
}
.btn.smallFont {
  font-size: 0.8rem;
}
@media (hover: hover) {
  .btn:hover {
    background: var(--colorSurface-300);
    color: var(--colorSurface-0);
  }
}
.btn.primary {
  background: var(--colorPrimary-500);
  color: var(--colorSurface-100);
}
@media (hover: hover) {
  .btn.primary:hover {
    background: var(--colorPrimary-400);
  }
}
.btn.error {
  background: var(--colorError);
  color: var(--colorSurface-100);
}
.btn.error.hollow {
  background: transparent;
  color: var(--colorError);
  border: 1px solid var(--colorError);
}
@media (hover: hover) {
  .btn.error.hollow:hover {
    background: var(--colorError);
    color: var(--colorSurface-0);
  }
}
@media (hover: hover) {
  .btn.error:hover {
    background: var(--colorError);
  }
}
.btn.warning {
  background: var(--colorWarning);
  color: var(--colorSurface-100);
}
@media (hover: hover) {
  .btn.warning:hover {
    background: var(--colorWarningDark);
  }
}
.btn.orange {
  background: var(--colorOrange);
  color: var(--colorSurface-100);
}
@media (hover: hover) {
  .btn.orange:hover {
    background: var(--colorOrangeDark);
  }
}
.btn.hollow {
  background: transparent;
  color: var(--colorSurface-600);
  border: 1px solid var(--colorOnBorders);
}
@media (hover: hover) {
  .btn.hollow:hover {
    background: var(--colorSurface-200);
  }
  .btn.hollow:hover.glow {
    color: var(--colorPrimary-500);
    border: 1px solid var(--colorPrimary-500);
  }
  .btn.hollow:hover.glow svg {
    transition: 0.3s ease all;
    fill: var(--colorPrimary-500) !important;
  }
  .btn.hollow.glow {
    background: transparent;
  }
}
.btn.fullWidth {
  width: 100%;
}
.btn.noMargin {
  margin: 0;
}
.btn.centered {
  margin-left: auto;
  margin-right: auto;
}
.btn:has(.gfLoader) {
  position: relative;
  opacity: 0.2;
}
.btn.disabled {
  pointer-events: none;
  background: var(--colorOnBorders);
  color: white;
}

label {
  color: var(--colorSurface-600);
}

select.input {
  padding: 0.47rem 0.7rem;
}

.input {
  border-radius: 4px;
  outline: none;
  border: 1px solid var(--colorOnBorders);
  padding: 0.5rem 0.7rem;
  transition: 0.3s ease all;
  font-weight: normal;
  font-size: 1rem;
  background: transparent;
  color-scheme: var(--scheme);
  color: var(--colorSurface-600);
}
.input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input:read-only:not(select) {
  background: var(--colorSurface-200);
  color: var(--colorSurface-600);
}
.input.invalidFormField {
  border: 1px solid var(--colorError);
}
.input[type=checkbox] {
  accent-color: var(--colorPrimary-400);
  opacity: 0.4;
  height: 28px;
  transition: none !important;
}
.input[type=checkbox]:checked {
  opacity: 1;
}
.input[type=color] {
  padding: 0.4rem;
  height: 36px;
  background: var(--colorSurface-100) !important;
}
.input[type=radio] {
  accent-color: var(--colorPrimary-500);
}
.input[type=date], .input[type=datetime-local], .input[type=week], .input[type=time], .input[type=month] {
  padding: 0.41rem 0.7rem;
}
.input::placeholder {
  color: var(--colorSurface-400);
}
.input option {
  background: var(--colorSurface-200);
}
.input option:disabled {
  color: var(--colorSurface-600);
  background: var(--colorSurface-400);
}
.input[type=number] {
  width: 75px;
  -moz-appearance: textfield;
}
.input:disabled {
  background: var(--colorSurface-200);
  color: var(--colorSurface-600);
  opacity: 1;
}

textarea.input {
  height: 117px;
  font-family: "DM Sans", sans-serif;
  transition: border 0.3s ease, color 0.3s ease;
}

* {
  /* Track */
  /* Handle */
}
*::-webkit-scrollbar {
  width: 4px;
  height: 2px;
}
*::-webkit-scrollbar-track {
  background: var(--colorSurface-200);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--colorSurface-600);
  border-radius: 10px;
}
* div {
  scrollbar-gutter: stable;
}

.gfLoader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
  z-index: 9;
  opacity: 1;
  border-color: var(--colorSurface-600) var(--colorSurface-200) var(--colorSurface-200) !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.inputContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 62px;
  position: relative;
}
.inputContainer:has(input[type=checkbox]) {
  align-items: center;
  flex-direction: row;
}

.formFieldNotice {
  color: var(--colorError) !important;
  min-height: 42px;
}

@keyframes fadeInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.hidden {
  display: none !important;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-column-gap: 4rem;
  grid-row-gap: 1rem;
  container-type: inline-size;
  container-name: rowContainer;
}
.row .column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.row .column.fullWidth {
  grid-column: 1/-1;
}
.row .column.halfWidth {
  grid-column: span 2;
}
.row .column.standAlone {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-column-gap: 4rem;
  grid-row-gap: 1rem;
}
.row .column.standAlone h2 {
  grid-column: 1/-1;
}
.row .column span, .row .column p {
  color: var(--colorSurface-600);
}
.row .divider {
  height: 1px;
  background: var(--colorSurface-200);
  grid-column: 1/-1;
  margin: 1rem 0;
}

@container rowContainer (max-width:460px) {
  .column {
    grid-column: 1/-1;
  }
}
.flexColumn {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flash {
  animation: flashAnimation 1s alternate;
}

.flash td {
  animation: flashAnimation 1s alternate;
}

@keyframes flashAnimation {
  50% {
    background-color: #4fc46d;
    color: var(--colorSurface-0);
  }
}
@keyframes slideRightToLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.green {
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 4px;
  color: var(--colorSuccess);
  border: 1px solid var(--colorSuccess);
  background: var(--colorSuccessTransparent);
  font-weight: bold;
  white-space: nowrap;
}

.red {
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 4px;
  color: var(--colorError);
  border: 1px solid var(--colorError);
  background: var(--colorErrorTransparent);
  font-weight: bold;
  white-space: nowrap;
}

.yellow {
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 4px;
  color: var(--colorWarning);
  border: 1px solid var(--colorWarning);
  background: var(--colorWarningTransparent);
  font-weight: bold;
  white-space: nowrap;
}

.orange {
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 4px;
  color: var(--colorOrange);
  border: 1px solid var(--colorOrange);
  background: var(--colorOrangeTransparent);
  font-weight: bold;
  white-space: nowrap;
}

.blue {
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 4px;
  color: var(--colorBlue);
  border: 1px solid var(--colorBlue);
  background: var(--colorBlueTransparent);
  font-weight: bold;
  white-space: nowrap;
}

.purple {
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 4px;
  color: var(--colorInfo);
  border: 1px solid var(--colorInfo);
  background: var(--colorInfoTransparent);
  font-weight: bold;
  white-space: nowrap;
}

.gray {
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 4px;
  color: var(--colorSurface-600);
  border: 1px solid var(--colorSurface-600);
  background: var(--colorGrayTransparent);
  font-weight: bold;
  white-space: nowrap;
}

#messageContainer {
  width: 100%;
  min-height: 63px;
  padding: 0.3rem 2rem;
}
@media (max-width: 1024px) {
  #messageContainer {
    padding: 0.3rem 1rem;
  }
}

#messageContainerFixed {
  position: absolute;
  top: 61px;
  right: 2rem;
  overflow: hidden;
  scrollbar-gutter: auto;
  max-width: 90%;
  z-index: 11;
}

.submitContainer {
  width: max-content;
  min-width: 60px;
  min-height: 34px;
  margin: 2rem 0;
  position: relative;
}
.submitContainer input[type=submit] {
  margin: 0;
}

input[type=checkbox] {
  transition: none !important;
}

#crudForm .inputContainer:has(input[type=checkbox]) {
  width: max-content;
}

select[readonly] {
  pointer-events: none;
  background: var(--colorSurface-200);
  color: var(--colorSurface-600);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

ul, ol {
  font: inherit;
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

html, body {
  margin: 0;
  padding: 0;
}

svg {
  pointer-events: none;
}

#loginMain {
  height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#loginMain #developmentWarning {
  order: unset;
  width: 340px;
}
#loginMain p {
  color: var(--colorSurface-600);
  margin-top: 1rem;
  width: 340px;
  text-align: center;
}
@media (max-width: 360px) {
  #loginMain p {
    max-width: 100%;
    padding: 0 1rem;
  }
}
#loginMain #loginForm {
  padding: 2rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
#loginMain #loginForm #messageContainer {
  padding: 0;
  order: unset;
  max-width: 345px;
}
@media (max-width: 360px) {
  #loginMain #loginForm #messageContainer {
    max-width: 100%;
    padding: 0 1rem;
  }
}
#loginMain #loginForm .inputContainer {
  position: relative;
  display: flex;
  gap: 1rem;
  width: 350px;
  border: 1px solid var(--colorSurface-200);
  border-radius: 4px;
  padding: 0.5rem;
  align-items: center;
  min-height: unset;
  flex-direction: row;
}
#loginMain #loginForm .inputContainer:has(.formFieldNotice) {
  border: 1px solid var(--colorError);
}
@media (max-width: 500px) {
  #loginMain #loginForm .inputContainer {
    width: 100%;
  }
}
#loginMain #loginForm .inputContainer svg {
  width: 16px;
  fill: var(--colorSurface-0);
}
#loginMain #loginForm .inputContainer input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--colorSurface-0);
  border-radius: 0;
  padding: 0;
}
@media (max-width: 500px) {
  #loginMain #loginForm .inputContainer input {
    width: auto;
  }
}
#loginMain #loginForm .inputContainer .formFieldNotice {
  position: absolute;
  top: 105%;
  left: 0;
}
#loginMain #loginForm #loginActions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  gap: 1rem;
}
#loginMain #loginForm #loginActions #rememberMe {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--colorSurface-400);
}
#loginMain #loginForm #loginActions #rememberMe input[type=checkbox] {
  width: 16px;
  height: 16px;
}
#loginMain #loginForm #loginActions a {
  color: var(--colorPrimary-500);
  text-decoration: none;
}
#loginMain #loginForm #loginActions a:hover {
  color: var(--colorPrimary-400);
}
#loginMain #loginForm #togglePassword {
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--colorSurface-600);
  margin-left: auto;
}
@media (hover: hover) {
  #loginMain #loginForm #togglePassword:hover svg {
    fill: var(--colorSurface-0);
  }
}
#loginMain #loginForm #togglePassword svg {
  transition: 0.3s ease all;
  width: 16px;
  fill: var(--colorSurface-600);
}
#loginMain #loginForm #togglePassword svg.show {
  display: none;
}
#loginMain #loginForm #togglePassword svg.hide {
  display: block;
}
#loginMain #loginForm #togglePassword.show svg.show {
  display: block;
}
#loginMain #loginForm #togglePassword.show svg.hide {
  display: none;
}

#notFound {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  flex-direction: column;
}
#notFound p {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--colorSurface-600);
}

#hamburger {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background: var(--colorSurface-100);
  border-bottom: 1px solid var(--colorSurface-200);
  border-right: 1px solid var(--colorSurface-200);
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  height: 57px;
  left: 0;
  top: 0;
  z-index: 2;
}
@media (min-width: 1025px) {
  #hamburger {
    display: none;
  }
}
#hamburger svg {
  fill: var(--colorSurface-600);
  width: 18px;
  height: 18px;
  transition: 0.3s ease all;
}

#navigation {
  background: var(--colorSurface-200);
  height: 100svh;
  width: 48px;
  overflow: hidden;
  transition: width 0.3s ease, left 0.3s ease;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--colorSurface-300);
  flex-shrink: 0;
  z-index: 4;
  overflow-y: auto;
}
@media (max-width: 1024px) {
  #navigation {
    position: fixed;
    left: -500px;
  }
  #navigation.active {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
  }
}
#navigation.active {
  width: 260px;
}
#navigation.active #noResultsSearchNavigation.active {
  display: flex;
}
#navigation.active #noResultsSearchNavigation span {
  color: var(--colorSurface-600);
}
#navigation.active #toggleNavigation {
  left: 226px;
}
@media (max-width: 1024px) {
  #navigation.active #toggleNavigation {
    left: unset;
  }
}
#navigation.active #items .item {
  -webkit-tap-highlight-color: transparent;
}
#navigation.active #items .item .tooltip {
  display: none !important;
}
#navigation.active #navigationSettings {
  -webkit-tap-highlight-color: transparent;
}
#navigation.active #navigationSettings .tooltip {
  display: none !important;
}
#navigation.active #navigationSettings.active {
  color: var(--colorSurface-0);
}
#navigation.active #navigationSearch {
  border: 1px solid var(--colorSurface-600);
}
@media (hover: hover) {
  #navigation.active #navigationSearch:hover {
    border: 1px solid var(--colorSurface-0);
  }
}
#navigation.active .line:not(.evergreen) {
  background: transparent;
}
#navigation.active #navigationUser {
  cursor: default;
}
#navigation .line {
  width: 100%;
  height: 1px;
  background: var(--colorSurface-600);
  margin: 1rem 0;
}
#navigation #navigationSearch {
  margin-top: 3.9rem;
  padding: 0.3rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: 0.3s ease all;
}
#navigation #navigationSearch.active {
  border: 1px solid var(--colorSurface-0);
}
#navigation #navigationSearch.active svg {
  fill: var(--colorSurface-0);
}
#navigation #navigationSearch.active input {
  color: var(--colorSurface-0);
}
@media (hover: hover) {
  #navigation #navigationSearch:hover svg {
    fill: var(--colorSurface-0);
  }
  #navigation #navigationSearch:hover input {
    color: var(--colorSurface-0);
  }
}
#navigation #navigationSearch svg {
  transition: 0.3s ease all;
  width: 20px;
  fill: var(--colorSurface-600);
  flex-shrink: 0;
}
#navigation #navigationSearch input {
  background: transparent;
  outline: none;
  border: none;
  width: 140px;
  color: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#navigation #navigationSearch input ::placeholder {
  color: var(--colorSurface-600);
  opacity: 1;
}
#navigation #navigationSearch input ::-ms-input-placeholder {
  color: var(--colorSurface-600);
}
#navigation #toggleNavigation {
  cursor: pointer;
  position: fixed;
  top: 12px;
  left: 34px;
  padding: 3px 8px 2px;
  border: 2px solid var(--colorSurface-600);
  background: var(--colorSurface-100);
  border-radius: 50%;
  transition: 0.3s ease all;
}
@media (max-width: 1024px) {
  #navigation #toggleNavigation {
    left: unset;
    right: 5px;
    position: absolute;
  }
}
#navigation #toggleNavigation svg {
  width: 8px;
  fill: var(--colorSurface-600);
}
@media (hover: hover) {
  #navigation #toggleNavigation:hover {
    border: 2px solid var(--colorSurface-0);
  }
  #navigation #toggleNavigation:hover svg {
    fill: var(--colorSurface-0);
  }
}
#navigation #toggleNavigation.active svg {
  transform: rotate(180deg);
}
#navigation #items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#navigation .item {
  color: var(--colorSurface-600);
}
#navigation .item.hidden {
  display: none;
}
#navigation .item.active {
  color: var(--colorSurface-0);
}
#navigation .item.active .itemAnchor {
  border: 1px solid var(--colorSurface-600);
}
#navigation .item.active .itemAnchor svg {
  fill: var(--colorSurface-0);
}
#navigation .item:not(:has(.subItemsContainer)) {
  margin-bottom: 0.3rem;
}
#navigation .item .itemAnchor {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transition: 0.3s ease all;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  #navigation .item .itemAnchor:hover {
    color: var(--colorSurface-0);
    border: 1px solid var(--colorSurface-600);
  }
  #navigation .item .itemAnchor:hover svg {
    fill: var(--colorSurface-0);
  }
}
#navigation .item .itemAnchor svg {
  fill: var(--colorSurface-600);
  width: 20px;
  height: 18px;
  transition: 0.3s ease all;
  flex-shrink: 0;
}
#navigation .item .itemAnchor svg.subItemsIndicator {
  margin-left: auto;
  width: 12px;
}
#navigation .item .itemAnchor svg.subItemsIndicator.active {
  transform: rotate(180deg);
}
#navigation .item.active .subItemsContainer {
  grid-template-rows: 1fr;
}
#navigation .item .subItemsContainer {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease grid-template-rows;
  position: relative;
  overflow: hidden;
}
#navigation .item .subItemsContainer .subItems {
  overflow: hidden;
  padding-left: 2.8rem;
  margin-top: 0.3rem;
}
#navigation .item .subItemsContainer .subItems:before {
  content: "";
  height: 100%;
  width: 1px;
  background: var(--colorSurface-600);
  position: absolute;
  left: 18px;
  top: 6px;
}
#navigation .item .subItemsContainer .subItems .subItem {
  padding: 0.3rem 0;
  color: var(--colorSurface-600);
  cursor: pointer;
  transition: 0.3s ease all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#navigation .item .subItemsContainer .subItems .subItem.hidden {
  display: none;
}
@media (hover: hover) {
  #navigation .item .subItemsContainer .subItems .subItem:hover:not(#modeSelectContainer):not(#languageSelectContainer) {
    color: var(--colorSurface-0);
  }
}
#navigation .item .subItemsContainer #languageSelectContainer {
  display: flex;
  align-items: center;
}
#navigation .item .subItemsContainer #languageSelectContainer select.input {
  border: 1px solid var(--colorSurface-300);
  padding: 0.3rem;
  margin-left: auto;
}
#navigation .item .tooltip {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: max-content;
  background: var(--colorSurface-200);
  border: 1px solid var(--colorSurface-600);
  color: var(--colorSurface-0);
  text-align: center;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  z-index: 10;
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
  transition: 0.3s ease opacity;
}
#navigation .item .tooltip.active {
  opacity: 1;
  visibility: visible;
}
#navigation .item .tooltip:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--colorSurface-600) transparent transparent;
}
#navigation #navigationMiscellaneous {
  margin-top: auto;
}
#navigation #navigationSettings {
  margin-top: 0.5rem;
  color: var(--colorSurface-600);
}
#navigation #navigationSettings #modeSelectContainer {
  display: flex;
  align-items: center;
}
#navigation #navigationSettings #modeSelectContainer input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}
#navigation #navigationSettings #modeSelectContainer label {
  margin-left: auto;
  cursor: pointer;
  text-indent: -9999px;
  width: 44px;
  height: 22px;
  background: grey;
  display: block;
  border-radius: 100px;
  position: relative;
}
#navigation #navigationSettings #modeSelectContainer label:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}
#navigation #navigationSettings #modeSelectContainer input:checked + label {
  background: var(--colorPrimary-500);
}
#navigation #navigationSettings #modeSelectContainer input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}
#navigation #navigationUser {
  display: flex;
  padding: 0.3rem 0.5rem;
  gap: 0.9rem;
  cursor: pointer;
  align-items: center;
  margin-bottom: 0.5rem;
}
@media (hover: hover) {
  #navigation #navigationUser:hover svg {
    fill: var(--colorSurface-0);
  }
}
#navigation #navigationUser svg {
  fill: var(--colorSurface-600);
  width: 20px;
  height: 20px;
  transition: 0.3s ease all;
  flex-shrink: 0;
}
#navigation #navigationUser img {
  border-radius: 50%;
  width: 24px;
  min-width: 24px;
  display: block;
}
#navigation #navigationUser #navigationUserInfo {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}
#navigation #navigationUser #navigationUserInfo #navigationUserInfoInner {
  max-width: 151px;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--colorSurface-600);
  display: flex;
  align-items: center;
}
#navigation #navigationUser #navigationUserInfo #navigationUserName {
  font-size: 1rem;
  color: var(--colorSurface-0);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#navigation #navigationUser #navigationUserInfo a {
  margin-top: 0.5rem;
}
#navigation #navigationUser #navigationUserInfo a svg {
  transition: 0.3s ease all;
}
@media (hover: hover) {
  #navigation #navigationUser #navigationUserInfo a:hover svg {
    fill: var(--colorPrimary-500);
  }
}
#navigation #navigationUser #navigationUserInfo #navigationUserEmail {
  font-size: 0.8rem;
  color: var(--colorSurface-600);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#navigation #noResultsSearchNavigation {
  display: none;
  padding-left: 0.6rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  gap: 0.9rem;
}
#navigation #noResultsSearchNavigation svg {
  fill: var(--colorSurface-600);
  width: 20px;
  height: 20px;
  display: block;
}

.message {
  padding: 0.5rem;
  margin: 0.5rem 0;
  width: 100%;
  background: var(--colorSurface-200);
  color: var(--colorSurface-0);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
}
.message.notification {
  width: max-content;
  margin-left: auto;
  padding-right: 1rem;
  animation: slideRightToLeft 0.3s ease-in-out;
}
.message > span {
  width: 20px;
  height: 20px;
}
.message > span svg {
  width: 20px;
  height: 20px;
}
.message.error {
  border-left: 2px solid var(--colorError);
}
.message.error svg {
  fill: var(--colorError);
}
.message.success {
  border-left: 2px solid var(--colorSuccess);
}
.message.success svg {
  fill: var(--colorSuccess);
}
.message.info {
  border-left: 2px solid var(--colorInfo);
}
.message.info svg {
  fill: var(--colorInfo);
}
.message.warning {
  border-left: 2px solid var(--colorWarning);
}
.message.warning svg {
  fill: var(--colorWarning);
}
.message .removeButton {
  cursor: pointer;
  width: 18px;
  height: 18px;
  margin-left: auto;
}
@media (hover: hover) {
  .message .removeButton:hover svg {
    fill: var(--colorSurface-0);
  }
}
.message .removeButton svg {
  fill: var(--colorSurface-600);
  width: 18px;
  height: 18px;
  transition: 0.3s ease all;
}

#modalOverlay {
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#modalOverlay.hidden {
  display: none;
}
#modalOverlay #modal {
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: var(--colorSurface-100);
  border: 1px solid var(--colorSurface-200);
  border-radius: 4px;
  overflow-y: auto;
  max-width: 100%;
  max-height: 100%;
}
#modalOverlay #modal #closeModal {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
@media (hover: hover) {
  #modalOverlay #modal #closeModal:hover svg {
    fill: var(--colorSurface-0);
  }
}
#modalOverlay #modal #closeModal svg {
  pointer-events: none;
  transition: 0.3s ease all;
  fill: var(--colorSurface-600);
  width: 20px;
}
#modalOverlay #modal #modalContent {
  padding: 1rem;
}
#modalOverlay #modal #modalContent h1 {
  margin-bottom: 2rem;
}
#modalOverlay #modal #modalContent h2 {
  font-size: 1.2rem;
}
#modalOverlay #modal #modalContent h2, #modalOverlay #modal #modalContent h3, #modalOverlay #modal #modalContent h4, #modalOverlay #modal #modalContent h5, #modalOverlay #modal #modalContent h6 {
  color: var(--colorSurface-600);
}
#modalOverlay #modal #modalContent .input[type=checkbox] {
  margin-right: auto;
}
#modalOverlay #modal #modalContent #submitButtonContainer {
  width: max-content;
  min-width: 60px;
  min-height: 34px;
  margin: 2rem 0;
}
#modalOverlay #modal #modalContent #submitButtonContainer .gfLoader {
  position: static;
}
#modalOverlay #modal #modalContent #submitButtonContainer input[type=submit] {
  margin: 0;
}
#modalOverlay #modal #modalContent #crudForm {
  container-type: inline-size;
  container-name: crudForm;
}
#modalOverlay #modal #modalContent #crudForm textarea {
  resize: vertical;
}
#modalOverlay #modal #modalContent #crudForm input[type=number] {
  width: 100%;
}
#modalOverlay #modal #modalMessageContainer {
  padding: 2.5rem 1rem 0 1rem;
}

@container crudForm (max-width:460px) {
  .row {
    grid-column-gap: 0;
  }
}
#mainTable {
  padding: 1rem 2rem;
}
@media (max-width: 1024px) {
  #mainTable {
    padding: 1rem;
  }
}
#mainTable #tableFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  color: var(--colorSurface-600);
}
#mainTable #tableFilters:not(:has(.filterContainer)) {
  margin-bottom: 0 !important;
}
#mainTable #tableFilters .tableFilterModifierContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#mainTable #tableFilters .filterLinks {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}
#mainTable #tableFilters .filterLinks a {
  color: var(--colorSurface-600);
  text-decoration: none;
  transition: 0.3s ease all;
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  background: var(--colorSurface-200);
}
#mainTable #tableFilters .filterLinks a.small {
  padding: 0.3rem 0.5rem;
}
@media (hover: hover) {
  #mainTable #tableFilters .filterLinks a:hover {
    background: var(--colorPrimary-500);
    color: var(--colorSurface-100);
  }
}
#mainTable #tableFilters .filterLinks a.primary {
  background: var(--colorPrimary-500);
  color: var(--colorSurface-100);
}
#mainTable #tableFilters .filterContainer,
#mainTable #tableFilters .selectSearchContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: max-content;
}
#mainTable #tableTop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
#mainTable #tableTop #applyBulkActions {
  margin: 0;
}
#mainTable #tableTop #tableSearchContainer {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 1024px) {
  #mainTable #tableTop #tableSearchContainer {
    flex-wrap: wrap;
    margin-left: 0;
  }
}
@media (max-width: 1400px) {
  #mainTable #tableTop #tableSearchContainer #tableSearchInput {
    width: 150px;
  }
}
#mainTable #tableTop #tableSearchContainer #searchableColumns {
  display: flex;
  align-items: center;
  position: relative;
}
#mainTable #tableTop #tableSearchContainer #searchableColumns:has(.active) #searchableColumnsTrigger svg {
  fill: var(--colorPrimary-500);
}
#mainTable #tableTop #tableSearchContainer #searchableColumns #searchableColumnsTrigger {
  cursor: pointer;
  width: 18px;
}
#mainTable #tableTop #tableSearchContainer #searchableColumns #searchableColumnsTrigger svg {
  transition: 0.3s ease all;
  fill: var(--colorSurface-600);
}
@media (hover: hover) {
  #mainTable #tableTop #tableSearchContainer #searchableColumns #searchableColumnsTrigger:hover svg {
    color: var(--colorPrimary-500);
  }
}
#mainTable #tableTop #tableSearchContainer #searchableColumns #searchableColumnsList {
  position: absolute;
  top: 83%;
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: max-content;
  z-index: 2;
  background: var(--colorSurface-100);
  border: 1px solid var(--colorOnBorders);
  color: var(--colorSurface-600);
  font-style: italic;
  font-size: 0.9rem;
  transition: 0.3s ease opacity;
  opacity: 0;
  transform: scale(0);
}
#mainTable #tableTop #tableSearchContainer #searchableColumns #searchableColumnsList.active {
  opacity: 1;
  z-index: 99;
  transform: scale(1);
  animation: fadeInFromTop 0.3s ease forwards;
}
#mainTable #tableTop #tableSearchContainer #searchableColumns #searchableColumnsList span:first-of-type {
  color: var(--colorPrimary-500);
  font-style: normal;
  font-weight: bold;
}
#mainTable #tableTop #aboveTable {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}
#mainTable #tableTop #aboveTable #resultCount {
  color: var(--colorSurface-600);
}
#mainTable #tableTop #aboveTable #extraActions {
  display: flex;
  gap: 0.5rem;
}
#mainTable #tableTop #aboveTable #extraActions > button {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
#mainTable #tableTop #aboveTable #extraActions > button svg {
  fill: var(--colorSurface-600);
  width: 16px;
}
#mainTable #tableTop .goToPageContainer, #mainTable #tableTop #perPageContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#mainTable #tableTop #bulkActionsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 170px;
}
#mainTable #tableTop #bulkActionsContainer > label {
  flex-basis: 100%;
}
#mainTable #tableTop #bulkActionsContainer .gfLoader {
  position: static !important;
  margin: auto 0 auto 1rem !important;
}
#mainTable .tablePaginationContainer {
  display: flex;
  align-items: center;
  gap: 5px;
}
#mainTable .tablePaginationContainer .paginationButton {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colorSurface-200);
  outline: none;
  border: none;
  padding: 0.55rem;
  border-radius: 4px;
  transition: 0.3s ease all;
  color: var(--colorSurface-600);
  min-width: 36px;
  height: 36px;
  font-weight: bold;
}
#mainTable .tablePaginationContainer .paginationButton svg {
  fill: var(--colorSurface-600);
  width: 8px;
}
#mainTable .tablePaginationContainer .paginationButton:hover, #mainTable .tablePaginationContainer .paginationButton.activePaginationButton {
  background: var(--colorPrimary-500);
  color: var(--colorSurface-100);
}
#mainTable .tablePaginationContainer .paginationButton:hover svg, #mainTable .tablePaginationContainer .paginationButton.activePaginationButton svg {
  fill: var(--colorSurface-100);
}
#mainTable #crudTable {
  width: 100%;
  margin: 0.5rem 0;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1200px;
}
#mainTable #crudTable td, #mainTable #crudTable th {
  text-align: left;
  padding: 0.5rem 1rem;
  min-height: 49px;
}
#mainTable #crudTable thead tr {
  background: var(--colorSurface-200);
  color: var(--colorSurface-600);
}
#mainTable #crudTable thead tr th {
  font-weight: 900;
  word-break: break-word;
  position: relative;
  white-space: nowrap;
}
#mainTable #crudTable thead tr th.selectAllHead {
  width: 50px;
}
#mainTable #crudTable thead tr th.hidden {
  display: none;
}
#mainTable #crudTable thead tr th:first-of-type {
  border-top-left-radius: 7px;
}
#mainTable #crudTable thead tr th:last-of-type {
  border-top-right-radius: 7px;
}
#mainTable #crudTable thead tr th .sort {
  cursor: pointer;
  display: inline-block;
  padding: 0 5px;
  user-select: none;
}
#mainTable #crudTable thead tr th .sort.active svg {
  fill: var(--colorPrimary-500);
}
#mainTable #crudTable thead tr th .sort[data-sort-asc] svg {
  transform: rotate(180deg);
}
#mainTable #crudTable thead tr th .sort svg {
  width: 16px;
  vertical-align: middle;
  fill: var(--colorSurface-600);
}
#mainTable #crudTable tbody tr.additionalDataRow {
  display: none;
}
#mainTable #crudTable tbody tr.additionalDataRow td {
  max-width: 100%;
}
#mainTable #crudTable tbody tr.additionalDataRow.show {
  display: table-row;
}
#mainTable #crudTable tbody tr.active td:not(.countDataElement):not(.countDataTitle) {
  background: var(--colorSurface-300);
  color: var(--colorSurface-0);
}
#mainTable #crudTable tbody tr.locked td {
  pointer-events: none;
}
@media (hover: hover) {
  #mainTable #crudTable tbody tr:not(.additionalDataRow):hover td:not(.countDataElement):not(.countDataTitle) {
    background: var(--colorSurface-300);
    color: var(--colorSurface-0);
  }
}
#mainTable #crudTable tbody tr td {
  color: var(--colorSurface-600);
  border-bottom: 1px solid var(--colorSurface-200);
}
#mainTable #crudTable tbody tr td.countDataTitle {
  word-break: keep-all;
  font-weight: 900;
  padding: 0.5rem;
}
#mainTable #crudTable tbody tr td.countDataElement {
  color: var(--colorPrimary-500);
  padding: 0.6rem 1rem;
}
#mainTable #crudTable tbody tr td:first-of-type {
  border-left: 1px solid var(--colorSurface-200);
}
#mainTable #crudTable tbody tr td:last-of-type {
  border-right: 1px solid var(--colorSurface-200);
}
#mainTable #crudTable tbody td {
  word-break: break-word;
  transition: 0.3s ease all;
}
#mainTable #crudTable tbody td.editColumn {
  cursor: pointer;
  color: var(--colorPrimary-500) !important;
}
#mainTable #crudTable tfoot tr td {
  padding: 0.5rem 1rem;
  background: var(--colorSurface-200);
  color: var(--colorSurface-600);
}
#mainTable #crudTable tfoot tr td:first-of-type {
  border-bottom-left-radius: 7px;
}
#mainTable #crudTable tfoot tr td:last-of-type {
  border-bottom-right-radius: 7px;
}
#mainTable #crudTable .rangeFilter {
  cursor: pointer;
  display: inline-block;
  padding: 0 5px;
  width: 26px;
  height: 21px;
  user-select: none;
}
#mainTable #crudTable .rangeFilter.active > svg {
  fill: var(--colorPrimary-500);
}
#mainTable #crudTable .rangeFilter svg {
  fill: var(--colorSurface-600);
  width: 14px;
  vertical-align: middle;
}
#mainTable #crudTable .rangeFilter .rangeFilterContainer {
  display: flex;
  transform: scale(0);
  position: absolute;
  left: 1rem;
  top: 80%;
  width: 100%;
  max-width: 300px;
  padding: 2rem 0.5rem 1.5rem 0.5rem;
  background: var(--colorSurface-100);
  border-radius: 4px;
  border: 1px solid var(--colorSurface-200);
  opacity: 0;
  flex-direction: column;
  gap: 0.5rem;
}
#mainTable #crudTable .rangeFilter .rangeFilterContainer.show {
  transform: scale(1);
  animation: fadeInFromTop 0.3s ease forwards;
}
#mainTable #crudTable .rangeFilter .rangeFilterContainer .rangeActions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#mainTable #crudTable .rangeFilter .rangeFilterContainer .rangeClose {
  position: absolute;
  top: 2px;
  right: 10px;
}
#mainTable #crudTable .rangeFilter .rangeFilterContainer .btn {
  margin: 1rem 0 0 0;
  padding: 0.4rem 0.5rem;
  font-size: 0.9rem;
}
#mainTable #crudTable .rangeFilter .rangeFilterContainer input {
  padding: 0.3rem 0.5rem;
  width: 100%;
}
#mainTable #tableWrapper {
  overflow-x: auto;
  min-height: 245px;
}
#mainTable #tableWrapper::-webkit-scrollbar {
  height: 4px;
}
@media (max-width: 1550px) {
  #mainTable #tableWrapper {
    margin-bottom: 1rem;
  }
}
#mainTable #tableContainer {
  position: relative;
}
#mainTable #tableContainer #tableOverlay {
  display: block;
  position: absolute;
  top: 0;
  background: var(--colorSurface-100);
  width: 100%;
  height: 100%;
  z-index: 0;
}
#mainTable #tableContainer #tableOverlay.hidden {
  display: none;
}
#mainTable #tableContainer #tableWrapper #noResultsMessage {
  display: none;
  position: relative;
}
#mainTable #tableContainer #tableWrapper.noResults #noResultsMessage {
  color: var(--colorSurface-600);
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#mainTable #tableContainer #tableWrapper.noResults #crudTable {
  height: 200px;
}
#mainTable #tableBottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
#mainTable #tableBottom .goToPageContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.actionsWrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.actionsWrapper .entityActionButton {
  cursor: pointer;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.actionsWrapper .entityActionButton.textActionButton {
  width: max-content !important;
  padding: 0.3rem 1rem;
  border: 1px solid var(--colorPrimary-500);
  color: white;
  border-radius: 4px;
  transition: 0.3s ease all;
  font-size: 0.8rem;
}
@media (hover: hover) {
  .actionsWrapper .entityActionButton.textActionButton:hover {
    background: var(--colorPrimary-500);
  }
}
.actionsWrapper .entityActionButton.textActionButton.success {
  border: 1px solid var(--colorSuccess);
}
@media (hover: hover) {
  .actionsWrapper .entityActionButton.textActionButton.success:hover {
    background: var(--colorSuccess);
  }
}
.actionsWrapper .entityActionButton.textActionButton.error {
  border: 1px solid var(--colorError);
}
@media (hover: hover) {
  .actionsWrapper .entityActionButton.textActionButton.error:hover {
    background: var(--colorError);
  }
}
.actionsWrapper .entityActionButton.additionalDataActionButton {
  transition: 0.3s ease all;
}
.actionsWrapper .entityActionButton.additionalDataActionButton.active {
  transform: rotate(180deg);
}
@media (hover: hover) {
  .actionsWrapper .entityActionButton:hover svg {
    fill: var(--colorPrimary-500);
  }
}
.actionsWrapper .entityActionButton svg {
  transition: 0.3s ease all;
  width: 16px;
  height: 16px;
  fill: var(--colorSurface-600);
}
@media (hover: hover) {
  .actionsWrapper .entityActionButton.editEntity:hover svg {
    fill: var(--colorPrimary-400);
  }
}
.actionsWrapper .entityActionButton.editEntity svg {
  fill: var(--colorPrimary-500);
}
@media (hover: hover) {
  .actionsWrapper .entityActionButton.deleteEntity:hover svg {
    fill: var(--colorPrimary-500);
  }
}
.actionsWrapper .entityActionButton.deleteEntity svg {
  fill: var(--colorSurface-600);
  width: 16px;
}

.groupActionWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 200px;
  flex-direction: column;
}
.groupActionWrapper .groupActionElement {
  min-width: 100px;
  max-width: 100%;
  border: 1px solid var(--colorOnBorders);
  border-radius: 4px;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease all;
}
@media (hover: hover) {
  .groupActionWrapper .groupActionElement:hover {
    background: var(--colorSurface-300);
    color: var(--colorSurface-0);
  }
}

#userViewOptionsToggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 0.5rem;
}
@media (max-width: 1024px) {
  #userViewOptionsToggle {
    display: none;
  }
}
#userViewOptionsToggle.hidden {
  display: none;
}
#userViewOptionsToggle svg {
  width: 22px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
@media (hover: hover) {
  #userViewOptionsToggle:hover svg {
    fill: var(--colorSurface-0);
    rotate: 90deg;
  }
}

#userViewOptions {
  max-height: 90vh;
  border: 1px solid var(--colorSurface-400);
  overflow-y: auto;
  position: fixed;
  top: 60px;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--colorSurface-200);
  border-radius: 4px;
  padding: 1rem;
  z-index: 10;
  width: 100%;
  transition: 0.3s ease all;
  max-width: 300px;
}
@media (max-width: 1024px) {
  #userViewOptions {
    max-height: 80vh;
  }
}
@media (max-width: 1024px) {
  #userViewOptions {
    right: 1rem;
  }
}
#userViewOptions input {
  height: unset;
}
#userViewOptions.hidden {
  right: -500px;
  display: flex !important;
}
#userViewOptions .userViewOptionsAnchor {
  display: flex;
  gap: 1rem;
  align-items: center;
  cursor: pointer;
  border: 1px solid var(--colorSurface-600);
  padding: 0.5rem;
  border-radius: 4px;
  transition: 0.3s ease all;
  color: var(--colorSurface-600);
}
#userViewOptions .userViewOptionsAnchor.active {
  border: 1px solid var(--colorSurface-0);
  color: var(--colorSurface-0);
}
#userViewOptions .userViewOptionsAnchor.active svg {
  transform: rotate(180deg);
  fill: var(--colorSurface-0);
}
#userViewOptions .userViewOptionsAnchor svg {
  fill: var(--colorSurface-600);
  width: 14px;
  transition: 0.3s ease all;
  margin-left: auto;
}
@media (hover: hover) {
  #userViewOptions .userViewOptionsAnchor:hover {
    border: 1px solid var(--colorSurface-0);
    color: var(--colorSurface-0);
  }
  #userViewOptions .userViewOptionsAnchor:hover svg {
    fill: var(--colorSurface-0);
  }
}
#userViewOptions .userViewOptionsContainer {
  display: grid;
  grid-template-rows: 1fr;
  transition: 0.3s ease grid-template-rows;
  position: relative;
  overflow: hidden;
}
#userViewOptions .userViewOptionsContainer.hidden {
  grid-template-rows: 0fr;
  display: grid !important;
}
#userViewOptions .userViewOptionsContainer .userViewOptions {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#userViewOptions .userViewOptionsContainer .userViewOptions .userViewOption {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid var(--colorSurface-600);
  padding: 1rem 0;
}
#userViewOptions .userViewOptionsContainer .userViewOptions .userViewOption:last-of-type {
  border-bottom: none;
}
#userViewOptions .userViewOptionsContainer .userViewOptions .userViewOption input[type=number] {
  border: 1px solid var(--colorSurface-600);
  width: 100%;
  padding: 0.5rem;
  font-size: 0.8rem;
}
#userViewOptions #tableOptions .userViewOptions .userViewOption > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tabs {
  display: flex;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--colorSurface-200);
  overflow-x: auto;
  white-space: nowrap;
  padding-top: 5px;
  align-items: flex-end;
}
.tabs .tab {
  padding: 0.5rem 1rem;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border: 1px solid var(--colorSurface-200);
  border-bottom: 1px solid transparent;
  color: var(--colorSurface-600);
  cursor: pointer;
  transition: 0.3s ease all;
}
.tabs .tab span {
  pointer-events: none;
}
.tabs .tab:has(.removeTabButton) {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 0.5rem;
}
.tabs .tab .removeTabButton {
  display: flex;
}
@media (hover: hover) {
  .tabs .tab .removeTabButton:hover svg {
    fill: var(--colorError) !important;
  }
}
.tabs .tab .removeTabButton svg {
  width: 16px;
  height: 16px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
@media (hover: hover) {
  .tabs .tab:not(.active):hover {
    transform: translateY(-10%);
  }
}
.tabs .tab.active {
  background: var(--colorPrimary-500);
  color: var(--colorSurface-100);
}
@media (hover: hover) {
  .tabs .tab.active .removeTabButton:hover svg {
    fill: var(--colorSurface-0) !important;
  }
}
.tabs .tab.active .removeTabButton svg {
  fill: var(--colorSurface-100);
}
.tabs .addTabButton {
  order: 9999;
}
.tabs .addTabButton svg {
  width: 14px;
  height: 12px;
  fill: var(--colorSurface-600);
}

.tabContent.hidden {
  display: none;
}

.selectSearchContainer {
  position: relative;
}
.selectSearchContainer select {
  min-width: 150px;
}
.selectSearchContainer .selectSearchOverlay {
  position: absolute;
  -webkit-tap-highlight-color: transparent;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36px;
  cursor: pointer; /* Show pointer cursor */
  z-index: 2; /* Ensure it's above the select */
}
.selectSearchContainer .selectSearchResultContainer {
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  background: var(--colorSurface-100);
  z-index: 3;
}
.selectSearchContainer .selectSearchResultContainer input {
  width: 100%;
  background: var(--colorSurface-100);
}
.selectSearchContainer .selectSearchResultContainer .resultContainer {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0.5rem;
  border: 1px solid var(--colorSurface-200);
  scrollbar-gutter: auto;
}
.selectSearchContainer .selectSearchResultContainer .resultContainer > div {
  background: var(--colorSurface-100);
  width: 100%;
  padding: 0.5rem;
  border-bottom: 1px solid var(--colorSurface-200);
  transition: 0.3s ease all;
  cursor: pointer;
  color: var(--colorSurface-600);
}
@media (hover: hover) {
  .selectSearchContainer .selectSearchResultContainer .resultContainer > div:hover {
    background: var(--colorSurface-200);
    color: var(--colorSurface-0);
  }
}
.selectSearchContainer .selectSearchResultContainer .resultContainer > div.resultActive {
  background: var(--colorSurface-200);
  color: var(--colorSurface-0);
  transition: none;
}
.selectSearchContainer .selectSearchResultContainer .resultContainer > div.resultDisabled {
  background: var(--colorSurface-300);
  color: var(--colorSurface-500);
  pointer-events: none;
}

#mediaLibraryOverlay {
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#mediaLibraryOverlay.hidden {
  display: none;
}
#mediaLibraryOverlay #mediaLibrary {
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 90%;
  height: 90%;
  background: var(--colorSurface-100);
  border: 1px solid var(--colorSurface-200);
  border-radius: 4px;
  padding: 1rem 1rem 0 1rem;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--colorSurface-200);
}
@media (max-width: 768px) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #searchMediaLibraryInput {
    width: 100px;
  }
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #uploadMedia {
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid var(--colorOnBorders);
  border-radius: 4px;
  padding: 0.47rem 0.7rem;
  gap: 0.5rem;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #uploadMedia span {
  color: var(--colorSurface-600);
  font-weight: 600;
}
@media (max-width: 768px) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #uploadMedia span {
    display: none;
  }
}
@media (hover: hover) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #uploadMedia:hover svg {
    fill: var(--colorPrimary-500);
  }
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #uploadMedia input {
  display: none;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #uploadMedia svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
  width: 22px;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #closeMediaLibrary {
  cursor: pointer;
  margin-left: auto;
}
@media (hover: hover) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #closeMediaLibrary:hover svg {
    fill: var(--colorSurface-0);
  }
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #closeMediaLibrary svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
  width: 20px;
  vertical-align: bottom;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar #mediaLibraryProgressBarContainer {
  min-height: 3px;
  width: 100%;
}
@media (max-width: 768px) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryTopBar input[type=date] {
    width: 140px;
  }
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent {
  display: grid;
  grid-template-columns: 1.55fr 0.45fr;
  padding: 1rem 0;
  height: calc(100% - 121px);
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper {
  overflow-y: auto;
  padding-right: 1rem;
  min-height: calc(100% - 121px);
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  position: relative;
  gap: 1rem;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells:not(#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells:has(.cell)) {
  height: 100%;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells .message {
  grid-column: 1/-1;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells .cell {
  width: 200px;
  height: 200px;
  border-radius: 4px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  display: flex;
  border: 1px solid var(--colorSurface-200);
  cursor: pointer;
  position: relative;
}
@media (max-width: 500px) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells .cell {
    width: 100px;
    height: 100px;
  }
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells .cell.selected {
  border: 2px solid var(--colorPrimary-500);
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells .cell.documentCell {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells .cell.documentCell .documentIcon {
  margin-top: auto;
  display: flex;
  justify-content: center;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells .cell.documentCell .documentIcon svg {
  width: 50px;
  height: 50px;
  fill: var(--colorSurface-600);
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells .cell.documentCell .documentLabel {
  margin-top: auto;
  padding: 0 0.5rem;
  color: var(--colorSurface-600);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.8rem;
  height: 35px;
  word-break: break-word;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #cellsWrapper #cells .cell img {
  width: 100%;
  object-fit: contain;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar {
  height: 100%;
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--colorSurface-200);
  overflow-y: auto;
  padding-right: 0.5rem;
}
@media (max-width: 1200px) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar {
    width: 300px;
  }
}
@media (max-width: 768px) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar {
    width: 205px;
  }
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form img {
  width: 150px;
  height: auto;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData a {
  cursor: pointer;
  width: 18px;
  height: 18px;
  display: block;
}
@media (hover: hover) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData a:hover svg {
    fill: var(--colorPrimary-500);
  }
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData a svg {
  transition: 0.3s ease all;
  fill: var(--colorSurface-400);
  width: 18px;
  height: 18px;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData h2 {
  color: var(--colorSurface-600);
  font-weight: 900;
  font-size: 1.2rem;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData span {
  color: var(--colorSurface-600);
  font-weight: 900;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData span.value {
  font-weight: normal;
  font-size: 0.9rem;
  margin-left: 0.5rem;
  word-break: break-all;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData .dataPreviewActions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.5rem;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData .dataPreviewActions span {
  margin-top: 5px;
  cursor: pointer;
}
@media (hover: hover) {
  #mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData .dataPreviewActions span:hover svg {
    fill: var(--colorPrimary-500);
  }
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .previewAndData .dataPreviewActions span svg {
  transition: 0.3s ease all;
  fill: var(--colorSurface-400);
  width: 18px;
  height: 18px;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar form .documentIcon svg {
  fill: var(--colorSurface-600);
  width: 50px;
  height: 50px;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar #mediaLibrarySidebarMessageContainer {
  padding: 0 0 0.5rem 0;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryContent #mediaLibrarySidebar .mediaLibrarySidebarFormSubmitContainer {
  position: relative;
  min-height: 66px;
  width: 60px;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryBottomBar {
  border-top: 1px solid var(--colorSurface-200);
  padding: 1rem 0;
}
#mediaLibraryOverlay #mediaLibrary #mediaLibraryBottomBar button {
  margin: 0;
}

.imagePreview {
  border: 1px dashed var(--colorOnBorders);
  border-radius: 4px;
  height: 133px;
  max-width: 100%;
  padding: 0.5rem;
  cursor: pointer;
  transition: 0.3s ease all;
  display: flex;
  align-items: center;
  position: relative;
}
.imagePreview input {
  display: none;
}
.imagePreview .removeImage {
  display: none;
  cursor: pointer;
  position: absolute;
  top: -11px;
  right: -9px;
}
@media (hover: hover) {
  .imagePreview .removeImage:hover svg {
    fill: var(--colorError);
  }
}
.imagePreview .removeImage svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
  width: 20px;
}
.imagePreview:has(.formFieldNotice) {
  flex-direction: column;
  border: 1px dashed var(--colorError);
}
@media (hover: hover) {
  .imagePreview:hover {
    border: 1px dashed var(--colorSurface-400);
  }
  .imagePreview:hover:has(.formFieldNotice) {
    border: 1px dashed var(--colorError);
  }
}
.imagePreview:has(img) .chooseImageText {
  display: none;
}
.imagePreview:has(img) .removeImage {
  display: block;
}
.imagePreview .chooseImageText {
  margin: auto;
  color: var(--colorSurface-600);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.imagePreview .chooseImageText svg {
  width: 20px;
  fill: var(--colorSurface-600);
}
.imagePreview img {
  width: 80%;
  height: 60%;
  object-fit: contain;
  margin: 0 auto;
}

.imageSelect[data-readonly=true] {
  pointer-events: none;
}
.imageSelect[data-readonly=true] .removeImage {
  display: none;
}

.progressBar {
  width: 100%;
  background: var(--colorSurface-200);
  height: 3px;
  border-radius: 3px;
}
.progressBar .progressBarFill {
  height: 100%;
  background: var(--colorPrimary-500);
  position: relative;
  overflow: hidden;
  width: 0;
}

@keyframes progressAnimation {
  0% {
    width: 0;
  }
  90% {
    width: 90%;
  }
  91% {
    width: 91%;
  }
  92% {
    width: 92%;
  }
  93% {
    width: 93%;
  }
  94% {
    width: 94%;
  }
  100% {
    width: 95%;
  }
}
.gallerySelect .galleryImages {
  border: 1px dashed var(--colorOnBorders);
  border-radius: 4px;
  padding: 1rem;
  cursor: pointer;
  transition: 0.3s ease all;
  min-height: 133px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallerySelect .galleryImages:has(.galleryImage) {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.gallerySelect .galleryImages:has(.galleryImage) .galleryText {
  display: none;
}
@media (hover: hover) {
  .gallerySelect .galleryImages:hover {
    border: 1px dashed var(--colorSurface-400);
  }
  .gallerySelect .galleryImages:hover:has(.formFieldNotice) {
    border: 1px dashed var(--colorError);
  }
}
.gallerySelect .galleryImages .galleryText svg {
  width: 30px;
  fill: var(--colorSurface-600);
}
.gallerySelect .galleryImages .galleryImage {
  width: 150px;
  height: 150px;
  border-radius: 4px;
  position: relative;
  border: 1px dashed var(--colorSurface-200);
  padding: 0.5rem;
}
.gallerySelect .galleryImages .galleryImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallerySelect .galleryImages .galleryImage .removeImage {
  cursor: pointer;
  position: absolute;
  top: -11px;
  right: -9px;
}
@media (hover: hover) {
  .gallerySelect .galleryImages .galleryImage .removeImage:hover svg {
    fill: var(--colorError);
  }
}
.gallerySelect .galleryImages .galleryImage .removeImage svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
  width: 20px;
}

.gallerySelect[data-readonly=true] {
  pointer-events: none;
}
.gallerySelect[data-readonly=true] .removeImage {
  display: none;
}

.documentPreview {
  border: 1px dashed var(--colorOnBorders);
  border-radius: 4px;
  height: 133px;
  max-width: 100%;
  padding: 0.5rem;
  cursor: pointer;
  transition: 0.3s ease all;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.documentPreview input {
  display: none;
}
.documentPreview .removeDocument {
  display: none;
  cursor: pointer;
  position: absolute;
  top: -11px;
  right: -9px;
}
@media (hover: hover) {
  .documentPreview .removeDocument:hover svg {
    fill: var(--colorError);
  }
}
.documentPreview .removeDocument svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
  width: 20px;
}
.documentPreview:has(.formFieldNotice) {
  flex-direction: column;
  justify-content: center;
  border: 1px dashed var(--colorError);
}
.documentPreview:has(.formFieldNotice) .formFieldNotice {
  order: 1;
}
@media (hover: hover) {
  .documentPreview:hover {
    border: 1px dashed var(--colorSurface-400);
  }
  .documentPreview:hover:has(.formFieldNotice) {
    border: 1px dashed var(--colorError);
  }
}
.documentPreview:has(.documentPreviewElement) .chooseDocumentText {
  display: none;
}
.documentPreview:has(.documentPreviewElement) .removeDocument {
  display: block;
}
.documentPreview .documentPreviewElement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.documentPreview .documentPreviewElement svg {
  width: 20px;
  height: 20px;
  fill: var(--colorSurface-600);
}
.documentPreview .documentPreviewElement span {
  text-overflow: ellipsis;
  word-break: break-all;
  color: var(--colorSurface-600);
  font-size: 0.8rem;
}
.documentPreview .chooseDocumentText {
  margin: auto;
  color: var(--colorSurface-600);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.documentPreview .chooseDocumentText svg {
  width: 16px;
  fill: var(--colorSurface-600);
}

.documentSelect[data-readonly=true] {
  pointer-events: none;
}
.documentSelect[data-readonly=true] .removeDocument {
  display: none;
}

.multipleSelect {
  max-width: 100%;
}
.multipleSelect[data-readonly=true] .optionsToSelect {
  display: none !important;
}
.multipleSelect[data-readonly=true] .remove {
  display: none;
}
.multipleSelect select {
  display: none;
}
.multipleSelect:has(.formFieldNotice) .selectedOptions {
  border-color: var(--colorError) !important;
}
.multipleSelect:has(.formFieldNotice) .optionsToSelect {
  margin-bottom: 0.5rem;
}
.multipleSelect .selectClone {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.multipleSelect .selectClone .selectedOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 150px;
  overflow-y: auto;
  border-radius: 4px;
  outline: none;
  border: 1px solid var(--colorOnBorders);
  padding: 0.5rem 0.7rem;
  transition: 0.3s ease all;
  font-weight: normal;
  font-size: 1rem;
  background: transparent;
  color: var(--colorSurface-0);
  min-height: 36px;
}
.multipleSelect .selectClone .selectedOptions .selectedOption {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  background: transparent;
  font-size: 0.9rem;
  border: 1px solid var(--colorOnBorders);
  display: none;
  word-break: break-all;
}
.multipleSelect .selectClone .selectedOptions .selectedOption.selected {
  display: flex;
  visibility: visible;
}
.multipleSelect .selectClone .selectedOptions .selectedOption .remove {
  cursor: pointer;
}
.multipleSelect .selectClone .selectedOptions .selectedOption .remove svg {
  width: 16px;
  fill: var(--colorError);
  vertical-align: bottom;
}
.multipleSelect .selectClone .optionsToSelect {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--colorOnBorders);
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
  color: var(--colorSurface-600);
  scrollbar-gutter: auto;
}
.multipleSelect .selectClone .optionsToSelect.empty {
  border: 1px solid transparent;
}
.multipleSelect .selectClone .optionsToSelect .optionToSelect {
  padding: 0.5rem 0.7rem;
  transition: 0.3s ease all;
  font-size: 1rem;
  cursor: pointer;
  background: transparent;
  border-bottom: 1px solid var(--colorOnBorders);
  word-break: break-all;
}
.multipleSelect .selectClone .optionsToSelect .optionToSelect.selected {
  display: none;
}
@media (hover: hover) {
  .multipleSelect .selectClone .optionsToSelect .optionToSelect:hover {
    background: var(--colorSurface-200);
    color: var(--colorSurface-0);
  }
}

.ajaxInputSearch,
.ajaxMultipleValuesSearch {
  position: relative;
  background: var(--colorSurface-100);
}
.ajaxInputSearch[data-readonly=true] .removeAjaxInputSearchValue,
.ajaxMultipleValuesSearch[data-readonly=true] .removeAjaxInputSearchValue {
  display: none;
}
.ajaxInputSearch .viewInput,
.ajaxMultipleValuesSearch .viewInput {
  cursor: pointer;
  padding-right: 2rem;
}
.ajaxInputSearch .targetInput,
.ajaxMultipleValuesSearch .targetInput {
  display: none;
}
.ajaxInputSearch .ajaxSearchContainer,
.ajaxMultipleValuesSearch .ajaxSearchContainer {
  position: absolute;
  width: 100%;
  top: 70px;
  z-index: 9;
  border-bottom: 3px solid transparent;
  background: var(--colorSurface-100);
}
.ajaxInputSearch .ajaxSearchContainer .ajaxSearchInput,
.ajaxMultipleValuesSearch .ajaxSearchContainer .ajaxSearchInput {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  width: 100%;
  color: var(--colorSurface-600);
  transition: 0.3s ease all;
  outline: none;
  border: 1px solid var(--colorSurface-200);
  border-radius: 4px;
  background: var(--colorSurface-100);
}
.ajaxInputSearch .ajaxSearchContainer .ajaxSearchResultContainer,
.ajaxMultipleValuesSearch .ajaxSearchContainer .ajaxSearchResultContainer {
  position: absolute;
  border: 1px solid var(--colorSurface-200);
  width: 100%;
  height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--colorSurface-100);
  z-index: 9;
  top: 110%;
}
.ajaxInputSearch .ajaxSearchContainer .ajaxSearchResultContainer .ajaxSearchResult,
.ajaxMultipleValuesSearch .ajaxSearchContainer .ajaxSearchResultContainer .ajaxSearchResult {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  transition: 0.3s ease all;
  border-bottom: 1px solid var(--colorSurface-200);
  color: var(--colorSurface-600);
  word-break: break-all;
}
.ajaxInputSearch .ajaxSearchContainer .ajaxSearchResultContainer .ajaxSearchResult:hover,
.ajaxMultipleValuesSearch .ajaxSearchContainer .ajaxSearchResultContainer .ajaxSearchResult:hover {
  background: var(--colorSurface-200);
  color: var(--colorSurface-0);
}
.ajaxInputSearch .removeAjaxInputSearchValue,
.ajaxMultipleValuesSearch .removeAjaxInputSearchValue {
  cursor: pointer;
  position: absolute;
  right: 9px;
  top: 34px;
}
@media (hover: hover) {
  .ajaxInputSearch .removeAjaxInputSearchValue:hover svg,
  .ajaxMultipleValuesSearch .removeAjaxInputSearchValue:hover svg {
    fill: var(--colorError);
  }
}
.ajaxInputSearch .removeAjaxInputSearchValue svg,
.ajaxMultipleValuesSearch .removeAjaxInputSearchValue svg {
  transition: 0.3s ease all;
  width: 16px;
  fill: var(--colorSurface-600);
  vertical-align: text-bottom;
}

.ajaxMultipleValuesSearch[data-readonly=true] .viewInput {
  display: none;
}
.ajaxMultipleValuesSearch[data-readonly=true] .searchValuesInput {
  display: none;
}
.ajaxMultipleValuesSearch[data-readonly=true] .removeValue {
  display: none;
}
.ajaxMultipleValuesSearch .valuesWrapper {
  border: 1px solid var(--colorOnBorders);
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ajaxMultipleValuesSearch .valuesWrapper .searchValuesInput {
  display: none;
}
.ajaxMultipleValuesSearch .valuesWrapper:has(.value) .searchValuesInput {
  display: block;
}
.ajaxMultipleValuesSearch .valuesContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 236px;
  overflow-y: auto;
  outline: none;
  font-weight: normal;
  font-size: 1rem;
  background: transparent;
  padding: 0 0.5rem 0 0;
  color: var(--colorSurface-0);
  min-height: 36px;
}
.ajaxMultipleValuesSearch .valuesContainer .searchValuesInput {
  max-width: 100%;
}
.ajaxMultipleValuesSearch .valuesContainer .value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  background: transparent;
  font-size: 0.9rem;
  border: 1px solid var(--colorOnBorders);
  word-break: break-all;
}
.ajaxMultipleValuesSearch .valuesContainer .value.hidden {
  display: none;
}
.ajaxMultipleValuesSearch .valuesContainer .value .removeValue {
  cursor: pointer;
}
.ajaxMultipleValuesSearch .valuesContainer .value .removeValue svg {
  width: 16px;
  fill: var(--colorError);
  vertical-align: text-bottom;
}
.ajaxMultipleValuesSearch .ajaxSearchContainer {
  top: 0;
}
.ajaxMultipleValuesSearch:has(> label) .ajaxSearchContainer {
  top: 29px;
}

.documentsSelect .documentsContainer {
  border: 1px dashed var(--colorOnBorders);
  border-radius: 4px;
  padding: 1rem;
  cursor: pointer;
  transition: 0.3s ease all;
  min-height: 133px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 311px;
  overflow-y: auto;
}
.documentsSelect .documentsContainer:has(.document) {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.documentsSelect .documentsContainer:has(.document) .documentsText {
  display: none;
}
@media (hover: hover) {
  .documentsSelect .documentsContainer:hover {
    border: 1px dashed var(--colorSurface-400);
  }
  .documentsSelect .documentsContainer:hover:has(.formFieldNotice) {
    border: 1px dashed var(--colorError);
  }
}
.documentsSelect .documentsContainer .documentsText svg {
  width: 30px;
  fill: var(--colorSurface-600);
}
.documentsSelect .documentsContainer .document {
  width: 100%;
  border-radius: 4px;
  position: relative;
  border: 1px dashed var(--colorSurface-200);
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--colorSurface-600);
}
.documentsSelect .documentsContainer .document .removeDocument {
  cursor: pointer;
  height: 20px;
}
@media (hover: hover) {
  .documentsSelect .documentsContainer .document .removeDocument:hover svg {
    fill: var(--colorError);
  }
}
.documentsSelect .documentsContainer .document .removeDocument svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
  width: 20px;
}
.documentsSelect .documentsContainer .document .documentPreviewInDocuments {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.documentsSelect .documentsContainer .document .documentPreviewInDocuments svg {
  width: 16px;
  height: 16px;
  fill: var(--colorSurface-600);
}
.documentsSelect .documentsContainer .document .documentPreviewInDocuments span {
  word-break: break-word;
}
.documentsSelect .documentsContainer .document .documentPreviewInDocuments > div {
  height: 16px;
}

.documentsSelect[data-readonly=true] {
  pointer-events: none;
}
.documentsSelect[data-readonly=true] .removeDocument {
  display: none;
}

.tooltipTrigger {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
@media (hover: hover) {
  .tooltipTrigger:hover svg {
    fill: var(--colorPrimary-500);
  }
}
.tooltipTrigger svg {
  width: 18px;
  fill: var(--colorSurface-600);
  vertical-align: bottom;
  transition: 0.3s ease all;
}

.tooltipContent {
  position: absolute;
  background: var(--colorSurface-100);
  top: 28px;
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 0.9rem;
  border: 1px solid var(--colorOnBorders);
  font-style: italic;
  color: var(--colorSurface-600);
  word-break: break-word;
  transition: 0.3s ease opacity;
  opacity: 0;
  transform: scale(0);
}
.tooltipContent.active {
  opacity: 1;
  z-index: 99;
  transform: scale(1);
  animation: fadeInFromTop 0.3s ease forwards;
}

/* ============================== Gallery ================================== */
.gallery {
  --galleryGap: 10px;
  --galleryTileWidth: 220px;
  --galleryTileRatio: 1.5;
  --galleryColumns: 3;
  --galleryRowHeight: 220px;
}
.gallery .galleryItem {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  background: var(--colorSurface-200);
}
.gallery .galleryItem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease transform;
}
.gallery .galleryItem:hover img {
  transform: scale(1.04);
}
.gallery .galleryItem .galleryCaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(0.4rem);
  transition: 0.25s ease opacity, 0.25s ease transform;
  pointer-events: none;
}
.gallery .galleryItem:hover .galleryCaption, .gallery .galleryItem:focus-visible .galleryCaption {
  opacity: 1;
  transform: translateY(0);
}
.gallery .galleryItem .galleryExtras {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  transition: 0.25s ease background;
}
.gallery .galleryItem.galleryItemLast .galleryCaption {
  display: none;
}
.gallery .galleryItem.galleryItemLast:hover .galleryExtras {
  background: rgba(0, 0, 0, 0.68);
}
.gallery .galleryItemHidden {
  display: none;
}
.gallery .galleryPlaceholder {
  cursor: default;
  background: var(--colorSurface-300);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: galleryShimmer 1.4s ease-in-out infinite;
}
.gallery .galleryPlaceholder:hover {
  background-color: var(--colorSurface-300);
}
.gallery.galleryMasonry .galleryPlaceholder {
  aspect-ratio: var(--galleryTileRatio);
}

@keyframes galleryShimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery .galleryPlaceholder {
    animation: none;
  }
}
/* Grid — uniform tiles that re-flow, cropped to a fixed ratio. */
.galleryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--galleryTileWidth), 1fr));
  gap: var(--galleryGap);
}
.galleryGrid .galleryItem {
  aspect-ratio: var(--galleryTileRatio);
}

/* Justified — JS sets each tile's px size so every row fills the width exactly. */
.galleryJustified {
  display: flex;
  flex-wrap: wrap;
  gap: var(--galleryGap);
}
.galleryJustified .galleryItem {
  flex: 0 0 auto;
}

/* Masonry — JS builds the columns and places each tile in the shortest one; this just lays
   the columns out. Nothing is cropped, so heights vary. */
.galleryMasonry {
  display: flex;
  align-items: flex-start;
  gap: var(--galleryGap);
}
.galleryMasonry .galleryColumn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--galleryGap);
}
.galleryMasonry .galleryItem img {
  height: auto;
}

/* Two columns on small screens rather than one very wide tile. */
@media only screen and (max-width: 560px) {
  .galleryGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ============================== Lightbox ================================= */
.galleryScrollLocked {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.lightbox.lightboxOpen {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s;
}
.lightbox .lightboxTopBar {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}
.lightbox .lightboxCount {
  color: #d4d4d4;
  font-size: 0.9rem;
  font-weight: 700;
}
.lightbox .lightboxActions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.lightbox .lightboxAction {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: 0.2s ease background;
}
.lightbox .lightboxAction svg {
  width: 22px;
  height: 22px;
  fill: #d4d4d4;
  pointer-events: none;
  transition: 0.2s ease fill;
}
.lightbox .lightboxAction:hover {
  background: rgba(255, 255, 255, 0.12);
}
.lightbox .lightboxAction:hover svg {
  fill: #fff;
}
.lightbox .lightboxAction.galleryDisabled {
  opacity: 0.25;
  pointer-events: none;
}
.lightbox .lightboxShare {
  position: relative;
}
.lightbox .lightboxShareMenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  display: none;
  flex-direction: column;
  min-width: 150px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  scrollbar-gutter: auto;
}
.lightbox .lightboxShareMenu.active {
  display: flex;
}
.lightbox .lightboxShareMenu a {
  padding: 0.6rem 0.9rem;
  color: #222;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  transition: 0.2s ease background, 0.2s ease color;
}
.lightbox .lightboxShareMenu a + a {
  border-top: 1px solid #e6e6e6;
}
.lightbox .lightboxShareMenu a:hover {
  background: var(--colorPrimary-500);
  color: #fff;
}
.lightbox .lightboxStage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}
.lightbox .lightboxSlide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lightbox .lightboxSlide.lightboxSlideActive {
  display: flex;
}
.lightbox .lightboxSlide img {
  pointer-events: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.lightbox.lightboxZoomed .lightboxSlide img {
  transition: none;
  cursor: grab;
}
.lightbox .lightboxLoader {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--colorPrimary-500);
  border-radius: 50%;
  animation: gallerySpin 0.9s linear infinite;
}
.lightbox .lightboxLoader.galleryHidden {
  display: none;
}
.lightbox .lightboxPrevious,
.lightbox .lightboxNext {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
}
.lightbox .lightboxPrevious:hover,
.lightbox .lightboxNext:hover {
  background: rgba(0, 0, 0, 0.7);
}
.lightbox .lightboxPrevious {
  left: 1rem;
}
.lightbox .lightboxNext {
  right: 1rem;
}
.lightbox .lightboxFooter {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 0.9rem 1rem;
  color: #d3d3d3;
  text-align: center;
  font-size: 0.85rem;
}
.lightbox .lightboxFooter.galleryHidden {
  visibility: hidden;
}
@media only screen and (max-width: 768px) {
  .lightbox .lightboxPrevious {
    left: 0.35rem;
  }
  .lightbox .lightboxNext {
    right: 0.35rem;
  }
}

@keyframes gallerySpin {
  to {
    transform: rotate(360deg);
  }
}
.slider {
  --sliderPerView: 1;
  --sliderGap: 16px;
  --sliderArrowSize: 40px;
  --sliderArrowSpace: 52px;
  position: relative;
  max-width: 100%;
  min-width: 0;
}
.slider.sliderHasArrows {
  padding-inline: var(--sliderArrowSpace);
}
.slider .sliderViewport {
  display: flex;
  min-width: 0;
  gap: var(--sliderGap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.slider .sliderViewport::-webkit-scrollbar {
  display: none;
}
.slider .sliderViewport:focus-visible {
  outline: 2px solid var(--colorPrimary-500);
  outline-offset: 2px;
}
.slider .sliderSlide {
  flex: 0 0 calc((100% - (var(--sliderPerView) - 1) * var(--sliderGap)) / var(--sliderPerView));
  min-width: 0;
  max-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.slider.sliderJumping .sliderSlide {
  scroll-snap-stop: normal;
}
.slider.sliderDragging .sliderViewport {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}
.slider.sliderDragging img {
  pointer-events: none;
}
.slider .sliderSlide img {
  -webkit-user-drag: none;
  user-select: none;
}
.slider .sliderArrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sliderArrowSize);
  height: var(--sliderArrowSize);
  padding: 0;
  border: 1px solid var(--colorSurface-300);
  border-radius: 50%;
  background: var(--colorSurface-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: 0.2s ease background, 0.2s ease border-color, 0.2s ease opacity;
}
.slider .sliderArrow svg {
  width: 22px;
  height: 22px;
  fill: var(--colorSurface-700);
  pointer-events: none;
  transition: 0.2s ease fill;
}
.slider .sliderArrow:hover {
  background: var(--colorPrimary-500);
  border-color: var(--colorPrimary-500);
}
.slider .sliderArrow:hover svg {
  fill: #fff;
}
.slider .sliderArrow.sliderDisabled {
  opacity: 0.3;
  pointer-events: none;
}
.slider .sliderPrevious {
  left: 0;
}
.slider .sliderNext {
  right: 0;
}
.slider .sliderDots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.slider .sliderDots.sliderHidden {
  display: none;
}
.slider .sliderDot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--colorSurface-300);
  cursor: pointer;
  transition: 0.2s ease background, 0.2s ease transform;
}
.slider .sliderDot:hover {
  background: var(--colorSurface-600);
}
.slider .sliderDot.sliderDotActive {
  background: var(--colorPrimary-500);
  transform: scale(1.3);
}
@media only screen and (max-width: 700px) {
  .slider {
    --sliderArrowSize: 32px;
    --sliderArrowSpace: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider .sliderViewport {
    scroll-behavior: auto;
  }
  .slider .sliderDot {
    transition: none;
  }
}
.imageCompare {
  --imageComparePosition: 50%;
  --imageCompareHandleSize: 40px;
  max-width: 100%;
  min-width: 0;
  /* ------------------------------- Vertical ------------------------------- */
}
.imageCompare .imageCompareFrame {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  touch-action: none;
  cursor: ew-resize;
  user-select: none;
}
.imageCompare .imageCompareAfter {
  display: block;
  width: 100%;
  height: auto;
}
.imageCompare .imageComparePane {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--imageComparePosition)) 0 0);
}
.imageCompare .imageComparePane .imageCompareBefore {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imageCompare .imageCompareHandle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--imageComparePosition);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
  outline: none;
}
.imageCompare .imageCompareHandle:focus-visible .imageCompareGrip {
  box-shadow: 0 0 0 3px var(--colorPrimary-500);
}
.imageCompare .imageCompareGrip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--imageCompareHandleSize);
  height: var(--imageCompareHandleSize);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: 0.2s ease transform, 0.2s ease box-shadow;
}
.imageCompare .imageCompareGrip::before, .imageCompare .imageCompareGrip::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.imageCompare .imageCompareGrip::before {
  border-right: 7px solid var(--colorSurface-700);
  margin-right: 3px;
}
.imageCompare .imageCompareGrip::after {
  border-left: 7px solid var(--colorSurface-700);
  margin-left: 3px;
}
.imageCompare .imageCompareLabel {
  position: absolute;
  bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  pointer-events: none;
}
.imageCompare .imageCompareLabelBefore {
  left: 0.75rem;
}
.imageCompare .imageCompareLabelAfter {
  right: 0.75rem;
}
.imageCompare.imageCompareDragging .imageCompareGrip {
  transition: none;
}
.imageCompare.imageCompareDragging .imageCompareFrame {
  cursor: grabbing;
}
.imageCompare:not(.imageCompareDragging) .imageCompareFrame:hover .imageCompareGrip {
  transform: translate(-50%, -50%) scale(1.1);
}
.imageCompare.imageCompareVertical .imageCompareFrame {
  cursor: ns-resize;
}
.imageCompare.imageCompareVertical .imageComparePane {
  clip-path: inset(0 0 calc(100% - var(--imageComparePosition)) 0);
}
.imageCompare.imageCompareVertical .imageCompareHandle {
  top: var(--imageComparePosition);
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 2px;
  margin-left: 0;
  margin-top: -1px;
  cursor: ns-resize;
}
.imageCompare.imageCompareVertical .imageCompareGrip {
  transform: translate(-50%, -50%) rotate(90deg);
}
.imageCompare.imageCompareVertical:not(.imageCompareDragging) .imageCompareFrame:hover .imageCompareGrip {
  transform: translate(-50%, -50%) rotate(90deg) scale(1.1);
}
.imageCompare.imageCompareVertical .imageCompareLabelBefore {
  top: 0.75rem;
  bottom: auto;
  left: 0.75rem;
}
.imageCompare.imageCompareVertical .imageCompareLabelAfter {
  bottom: 0.75rem;
  right: auto;
  left: 0.75rem;
}

.dynamicInputs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dynamicInputs .dynamicInputContainer {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.dynamicInputs .dynamicInputContainer:has(.dynamicInputWrapper) {
  border: 1px dashed var(--colorOnBorders);
  border-radius: 4px;
}
.dynamicInputs .dynamicInputWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
  padding-right: 1.5rem;
}
.dynamicInputs .dynamicInputWrapper .removeDynamicInput {
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.5rem;
}
.dynamicInputs .dynamicInputWrapper .removeDynamicInput svg {
  width: 20px;
  height: 20px;
  fill: var(--colorError);
}

.textEditor {
  border: 1px solid var(--colorOnBorders);
  border-radius: 4px;
  position: relative;
  container-type: inline-size;
  container-name: textEditor;
}
.textEditor[data-readonly=true] .commands {
  display: none;
}
.textEditor:has(.formFieldNotice) {
  border-color: var(--colorError);
}
.textEditor:has(.formFieldNotice) .commands {
  border-color: var(--colorError);
}
.textEditor .formFieldNotice {
  margin: 1rem auto;
  display: block;
  width: max-content;
}
.textEditor .commands {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--colorOnBorders);
}
.textEditor .commands button,
.textEditor .commands .viewCode {
  cursor: pointer;
  padding: 0.3rem;
  border: 1px solid var(--colorOnBorders);
  background: transparent;
  border-radius: 4px;
}
.textEditor .commands button.active svg,
.textEditor .commands .viewCode.active svg {
  fill: var(--colorPrimary-500);
}
.textEditor .commands button svg,
.textEditor .commands .viewCode svg {
  width: 18px;
  height: 12px;
  fill: var(--colorSurface-600);
}
.textEditor .commands button[title=justifyLeft],
.textEditor .commands .viewCode[title=justifyLeft] {
  margin-left: auto;
}
.textEditor .commands .viewCode {
  order: 999;
  width: 29px;
  height: 27px;
}
.textEditor .commands .viewCode svg {
  width: 16px;
  height: 14px;
  vertical-align: top;
}
.textEditor .codeEditorContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--colorSurface-100);
  border-radius: 4px;
  display: none;
  padding: 2rem 1rem;
  height: 100%;
  font-family: "DM Sans", sans-serif;
}
.textEditor .codeEditorContainer.active {
  display: block;
}
.textEditor .codeEditorContainer textarea {
  border: 1px solid var(--colorOnBorders);
  height: 130px;
  background: var(--colorSurface-100);
  border-radius: 4px;
  padding: 0.5rem;
  width: 100%;
  color: var(--colorSurface-600);
}
.textEditor .codeEditorContainer textarea:focus {
  outline: none;
}
.textEditor .codeEditorContainer .closeCodeEditor {
  cursor: pointer;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
@media (hover: hover) {
  .textEditor .codeEditorContainer .closeCodeEditor:hover svg {
    fill: var(--colorSurface-0);
  }
}
.textEditor .codeEditorContainer .closeCodeEditor svg {
  width: 20px;
  height: 20px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
.textEditor .textEditorContent {
  padding: 0.5rem;
  min-height: 150px;
  color: var(--colorSurface-600);
  max-height: 150px;
  overflow-y: auto;
}
.textEditor .textEditorContent *[contenteditable=true] {
  outline: none;
}
.textEditor .textEditorContent:focus {
  outline: none;
}
.textEditor .textEditorContent a {
  color: var(--colorPrimary-500);
}
.textEditor .textEditorContent ul {
  padding-left: 1rem;
  list-style: disc;
}
.textEditor .textEditorContent ol {
  padding-left: 1rem;
  list-style: decimal;
}
.textEditor .textEditorValue {
  display: none;
}

@container textEditor (max-width:440px) {
  .commands {
    flex-wrap: wrap;
  }
  .commands button[title=justifyLeft] {
    margin-left: 0 !important;
  }
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: attr(data-value) !important;
}

.ql-picker-label:hover {
  color: var(--colorPrimary-500) !important;
}
.ql-picker-label:hover polygon {
  stroke: var(--colorPrimary-500) !important;
}
.ql-picker-label.ql-active {
  color: var(--colorPrimary-500) !important;
}
.ql-picker-label.ql-active polygon {
  stroke: var(--colorPrimary-500) !important;
}

.ql-tooltip .ql-preview {
  color: var(--colorPrimary-500) !important;
}

.ql-remove {
  color: var(--colorPrimary-500) !important;
}

.valuesGenerator[data-readonly=true] .inputForNewValues {
  display: none;
}
.valuesGenerator[data-readonly=true] .searchValuesInput {
  display: none;
}
.valuesGenerator[data-readonly=true] .removeValue {
  display: none;
}
.valuesGenerator .valuesContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--colorOnBorders);
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  max-height: 236px;
  overflow-y: auto;
}
.valuesGenerator .valuesContainer .value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  background: transparent;
  font-size: 0.9rem;
  border: 1px solid var(--colorOnBorders);
  word-break: break-all;
}
.valuesGenerator .valuesContainer .value span {
  color: var(--colorSurface-0);
}
.valuesGenerator .valuesContainer .value .removeValue {
  cursor: pointer;
}
.valuesGenerator .valuesContainer .value .removeValue svg {
  width: 16px;
  fill: var(--colorError);
  vertical-align: text-bottom;
}

#toTopButton {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--colorSurface-200);
  cursor: pointer;
  bottom: 20px;
  right: 20px;
  border: 1px solid var(--colorSurface-600);
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0.1;
  transition: 0.3s ease all;
}
#toTopButton.show {
  display: flex;
}
@media (hover: hover) {
  #toTopButton:hover {
    opacity: 1;
  }
}
#toTopButton svg {
  width: 20px;
  height: 20px;
  fill: var(--colorSurface-600);
}

#notifications {
  position: relative;
}

#notificationsContainer {
  position: fixed;
  right: -500px;
  top: 60px;
  transition: right 0.3s ease;
  max-height: 312px;
  overflow-y: auto;
  z-index: 4;
  border: 1px solid var(--colorSurface-400);
  padding: 1rem;
  background: var(--colorSurface-200);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 400px;
  max-width: 90%;
}
#notificationsContainer.show {
  right: 2rem;
}
@media (max-width: 1024px) {
  #notificationsContainer.show {
    right: 1rem;
  }
}
#notificationsContainer .dismiss {
  cursor: pointer;
  background: var(--colorSurface-300);
  padding: 0.3rem 0.7rem;
  color: var(--colorSurface-600);
  border-radius: 4px;
  margin-left: auto;
  font-size: 0.8rem;
  transition: 0.3s ease all;
  flex-shrink: 0;
  border: none;
  outline: none;
}
@media (hover: hover) {
  #notificationsContainer .dismiss:hover {
    background: var(--colorSurface-400);
    color: var(--colorSurface-0);
  }
}
#notificationsContainer #notificationHeader {
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
}
#notificationsContainer #notificationHeader .dismiss {
  background: var(--colorError);
  color: white;
}
@media (hover: hover) {
  #notificationsContainer #notificationHeader .dismiss:hover {
    background: var(--colorErrorDark);
  }
}
#notificationsContainer .notification {
  padding: 0.5rem;
  border: 1px solid var(--colorSurface-400);
  border-radius: 4px;
  display: flex;
  gap: 0.5rem;
  color: var(--colorSurface-600);
  align-items: center;
  word-break: break-word;
}
#notificationsContainer .notification .type {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
#notificationsContainer .notification .type.success {
  background: var(--colorSuccess);
}
#notificationsContainer .notification .type.error {
  background: var(--colorError);
}
#notificationsContainer .notification .type.warning {
  background: var(--colorWarning);
}
#notificationsContainer .notification .type.info {
  background: var(--colorInfo);
}
@media (hover: hover) {
  #notificationsContainer .notification:hover {
    border: 1px solid var(--colorPrimary-500);
  }
}

#notificationCountContainer {
  position: absolute;
  top: 0;
  left: 24px;
  width: max-content;
  font-size: 0.6rem;
  color: var(--colorPrimary-500);
  font-weight: bold;
}

dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--colorSurface-100);
  padding: 3rem 1rem;
  border-radius: 4px;
  outline: none;
  color: var(--colorSurface-600);
  border: 1px solid var(--colorSurface-200);
}
@media (max-width: 768px) {
  dialog {
    width: 90% !important;
    height: 90% !important;
  }
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
dialog .closeModal {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}
dialog .closeModal svg {
  fill: var(--colorSurface-600);
  width: 20px;
  transition: 0.3s ease all;
}
@media (hover: hover) {
  dialog .closeModal svg:hover {
    fill: var(--colorSurface-0);
  }
}

.exportColumnsContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
}

.exportCheckboxContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.exportSelectContainer select {
  width: max-content;
}

.promptDialog {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  transition: transform 0.2s;
  transform: translate(-50%, -50%) scale(1);
}
.promptDialog.hiddenPrompt {
  transform: translate(-50%, -50%) scale(0.8);
}
.promptDialog span {
  color: var(--colorSurface-600);
  font-size: 1.1rem;
}
.promptDialog .dialogButtonContainer {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.promptDialog .btn {
  margin: 0;
}
@media (max-width: 768px) {
  .promptDialog {
    width: max-content !important;
    height: max-content !important;
  }
}

.dndiContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-sizing: border-box;
  width: max-content;
}
.dndiContainer.childIsDragging .item h2:hover {
  border: 1px solid var(--colorOnBorders);
}
.dndiContainer .item {
  color: #f7f7f7;
  box-sizing: border-box;
  width: 300px;
}
.dndiContainer .item:has(.itemContent.active) h2 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dndiContainer .item.grouped {
  display: none;
}
.dndiContainer .item.dragging {
  opacity: 0.1;
}
.dndiContainer .item.level2 {
  margin-left: 2rem;
}
.dndiContainer .item.level3 {
  margin-left: 4rem;
}
.dndiContainer .item .itemContent {
  display: none;
  padding: 1rem;
  border: 1px solid var(--colorOnBorders);
  border-top: none;
}
.dndiContainer .item .itemContent.active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dndiContainer .item .itemContent .removeItem {
  background: transparent;
  border: 1px solid var(--colorError);
  color: var(--colorError);
  padding: 0.4rem 0.7rem;
  font-size: 12px;
  width: max-content;
  cursor: pointer;
  transition: 0.3s ease all;
  border-radius: 5px;
}
@media (hover: hover) {
  .dndiContainer .item .itemContent .removeItem:hover {
    background: var(--colorError);
    color: white;
  }
}
.dndiContainer .item .itemContent input {
  padding: 0.3rem 0.5rem;
}
.dndiContainer .item .itemContent .inputContainer {
  min-height: unset !important;
  flex-direction: row;
  align-items: center;
}
.dndiContainer .item .itemContent .inputContainer input[type=checkbox] {
  width: 14px;
  height: 14px;
}
.dndiContainer h2 {
  margin: 0;
  font-size: 1rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--colorOnBorders);
  padding: 0.5rem;
  transition: 0.3s ease border;
  min-height: 39px;
  box-sizing: border-box;
  border-radius: 4px;
  color: var(--colorSurface-600);
}
.dndiContainer h2:hover {
  border: 1px solid var(--colorPrimary-500);
}
.dndiContainer .submitContainer {
  position: relative;
  order: 100;
}

.chart {
  width: 100%;
  font-family: inherit;
}
.chart * svg {
  pointer-events: auto;
}
.chart .chartTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--colorSurface-700);
  margin-bottom: 10px;
}
.chart .chartCanvas {
  position: relative;
  width: 100%;
}
.chart .chartSvg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart .chartGridLine {
  stroke: var(--colorSurface-300);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  shape-rendering: crispEdges;
}
.chart .chartZeroLine {
  stroke: var(--colorSurface-500);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.chart .chartTickLabel {
  fill: var(--colorSurface-600);
  font-size: 11px;
}
.chart .chartAxisLabel {
  fill: var(--colorSurface-700);
  font-size: 12px;
}
.chart .chartEmpty {
  fill: var(--colorSurface-600);
  font-size: 13px;
}
.chart .chartBar {
  transition: opacity 0.15s ease;
}
.chart .chartBar:hover {
  opacity: 0.82;
}
.chart .chartLine {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .chartArea {
  pointer-events: none;
}
.chart .chartPoint {
  stroke: var(--colorSurface-100);
  stroke-width: 1.5;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.12s ease;
}
.chart .chartPoint.chartActive {
  transform: scale(1.6);
}
.chart .chartHit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}
.chart .chartSlice {
  stroke: transparent;
  stroke-width: 2;
  transition: opacity 0.15s ease;
  cursor: pointer;
}
.chart .chartSlice:hover {
  opacity: 0.85;
}
.chart .chartSliceLabel {
  fill: var(--colorSurface-0);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}
.chart .chartValueLabel {
  fill: var(--colorSurface-700);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
}
.chart .chartValueLabel.chartValueLabelOnFill {
  fill: var(--colorSurface-0);
  font-weight: 600;
}
.chart .chartValueHover {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.chart .chartValueHover.chartActive {
  opacity: 1;
}
.chart .chartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}
.chart .chartLegend:empty {
  display: none;
}
.chart .chartLegendItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--colorSurface-700);
  user-select: none;
  transition: opacity 0.15s ease;
}
.chart .chartLegendItem span {
  color: var(--colorSurface-600);
}
.chart .chartLegendItem.chartLegendItemHidden {
  opacity: 0.4;
}
.chart .chartLegendItem.chartLegendItemHidden span:last-child {
  text-decoration: line-through;
}
.chart .chartLegendSwatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.chart .chartTooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  background: var(--colorSurface-200);
  border: 1px solid var(--colorSurface-300);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--colorSurface-700);
  white-space: nowrap;
  box-shadow: 0 4px 14px var(--colorGrayTransparent);
}
.chart .chartTooltip strong {
  display: block;
  margin-bottom: 3px;
  color: var(--colorSurface-0);
  font-weight: 600;
}
.chart .chartTooltip.chartTooltipVisible {
  opacity: 1;
  transform: translateY(0);
}
.chart .chartTooltipRow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chart .chartTooltipDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart.chartAnimate .chartBar {
  transform-box: fill-box;
  animation: chartFade 0.4s ease both;
}
.chart.chartAnimate[data-chart-type=bar] .chartBar, .chart.chartAnimate[data-chart-type=horizontalBar] .chartBar {
  animation: chartGrow 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chart.chartAnimate[data-chart-type=bar] .chartBar {
  transform-origin: bottom;
}
.chart.chartAnimate[data-chart-type=horizontalBar] .chartBar {
  transform-origin: left;
}
.chart.chartAnimate .chartLine,
.chart.chartAnimate .chartArea,
.chart.chartAnimate .chartPoint,
.chart.chartAnimate .chartSlice,
.chart.chartAnimate .chartSliceLabel,
.chart.chartAnimate .chartValueLabel {
  animation: chartFade 0.5s ease both;
}
.chart.chartAnimate .chartValueHover {
  animation: none;
}
.chart.chartAnimateToggle .chartBar,
.chart.chartAnimateToggle .chartLine,
.chart.chartAnimateToggle .chartArea,
.chart.chartAnimateToggle .chartPoint,
.chart.chartAnimateToggle .chartSlice,
.chart.chartAnimateToggle .chartSliceLabel,
.chart.chartAnimateToggle .chartValueLabel {
  animation: chartFade 0.28s ease both;
}
.chart.chartAnimateToggle .chartValueHover {
  animation: none;
}

@keyframes chartGrow {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes chartFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.countdownTimer {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-family: inherit;
}
.countdownTimer .countdownUnit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.countdownTimer .countdownRingWrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdownTimer .countdownRing {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.countdownTimer .countdownTrack {
  fill: none;
  stroke: var(--colorSurface-300);
}
.countdownTimer .countdownProgress {
  fill: none;
  stroke: var(--colorPrimary-500);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s linear;
}
.countdownTimer .countdownValue {
  position: absolute;
  font-weight: 600;
  line-height: 1;
  color: var(--colorSurface-0);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.countdownTimer .countdownLabel {
  font-size: 0.75rem;
  color: var(--colorSurface-600);
  user-select: none;
}
.countdownTimer.countdownComplete .countdownProgress {
  stroke: var(--colorSurface-500);
}
.countdownTimer.countdownComplete .countdownValue {
  color: var(--colorSurface-600);
}

.diffViewer {
  --diffAdded: var(--colorSuccess);
  --diffAddedBg: var(--colorSuccessTransparent);
  --diffRemoved: var(--colorError);
  --diffRemovedBg: var(--colorErrorTransparent);
  --diffModified: var(--colorWarning);
  --diffModifiedBg: var(--colorWarningTransparent);
  --diffMoved: var(--colorBlue);
  --diffMovedBg: var(--colorBlueTransparent);
  --diffBorder: var(--colorSurface-300);
  --diffMuted: var(--colorSurface-600);
  --diffSurface: var(--colorSurface-200);
  --diffFont: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--colorSurface-700);
  font-family: inherit;
  /* ------------------------------ Toolbar ------------------------------ */
  /* ------------------------------- Marks ------------------------------- */
  /* ------------------------------- Text -------------------------------- */
  /* ------------------------------- Items -------------------------------- */
  /* ----------------------------- Collapsing ----------------------------- */
}
.diffViewer .diffToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--diffBorder);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--diffSurface);
}
.diffViewer .diffStats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.diffViewer .diffStat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--diffMuted);
}
.diffViewer .diffStat .diffStatCount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.diffViewer .diffStat[data-diff-status=added] .diffStatCount {
  color: var(--diffAdded);
}
.diffViewer .diffStat[data-diff-status=removed] .diffStatCount {
  color: var(--diffRemoved);
}
.diffViewer .diffStat[data-diff-status=modified] .diffStatCount {
  color: var(--diffModified);
}
.diffViewer .diffStat[data-diff-status=moved] .diffStatCount {
  color: var(--diffMoved);
}
.diffViewer .diffToggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--diffMuted);
  cursor: pointer;
  user-select: none;
}
.diffViewer .diffToggle .diffToggleInput {
  cursor: pointer;
  accent-color: var(--colorPrimary-500);
}
.diffViewer .diffIns,
.diffViewer .diffDel {
  text-decoration: none;
  border-radius: 2px;
  padding: 0 1px;
}
.diffViewer .diffIns {
  background: var(--diffAddedBg);
  color: var(--diffAdded);
}
.diffViewer .diffDel {
  background: var(--diffRemovedBg);
  color: var(--diffRemoved);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.diffViewer .diffText,
.diffViewer .diffSplit {
  border: 1px solid var(--diffBorder);
  border-radius: 0 0 6px 6px;
  overflow: auto;
  font-family: var(--diffFont);
  font-size: 0.85rem;
  line-height: 1.6;
}
.diffViewer .diffRow {
  display: flex;
  align-items: flex-start;
  min-height: 1.6em;
}
.diffViewer .diffRow .diffGutter {
  flex: 0 0 3ch;
  padding: 0 0.5rem;
  text-align: right;
  color: var(--diffMuted);
  background: var(--diffSurface);
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.diffViewer .diffRow .diffContent {
  flex: 1;
  padding: 0 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.diffViewer .diffRow .diffContent::before {
  display: inline-block;
  width: 1.5ch;
  color: var(--diffMuted);
  content: " ";
}
.diffViewer .diffRow[data-diff-status=added] {
  background: var(--diffAddedBg);
}
.diffViewer .diffRow[data-diff-status=added] .diffContent::before {
  content: "+";
  color: var(--diffAdded);
}
.diffViewer .diffRow[data-diff-status=removed] {
  background: var(--diffRemovedBg);
}
.diffViewer .diffRow[data-diff-status=removed] .diffContent::before {
  content: "-";
  color: var(--diffRemoved);
}
.diffViewer .diffFiller {
  background: var(--diffSurface);
  opacity: 0.4;
}
.diffViewer .diffSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.diffViewer .diffSplit .diffSide {
  min-width: 0;
}
.diffViewer .diffSplit .diffSide.diffSideBefore {
  border-right: 1px solid var(--diffBorder);
}
.diffViewer .diffSplit .diffSideLabel {
  position: sticky;
  top: 0;
  padding: 0.35rem 0.75rem;
  font-family: inherit;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--diffMuted);
  background: var(--diffSurface);
  border-bottom: 1px solid var(--diffBorder);
}
.diffViewer .diffSplit .diffSideBefore .diffGutterAfter,
.diffViewer .diffSplit .diffSideAfter .diffGutterBefore {
  display: none;
}
.diffViewer .diffItems {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--diffBorder);
  border-radius: 0 0 6px 6px;
}
.diffViewer .diffItemsSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--diffBorder);
  border-radius: 0 0 6px 6px;
}
.diffViewer .diffItemsSplit > .diffSideLabel {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--diffMuted);
  background: var(--diffSurface);
  border-bottom: 1px solid var(--diffBorder);
}
.diffViewer .diffItemsSplit > .diffSpanBoth {
  grid-column: 1/-1;
}
.diffViewer .diffItemsSplit > .diffItem.diffFiller {
  border-style: dashed;
  border-left-width: 1px;
  background: transparent;
  opacity: 0.35;
}
.diffViewer .diffItem {
  border: 1px solid var(--diffBorder);
  border-left-width: 3px;
  border-radius: 4px;
  background: var(--diffSurface);
  overflow: hidden;
}
.diffViewer .diffItem[data-diff-status=added] {
  border-left-color: var(--diffAdded);
}
.diffViewer .diffItem[data-diff-status=removed] {
  border-left-color: var(--diffRemoved);
}
.diffViewer .diffItem[data-diff-status=modified] {
  border-left-color: var(--diffModified);
}
.diffViewer .diffItem[data-diff-status=moved] {
  border-left-color: var(--diffMoved);
}
.diffViewer .diffItem[data-diff-status=unchanged] {
  opacity: 0.65;
}
.diffViewer .diffItem[data-diff-status=removed] .diffPreview {
  text-decoration: line-through;
  text-decoration-color: var(--diffRemoved);
  opacity: 0.75;
}
.diffViewer .diffItemHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--diffBorder);
}
.diffViewer .diffItemLabel {
  font-size: 0.8rem;
  color: var(--diffMuted);
}
.diffViewer .diffItemBadges {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.diffViewer .diffBadge {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.diffViewer .diffBadge[data-diff-status=added] {
  background: var(--diffAddedBg);
  color: var(--diffAdded);
}
.diffViewer .diffBadge[data-diff-status=removed] {
  background: var(--diffRemovedBg);
  color: var(--diffRemoved);
}
.diffViewer .diffBadge[data-diff-status=modified] {
  background: var(--diffModifiedBg);
  color: var(--diffModified);
}
.diffViewer .diffBadge[data-diff-status=moved] {
  background: var(--diffMovedBg);
  color: var(--diffMoved);
}
.diffViewer .diffBadge[data-diff-status=unchanged] {
  background: var(--colorGrayTransparent);
  color: var(--diffMuted);
}
.diffViewer .diffItemBody {
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.diffViewer .diffPreview {
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
}
.diffViewer .diffPreview a {
  color: var(--colorPrimary-500);
}
.diffViewer .diffPreview img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
.diffViewer .diffPreview table {
  border-collapse: collapse;
  font-size: 0.8rem;
  max-width: 100%;
}
.diffViewer .diffPreview table th,
.diffViewer .diffPreview table td {
  border: 1px solid var(--diffBorder);
  padding: 0.15rem 0.4rem;
  text-align: left;
}
.diffViewer .diffPreview table th {
  color: var(--diffMuted);
  font-weight: 600;
}
.diffViewer .diffPreview pre {
  margin: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 3px;
  background: var(--colorGrayTransparent);
  overflow-x: auto;
}
.diffViewer .diffPreview code {
  font-family: var(--diffFont);
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-all;
}
.diffViewer .diffPreview > :first-child {
  margin-top: 0;
}
.diffViewer .diffPreview > :last-child {
  margin-bottom: 0;
}
.diffViewer .diffFields {
  font-family: var(--diffFont);
  font-size: 0.8rem;
}
.diffViewer .diffFields > .diffFieldsSummary {
  cursor: pointer;
  color: var(--diffMuted);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.diffViewer .diffFields > .diffFieldsSummary::-webkit-details-marker {
  display: none;
}
.diffViewer .diffFields > .diffFieldsSummary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 0.15s ease;
}
.diffViewer .diffFields > .diffFieldsSummary:hover {
  color: var(--colorSurface-700);
}
.diffViewer .diffFields[open] > .diffFieldsSummary::before {
  transform: rotate(90deg);
}
.diffViewer .diffFields .diffFieldsList {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.diffViewer .diffField {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.diffViewer .diffField .diffFieldKey {
  flex: 0 0 auto;
  color: var(--diffMuted);
}
.diffViewer .diffField .diffFieldKey::after {
  content: ":";
}
.diffViewer .diffField .diffFieldValues {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
  word-break: break-all;
}
.diffViewer .diffEmpty {
  padding: 1.5rem;
  text-align: center;
  color: var(--diffMuted);
  font-size: 0.9rem;
}
.diffViewer.diffHideUnchanged [data-diff-status=unchanged] {
  display: none;
}

.entitySearch {
  position: fixed;
  z-index: 60;
  min-width: 260px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  background: var(--colorSurface-200);
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.entitySearch.entitySearchHidden {
  display: none;
}
.entitySearch .entitySearchInput {
  border: 0;
  border-bottom: 1px solid var(--colorSurface-300);
  background: transparent;
  padding: 0.55rem 0.75rem;
  color: var(--colorSurface-700);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
}
.entitySearch .entitySearchInput::placeholder {
  color: var(--colorSurface-600);
}
.entitySearch .entitySearchList {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--colorSurface-400) var(--colorSurface-200);
  padding: 0.5rem;
  scrollbar-gutter: auto;
}
.entitySearch .entitySearchList::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.entitySearch .entitySearchList::-webkit-scrollbar-track {
  background: transparent;
}
.entitySearch .entitySearchList::-webkit-scrollbar-thumb {
  background: var(--colorSurface-400);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.entitySearch .entitySearchList::-webkit-scrollbar-thumb:hover {
  background: var(--colorSurface-500);
}
.entitySearch .entitySearchResult {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: var(--colorSurface-700);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
}
.entitySearch .entitySearchResult.entitySearchResultActive {
  background: var(--colorInfoTransparent);
  color: var(--colorPrimary-500);
}
.entitySearch .entitySearchState {
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  color: var(--colorSurface-600);
}

@keyframes blockInsert {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#contentEditor {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--colorSurface-200);
}
#contentEditor #topBar {
  height: 60px;
  flex-basis: 100%;
  padding: 1rem;
  background: var(--colorSurface-200);
  border-bottom: 1px solid var(--colorSurface-300);
  color: var(--colorSurface-600);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  z-index: 1;
}
#contentEditor #topBar #topBarLeft {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#contentEditor #topBar #topBarLeft > div {
  display: flex;
  align-items: center;
}
#contentEditor #topBar #topBarLeft #overviewButton {
  cursor: pointer;
}
#contentEditor #topBar #topBarLeft #overviewButton.active svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarLeft #overviewButton:hover svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarLeft #overviewButton svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#contentEditor #topBar #topBarLeft #undoRedoContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}
#contentEditor #topBar #topBarLeft #undoRedoContainer #historyButton svg {
  width: 20px;
  height: 20px;
}
#contentEditor #topBar #topBarLeft #undoRedoContainer #undoButton, #contentEditor #topBar #topBarLeft #undoRedoContainer #redoButton, #contentEditor #topBar #topBarLeft #undoRedoContainer #historyButton {
  cursor: pointer;
  display: flex;
  align-items: center;
}
#contentEditor #topBar #topBarLeft #undoRedoContainer #undoButton.disabled, #contentEditor #topBar #topBarLeft #undoRedoContainer #redoButton.disabled, #contentEditor #topBar #topBarLeft #undoRedoContainer #historyButton.disabled {
  pointer-events: none;
}
#contentEditor #topBar #topBarLeft #undoRedoContainer #undoButton.disabled svg, #contentEditor #topBar #topBarLeft #undoRedoContainer #redoButton.disabled svg, #contentEditor #topBar #topBarLeft #undoRedoContainer #historyButton.disabled svg {
  fill: var(--colorSurface-400);
}
#contentEditor #topBar #topBarLeft #undoRedoContainer #undoButton:hover:not(.disabled) svg, #contentEditor #topBar #topBarLeft #undoRedoContainer #redoButton:hover:not(.disabled) svg, #contentEditor #topBar #topBarLeft #undoRedoContainer #historyButton:hover:not(.disabled) svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarLeft #undoRedoContainer #undoButton.active svg, #contentEditor #topBar #topBarLeft #undoRedoContainer #redoButton.active svg, #contentEditor #topBar #topBarLeft #undoRedoContainer #historyButton.active svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarLeft #undoRedoContainer #undoButton svg, #contentEditor #topBar #topBarLeft #undoRedoContainer #redoButton svg, #contentEditor #topBar #topBarLeft #undoRedoContainer #historyButton svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#contentEditor #topBar #topBarRight {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}
#contentEditor #topBar #topBarRight #toggleSidebar,
#contentEditor #topBar #topBarRight #userSettings {
  cursor: pointer;
  display: flex;
}
#contentEditor #topBar #topBarRight #toggleSidebar svg,
#contentEditor #topBar #topBarRight #userSettings svg {
  transition: 0.3s ease all;
  fill: var(--colorSurface-600);
}
#contentEditor #topBar #topBarRight #toggleSidebar:hover svg,
#contentEditor #topBar #topBarRight #userSettings:hover svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #toggleSidebar.active svg,
#contentEditor #topBar #topBarRight #userSettings.active svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #save {
  padding: 0.288rem 1rem;
  cursor: pointer;
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: 0.3s ease all;
  height: 32px;
  width: 94px;
  position: relative;
}
#contentEditor #topBar #topBarRight #save .gfLoader {
  border-color: rgb(165, 135, 250) rgb(87, 87, 87) rgb(87, 87, 87) !important;
}
#contentEditor #topBar #topBarRight #save.saving {
  pointer-events: none;
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
}
#contentEditor #topBar #topBarRight #save.saving span {
  color: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #save.saving svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #save.disabled {
  pointer-events: none;
  opacity: 0.3;
}
#contentEditor #topBar #topBarRight #save span {
  transition: 0.3s ease all;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#contentEditor #topBar #topBarRight #save svg {
  width: 16px;
  height: 16px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#contentEditor #topBar #topBarRight #save:hover {
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
}
#contentEditor #topBar #topBarRight #save:hover span {
  color: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #save:hover svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #seo {
  border: 1px solid var(--colorSurface-600);
  padding: 0.4rem 1rem;
  font-weight: bold;
  font-size: 0.9rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  height: 32px;
  transition: 0.3s ease all;
}
#contentEditor #topBar #topBarRight #seo.active {
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
}
#contentEditor #topBar #topBarRight #seo.active span {
  color: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #seo.active svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #seo span {
  transition: 0.3s ease all;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#contentEditor #topBar #topBarRight #seo:hover {
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
}
#contentEditor #topBar #topBarRight #seo:hover span {
  color: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #seo:hover svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #topBar #topBarRight #seo svg {
  fill: var(--colorSurface-600);
  width: 16px;
  height: 16px;
  transition: 0.3s ease all;
}
#contentEditor #contentContainer {
  background: var(--colorBeige);
  padding: 1rem;
  flex: 1;
  height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--colorSurface-400) var(--colorSurface-200);
}
#contentEditor #contentContainer::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#contentEditor #contentContainer::-webkit-scrollbar-track {
  background: transparent;
}
#contentEditor #contentContainer::-webkit-scrollbar-thumb {
  background: var(--colorSurface-400);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#contentEditor #contentContainer::-webkit-scrollbar-thumb:hover {
  background: var(--colorSurface-500);
}
#contentEditor #contentContainer #title {
  color: var(--colorSurface-300);
  border: none;
  outline: none;
  position: relative;
  min-width: 150px;
  max-width: 1200px;
  text-align: center;
  margin: 1rem auto 2rem auto;
  min-height: 42px;
}
#contentEditor #contentContainer #title #titlePlaceholder {
  color: var(--colorSurface-600);
  pointer-events: none;
  user-select: none;
}
#contentEditor #contentContainer #content {
  width: 60%;
  margin: 1rem auto;
  padding-bottom: 6rem;
  outline: none;
}
#contentEditor #contentContainer #content .editable:empty::before {
  content: attr(data-placeholder);
  color: var(--colorSurface-600);
  pointer-events: none;
  font-size: 1rem;
  font-weight: normal;
  vertical-align: middle;
}
#contentEditor #contentContainer #content ul {
  padding-left: 1rem;
  list-style: disc;
}
#contentEditor #contentContainer #content ul ul {
  list-style: circle;
}
#contentEditor #contentContainer #content ul ul ul {
  list-style: square;
}
#contentEditor #contentContainer #content ol {
  list-style: decimal;
  padding-left: 1rem;
}
#contentEditor #contentContainer #content ol ol {
  list-style: lower-alpha;
}
#contentEditor #contentContainer #content ol ol ol {
  list-style: lower-roman;
}
#contentEditor #contentContainer #content ol a {
  color: var(--colorPrimary-500);
}
#contentEditor #contentContainer #content textarea {
  width: 100%;
  border: 1px solid var(--colorSurface-700);
  color: var(--colorSurface-300);
  border-radius: 4px;
  padding: 1rem;
  background: transparent;
  font-family: inherit;
  outline: none;
}
#contentEditor #contentContainer #content .editable {
  outline: none;
  color: var(--colorSurface-300);
}
#contentEditor #contentContainer #content .editable li:empty::before {
  content: attr(data-placeholder);
  color: var(--colorSurface-600);
  pointer-events: none;
  font-size: 1rem;
  font-weight: normal;
  vertical-align: middle;
}
#contentEditor #contentContainer #content .editable a {
  color: var(--colorPrimary-500);
}
#contentEditor #contentContainer #content [data-block-id] {
  margin: 1rem 0;
  transition: 0.3s ease opacity;
  outline: none;
}
#contentEditor #contentContainer #content [data-block-id].timelineBlock {
  margin: 2rem 0;
}
#contentEditor #contentContainer #content [data-block-id].blockDragging {
  opacity: 0.4;
}
#contentEditor #contentContainer #content [data-block-id].blockInserting {
  animation: blockInsert 0.2s ease;
}
#contentEditor #contentContainer #content [data-block-id].blockSelected {
  background: var(--colorInfoTransparent);
  box-shadow: 0 0 0 6px var(--colorInfoTransparent);
  outline: 1px solid var(--colorPrimary-500);
  outline-offset: 4px;
  border-radius: 1px;
}
#contentEditor #contentContainer #content [data-block-id][data-align=center] {
  text-align: center;
}
#contentEditor #contentContainer #content [data-block-id][data-align=right] {
  text-align: right;
}
#contentEditor #contentContainer #content .dividerBlock {
  outline: none;
  padding: 0.5rem 0;
}
#contentEditor #contentContainer #content .dividerBlock hr {
  border: none;
  margin: 0;
  height: var(--dividerHeight, 1px);
  background: var(--dividerColor, var(--colorSurface-600));
}
#contentEditor #contentContainer #content .unknownBlock {
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  border-radius: 4px;
  background: var(--colorSurface-700);
  color: var(--colorSurface-300);
}
#contentEditor #contentContainer #content .unknownBlock strong {
  color: var(--colorSurface-300);
}
#contentEditor #contentContainer #content .unknownBlock p {
  margin: 0;
  font-size: 0.85rem;
}
#contentEditor #contentContainer #content .unknownBlock .unknownBlockType {
  align-self: flex-start;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  background: var(--colorSurface-300);
  color: var(--colorSurface-700);
  font-family: monospace;
  font-size: 0.8rem;
}
#contentEditor #contentContainer #content .spacerBlock {
  position: relative;
  outline: none;
  background: #D0D0D0;
  opacity: 0.1;
  border-radius: 4px;
  transition: 0.3s ease opacity;
}
#contentEditor #contentContainer #content .spacerBlock:hover:not(.focused) {
  opacity: 1;
}
#contentEditor #contentContainer #content .spacerBlock.focused, #contentEditor #contentContainer #content .spacerBlock.blockSelected {
  opacity: 1;
}
#contentEditor #contentContainer #content .spacerBlock .spacerBlockHandle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 12px;
  cursor: ns-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#contentEditor #contentContainer #content .spacerBlock .spacerBlockHandle::after {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 3px;
  background: var(--colorSurface-500);
  transition: 0.3s ease background;
}
#contentEditor #contentContainer #content .spacerBlock .spacerBlockHandle:hover::after {
  background: var(--colorSurface-400);
}
#contentEditor #contentContainer #content .tableBlock {
  outline: none;
  border: none;
  padding: 2rem 0;
  position: relative;
}
#contentEditor #contentContainer #content .tableBlock table {
  border-collapse: collapse;
  outline: none;
  width: 100%;
}
#contentEditor #contentContainer #content .tableBlock table th {
  background: var(--table-header-bg, transparent);
  color: var(--table-header-color, var(--colorSurface-500));
}
#contentEditor #contentContainer #content .tableBlock table tbody tr:nth-of-type(odd) td {
  background: var(--table-odd-bg, transparent);
  color: var(--table-odd-color, var(--colorSurface-500));
}
#contentEditor #contentContainer #content .tableBlock table tbody tr:nth-of-type(even) td {
  background: var(--table-even-bg, transparent);
  color: var(--table-even-color, var(--colorSurface-500));
}
#contentEditor #contentContainer #content .tableBlock td, #contentEditor #contentContainer #content .tableBlock th {
  padding: 0.5rem;
  text-align: left;
  border-top: 1px solid var(--colorSurface-700);
  border-right: 1px solid var(--colorSurface-700);
  color: var(--colorSurface-500);
  word-break: break-all;
  height: 38px;
}
#contentEditor #contentContainer #content .tableBlock td:last-of-type, #contentEditor #contentContainer #content .tableBlock th:last-of-type {
  border-right: none;
}
#contentEditor #contentContainer #content .tableBlock tr:last-of-type td {
  border-bottom: 1px solid var(--colorSurface-700);
}
#contentEditor #contentContainer #content .tableBlock .tableColumnOptions {
  position: absolute;
  display: flex;
  gap: 0.3rem;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
#contentEditor #contentContainer #content .tableBlock .tableColumnOptions.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}
#contentEditor #contentContainer #content .tableBlock .tableColumnOptions.tableOptionsMovable {
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s, left 0.18s ease, top 0.18s ease;
}
#contentEditor #contentContainer #content .tableBlock .tableColumnOptions.tableOptionsMovable.active {
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s, left 0.18s ease, top 0.18s ease;
}
#contentEditor #contentContainer #content .tableBlock .tableColumnOptions > div {
  display: flex;
  padding: 0.3rem;
  border: 1px solid var(--colorSurface-600);
  width: max-content;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s ease background;
  background: var(--colorBeige);
}
#contentEditor #contentContainer #content .tableBlock .tableColumnOptions > div:hover {
  background: var(--colorSurface-300);
}
#contentEditor #contentContainer #content .tableBlock .tableColumnOptions > div:hover svg {
  fill: var(--colorBeige);
}
#contentEditor #contentContainer #content .tableBlock .tableColumnOptions > div svg {
  width: 12px;
  height: 12px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease fill;
}
#contentEditor #contentContainer #content .tableBlock .tableRowOptions {
  position: absolute;
  display: flex;
  gap: 0.3rem;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
#contentEditor #contentContainer #content .tableBlock .tableRowOptions.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}
#contentEditor #contentContainer #content .tableBlock .tableRowOptions.tableOptionsMovable {
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s, left 0.18s ease, top 0.18s ease;
}
#contentEditor #contentContainer #content .tableBlock .tableRowOptions.tableOptionsMovable.active {
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s, left 0.18s ease, top 0.18s ease;
}
#contentEditor #contentContainer #content .tableBlock .tableRowOptions > div {
  display: flex;
  padding: 0.3rem;
  border: 1px solid var(--colorSurface-600);
  width: max-content;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s ease background;
  background: var(--colorBeige);
}
#contentEditor #contentContainer #content .tableBlock .tableRowOptions > div:hover {
  background: var(--colorSurface-300);
}
#contentEditor #contentContainer #content .tableBlock .tableRowOptions > div:hover svg {
  fill: var(--colorBeige);
}
#contentEditor #contentContainer #content .tableBlock .tableRowOptions > div svg {
  width: 12px;
  height: 12px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease fill;
}
#contentEditor #contentContainer #content blockquote.editable {
  border-left: 3px solid var(--colorSurface-500);
  padding-left: 1rem;
  font-style: italic;
  color: var(--colorSurface-600);
}
#contentEditor #contentContainer #content .columnsBlock {
  display: grid;
  gap: 1rem;
  outline: none;
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockColumn {
  border: 1px dashed var(--colorSurface-600);
  border-radius: 4px;
  padding: 1rem;
  min-height: 80px;
  min-width: 0;
  overflow-wrap: anywhere;
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockColumn img {
  max-width: 100%;
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockColumn:empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockColumn:empty::before {
  content: "Click to add a block";
  color: var(--colorSurface-600);
  font-size: 0.85rem;
  height: 22px;
  display: flex;
  align-items: center;
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockPicker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockPicker .columnsBlockPickerOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: 0.2s ease all;
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockPicker .columnsBlockPickerOption:hover {
  border-color: var(--colorSurface-400);
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockPicker .columnsBlockPickerOption:hover .columnsBlockPickerPreview span {
  background: var(--colorSurface-400);
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockPicker .columnsBlockPickerOption .columnsBlockPickerPreview {
  display: grid;
  gap: 4px;
  width: 22%;
  height: 40px;
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockPicker .columnsBlockPickerOption .columnsBlockPickerPreview span {
  background: var(--colorSurface-600);
  border-radius: 3px;
  transition: 0.2s ease background;
}
#contentEditor #contentContainer #content .columnsBlock .columnsBlockPicker .columnsBlockPickerOption .columnsBlockPickerLabel {
  font-size: 0.8rem;
  color: var(--colorSurface-600);
}
#contentEditor #contentContainer #content .chartBlock {
  outline: none;
  container: chartBlock/inline-size;
}
#contentEditor #contentContainer #content .chartBlock .chartBlockPicker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
#contentEditor #contentContainer #content .chartBlock .chartBlockPicker .chartBlockPickerOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: 0.2s ease all;
}
#contentEditor #contentContainer #content .chartBlock .chartBlockPicker .chartBlockPickerOption:hover {
  border-color: var(--colorSurface-400);
}
#contentEditor #contentContainer #content .chartBlock .chartBlockPicker .chartBlockPickerOption:hover .chartBlockPickerIcon svg {
  fill: var(--colorSurface-400);
}
#contentEditor #contentContainer #content .chartBlock .chartBlockPicker .chartBlockPickerOption .chartBlockPickerIcon svg {
  width: 28px;
  height: 28px;
  fill: var(--colorSurface-600);
  transition: 0.2s ease fill;
}
#contentEditor #contentContainer #content .chartBlock .chartBlockPicker .chartBlockPickerOption .chartBlockPickerLabel {
  font-size: 0.8rem;
  color: var(--colorSurface-600);
  text-align: center;
}
@container chartBlock (max-width: 360px) {
  #contentEditor #contentContainer #content .chartBlock .chartBlockPicker {
    grid-template-columns: repeat(2, 1fr);
  }
}
#contentEditor #contentContainer #content .chartBlock .chartPreview {
  width: 100%;
}
#contentEditor #contentContainer #content .footnoteRef {
  color: var(--colorPrimary-500);
  cursor: pointer;
  font-weight: 600;
  padding: 0 1px;
  user-select: none;
}
#contentEditor #contentContainer #content .footnoteRef:hover {
  text-decoration: underline;
}
#contentEditor #contentContainer #content .footnotesBlock {
  outline: none;
  border-top: 1px solid var(--colorSurface-600);
  padding-top: 1rem;
}
#contentEditor #contentContainer #content .footnotesBlock .footnotesList {
  margin: 0;
  padding: 0;
  list-style: none;
}
#contentEditor #contentContainer #content .footnotesBlock .footnotesList .footnotesItem {
  display: flex;
  gap: 0.5rem;
  padding: 0.15rem 0;
}
#contentEditor #contentContainer #content .footnotesBlock .footnotesList .footnotesItem .footnotesBacklink {
  flex-shrink: 0;
  color: var(--colorPrimary-500);
  cursor: pointer;
  user-select: none;
}
#contentEditor #contentContainer #content .footnotesBlock .footnotesList .footnotesItem .footnotesBacklink::after {
  content: ".";
}
#contentEditor #contentContainer #content .footnotesBlock .footnotesList .footnotesItem .footnotesBacklink:hover {
  text-decoration: underline;
}
#contentEditor #contentContainer #content .footnotesBlock .footnotesList .footnotesItem .footnotesContent {
  flex: 1;
  outline: none;
  color: var(--colorSurface-300);
}
#contentEditor #contentContainer #content .footnotesBlock .footnotesList .footnotesItem .footnotesContent:empty::before {
  content: attr(data-placeholder);
  color: var(--colorSurface-600);
  pointer-events: none;
}
#contentEditor #contentContainer #content div[data-block="core/image"], #contentEditor #contentContainer #content div[data-block="core/file"] {
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  border: 1px solid var(--colorSurface-700);
  border-radius: 4px;
  padding: 1rem;
  outline: none;
  display: flex;
  justify-content: center;
  transition: 0.3s ease border;
}
#contentEditor #contentContainer #content div[data-block="core/image"]:hover, #contentEditor #contentContainer #content div[data-block="core/file"]:hover {
  border: 1px solid var(--colorSurface-600);
}
#contentEditor #contentContainer #content div[data-block="core/image"] img, #contentEditor #contentContainer #content div[data-block="core/file"] img {
  margin: 0 auto;
  display: block;
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--colorSurface-700);
  border-radius: 4px;
  padding: 1rem;
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  transition: 0.3s ease border;
}
#contentEditor #contentContainer #content div[data-block="core/gallery"]:hover {
  border: 1px solid var(--colorSurface-600);
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] .galleryBlockGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  width: 100%;
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] .galleryBlockGrid:empty {
  display: none;
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] .galleryBlockGrid .galleryBlockItem {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  cursor: grab;
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] .galleryBlockGrid .galleryBlockItem.galleryBlockDragging {
  opacity: 0.4;
  cursor: grabbing;
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] .galleryBlockGrid .galleryBlockItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] .galleryBlockGrid .galleryBlockItem .galleryBlockRemove {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.55);
  transition: 0.3s ease all;
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] .galleryBlockGrid .galleryBlockItem .galleryBlockRemove svg {
  width: 14px;
  height: 14px;
  fill: var(--colorSurface-0);
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] .galleryBlockGrid .galleryBlockItem .galleryBlockRemove:hover {
  background: rgba(0, 0, 0, 0.8);
}
#contentEditor #contentContainer #content div[data-block="core/gallery"] .imageBlockPreview {
  cursor: pointer;
}
#contentEditor #contentContainer #content div[data-block="core/file"] .fileBlockPreview {
  cursor: pointer;
}
#contentEditor #contentContainer #content div[data-block="core/file"] .fileBlockPreview svg {
  width: 28px;
  height: 28px;
}
#contentEditor #contentContainer #content div[data-block="core/file"] .fileBlockPreview:has(.insertedFilePreviewContainer) > svg {
  display: none;
}
#contentEditor #contentContainer #content div[data-block="core/file"] .fileBlockPreview:has(.insertedFilePreviewContainer) > span {
  display: none;
}
#contentEditor #contentContainer #content div[data-block="core/file"] .insertedFilePreviewContainer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
#contentEditor #contentContainer #content div[data-block="core/file"] .insertedFilePreviewContainer svg {
  fill: var(--colorSurface-500);
}
#contentEditor #contentContainer #content div[data-block="core/embed"] {
  outline: none;
  position: relative;
  border: 1px solid var(--colorSurface-700);
  border-radius: 4px;
  padding: 1.5rem 1rem 1.5rem 1rem;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] .tooltipTrigger {
  top: 0.3rem;
  right: 0.8rem;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] .tooltipContent {
  right: 0;
  background: var(--colorSurface-200);
  color: var(--colorSurface-600);
  padding: 1rem;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] .tooltipContent ul {
  margin-top: 0.3rem;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] h2 {
  color: var(--colorSurface-300);
  font-size: 1rem;
  font-weight: normal;
  width: max-content;
  margin: 1rem 0;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] > div:not(:has(.tooltipTrigger)) {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] > div:not(:has(.tooltipTrigger)) input {
  width: 100%;
  background: transparent;
  outline: none;
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  padding: 0.5rem;
  color: var(--colorSurface-300);
}
#contentEditor #contentContainer #content div[data-block="core/embed"] > div:not(:has(.tooltipTrigger)) input::placeholder {
  opacity: 0.5;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] > div:not(:has(.tooltipTrigger)) button {
  padding: 0.5rem 1rem;
  cursor: pointer;
  outline: none;
  background: var(--colorSurface-400);
  border: none;
  color: var(--colorBeige);
  border-radius: 4px;
  transition: 0.3s ease all;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] > div:not(:has(.tooltipTrigger)) button:hover {
  background: var(--colorSurface-300);
}
#contentEditor #contentContainer #content div[data-block="core/embed"] iframe {
  display: block;
  margin: 1rem auto 0 auto;
  background: none;
  border: none;
  width: 100%;
  height: 350px;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] iframe:not([src]) {
  display: none;
}
#contentEditor #contentContainer #content div[data-block="core/embed"] h2 {
  max-width: 100%;
  white-space: nowrap;
  text-wrap: auto;
}
#contentEditor #sidebar {
  width: 0;
  transition: 0.3s ease width;
  background: var(--colorSurface-200);
  color: var(--colorSurface-600);
  white-space: nowrap;
  height: 90vh;
}
#contentEditor #sidebar.active {
  width: 280px;
}
#contentEditor #sidebar.active:has(#sidebarBlockContent.active [data-chart-series="2"]) {
  width: 348px;
}
#contentEditor #sidebar.active:has(#sidebarBlockContent.active [data-chart-series="3"]) {
  width: 416px;
}
#contentEditor #sidebar.active:has(#sidebarBlockContent.active [data-chart-series="4"]) {
  width: 484px;
}
#contentEditor #sidebar.active:has(#sidebarBlockContent.active [data-chart-series="5"]) {
  width: 552px;
}
#contentEditor #sidebar.active:has(#sidebarBlockContent.active [data-chart-series="6"]) {
  width: 600px;
}
#contentEditor #sidebar #sidebarNavigation {
  display: flex;
  gap: 0;
  align-items: center;
  border-bottom: 1px solid var(--colorSurface-300);
}
#contentEditor #sidebar #sidebarNavigation > span {
  cursor: pointer;
  padding: 1rem;
  transition: 0.3s ease all;
  border-bottom: 1px solid transparent;
}
#contentEditor #sidebar #sidebarNavigation > span:hover {
  color: var(--colorPrimary-500);
}
#contentEditor #sidebar #sidebarNavigation > span.active {
  border-bottom: 1px solid var(--colorPrimary-500);
}
#contentEditor #sidebar #sidebarNavigation #closeSidebar {
  margin-left: auto;
  display: flex;
  cursor: pointer;
  margin-right: 1rem;
  padding: 0.3rem;
  border-radius: 4px;
  transition: 0.3s ease all;
}
#contentEditor #sidebar #sidebarNavigation #closeSidebar:hover {
  background: var(--colorErrorTransparent);
}
#contentEditor #sidebar #sidebarNavigation #closeSidebar:hover svg {
  fill: var(--colorError);
  transition: 0.3s ease all;
}
#contentEditor #sidebar #sidebarNavigation #closeSidebar svg {
  width: 1rem;
  height: 1rem;
  fill: var(--colorSurface-600);
}
#contentEditor #sidebar .sidebarContentSection {
  border-top: 1px solid var(--colorSurface-300);
}
#contentEditor #sidebar .sidebarContentSection:last-of-type {
  border-bottom: 1px solid var(--colorSurface-300);
}
#contentEditor #sidebar .sidebarContentSection input:not([type=checkbox]):not([type=radio]):not([type=range]) {
  border: 1px solid var(--colorSurface-300);
  width: 100%;
}
#contentEditor #sidebar .sidebarContentSection textarea {
  border: 1px solid var(--colorSurface-300);
  width: 100%;
  resize: vertical;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionHandle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.7rem 0.5rem;
  transition: 0.3s ease border;
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionHandle:hover {
  border: 1px solid var(--colorPrimary-500);
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionHandle span {
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionHandle span svg {
  width: 18px;
  height: 18px;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionHandle svg {
  width: 14px;
  height: 14px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionHandle svg.active {
  transform: rotate(180deg);
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent {
  display: none;
  padding: 1rem 0.5rem;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent.active {
  display: block;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent:has(#tableOptionsSidebar) {
  padding-top: 0;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent:has(#accordionBlockSidebar) {
  padding-top: 0;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent #advancedBlockSidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent .inputContainer:has(input[type=checkbox]) label, #contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent .inputContainer:has(input[type=radio]) label {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent #imageBlockSidebar .inputContainer:nth-of-type(2) {
  flex-wrap: wrap;
  margin-top: 1rem;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent #imageBlockSidebar .inputContainer:nth-of-type(2) label {
  width: 100%;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent #accordionBlockSidebar .inputContainer label {
  white-space: normal;
  align-items: flex-start;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent #accordionBlockSidebar .inputContainer label input[type=checkbox] {
  height: 22px;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent #dividerBlockSidebar .inputContainer > div:not(.rangeControls) {
  border: 1px solid var(--colorSurface-600);
  padding: 0.4rem 1rem;
  font-weight: bold;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  height: 32px;
  transition: 0.3s ease all;
  background: transparent;
  text-align: center;
  color: var(--colorSurface-600);
  margin-bottom: 1rem;
}
#contentEditor #sidebar .sidebarContentSection .sidebarContentSectionContent #dividerBlockSidebar .inputContainer > div:not(.rangeControls):hover {
  background: var(--colorInfoTransparent);
  color: var(--colorPrimary-500);
  border: 1px solid var(--colorPrimary-500);
}
#contentEditor #sidebar #sidebarEntityContent #featuredImage {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  padding: 0.5rem;
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s ease all;
  margin-bottom: 1rem;
}
#contentEditor #sidebar #sidebarEntityContent #featuredImage img {
  max-width: 100%;
}
#contentEditor #sidebar #sidebarEntityContent #featuredImage:has(img) span {
  display: none;
}
#contentEditor #sidebar #sidebarEntityContent #featuredImage:hover {
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
  color: var(--colorPrimary-500);
}
#contentEditor #sidebar #sidebarEntityContent #statusContainer {
  position: relative;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--colorSurface-300);
  padding-bottom: 1rem;
  border-top: 1px solid var(--colorSurface-300);
  padding-top: 1rem;
}
#contentEditor #sidebar #sidebarEntityContent #statusContainer #scheduleDt {
  margin-top: 1rem;
  border: 1px solid var(--colorSurface-300);
  display: none;
}
#contentEditor #sidebar #sidebarEntityContent #statusContainer #scheduleDt.active {
  display: block;
}
#contentEditor #sidebar #sidebarEntityContent #statusContainer #scheduleDt.disabled {
  pointer-events: none;
  background: var(--colorSurface-300);
}
#contentEditor #sidebar #sidebarEntityContent #statusContainer #statusViewContainer {
  display: flex;
  gap: 2rem;
  align-items: center;
}
#contentEditor #sidebar #sidebarEntityContent #statusContainer #statusView {
  color: var(--colorPrimary-500);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  border: 1px solid var(--colorPrimary-500);
  padding: 0.1rem 0.7rem;
  transition: 0.3s ease all;
  border-radius: 4px;
}
#contentEditor #sidebar #sidebarEntityContent #statusContainer #statusView:hover:not(.disabled) {
  background: var(--colorInfoTransparent);
}
#contentEditor #sidebar #sidebarEntityContent #statusContainer #statusView.disabled {
  text-decoration: none;
  color: var(--colorSurface-600);
  border: none;
}
#contentEditor #sidebar #sidebarEntityContent #slugContainer {
  display: flex;
  gap: 3rem;
  margin-bottom: 1rem;
  align-items: center;
}
#contentEditor #sidebar #sidebarEntityContent #slugContainer input {
  background: transparent;
  outline: none;
  border: 1px solid var(--colorSurface-300);
  padding: 0.3rem 0.5rem;
  color: var(--colorSurface-600);
  width: 155px;
  border-radius: 4px;
}
#contentEditor #sidebar #sidebarEntityContent #slugContainer input[readonly] {
  background: var(--colorSurface-300);
}
#contentEditor #sidebar #sidebarEntityContent #tags input {
  border: 1px solid var(--colorSurface-300);
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxInputSearch {
  background: var(--colorSurface-200);
}
#contentEditor #sidebar #sidebarEntityContent #tags .removeAjaxInputSearchValue {
  top: 5px;
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxSearchResultContainer {
  border: 1px solid var(--colorSurface-300);
  background: var(--colorSurface-200);
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxSearchResultContainer .ajaxSearchResult {
  border-bottom: 1px solid var(--colorSurface-300);
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxSearchResultContainer .ajaxSearchResult:hover {
  background: var(--colorSurface-300);
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch {
  background: var(--colorSurface-200);
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .searchValuesInput {
  display: none;
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .ajaxSearchInput {
  background: var(--colorSurface-200);
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .ajaxSearchContainer {
  background: var(--colorSurface-200);
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch #tagViewInput[disabled] {
  display: none;
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .valuesWrapper {
  padding: 0.5rem 0;
  max-width: 100%;
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .valuesWrapper .valuesContainer {
  max-width: 100%;
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .valuesWrapper .valuesContainer .value {
  width: max-content;
  background: var(--colorSurface-300);
  padding: 0.3rem 0.5rem 0.3rem 1rem;
  max-width: 100%;
  min-height: 36px;
  transition: 0.3s ease all;
  border: 1px solid transparent;
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .valuesWrapper .valuesContainer .value:has(.removeValue:hover) {
  border: 1px solid var(--colorErrorTransparent);
  background: var(--colorErrorTransparent);
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .valuesWrapper .valuesContainer .value .valueText {
  color: var(--colorSurface-700);
  font-size: 0.9rem;
  white-space: break-spaces;
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .valuesWrapper .valuesContainer .value[disabled] {
  pointer-events: none;
  padding: 0.3rem 1rem;
  background: var(--colorSurface-300);
  border: 1px solid var(--colorSurface);
}
#contentEditor #sidebar #sidebarEntityContent #tags .ajaxMultipleValuesSearch .valuesWrapper .valuesContainer .value[disabled] .removeValue {
  display: none;
}
#contentEditor #sidebar #sidebarEntityContent #statuses {
  display: flex;
  transform: scale(0);
  position: absolute;
  top: 162px;
  right: 300px;
  width: 300px;
  height: max-content;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--colorSurface-200);
  box-shadow: 0 0 0 1px #ccc, 0 2px 3px rgba(0, 0, 0, 0.0509803922), 0 4px 5px rgba(0, 0, 0, 0.0392156863), 0 12px 12px rgba(0, 0, 0, 0.031372549), 0 16px 16px rgba(0, 0, 0, 0.0196078431);
  border-radius: 4px;
  transition: 0.2s ease transform;
  transform-origin: right;
}
#contentEditor #sidebar #sidebarEntityContent #statuses.active {
  transform: scale(1);
}
#contentEditor #sidebar #sidebarEntityContent #statuses #statusesTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#contentEditor #sidebar #sidebarEntityContent #statuses #statusesTopBar span {
  font-weight: bold;
}
#contentEditor #sidebar #sidebarEntityContent #statuses #statusesTopBar #closeStatuses {
  width: 22px;
  height: 22px;
  cursor: pointer;
  padding: 0.3rem;
  transition: 0.3s ease all;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
#contentEditor #sidebar #sidebarEntityContent #statuses #statusesTopBar #closeStatuses:hover {
  background: var(--colorErrorTransparent);
}
#contentEditor #sidebar #sidebarEntityContent #statuses #statusesTopBar #closeStatuses:hover svg {
  fill: var(--colorError);
}
#contentEditor #sidebar #sidebarEntityContent #statuses #statusesTopBar #closeStatuses svg {
  width: 16px;
  height: 16px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#contentEditor #sidebar #sidebarEntityContent #statuses label {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  transition: none;
}
#contentEditor #sidebar #sidebarEntityContent #statuses label input {
  margin-top: 4px;
  transition: none;
}
#contentEditor #sidebar #sidebarEntityContent #statuses label .statusNameContainer {
  display: flex;
  flex-direction: column;
}
#contentEditor #sidebar #sidebarEntityContent #statuses label .statusNameContainer .description {
  color: var(--colorSurface-400);
  font-size: 0.8rem;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection #searchCategoryContainer {
  position: relative;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection #searchCategoryContainer input {
  border: 1px solid var(--colorSurface-300);
  width: 100%;
  padding-right: 2rem;
  border-radius: 4px;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection #searchCategoryContainer svg {
  width: 16px;
  height: 16px;
  fill: var(--colorSurface-600);
  position: absolute;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection #categories {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 200px;
  overflow-y: auto;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection #categories div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection #categories div.hidden {
  display: none;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection #categories div:not([data-level="1"]) {
  padding-left: 1rem;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection #categories div input {
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: none;
}
#contentEditor #sidebar #sidebarEntityContent #categorySection #categories div span {
  cursor: pointer;
  padding-left: 0.5rem;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  margin-bottom: 0.5rem;
}
#contentEditor #sidebar #sidebarEntityContent #authorSection {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#contentEditor #sidebar #sidebarEntityContent #authorSection #searchAuthorContainer {
  position: relative;
}
#contentEditor #sidebar #sidebarEntityContent #authorSection #searchAuthorContainer input {
  border: 1px solid var(--colorSurface-300);
  width: 100%;
  padding-right: 2rem;
  border-radius: 4px;
}
#contentEditor #sidebar #sidebarEntityContent #authorSection #searchAuthorContainer svg {
  width: 16px;
  height: 16px;
  fill: var(--colorSurface-600);
  position: absolute;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
#contentEditor #sidebar #sidebarEntityContent #authorSection #authors {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 200px;
  overflow-y: auto;
}
#contentEditor #sidebar #sidebarEntityContent #authorSection #authors input {
  transition: none;
}
#contentEditor #sidebar #sidebarEntityContent #authorSection #authors label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding-left: 0.5rem;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#contentEditor #sidebar #sidebarBlockContent .inputContainer label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#contentEditor #sidebar #sidebarBlockContent .inputContainer select {
  border: 1px solid var(--colorSurface-300);
}
#contentEditor #sidebar #sidebarBlockContent .blockSidebarNotice {
  text-wrap: wrap;
  font-size: 0.9rem;
}
#contentEditor #sidebar .sidebarContent {
  padding: 1rem;
  display: none;
  height: 90%;
  overflow-y: scroll;
}
#contentEditor #sidebar .sidebarContent.active {
  display: flex;
  flex-direction: column;
}
#contentEditor #sidebar .chartTypeGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 1rem;
}
#contentEditor #sidebar .chartTypeGrid .chartTypeOption {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: 0.2s ease all;
}
#contentEditor #sidebar .chartTypeGrid .chartTypeOption svg {
  width: 22px;
  height: 22px;
  fill: var(--colorSurface-600);
  transition: 0.2s ease fill;
}
#contentEditor #sidebar .chartTypeGrid .chartTypeOption:hover {
  border-color: var(--colorPrimary-500);
}
#contentEditor #sidebar .chartTypeGrid .chartTypeOption.chartTypeOptionActive {
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
}
#contentEditor #sidebar .chartTypeGrid .chartTypeOption.chartTypeOptionActive svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #sidebar .chartDataEditor {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid {
  display: grid;
  gap: 0.35rem;
  align-items: center;
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid .chartDataHead {
  font-size: 0.75rem;
  color: var(--colorSurface-600);
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid .chartSeriesHead {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid .chartDataInput {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.4rem;
  font-size: 0.85rem;
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid .chartDataInput[type=number] {
  width: 100%;
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid .chartDataRemove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--colorSurface-600);
  cursor: pointer;
  user-select: none;
  font-size: 1.1rem;
  line-height: 1;
  transition: 0.2s ease all;
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid .chartDataRemove svg {
  transition: 0.3s ease all;
  width: 14px;
  height: 14px;
  fill: var(--colorSurface-600);
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid .chartDataRemove:not(.chartDataRemoveDisabled):hover {
  background: var(--colorErrorTransparent);
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid .chartDataRemove:not(.chartDataRemoveDisabled):hover svg {
  fill: var(--colorError);
}
#contentEditor #sidebar .chartDataEditor .chartDataGrid .chartDataRemove.chartDataRemoveDisabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
#contentEditor #sidebar .chartDataEditor .chartDataFooter {
  display: flex;
  gap: 0.5rem;
}
#contentEditor #sidebar .chartDataEditor .chartDataAdd {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  background: transparent;
  color: var(--colorSurface-600);
  cursor: pointer;
  user-select: none;
  font-size: 0.8rem;
  transition: 0.2s ease all;
}
#contentEditor #sidebar .chartDataEditor .chartDataAdd:hover {
  background: var(--colorInfoTransparent);
  border-color: var(--colorPrimary-500);
  color: var(--colorPrimary-500);
}
#contentEditor #bottomBar {
  height: calc(10vh - 60px);
  background: var(--colorSurface-200);
  border-top: 1px solid var(--colorSurface-300);
  flex-basis: 100%;
  padding: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
}
#contentEditor #bottomBar #shortcutsButton {
  cursor: pointer;
  display: flex;
}
#contentEditor #bottomBar #shortcutsButton svg {
  transition: 0.3s ease all;
  fill: var(--colorSurface-600);
}
#contentEditor #bottomBar #shortcutsButton.active svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #bottomBar #shortcutsButton:hover svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #messagesContainer {
  position: absolute;
  top: 130px;
  right: 300px;
  width: 300px;
}
#contentEditor #blockSideToggle {
  position: fixed;
  gap: 0.5rem;
  display: none;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
}
#contentEditor #blockSideToggle.active {
  display: flex;
}
#contentEditor #blockSideToggle .blockSideAction {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  transition: 0.3s ease all;
  background: var(--colorBeige);
}
#contentEditor #blockSideToggle .blockSideAction:hover {
  background: var(--colorSurface-300);
  border: 1px solid var(--colorSurface-300);
}
#contentEditor #blockSideToggle .blockSideAction:hover svg {
  fill: var(--colorSurface-0);
}
#contentEditor #blockSideToggle .blockSideAction svg {
  fill: var(--colorSurface-600);
}
#contentEditor #blockSideToggle #blockSideToggleDragHandle {
  cursor: grab;
}
#contentEditor #blockSideToggle #blockSideToggleDragHandle:active {
  cursor: grabbing;
}
#contentEditor #blockSideToggle #blockSideToggleMoreMenu {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0.5rem;
  top: 2.5rem;
  width: max-content;
  border: 1px solid var(--colorSurface-400);
  background: var(--colorSurface-300);
  border-radius: 4px;
}
#contentEditor #blockSideToggle #blockSideToggleMoreMenu.active {
  display: flex;
}
#contentEditor #blockSideToggle #blockSideToggleMoreMenu > span {
  padding: 0.5rem 1rem;
  color: var(--colorSurface-600);
  cursor: pointer;
  border-top: 1px solid var(--colorSurface-400);
  display: block;
  font-size: 0.9rem;
  transition: 0.3s ease all;
}
#contentEditor #blockSideToggle #blockSideToggleMoreMenu > span:first-of-type {
  border-top: none;
}
#contentEditor #blockSideToggle #blockSideToggleMoreMenu > span:hover {
  background: var(--colorInfoTransparent);
  color: var(--colorPrimary-500);
}
#contentEditor #blockSideToggle #blockSideToggleMoreMenu > span#blockSideToggleDelete {
  order: 99;
}
#contentEditor #blockSideToggle #blockSideToggleMoreMenu > span#blockSideToggleDelete:hover {
  background: var(--colorErrorTransparent);
  color: var(--colorError);
}
#contentEditor #overviewContainer {
  display: flex;
  position: absolute;
  top: 60px;
  left: -500px;
  padding: 1rem;
  height: 90vh;
  background: var(--colorSurface-200);
  flex-direction: column;
  transition: 0.3s ease left;
  overflow-y: auto;
  cursor: pointer;
  width: 185px;
  z-index: 4;
  gap: 0.2rem;
}
#contentEditor #overviewContainer.active {
  left: 0;
}
#contentEditor #overviewContainer .overviewNode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#contentEditor #overviewContainer .overviewNode > .overviewBlock {
  flex: 1;
  min-width: 0;
}
#contentEditor #overviewContainer .overviewNode.overviewNodeCollapsed > .overviewToggle svg {
  transform: rotate(-90deg);
}
#contentEditor #overviewContainer .overviewNode.overviewNodeCollapsed > .overviewNest {
  display: none;
}
#contentEditor #overviewContainer .overviewToggle {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  cursor: pointer;
  margin-right: 0.2rem;
}
#contentEditor #overviewContainer .overviewToggle svg {
  width: 10px;
  height: 10px;
  fill: var(--colorSurface-600);
  transition: 0.2s ease transform;
}
#contentEditor #overviewContainer .overviewNest {
  flex-basis: 100%;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--colorSurface-300);
}
#contentEditor #overviewContainer .overviewColumnGroup {
  min-height: 36px;
}
#contentEditor #overviewContainer .overviewColumnGroup:not(:last-child) {
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--colorSurface-300);
}
#contentEditor #overviewContainer .overviewBlock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  transition: 0.3s ease all;
  border-radius: 4px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
}
#contentEditor #overviewContainer .overviewBlock.overviewBlockDragging {
  opacity: 0.4;
  cursor: grabbing;
}
#contentEditor #overviewContainer .overviewBlock:hover span {
  color: var(--colorPrimary-500);
}
#contentEditor #overviewContainer .overviewBlock:hover svg {
  fill: var(--colorPrimary-500);
}
#contentEditor #overviewContainer .overviewBlock.active {
  background: var(--colorPrimary-500);
}
#contentEditor #overviewContainer .overviewBlock.active span {
  color: var(--colorSurface-200);
}
#contentEditor #overviewContainer .overviewBlock.active svg {
  fill: var(--colorSurface-200);
}
#contentEditor #overviewContainer .overviewBlock span {
  color: var(--colorSurface-600);
  font-size: 0.8rem;
  transition: 0.3s ease all;
}
#contentEditor #overviewContainer .overviewBlock svg {
  fill: var(--colorSurface-600);
  width: 20px;
  height: 20px;
  transition: 0.3s ease all;
}
#contentEditor #overviewContainer .overviewBlock .toggleOptionsBlockRepresentation {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: auto;
}
#contentEditor #overviewContainer .overviewBlock .blockRepresentationOptionsContainer {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  border-radius: 4px;
  width: 100%;
}
#contentEditor #overviewContainer .overviewBlock .blockRepresentationOptionsContainer.active {
  display: flex;
  z-index: 1;
  background: var(--colorSurface-300);
  flex-direction: column;
  padding: 0.5rem;
  opacity: 1;
}
#contentEditor #overviewContainer .overviewBlock .blockRepresentationOptionsContainer span {
  cursor: pointer;
  color: var(--colorSurface-600);
  padding: 0.5rem;
  transition: 0.3s ease all;
  border-radius: 4px;
  border: 1px solid transparent;
}
#contentEditor #overviewContainer .overviewBlock .blockRepresentationOptionsContainer span:hover {
  background: var(--colorInfoTransparent);
  color: var(--colorPrimary-500);
  border: 1px solid var(--colorPrimary-500);
}
#contentEditor #overviewContainer .overviewBlock .blockRepresentationOptionsContainer span[data-option-action=delete]:hover {
  background: var(--colorErrorTransparent);
  color: var(--colorError);
  border: 1px solid var(--colorError);
}
#contentEditor #overviewContainer[data-read-only=true] .overviewBlock {
  cursor: pointer;
}
#contentEditor .tooltipContent {
  border-radius: 4px;
}
#contentEditor #messagesContainer .message {
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--colorSurface-700);
}
#contentEditor #messagesContainer .message .removeButton:hover {
  background: var(--colorErrorTransparent);
}
#contentEditor #messagesContainer .message .removeButton:hover svg {
  fill: var(--colorError);
}

#blockMenu {
  background: var(--colorSurface-200);
  width: max-content;
  padding: 0.5rem;
  display: flex;
  gap: 0.3rem;
  flex-direction: column;
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  position: absolute;
  min-width: 260px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-gutter: auto;
  z-index: 3;
  scrollbar-width: thin;
  scrollbar-color: var(--colorSurface-400) var(--colorSurface-200);
}
#blockMenu::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#blockMenu::-webkit-scrollbar-track {
  background: transparent;
}
#blockMenu::-webkit-scrollbar-thumb {
  background: var(--colorSurface-400);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#blockMenu::-webkit-scrollbar-thumb:hover {
  background: var(--colorSurface-500);
}
#blockMenu .blockMenuCategory {
  padding: 0.5rem 0.5rem 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colorSurface-600);
}
#blockMenu .blockMenuCategory.hidden {
  display: none;
}
#blockMenu .blockMenuCategory:first-child {
  padding-top: 0.25rem;
}
#blockMenu .blockMenuItem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: 0.3s ease all;
  border-radius: 4px;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.9rem;
}
#blockMenu .blockMenuItem span {
  color: var(--colorSurface-700);
}
#blockMenu .blockMenuItem svg {
  width: 24px;
  height: 24px;
  fill: var(--colorSurface-600);
  display: block;
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  padding: 4px;
}
#blockMenu .blockMenuItem.active, #blockMenu .blockMenuItem:hover {
  background: var(--colorInfoTransparent);
}
#blockMenu .blockMenuItem.active span, #blockMenu .blockMenuItem:hover span {
  color: var(--colorPrimary-500);
}
#blockMenu .blockMenuItem.active svg, #blockMenu .blockMenuItem:hover svg {
  fill: var(--colorPrimary-500);
  border-color: var(--colorPrimary-500);
}

#formatToolbar {
  background: var(--colorSurface-300);
  display: flex;
  gap: 0.5rem;
  padding: 0.3rem;
  border-radius: 4px;
}
#formatToolbar .formatToolbarMenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.3rem;
  background: var(--colorSurface-300);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 1;
}
#formatToolbar .formatToolbarMenu.hidden {
  display: none;
}
#formatToolbar .formatToolbarMenu button {
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  white-space: nowrap;
  font-family: inherit;
  font-size: 0.85rem;
}
#formatToolbar button {
  background: transparent;
  padding: 0.3rem 0.5rem;
  outline: none;
  color: var(--colorSurface-700);
  display: flex;
  transition: 0.3s ease background;
  border-radius: 4px;
  align-items: center;
  cursor: pointer;
  border: 1px solid transparent;
}
#formatToolbar button svg {
  width: 14px;
  height: 14px;
  fill: var(--colorSurface-700);
  transition: 0.3s ease all;
}
#formatToolbar button.formatToolbarMoreButton svg {
  width: 11px;
  height: 11px;
}
#formatToolbar button:hover {
  background: var(--colorInfoTransparent);
}
#formatToolbar button:hover svg {
  fill: var(--colorPrimary-500);
}
#formatToolbar button.active {
  border: 1px solid var(--colorPrimary-500);
}
#formatToolbar button.active svg {
  fill: var(--colorPrimary-500);
}
#formatToolbar .formatToolbarAlign {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
#formatToolbar .formatToolbarAlign.hidden {
  display: none;
}
#formatToolbar .formatToolbarAlign .formatToolbarSeparator {
  width: 1px;
  align-self: stretch;
  margin: 0.15rem 0;
  background: var(--colorSurface-600);
}

.linkNewTab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.linkNewTab input {
  transition: none;
}

.linkModal {
  background: var(--colorSurface-200);
  border: 1px solid var(--colorSurface-300);
  color: var(--colorSurface-600);
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 0.15s ease, transform 0.15s ease, overlay 0.15s ease allow-discrete, display 0.15s ease allow-discrete;
}
.linkModal[open] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@starting-style {
  .linkModal[open] {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
}
.linkModal .closeModal {
  top: 1rem;
  right: 1rem;
  padding: 0.3rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: 0.3s ease all;
}
.linkModal .closeModal:hover {
  background: var(--colorErrorTransparent);
}
.linkModal .closeModal:hover svg {
  fill: var(--colorError);
}
.linkModal .closeModal svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-600);
}
.linkModal form {
  gap: 0;
}
.linkModal form h2 {
  color: var(--colorSurface-700);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1rem;
  border-bottom: 1px solid var(--colorSurface-300);
}
.linkModal form .inputContainer {
  padding: 0.75rem 1rem 0;
}
.linkModal form .inputContainer input {
  border: 1px solid var(--colorSurface-300);
}
.linkModal form .linkNewTab {
  padding: 0.5rem 1rem 0;
}
.linkModal form .submitContainer {
  padding: 0 1rem 1rem;
  margin-top: 1.5rem;
}
.linkModal form .btn {
  margin: 0;
}
.linkModal form .btn.primary {
  background: transparent;
  border: 1px solid var(--colorPrimary-500);
  color: var(--colorPrimary-500);
  font-weight: normal;
  padding: 0.4rem 1rem;
  margin-right: 0.5rem;
}
.linkModal form .btn.primary:hover {
  background: var(--colorInfoTransparent);
}
.linkModal form .btn.linkUnlink {
  border: 1px solid var(--colorSurface-600);
  font-weight: normal;
  padding: 0.4rem 1rem;
  color: var(--colorSurface-600);
}
.linkModal form .btn.linkUnlink:hover {
  border: 1px solid var(--colorError);
  color: var(--colorError);
  background: var(--colorErrorTransparent);
}

.imageBlockPreview, .fileBlockPreview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  color: var(--colorSurface-600);
  transition: 0.3s ease all;
  max-width: 300px;
}
.imageBlockPreview:hover svg, .fileBlockPreview:hover svg {
  fill: var(--colorSurface-500);
}
.imageBlockPreview:hover .imageBlockPreview, .fileBlockPreview:hover .imageBlockPreview {
  color: var(--colorSurface-500);
}
.imageBlockPreview:hover span, .fileBlockPreview:hover span {
  background: var(--colorSurface-500);
  color: var(--colorSurface-0);
}
.imageBlockPreview svg, .fileBlockPreview svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
  width: 34px;
  height: 34px;
}
.imageBlockPreview span, .fileBlockPreview span {
  padding: 0.3rem 1rem;
  background: var(--colorSurface-600);
  color: var(--colorSurface-0);
  font-size: 0.8rem;
  border-radius: 4px;
  transition: 0.3s ease all;
}
.imageBlockPreview:has(img) svg, .fileBlockPreview:has(img) svg {
  display: none;
}
.imageBlockPreview:has(img) span, .fileBlockPreview:has(img) span {
  display: none;
}

#userSettingsModal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 480px;
  height: fit-content;
  max-height: 80vh;
  margin: auto;
  border-radius: 4px;
  background: var(--colorSurface-200);
  flex-direction: column;
  border: 1px solid var(--colorSurface-300);
  display: flex;
  overflow-y: auto;
  transform: scale(0);
  transition: 0.15s ease all;
  z-index: 10;
  opacity: 0;
}
#userSettingsModal.active {
  transform: scale(1);
  opacity: 1;
}
#userSettingsModal #userSettingsHeader {
  border-bottom: 1px solid var(--colorSurface-300);
  padding: 1rem;
  position: relative;
}
#userSettingsModal #userSettingsHeader h2 {
  color: var(--colorSurface-700);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
#userSettingsModal #userSettingsHeader p {
  color: var(--colorSurface-600);
  font-size: 0.8rem;
}
#userSettingsModal #userSettingsHeader #closeUserSettings {
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.3rem;
  transition: 0.3s ease all;
  display: flex;
  align-items: center;
}
#userSettingsModal #userSettingsHeader #closeUserSettings:hover {
  background: var(--colorErrorTransparent);
}
#userSettingsModal #userSettingsHeader #closeUserSettings:hover svg {
  fill: var(--colorError);
}
#userSettingsModal #userSettingsHeader #closeUserSettings svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#userSettingsModal #userSettingsList {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
}
#userSettingsModal .userSetting {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
#userSettingsModal .userSetting .userSettingLabel {
  color: var(--colorSurface-700);
  font-size: 0.9rem;
}
#userSettingsModal .userSetting .userSettingDescription {
  color: var(--colorSurface-600);
  font-size: 0.8rem;
}
#userSettingsModal .userSetting .userSettingOptions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
#userSettingsModal .userSetting .userSettingOption {
  cursor: pointer;
  flex: 1;
  min-width: 90px;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--colorSurface-600);
  background: transparent;
  border: 1px solid var(--colorSurface-300);
  transition: 0.3s ease all;
}
#userSettingsModal .userSetting .userSettingOption:hover {
  border-color: var(--colorPrimary-500);
  color: var(--colorSurface-700);
}
#userSettingsModal .userSetting .userSettingOption.userSettingOptionActive {
  color: var(--colorPrimary-500);
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
}

#seoModal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 600px;
  height: 600px;
  margin: auto;
  border-radius: 4px;
  background: var(--colorSurface-200);
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--colorSurface-300);
  display: flex;
  transform: scale(0);
  transition: 0.15s ease all;
  z-index: 10;
  opacity: 0;
}
#seoModal.active {
  transform: scale(1);
  opacity: 1;
}
#seoModal #seoHeader {
  border-bottom: 1px solid var(--colorSurface-300);
  padding: 1rem;
  position: relative;
}
#seoModal #seoHeader h2 {
  color: var(--colorSurface-700);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
#seoModal #seoHeader p {
  color: var(--colorSurface-600);
  font-size: 0.8rem;
}
#seoModal #seoHeader #closeSeo {
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.3rem;
  transition: 0.3s ease all;
  display: flex;
  align-items: center;
}
#seoModal #seoHeader #closeSeo:hover {
  background: var(--colorErrorTransparent);
}
#seoModal #seoHeader #closeSeo:hover svg {
  fill: var(--colorError);
}
#seoModal #seoHeader #closeSeo svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#seoModal .inputWithCounter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem;
}
#seoModal .inputWithCounter .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#seoModal .inputWithCounter .top .counter {
  display: flex;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}
#seoModal .inputWithCounter .top .counter .currentCharacters {
  width: 20px;
  display: block;
}
#seoModal .inputWithCounter .top .counter .maxCharacters {
  width: 20px;
  display: block;
}
#seoModal .inputWithCounter .top span {
  font-size: 0.8rem;
  color: var(--colorSurface-600);
}
#seoModal .inputWithCounter .input {
  border: 1px solid var(--colorSurface-300);
}
#seoModal .inputWithCounter textarea {
  resize: none;
}
#seoModal #seoImageContainer {
  padding: 0 1rem;
}
#seoModal #seoImageContainer #seoImage {
  margin-top: 0.5rem;
  cursor: pointer;
}
#seoModal #seoImageContainer #seoImage:hover #seoImageDescription {
  background: var(--colorInfoTransparent);
  border: 1px solid var(--colorPrimary-500);
}
#seoModal #seoImageContainer #seoImage:hover #seoImageDescription svg {
  fill: var(--colorPrimary-500);
}
#seoModal #seoImageContainer #seoImage:hover #seoImageDescription span {
  color: var(--colorPrimary-500);
}
#seoModal #seoImageContainer #seoImage #seoImageDescription {
  padding: 1rem;
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  transition: 0.3s ease all;
}
#seoModal #seoImageContainer #seoImage #seoImageDescription img {
  display: none;
  width: 100px;
  height: 100px;
  object-fit: contain;
}
#seoModal #seoImageContainer #seoImage #seoImageDescription img.active {
  display: block;
}
#seoModal #seoImageContainer #seoImage #seoImageDescription:has(img.active) svg {
  display: none;
}
#seoModal #seoImageContainer #seoImage #seoImageDescription svg {
  fill: var(--colorSurface-600);
  width: 26px;
  height: 26px;
  transition: 0.3s ease all;
}
#seoModal #seoImageContainer #seoImage #seoImageDescription .title {
  color: var(--colorSurface-600);
  font-weight: bold;
  font-size: 0.9rem;
  transition: 0.3s ease all;
}
#seoModal #seoImageContainer #seoImage #seoImageDescription .requirements {
  color: var(--colorSurface-600);
  font-size: 0.9rem;
  transition: 0.3s ease all;
}

#shortcutsContainer {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 600px;
  height: 600px;
  margin: auto;
  border-radius: 4px;
  background: var(--colorSurface-200);
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--colorSurface-300);
  display: flex;
  transform: scale(0);
  transition: 0.15s ease all;
  z-index: 10;
  opacity: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--colorSurface-400) var(--colorSurface-200);
}
#shortcutsContainer::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#shortcutsContainer::-webkit-scrollbar-track {
  background: transparent;
}
#shortcutsContainer::-webkit-scrollbar-thumb {
  background: var(--colorSurface-400);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#shortcutsContainer::-webkit-scrollbar-thumb:hover {
  background: var(--colorSurface-500);
}
#shortcutsContainer #shortcutsHeader {
  padding: 1rem;
  position: relative;
}
#shortcutsContainer #shortcutsHeader h2 {
  color: var(--colorSurface-700);
  font-size: 0.85rem;
  text-transform: uppercase;
}
#shortcutsContainer #shortcutsHeader #closeShortcuts {
  position: absolute;
  right: 0;
  top: 0.7rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: 0.3s ease all;
}
#shortcutsContainer #shortcutsHeader #closeShortcuts:hover {
  background: var(--colorErrorTransparent);
}
#shortcutsContainer #shortcutsHeader #closeShortcuts:hover svg {
  fill: var(--colorError);
}
#shortcutsContainer #shortcutsHeader #closeShortcuts svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#shortcutsContainer > span {
  color: var(--colorSurface-600);
  font-size: 1rem;
  list-style: italic;
  padding: 0 1rem 1rem 1rem;
}
#shortcutsContainer.active {
  transform: scale(1);
  opacity: 1;
}
#shortcutsContainer .shortcutsSectionTitle {
  padding: 1rem 1rem 0.75rem 1rem;
  color: var(--colorSurface-700);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#shortcutsContainer .shortcutContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--colorSurface-300);
  padding: 0 1rem 1rem 1rem;
}
#shortcutsContainer .shortcutContainer .shortcutModifier, #shortcutsContainer .shortcutContainer .shortcutKey {
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--colorSurface-400);
  border-radius: 4px;
  color: var(--colorSurface-600);
  font-style: italic;
  font-size: 0.8rem;
  background: var(--colorSurface-300);
}
#shortcutsContainer .shortcutContainer .shortcutPlus {
  color: var(--colorSurface-600);
  font-size: 1.2rem;
  font-style: italic;
}
#shortcutsContainer .shortcutContainer .shortcutDescription {
  color: var(--colorSurface-600);
  font-style: italic;
  font-size: 0.9rem;
}

#contentEditor #sidebar .rangeControls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
#contentEditor #sidebar .rangeControls input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  background: transparent;
  cursor: pointer;
  outline: none;
}
#contentEditor #sidebar .rangeControls input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--colorPrimary-500) 0%, var(--colorPrimary-500) var(--range-fill, 0%), var(--colorSurface-400) var(--range-fill, 0%), var(--colorSurface-400) 100%);
}
#contentEditor #sidebar .rangeControls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--colorPrimary-500);
  margin-top: -4px;
  cursor: pointer;
}
#contentEditor #sidebar .rangeControls input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--colorSurface-400);
}
#contentEditor #sidebar .rangeControls input[type=range]::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--colorPrimary-500);
}
#contentEditor #sidebar .rangeControls input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--colorPrimary-500);
  cursor: pointer;
}
#contentEditor #sidebar .rangeControls input[type=number] {
  width: 75px !important;
  background: transparent;
  border: 1px solid var(--colorSurface-300) !important;
  padding: 0.5rem;
  color: var(--colorSurface-600);
  border-radius: 4px;
  outline: none;
}

.spacerContainerSidebar {
  margin-bottom: 1rem;
}

.accordionBlock {
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.accordionBlock .accordionItems {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.accordionBlock .accordionItem {
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  overflow: hidden;
  scrollbar-gutter: auto;
}
.accordionBlock .accordionItem.active .accordionToggle svg {
  transform: rotate(180deg);
}
.accordionBlock .accordionItem:not(.active) .accordionBody {
  display: none;
}
.accordionBlock .accordionHeader {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--colorSurface-300);
}
.accordionBlock .accordionSummary {
  flex: 1;
  outline: none;
  font-weight: 600;
  color: var(--colorSurface-700);
}
.accordionBlock .accordionSummary:empty::before {
  content: attr(data-placeholder);
  color: var(--colorSurface-600);
  pointer-events: none;
}
.accordionBlock .accordionToggle, .accordionBlock .accordionItemDelete {
  display: flex;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.3rem;
}
.accordionBlock .accordionToggle svg, .accordionBlock .accordionItemDelete svg {
  transition: 0.3s ease all;
}
.accordionBlock .accordionToggle:hover svg, .accordionBlock .accordionItemDelete:hover svg {
  fill: var(--colorSurface-700);
}
.accordionBlock .accordionToggle svg {
  width: 22px;
  height: 22px;
  fill: var(--colorSurface-600);
}
.accordionBlock .accordionItemDelete {
  transition: 0.3s ease all;
  border-radius: 4px;
}
.accordionBlock .accordionItemDelete svg {
  transition: 0.3s ease all;
}
.accordionBlock .accordionItemDelete:hover {
  background: var(--colorErrorTransparent);
}
.accordionBlock .accordionItemDelete:hover svg {
  fill: var(--colorError);
}
.accordionBlock .accordionItemDelete svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-600);
}
.accordionBlock .accordionBody {
  padding: 1rem;
  outline: none;
}
.accordionBlock .accordionAddItem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 1px dashed var(--colorSurface-700);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--colorSurface-500);
  font-size: 0.85rem;
  transition: 0.3s ease all;
}
.accordionBlock .accordionAddItem svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-500);
  transition: 0.3s ease all;
}
.accordionBlock .accordionAddItem:hover {
  border-color: var(--colorSurface-600);
  color: var(--colorSurface-600);
}
.accordionBlock .accordionAddItem:hover svg {
  fill: var(--colorSurface-400);
}

.tabsBlock {
  outline: none;
}
.tabsBlock .tabsNav {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--colorSurface-700);
}
.tabsBlock .tabsTab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  margin-bottom: -1px;
  transition: 0.2s ease all;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: 1px solid var(--colorSurface-700);
}
.tabsBlock .tabsTab.active {
  background: var(--colorInfoTransparent);
  border: 1px solid var(--colorPrimary-500);
}
.tabsBlock .tabsTab.active .tabsLabel {
  color: var(--colorPrimary-500);
  word-break: break-word;
}
.tabsBlock .tabsTab:hover .tabsTabDelete {
  opacity: 1;
}
.tabsBlock .tabsLabel {
  outline: none;
  font-weight: 600;
  min-width: 2ch;
  color: var(--colorSurface-700);
}
.tabsBlock .tabsLabel:empty::before {
  content: attr(data-placeholder);
  color: var(--colorSurface-600);
  pointer-events: none;
}
.tabsBlock .tabsTabDelete {
  display: flex;
  padding: 0.15rem;
  border-radius: 4px;
  opacity: 0;
  transition: 0.2s ease all;
}
.tabsBlock .tabsTabDelete svg {
  width: 14px;
  height: 14px;
  fill: var(--colorSurface-600);
  transition: 0.2s ease all;
}
.tabsBlock .tabsTabDelete:hover {
  background: var(--colorErrorTransparent);
}
.tabsBlock .tabsTabDelete:hover svg {
  fill: var(--colorError);
}
.tabsBlock .tabsAddTab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.2s ease all;
  height: max-content;
  margin-top: auto;
  margin-bottom: auto;
  border: 1px dashed var(--colorSurface-700);
}
.tabsBlock .tabsAddTab svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-500);
  transition: 0.2s ease all;
}
.tabsBlock .tabsAddTab:hover {
  border: 1px dashed var(--colorSurface-600);
}
.tabsBlock .tabsPanels {
  padding-top: 1rem;
}
.tabsBlock .tabsPanel {
  display: none;
}
.tabsBlock .tabsPanel.active {
  display: block;
}
.tabsBlock .tabsPanelBody {
  outline: none;
  min-height: 2rem;
}

.columnsSelectContainer {
  margin-bottom: 1rem;
}
.columnsSelectContainer select {
  border: 1px solid var(--colorSurface-300);
}

.blockDropIndicator {
  position: fixed;
  height: 1px;
  border-radius: 3px;
  background: var(--colorPrimary-500);
  pointer-events: none;
  z-index: 3;
  transform: translateY(-50%);
  display: none;
}
.blockDropIndicator.active {
  display: block;
}

.blockDragImage {
  position: fixed;
  top: 0;
  left: -9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--colorSurface-200);
  border: 1px solid var(--colorSurface-400);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.blockDragImage svg {
  width: 22px;
  height: 22px;
  fill: var(--colorSurface-600);
}

#editorOverlay {
  display: none;
  z-index: 2;
}
#editorOverlay.active {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  width: 100%;
  height: 100%;
}

#tableStyleSidebar input[type=color] {
  width: 100%;
  height: 34px;
  padding: 2px;
  cursor: pointer;
}

#tableImportSidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#tableImportSidebar textarea {
  width: 100%;
  resize: vertical;
  font-family: monospace;
  font-size: 0.8rem;
}
#tableImportSidebar #tableCsvError {
  display: block;
  font-size: 0.8rem;
  background: var(--colorErrorTransparent);
  border-radius: 4px;
  color: var(--colorError);
  padding: 0.3rem;
  transition: 0.3s ease all;
  text-wrap: wrap;
}
#tableImportSidebar #tableCsvError.hidden {
  display: none;
}
#tableImportSidebar #tableCsvImport {
  border: 1px solid var(--colorSurface-600);
  padding: 0.4rem 1rem;
  font-weight: bold;
  font-size: 0.8rem;
  border-radius: 4px;
  gap: 0.3rem;
  cursor: pointer;
  height: 32px;
  transition: 0.3s ease all;
  background: transparent;
  text-align: center;
  color: var(--colorSurface-600);
}
#tableImportSidebar #tableCsvImport:hover {
  background: var(--colorInfoTransparent);
  border: 1px solid var(--colorPrimary-500);
  color: var(--colorPrimary-500);
}

#tableOptionsSidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#tableOptionsSidebar label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: max-content;
}
#tableOptionsSidebar .tableFilterOptions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--colorSurface-300);
}
#tableOptionsSidebar .tableFilterOptions:empty {
  display: none;
}

#tableStyleSidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#tableStyleSidebar input[type=color] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
}
#tableStyleSidebar input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0.2rem;
}
#tableStyleSidebar input[type=color]::-webkit-color-swatch {
  border: 1px solid var(--colorSurface-300);
}
#tableStyleSidebar input[type=color]::-moz-color-swatch {
  border: 1px solid #333333;
}

.timelineBlock {
  outline: none;
  container: timelineBlock/inline-size;
}
.timelineBlock .timelineItem {
  display: grid;
  grid-template-columns: 50px 20px 1fr auto;
  column-gap: 1rem;
  align-items: start;
  position: relative;
  padding-bottom: 1.5rem;
}
@container timelineBlock (max-width: 360px) {
  .timelineBlock .timelineItem {
    column-gap: 0;
  }
}
.timelineBlock .timelineItemTime {
  padding-top: 0.35rem;
  outline: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--colorSurface-500);
}
.timelineBlock .timelineItemTime:empty::before {
  content: attr(data-placeholder);
  color: var(--colorSurface-600);
  pointer-events: none;
}
.timelineBlock .timelineItemMarker {
  position: relative;
  align-self: stretch;
}
.timelineBlock .timelineItemMarker::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--colorSurface-600);
  z-index: 1;
}
.timelineBlock .timelineItemMarker::after {
  content: "";
  position: absolute;
  top: 1.7rem;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--colorSurface-700);
}
.timelineBlock .timelineItemContent {
  outline: none;
  padding: 0.35rem 0.6rem;
  border: 1px solid #cfcfd4;
  border-radius: 4px;
  min-height: 38px;
}
.timelineBlock .timelineItemDelete {
  align-self: center;
  display: flex;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.3rem;
  transition: 0.3s ease all;
  border-radius: 4px;
}
.timelineBlock .timelineItemDelete svg {
  width: 16px;
  height: 16px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease fill;
}
.timelineBlock .timelineItemDelete:hover {
  background: var(--colorErrorTransparent);
}
.timelineBlock .timelineItemDelete:hover svg {
  fill: var(--colorError);
}
.timelineBlock .timelineAddItem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 0.5rem;
  margin-left: calc(42px + 1rem);
  border: none;
  border-radius: 50%;
  background: var(--colorSurface-500);
  cursor: pointer;
  transition: 0.3s ease all;
}
.timelineBlock .timelineAddItem svg {
  width: 20px;
  height: 20px;
  fill: var(--colorBeige);
}
.timelineBlock .timelineAddItem:hover {
  opacity: 0.9;
}

#blockInserterButton {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: 0.3s ease all;
  border-radius: 4px;
}
#blockInserterButton svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#blockInserterButton.active {
  background: var(--colorErrorTransparent);
}
#blockInserterButton.active svg {
  transform: rotate(45deg);
  fill: var(--colorError);
}
#blockInserterButton:not(.active):hover svg {
  fill: var(--colorPrimary-500);
}

#backButton {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: 0.3s ease all;
  border-radius: 4px;
}
#backButton:hover svg {
  fill: var(--colorPrimary-500);
}
#backButton svg {
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
  width: 16px;
  height: 16px;
}

#blockInserter {
  position: absolute;
  top: 60px;
  left: -360px;
  width: 320px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--colorSurface-200);
  border-right: 1px solid var(--colorSurface-300);
  transition: 0.3s ease left;
  z-index: 4;
}
#blockInserter.active {
  left: 0;
}
#blockInserter #blockInserterHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--colorSurface-300);
}
#blockInserter #blockInserterHeader span {
  color: var(--colorSurface-600);
  font-weight: 600;
}
#blockInserter #blockInserterHeader #blockInserterClose {
  cursor: pointer;
  display: flex;
  padding: 0.3rem;
  border-radius: 4px;
  transition: 0.3s ease all;
}
#blockInserter #blockInserterHeader #blockInserterClose svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease fill;
}
#blockInserter #blockInserterHeader #blockInserterClose:hover {
  background: var(--colorErrorTransparent);
}
#blockInserter #blockInserterHeader #blockInserterClose:hover svg {
  fill: var(--colorError);
}
#blockInserter .blockInserterSearchField {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem;
  padding-left: 0.7rem;
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
}
#blockInserter .blockInserterSearchField .blockInserterSearchIcon {
  flex: 0 0 auto;
  display: inline-flex;
}
#blockInserter .blockInserterSearchField .blockInserterSearchIcon svg {
  width: 14px;
  height: 14px;
  fill: var(--colorSurface-600);
}
#blockInserter #blockInserterSearch {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  padding: 0.4rem 0.7rem 0.4rem 0;
}
#blockInserter #blockInserterList {
  flex: 1;
  overflow-y: auto;
  padding: 0 1rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--colorSurface-400) var(--colorSurface-200);
}
#blockInserter #blockInserterList::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#blockInserter #blockInserterList::-webkit-scrollbar-track {
  background: transparent;
}
#blockInserter #blockInserterList::-webkit-scrollbar-thumb {
  background: var(--colorSurface-400);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#blockInserter #blockInserterList::-webkit-scrollbar-thumb:hover {
  background: var(--colorSurface-500);
}

.blockInserterCategory {
  margin-bottom: 1rem;
}
.blockInserterCategory.hidden {
  display: none;
}
.blockInserterCategory .blockInserterCategoryLabel {
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--colorSurface-500);
  margin-bottom: 0.5rem;
}
.blockInserterCategory .blockInserterItems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.blockInserterItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0.25rem;
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  cursor: grab;
  text-align: center;
  transition: 0.2s ease all;
  user-select: none;
  height: 70px;
}
.blockInserterItem.hidden {
  display: none;
}
.blockInserterItem:hover {
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
}
.blockInserterItem svg {
  width: 20px;
  height: 20px;
  fill: var(--colorSurface-600);
}
.blockInserterItem .blockInserterItemLabel {
  font-size: 0.65rem;
  color: var(--colorSurface-600);
  line-height: 1.2;
}

#blockInserterCard {
  position: fixed;
  z-index: 10;
  width: 240px;
  padding: 1rem;
  background: var(--colorSurface-200);
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 28px;
  pointer-events: none;
}
#blockInserterCard.hidden {
  display: none;
}
#blockInserterCard .blockInserterCardTitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
#blockInserterCard .blockInserterCardTitle span {
  font-weight: 600;
  color: var(--colorSurface-600);
}
#blockInserterCard .blockInserterCardTitle svg {
  width: 22px;
  height: 22px;
  fill: var(--colorSurface-600);
}
#blockInserterCard .blockInserterCardDescription {
  font-size: 0.85rem;
  color: var(--colorSurface-500);
  line-height: 1.4;
}

.footnotesCard {
  position: fixed;
  z-index: 10;
  width: 260px;
  max-height: 220px;
  overflow-y: auto;
  padding: 1rem;
  background: var(--colorSurface-200);
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 28px;
  pointer-events: none;
}
.footnotesCard.hidden {
  display: none;
}
.footnotesCard .footnotesCardTitle {
  font-weight: 600;
  color: var(--colorSurface-600);
  margin-bottom: 0.5rem;
}
.footnotesCard .footnotesCardBody {
  font-size: 0.85rem;
  color: var(--colorSurface-500);
  line-height: 1.4;
  word-break: break-word;
}
.footnotesCard .footnotesCardBody a {
  color: var(--colorPrimary-500);
}
.footnotesCard .footnotesCardBody > :first-child {
  margin-top: 0;
}
.footnotesCard .footnotesCardBody > :last-child {
  margin-bottom: 0;
}

.blockInserterNoResults {
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--colorSurface-500);
}
.blockInserterNoResults.hidden {
  display: none;
}

.revisionsList {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.revisionsItem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--colorSurface-300);
  cursor: pointer;
  transition: 0.3s ease all;
}
.revisionsItem:hover {
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
}
.revisionsItem.active {
  border-color: var(--colorPrimary-500);
  background: var(--colorInfoTransparent);
}
.revisionsItem .revisionsItemDate {
  font-size: 0.8rem;
  color: var(--colorSurface-700);
}
.revisionsItem .revisionsItemMeta {
  grid-column: 1;
  font-size: 0.72rem;
  color: var(--colorSurface-600);
}
.revisionsItem .revisionsItemBadge {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--colorInfoTransparent);
  color: var(--colorInfo);
}

.revisionsEmpty {
  padding: 0.75rem;
  font-size: 0.8rem;
  color: var(--colorSurface-600);
  text-align: center;
}

#revisionsModal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: min(1100px, 92vw);
  height: min(720px, 88vh);
  margin: auto;
  border-radius: 4px;
  background: var(--colorSurface-200);
  border: 1px solid var(--colorSurface-300);
  color: var(--colorSurface-700);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: scale(0);
  transition: 0.15s ease all;
  z-index: 10;
  opacity: 0;
}
#revisionsModal.active {
  transform: scale(1);
  opacity: 1;
}
#revisionsModal .diffViewer {
  --diffSurface: var(--colorSurface-300);
  --diffBorder: var(--colorSurface-400);
}
#revisionsModal #revisionsHeader {
  border-bottom: 1px solid var(--colorSurface-300);
  padding: 1rem;
  position: relative;
}
#revisionsModal #revisionsHeader h2 {
  color: var(--colorSurface-600);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
#revisionsModal #revisionsHeader p {
  color: var(--colorSurface-600);
  font-size: 0.8rem;
}
#revisionsModal #revisionsHeader #closeRevisions {
  position: absolute;
  right: 1rem;
  top: 1.3rem;
  cursor: pointer;
}
#revisionsModal #revisionsHeader #closeRevisions:hover svg {
  fill: var(--colorSurface-500);
}
#revisionsModal #revisionsHeader #closeRevisions svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-600);
  transition: 0.3s ease all;
}
#revisionsModal .revisionsModalBody {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1rem;
  flex: 1;
  min-height: 0;
  padding: 0 1rem 1rem 1rem;
}
#revisionsModal > .revisionsModalBody > #revisionsModalList {
  overflow-y: auto;
  padding-right: 0.25rem;
}
#revisionsModal .revisionsDetail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 0.75rem;
}
#revisionsModal .revisionsDetailHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
#revisionsModal #revisionsSummary {
  font-size: 0.85rem;
  color: var(--colorSurface-600);
}
#revisionsModal #revisionsRevert {
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid var(--colorSurface-600);
  border-radius: 4px;
  font-size: 0.8rem;
}
#revisionsModal #revisionsRevert:hover {
  background: var(--colorInfoTransparent);
  border: 1px solid var(--colorPrimary-500);
  color: var(--colorPrimary-500);
}
#revisionsModal #revisionsRevert.disabled {
  opacity: 0.5;
  pointer-events: none;
}
#revisionsModal #revisionsFields {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}
#revisionsModal #revisionsFields:empty {
  display: none;
}
#revisionsModal .revisionsField {
  display: contents;
}
#revisionsModal .revisionsField .revisionsFieldKey {
  font-size: 0.75rem;
  color: var(--colorSurface-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#revisionsModal .revisionsField .revisionsFieldKey::after {
  content: ":";
}
#revisionsModal .revisionsField .revisionsFieldValue {
  font-size: 0.85rem;
  word-break: break-word;
}
#revisionsModal .revisionsField .revisionsFieldValue del {
  text-decoration: line-through;
  color: var(--colorError);
  background: var(--colorErrorTransparent);
  padding: 0 2px;
  border-radius: 2px;
}
#revisionsModal .revisionsField .revisionsFieldValue ins {
  text-decoration: none;
  color: var(--colorSuccess);
  background: var(--colorSuccessTransparent);
  padding: 0 2px;
  border-radius: 2px;
}
#revisionsModal .revisionsField .revisionsFieldValue .revisionsFieldEmpty {
  color: var(--colorSurface-500);
  background: none;
  text-decoration: none;
}
#revisionsModal #revisionsDiff {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#revisionsModal #revisionsDiff a {
  pointer-events: none;
  cursor: default;
}

@media (max-width: 900px) {
  #revisionsModal .revisionsModalBody {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}
#historyPanel {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  max-width: 300px;
  background: var(--colorSurface-200);
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
#historyPanel.hidden {
  display: none;
}
#historyPanel #historyList {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--colorSurface-400) var(--colorSurface-200);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  scrollbar-gutter: auto;
}
#historyPanel #historyList::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#historyPanel #historyList::-webkit-scrollbar-track {
  background: transparent;
}
#historyPanel #historyList::-webkit-scrollbar-thumb {
  background: var(--colorSurface-400);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
#historyPanel #historyList::-webkit-scrollbar-thumb:hover {
  background: var(--colorSurface-500);
}
#historyPanel .historyItem {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s ease all;
}
#historyPanel .historyItem:hover {
  background: var(--colorInfoTransparent);
}
#historyPanel .historyItem.historyItemActive {
  cursor: default;
  background: var(--colorInfoTransparent);
}
#historyPanel .historyItem.historyItemActive .historyItemLabel {
  color: var(--colorPrimary-500);
}
#historyPanel .historyItem.historyItemHighlighted {
  box-shadow: inset 0 0 0 1px var(--colorPrimary-500);
}
#historyPanel .historyItemLabel {
  font-size: 0.9rem;
  color: var(--colorSurface-700);
}
#historyPanel .historyItemMeta {
  font-size: 0.75rem;
  color: var(--colorSurface-600);
  white-space: nowrap;
}

.commandMenu .entitySearchResult {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.commandMenu .entitySearchResult.entitySearchResultActive svg {
  fill: var(--colorPrimary-500);
}
.commandMenu .entitySearchResult.entitySearchResultActive span {
  color: var(--colorPrimary-500);
}
.commandMenu .entitySearchResult svg {
  fill: var(--colorSurface-600);
  width: 16px;
  height: 16px;
}
.commandMenu .entitySearchResult span {
  color: var(--colorSurface-700);
}

/* --- Command palette (Ctrl/Cmd+K) ------------------------------------------ */
.commandPalette {
  width: min(640px, 92vw);
  height: min(520px, 85vh);
  padding: 0;
  border: 1px solid var(--colorSurface-300);
  border-radius: 8px;
  background: var(--colorSurface-200);
  color: var(--colorSurface-700);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  flex-direction: column;
}
.commandPalette[open] {
  display: flex;
}
.commandPalette::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.commandPalette .commandPaletteHeader {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-left: 1rem;
  border-bottom: 1px solid var(--colorSurface-300);
}
.commandPalette .commandPaletteSearchIcon {
  flex: 0 0 auto;
  display: inline-flex;
}
.commandPalette .commandPaletteSearchIcon svg {
  width: 16px;
  height: 16px;
  fill: var(--colorSurface-600);
}
.commandPalette .commandPaletteInput {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.9rem 1rem 0.9rem 0;
  color: var(--colorSurface-700);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}
.commandPalette .commandPaletteInput::placeholder {
  color: var(--colorSurface-600);
}
.commandPalette .commandPaletteBody {
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-gutter: auto;
  padding: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--colorSurface-400) var(--colorSurface-200);
}
.commandPalette .commandPaletteBody::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.commandPalette .commandPaletteBody::-webkit-scrollbar-track {
  background: transparent;
}
.commandPalette .commandPaletteBody::-webkit-scrollbar-thumb {
  background: var(--colorSurface-400);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.commandPalette .commandPaletteBody::-webkit-scrollbar-thumb:hover {
  background: var(--colorSurface-500);
}
.commandPalette .commandPaletteGroup + .commandPaletteGroup {
  margin-top: 0.3rem;
}
.commandPalette .commandPaletteGroupTitle {
  padding: 0.5rem 0.6rem 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colorSurface-600);
}
.commandPalette .commandPaletteItem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.commandPalette .commandPaletteItem.commandPaletteItemActive {
  background: var(--colorInfoTransparent);
}
.commandPalette .commandPaletteItem.commandPaletteItemActive .commandPaletteItemLabel {
  color: var(--colorPrimary-500);
}
.commandPalette .commandPaletteItem.commandPaletteItemActive svg {
  fill: var(--colorPrimary-500);
}
.commandPalette .commandPaletteItemIcon {
  flex: 0 0 auto;
  display: inline-flex;
}
.commandPalette .commandPaletteItemIcon svg {
  width: 18px;
  height: 18px;
  fill: var(--colorSurface-600);
}
.commandPalette .commandPaletteItemText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.commandPalette .commandPaletteItemLabel {
  font-size: 0.9rem;
  color: var(--colorSurface-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.commandPalette .commandPaletteItemSub {
  font-size: 0.78rem;
  color: var(--colorSurface-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.commandPalette .commandPaletteState {
  padding: 1.2rem 0.75rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--colorSurface-600);
}
.commandPalette .commandPaletteFooter {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--colorSurface-300);
  font-size: 0.75rem;
  color: var(--colorSurface-600);
}
.commandPalette .commandPaletteKbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  margin: 0 0.15rem;
  border: 1px solid var(--colorSurface-300);
  border-radius: 3px;
  background: var(--colorSurface-300);
  font-size: 0.72rem;
  color: var(--colorSurface-700);
}

/* --- Between-blocks "+" inserter -------------------------------------------- */
.blockGapInserter {
  position: fixed;
  z-index: 5;
  height: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.blockGapInserter.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0s;
}
.blockGapInserter .blockGapInserterButton {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 4px;
  background: var(--colorBeige);
  border: 1px solid var(--colorPrimary-500);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.blockGapInserter .blockGapInserterButton svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease, fill 0.15s ease;
  fill: var(--colorPrimary-500);
}
.blockGapInserter .blockGapInserterButton:hover {
  background: var(--colorPrimary-500);
  border-color: var(--colorPrimary-500);
}
.blockGapInserter .blockGapInserterButton:hover svg {
  fill: #fff;
  transform: rotate(90deg);
}
.blockGapInserter.active .blockGapInserterButton {
  transform: scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .blockGapInserter {
    transition: opacity 0.01s;
  }
  .blockGapInserter .blockGapInserterButton,
  .blockGapInserter .blockGapInserterButton svg {
    transition: none;
  }
}

/* --- Gallery block sidebar ------------------------------------------------- */
#gallerySidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#gallerySidebar .galleryLayoutGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
#gallerySidebar .galleryLayoutOption {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  background: var(--colorSurface-200);
  cursor: pointer;
  transition: 0.2s ease border-color, 0.2s ease background;
}
#gallerySidebar .galleryLayoutOption svg {
  width: 26px;
  height: 26px;
  fill: var(--colorSurface-600);
  pointer-events: none;
  transition: 0.2s ease fill;
}
#gallerySidebar .galleryLayoutOption:hover {
  border-color: var(--colorPrimary-500);
}
#gallerySidebar .galleryLayoutOption.galleryLayoutOptionActive {
  background: var(--colorInfoTransparent);
  border-color: var(--colorPrimary-500);
}
#gallerySidebar .galleryLayoutOption.galleryLayoutOptionActive svg {
  fill: var(--colorPrimary-500);
}
#gallerySidebar .gallerySettingGroup {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#gallerySidebar .gallerySettingGroup.hidden {
  display: none;
}
#gallerySidebar .gallerySettingField {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
#gallerySidebar .gallerySettingField label {
  color: var(--colorSurface-600);
  font-size: 0.78rem;
}
#gallerySidebar .gallerySettingRow {
  min-height: unset;
}
#gallerySidebar .gallerySettingRow label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--colorSurface-600);
}

/* The hover card explaining a layout — a diagram, since the difference is visual. */
#galleryLayoutCardElement {
  position: fixed;
  z-index: 80;
  width: 210px;
  padding: 0.75rem;
  border: 1px solid var(--colorSurface-300);
  border-radius: 6px;
  background: var(--colorSurface-200);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
#galleryLayoutCardElement.hidden {
  display: none;
}
#galleryLayoutCardElement .galleryLayoutCardTitle {
  color: var(--colorSurface-700);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
#galleryLayoutCardElement .galleryLayoutCardPreview {
  margin-bottom: 0.5rem;
}
#galleryLayoutCardElement .galleryLayoutCardPreview svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--colorPrimary-500);
  opacity: 0.75;
}
#galleryLayoutCardElement .galleryLayoutCardDescription {
  color: var(--colorSurface-600);
  font-size: 0.75rem;
  line-height: 1.4;
}

.editLock {
  width: min(440px, 92vw);
  padding: 2rem 1.75rem 1.5rem;
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  background: var(--colorSurface-200);
  color: var(--colorSurface-700);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.editLock[open] {
  display: block;
}
.editLock::backdrop {
  background: rgba(0, 0, 0, 0.72);
}
.editLock .editLockIcon {
  display: block;
  margin-bottom: 0.75rem;
}
.editLock .editLockIcon svg {
  display: inline-block;
  width: 28px;
  height: 28px;
}
.editLock .editLockAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--colorSurface-300);
}
.editLock .editLockAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editLock .editLockAvatar.editLockAvatarFallback {
  background: var(--colorSurface-300);
}
.editLock .editLockAvatar.editLockAvatarFallback svg {
  width: 26px;
  height: 26px;
  opacity: 0.75;
}
.editLock .editLockTitle {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--colorSurface-700);
}
.editLock .editLockMessage {
  margin: 0;
  color: var(--colorSurface-600);
  font-size: 0.9rem;
  line-height: 1.5;
}
.editLock .editLockMeta {
  margin: 0.5rem 0 0;
  color: var(--colorSurface-500);
  font-size: 0.8rem;
}
.editLock .editLockActions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.editLock .editLockAction {
  padding: 0.5rem 1rem;
  border: 1px solid var(--colorSurface-400);
  border-radius: 4px;
  background: transparent;
  color: var(--colorSurface-700);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: 0.2s ease all;
}
.editLock .editLockAction:hover {
  border-color: var(--colorPrimary-500);
  color: var(--colorPrimary-500);
}
.editLock .editLockAction:focus-visible {
  outline: 2px solid var(--colorPrimary-500);
  outline-offset: 2px;
}
.editLock .editLockAction.editLockActionPrimary {
  border-color: var(--colorPrimary-500);
  background: var(--colorPrimary-500);
  color: var(--colorSurface-100);
}
.editLock .editLockAction.editLockActionPrimary:hover {
  background: var(--colorPrimary-400);
  border-color: var(--colorPrimary-400);
  color: var(--colorSurface-100);
}

#contentEditor #content .quoteBlock {
  margin: 0;
  outline: none;
}
#contentEditor #content .quoteBlock .quoteText {
  outline: none;
}
#contentEditor #content .quoteBlock .quoteCite {
  display: block;
  margin-top: 0.5rem;
  outline: none;
  color: var(--colorSurface-600);
  font-size: 0.85rem;
  font-style: normal;
}
#contentEditor #content .quoteBlock .quoteCite:empty::before {
  content: attr(data-placeholder);
  color: var(--colorSurface-600);
  pointer-events: none;
}

#contentEditor #sidebar .imageAlignGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin-top: 0.35rem;
}
#contentEditor #sidebar .imageAlignOption {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border: 1px solid var(--colorSurface-300);
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s ease all;
}
#contentEditor #sidebar .imageAlignOption svg {
  width: 20px;
  height: 20px;
  fill: var(--colorSurface-600);
}
#contentEditor #sidebar .imageAlignOption:hover {
  border-color: var(--colorPrimary-500);
}
#contentEditor #sidebar .imageAlignOption.imageAlignOptionActive {
  border-color: var(--colorPrimary-500);
  background: var(--colorSurface-300);
}
#contentEditor #sidebar .imageAlignOption.imageAlignOptionActive svg {
  fill: var(--colorPrimary-500);
}

/*# sourceMappingURL=style.css.map */