/* TODO: */
/* link chevron color */
/* confirm various sizes -- fonts, icons, etc */
/* last child arrow placement and centering */
/* section header paragraph max-width constrain */
/* check for css style collisions from existing theme */
/* letter-spacing on content date and description? */
/* margins, etc */

:root {
    --color-cv-navy: #034B7B;
    --color-cv-sky: #CDDBE4;
    --color-cv-beige: #F1EFE9;
    --color-cv-green: #4CA093;

    --color-indigo: #472c72;
    --color-indigo-rgb: 71, 44, 114;

    --color-navbar: #f2efe8;

    --btn-color: #32659D;
    --btn-color-hover: #3077ac;
    --btn-color-rgb: 50,101,157;

    --icon-size: 24px;
    --icon-size--md: 32px;
    --icon-size--xl: 48px;
    --icon-padding: 4px;
    --icon-padding--md: 7px;
    --icon-padding--xl: 8px;
    --timeline-item-offset-x: var(--icon-size);
    --timeline-item-offset-y: var(--icon-size);
    --timeline-item-offset-x--md: var(--icon-size--md);
    --timeline-item-offset-y--md: var(--icon-size--md);
    --timeline-item-offset-x--xl: calc(var(--icon-size--xl) / 2);
    --timeline-item-offset-yt--xl: var(--icon-size--xl);
    --timeline-item-offset-yb--xl: calc(var(--icon-size--xl) * 1.25);

    --timeline-item-border-color: #bababa;

    --icon-bg--complete-color: var(--color-cv-green);
    --icon-bg--pending-color: var(--color-cv-sky);

    --link-color: var(--color-cv-navy);
    --link-color-hover: var(--color-cv-navy);

    /* if last-child is ODD use '0%' */
    /* if last-child is EVEN use '100%' */
    --timeline-arrow-top-value: 100%;
    --timeline-arrow-size: 16px;
    --timeline-arrow-offset: calc(var(--timeline-arrow-size) / 4);

    --section-heading-size: 48px;

    --z-index-section-content: 2;
    --z-index-section-decoration: 1;


    /* bootstrap vars */
    --bs-primary-rgb: 50,101,157;
}

.bg-primary {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-indigo {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--color-indigo-rgb), var(--bs-bg-opacity)) !important;
}

.btn-primary {
    --bs-btn-bg: var(--btn-color);
    --bs-btn-border-color: var(--btn-color);
    --bs-btn-hover-bg: var(--btn-color-hover);
    --bs-btn-hover-border-color: var(--btn-color-hover);
}

body {
    font-family: 'Lato', sans-serif;
}

.text-wrap-balance {
    text-wrap: balance;
}

.constrain {
    width: 100%;
    max-width: 696px;
    margin: 0 auto;
}

@media (min-width: 1600px) {
    .container {
        max-width: 1408px;
    }
}

.page-header {
    background-color: var(--color-navbar);
    padding: 2px 0;
}

.page-header .container {
    max-width: 1140px;
}

.navbar-logo {
    display: block;
    width: 208px;
    height: auto;
}

.navbar-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.page-header .navbar .navbar-nav {
    flex-grow: 1;
}

.page-header .navbar .navbar-nav li {
    flex-grow: 1;
    text-align: center;
}

.page-header .navbar li a {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    color: #000;
    text-decoration: none;
    padding: 13px 20px;
    line-height: 1;
    display: block;
}

.page-header .navbar li a img {
    display: inline-block;
    width: 16px;
    height: 16px;
}

/* ================================ */
/* Page Section     				*/
/* ================================ */

.page-section {
    position: relative;
    padding: 48px 0;
}

.page-section--access::after,
.page-section--collaborate::after {
    content: '';
    position: absolute;
    height: 25%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-section-decoration);
}

.page-section__content {
    position: relative;
    z-index: var(--z-index-section-content);
}

.page-section--access {
    background-color: var(--color-cv-sky);
}

.page-section--access::after {
    background-color: var(--color-cv-beige);
}

.page-section--collaborate {
    background-color: var(--color-cv-beige);
}

.page-section--collaborate::after {
    background-color: #fff;
}

