:root {
    --ui-separator: #0f0f0f;
    --ui-background: #1c1c1c;
    --ui-button-background: #424242;
    --ui-text-color: #cfcfcf;
    --ui-header-background: #2c2c2c;
    --ui-footer-background: #2c2c2c;
    --ui-link-color: white;

    /* The original ARC colors */
    --arc-color-0: #000000; /* black */
    --arc-color-1: #0074D9; /* blue */
    --arc-color-2: #FF4136; /* red */
    --arc-color-3: #2ECC40; /* green */
    --arc-color-4: #FFDC00; /* yellow */
    --arc-color-5: #AAAAAA; /* grey */
    --arc-color-6: #F012BE; /* fuschia */
    --arc-color-7: #FF851B; /* orange */
    --arc-color-8: #7FDBFF; /* teal */
    --arc-color-9: #870C25; /* brown */
}

body.theme-bluecyanwhite {
    /*
    Dark blue, medium cyan, light white
    */
    --arc-color-0: #03045e;
    --arc-color-1: #023e8a;
    --arc-color-2: #0077b6;
    --arc-color-3: #0096c7;
    --arc-color-4: #00b4d8;
    --arc-color-5: #48cae4;
    --arc-color-6: #90e0ef;
    --arc-color-7: #ade8f4;
    --arc-color-8: #caf0f8;
    --arc-color-9: #f6fbfc;
}

body.theme-paultolmuted {
    /* 
    Paul Tol's Muted qualitative color scheme 
    https://personal.sron.nl/~pault/#sec:qualitative
    */
    --arc-color-0: #332288;
    --arc-color-1: #44aa99;
    --arc-color-2: #cc6677;
    --arc-color-3: #117733;
    --arc-color-4: #ddcc77;
    --arc-color-5: #dddddd;
    --arc-color-6: #aa4499;
    --arc-color-7: #999933;
    --arc-color-8: #88ccee;
    --arc-color-9: #882255;
}

body.theme-paultolsequential {
    /* 
    Paul Tol's Sequential color scheme 
    https://google.github.io/palette.js/
    */
    --arc-color-0: #662404;
    --arc-color-1: #923004;
    --arc-color-2: #c24406;
    --arc-color-3: #e5610c;
    --arc-color-4: #f7861c;
    --arc-color-5: #fdac3a;
    --arc-color-6: #ffce65;
    --arc-color-7: #ffe798;
    --arc-color-8: #fff7c5;
    --arc-color-9: #ffffe4;
}

body.theme-greyscale {
    /* 
    Greyscale color scheme
    */
    --arc-color-0: #000000;
    --arc-color-1: #1c1c1c;
    --arc-color-2: #393939;
    --arc-color-3: #555555;
    --arc-color-4: #717171;
    --arc-color-5: #8e8e8e;
    --arc-color-6: #aaaaaa;
    --arc-color-7: #c6c6c6;
    --arc-color-8: #e3e3e3;
    --arc-color-9: #ffffff;
}

body.theme-c64 {
    /* 
    C64 color scheme
    */
    --arc-color-0: #000000;
    --arc-color-1: #0088FF;
    --arc-color-2: #880000;
    --arc-color-3: #00CC55;
    --arc-color-4: #EEEE77;
    --arc-color-5: #777777;
    --arc-color-6: #CC44CC;
    --arc-color-7: #DD8855;
    --arc-color-8: #AAFFEE;
    --arc-color-9: #664400;
}

body.theme-secam {
    /* 
    SECAM color scheme
    */
    --arc-color-0: #000000;
    --arc-color-1: #2121ff;
    --arc-color-2: #f03c79;
    --arc-color-3: #7fff00;
    --arc-color-4: #ffff3f;
    --arc-color-5: #ffffff;
    --arc-color-6: #ff50ff;
    --arc-color-7: #FF851B; /* Orange is not in SECAM */
    --arc-color-8: #7fffff;
    --arc-color-9: #870C25; /* Brown is not in SECAM */
}

body.theme-ega {
    /* 
    EGA color scheme
    */
    --arc-color-0: #000000;
    --arc-color-1: #0000AA;
    --arc-color-2: #AA0000;
    --arc-color-3: #00AA00;
    --arc-color-4: #FFFF55;
    --arc-color-5: #AAAAAA;
    --arc-color-6: #AA00AA;
    --arc-color-7: #FF5555;
    --arc-color-8: #55FFFF;
    --arc-color-9: #AA5500;
}

