.floatlabel { cursor: text ; position: relative;  box-sizing: border-box; /*margin:0 auto 0 auto;*/ border:1px solid transparent; border:1px solid var(--color-gray); background:var(--color-surface); border-radius:var(--border-radius); padding:15px 20px 15px 20px; color:var(--color-on-surface); text-align:left; max-width:100% }
:host(.noborder) .floatlabel {border:none; }
.floatlabel input, .floatlabel textarea, .floatlabel select, .floatlabel .select2 {	 background:transparent; -webkit-appearance: none; box-sizing: border-box; width:100%; margin:0; padding:0; border:none !important;}
.floatlabel label { pointer-events:none; text-align:left;position: absolute; overflow:hidden; box-sizing: border-box;  top: 0;  left: 0;   width:100%;  white-space: nowrap; cursor: text; user-select:none; padding: 13px 0 0 10px;  transition: all 200ms;    color:var(--color-on-surface); opacity:0.8; transform-origin: top left; line-height:1.5rem;}

.floatlabel input:disabled + label,
.floatlabel textarea:disabled + label,
.floatlabel input:focus + label,
.floatlabel input:valid + label,
.floatlabel textarea:focus + label,
.floatlabel textarea:valid + label,
.floatlabel select:focus + label,
.floatlabel select:valid + label, 
.floatlabel .select2-container--below + label, 
.floatlabel .labelup 
{    transform: translate3d(0.8rem, -0.5rem, 0) scale(0.65); }

.floatlabel input[type=checkbox] { -webkit-appearance: radio; text-align:left; margin-right:10px;}
*:focus{outline:none}
input,button,textarea {font-size:inherit; color:inherit; font-family: inherit;}
img {max-width:100%;}

.field {position:relative; }
.ProseMirror .customblock{white-space: normal; margin:1rem 0;}
.ProseMirror .customblock.image,
.ProseMirror .customblock.video{background: var(--color-background); padding:1rem;}
/*:host(.validationAPIError) .floatlabel::after{*/
.validationPlaceholder { position: relative; }
.floatlabel > .validationPlaceholder {
  display: none;
  position: absolute;
  bottom: 0;
  right: 1rem;
  padding: 3px 2rem 3px 3px;
  transform: translateY(50%);
  background-color: var(--color-surface);
  font-size: 0.8rem;
}
:host([validationSchema]) .floatlabel > .validationPlaceholder { display: block; }
:host([validationAPI]) .floatlabel > .validationPlaceholder { display: block; }
.floatlabel > .charsCounter {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  opacity: 0.7;
  text-align: right;
}
.floatlabel > .charsCounter.overlimit {
  color: var(--color-error);
  opacity: 1;
}

/* На мобилке ошибка идёт под полем в потоке */
@media (max-width: 600px) {
  .floatlabel > .validationPlaceholder.validationAPIError {
    position: static;
    transform: none;
    background: none;
    padding: 4px 4px 0;
    right: auto;
    bottom: auto;
  }
}

.validationAPIError::after, .validationAPIOK::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  display: block;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32"><path fill="red" d="m24.778 21.42l-5.502-5.503l5.5-5.502l-2.827-2.83l-5.503 5.502l-5.502-5.502l-2.828 2.83l5.5 5.502l-5.5 5.502l2.83 2.828l5.5-5.502l5.5 5.502z"/></svg>') no-repeat center;
  background-size: 100% 100%;
}
@media (max-width: 600px) {
  .validationAPIError::after { display: none; }
}
.validationAPIOK::after {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path fill="green" d="m173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69L432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>') no-repeat center !important;
}
.validationAPIError { color: var(--color-error); }
.validationAPIOK { color: green; }

.dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-surface); border: 1px solid #ccc; max-height: 300px;
  overflow-y: auto; z-index: 1; display: none;
  box-shadow: 1px 1px 8px 0px rgba(34, 60, 80, 0.2);;
  z-index:2;
}
.dropdown > * {
  padding: 8px 15px; cursor: pointer; display: flex; justify-content: space-between; 
}
.dropdown > *.header {
  padding: 8px 8px;
  font-weight:bold;
}
.dropdown > *.disabled {
  color:var(--color-gray)
}
.dropdown > *:hover { background: var(--color-background); }

.toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  position:absolute;
  right: 5px;  
}

.tiptap .spoiler{  position:relative; color: gray;   text-shadow: 0 0 8px var(--color-on-surface); opacity: 0.7;  }

/* Стили для подсветки синтаксиса кода (highlight.js) */



/* Light theme (Atom One Light) */
:root,
[data-theme="light"] {
  --hljs-color: #383a42;
  --hljs-bg: #fafafa;
  --hljs-comment: #a0a1a7;
  --hljs-keyword: #a626a4;
  --hljs-section: #e45649;
  --hljs-literal: #0184bb;
  --hljs-string: #50a14f;
  --hljs-attr: #986801;
  --hljs-symbol: #4078f2;
  --hljs-built_in: #c18401;
}

/* Dark theme (Atom One Dark) */
[data-theme="dark"] {
  --hljs-color: #abb2bf;
  --hljs-bg: #282c34;
  --hljs-comment: #5c6370;
  --hljs-keyword: #c678dd;
  --hljs-section: #e06c75;
  --hljs-literal: #56b6c2;
  --hljs-string: #98c379;
  --hljs-attr: #d19a66;
  --hljs-symbol: #61aeee;
  --hljs-built_in: #e6c07b;
}

.hljs {
  color: var(--hljs-color);
}
.hljs-comment,
.hljs-quote {
  color: var(--hljs-comment);
  font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: var(--hljs-keyword);
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: var(--hljs-section);
}
.hljs-literal {
  color: var(--hljs-literal);
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
  color: var(--hljs-string);
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: var(--hljs-attr);
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: var(--hljs-symbol);
}
.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
  color: var(--hljs-built_in);
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: bold;
}
.hljs-link {
  text-decoration: underline;
}