No history records found.<style>
    /* Dark mode styles */
    body.dark-mode {
        --link-color: #E4BFFF;
        --brand-color: #444444;
        --text-color: #ffffff;
        --border-color: #444444;
        --brand-color-darker: #555555;
        --border-color-darker: #555;
        --background-color: #222222;
        --lable: black;
        background-color: #222222;
        /* Dark background */
        color: #ffffff;
        /* Light text color */
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
    }

    /* Light mode styles */
    body.light-mode {
        --link-color: #5544cc;
        --link-color: color: #54c;
        --brand-color: #8cb9d5;
        --brand-color-darker: #93ccff;
        --border-color: #93ccff;
        --border-color-darker: #77a4dd;
        --text-color: #000;
        --background-color: #fff;
        --lable: black;
        background-color: #fff;
        /* Light background */
        color: #000;
        /* Dark text color */
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
    }


    /* BusTimes mode styles */
    body.bus-mode {
        --link-color: #5544cc;
        --brand-color: #ffff9e;
        --brand-color-darker: #de8;
        --brand-color-darker-darker: #cd7;
        --border-color: var(--brand-color-darker);
        --border-color-darker: var(--brand-color-darker-darker);
        --text-color: #000;
        --background-color: #fff;
        --lable: black;
        background-color: #fff;
        /* Light background */
        color: #000;
        /* Dark text color */
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
    }

    body.timesbus-dark {
        --brand-color: #074e60;
        --brand-color-darker: #0c3b46;
        --brand-color-darker-darker: #2c5e6a;
        --border-color: var(--brand-color-darker);
        --border-color-darker: var(--brand-color-darker-darker);
        --background-color: #222;
        --text-color: #fff;
        --link-color: #afdde9;
        --active-link-color: #afdde9;
        --summary-marker-color: #eee;
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        color-scheme: dark;
    }

    body.timesbus-light {
        --brand-color: rgb(31, 99, 116);
        --brand-color-darker: #0c3b46;
        --brand-color-darker-darker: #0d2930;
        --border-color: var(--brand-color-darker);
        --border-color-darker: var(--brand-color-darker-darker);
        --black: #000;
        --white: #fff;
        --red: red;
        --background-color: #e0e0e0;
        --text-color: #000;
        --link-color: #517d88;
        --active-link-color: var(--link-color);
        --summary-marker-color: var(--border-color);
        --lightningcss-light: initial;
        --lightningcss-dark: ;
        --lightningcss-light: initial;
        --lightningcss-dark: ;
        color-scheme: light;
    }

    body.pink-l {
        --link-color: #5544cc;
        --link-color: color: #54c;
        --brand-color: #f9a7c6;
        --brand-color-darker: #e398b4;
        --border-color: #f9a7c6;
        --border-color-darker: #e398b4;
        --text-color: #000;
        --background-color: #fff;
        --lable: black;
        color: #000;
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
    }

    body.pink-d {
        --link-color: #E4BFFF;
        --brand-color: #9b3d88;
        --text-color: #ffffff;
        --border-color: #9b3d88;
        --brand-color-darker: #823372;
        --border-color-darker: #823372;
        --background-color: #222222;
        --lable: black;
        color: #ffffff;
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
    }

    body.brooklyn {
        --brand-color: #1d1d7b;
        --brand-color-darker: #333;
        --brand-color-darker-darker: #1d1d7b;
        --border-color: var(--brand-color-darker);
        --border-color-darker: var(--brand-color-darker-darker);
        --background-color: #222;
        --text-color: #fff;
        --link-color: #afdde9;
        --active-link-color: #afdde9;
        --summary-marker-color: #eee;
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        color-scheme: dark;
    }

    @media (max-width: 480px) {
        :root {
            --lable: black;
        }
    }

    a {
        transition: color 0.3s;
        /* Optional: for a smoother transition */
    }

    a.light-mode {
        color: #5544cc;

        /* Link color for light mode */
    }

    a.bus-mode {
        color: #5544cc;
        /* Link color for light mode */
    }

    a.dark-mode {
        color: #E4BFFF;
        /* Link color for dark mode */
    }

    a.timesbus-dark {
        color: #afdde9;
        /* Link color for dark mode */
    }

    a.timesbus-light {
        color: #517d88;
        /* Link color for dark mode */
    }

    .name {
        border-radius: 5px;
    }

    .table-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        /* Full viewport height */
    }

    .table {
        max-width: 100px;
        margin: auto;
        width: 80%;
        /* Adjust as needed */
        text-align: center;
    }

    .th,
    .tb {
        padding: 10px;
    }

    img {
        display: block;
        margin: 0 auto;
    }


    .button {
        -webkit-appearance: none;
        appearance: none;
        background: var(--brand-color);
        border: 0;
        border-bottom-width: 0px;
        border-bottom-style: none;
        border-bottom-color: currentcolor;
        border-bottom: .0625em solid var(--brand-color-darker);
        color: inherit;
        font: inherit;
        border-radius: .5em;
        margin-bottom: .0625em;
        padding: .25em .5em;
        display: inline-block;
        position: relative;
        top: .0625em;
    }

    .toggle-status {
        display: none;
    }

    .table.visible {
        display: table;
        /* Corrected from 'bloack' to 'block' */
    }

    .table {
        display: table;
    }

    .pb-ad {
        border: solid;
        border-top-width: medium;
        border-top-color: currentcolor;
        border-right-width: medium;
        border-right-color: currentcolor;
        border-bottom-width: medium;
        border-bottom-color: currentcolor;
        border-left-width: medium;
        border-left-color: currentcolor;
        border-width: 1px;
        border-color: var(--border-color);
        width: 40%;
        margin-left: 30%;
        margin-bottom: 10px;
        /* height: 80%; */
    }

    @media (max-width: 1000px) {
        .pb-ad {
            width: 80vw;
            margin-left: 10vw;
            margin-bottom: 10px;
        }
    }

    @media (max-width: 480px) {
        .table {
            display: none;
        }

        .toggle-status {
            display: block;
        }

        .table.visible {
            display: table;
            /* Corrected from 'bloack' to 'block' */
        }
    }

    .adimg {
        display: block;
        margin: 0 auto;
        width: 100%;
        /* height: 100%; */
    }

    .popup {
        background: var(--background-color);
        padding: 0px 10px;
        border-radius: 50px;
        color: black;
        margin: 0px 25%;
        font-weight: bolder;
    }

    .popup a {
        color: #0087ff;
        text-decoration: underline;
    }

    @media (min-width: 600px) {
        .popup {
            width: 300px;
            margin: 0px calc(50% - 150px);
        }
    }

    @media (max-width: 480px) {
        .popup {
            font-size: 3vw;
        }
    }

    .invalid {
        display: none;
        position: fixed;
        top: 200px;
        width: 50%;
        left: 25%;
        text-align: center;
        color: red;
        z-index: 100;
        font-size: 150%;
        background: var(--brand-color);
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
    }

    .admin-note {
        background-color: #fff3cd;
        color: #856404;
        padding: 2.5px 10px;
        border-radius: 5px;
        margin-top: 20px;
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
    }

    .admin-note-crit {
        background-color: rgb(255, 205, 205);
        color: rgb(133, 4, 4);
        padding: 2.5px 10px;
        border-radius: 5px;
        margin-top: 20px;
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        width: 100%;
        max-width: 450px;
        text-align: center;
        margin: 20px auto;
    }

    .admin-note-info {
        background-color: rgb(205, 213, 255);
        color: rgb(7, 18, 70);
        padding: 2.5px 10px;
        border-radius: 5px;
        margin-top: 20px;
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        width: 100%;
        max-width: 450px;
        text-align: center;
        margin: 0 auto;
    }

    textarea {
        max-width: 100%;
    }
