/*--=================================================

PLEASE READ THE GUIDE ON HOW TO USE AND EDIT:
https://dub.sh/heartworm-guide

ANY QUESTIONS, PLEASE ASK:
https://discord.gg/RcMKnwz
    
=================================================--*/

/*======== CUSTOMIZATION OPTIONS ========*/
:root {
    /* background */
    --Background-Color: #242429;
    --Background-Image: url("https://64.media.tumblr.com/3d5b7e328717a20e6a90890857583ee7/tumblr_inline_t8igmaantm1qf8af3_500.png");
    /* place image url between quotes */
    --Background-Repeat: repeat;
    /* repeat [OR] no-repeat */
    --Background-Size: auto;
    /* auto [OR] cover */

    /* layout options */
    --Screen-Gaps: 3rem;
    --Container-Width: 650px;
    --Boxes-Spacing: 35px;

    /* main font */
    --Main-Text-Font-Family: "Funnel Sans", "Noto Color Emoji";
    --Main-Text-Font-Weight: normal;
    --Main-Text-Font-Size: 0.925rem;
    --Main-Text-Line-Height: 1.8;
    /* number only */
    --Main-Text-Color: #b6bdc7;

    /* bold */
    --Bold-Font-Weight: 600;
    /* number only */
    --Bold-Text-Color: #bfc181;

    /* italic */
    --Italic-Text-Color: #eabc8f;

    /* headings */
    --Heading-Font-Family: "Golos Text", "Noto Color Emoji";
    --Heading-Font-Weight: 500;
    --Heading-Font-Size: calc(var(--Main-Text-Font-Size) * 1.420);
    --Heading-Letter-Spacing: 0.035em;

    /* small caps */
    --Caps-Font-Family: "Figtree", "Noto Color Emoji";
    --Caps-Font-Weight: 500;
    --Caps-Font-Size: calc(var(--Main-Text-Font-Size) * 0.85);
    --Caps-Letter-Spacing: 0.035rem;
    --Caps-Line-Height: var(--Main-Text-Line-Height);

    /* links */
    --Links-Color: #ff8e8e;
    --Links-Underline-Gap: 0.05em;
    --Links-Underline-Size: 1px;
    --Links-Underline-Color: #935959;

    --Links-HOVER-Speed: 0.35s;
    --Links-HOVER-Color: #bfc181;
    --Links-HOVER-Underline-Color: #59673a;

    /* faded text */
    --Faded-Text-Transparency: 30%;
    /* percentage only */

    /* highlighted text */
    --Highlighted-Text-BG: #4c5046;
    --Highlighted-Text-Color: currentColor;

    /* blockquotes */
    --Blockquote-Border-Size: 3px;
    --Blockquote-Border-Color: #4c546a;
    --Blockquote-Border-Left-Gap-1: 0.35em;
    --Blockquote-Border-Left-Gap-2: 1.15em;

    /* scrollbar (Chrome/Edge/Brave/Opera only) */
    --Chrome-Scrollbar-Padding: 9px;
    --Chrome-Scrollbar-Thumb-Size: 1px;
    --Chrome-Scrollbar-Thumb: #626c85;
    --Chrome-Scrollbar-Track: #3c3e47;
    --Chrome-Scrollbar-BG: var(--Background-Color);

    /* header profile picture */
    --Header-Profile-Pic-Size: 100px;
    --Header-Profile-Pic-Rounded-Corners: 100%;
    --Header-Profile-Pic-Border-Thickness: 10px;

    --Header-Profile-Pic-Size-ON-SMALL-SCREENS: 17vw;
    --Header-Profile-Pic-Border-Thickness-ON-SMALL-SCREENS: 1.85vw;

    /* header status */
    --Header-Status-Left-Gap: 13px;
    --Header-Status-Border-Size: 1px;
    --Header-Status-Border-Color: #4c546a;
    --Header-Status-Padding-X: 0.8rem;
    --Header-Status-Padding-Y: 0.6rem;
    --Header-Status-BG: #3d404a;
    --Header-Status-Font-Size: var(--Main-Text-Font-Size);
    --Header-Status-Text-Color: #b6bdc7;
    --Header-Status-Shadow-X-Offset: 0.35rem;
    --Header-Status-Shadow-Y-Offset: 0.35rem;
    --Header-Status-Shadow-Size: 0.45rem;
    --Header-Status-Shadow-Color: #24262b;
    --Header-Status-Shadow-Strength: 85%;
    /* percentage only */

    /* header status - bubbles */
    --Header-Status-Bubble-Size-1: 8px;
    --Header-Status-Bubble-Size-2: 12px;

    /* header username */
    --Header-Username-Top-Gap: 0.55rem;
    --Header-Username-Font-Weight: 650;
    --Header-Username-Font-Size: calc(var(--Main-Text-Font-Size) - 1px);
    --Header-Username-Color: #b6bdc7;

    /* header links */
    --Header-Links-Icons-Border-Size: 1px;
    --Header-Links-Icons-Border-Color: #4c546a;
    --Header-Links-Icons-Rounded-Corners: 5px;
    --Header-Links-Icons-Padding: 0.5rem;
    --Header-Links-Icons-BG: #3d404a;
    --Header-Links-Icons-Size: 1.05rem;
    --Header-Links-Icons-Color: #b6bdc7;
    --Header-Links-Icons-Shadow-X-Offset: 0.35rem;
    --Header-Links-Icons-Shadow-Y-Offset: 0.35rem;
    --Header-Links-Icons-Shadow-Size: 0.45rem;
    --Header-Links-Icons-Shadow-Color: #24262b;
    --Header-Links-Icons-Shadow-Strength: 85%;
    /* percentage only */
    --Header-Links-Icons-Hover-Speed: 0.25s;
    --Header-Links-Icons-Hover-Zoom-Percentage: 15%;
    /* percentage only */
    --Header-Links-Icons-Spacing: 0.55rem;

    --Header-Links-Icons-HOVER-Border-Color: #4c546a;
    --Header-Links-Icons-HOVER-BG: #3d404a;
    --Header-Links-Icons-HOVER-Color: #c7b89f;

    --Header-Links-Hover-Text-Margin: 0.69rem;
    --Header-Links-Hover-Text-Border-Size: 1px;
    --Header-Links-Hover-Text-Border-Color: #4c546a;
    --Header-Links-Hover-Text-Rounded-Corners: 5px;
    --Header-Links-Hover-Text-Padding-X: 0.5rem;
    --Header-Links-Hover-Text-Padding-Y: 0.5rem;
    --Header-Links-Hover-Text-BG: #3e404a;
    --Header-Links-Hover-Text-Font-Size: calc(var(--Caps-Font-Size) - 1px);
    --Header-Links-Hover-Text-Color: #b6bdc7;
    --Header-Links-Hover-Speed: 0.4s;

    /* boxes */
    --Boxes-Rounded-Corners: 14px;
    --Boxes-BG: #323338;
    --Boxes-Padding: 18px;
    --Boxes-Shadow-X-Offset: 0.5rem;
    --Boxes-Shadow-Y-Offset: 0.5rem;
    --Boxes-Shadow-Size: 0.7rem;
    --Boxes-Shadow-Color: #141518;
    --Boxes-Shadow-Strength: 85%;
    /* percentage only */
    --Boxes-Text-Color: #b6bdc7;

    /* box headings */
    --Box-Heading-Border-Size: 1px;
    --Box-Heading-Border-Color: #4c546a;
    --Box-Heading-Padding-X: 0.8rem;
    --Box-Heading-Padding-Y: 0.6rem;
    --Box-Heading-BG: #3d404a;
    --Box-Heading-Font-Size: calc(var(--Main-Text-Font-Size) * 0.875);
    --Box-Heading-Text-Color: #b6bdc7;
    --Box-Heading-Shadow-X-Offset: 0.35rem;
    --Box-Heading-Shadow-Y-Offset: 0.35rem;
    --Box-Heading-Shadow-Size: 0.45rem;
    --Box-Heading-Shadow-Color: #24262b;
    --Box-Heading-Shadow-Strength: 85%;
    /* percentage only */

    /* box contents - icon bullet lists */
    --Icon-Bullets-Size: calc(var(--Main-Text-Font-Size) + 2px);
    --Icon-Bullets-Color: #b0a9a1;
    --Icon-Bullets-Gutter: 0.6em;

    --Bullet-List-Label-Padding-X: 6px;
    --Bullet-List-Label-Padding-Y: 4px;
    --Bullet-List-Label-BG: #3e404a;
    --Bullet-List-Label-Rounded-Corners: 7px;
    --Bullet-List-Label-Font-Size: calc(var(--Caps-Font-Size) - 0.5px);
    --Bullet-List-Label-Text-Color: #bca58d;

    --Bullet-List-Rows-Spacing: 0.35em;

    /* ask popup */
    --Popup-Fade-Speed: 420ms;
    --Popup-BG-Color: var(--Background-Color);
    --Popup-BG-Color-Transparency: 25%;
    /* percentage only */
    --Popup-BG-Blur: 5px;
}