.page-section--ilrp-wells {
    background-color: var(--color-cv-sky);
}

.page-section--footnotes {
    background-color: #f5f5f5;
}

.page-section--timeline {
    background-color: #fff;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: var(--section-heading-size);
    font-family: 'Oswald', sans-serif;
}

.section-header p {
    font-size: 18px;
    line-height: 1.5;
}

/* ================================ */
/* Hero         					*/
/* ================================ */

.page-hero {
    background-color: var(--color-cv-navy);
}

.page-hero__visual,
.page-hero__content {

}

.page-hero__content {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.page-hero__content h1 {
    font-size: 64px;
    line-height: 1;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 0;
}

.page-hero__content p {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 0;
}

.page-hero__content__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-hero__visual img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 1200px) {

    .page-hero {
        background-color: var(--color-cv-navy);
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }

    .page-hero__visual,
    .page-hero__content {
        width: 50%;
    }

    .page-hero__content__text {
        padding-right: 40px;
        max-width: 564px;
    }
}

/* ================================ */
/* Map card     					*/
/* ================================ */

.embed-container {
    position: relative;
    padding-bottom: 65%;
    height: 0;
    max-width: 100%;
}

    .embed-container iframe, .embed-container object, .embed-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

small {
    position: absolute;
    z-index: 40;
    bottom: 0;
    margin-bottom: -15px;
}

/* ================================ */
/* Data Cards         		        */
/* ================================ */

.data-card-wrapper {
    background-color: #fff;
    box-shadow: 0px 12px 25px 0px rgba(0,0,0,.26);
    padding: 24px 24px 36px;
}

.data-card--map {}

.data-card--map .data-card__content {
    padding-left: 24px;
}

@media (min-width: 992px) {
    .data-card-wrapper {
        padding: 48px 48px 64px;
    }

    .data-card--map .data-card__visual {}
}

@media (min-width: 1200px) {
    .data-card-wrapper--map {
        padding: 24px;
    }

    .data-card--map {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    .data-card--map .data-card__content {
        width: 36%;
        flex-shrink: 0;
    }
}

@media (min-width: 1400px) {
    .data-card-wrapper--map {
        padding: 36px;
    }
}

.data-card__logos {
    gap: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 3rem 0;
}

@media (min-width: 992px) {
    .data-card__logos {
        flex-wrap: nowrap;
    }
}


.data-card__content {}

.chart-error-visible + .data-card .data-card__content {
    display: none;
}

@media (min-width: 992px) {
    .data-card__content {
        padding: 0 24px;
    }
}

.data-card__content h3 {
    font-size: 48px;
    font-weight: 700;
}

.data-card__content h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.015em;
}

.data-card__columnize {}

@media (min-width: 992px) {
    .data-card__columnize {
        columns: 2;
    }
}

.data-card__content .btn {
    position: relative;
    border-radius: 24px;
    font-weight: 700;
    padding: 8px 16px;
    padding-right: 32px;
}

.data-card__content .btn::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    background-image: url('../images/chevron-right--white.svg');
    background-repeat: no-repeat;
}

.data-card-actions {
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.data-card-select {}

.data-card-select select {
    width: auto;
}

.data-card-select .form-select {
    font-weight: bold;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1rem;
}

/* ================================ */
/* Timeline (Base)					*/
/* ================================ */
.mlj-timeline {
    padding: 0 24px;
}

.mlj-timeline-item {
    position: relative;
    padding-left: var(--timeline-item-offset-x);
    padding-bottom: var(--timeline-item-offset-y);
    border-left: 1px dashed var(--timeline-item-border-color);
}

.mlj-timeline-item:last-child::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: var(--timeline-arrow-size);
    width: var(--timeline-arrow-size);
    transform: rotate(90deg) translateY(50%) translateX(calc(100% - var(--timeline-arrow-offset)));
    background-image: url('../images/chevron-right.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: .5;
}

.mlj-timeline-item__icon {
    position: absolute;
    left: 0;
    background: var(--icon-bg--complete-color);
    height: var(--icon-size);
    width: var(--icon-size);
    border-radius: 50%;
    transform: translateX(-50%);
    padding: var(--icon-padding);
}

.mlj-timeline-item__icon--complete {
    background: var(--icon-bg--complete-color);
}

.mlj-timeline-item__icon--pending {
    background: var(--icon-bg--pending-color);
}

.mlj-timeline-item__icon img {
    display: block;
    width: 100%;
}

.mlj-timeline-item__content__date {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.25;
}

.mlj-timeline-item__content__description {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: .5rem;
}

.mlj-timeline-item__content__description:last-child {
    margin-bottom: 0;
}

.mlj-timeline-item__content__link {
    margin-bottom: .625rem;
    display: flex;
}

.mlj-timeline-item__content__link a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--link-color);
    position: relative;
    line-height: 1;
    font-size: 16px;
    letter-spacing: 0.005rem;
}

