body {
    background-color: var(--bs-white);
    height: 100%;
}

#page-container {
    /*background-color: var(--bs-light);*/
    background-color: #e9ecef;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: 0rem;
    padding-bottom: 0;
    width: 85%;
    min-width: fit-content;

    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%);
}

#page-content {
    margin: 1rem;
    min-width: fit-content;
}

#top-navbar {
    border-radius: 0.3rem 0.3rem 0 0 !important;
}

.nav-icon {
    font-size: 18px !important;
    display: inline !important;
    vertical-align: text-top !important;
    margin-right: 0.2rem;
}

.clickable:hover {
    cursor: pointer;
}

.offscreen {
    position: absolute; left: -100%;
}

.input-group-text {
    background-color: #dee2e6 !important;
}

.sidebar-sticky-left {
    position: sticky;
    top: 1rem;
    left: 0;
}

.laptime-invalid, .laptime-invalid > td {
    /* importance is necessary to overwrite bootstraps' stuff for striped tables */
    color: var(--bs-red) !important;
}

.diff-red {
    color: var(--bs-red) !important;
}

.diff-green {
    color: var(--bs-green) !important;
}

.hidden {
    display: none;
}

.chart-container.chart-hidden {
    flex: 0 0 0% !important;
}

.fosscrew-map-tracker > svg {
    max-height: 500px;
    max-width: 100%;
}

rect.car-on-tracker {
    fill: #9e9e9e;
    fill-opacity: 1;
    stroke: black;
    stroke-width: 2;
    stroke-opacity: 1;
}

text.car-on-tracker {
    fill: black;
    font: bold 40px sans-serif;
}

rect.car-on-tracker.car-on-tracker-own-car {
    fill: #9e0529;
    /* make own car bigger. stroke is also used for track status display */
    stroke-width: 10;
    stroke: #9e0529 !important;
}

text.car-on-tracker.car-on-tracker-own-car {
    fill: white;
}

rect.car-on-tracker.car-on-tracker-pit-lane {
    fill: #555555;
    fill-opacity: 0.75;
    stroke-opacity: 0.75;
}

text.car-on-tracker.car-on-tracker-pit-lane {
    fill: white;
}

rect.car-on-tracker.car-on-tracker-pit-exit {
    fill: #555555;
    fill-opacity: 0.9;
}

rect.car-on-tracker.car-on-tracker-off-track {
    fill: #ffe20a;
    stroke: black;
}

text.car-on-tracker.car-on-tracker-off-track {
    fill: black !important;
}

rect.car-on-tracker.car-on-tracker-lapped {
    fill: #06d1ff;
    stroke: #06d1ff;
}