/**
 * cs.css — a v4 kliens-mag stílusai (3D.4).
 *
 * 5D.3 óta itt a mag LEBEGŐ RÉTEGE, mindkét felületen: a natív dialógus (`cs-dialog`), a buborék (`cs-toast`) és a
 * súgó-buborék (`cs-tooltip`) — a Bootstrap `modal-*` / `tooltip` és a jquery.toast `jq-toast-*` osztályai helyett.
 * A színek a design system tokenjei (`var(--cs-…)`), TARTALÉK-ÉRTÉKKEL: a publikus felület nem tölti a tokeneket
 * (tokens.css), ott a tartalék adja a semleges kinézetet. Az admin többi komponense (a keret, a vezérlők, a lista,
 * a fülek, a lenyíló menü) az admin.css-ben él (tools/css/, Tailwind-kimenet).
 *
 * Külön fájl, nem JS-ből beszúrt <style>: a CSP `style-src`-jából az `'unsafe-inline'` az 5. fázisban kimegy, egy
 * `'self'` stíluslap viszont utána is töltődik.
 */

/* ------------------------------------------------------------------------------ 5D.3: a natív dialógus */
/* A <dialog> maga a TELJES nézet (átlátszó), benne középen a panel — így a háttérre kattintás a dialog-elemé
 * (cs.modal: target === element → zár, ha zárható). A top layer és a fókusz-csapda a böngészőé (3D.4). */
dialog.cs-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 24px 16px;
    border: 0;
    background: transparent;
    color: var(--cs-text, #1f2937);
    overflow: auto;
}
dialog.cs-dialog[open] { display: flex; }
dialog.cs-dialog::backdrop { background: rgb(0 0 0 / .5); }
/* nyitott dialog mögött nem görgetünk (a Bootstrap JS-e régen a body .modal-open-jével tette) */
html:has(dialog.cs-dialog[open]) { overflow: hidden; }

