/* TTTP_LIKOLAIKO_SORT_VERSION: 2026-08-06_tllk7 */

/* Overlay labels injected by tablepress-likolaiko-sort.js.
    Rendered as absolutely-positioned overlays so they do NOT affect TimeStrip spacing. */
table.tablepress .tttp-timestrip-overlay-label {
     position: absolute;
     z-index: 2;
     max-width: 100%;
     white-space: nowrap;
     overflow: visible;
     pointer-events: none;
}

/* Mobile-only TablePress tweaks for LikoLaiko tables.
   - Remove visible “grid” lines between stacked cells
   - Hide responsive/stacked header labels (temporary numbers)
*/

/*
    LikoLaiko page layout

    Note: WordPress may strip certain inline style properties (e.g. `display`).
    Keep the essential layout in CSS so the first paint is stable.
*/

.likolaiko-page,
.likolaiko-table {
    margin: 0;
    padding: 0;
}

.likolaiko-toprow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/*
    98/99: 3-row behavior
    - Row 1 (top nav/meta: N/T + Šiandien/Sąrašas…) is sticky with white background.
    - Row 2 (table header: ID/Dokumentas/...) scrolls normally.
    - Row 3 (yellow search row) is sticky under row 1.

    Note: sticky rows need a top offset equal to the sticky top + rendered height of row 1.
    JS sets `--tttp-llk-toprow-h` and `--tttp-llk-superheader-h`.
*/
.likolaiko-toprow {
    position: sticky !important;
    top: var(--tttp-sticky-top, 0px) !important;
    z-index: 10001 !important;
    background: #fff !important;
}

/* 98/99: TH sticky — desktop only. Mobile uses JS position:fixed overlay; CSS sticky
   breaks there because the JS moves the row element out of the table into an overlay. */
@media (min-width: 768px) {
:is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109) thead tr.tttp-likolaiko-superheader-row > :is(th, td),
:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(table.dataTable, table.tablepress.dataTable)
    thead tr.tttp-likolaiko-superheader-row > :is(th, td) {
    position: sticky !important;
    top: calc(var(--tttp-sticky-top, 0px) + var(--tttp-llk-toprow-h, 0px)) !important;
    z-index: 10001 !important;
    background-color: var(--tttp-header-bg, inherit) !important;
    background-clip: padding-box !important;
}
}