/* end root - don't delete this line */

/*----- TUMBLR CONTROLS -----*/
iframe.tmblr-iframe.iframe-controls--desktop {
    position: fixed !important;
    left: initial !important;
    top: 0 !important;
    right: 0 !important;
    margin-left: 0px !important;
    margin-top: 10px !important;
    margin-right: 10px !important;
    transform-origin: 100% 0% !important;
    transform: scale(0.8, 0.8) !important;
    opacity: 0.8;
    transition: opacity 0.4s ease-in-out;
}

iframe.tmblr-iframe.iframe-controls--desktop:hover {
    opacity: 1;
}

.tmblr-iframe--follow-teaser,
.follow-teaser,
.tmblr-iframe--app-cta-button {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

/*----- BASICS -----*/
body {
    margin: 0;
    background: var(--Background-Color) var(--Background-Image) var(--Background-Repeat) fixed center / var(--Background-Size, auto);
    font: var(--Main-Text-Font-Weight, normal) var(--Main-Text-Font-Size, 0.9rem)/var(--Main-Text-Line-Height, 1.5) var(--Main-Text-Font-Family), sans-serif;
    color: var(--Main-Text-Color);
}

img {
    max-width: 100%
}

/* bold */
b,
strong,
b.caps {
    font-weight: var(--Bold-Font-Weight);
    color: var(--Bold-Text-Color);
}

/* bold :: small caps */
b.caps {
    font-weight: min(calc(var(--Bold-Font-Weight, 600) + 100), 800);
}

b.label {
    font-weight: var(--Bold-Font-Weight) !important;
}

/* italics */
i:not([class]),
em:not([class]) {
    color: var(--Italic-Text-Color);
}

/* blockquotes */
blockquote:not(.header-status blockquote) {
    position: relative;
    margin-inline: 0;
    padding-left: calc(var(--Blockquote-Border-Size) + var(--Blockquote-Border-Left-Gap-1) + var(--Blockquote-Border-Left-Gap-2));
}

blockquote:not(.header-status blockquote):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    margin-left: var(--Blockquote-Border-Left-Gap-1);
    width: var(--Blockquote-Border-Size);
    height: 100%;
    background: var(--Blockquote-Border-Color);
    border-radius: calc(var(--Blockquote-Border-Size) / 2);
}