</style>

<head>
    <link type=image/x-icon rel="shortcut icon" href=https://github.com/Kai-codin/MBT-Media-Kit/blob/main/MBT%20Logos/MBT%20Pride%20MMH%20Favicon.png?raw=true>
</head>
<footer>
                    <div class="pb-ad">
            <a id="link" target="_black" href="#">
                <img id="ad-image" class="adimg" src="/BusTimes/SVG/Ads/ad2.png"
                    alt="Default Ad">
            </a>
        </div>
        <style>
        .selected-livery {
            background-color: var(--brand-color-darker);
            color: white;
            font-weight: bold;
        }

        .search-bar {
            width: 100%;
            padding: 8px;
            margin-bottom: 0;
            position: sticky;
            top: 0;
            z-index: 10;
            background: white;
            border-bottom: 1px solid var(--border-color);
        }

        .livery-container {
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            display: flow-root;
        }

        .livery-container span {
            padding-right: 2.25em;
        }

        .livery-container:hover {
            background-color: var(--brand-color);
        }

        .livery-cell-selector {
            width: 2.25em;
            height: 1.5em;
            display: block;
            float: right;
        }

        .livery-cell-selector,
        .livery,
        .livery-cell {
            border-radius: 0;
        }
    </style>
    <ul class="user">
                <li style='color: var(--text-color)'><a style='color: var(--text-color)' href='/BusTimes/login?redie=http%3A%2F%2Fwww.mybustimes.cc%2FBusTimes%2Fhistory%3FID%3D201822'><button class='button'>Login</button></a></li>        <li><a href="rules">Rules &amp; FAQ</a></li>
        <li><a href="privacy">Privacy Policy</a></li>
    </ul>
    <ul class="user">
        <li><a href="report?url=http%3A%2F%2Fwww.mybustimes.cc%2FBusTimes%2Fhistory%3FID%3D201822">Bug Report</a></li>
        <li><a href="data">Data Source</a></li>
    </ul>
    <ul class="user">
        <li><a href="https://flic.kr/gd/3gEzPV">Flickr Group</a></li>
        <li><a href="https://www.mybustimes.cc/facebook/">Facebook</a></li>
        <!-- <li><a href="https://discord.gg/mybustimes">Discord</a></li> -->
        <li><a href="https://www.mybustimes.cc/discord/">Discord</a></li>
    </ul>

    <style>
        .btn-container {
            display: inline-block !important;
            white-space: nowrap;
            min-width: 250px;
            text-align: center;
        }

        .btn-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
    </style>

    <div class="btn-wrapper">
        <div class="btn-container">
            <a href="https://www.buymeacoffee.com/mybustimes">
                <img src="https://img.buymeacoffee.com/button-api/?text=Help Support MBT
                    &emoji=&slug=mybustimes
                    &button_colour=8cb9d5                    &font_colour=000000                    &font_family=Lato
                    &outline_colour=000000                    &coffee_colour=FFDD00" />
            </a>
        </div>
    </div>
    <br>

    <form method="post">
        <label for="theme">Select Theme:</label>
        <select name="theme" id="theme" onchange="this.form.submit()">
            <option value=0 selected>Light Mode</option>
            <option value=1 >Dark Mode</option>
            <option value=2 >BusTimes</option>
            <option value=4 >Cyan Light</option>
            <option value=3 >Cyan Dark</option>
            <option value=5 >PinkTimes Light</option>
            <option value=6 >PinkTimes Dark</option>
            <option value=7 >Brooklyn Style</option>
        </select>
        <input type="hidden" id="theme-selector" value="">
    </form>
    <div id="user-info">
        Online: 348 | Total: 2276<br><a href='/BusTimes/stats'>More Stats</a>    </div>
    <script>
        function sanitizeInput(inputElement) {
            // Get error message element or create one if it doesn't exist
            let errorMessageId = inputElement.getAttribute('data-error-message');
            let errorMessage = document.getElementById(errorMessageId);

            if (!errorMessage) {
                // Dynamically create the error message element
                errorMessage = document.createElement('small');
                errorMessage.id = errorMessageId;
                errorMessage.className = 'invalid';
                errorMessage.style.color = 'red';
                errorMessage.style.display = 'none';
                errorMessage.textContent = 'Invalid characters';
                inputElement.insertAdjacentElement('afterend', errorMessage);
            }

            // Regex pattern to sanitize input
            let sanitizedInput = inputElement.value.replace(/[_£./~¬&<>"'`!@#$%^*()+=,{}[\]\\|;:?]/g, '');

            if (sanitizedInput !== inputElement.value) {
                // Show the error message if there are invalid characters
                errorMessage.style.display = 'inline';
                inputElement.value = sanitizedInput;

                // Hide the error message after 5 seconds
                setTimeout(() => {
                    errorMessage.style.display = 'none';
                }, 5000);
            } else {
                // Hide the error message if input is clean
                errorMessage.style.display = 'none';
            }
        }
    </script>
    <a href="https://status.mybustimes.cc">View Site Status</a>
            <div class="pb-ad">
        <a id="link" target="_black" href="#">
            <img id="ad-image" class="adimg" src="/BusTimes/SVG/Ads/ad2.png"
                alt="Default Ad">
        </a>
    </div>
    </footer>
<script>
    document.getElementById("toggleButton").addEventListener("click", function (event) {
        event.preventDefault(); // Prevent the default anchor behavior
        const table = document.querySelector(".table");

        if (table.classList.contains("visible")) {
            table.classList.remove("visible");
            this.textContent = "Show Status"; // Change the link text back
        } else {
            table.classList.add("visible");
            this.textContent = "Hide Status"; // Change the link text
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Fetch the theme value stored in the hidden input
        const themeValue = parseInt(document.getElementById('theme-selector').value, 10);
        const links = document.querySelectorAll('a');

        // Remove all possible theme classes before applying the correct one
        document.body.classList.remove('dark-mode', 'bus-mode', 'light-mode', 'timesbus-dark', 'timesbus-light', 'pink-l', 'pink-d', 'brooklyn');
        links.forEach(link => link.classList.remove('dark-mode', 'bus-mode', 'light-mode', 'timesbus-dark', 'timesbus-light', 'pink-l', 'pink-d', 'brooklyn'));

        // Apply the selected theme
        if (themeValue === 1) {
            document.body.classList.add('dark-mode');
            links.forEach(link => link.classList.add('dark-mode'));
        } else if (themeValue === 2) {
            document.body.classList.add('bus-mode');
            links.forEach(link => link.classList.add('bus-mode'));
        } else if (themeValue === 3) {
            document.body.classList.add('timesbus-dark');
            links.forEach(link => link.classList.add('timesbus-dark'));
        } else if (themeValue === 4) {
            document.body.classList.add('timesbus-light');
            links.forEach(link => link.classList.add('timesbus-light'));
        } else if (themeValue === 5) {
            document.body.classList.add('pink-l');
            links.forEach(link => link.classList.add('pink-l'));
        } else if (themeValue === 6) {
            document.body.classList.add('pink-d');
            links.forEach(link => link.classList.add('pink-d'));
        } else if (themeValue === 7) {
            document.body.classList.add('brooklyn');
            links.forEach(link => link.classList.add('brooklyn'));
        } else {
            document.body.classList.add('light-mode');
            links.forEach(link => link.classList.add('light-mode'));

        }
    });
</script>
<img src="https://github.com/Kai-codin/MBT-Media-Kit/blob/main/MBT%20Logos/MBT-Logo-Pride-MMH.png?raw=true" style="width: 90%;padding: 1em;max-width: 45em;">
<link rel="stylesheet" href="/BusTimes/CSS/index.css">
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
    data-id="mybustimes" data-description="Support me on Buy me a coffee!" data-message=""
    data-color="#8cb9d5" data-position="Right" data-x_margin="18"
    data-y_margin="18"></script>
<p style="position: absolute;left: 0; background: var(--brand-color);padding: 5px;border-radius: 0px 10px 0px 0px;">
    MyBusTimes: V1.5.9.2</p>
<!--Magior . Minor . Patch-->

<style>
    @media (max-width: 478px) {
        .site-header .search label input {
            top: -3em;
            background: transparent;
            border: none;
            text-align: right;
            right: 55px;
        }

        .site-header .search label input:focus {
            border-width: .75em 1em;
            text-align: left;
            width: 100%;
            top: -3.6em;
            left: 0;
            position: absolute;
            background: var(--background-color);
            border: 12px solid var(--border-color);
        }
    }
</style>