:where(.historical-stock-quote *) {
    margin-top: 0;
}

.historical-stock-quote {
    --_form-col-width: 10rem;
    --_form-col-gap: clamp(1.875rem, -0.2679rem + 3.3482vw, 3.75rem);
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.historical-stock-quote__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--_form-col-width), 1fr));
    gap: 2rem var(--_form-col-gap);
}

.historical-stock-quote__form__col {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

@media (width >= 37.5rem) {
    .historical-stock-quote__form__col:is(.dual) {
        grid-column: span 2;
    }
}

@media (width < 37.5rem) {
    .historical-stock-quote__form {
        grid-template-columns: 1fr;
    }
}

.historical-stock-quote__form__col > label {
    font-size: var(--heading-caption-size);
}

.historical-stock-quote__input {
    border: none;
    border-bottom: solid 1px currentColor;
    border-radius: 0;
    font-size: var(--button-font-size);
    line-height: 1.2;
    padding-block: 0.5rem;
    width: 100%;
}
    .historical-stock-quote__input:is(select) {
        appearance: none;
        padding-inline: 0 1.75rem;
        background: url('data:image/svg+xml,<svg width="12" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9 .804 0h10.392L6 9Z" fill="%23000"/></svg>') 100% 50% / 0.75rem auto no-repeat;
    }

    .historical-stock-quote__input:is(#toDate, #fromDate) {
        padding-inline: 0 2.25rem;
        background: url('data:image/svg+xml,<svg width="24" height="27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16c-.378 0-.694-.128-.95-.384a1.296 1.296 0 0 1-.383-.95c-.001-.376.127-.693.384-.949s.573-.384.949-.384.693.128.95.384c.258.256.386.573.383.95-.002.377-.13.693-.384.95A1.27 1.27 0 0 1 12 16Zm-5.333 0c-.378 0-.695-.128-.95-.384a1.296 1.296 0 0 1-.384-.95c0-.376.127-.693.384-.949s.574-.384.95-.384.693.128.95.384c.258.256.386.573.383.95-.003.377-.13.693-.384.95a1.27 1.27 0 0 1-.95.383Zm10.666 0c-.377 0-.694-.128-.949-.384a1.296 1.296 0 0 1-.384-.95c0-.376.127-.693.384-.949s.573-.384.95-.384c.375 0 .692.128.95.384s.385.573.383.95c-.003.377-.131.693-.384.95a1.27 1.27 0 0 1-.95.383ZM12 21.333c-.378 0-.694-.128-.95-.384a1.296 1.296 0 0 1-.383-.949c-.001-.377.127-.693.384-.95.257-.255.573-.383.949-.383s.693.128.95.384c.258.256.386.572.383.949-.002.377-.13.694-.384.95a1.27 1.27 0 0 1-.949.383Zm-5.333 0c-.378 0-.695-.128-.95-.384A1.296 1.296 0 0 1 5.333 20c0-.377.127-.693.384-.95.257-.255.574-.383.95-.383s.693.128.95.384c.258.256.386.572.383.949-.003.377-.13.694-.384.95a1.27 1.27 0 0 1-.95.383Zm10.666 0c-.377 0-.694-.128-.949-.384A1.296 1.296 0 0 1 16 20c0-.377.127-.693.384-.95.257-.255.573-.383.95-.383.375 0 .692.128.95.384s.385.572.383.949c-.003.377-.131.694-.384.95a1.27 1.27 0 0 1-.95.383ZM2.667 26.667c-.734 0-1.361-.261-1.883-.783A2.573 2.573 0 0 1 0 24V5.333c0-.733.261-1.36.784-1.882a2.574 2.574 0 0 1 1.883-.784H4V0h2.667v2.667h10.666V0H20v2.667h1.333c.734 0 1.362.261 1.884.784.523.522.784 1.15.783 1.882V24c0 .733-.26 1.361-.783 1.884a2.561 2.561 0 0 1-1.884.783H2.667Zm0-2.667h18.666V10.667H2.667V24Z" fill="%23000"/></svg>') 100% 50% / 1.25rem auto no-repeat;
    }

.historical-stock-quote__form__date-range {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

    .historical-stock-quote__form__date-range > * {
        flex: 1 1 var(--_form-col-width);
    }

    .historical-stock-quote__form__date-range label {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

.historical-stock-quote__data {
    overflow-x: auto;
}

    .historical-stock-quote__data table {
        border-collapse: collapse;
        width: 100%;
    }

        .historical-stock-quote__data table thead th {
            font-size: var(--heading-caption-size);
            font-weight: 400;
            text-align: left;
            padding-block-end: 1rem;
        }

        .historical-stock-quote__data table tbody tr {
            border-top: solid 1px var(--color-gray-200);
        }

        .historical-stock-quote__data table td {
            font-size: var(--button-font-size);
            padding-block: 1rem;
            white-space: nowrap;
        }

        .historical-stock-quote__data table :where(td, th):not(:last-child) {
            padding-inline-end: 1.5rem;
        }

.datepicker-cell.selected, .datepicker-cell.selected:hover {
    background-color: var(--color-theme-primary) !important;
}