.mlj-timeline-item__content__link a:hover {
    color: var(--link-color-hover);
}

.mlj-timeline-item__content__link a::after {
    content: '';
    display: block;
    margin-left: .25rem;
    height: 10px;
    width: 10px;
    background: url('../images/fa-chevron-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ================================ */
/* Timeline (MD)					*/
/* ================================ */

@media (min-width: 768px) and (max-width: 1199px) {
    .mlj-timeline {
        display: flex;
        flex-direction: column;
    }

    .mlj-timeline-item {
        width: 50%;
        padding-left: var(--timeline-item-offset-x--md);
    }

    .mlj-timeline-item:nth-child(odd) {
        padding-left: 0;
        padding-right: var(--timeline-item-offset-x--md);
        border-left: 0;
        border-right: 1px dashed var(--timeline-item-border-color);
    }

    .mlj-timeline-item:nth-child(even) {
        align-self: flex-end;
    }

    .mlj-timeline-item__icon {
        height: var(--icon-size--md);
        width: var(--icon-size--md);
    }

    .mlj-timeline-item:nth-child(odd) .mlj-timeline-item__icon {
        left: 100%;
    }

    .mlj-timeline-item:nth-child(odd) .mlj-timeline-item__content {
        text-align: right;
    }

    .mlj-timeline-item:nth-child(odd) .mlj-timeline-item__content__link {
        justify-content: flex-end;
    }

    .mlj-timeline-item:nth-child(odd) .mlj-timeline-item__content__link a {
        justify-content: flex-end;
    }
}


/* ================================ */
/* Timeline (XL)					*/
/* ================================ */

@media (min-width: 1200px) {
    .mlj-timeline {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto auto;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "a1-b1 a1-b1 c1-d1 c1-d1 e1-f1 e1-f1 g1-h1 g1-h1"
            ". b2-c2 b2-c2 d2-e2 d2-e2 f2-g2 f2-g2 .";
    }

    .mlj-timeline-item {
        border-left: 0;
        padding-bottom: 0;
        padding-left: var(--timeline-item-offset-x--xl);
    }

    .mlj-timeline-item::before {
        content: '';
        position: absolute;
        left: 0;
        right: 50%;
        border-top: 1px dashed var(--timeline-item-border-color);
    }

    .mlj-timeline-item:nth-child(odd)::before {
        bottom: 0;
        transform: translateY(1px);
    }

    .mlj-timeline-item:nth-child(even)::before {
        top: 0;
    }

    .mlj-timeline-item:last-child::before {
        right: 25%;
    }

    .mlj-timeline-item:last-child::after {
        left: unset;
        right: 25%;
        transform: translateX(calc(100% - var(--timeline-arrow-offset))) translateY(-50%);
        /* note: see variables */
        top: var(--timeline-arrow-top-value);
    }

    .mlj-timeline-item:nth-child(1) {
        grid-area: a1-b1;
    }

    .mlj-timeline-item:nth-child(2) {
        grid-area: b2-c2;
    }

    .mlj-timeline-item:nth-child(3) {
        grid-area: c1-d1;
    }

    .mlj-timeline-item:nth-child(4) {
        grid-area: d2-e2;
    }

    .mlj-timeline-item:nth-child(5) {
        grid-area: e1-f1;
    }

    .mlj-timeline-item:nth-child(6) {
        grid-area: f2-g2;
    }

    .mlj-timeline-item:nth-child(7) {
        grid-area: g1-h1;
    }

    .mlj-timeline-item:nth-child(8) {
        grid-area: h2-i2;
    }

    .mlj-timeline-item__icon {
        height: var(--icon-size--xl);
        width: var(--icon-size--xl);
        padding: var(--icon-padding--xl);
    }

    .mlj-timeline-item:nth-child(odd) .mlj-timeline-item__icon {
        bottom: 0;
        transform: translateY(50%);
    }

    .mlj-timeline-item:nth-child(even) .mlj-timeline-item__icon {
        top: 0;
        transform: translateY(-50%);
    }

    .mlj-timeline-item__content {
        padding-left: 1rem;
        border-left: 1px solid var(--timeline-item-border-color);
    }

    .mlj-timeline-item:nth-child(odd) .mlj-timeline-item__content {
        padding-bottom: var(--timeline-item-offset-yb--xl);
        height: 100%;
    }

    .mlj-timeline-item:nth-child(even) .mlj-timeline-item__content {
        padding-top: var(--timeline-item-offset-yt--xl);
    }
}

/* ================================ */
/* CAROUSEL       					*/
/* ================================ */


.mlj-carousel-item {
    position: relative;
    text-align: center;
}

.mlj-carousel-item__icon {
    display: block;
    position: relative;
    background: var(--icon-bg--complete-color);
    height: 48px;
    width: 48px;
    border-radius: 50%;
    padding: .5rem;
    margin: 0 auto 1rem;
}

.mlj-carousel-item__icon--complete {
    background: var(--icon-bg--complete-color);
}

.mlj-carousel-item__icon--pending {
    background: var(--icon-bg--pending-color);
}

.mlj-carousel-item__icon img {
    display: block;
    width: 100%;
}

.mlj-carousel-item__content__date {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.25;
}

.mlj-carousel-item__content__description {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: .5rem;
}

.mlj-carousel-item__content__description:last-child {
    margin-bottom: 0;
}

.slick-dots {
    display: flex;
    gap: .25rem;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.slick-arrow {
    position: absolute;
    top: 50%;

    border: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    height: 36px;
    width: 36px;
    text-indent: 100%;
    overflow: hidden;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ddd;

    transform: translateY(-50%);
}

.slick-disabled {
    opacity: .3;
    background-color: #ccc;
}

.slick-prev {
    right: 100%;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tbGVmdC1pY29uIGx1Y2lkZS1jaGV2cm9uLWxlZnQiPjxwYXRoIGQ9Im0xNSAxOC02LTYgNi02Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: center center;
}

.slick-next {
    left: 100%;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: center center;
}

.slick-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(100%) translateX(-50%);
}

.slick-dots button {
    border: 3px solid #cddbe4;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    text-indent: 100%;
    overflow: hidden;
    display: block;
    line-height: 1;
    padding: 0;
    margin: 0;
    background: #fff;
}

.slick-dots .slick-active button {
    border-color: #4ca093;
    background-color: #4ca093;
}



/* ================================ */
/* MZ MAP       					*/
/* ================================ */

.mz-map {
    position: relative;
}

.mz-legend {
    position: absolute;
    bottom: .75rem;
    left: .75rem;
    background: #fff;
    padding: .75rem;
}

.mz-legend__title {
    width: 300px;
    max-width: 100%;
    margin-bottom: 1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    line-height: 1.25;
    text-wrap: balance;
}

.mz-legend__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 5px;
    border-top: 1px solid #eee;
    padding-top: 5px;
    line-height: 1;
}

.mz-legend__item:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Zones only display once they report households receiving water. The API omits
   zero-count zones; this also hides the rows while the initial fetch is in flight. */
.mz-legend__item[data-count="0"] {
    display: none;
}

.mz-legend__item .mz-swatch {
    background-color: #ccc;
    height: 12px;
    width: 12px;
}

.mz-legend__item .mz-name {
    font-size: 12px;
}

.mz-legend__item .mz-count {
    margin-left: auto;
    padding-left: 1rem;
    font-size: 12px;
    font-weight: bold;
}

@media (min-width: 1400px) {
    .mz-legend__title {
        font-size: 20px;
    }
    .mz-legend {
        bottom: 1rem;
        left: 1rem;
        padding: 1rem;
    }

    .mz-legend__item {
        margin-top: 6px;
        padding-top: 6px;
    }

    .mz-legend__item .mz-swatch {
        height: 13px;
        width: 13px;
    }

    .mz-legend__item .mz-name {
        font-size: 13px;
    }
    .mz-legend__item .mz-count {
        font-size: 13px;
    }
}

.mz-legend__item[data-heading="Yolo Management Zone"] .mz-swatch {
    background-color: #fd7f6f;
}

.mz-legend__item[data-heading="Turlock Management Zone"] .mz-swatch {
    background-color: #7ccbe5;
}

.mz-legend__item[data-heading="Modesto Management Zone"] .mz-swatch {
    background-color: #ffff6c;
}

.mz-legend__item[data-heading="Chowchilla Management Zone"] .mz-swatch {
    background-color: #fb7dda;
}

.mz-legend__item[data-heading="Kings Water Alliance"] .mz-swatch {
    background-color: #62d6bd;
}

.mz-legend__item[data-heading="Kaweah Management Zone"] .mz-swatch {
    background-color: #bc89d6;
}

.mz-legend__item[data-heading="Tule Basin Management Zone"] .mz-swatch {
    background-color: #c99176;
}

.mz-legend__item[data-heading="Eastern San Joaquin Management Zone"] .mz-swatch {
    background-color: #7eb0d5;
}

.mz-legend__item[data-heading="Delta Mendota Management Zone"] .mz-swatch {
    background-color: #b2e061;
}

.mz-legend__item[data-heading="Merced Management Zone"] .mz-swatch {
    background-color: #bd7ebe;
}

.mz-legend__item[data-heading="Madera Management Zone"] .mz-swatch {
    background-color: #ffb55a;
}

.mz-legend__item[data-heading="Tulare Lake (Kings) Management Zone"] .mz-swatch {
    background-color: #beb9db;
}

.mz-legend__item[data-heading="Tulare Lake (Kern) Management Zone"] .mz-swatch {
    background-color: #e4bcad;
}

.mz-legend__item[data-heading="Kern (Westside South) Management Zone"] .mz-swatch {
    background-color: #fdcce5;
}

.mz-legend__item[data-heading="Kern County (Poso) Management Zone"] .mz-swatch {
    background-color: #8bd3c7;
}

#meetingsEventsChart .apexcharts-legend,
#peopleEngagementsChart .apexcharts-legend{
    display: block;
}

