[x-cloak] {
    display: none !important;
}

/* Restore bold after the Meyer reset zeroes it via `font: inherit` */
b,
strong {
    font-weight: 700;
}

/* Headings — carbon-blazor.css ships no bare-element type scale and reset.css
   flattens h1-h6 via `font: inherit`. Carbon productive heading scale. */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cb-text-primary, var(--color-ink, inherit));
}

h1 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

h2 {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.29;
    margin-bottom: 0.5rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

h5 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.43;
}

h6 {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.33;
}

.row {
    width: 100%;
}

/* Mobile header: carbon-blazor.css hides the whole nav at <=671px.
   Keep just the active link visible so the user still sees where they are. */
@media (max-width: 671px) {
    .cb-header__nav {
        display: flex;
        flex: 0 1 auto;
    }

    .cb-header__nav .cb-header__link:not(.active) {
        display: none;
    }
}

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
    font-size: var(--font-size-small);
    font-family: var(--font-family-plex);
}

#components-reconnect-modal {
    font-size: var(--font-size-small);
    font-family: var(--font-family-plex);
    color: var(--color-ink);
    background-color: var(--color-canvas-listbox);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
}

#components-reconnect-modal[open] {
    animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal::backdrop {
    background-color: hsl(none 0% 0% / 0.4);
    animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp {
    0% { transform: translateY(30px) scale(0.95); }
    100% { transform: translateY(0); }
}

@keyframes components-reconnect-modal-fadeInOpacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
    color: var(--color-ink);
}

.components-rejoining-animation {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div {
    position: absolute;
    border: 3px solid var(--color-blue);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation {
    0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; }
    5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; }
    100% { top: 0; left: 0; width: 80px; height: 80px; opacity: 0; }
}

.ttb-price-action {
    font-family: var(--font-family-plex);
    font-size: 0.875rem;
}

@media (max-width: 671px) {
    .ttb-direction-col {
        margin: 1rem 0;
    }
}

.ttb-price-action__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.ttb-price-action__title {
    font-size: 0.75rem;
    color: var(--color-ink-secondary);
    margin-bottom: 0.5em;
}

.ttb-price-action__today {
    font-size: 0.75rem;
    color: var(--color-ink-secondary);
}

.ttb-price-action__rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1rem;
    margin-bottom: 1px;
    background: var(--color-canvas-listbox);
    border-bottom: 1px solid var(--color-border-strong);
}

.ttb-price-action__checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-blue);
    cursor: pointer;
}

.ttb-price-action__label {
    color: var(--color-ink);
    white-space: nowrap;
}

.ttb-price-action__days {
    width: 3rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    font: inherit;
    color: var(--color-ink);
    background: var(--color-canvas);
    border: 0;
    border-bottom: 1px solid var(--color-border-strong);
}

.ttb-price-action__days:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: -2px;
    border-bottom-color: transparent;
}

.ttb-price-action__direction {
    height: 1.75rem;
    padding: 0 0.5rem;
    font: inherit;
    color: var(--color-ink);
    background: var(--color-canvas);
    border: 0;
    border-bottom: 1px solid var(--color-border-strong);
    cursor: pointer;
}

.ttb-price-action__direction:focus {
    outline: 2px solid var(--color-blue);
    outline-offset: -2px;
    border-bottom-color: transparent;
}

/* Right-hand filter column on the Day / Overnight / Intraday pages.
   Below md it stacks full-width, filters above the chart, no border, natural
   height; from md up it sits to the right with a full-viewport-height divider
   (minus the 3rem Carbon header and the main padding above and below, so the
   page itself doesn't overflow), stays pinned as the page scrolls, and
   scrolls internally if its own content is taller. */
.ttb-side-col {
    order: -1;
}

@media (min-width: 42rem) {
    .ttb-side-col {
        order: 0;
        border-left: 1px solid var(--cb-border-subtle, var(--color-border-subtle));
        padding-left: 1.5rem;
        align-self: start;
        position: sticky;
        top: 3rem;
        height: calc(100vh - 3rem - 2 * var(--cb-spacing-06));
        overflow-y: auto;
    }
}

/* Active-filter count after a settings header's name; see AccordionBadge. Absent when the property is unset. */
.ttb-acc-count .cb-accordion__trigger > span:last-child::after {
    content: var(--ttb-acc-count);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.125rem;
    height: 1.125rem;
    margin-left: 0.5rem;
    border-radius: 50%;
    background: var(--color-blue); /* same blue as the info icons */
    color: #fff;
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
}

/* Market + Direction row at the top of the Day / Overnight side column.
   Direction sits right of the market search when it fits, else wraps below. */
.ttb-market-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ttb-market-row__market {
    flex: 1 1 14rem;
    min-width: 0;
}

.ttb-market-row__direction {
    flex: 0 0 auto;
}