/* a panel `margin: auto`-val középen — a magas tartalom így sem vágódik le felül (a flex safe-középre áll) */
.cs-dialog__panel {
    position: relative; /* a tartalom abszolút elemeinek viszonyítási pontja (a Bootstrap .modal-content-je is az volt) */
    width: min(600px, 100%);
    margin: auto;
    border: 1px solid var(--cs-border, #e2e8f0);
    border-top: 3px solid var(--cs-accent, #2563eb);
    border-radius: var(--cs-radius, 10px);
    background: var(--cs-surface, #fff);
    box-shadow: 0 20px 50px rgb(0 0 0 / .28);
    font: 14px/1.45 var(--cs-font, system-ui, -apple-system, "Segoe UI", sans-serif);
    text-align: left;
}
.cs-dialog__panel--sm { width: min(360px, 100%); }
.cs-dialog__panel--lg { width: min(900px, 100%); }
.cs-dialog__panel--xl { width: min(1140px, 100%); }
.cs-dialog--danger .cs-dialog__panel { border-top-color: var(--cs-danger, #dc2626); }
.cs-dialog--warning .cs-dialog__panel { border-top-color: var(--cs-warning, #d97706); }
.cs-dialog--success .cs-dialog__panel { border-top-color: var(--cs-success, #16a34a); }
.cs-dialog--neutral .cs-dialog__panel { border-top-color: var(--cs-text-muted, #64748b); }

.cs-dialog__head { padding: 16px 20px 0; }
.cs-dialog__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--cs-text, #1f2937);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
.cs-dialog__icon { color: var(--cs-accent-ink, #1d4ed8); }
/* 5E.1: a címsor jobb szélén álló számláló (a kijelentkezési dialógus hátralévő ideje — eddig pull-right) */
.cs-dialog__counter { margin-left: auto; font-variant-numeric: tabular-nums; }
.cs-dialog--danger .cs-dialog__icon { color: var(--cs-danger, #dc2626); }
.cs-dialog--warning .cs-dialog__icon { color: var(--cs-warning, #d97706); }
.cs-dialog--success .cs-dialog__icon { color: var(--cs-success, #16a34a); }
.cs-dialog--neutral .cs-dialog__icon { color: var(--cs-text-muted, #64748b); }
.cs-dialog__body { padding: 12px 20px 20px; overflow-wrap: anywhere; }
.cs-dialog__details:empty { display: none; }
/* a részlet-doboz: a törlendő tétel (név, kép, IP) a figyelmeztetés színében — a Bootstrap alert alert-danger utódja */
.cs-dialog__subject {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid color-mix(in oklch, var(--cs-danger, #dc2626) 25%, transparent);
    border-radius: var(--cs-radius-sm, 6px);
    background: var(--cs-danger-soft, #fef2f2);
    color: var(--cs-danger, #b91c1c);
    font-weight: 500;
}
/* R6.3: a tájékoztató hangnemű dialógus (a lap másolása) részlet-doboza a kiemelés színében, nem a figyelmeztetésében */
.cs-dialog--info .cs-dialog__subject {
    border-color: color-mix(in oklch, var(--cs-accent, #2563eb) 25%, transparent);
    background: var(--cs-accent-soft, #eff6ff);
    color: var(--cs-accent-ink, #1d4ed8);
}
.cs-dialog__avatar {
    width: 56px;
    height: 56px;
    border: 2px solid var(--cs-surface, #fff);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--cs-border, #e2e8f0);
}
.cs-dialog__sub { flex-basis: 100%; padding-left: 24px; font-size: 90%; font-style: italic; font-weight: 400; }
.cs-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--cs-border, #e2e8f0);
    border-radius: 0 0 var(--cs-radius, 10px) var(--cs-radius, 10px);
    background: var(--cs-surface-2, #f8fafc);
}
.cs-dialog__foot:empty { display: none; }

/**
 * 3F.1: a mountolatlan sziget nem villanhat fel. A Vue a DOM-ból fordítja a sablont (3A.2), tehát a
 * `{{ }}` és a v-for-os sorok addig nyersen ott állnak a lapon, amíg a mount le nem fut — a v-cloak
 * attribútumot pedig a Vue a mount végén veszi le. A keret oldalsávja és keresőpanelje ezért v-cloak-ot
 * visel; a szabály itt van, mert minden szigetnek kell, és nem tehető osztályba (az attribútum a jelölés).
 */
[v-cloak] {
    display: none !important;
}

/* 4A.1 → 5D.3: a cs.table stílusa a keret komponens-osztályain él (tools/css/core.css, az admin.css része) — a
 * DataTables-osztályok áthidaló szabályai (a feldolgozás-doboz, a halvány törzs betöltés alatt, a hiba-sor) oda költöztek. */

/**
 * 4A.2: a cs.upload (a file-uploader.js utóda). A feltöltő a sablon _uploader.scss osztályait viseli (uploader_wrapper,
 * tbl_uploader, uploader-response-pnl, u_success / u_error), itt csak az van, ami új: a húzd-és-ejtsd jelzése, a haladás,
 * az előnézetek és az eredmény-panel két listája (a régi #resp_success / #resp_error azonosító helyett osztály, mert
 * egy lapon több feltöltő is lehet).
 */
.cs-upload .uploader_wrapper {
    border: 2px dashed transparent;
    border-radius: 4px;
    transition: border-color .15s ease-in, background-color .15s ease-in;
}

.cs-upload .uploader_wrapper.cs-upload--dragover {
    border-color: #2a95c4;
    background-color: rgba(42, 149, 196, .08);
}

/* 5E.1: a haladás-sáv a feltöltő saját eleme (a Bootstrap progress / progress-bar progress-bar-striped active helyett):
 * halvány sín, a séma kiemelő színében csíkozott, mozgó sáv; a szélességet a sziget adja (:style — CSSOM, a CSP engedi) */
.cs-upload__progress {
    margin: 6px 4px 0;
    height: 14px;
    overflow: hidden;
    border-radius: 7px;
    background: var(--cs-surface-2, #eef1f4);
}

.cs-upload__bar {
    height: 100%;
    min-width: 2em;
    background-color: var(--cs-accent, #2a95c4);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .18) 25%, transparent 25%, transparent 50%,
        rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .18) 75%, transparent 75%, transparent);
    background-size: 14px 14px;
    color: var(--cs-on-accent, #fff);
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    transition: width .2s ease;
    animation: cs-upload-stripes 1s linear infinite;
}

@keyframes cs-upload-stripes { from { background-position: 14px 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) { .cs-upload__bar { animation: none; } }

.cs-upload__drop { text-align: center; } /* a tallózó cellája (eddig a Bootstrap text-center) */

.cs-upload__previews {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
}

.cs-upload__preview {
    max-height: 64px;
    max-width: 96px;
    padding: 2px;
    border: 1px solid var(--cs-border, #ddd); /* 5E.1: a keret a sajátja (eddig a Bootstrap img-thumbnail) */
    border-radius: var(--cs-radius-sm, 4px);
    background: var(--cs-surface, #fff);
}

.cs-upload__resp {
    clear: both;
    display: block;
}

/* --------------------------------------------------------------------------------------------- 4A.4: a natívra
 * váltott bővítmények. Mindegyik a mai Bootstrap-3 osztályokra épül (input-group, nav-tabs, tab-pane), itt csak
 * az van, amit a natív mező vagy az új könyvtár igényel — a kinézet ettől marad a mai.
 */

/* Szín (a bootstrap-colorpicker helyett): a natív színmező alapból nagy és keretes, a mai
 * `colorpicker-storm` beviteli sávba kell illeszkednie. */
.cs-color {
    display: flex;
    align-items: stretch;
}

.cs-color .cs-color-input {
    flex: 0 0 46px;
    height: 38px; /* 5D.2: a cs-input magassága */
    padding: 2px;
    border: 1px solid var(--cs-border, #ccc);
    border-radius: var(--cs-radius-sm, 4px) 0 0 var(--cs-radius-sm, 4px);
    background: var(--cs-surface, #fff);
    cursor: pointer;
}

/* 5D.2: a téma `input { -webkit-appearance: none }` reset-je a csúszka SÁVJÁT is levette (csak a gomb látszott,
 * 4A.4 óta) — itt visszakapja a natív rajzolást, a séma kiemelő színével */
.cs-color .cs-color-alpha {
    flex: 1 1 auto;
    min-width: 60px;
    margin: 0 8px;
    align-self: center;
    -webkit-appearance: auto;
    appearance: auto;
    accent-color: var(--cs-accent, #337ab7);
}

.cs-color .cs-color-preview {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border: 1px solid var(--cs-border, #ccc);
    /* a sakktábla-háttér mutatja meg az átlátszóságot (a színt a :style teszi rá) */
    background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
        linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

/* Képvágó (a ngImgCrop helyett): a Cropper.js a saját stíluslapját hozza, itt csak a keret és a kerek
 * kijelölés (a régi area-type="circle") van. */
.cs-cropper-stage {
    max-width: 100%;
    overflow: hidden;
}

.cs-cropper-stage > .cs-cropper-image {
    display: block;
    max-width: 100%;
}

.cs-cropper-round .cropper-view-box,
.cs-cropper-round .cropper-face {
    border-radius: 50%;
}

/* Húzd-és-ejtsd (a dragular / ui-tree helyett): a SortableJS három osztálya — a mai dragular-érzet. */
.cs-sortable-ghost {
    opacity: .35;
}

.cs-sortable-chosen {
    cursor: move;
}

.cs-sortable-drag {
    opacity: .85;
}

/* Fülek (az ui.bootstrap uib-tabset helyett): 5D.3 óta a keret komponens-osztályain (tools/css/core.css). */

/* Menüfa (az angular-ui-tree helyett, 4E.2): a szintek egymásba ágyazott listák — a beljebb kezdés a mai
 * `.angular-ui-tree-nodes .angular-ui-tree-nodes { padding-left: 35px }` szabály párja. */
.cs-menu-tree ol.cs-menu-nodes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-menu-tree ol.cs-menu-nodes ol.cs-menu-nodes {
    padding-left: 35px;
}

/* (a Jodit 4F.2-es színjavítása — a kényszerített sötét betű — elment: design/glass óta a szerkesztő minden színe a keret
 * tokenjein áll, a sémát és a módot követi — tools/css/controls.css, „a WYSIWYG-szerkesztő") */

/* Görgetősáv (4G.2): a `jquery.mCustomScrollbar` plugin utóda. A plugin a natív sáv helyére rajzolt egy
 * sajátot (a keret az „inset" témát kérte a `.page-content-container`-re); a görgetést maga a doboz adta és
 * adja ma is (`overflow-y: auto`), a plugin csak a KINÉZETET vitte. Ugyanaz a látvány a böngésző saját
 * eszközeivel: 12 px széles sáv, 6 px-es, lekerekített fogó, áttetsző háttér — Firefoxban a szabványos
 * `scrollbar-*`, Chrome/Safariban a `::-webkit-scrollbar`. */
.page-content-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .45) rgba(0, 0, 0, .2);
}

.page-content-container::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.page-content-container::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .2);
}

.page-content-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .45);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 16px;
}

.page-content-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .65);
}

/* Szöveg-levágás (4G.2): a `jquery.dotdotdot` plugin utóda. A plugin a hír-bevezetőt a doboz magasságához
 * vágta és `... ` jelet tett a végére (`content_clamp('news-intro')`); a magasságot a modul stíluslapja
 * amúgy is rögzíti (`height`/`max-height` + `line-height`), tehát a levágás CSS-sel is elvégezhető — a sorok
 * száma a kettő hányadosa. A `line-clamp` a szabvány, a `-webkit-` előtag pedig a mai böngészők kérése. */
.pm-news .news-horizontal .news-intro,
.pm-news .news-circle .news-intro,
.home-news-2 .news-intro {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 9.6rem / 2.4rem */
    line-clamp: 4;
    overflow: hidden;
}

.ingatlan .news-horizontal .news-intro {
    -webkit-line-clamp: 2; /* 6rem / 2.4rem */
    line-clamp: 2;
}

/* --------------------------------------------------------------------------------- 5C.2: a keret animációi */
/* Az animate.css (3.7.0, MIT, © 2018 Daniel Eden — https://daneden.me/animate) HÉT animációja, amit a keret és a
   képernyők használnak: a bejelentkező (shake, flipOutY → flipInY a képcserénél, fadeIn a láblécen), az irányítópult
   panelje (slideInUp / slideOutDown), a munkamenet lejáratának jelzése (rubberBand), a gombpanel és a súgó-szöveg
   (fadeIn), a kép-modul törlési listája (flipInY). A teljes stíluslap (~60 kB, ~70 animáció) így nem töltődik minden
   lapon; csak a sablon-elrendezés szerkesztője kéri (assets/vendor/animate/ — onnan választható a publikus lapok
   animációja, és az előnézethez mind kell). Új animáció a keretben = a kivonat bővítése innen, ugyanabból a forrásból. */
.animated { animation-duration: 1s; animation-fill-mode: both; }
@media (print), (prefers-reduced-motion: reduce) { .animated { animation: unset !important; transition: none !important; } }
@keyframes fadeIn {
  0% { opacity:0; }
  to { opacity:1; }
}
.fadeIn { animation-name:fadeIn; }
@keyframes shake {
  0%,to { transform:translateZ(0); }
  10%,30%,50%,70%,90% { transform:translate3d(-10px,0,0); }
  20%,40%,60%,80% { transform:translate3d(10px,0,0); }
}
.shake { animation-name:shake; }
@keyframes flipInY {
  0% { animation-timing-function:ease-in; opacity:0; transform:perspective(400px) rotateY(90deg); }
  40% { animation-timing-function:ease-in; transform:perspective(400px) rotateY(-20deg); }
  60% { opacity:1; transform:perspective(400px) rotateY(10deg); }
  80% { transform:perspective(400px) rotateY(-5deg); }
  to { transform:perspective(400px); }
}
.flipInY { animation-name:flipInY; backface-visibility:visible!important; }
@keyframes flipOutY {
  0% { transform:perspective(400px); }
  30% { opacity:1; transform:perspective(400px) rotateY(-15deg); }
  to { opacity:0; transform:perspective(400px) rotateY(90deg); }
}
.flipOutY { animation-duration:.75s; animation-name:flipOutY; backface-visibility:visible!important; }
@keyframes rubberBand {
  0% { transform:scaleX(1); }
  30% { transform:scale3d(1.25,.75,1); }
  40% { transform:scale3d(.75,1.25,1); }
  50% { transform:scale3d(1.15,.85,1); }
  65% { transform:scale3d(.95,1.05,1); }
  75% { transform:scale3d(1.05,.95,1); }
  to { transform:scaleX(1); }
}
.rubberBand { animation-name:rubberBand; }
@keyframes slideInUp {
  0% { transform:translate3d(0,100%,0); visibility:visible; }
  to { transform:translateZ(0); }
}
.slideInUp { animation-name:slideInUp; }
@keyframes slideOutDown {
  0% { transform:translateZ(0); }
  to { transform:translate3d(0,100%,0); visibility:hidden; }
}
.slideOutDown { animation-name:slideOutDown; }

/* ------------------------------------------------------------------------------- 5D.3: a buborék (cs.toast) */
/* A mintaoldal buboréka: sötét, lekerekített sáv (a mód szövegszínén, a mód hátterével), a fajta ikonja a saját
 * színében. A jquery-toast-plugin (5C.2 óta itt álló) szabályai és a base64-es ikon-képei elmentek. */
.cs-toast-stack {
    position: fixed;
    top: 60px;
    right: 12px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(340px, calc(100vw - 24px));
    pointer-events: none;
}
.cs-toast {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px 11px 14px;
    border-radius: var(--cs-radius, 10px);
    background: var(--cs-text, #1f2937);
    color: var(--cs-bg, #fff);
    box-shadow: 0 10px 30px rgb(0 0 0 / .25);
    font: 500 13.5px/1.4 var(--cs-font, system-ui, -apple-system, "Segoe UI", sans-serif);
    pointer-events: auto;
    animation: cs-toast-in .18s ease-out;
}
.cs-toast__icon { flex: none; margin-top: 2px; font-size: 15px; }
.cs-toast--success .cs-toast__icon { color: var(--cs-success, #4ade80); }
.cs-toast--error .cs-toast__icon { color: var(--cs-danger, #f87171); }
.cs-toast--warning .cs-toast__icon { color: var(--cs-warning, #fbbf24); }
.cs-toast--info .cs-toast__icon { color: var(--cs-info, #60a5fa); }
/* (a mintaoldal szerint a buborék a mód FORDÍTOTTJA: sötét módban világos sáv sötét szöveggel) */
.cs-toast__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cs-toast__close {
    flex: none;
    margin: -3px -2px 0 4px;
    padding: 0 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: 18px/1 var(--cs-font, system-ui, sans-serif);
    opacity: .7;
    cursor: pointer;
}
.cs-toast__close:hover { opacity: 1; }
.cs-toast__close:focus { outline: none; }
.cs-toast__close:focus-visible { box-shadow: 0 0 0 2px var(--cs-focus, rgb(96 165 250 / .6)); opacity: 1; }
@keyframes cs-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cs-toast { animation: none; } }

/* ------------------------------------------------------------------------ 6B.3: a képnagyító (cs.lightbox) */
/* A unitegallery „wide" nagyítójának utóda: a <dialog> a teljes nézet, sötét háttéren középen a kép és a felirata,
 * oldalt a két lapozó, jobbra fent a bezárás, balra fent a számláló. A színek szándékosan rögzítettek (a kép körül
 * a sötét háttér a megszokott, mindkét témában). */
dialog.cs-lightbox {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
dialog.cs-lightbox[open] { display: flex; }
dialog.cs-lightbox::backdrop { background: rgb(0 0 0 / .88); }
html:has(dialog.cs-lightbox[open]) { overflow: hidden; }
.cs-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    max-width: calc(100vw - 140px);
}
.cs-lightbox__image { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; }
.cs-lightbox__caption { margin-top: 12px; color: #fff; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; }
.cs-lightbox__counter { position: absolute; top: 18px; left: 20px; color: rgb(255 255 255 / .8); font: 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.cs-lightbox__button {
    position: absolute;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / .45);
    color: #fff;
    font: 30px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: pointer;
}
.cs-lightbox__button:hover { background: rgb(0 0 0 / .75); }
.cs-lightbox__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cs-lightbox__close { top: 10px; right: 12px; }
.cs-lightbox__prev { top: 50%; left: 14px; transform: translateY(-50%); }
.cs-lightbox__next { top: 50%; right: 14px; transform: translateY(-50%); }
@media (max-width: 575px) {
    .cs-lightbox__figure { max-width: 100vw; }
    .cs-lightbox__prev, .cs-lightbox__next { top: auto; bottom: 14px; transform: none; }
}

/* -------------------------------------------------------------------------- 5D.3: a súgó-buborék (cs.tooltip) */
/* a helyét a cs.tooltip számolja (a body abszolút koordinátái), itt csak a kinézet és a nyíl */
.cs-tooltip {
    z-index: 9100;
    max-width: 260px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease-in;
}
.cs-tooltip--in { opacity: 1; }
.cs-tooltip__inner {
    padding: 5px 9px;
    border-radius: var(--cs-radius-sm, 6px);
    background: var(--cs-text, #1f2937);
    color: var(--cs-bg, #fff);
    font: 500 12px/1.4 var(--cs-font, system-ui, -apple-system, "Segoe UI", sans-serif);
    text-align: center;
    overflow-wrap: anywhere;
}
.cs-tooltip__arrow { position: absolute; width: 0; height: 0; border: 5px solid transparent; }
.cs-tooltip--top { padding-bottom: 5px; }
.cs-tooltip--top .cs-tooltip__arrow { bottom: -5px; left: 50%; margin-left: -5px; border-top-color: var(--cs-text, #1f2937); }
.cs-tooltip--bottom { padding-top: 5px; }
.cs-tooltip--bottom .cs-tooltip__arrow { top: -5px; left: 50%; margin-left: -5px; border-bottom-color: var(--cs-text, #1f2937); }
.cs-tooltip--left { padding-right: 5px; }
.cs-tooltip--left .cs-tooltip__arrow { right: -5px; top: 50%; margin-top: -5px; border-left-color: var(--cs-text, #1f2937); }
.cs-tooltip--right { padding-left: 5px; }
.cs-tooltip--right .cs-tooltip__arrow { left: -5px; top: 50%; margin-top: -5px; border-right-color: var(--cs-text, #1f2937); }