#meetingsEventsChart .apexcharts-legend-series,
#peopleEngagementsChart .apexcharts-legend-series {
    margin-bottom: 0.5rem !important;
    gap: 2px;
}

.apexcharts-legend-text {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
}

.apexcharts-legend-marker {
    border-radius: 3px !important;
}

/* ================================ */
/* Footnotes/Reference   			*/
/* ================================ */

.fn {
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 4px;
    position: relative;
}

.fn span {
    display: block;
    line-height: 1;
}

.fn:target {
    box-shadow: 3px 3px 6px -3px #4ca093;
    background: #fff;
}

.fn:target::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);

    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  
    border-left: 10px solid #4ca093;
}

.fn a {
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    display: block;
    padding: 4px 6px;
    background-color: var(--link-color);
    color: #fff;
    text-decoration: none;
    margin-right: 8px;
}

.ref {}

.ref a {
    font-family: monospace;
}

.data-card__content h4 .ref {
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
}

.data-card__content h4 .ref a {
    text-decoration: none;
    color: var(--link-color);
    display: inline-block;
}

/* ================================ */
/* Spinners                         */
/* ================================ */

[data-empty="spinner"] {
    position: relative;
}

[data-empty="spinner"]:empty::before {
    content: '';
    height: 2rem;
    width: 2rem;
    display: inline-block;
    vertical-align: -0.125em;
    border-radius: 50%;
    animation: 0.25s linear infinite spinner-border;
    border: 4px solid #4ca093;
    border-right-color: transparent;
}