div#dynamic_island {
    position: fixed;
    top: -99px;
    left: 0;
    background: var(--main-background-color);
    height: 100px;
    width: 100%;
    z-index: 100;
}


menu {
    position: fixed;
    padding: 0;
    margin: 0;
    z-index: 10;
    left: 0;
    right: 0;
}

menu[name="top"] {
    top: 0;

    border-top: 110px solid var(--main-background-color);
    /*
    border-left: 8px solid var(--main-background-color);
    border-right: 7px solid var(--main-background-color);
    */
}

menu[name="bottom"] {
    bottom: 0;
}

menu table {
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

menu td {
    height: 50px;
    text-align: center;
    background-color: var(--main-background-color);
    color: #fff;
    border: 0;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

menu td.active {
    background-color: var(--content-background-color);
}


menu[name="top"] td[data-group="main"] {
    display: table-cell;
}
menu[name="top"] td[data-group="run"] {
    display: none;
}
menu[name="top"] td[data-group="user"] {
    display: none;
}
menu[name="top"] td[data-group="user2"] {
    display: none;
}
menu[name="top"] td[data-group="other"] {
    display: none;
}
menu[name="top"] td[data-group="mod"] {
    display: none;
}
menu[name="top"] td[data-group="admin"] {
    display: none;
}
menu[name="top"] td[data-group="login"] {
    display: none;
}
menu[name="top"] td[data-group="info"] {
    display: none;
}
menu[name="top"] td[data-group="settings"] {
    display: none;
}
menu[name="top"] td[data-group="edit"] {
    display: none;
}

menu td.disable {
    display: none !important;
}

menu svg {
    height: 35px; 
    display: block;
    margin: 0 auto;
}


menu a {
    text-decoration: none;
    font-size: 10px; 
    font-weight: 800;
}

menu a:hover,
menu a:focus,
menu a:active {
    text-decoration: none;
    color: rgb(38,81,98);
    cursor: default;
    pointer-events: none;
}

menu td svg, menu td a {
    fill: var(--main-icon-base-color);
    color: var(--main-text-base-color);
}

menu td.active svg, menu td.active a {
    fill: var(--main-icon-active-color);
    color: var(--main-icon-active-color);
}  

menu td[data-group="main"].active svg, 
menu td[data-group="main"].active a {
    fill: var(--main-color-01);
    color: var(--main-color-01);
}



/*
menu td[data-group="main"].info svg,
menu td[data-group="main"].info a {
    animation: glow-animation 4s infinite;
}

@keyframes glow-animation {
    0%   { filter: drop-shadow(0 0 3px rgba(255, 170, 170, 1)); } 
    5%   { filter: drop-shadow(0 0 3px rgba(255, 190, 170, 1)); }
    11%  { filter: drop-shadow(0 0 3px rgba(255, 210, 170, 1)); }
    16%  { filter: drop-shadow(0 0 3px rgba(255, 230, 170, 1)); } 
    22%  { filter: drop-shadow(0 0 3px rgba(227, 238, 170, 1)); }
    27%  { filter: drop-shadow(0 0 3px rgba(198, 247, 170, 1)); }
    33%  { filter: drop-shadow(0 0 3px rgba(170, 255, 170, 1)); } 
    38%  { filter: drop-shadow(0 0 3px rgba(170, 255, 198, 1)); }
    44%  { filter: drop-shadow(0 0 3px rgba(170, 255, 227, 1)); }
    50%  { filter: drop-shadow(0 0 3px rgba(170, 255, 255, 1)); } 
    55%  { filter: drop-shadow(0 0 3px rgba(170, 227, 255, 1)); }
    61%  { filter: drop-shadow(0 0 3px rgba(170, 198, 255, 1)); }
    66%  { filter: drop-shadow(0 0 3px rgba(170, 170, 255, 1)); } 
    72%  { filter: drop-shadow(0 0 3px rgba(198, 170, 255, 1)); }
    77%  { filter: drop-shadow(0 0 3px rgba(227, 170, 255, 1)); }
    83%  { filter: drop-shadow(0 0 3px rgba(255, 170, 255, 1)); } 
    88%  { filter: drop-shadow(0 0 3px rgba(255, 170, 227, 1)); }
    94%  { filter: drop-shadow(0 0 3px rgba(255, 170, 198, 1)); }
    100% { filter: drop-shadow(0 0 3px rgba(255, 170, 170, 1)); }
}
*/




menu td[data-group="run"].active svg, 
menu td[data-group="run"].active a {
    fill: var(--main-color-02);
    color: var(--main-color-02);
}

menu td[data-group="user"].active svg, 
menu td[data-group="user"].active a {
    fill: var(--main-color-03);
    color: var(--main-color-03);
}

menu td[data-group="user2"].active svg, 
menu td[data-group="user2"].active a {
    fill: var(--main-color-03);
    color: var(--main-color-03);
}

menu td[data-group="history"].active svg, 
menu td[data-group="history"].active a {
    fill: var(--main-color-03);
    color: var(--main-color-03);
}

menu td[data-group="other"].active svg, 
menu td[data-group="other"].active a {
    fill: var(--main-color-04);
    color: var(--main-color-04);
}

menu td[data-group="mod"].active svg, 
menu td[data-group="mod"].active a {
    fill: var(--main-color-05);
    color: var(--main-color-05);
}

menu td[data-group="admin"].active svg, 
menu td[data-group="admin"].active a {
    fill: var(--main-color-06);
    color: var(--main-color-06);
}

menu td[data-group="login"].active svg, 
menu td[data-group="login"].active a {
    fill: var(--main-color-07);
    color: var(--main-color-07);
}

menu td[data-group="info"].active svg, 
menu td[data-group="info"].active a {
    fill: var(--main-color-08);
    color: var(--main-color-08);
}

menu td[data-group="settings"].active svg, 
menu td[data-group="settings"].active a {
    fill: var(--main-color-09);
    color: var(--main-color-09);
}

menu td[data-group="system"].active svg, 
menu td[data-group="system"].active a {
    fill: var(--main-color-09);
    color: var(--main-color-09);
}

menu td[data-group="data"].active svg, 
menu td[data-group="data"].active a {
    fill: var(--main-color-09);
    color: var(--main-color-09);
}

menu td[data-group="edit"].active svg, 
menu td[data-group="edit"].active a {
    fill: var(--main-color-10);
    color: var(--main-color-10);
}

menu td[data-group="streak"].active svg, 
menu td[data-group="streak"].active a {
    fill: var(--main-color-10);
    color: var(--main-color-10);
}

/* 
menu td[onclick*="loadSub"] {
    box-shadow: inset 0 -2px 0 0 var(--main-icon-base-color);
} 
*/

menu td.sub {
    /* background-color: var(--content-background-color); */
    /* border-bottom: 4px solid var(--accent-base-color); */
    box-shadow: inset 0 -2px 0 0 var(--accent-base-color);
    background-color: var(--content-background-color);
}

menu td.sub svg, 
menu td.sub a {
    fill: var(--accent-base-color);
    color: var(--accent-base-color);
}


table#submen {
    background: var(--main-background-color);
    border: 0px solid var(--accent-base-color);
}




menu[name="bottom"] {
    border-top: 4px solid var(--main-icon-base-color);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('main')"]) {
    border-top: 4px solid var(--main-color-01);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('run')"]) {
    border-top: 4px solid var(--main-color-02);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('user')"]) {
    border-top: 4px solid var(--main-color-03);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('user2')"]) {
    border-top: 4px solid var(--main-color-03);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('streak')"]) {
    border-top: 4px solid var(--main-color-03);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('other')"]) {
    border-top: 4px solid var(--main-color-04);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('mod')"]) {
    border-top: 4px solid var(--main-color-05);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('admin')"]) {
    border-top: 4px solid var(--main-color-06);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('login')"]) {
    border-top: 4px solid var(--main-color-07);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('info')"]) {
    border-top: 4px solid var(--main-color-08);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('settings')"]) {
    border-top: 4px solid var(--main-color-09);
}
menu[name="bottom"]:has(td.active[onclick="loadMenu('edit')"]) {
    border-top: 4px solid var(--main-color-10);
}




menu[name="bottom"] td svg, menu[name="bottom"] td a {
    fill: var(--main-icon-base-color);
    color: var(--main-text-base-color);
}

menu[name="bottom"] td.active svg, menu[name="bottom"] td.active a {
    fill: var(--main-icon-active-color);
    color: var(--main-icon-active-color);
}

menu[name="bottom"] td.active[onclick="loadMenu('main')"] svg,
menu[name="bottom"] td.active[onclick="loadMenu('main')"] a {
    fill: var(--main-color-01);
    color: var(--main-color-01);
}
menu[name="bottom"] td.active[onclick="loadMenu('run')"] svg,
menu[name="bottom"] td.active[onclick="loadMenu('run')"] a {
    fill: var(--main-color-02);
    color: var(--main-color-02);
}
menu[name="bottom"] td.active[onclick="loadMenu('mod')"] svg,
menu[name="bottom"] td.active[onclick="loadMenu('mod')"] a {
    fill: var(--main-color-05);
    color: var(--main-color-05);
}
menu[name="bottom"] td.active[onclick="loadMenu('admin')"] svg,
menu[name="bottom"] td.active[onclick="loadMenu('admin')"] a {
    fill: var(--main-color-06);
    color: var(--main-color-06);
}
menu[name="bottom"] td.active[onclick="loadMenu('info')"] svg,
menu[name="bottom"] td.active[onclick="loadMenu('info')"] a {
    fill: var(--main-color-08);
    color: var(--main-color-08);
}
menu[name="bottom"] td.active[onclick="loadMenu('settings')"] svg,
menu[name="bottom"] td.active[onclick="loadMenu('settings')"] a {
    fill: var(--main-color-09);
    color: var(--main-color-09);
}
menu[name="bottom"] td.active[onclick="loadMenu('edit')"] svg,
menu[name="bottom"] td.active[onclick="loadMenu('edit')"] a {
    fill: var(--main-color-10);
    color: var(--main-color-10);
}





div[name="user_head"] {
    position: fixed;
    display: inline-block;
    cursor: pointer;

    top: 17px;
    right: 15px;
    width: 65px;
    height: 65px;

    border-radius: 10px; 
    z-index: 15;

    border: 0;
}

div[name="user_head"] svg {
    position: absolute;
    width: 65px;
    height: 65px;
    border-radius: 10px;
    fill: var(--badage-color);
}

div[name="user_head"] img {
    visibility: hidden;
    width: 65px;
    height: 65px;
    border-radius: 10px;
    position: relative;
}

div[name="user_head"] div.streak {
    position: fixed;
    display: inline-block;
    cursor: pointer;
    width: 65px;
    height: 65px;

    right: 90px;
    top: 17px;
    /* border: 1px solid var(--badage-color); */
}

div[name="user_head"] div.streak svg {
    position: absolute; 
    top: 10px;
    height: 50px; 
    fill: var(--main-icon-active-color);
    fill: var(--run-inactive-color);
}

div[name="user_head"] div.streak svg.active {
    fill: var(--accent-base-color);
}

div[name="user_head"] div.streak svg.active path.c1 {
    fill: rgb(252, 202, 9);
}

div[name="user_head"] div.streak svg.active path.c0 {
    fill: rgb(255, 153, 8);
    stroke-width: 10px;
    stroke: rgb(255, 153, 8);
    opacity: 1;
}


div[name="user_head"], 
div[name="user_head"] * {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    outline: none;
}

div[name="user_head"], 
div[name="user_head"] * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}



div[name="user_head"] div.streak span {
    display: block;
    text-align: right;
    transform: translate(-60px, 28px);
}

div[name="user_head"] span.head_badge {
    background: var(--badage-color);
    color: var(--badage-text-color);
    padding: 0 6px;
    border-radius: 10px;
    position: relative;
    top: -15px;
    left: -5px;
    /* font-family: standard; */
}

div[name="user_head"] span.head_badge:not(.active) {
    visibility: hidden;
}