/* faded text */
.faded:not(a > .faded, i:not([class] > .faded), b:not([class] > .faded)) {
    color: rgb(from var(--Boxes-Text-Color, #000) r g b / calc(100% - var(--Faded-Text-Transparency)));
}

/*----- HEADINGS -----*/
h1,
h2,
h3 {
    font-family: var(--Heading-Font-Family);
    font-weight: var(--Heading-Font-Weight);
    font-size: calc(var(--Main-Text-Font-Size) + 1px);
    text-transform: uppercase;
    letter-spacing: var(--Heading-Letter-Spacing);
}

h1 {
    font-size: var(--Heading-Font-Size);
}

/*----- SMALL CAPS -----*/
.caps,
b.label,
.hover-label {
    font: var(--Caps-Font-Weight, normal) var(--Caps-Font-Size, 0.9rem)/var(--Caps-Line-Height, 1.5) var(--Caps-Font-Family), sans-serif;
    text-transform: uppercase;
    letter-spacing: var(--Caps-Letter-Spacing);
}

/*----- LINKS -----*/
a[href]:not([href=""], :has(>*:not(span))) {
    color: var(--Links-Color);
    padding-bottom: var(--Links-Underline-Gap);
    border-bottom: var(--Links-Underline-Size) solid var(--Links-Underline-Color);
    transition: all var(--Links-HOVER-Speed) ease-in-out;
}

a[href]:not([href=""], :has(>*:not(span))):hover {
    color: var(--Links-HOVER-Color);
    border-color: var(--Links-HOVER-Underline-Color);
}

/*----- SCROLLBAR -----*/
/*  Chrome/Edge/Brave/Opera only */
::-webkit-scrollbar {
    width: calc((var(--Chrome-Scrollbar-Padding) * 2) + var(--Chrome-Scrollbar-Thumb-Size));
    height: calc((var(--Chrome-Scrollbar-Padding) * 2) + var(--Chrome-Scrollbar-Thumb-Size));
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: var(--Chrome-Scrollbar-Thumb);
    border: var(--Chrome-Scrollbar-Padding) solid transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* firefox only */
@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
    }
}

/*----- TEXT HIGHLIGHT -----*/
::selection {
    background: var(--Highlighted-Text-BG);
    color: var(--Highlighted-Text-Color);
}

::-moz-selection {
    background: var(--Highlighted-Text-BG);
    color: var(--Highlighted-Text-Color);
}

/*----- CONTAINER -----*/
.page-cont {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-inline: auto;
    width: clamp(var(--Container-Min-Width), var(--Container-Width), var(--Container-Max-Width));
}

@supports(width:fit-content) {
    .page-cont {
        width: fit-content;
        max-width: min(var(--Container-Width), var(--Container-Max-Width));
    }
}

main {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--Grid-Spacing);
    width: 100%;
    max-width: 100%;
    filter: drop-shadow(var(--Boxes-Shadow-X-Offset) var(--Boxes-Shadow-Y-Offset) var(--Boxes-Shadow-Size) rgb(from var(--Boxes-Shadow-Color, #000) r g b / var(--Boxes-Shadow-Strength, 100%)));
}

/*----- HEADER -----*/
header {
    position: relative;
    border-radius: var(--Boxes-Rounded-Corners);
    background: var(--Boxes-BG);
    z-index: 2;
}

.header-inner {
    position: relative;
    z-index: 0;
}

/*----- HEADER :: UPPER DECK -----*/
.header-top-hug {
    position: relative;
    border-radius: var(--Boxes-Rounded-Corners) var(--Boxes-Rounded-Corners) 0 0;
    overflow: hidden;
    z-index: 0;
}

.header-top-hug img {
    display: block;
    width: 100%;
    height: 28vh;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}

/*----- HEADER :: LOWER DECK -----*/
.header-bot-hug {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    gap: var(--Header-Status-Left-Gap, 0px);
    margin-left: var(--Boxes-Padding);
    margin-right: calc(var(--Boxes-Padding) + (var(--Header-PFP-Border-Thickness) / 2));
    z-index: 1;
}

.header-bot-hug:not(:first-child) {
    margin-top: calc(var(--Header-Profile-Pic-Total-Size) / -2);
}

/*----- HEADER :: LEFT -----*/
.header-icon-hug {
    position: relative;
    margin-bottom: calc(var(--Boxes-Padding) - var(--Header-PFP-Border-Thickness) + (var(--Header-Links-Icons-Total-Size) / 2));
    width: var(--Header-Profile-Pic-Total-Size);
    height: var(--Header-Profile-Pic-Total-Size);
    border-radius: var(--Header-Profile-Pic-Rounded-Corners);
    background: var(--Boxes-BG);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 0;
}

.header-icon-hug img {
    display: block;
    width: var(--Header-PFP-Size);
    height: var(--Header-PFP-Size);
    border-radius: var(--Header-Profile-Pic-Rounded-Corners);
    object-fit: cover;
    object-position: center;
}

/*----- HEADER :: MID + RIGHT -----*/
.header-mdrr-hug {
    margin-top: calc((var(--Header-Profile-Pic-Total-Size) / 2) - (var(--Header-Status-Single-Line-Height) / 2));
    flex: 1;
    gap: var(--Header-Status-Left-Gap, 0px);
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
}

/*----- HEADER :: MID -----*/
.header-mid-hug {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/*----- HEADER STATUS -----*/
.header-status {
    position: relative;
    border: var(--Header-Status-Border-Size) solid var(--Header-Status-Border-Color);
    border-radius: var(--Header-Status-Rounded-Corners);
    padding: calc(var(--Header-Status-Padding-Y) - var(--Main-Text-LH-V-Gap)) var(--Header-Status-Padding-X);
    --ts: calc(var(--Header-Status-Padding-X) + 2px + var(--Header-Status-Bubble-Total-Size-2));
    min-width: calc((var(--ts) * 2) - var(--Header-Status-Left-Gap, 0px));
    background: var(--Header-Status-BG);
    font-size: var(--Header-Status-Font-Size);
    color: var(--Header-Status-Text-Color);
    filter: drop-shadow(var(--Header-Status-Shadow-X-Offset) var(--Header-Status-Shadow-Y-Offset) var(--Header-Status-Shadow-Size) rgb(from var(--Header-Status-Shadow-Color, #000) r g b / var(--Header-Status-Shadow-Strength, 100%)));
    text-align: left;
}

.header-status.caps {
    padding: calc(var(--Header-Status-Padding-Y) - var(--Caps-LH-V-Gap)) var(--Header-Status-Padding-X);
}

.header-status:not(.caps) blockquote {
    margin-top: -1px;
}

/*----- HEADER USERNAME -----*/
.header-username {
    margin-top: var(--Header-Username-Top-Gap);
    margin-left: calc(var(--Header-Status-Border-Size) + var(--Header-Status-Padding-X));
    font-size: var(--Header-Username-Font-Size, var(--Main-Text-Font-Size));
    font-weight: var(--Header-Username-Font-Weight, 400);
    color: var(--Header-Username-Color);
}


/* @ symbol */
.header-username>span:first-child:before {
    content: "@";
    margin-right: calc(var(--Header-Username-Font-Size, var(--Main-Text-Font-Size)) * -0.1);
    font-family: "Asimovian", sans-serif;
}

/*----- HEADER LINKS -----*/
.header-right-hug {
    align-self: flex-start;
    margin-bottom: calc(var(--Header-Links-Icons-Total-Size) / -2);
    margin-left: auto;
    flex: 1;
}

.header-links {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    gap: var(--Header-Links-Icons-Spacing);
    filter: drop-shadow(var(--Header-Links-Icons-Shadow-X-Offset) var(--Header-Links-Icons-Shadow-Y-Offset) var(--Header-Links-Icons-Shadow-Size) rgb(from var(--Header-Links-Icons-Shadow-Color, #000) r g b / var(--Header-Links-Icons-Shadow-Strength, 100%)));
}

.header-links>li {
    position: relative;
}

.header-links [role="menuitem"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--Header-Links-Icons-Total-Size);
    height: var(--Header-Links-Icons-Total-Size);
    border: var(--Header-Links-Icons-Border-Size) solid var(--Header-Links-Icons-Border-Color);
    border-radius: var(--Header-Links-Icons-Rounded-Corners);
    background: var(--Header-Links-Icons-BG);
    color: var(--Header-Links-Icons-Color);
    transition: all var(--Header-Links-Icons-Hover-Speed) ease-in-out;
}

.header-links [role="menuitem"] i[class]:not([class=""]) {
    font-size: var(--Header-Links-Icons-Size);
}

.header-links [role="menuitem"] i[class^="mgc_"] {
    font-size: calc(var(--Header-Links-Icons-Size) + 1px) !important;
}

.header-links [role="menuitem"]:hover {
    border-color: var(--Header-Links-Icons-HOVER-Border-Color);
    background: var(--Header-Links-Icons-HOVER-BG);
    color: var(--Header-Links-Icons-HOVER-Color);
    transform: scale(calc(100% + var(--Header-Links-Icons-Hover-Zoom-Percentage, 0%)), calc(100% + var(--Header-Links-Icons-Hover-Zoom-Percentage, 0%)));
}

.header-links .hover-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--Header-Links-Hover-Text-Margin);
    border: var(--Header-Links-Hover-Text-Border-Size) solid var(--Header-Links-Hover-Text-Border-Color);
    border-radius: var(--Header-Links-Hover-Text-Rounded-Corners);
    padding: calc(var(--Header-Links-Hover-Text-Padding-Y) - var(--Caps-LH-V-Gap)) var(--Header-Links-Hover-Text-Padding-X);
    background: var(--Header-Links-Hover-Text-BG);
    font-size: var(--Header-Links-Hover-Text-Font-Size);
    color: var(--Header-Links-Hover-Text-Color);
    text-align: center;
    white-space: nowrap;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--Header-Links-Hover-Speed) ease-in-out, visibility 0s var(--Header-Links-Hover-Speed) ease-in-out;
    z-index: 2;
}

.header-links [role="menuitem"]:hover+.hover-label {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--Header-Links-Hover-Speed) ease-in-out, visibility 0s 0s ease-in-out;
}

/*----- BOXES GRID -----*/
/* boxes UNDERNEATH the main header box */
.boxes-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--Grid-Spacing);
}

/*----- BOXES -----*/
.box[full-width="yes"] {
    grid-column-end: span 2;
}

.box {
    position: relative;
    background: var(--Boxes-BG);
    border-radius: var(--Boxes-Rounded-Corners);
    padding: var(--Boxes-Padding);
    color: var(--Boxes-Text-Color);
    z-index: 0;
}

/*----- BOXES :: HEADINGS -----*/
.box-heading {
    position: relative;
    margin-left: -2px;
    font-size: var(--Box-Heading-Font-Size);
    color: var(--Box-Heading-Text-Color);
    filter: drop-shadow(var(--Box-Heading-Shadow-X-Offset) var(--Box-Heading-Shadow-Y-Offset) var(--Box-Heading-Shadow-Size) rgb(from var(--Box-Heading-Shadow-Color, #000) r g b / var(--Box-Heading-Shadow-Strength, 100%)));
}

.box-heading:first-child:has(> span),
.popup-inner .box-heading:first-child:has(> span) {
    margin-top: calc(0px - var(--Boxes-Padding) - (var(--Box-Heading-Single-Line-Height) / 2));
}

.box-heading:not(:last-child):has(> span),
.popup-inner .box-heading:not(:last-child):has(> span) {
    margin-bottom: var(--Box-Heading-Bottom-Gap);
}

.box-heading>span {
    display: inline-block;
    vertical-align: middle;
    border: var(--Box-Heading-Border-Size) solid var(--Box-Heading-Border-Color);
    border-radius: var(--Box-Heading-Rounded-Corners);
    padding: calc(var(--Box-Heading-Padding-Y) - var(--Main-Text-LH-V-Gap)) var(--Box-Heading-Padding-X);
    background: var(--Box-Heading-BG);
}

/*----- BOXES :: ICON BULLET LISTS -----*/
.icon-bullets {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-flow: column nowrap;
    gap: var(--Bullet-List-Rows-Spacing);
}

.icon-bullets li {
    position: relative;
}

.icon-bullets li:has(> i[class]:not([class=""])) {
    padding-left: calc(var(--Icon-Bullets-Size) + var(--Icon-Bullets-Gutter));
}

.icon-bullets li i[class]:not([class=""]) {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--Icon-Bullets-Size);
    height: calc(var(--Main-Text-Font-Size) * var(--Main-Text-Line-Height) + var(--Main-Text-Line-Height-Vertical-Align-Adjust));
    font-size: var(--Icon-Bullets-Size);
    color: var(--Icon-Bullets-Color);
}

.icon-bullets li i[class^="fa-"] {
    font-size: calc(var(--Icon-Bullets-Size) - 2px) !important;
}

b.label {
    padding: var(--Bullet-List-Label-Padding-Y) var(--Bullet-List-Label-Padding-X);
    background: var(--Bullet-List-Label-BG);
    border-radius: var(--Bullet-List-Label-Rounded-Corners);
    font-size: var(--Bullet-List-Label-Font-Size) !important;
    color: var(--Bullet-List-Label-Text-Color);
}

b.label:has(+ *) {
    margin-right: 2px;
}

b.label+ :is(a, b, i, em, span):before {
    content: " ";
}

b.label+.detail:is(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote) {
    margin-top: var(--Bullet-List-Rows-Spacing);
}

/*----- ASK POPUP -----*/
dialog .popup-inner {
    border-radius: var(--Boxes-Rounded-Corners);
    filter: drop-shadow(var(--Boxes-Shadow-X-Offset) var(--Boxes-Shadow-Y-Offset) var(--Boxes-Shadow-Size) rgb(from var(--Boxes-Shadow-Color, #000) r g b / var(--Boxes-Shadow-Strength, 100%)));
    overflow: initial;
}

dialog .popup-inner:has(> .box-heading:first-child) {
    margin-top: calc(var(--Box-Heading-Single-Line-Height) / 2);
}

dialog .popup-inner .box-heading {
    max-width: 100%;
    white-space: nowrap;
}

dialog .popup-inner .box-heading>span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

dialog .popup-inner .box-heading br {
    display: none;
}

dialog .popup-inner .box-contents {
    max-height: calc(var(--Popup-Max-Height, 85vh) - var(--Box-Heading-Bottom-Gap) - (var(--Popup-Padding) * 2));
    overflow: auto;
}

iframe[dim-the-askbox="yes"] {
    filter: brightness(85%) contrast(125%);
}