body.theme-amigaworkbench13 {
    /* 
    Amiga workbench 1.3 color scheme
    */
    --arc-color-0: #000020;
    --arc-color-1: #2354A4;
    --arc-color-2: #CB382F;
    --arc-color-3: #4B6F38; /* I have not seen green in workbench 1.3 */
    --arc-color-4: #FDFEFF;
    --arc-color-5: #8E9192;
    --arc-color-6: #A020A9; /* I have not seen purple in workbench 1.3 */
    --arc-color-7: #EE8F34;
    --arc-color-8: #7777C6;
    --arc-color-9: #854F1D; /* I have not seen brown in workbench 1.3. */
}

body.theme-applerainbow {
    /* 
    The rainbow in the Apple logo
    */
    --arc-color-0: #000000;
    --arc-color-1: #3C88DB;
    --arc-color-2: #CD2C23;
    --arc-color-3: #5AC53A;
    --arc-color-4: #F2EA4E;
    --arc-color-5: #6d6d6d; /* Grey is not in the original Apple rainbow logo */
    --arc-color-6: #9D1F6C;
    --arc-color-7: #EE8D34;
    --arc-color-8: #ffffff; /* Teal is not in the original Apple rainbow logo */
    --arc-color-9: #235134; /* Brown is not in the original Apple rainbow logo  */
}

body.theme-romanfresco {
    /* 
    Well-preserved wall paintings from which many of the classic Roman colors are known.
    */
    --arc-color-0: #000000; /* black */
    --arc-color-1: #1034A6; /* blue, https://en.wikipedia.org/wiki/Egyptian_blue */
    --arc-color-2: #E34234; /* red, https://en.wikipedia.org/wiki/Shades_of_red#Vermilion */
    --arc-color-3: #0BDA51; /* green, https://en.wikipedia.org/wiki/Malachite */
    --arc-color-4: #F9BF50; /* yellow, https://en.wikipedia.org/wiki/Ochre */
    --arc-color-5: #635147; /* grey, https://en.wikipedia.org/wiki/Sienna#Raw_sienna */
    --arc-color-6: #5A1030; /* fuschia, https://en.wikipedia.org/wiki/Tyrian_purple */
    --arc-color-7: #CC7722; /* orange, https://en.wikipedia.org/wiki/Ochre */
    --arc-color-8: #43B3AE; /* teal, https://en.wikipedia.org/wiki/Verdigris */
    --arc-color-9: #965434; /* brown, https://en.wikipedia.org/wiki/Umber */
}

.hidden {
    display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}

html {
    height: 100%;
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--ui-text-color);
    box-sizing: border-box;
    background-color: var(--ui-background);
}    
body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
  
.top-banner-container-outer {
    color: #eedede;
    background-color: #9b3219;
    font-size: 30px;
    padding: 20px;
    display: none;
}
.top-banner-container-inner {
    display: flex;
    align-items: center;
}
.top-banner-item-center {
    flex: 1;
    padding-left: 20px;
    padding-right: 20px;
}
.top-banner-item-left,
.top-banner-item-right {
    flex: none;
    font-size: 60px;
}
.titlebar-container {
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--ui-separator);
    align-items: center;
}
.titlebar-item {
    flex: 1;
}
.titlebar-item-left {
    text-align: left;
}
.titlebar-item-center {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: var(--ui-text-color);
}
.titlebar-item-right {
    text-align: right;
}
.primary-button {
    border: none;
    color: rgb(77, 73, 73);
    background-color: #f7eb42;
    border: 1px solid rgb(54, 54, 54);
    padding: 10px 18px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
}
.primary-button:hover {
    background-color: #e9dc28;
    border: 1px solid rgb(100, 100, 100);
}
.primary-button:active {
    background-color: #cfc422;
    border: 1px solid rgb(34, 34, 34);
}
.primary-button:disabled {
    border: 1px solid #999;
    background-color: #ccc;
    color: #666;
}
.secondary-button {
    background-color: var(--ui-button-background);
    border: 1px solid var(--ui-button-background);
    padding: 10px 18px;
    border-radius: 5px;
    font-size: 16px;
    color: var(--ui-text-color);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none; /* Removes inherent browser styling in WebKit browsers */
    -moz-appearance: none; /* Removes inherent browser styling in Mozilla browsers */
    appearance: none; /* General rule for modern browsers */
    box-shadow: none; /* Removes any default browser box-shadow */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover and active states */
}
@media (hover: hover) {
    .secondary-button:hover {
        background-color: var(--ui-text-color);
        color: var(--ui-background);
    }
}
.secondary-button:active {
    background-color: #eaeaea;
    border: 1px solid rgb(23, 23, 23);
}

#main-outer {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
}

#main-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    overflow-y: auto;
}

header {
    background-color: var(--ui-header-background);
}