:root {
    --toyota-red: #d71920;
    --ink: #17202a;
    --muted: #6c757d;
    --soft-bg: #f6f8fb;
    --card-border: #e3e8ef;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #f5f7fa;
}

.navbar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--toyota-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    margin-right: 0.5rem;
}

.prototype-banner {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    border-radius: 1rem;
    padding: 0.85rem 1rem;
}

.app-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px rgba(23, 32, 42, 0.06);
}

.time-button {
    width: 100%;
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    font-weight: 700;
}

.time-button.available {
    border: 1px solid #ced4da;
    background: #fff;
}

.time-button.available:hover,
.time-button.selected {
    background: var(--toyota-red);
    border-color: var(--toyota-red);
    color: #fff;
}

.time-button.disabled {
    background: #edf1f5;
    border-color: #edf1f5;
    color: var(--muted);
    cursor: not-allowed;
}

.summary-panel {
    border-left: 5px solid var(--toyota-red);
}

.badge-test {
    background: #212529;
}

.small-help {
    color: var(--muted);
    font-size: 0.925rem;
}

.footer-note {
    color: var(--muted);
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .summary-panel {
        border-left: 0;
        border-top: 5px solid var(--toyota-red);
    }
}

.iti {
    width: 100%;
}

.iti__country-container {
    z-index: 5;
}
.technician-calendar-table {
    min-width: 950px;
    table-layout: fixed;
}

.calendar-time-column {
    width: 85px;
}

.calendar-day-column {
    min-width: 165px;
}

.calendar-slot {
    height: 78px;
    vertical-align: top;
}

.calendar-slot-available {
    background-color: #ffffff;
}

.calendar-slot-available:hover {
    background-color: #f8f9fa;
}

.calendar-slot-booked {
    background-color: #fff1f2;
    border-left: 4px solid #d71920 !important;
}

.calendar-slot-booked:hover {
    background-color: #ffe3e5;
}