@media (min-width: 768px) {
:is(#tablepress-95, #tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109, #tablepress-201) thead tr:not(.tttp-likolaiko-title-row):not(.tttp-likolaiko-superheader-row) > :is(th, td),
:is(#tablepress-95_wrapper, #tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper, #tablepress-201_wrapper)
    :is(table.dataTable, table.tablepress.dataTable)
    thead tr:not(.tttp-likolaiko-title-row):not(.tttp-likolaiko-superheader-row) > :is(th, td) {
    position: sticky !important;
    top: calc(
        var(--tttp-sticky-top, 0px)
        + var(--tttp-llk-toprow-h, 0px)
        + var(--tttp-llk-superheader-h, 0px)
    ) !important;
    z-index: 10000 !important;
    background-color: var(--tttp-header-bg, inherit) !important;
    background-clip: padding-box !important;
}
}

/* Mobile: JS may move the yellow superheader row into a fixed overlay.
   Keep it visually unified and constrained to the table width. */
@media (max-width: 767px) {
    .tttp-llk-mobile-superheader-overlay {
        box-sizing: border-box;
        max-width: 100vw;
    }

    .tttp-llk-mobile-superheader-overlay table {
        margin: 0 !important;
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    .tttp-llk-mobile-superheader-overlay :is(th, td) {
        background-color: var(--tttp-header-bg, #ffef66) !important;
        background-clip: padding-box !important;
        box-sizing: border-box !important;
    }

    /* No rounded corners on the yellow sticky block. */
    .tttp-llk-mobile-superheader-overlay,
    .tttp-llk-mobile-superheader-overlay table,
    .tttp-llk-mobile-superheader-overlay thead,
    .tttp-llk-mobile-superheader-overlay tr,
    .tttp-llk-mobile-superheader-overlay th,
    .tttp-llk-mobile-superheader-overlay td {
        border-radius: 0 !important;
    }
}

/* No rounded corners on colored/yellow TablePress header rows (98/99/108/109). */
:is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109) thead tr.tttp-likolaiko-title-row > :is(th, td),
:is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109) thead tr.tttp-likolaiko-superheader-row > :is(th, td),
:is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109) thead tr:not(.tttp-likolaiko-title-row) > :is(th, td) {
    border-radius: 0 !important;
}

/* Desktop: the visible header often comes from the DataTables scroll-head table.
   Force square corners there too (yellow row in particular). */
:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(.dataTables_scrollHead, .dataTables_scrollHeadInner, .dt-scroll-head, .dt-scroll-headInner)
    thead tr.tttp-likolaiko-superheader-row > :is(th, td),
:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(.dataTables_scrollHead, .dataTables_scrollHeadInner, .dt-scroll-head, .dt-scroll-headInner)
    thead tr:not(.tttp-likolaiko-title-row) > :is(th, td) {
    border-radius: 0 !important;
}

/* Desktop: also remove border radius from the DataTables scroll-head containers themselves.
   Some themes apply radius on these wrappers, which shows up as rounded bottom corners. */
:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(.dataTables_scrollHead, .dataTables_scrollHeadInner, .dt-scroll-head, .dt-scroll-headInner) {
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Desktop-only: enforce square corners on the 98/99/108/109 pages (search box + dropdown UI).
   Use very high specificity so this wins even over WP "Additional CSS". */
@media (min-width: 783px) {
    html body:is(.page-id-6638, .page-id-6640),
    html body:has(#tablepress-108),
    html body:has(#tablepress-109) {
        --tttp-header-corner-radius: 0px !important;
    }

    html body:is(.page-id-6638, .page-id-6640)
        :is(#tablepress-98_wrapper, #tablepress-99_wrapper)
        .tttp-likolaiko-search-input,
    html body:has(#tablepress-108) #tablepress-108_wrapper .tttp-likolaiko-search-input,
    html body:has(#tablepress-109) #tablepress-109_wrapper .tttp-likolaiko-search-input {
        border-radius: 0 !important;
    }

    html body:is(.page-id-6638, .page-id-6640)
        :is(#tablepress-98_wrapper, #tablepress-99_wrapper)
        :is(.tttp-ish-filter-menu, .tttp-ish-filter-item),
    html body:has(#tablepress-108) #tablepress-108_wrapper :is(.tttp-ish-filter-menu, .tttp-ish-filter-item),
    html body:has(#tablepress-109) #tablepress-109_wrapper :is(.tttp-ish-filter-menu, .tttp-ish-filter-item) {
        border-radius: 0 !important;
    }

    /* Override WP Additional CSS that sets per-corner radii on the header rows. */
    html body:is(.page-id-6638, .page-id-6640)
        :is(#tablepress-98, #tablepress-99, #tablepress-98_wrapper, #tablepress-99_wrapper)
        thead tr.tttp-likolaiko-title-row > th,
    html body:has(#tablepress-108)
        :is(#tablepress-108, #tablepress-108_wrapper)
        thead tr.tttp-likolaiko-title-row > th,
    html body:has(#tablepress-109)
        :is(#tablepress-109, #tablepress-109_wrapper)
        thead tr.tttp-likolaiko-title-row > th {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    html body:is(.page-id-6638, .page-id-6640)
        :is(#tablepress-98, #tablepress-99, #tablepress-98_wrapper, #tablepress-99_wrapper)
        thead tr:not(.tttp-likolaiko-title-row):not(.tttp-likolaiko-superheader-row) > :is(th, td):first-child,
    html body:has(#tablepress-108)
        :is(#tablepress-108, #tablepress-108_wrapper)
        thead tr:not(.tttp-likolaiko-title-row):not(.tttp-likolaiko-superheader-row) > :is(th, td):first-child,
    html body:has(#tablepress-109)
        :is(#tablepress-109, #tablepress-109_wrapper)
        thead tr:not(.tttp-likolaiko-title-row):not(.tttp-likolaiko-superheader-row) > :is(th, td):first-child {
        border-bottom-left-radius: 0 !important;
    }

    html body:is(.page-id-6638, .page-id-6640)
        :is(#tablepress-98, #tablepress-99, #tablepress-98_wrapper, #tablepress-99_wrapper)
        thead tr:not(.tttp-likolaiko-title-row):not(.tttp-likolaiko-superheader-row) > :is(th, td):last-child,
    html body:has(#tablepress-108)
        :is(#tablepress-108, #tablepress-108_wrapper)
        thead tr:not(.tttp-likolaiko-title-row):not(.tttp-likolaiko-superheader-row) > :is(th, td):last-child,
    html body:has(#tablepress-109)
        :is(#tablepress-109, #tablepress-109_wrapper)
        thead tr:not(.tttp-likolaiko-title-row):not(.tttp-likolaiko-superheader-row) > :is(th, td):last-child {
        border-bottom-right-radius: 0 !important;
    }
}

:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(.dataTables_scrollHead, .dataTables_scrollHeadInner, .dt-scroll-head, .dt-scroll-headInner)
    table {
    border-radius: 0 !important;
}

/* Desktop: remove rounded corners from the scroll-head wrappers themselves.
   Some themes apply radius to the wrapper/table, which shows as rounded *bottom*
   corners on the yellow band even if TH/TD are square. */
:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(.dataTables_scrollHead, .dataTables_scrollHeadInner, .dt-scroll-head, .dt-scroll-headInner) {
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Also remove rounded corners from the other DataTables containers around the table.
   Some themes round these instead of the scroll-head itself. */
:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(
        .dataTables_wrapper,
        .dt-container,
        .dataTables_scroll,
        .dt-scroll,
        .dataTables_scrollBody,
        .dt-scroll-body
    ) {
    border-radius: 0 !important;
}

:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(.dataTables_scrollBody, .dt-scroll-body)
    :is(table, thead, tbody) {
    border-radius: 0 !important;
}

:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(.dataTables_scrollHead, .dataTables_scrollHeadInner, .dt-scroll-head, .dt-scroll-headInner)
    table,
:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(.dataTables_scrollHead, .dataTables_scrollHeadInner, .dt-scroll-head, .dt-scroll-headInner)
    thead {
    border-radius: 0 !important;
}

/* “Atgal” button: show an outward-pointing triangle instead of text. */
:is(.likolaiko-toprow.tttp-likolaiko-toprow, .likolaiko-meta.tttp-likolaiko-meta)
    .tttp-likolaiko-back5boxes {
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    width: 18px !important;
    min-width: 18px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

:is(.likolaiko-toprow.tttp-likolaiko-toprow, .likolaiko-meta.tttp-likolaiko-meta)
    .tttp-likolaiko-back5boxes::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 18px solid #00818F;
}

/* Mobile: DataTables scroll-head wrappers can break sticky if they clip/contain the header. */
:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper)
    :is(
        .dataTables_scrollHead,
        .dataTables_scrollHeadInner,
        .dt-scroll-head,
        .dt-scroll-headInner
    ) {
    overflow: visible !important;
}

/* Hard disable any DataTables sticky/floating headers for 98/99/108/109. */
html body :is(
    table#tablepress-98.fixedHeader-floating,
    table#tablepress-98.fixedHeader-locked,
    table#tablepress-99.fixedHeader-floating,
    table#tablepress-99.fixedHeader-locked,
    table.tablepress-id-98.fixedHeader-floating,
    table.tablepress-id-98.fixedHeader-locked,
    table.tablepress-id-99.fixedHeader-floating,
    table.tablepress-id-99.fixedHeader-locked,
    table#tablepress-108.fixedHeader-floating,
    table#tablepress-108.fixedHeader-locked,
    table#tablepress-109.fixedHeader-floating,
    table#tablepress-109.fixedHeader-locked,
    table.tablepress-id-108.fixedHeader-floating,
    table.tablepress-id-108.fixedHeader-locked,
    table.tablepress-id-109.fixedHeader-floating,
    table.tablepress-id-109.fixedHeader-locked
) {
    display: none !important;
}

/* Mobile only: neutralize scroll-head CSS sticky so JS (position:fixed overlay) handles it.
   On desktop, the scroll-head may be sticky via CSS or JS inline styles — do not interfere.
   Table 95 is included: unlike 98/99/108/109 it keeps DataTables on mobile (so it has a real
   scroll-head), but the CSS-sticky fires immediately at top:calc(stickyTop+0px) before JS sets
   --tttp-llk-toprow-h, which pins the scroll-head inside the toprow area. JS (enableMobileStickyHeaderTable)
   places it correctly once the toprow height is measured. */
@media (max-width: 767px) {
    html body :is(#tablepress-95_wrapper, #tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper, #tablepress-201_wrapper) :is(.dataTables_scrollHead, .dt-scroll-head) {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
    }

    /* Neutralize THEAD CSS sticky for 201 on mobile, same as 98/99/108/109 (which sticky-header.js
       handles via inline style). Without this, the sticky rule from PASTE_INTO_WORDPRESS_ADMIN.css
       (table.tttp-llk:not(.dataTable) thead { position:sticky }) competes with the JS teleport
       overlay: after moveSuperRowBack() the thead re-sticks at topPx, and iOS elastic bounce makes
       it visibly re-appear. */
    html body #tablepress-201 thead {
        position: static !important;
        top: auto !important;
    }
}

:is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper) :is(.dataTables_filter, .dt-search) {
    position: sticky !important;
    top: calc(var(--tttp-sticky-top, 0px) + var(--tttp-llk-toprow-h, 0px)) !important;
    z-index: 10000 !important;
}

.likolaiko-nav {
    display: flex;
    gap: 6px;
}

.likolaiko-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Defensive: if a legacy generated page still contains an <img> strip inside
   .likolaiko-triangle, hide it so only the CSS chevron is visible. */
.likolaiko-triangle img {
    display: none !important;
}

.likolaiko-meta {
    text-align: right;
    margin: 0;
    padding: 0;
}

.likolaiko-meta small {
    line-height: 1;
}

/* Back-compat: older pages used inline spans without classes; WP can also strip inline `display`. */
.likolaiko-meta small {
    display: block;
}

.likolaiko-meta small span {
    display: block !important;
}

.likolaiko-meta .likolaiko-today,
.likolaiko-meta .likolaiko-updated {
    display: block;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* Hard override: even if the page content is the shortcode version (no `.likolaiko-meta`
   wrapper or WP strips inline styles), force the two lines to stack. */
html body :is(.likolaiko-today, .likolaiko-updated) {
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
    Desktop alignment

    Goal: align both
    - TAIS meta block ("Šiandien …" / "Sąrašas atnaujintas …")
    - DataTables search box

    to the same right edge as the visible table box.

    Centering handled by .likolaiko-page { display:block; max-width:680px; margin:0 auto }
    defined in WP Additional CSS (WP Admin > TablePress > Custom CSS).
*/
@media (min-width: 783px) {
    .likolaiko-page {
        overflow: clip; /* prevents horizontal overflow without creating a scroll container (unlike overflow:hidden, which breaks position:sticky) */
    }

    .likolaiko-toprow {
        width: 100%;
    }

    /* Keep meta locked to the table's right edge. */
    .likolaiko-toprow .likolaiko-meta {
        margin-left: auto !important;
    }

    #tablepress-98_wrapper,
    #tablepress-99_wrapper,
    #tablepress-108_wrapper,
    #tablepress-109_wrapper {
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    /* Some themes/plugins add padding/margins to DataTables wrapper/scroll containers,
       which shifts the *visible* table border inward. Zero them so “right edge” means
       the same thing for meta/search and the table border. */
    :is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper) :is(
            .dataTables_wrapper,
            .dataTables_scroll,
            .dataTables_scrollHead,
            .dataTables_scrollBody,
            .dataTables_scrollHeadInner,
            .dt-container,
            .dt-scroll,
            .dt-scroll-head,
            .dt-scroll-body,
            .dt-scroll-headInner
        ) {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    :is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109) {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* If the search input is moved into the titlebar by another plugin, keep it flush-right. */
    :is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper) .tttp-likolaiko-titlebar__search {
        margin-left: auto !important;
    }

    :is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper) .tttp-likolaiko-search-input {
        margin-right: 0 !important;
    }

    /*
        DataTables search alignment for 98/99

        Another plugin/theme forces `.dataTables_filter` to `display:flex !important`.
        That breaks the default float-right behavior and can leave the search box
        offset from the visible table border. Force a deterministic right alignment.
    */
    :is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper) :is(.dataTables_filter, .dt-search) {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        width: 100% !important;
        justify-content: flex-end !important;
        text-align: right !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    :is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper) :is(.dataTables_filter, .dt-search) > label {
        margin-left: auto !important;
    }

    /* If another plugin moves the search input into the title bar,
       hide the original DataTables controls row to prevent duplicates. */
    @supports selector(:has(*)) {
        :is(#tablepress-98_wrapper, #tablepress-99_wrapper, #tablepress-108_wrapper, #tablepress-109_wrapper):has(.tttp-likolaiko-titlebar__search) :is(.dataTables_filter, .dt-search) {
            display: none !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
    }
}

/* Alignment is CSS-only; never hide meta during any JS "aligning" state. */
.likolaiko-page.tttp-llk-aligning .likolaiko-meta {
    visibility: visible !important;
}

/* Remove the vertical gap between the sticky toprow (Šiandien/Sąrašas) and the table header.
   WordPress themes and DataTables can add margin-top to the wrapper div;  zero it out for
   all likolaiko tables so the header sits flush below the toprow on all screen sizes. */
:is(
    #tablepress-95_wrapper,
    #tablepress-98_wrapper,
    #tablepress-99_wrapper,
    #tablepress-108_wrapper,
    #tablepress-109_wrapper,
    #tablepress-201_wrapper
) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 782px) {
    table.tablepress {
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    table.tablepress td,
    table.tablepress th {
        border: 0 !important;
        box-shadow: none !important;
    }

    /* TablePress “Responsive Tables” extension (if enabled) */
    table.tablepress .tablepress-responsive-label {
        display: none !important;
    }

    /* If responsive labels are rendered via pseudo-elements instead of spans, re-enable
       them for Nr (col 1) and Data (col 3). */
    :is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109)
        :is(td.column-1, td.column-3)[data-title]::before {
        content: attr(data-title) !important;
        display: inline-block !important;
        margin-right: 6px;
        opacity: 0.8;
    }

    :is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109)
        :is(td.column-1, td.column-3):not([data-title])[data-label]::before {
        content: attr(data-label) !important;
        display: inline-block !important;
        margin-right: 6px;
        opacity: 0.8;
    }

    /* LikoLaiko mobile: keep temporary column labels for Nr and Data only.
       (TablePress responsive mode injects these labels per-cell.) */
    :is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109) :is(td.column-1, td.column-3, td:nth-child(1), td:nth-child(3)) .tablepress-responsive-label {
        display: inline-block !important;
        margin-right: 6px;
        opacity: 0.8;
    }

    /* Some responsive setups use pseudo-elements for labels.
       Default: hide them (keeps layout clean). */
    table.tablepress.tablepress-responsive td::before,
    table.tablepress.tablepress-responsive td:before {
        content: none !important;
        display: none !important;
    }

    /* But re-enable pseudo labels for Nr/Data columns (common attrs: data-label / data-title). */
    :is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109)
        :is(td.column-1, td.column-3, td:nth-child(1), td:nth-child(3))[data-label]::before {
        content: attr(data-label) !important;
        display: inline-block !important;
        margin-right: 6px;
        opacity: 0.8;
    }

    :is(#tablepress-98, #tablepress-99, #tablepress-108, #tablepress-109)
        :is(td.column-1, td.column-3, td:nth-child(1), td:nth-child(3))[data-title]::before {
        content: attr(data-title) !important;
        display: inline-block !important;
        margin-right: 6px;
        opacity: 0.8;
    }
}