:root {
    --COLOR_L0:  #FF0000;
    --COLOR_L1:  #2D3194;
    --COLOR_L2:  #00CC00;
    --COLOR_L3:  #FF8800;
    --COLOR_L4:  #0022FF;
    --COLOR_L5:  #FF00FF;
    --COLOR_L6:  #FF88BB;
    --COLOR_L7:  #603814;
    --COLOR_L8:  #000000;
    --COLOR_L9:  #888888;
    --COLOR_L0:  #C3B69A;
    --COLOR_L11: #880000;
    --COLOR_L12: #00FFFF;
    --COLOR_L13: #007700;

    --COLOR_BTN_BG:  #444444;
    --COLOR_BTN_TXT: #33FFAA;

    --COLOR_HEAD_BG: #000000;
    --COLOR_MAIN_BG: #333333;

    --COLOR_TXT_H1: #11BB77;

    --COLOR_ICON_OKAY: #00FF00;
    --COLOR_MSG_OKAY: #00AA00;

    --COLOR_MSG_OPT_BG: #111111;
    --COLOR_MSG_OPT_NAME: #11BB77;
    --COLOR_MSG_OPT_DESC: #088844;
    --COLOR_MSG_OPT_INP: #33FFAA;
    --COLOR_MSG_OPT_INP_BG: #222222;
}

html, body { height: 100%; width: 100%; font-family: sans-serif; margin: 0; padding: 0; }

#menuDiv { height: 6vh; width: 100%; background-color: var(--COLOR_HEAD_BG); }
#menuTbl { width: 100%; height: 100%; }
#menuTxt { font-size: 4vw; color: var(--COLOR_TXT_H1); font-weight: bold; margin-left: 10px; }

#content { height: 94vh; width: 100%; background-color: var(--COLOR_MAIN_BG); }
#content td { text-align: center; vertical-align: middle; }

.icon { width: 3vh; height: 3vh; }

.up3d { border-style: solid; border-width: 4px; border-color: #FFFFFFAA #000000AA #000000AA #FFFFFFAA; border-radius: 8px; }
.up3d:active:focus { border-color: #000000AA #FFFFFFAA #FFFFFFAA #000000AA; }
.win3d { background-color: #000000; border-style: solid; border-width: 6px; border-color: #FFFFFFAA #000000AA #000000AA #FFFFFFAA; border-radius: 4px; }
.dwn3d { border-style: solid; border-width: 4px; border-color: #000000AA #FFFFFFAA #FFFFFFAA #000000AA; border-radius: 8px; }
.btn    { background-color: var(--COLOR_BTN_BG); color: var(--COLOR_BTN_TXT); padding: 6px; font-size: 120%; font-weight: bold; }
.btnBig { padding: 12px; font-size: 140%; font-weight: bold; border-width: 6px; border-radius: 12px; }
.fillTbl { width: 100%; height: 100%; }
.fillTbl td { text-align: center; vertical-align: middle; }

.BjSBottle { height: var(--BOTTLE_SIZE); width: var(--BOTTLE_SIZE); float: left; }
.BjSBottle>svg>g { transform-origin: center; transition-duration: 2s; }

.BjSBottle>svg>g>ellipse { stroke-width: 1; fill: #FFFFFF11; stroke: #FFFFFF11; }
.BjSBottle>svg>g>path { stroke-width: 0; opacity: 0.8; }


#message { z-index: 1000; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #00000088; }
#messageWin { z-index: 2000; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: var(--COLOR_MSG_OPT_BG); }
.msgIcon { width: 33vw; height: 33vh; }
.msgText { color: var(--COLOR_MSG_OKAY); font-size: 4vw; font-weight: bold; }

.msgOptHead { color: var(--COLOR_MSG_OKAY); font-size: 4vw; font-weight: bold; padding-left: 5vw; padding-right: 5vw; }
.msgOptName { color: var(--COLOR_MSG_OPT_NAME); font-size: 2.8vh; }
.msgOptDesc { color: var(--COLOR_MSG_OPT_DESC); font-size: 1.5vh; }
.msgOptInp { font-size: 3vh; background-color: var(--COLOR_MSG_OPT_INP_BG); color: var(--COLOR_MSG_OPT_INP); width: 12vw; }
.msgOptGap { height: 8px; }
.msgBtn    { width: 5vh; height: 5vh; }