.technician-list-item {
    border-left: 5px solid transparent;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.technician-list-item:hover {
    border-left-color: #d71920;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.technician-location-mark {
    width: 58px;
    min-width: 58px;
    height: 58px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.technician-location-mdl {
    background-color: #d71920;
}

.technician-location-tom {
    background-color: #212529;
}

@media (max-width: 991.98px) {
    .technician-list-item {
        border-left-width: 4px;
    }
}

/* Customer-facing Toyota header */
.toyota-header-logo {
    display: block;
    width: auto;
    height: 38px;
    max-width: 150px;
    object-fit: contain;
}

.vin-format-help {
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-left: 4px solid #d71920;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
}

.vin-format-example {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.vin-format-example code {
    display: inline-block;
    padding: 0.45rem 0.7rem;
    border: 1px solid #d6d9dc;
    border-radius: 0.4rem;
    background-color: #ffffff;
    color: #212529;
    font-size: 0.95rem;
    font-weight: 600;
}

.vin-format-arrow {
    color: #d71920;
    font-size: 1.15rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .toyota-header-logo {
        height: 30px;
        max-width: 120px;
    }

    .vin-format-example {
        gap: 0.45rem;
    }

    .vin-format-example code {
        font-size: 0.82rem;
    }
}


/* Strict Toyota navigation logo sizing */
.navbar .navbar-brand .toyota-header-logo {
    display: block !important;
    width: auto !important;
    height: 34px !important;
    max-width: 125px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    flex-shrink: 0;
}

.navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    line-height: 1.2;
}

.navbar .container {
    min-height: 58px;
}

@media (max-width: 575.98px) {
    .navbar .navbar-brand .toyota-header-logo {
        height: 28px !important;
        max-width: 105px !important;
        max-height: 28px !important;
    }

    .navbar .navbar-brand {
        gap: 0.55rem;
        font-size: 0.95rem;
    }

    .navbar .container {
        min-height: 52px;
    }
}

/* Vehicle eligibility result */
.vehicle-result-card {
    margin-top: 0;
}

.vehicle-result-icon {
    width: 46px;
    min-width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 700;
}

.vehicle-result-icon-warning {
    color: #664d03;
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
}

.vehicle-not-verified {
    max-width: 760px;
}

@media (max-width: 575.98px) {
    .vehicle-result-card {
        padding: 1.25rem !important;
    }

    .vehicle-result-icon {
        width: 40px;
        min-width: 40px;
        height: 40px;
        font-size: 1.15rem;
    }

    .vehicle-not-verified .btn {
        width: 100%;
    }
}

/*
    Shared customer-facing header.
    Fixed explicitly to the viewport top so every inherited page
    begins at exactly the same vertical position.
*/
html {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
}

body > nav.site-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1030;
    background-color: #ffffff !important;
}

body > nav.site-header .container {
    min-height: 66px;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body > nav.site-header .navbar-brand {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

body > main.container {
    margin-top: 0 !important;
    padding-top: 86px !important;
}

@media (max-width: 575.98px) {
    body > nav.site-header .container {
        min-height: 58px;
    }

    body > nav.site-header .navbar-brand {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    body > main.container {
        padding-top: 76px !important;
    }
}

/* MDL and TOM location information */
.service-location {
    line-height: 1.4;
}

.service-location-name {
    color: #212529;
    font-weight: 600;
}

.service-location-address {
    margin-top: 0.2rem;
    color: #5f6670;
    font-size: 0.93rem;
}

.service-location-map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    color: #c8102e;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.service-location-map-link:hover,
.service-location-map-link:focus {
    color: #8f0b22;
    text-decoration: underline;
}

.service-location-compact {
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .service-location-address {
        font-size: 0.88rem;
    }
}

/* Customer appointment calendar */
.calendar-date-panel {
    padding: 1rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.75rem;
    background-color: #f8f9fa;
}

.calendar-date-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #ffffff;
    background-color: #d71920;
    font-size: 1.15rem;
}

.calendar-date-input-wrapper {
    position: relative;
}

.calendar-date-input {
    min-height: 54px;
    border: 2px solid #6c757d;
    background-color: #ffffff;
    color: #212529;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.calendar-date-input:hover,
.calendar-date-input:focus {
    border-color: #d71920;
    box-shadow: 0 0 0 0.2rem rgba(215, 25, 32, 0.14);
}

.calendar-date-input::-webkit-calendar-picker-indicator {
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 1;
}

.calendar-day-button {
    min-height: 46px;
    font-weight: 600;
}

.availability-heading {
    padding-left: 0.85rem;
    border-left: 4px solid #d71920;
}

.appointment-slot-form {
    height: 100%;
}

.appointment-slot-form .time-button.available {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 0.75rem 1rem !important;
    border: 2px solid #d71920 !important;
    border-radius: 0.75rem !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.appointment-slot-form .time-button.available *,
.appointment-slot-form .time-button-label {
    color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.appointment-slot-form .time-button.available:hover,
.appointment-slot-form .time-button.available:focus {
    background-color: #d71920 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(215, 25, 32, 0.22);
    transform: translateY(-1px);
}

.appointment-slot-form .time-button.available:hover *,
.appointment-slot-form .time-button.available:focus * {
    color: #ffffff !important;
}

.appointment-slot-form .time-button.selected {
    border-color: #198754 !important;
    background-color: #198754 !important;
    color: #ffffff !important;
}

.appointment-slot-form .time-button.selected * {
    color: #ffffff !important;
}

.appointment-slot-form .time-button:disabled {
    cursor: wait !important;
}

.time-button-clock {
    font-size: 1rem;
}

@media (max-width: 575.98px) {
    .calendar-card {
        padding: 1.25rem !important;
    }

    .calendar-card > .h3 {
        font-size: 1.75rem;
    }

    .calendar-date-panel {
        padding: 0.85rem;
    }

    .calendar-date-input {
        min-height: 58px;
        font-size: 1rem;
        text-align: center;
    }

    .calendar-day-button {
        min-height: 48px;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        font-size: 0.86rem;
    }

    .availability-heading .h5 {
        font-size: 1.25rem;
    }

    .appointment-times-grid {
        --bs-gutter-y: 0.65rem;
    }

    .appointment-slot-form .time-button.available {
        min-height: 60px !important;
        font-size: 1.1rem !important;
    }

    .summary-panel {
        padding: 1.25rem !important;
    }
}

/* Customer appointment calendar */
.calendar-date-panel {
    padding: 1rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.75rem;
    background-color: #f8f9fa;
}

.calendar-date-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #ffffff;
    background-color: #d71920;
    font-size: 1.15rem;
}

.calendar-date-input-wrapper {
    position: relative;
}

.calendar-date-input {
    min-height: 54px;
    border: 2px solid #6c757d;
    background-color: #ffffff;
    color: #212529;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.calendar-date-input:hover,
.calendar-date-input:focus {
    border-color: #d71920;
    box-shadow: 0 0 0 0.2rem rgba(215, 25, 32, 0.14);
}

.calendar-date-input::-webkit-calendar-picker-indicator {
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 1;
}

.calendar-day-button {
    min-height: 46px;
    font-weight: 600;
}

.availability-heading {
    padding-left: 0.85rem;
    border-left: 4px solid #d71920;
}

.appointment-slot-form {
    height: 100%;
}

.appointment-slot-form .time-button.available {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 0.75rem 1rem !important;
    border: 2px solid #d71920 !important;
    border-radius: 0.75rem !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.appointment-slot-form .time-button.available *,
.appointment-slot-form .time-button-label {
    color: #212529 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.appointment-slot-form .time-button.available:hover,
.appointment-slot-form .time-button.available:focus {
    background-color: #d71920 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(215, 25, 32, 0.22);
    transform: translateY(-1px);
}

.appointment-slot-form .time-button.available:hover *,
.appointment-slot-form .time-button.available:focus * {
    color: #ffffff !important;
}

.appointment-slot-form .time-button.selected {
    border-color: #198754 !important;
    background-color: #198754 !important;
    color: #ffffff !important;
}

.appointment-slot-form .time-button.selected * {
    color: #ffffff !important;
}

.appointment-slot-form .time-button:disabled {
    cursor: wait !important;
}

.time-button-clock {
    font-size: 1rem;
}

@media (max-width: 575.98px) {
    .calendar-card {
        padding: 1.25rem !important;
    }

    .calendar-card > .h3 {
        font-size: 1.75rem;
    }

    .calendar-date-panel {
        padding: 0.85rem;
    }

    .calendar-date-input {
        min-height: 58px;
        font-size: 1rem;
        text-align: center;
    }

    .calendar-day-button {
        min-height: 48px;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        font-size: 0.86rem;
    }

    .availability-heading .h5 {
        font-size: 1.25rem;
    }

    .appointment-times-grid {
        --bs-gutter-y: 0.65rem;
    }

    .appointment-slot-form .time-button.available {
        min-height: 60px !important;
        font-size: 1.1rem !important;
    }

    .summary-panel {
        padding: 1.25rem !important;
    }
}

/*
    Simplified appointment time buttons.
    Keep the times neutral and immediately readable,
    particularly on small screens.
*/
.appointment-slot-form .time-button.available {
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 0.7rem 0.8rem !important;
    border: 2px solid #c8cdd3 !important;
    border-radius: 0.65rem !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
}

.appointment-slot-form .time-button.available:hover,
.appointment-slot-form .time-button.available:focus {
    border-color: #6c757d !important;
    background-color: #f2f3f5 !important;
    color: #212529 !important;
    box-shadow: 0 0 0 0.18rem rgba(108, 117, 125, 0.14) !important;
    transform: none !important;
}

.appointment-slot-form .time-button.available:active {
    border-color: #d71920 !important;
    background-color: #f8e9ea !important;
    color: #212529 !important;
}

.appointment-slot-form .time-button.selected,
.appointment-slot-form .time-button.selected *,
.appointment-slot-form .time-button:disabled {
    border-color: #c8cdd3 !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.time-button-clock {
    display: none !important;
}

@media (max-width: 575.98px) {
    .appointment-times-grid {
        --bs-gutter-x: 0.65rem;
        --bs-gutter-y: 0.65rem;
    }

    .appointment-slot-form .time-button.available {
        min-height: 54px !important;
        padding: 0.65rem 0.35rem !important;
        font-size: 1rem !important;
    }
}

/* Final simplified customer appointment slots */
.appointment-slot-form {
    height: 100%;
}

.appointment-slot-form .time-button,
.appointment-slot-form .time-button.available,
.appointment-slot-form .time-button.selected,
.appointment-slot-form .time-button:disabled {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0.65rem 0.5rem !important;

    border: 2px solid #c8cdd3 !important;
    border-radius: 0.6rem !important;

    background: #ffffff !important;
    color: #212529 !important;

    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: none !important;
    transform: none !important;
}

.appointment-slot-form .time-button:not(:disabled) {
    cursor: pointer !important;
}

.appointment-slot-form .time-button:not(:disabled):hover,
.appointment-slot-form .time-button:not(:disabled):focus {
    border-color: #6c757d !important;
    background: #f4f5f6 !important;
    color: #212529 !important;

    box-shadow:
        0 0 0 0.16rem
        rgba(108, 117, 125, 0.12)
        !important;
}

.appointment-slot-form .time-button:not(:disabled):active {
    border-color: #9a9fa5 !important;
    background: #e9ecef !important;
    color: #212529 !important;
}

.time-button-clock,
.time-button-label {
    color: inherit !important;
}

.time-button-clock {
    display: none !important;
}

@media (max-width: 575.98px) {
    .calendar-card {
        padding: 1.25rem !important;
    }

    .calendar-date-panel {
        padding: 0.9rem;
    }

    .calendar-date-input {
        min-height: 54px;
        font-size: 1rem;
        font-weight: 700;
    }

    .calendar-day-button {
        min-height: 46px;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        font-size: 0.84rem;
    }

    .appointment-times-grid {
        --bs-gutter-x: 0.65rem;
        --bs-gutter-y: 0.65rem;
    }

    .appointment-slot-form .time-button,
    .appointment-slot-form .time-button.available {
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    .summary-panel {
        padding: 1.25rem !important;
    }
}

/* Final simplified customer appointment slots */
.appointment-slot-form {
    height: 100%;
}

.appointment-slot-form .time-button,
.appointment-slot-form .time-button.available,
.appointment-slot-form .time-button.selected,
.appointment-slot-form .time-button:disabled {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0.65rem 0.5rem !important;

    border: 2px solid #c8cdd3 !important;
    border-radius: 0.6rem !important;

    background: #ffffff !important;
    color: #212529 !important;

    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow: none !important;
    transform: none !important;
}

.appointment-slot-form .time-button:not(:disabled) {
    cursor: pointer !important;
}

.appointment-slot-form .time-button:not(:disabled):hover,
.appointment-slot-form .time-button:not(:disabled):focus {
    border-color: #6c757d !important;
    background: #f4f5f6 !important;
    color: #212529 !important;

    box-shadow:
        0 0 0 0.16rem
        rgba(108, 117, 125, 0.12)
        !important;
}

.appointment-slot-form .time-button:not(:disabled):active {
    border-color: #9a9fa5 !important;
    background: #e9ecef !important;
    color: #212529 !important;
}

.time-button-clock,
.time-button-label {
    color: inherit !important;
}

.time-button-clock {
    display: none !important;
}

@media (max-width: 575.98px) {
    .calendar-card {
        padding: 1.25rem !important;
    }

    .calendar-date-panel {
        padding: 0.9rem;
    }

    .calendar-date-input {
        min-height: 54px;
        font-size: 1rem;
        font-weight: 700;
    }

    .calendar-day-button {
        min-height: 46px;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        font-size: 0.84rem;
    }

    .appointment-times-grid {
        --bs-gutter-x: 0.65rem;
        --bs-gutter-y: 0.65rem;
    }

    .appointment-slot-form .time-button,
    .appointment-slot-form .time-button.available {
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    .summary-panel {
        padding: 1.25rem !important;
    }
}

/* Link from the recall subdomain to the main Toyota website */
.site-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.toyota-main-site-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;

    padding: 0.55rem 0.85rem;
    border: 2px solid #c8cdd3;
    border-radius: 0.5rem;

    background-color: #ffffff;
    color: #343a40;

    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

.toyota-main-site-link:hover,
.toyota-main-site-link:focus {
    border-color: #d71920;
    background-color: #fff5f5;
    color: #b31319;
    text-decoration: none;
}

.toyota-main-site-arrow {
    font-size: 1rem;
    line-height: 1;
}

.toyota-main-site-short-text {
    display: none;
}

@media (max-width: 767.98px) {
    .site-header-content {
        gap: 0.5rem;
    }

    .navbar-brand {
        min-width: 0;
        gap: 0.55rem !important;
    }

    .site-header-title {
        font-size: 0.95rem;
        line-height: 1.15;
    }

    .toyota-main-site-link {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }

    .toyota-main-site-full-text {
        display: none;
    }

    .toyota-main-site-short-text {
        display: inline;
    }
}

@media (max-width: 430px) {
    .site-header-title {
        max-width: 105px;
        white-space: normal;
    }

    .toyota-main-site-link {
        padding: 0.45rem 0.5rem;
    }
}

/* Vehicle log-book notice on the booking entry page */
.log-book-notice {
    padding: 1rem;
    border: 1px solid #f0d58a;
    border-left: 4px solid #d39e00;
    border-radius: 0.6rem;
    background-color: #fff9e8;
    color: #413612;
}

.log-book-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 34px;
    height: 34px;
    border-radius: 50%;

    background-color: #d39e00;
    color: #ffffff;

    font-size: 1rem;
    font-weight: 700;
    font-family: Georgia, serif;
}

.log-book-notice p {
    color: #56491c;
    font-size: 0.94rem;
    line-height: 1.55;
}

@media (max-width: 575.98px) {
    .log-book-notice {
        padding: 0.9rem;
    }

    .log-book-notice-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .log-book-notice p {
        font-size: 0.9rem;
    }
}