:root {
    /* Stale colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-white-accent: #f5f7fa;

    --color-header-primary: #990000;
    --color-header-secondary: #660000;
    --color-header1-primary: #252525;
    --color-header1-secondary: #010911;

    --color-scroller: #b31a1a;
    --color-border-default: #6c6f73;
    --color-shadow-default: #c3c8cd;
    --color-hover-default: #323537;
    --color-odd-default: #fafad2;

    --color-grey-primary: #afafaf;
    --color-green-primary: #18b318;
    --color-green-dark:#0f640f;
    --color-green-light: #8bd197;
    --color-orange-primary: #ec9e37;
    --color-orange-light: #ec9e37;
    --color-red-light: #ce6868;

    /* Main Properties */
    --color-body: var(--color-black);
    --color-body-bg: var(--color-white);
    --color-main-bg: var(--color-white);
    --color-accent-bg: var(--color-white-accent);

    /* Header Properties */
    --color-header: var(--color-white);
    --color-header-bg: var(--color-header-primary);
    --color-header-border: var(--color-header-secondary);

    /* Menu Properties */
    --color-menu: var(--color-border-default);
    --color-menu-bg: var(--color-white);
    --color-border: var(--color-black);
    --color-shadow: var(--color-shadow-default);
    --color-menu-hover: var(--color-white);
    --color-menu-bg-hover: var(--color-hover-default);

    /* Scoller Properties */
    --color-scroller1: var(--color-scroller);
    --color-scroller2: var(--color-scroller);
    --color-scroller1-bg: var(--color-white-accent);
    --color-scroller2-bg: var(--color-white-accent);


    /* Left Item Properties */
    --color-box: var(--color-black);
    --color-box-bg: var(--color-white);
    --color-box-border: var(--color-border-default);
    --color-box-shadow: var(--color-shadow-default);

    --color-left: var(--color-black);
    --color-left-bg: var(--color-white);
    --color-left-border: var(--color-shadow-default);
    --color-left-shadow: var(--color-border-default);

    --color-left-odd: var(--color-black);
    --color-left-odd-bg: var(--color-odd-default);

    --color-left-hover: var(--color-white);
    --color-left-bg-hover: var(--color-hover-default);

    /* Right Header Properties */
    --color-right: var(--color-black);
    --color-right-bg: var(--color-white);
    --color-right-border: var(--color-shadow-default);
    --color-right-shadow: var(--color-border-default);

    --color-right-header: var(--color-white);
    --color-right-header-bg: var(--color-header-primary);
    --color-right-header-border: var(--color-header-secondary);

    --color-right-header1: var(--color-white);
    --color-right-header1-bg: var(--color-header1-primary);
    --color-right-header1-border: var(--color-header1-secondary);

    --color-right-header1-late: var(--color-white);
    --color-right-header1-late-bg: var(--color-shadow-default);

    --color-right-header1-icon-border: var(--color-white-accent);

    --color-right-header1-button: var(--color-black);
    --color-right-header1-button-bg: var(--color-white);
    --color-right-header1-button-border: var(--color-border-default);
    --color-right-header1-button-shadow: var(--color-hover-default);

    --color-right-header1-button-hover: var(--color-white);
    --color-right-header1-button-hover-bg: var(--color-hover-default);

    /* Right Item Properties */
    --color-right-item: var(--color-black);
    --color-right-item-bg: var(--color-white);
    --color-right-item-border: var(--color-border-default);
    --color-right-item-shadow: var(--color-hover-default);

    --color-right-newtime: var(--color-black);
    --color-right-newtime-bg: var(--color-odd-default);
    --color-right-newtime-border: var(--color-border-default);
    --color-right-newtime-shadow: var(--color-hover-default);

    --color-right-item-off: var(--color-black);
    --color-right-item-off-bg: var(--color-grey-primary);
    --color-right-item-green: var(--color-white);
    --color-right-item-green-bg: var(--color-green-primary);
    --color-right-item-orange: var(--color-black);
    --color-right-item-orange-bg: var(--color-orange-primary);

    --color-right-item-odd: var(--color-black);
    --color-right-item-odd-bg: var(--color-odd-default);

    --color-right-item-button: var(--color-black);
    --color-right-item-button-bg: var(--color-white);
    --color-right-item-button-border: var(--color-border-default);
    --color-right-item-button-shadow: var(--color-shadow-default);

    --color-right-item-button-noclick: var(--color-green-primary);
    --color-right-item-button-noclick-bg: var(--color-white);

    --color-right-item-button-ready: var(--color-black);
    --color-right-item-button-ready-bg: var(--color-green-light);

    --color-right-item-button-hover: var(--color-white);
    --color-right-item-button-hover-bg: var(--color-hover-default);

    /* Basket box */
    --color-basket-header: var(--color-black);
    --color-basket-header-bg: var(--color-odd-default);
    --color-basket-header-border: var(--color-border-default);
    --color-basket-header-shadow: var(--color-shadow-default);

    --color-basket: var(--color-black);
    --color-basket-bg: var(--color-white-accent);
    --color-basket-border: var(--color-border-default);
    --color-basket-shadow: var(--color-shadow-default);

    --color-basket-footer: var(--color-black);
    --color-basket-footer-bg: var(--color-odd-default);
    --color-basket-footer-border: var(--color-border-default);
    --color-basket-footer-shadow: var(--color-shadow-default);


    /* Station Item Properties */
    --color-item-ready: var(--color-white);
    --color-item-ready-bg: var(--color-green-primary);
    --color-item-ready-border: var(--color-white);
    --color-item-ready-shadow: var(--color-shadow-default);
    --color-item-ready-hover: var(--color-white);
    --color-item-ready-hover-bg: var(--color-green-dark);
    --color-item-ready-blink: var(--color-green-primary);
    --color-item-ready-blink-bg: var(--color-grey-primary);

    --color-item-clockon: var(--color-green-primary);
    --color-item-clockon-bg: var(--color-white);
    --color-item-clockon-border: var(--color-green-primary);
    --color-item-clockon-shadow: var(--color-hover-default);

    --color-item-clockoff: var(--color-black);
    --color-item-clockoff-bg: var(--color-border-default);
    --color-item-clockoff-border: var(--color-border-default);
    --color-item-clockoff-shadow: var(--color-shadow-default);

    /* Station New Items Properties */
    --color-newitem: var(--color-black);
    --color-newitem-bg: var(--color-white);
    --color-newitem-border: var(--color-black);
    --color-newitem-shadow: var(--color-border-default);

    --color-newitem-header: var(--color-white);
    --color-newitem-header-bg: var(--color-header-primary);
    --color-newitem-header-border: var(--color-header-secondary);

    --color-newitem-header-right: var(--color-white);
    --color-newitem-header-right-bg: var(--color-header-primary);
    --color-newitem-header-right-border: var(--color-white);

    --color-newitem-footer: var(--color-black);
    --color-newitem-footer-bg: var(--color-grey-primary);
    --color-newitem-footer-border: var(--color-black);

}
  
body {
    margin: 0px 0px 0px 0px;
    background: var(--color-body-bg);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: var(--color-body);
    box-sizing: border-box;    
}

header {
    width: 100%;
    height: 80px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-header-border);
    display: flex;
    box-sizing: border-box;
    background-color: var(--color-header-bg);

    ul {
        list-style-type: none;
        display: flex;
        width: 100%;
    }

    li.nav-title {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        box-sizing: border-box;
        width: 70%;

        a {
            font-family: "Raleway", sans-serif;
            font-size: 2rem;
            font-weight: 800;
            color: var(--color-header);
            text-decoration: none;
        }
    }
    li.nav-item {
        padding: 0px 0px 0px 0px;
        margin: 0px 30px 0px 0px;
        font-family: "Raleway", sans-serif;
        font-size: 2rem;
        font-weight: 400;
        color: var(--color-header);
        width: 30%;
        text-align: right;
    }
}

/* A simple style to position the clock icon at bottom-right */
#refresh-delay-icon {
    position: fixed;
    right: 10px;
    bottom: 10px;
    display: none; /* Hidden by default */
    font-size: 24px; /* Increase size if you'd like it bigger */
    z-index: 9999; /* Ensure it stays on top */
}

::-webkit-scrollbar {
    width: 8px; /* change this to desired width */
}
::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, var(--color-scroller1-bg), var(--color-scroller2-bg));
    border-radius: 6px;
    margin: 2px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--color-scroller1), var(--color-scroller2));
    border-radius: 6px;
    border: 2px solid var(--color-scroller1-bg);
    transition: background 0.3s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--color-scroller1), var(--color-scroller2));
}

@media (max-width: 1081px) {
    header {
        height: 50px;
        li.nav-title {
            a {
                font-size: 18px;
                font-weight: 800;
            }
        }    
        li.nav-item {
            font-size: 18px;
        }
    }
}