:root {
    /* Mining density visuals — read once at boot by JS (getComputedStyle),
       so tuning happens here, not in code. Tier shades are 0..1 black-overlay
       alphas baked onto the base dirt tile as the 'dark-1'..'dark-3' canvas
       variants (GridCanvasFactory); the progress vars color the green
       depleting bar over the cell being mined (Viewport.paintMiningProgress).
       Tier count matches GameDensity.DIRT_TIERS (game-engine/density.js). */
    --loa-dirt-tier1-shade: 0.15;
    --loa-dirt-tier2-shade: 0.28;
    --loa-dirt-tier3-shade: 0.42;
    --loa-mine-progress-fill: #35c94a;
    --loa-mine-progress-back: rgba(0, 0, 0, 0.55);
    /* Ant-vs-ant mining hit marker (Viewport.paintHitMarkers): the sword
       (img/sword_gold.png) flashed just above an ant every time a hit lands
       on it — attacker sees it on the target, the victim sees it on themself.
       size is the sword's draw width/height in px. */
    --loa-hit-marker-size: 15;
}

html {
    height: 100%;
    width: 100%;
    min-height: 300px;
    min-width: 300px;
    background: rgb(23, 18, 40) url('../img/space.jpg');
    overflow: hidden;

    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    display: block;
    font-family: 'Arvo', serif;
    background-repeat: repeat;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;

    border: 0px;
    margin: 0px;
    padding: 0px;
}

.selectable * {
    touch-action: manipulation !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: text !important;
}

#crsf_token {
    display: none;
}

button {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    color: black;

    border: 0px;
    margin: 0px;
    padding: 0px;
}

input {
    font-size: 11pt;

    border: 0px;
    margin: 0px;
    padding: 0px;
}

a {
    color: white;
    text-shadow: 1px 1px 1px darkblue;
}

a:visited {
    color: white;

    text-shadow: 1px 1px 1px darkblue;
}

a:active {
    text-shadow: 1px 1px 1px purple;
}

#bottom_HUD {
    display: block;
    width: 380px;
    height: 185px;
    touch-action: none;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.scrollable {
    scrollbar-width: thin;
}

.sugar_rush_active {
    background: url('../img/short_wooden_button_pink.png') repeat-x !important;
    background-size: 100% 100% !important;
}

#chat {
    width: 100%;
    height: 100%;
}

.sky {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    overflow: hidden;
}

.sky .back {
    background: url('../img/Background_2.png') repeat-x;
    min-height: 130px;
    animation: mistr 1000s infinite linear;
    width: 100%;
    z-index: 51;
    position: relative;
}

.billboard {
    display: block;
    width: 340px;
    margin-left: 25px;
}

.sign {
    width: 340px;
    text-align: center;
    display: inline-block;
    position: relative;
    top: 15px;
    margin: auto;
}

.sign-text {
    background: url('../img/sign-right.png') no-repeat;
    background-position: right;
    color: rgb(238, 179, 70);
    font-family: 'Holtwood One SC', serif;
    display: block;
    line-height: 70px;
}

.sign-top {
    height: 70px;
    background: rgb(99, 99, 99) url('../img/sign-left.png') no-repeat;
}

.sign-text h1 {
    padding: 0px;
    margin: 0px;
    text-shadow: 1px 1px 1px #0a0a0a;
}

.sign-text h1 .tm {
    line-height: 1em;
    font-size: 0.5em;
    vertical-align: super;
}

.pillar {
    background: url('../img/Pillar2.png') no-repeat;
    background-position: center;
    width: 32px;
    height: 64px;
    margin: auto;
    position: relative;
    margin-bottom: -65px;
    top: 68px;
}

.sky .front {
    background: url('../img/Background_1.png') repeat-x;
    opacity: 0.2;
    float: left;
    width: 100%;
    animation: mist 500s infinite linear;
    min-height: 120px;
    margin-top: -60px;
}

@keyframes mist {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100vw 0;
    }
}

@keyframes mistr {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100vw 0;
    }
}

.grass {
    background: url('../img/grass-transparent.png') repeat-x;
    height: 16px;
    width: 100%;
    position: absolute;
    top: 128px;
    z-index: 110;
    right: 0px;
    overflow: hidden;
}

@keyframes ant-conga {
    0% {
        left: 100%;
    }
    100% {
        left: -100px;
    }
}

.ant-line {
    width: 100%;
    height: 65px;
    overflow: hidden;
    position: absolute;
    top: 83px;
    z-index: 120;
}

.ant_mover {
    width: 64px;
    position: absolute;
    display: block;
    left: 100%;
}

.ground {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: block;

    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    overflow: hidden;
    pointer-events: none;
}

.ground canvas {
    display: block;
}

#footer {
    display: block;
    min-width: 350px;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    line-height: 4em;
    margin-top: -5em;
}

#footer p {
    margin: 0px;
    padding: 0px;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: multiply;
    text-align: center;
    width: auto;
    border-radius: 2em;
    line-height: 1.5em;
    padding: 15px;
}

#touch_controls {
    display: block;
    position: absolute;
    right: 5px;
    bottom: 10px;
    width: 125px;
    height: 120px;
}

#touch_controls button {
    width: 50px;
    height: 50px;
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    position: absolute;
    display: inline-block;
    margin: 0px;
}

#touch_controls button:active:not([disabled]) {
    margin-top: 1px;
    margin-left: 1px;
    background: url('../img/round_wooden_button_light_wood.png') no-repeat;
    background-size: 100% 100%;
}

#touch_controls .arrow {
    width: 25px;
    height: 25px;
    display: block;
    color: white;
    margin-left: 12px;
    touch-action: manipulation;
}

#touch_controls_up {
    top: 0px;
    left: 37px;
}

#touch_controls_up .arrow {
    background: url('../img/arrow_up.png') no-repeat;
    background-size: 100% 100%;
}

#touch_controls_right {
    left: 75px;
    top: 35px;
}

#touch_controls_right .arrow {
    background: url('../img/arrow_right.png') no-repeat;
    background-size: 100% 100%;
}

#touch_controls_down {
    top: 75px;
    left: 37px;
}

#touch_controls_down .arrow {
    background: url('../img/arrow_down.png') no-repeat;
    background-size: 100% 100%;
}

#touch_controls_left {
    left: 0px;
    top: 37px;
}

#touch_controls_left .arrow {
    background: url('../img/arrow_left.png') no-repeat;
    background-size: 100% 100%;
}

#thegrid {
    display: block;
    touch-action: none;
    -webkit-touch-callout: none;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    cursor: grab;
}

#thegrid.panning {
    cursor: grabbing;
}

#camvas_viewport {
    height: 100%;
    width: 100%;
    display: block;
    touch-action: none;
    -webkit-touch-callout: none;
}

#ground {
    touch-action: none;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-touch-callout: none;
}

.energy {
    /* plank_medium_03 */
    background: url('../img/panel_medium_wood_medium_horizontal.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0px;
    left: 5px;
    width: 210px;
    padding: 15px;
    padding-bottom: 15px;
}

.energy_container {
    background: url('../img/inner_panels_horizontal_strip.png') no-repeat;
    background-size: 100% 100%;
    height: 45px;
    padding-top: 5px;
}

#energy_icon {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 30px;
    padding-left: 5px;
}

#energy_icon img {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
}

#energy_bar_container {
    display: inline-block;
    vertical-align: middle;
    height: 38px;
    background: url('../img/bar_container_right_end.png') no-repeat;
    background-position: 100%;
    background-size: 10px 100%;
    padding-right: 10px;
    margin-left: -3px;
}

.energy_bar_container_start {
    background: url('../img/bar_container_left_end.png') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 10px;
    height: 100%;
}

.energy_bar_container_fill {
    background: url('../img/bar_container_center_repeating.png') repeat-x;
    background-size: 100% 100%;
    display: inline-block;
    height: 100%;
    width: 150px;
}

.energy_bar_container_end {
    background: url('../img/bar_container_right_end.png') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 10px;
    height: 100%;
    margin-left: 0px;
    left: -5px;
}

#energy_bar_start,
#energy_bar_end,
#energy_bar_fill {
    display: inline-block;
}

#energy_bar_start {
    margin-left: -10px;
}

#energy_bar_end {
    margin-left: 0px;
    margin-right: -10px;
}

.energy_component {
    width: 10px;
    height: 38px;
}

.energy_bar_start_blue {
    background: url('../img/fill_blue_left_end.png') no-repeat;
    background-size: 100% 100%;
}

.energy_bar_fill_blue {
    background: url('../img/fill_blue_center_repeating.png') repeat-x;
    background-size: 100% 100%;
    width: 0px;
}

.energy_bar_end_blue {
    background: url('../img/fill_blue_right_end.png') no-repeat;
    background-size: 100% 100%;
}

.energy_bar_start_red {
    background: url('../img/fill_red_left_end.png') no-repeat;
    background-size: 100% 100%;
}

.energy_bar_fill_red {
    background: url('../img/fill_red_center_repeating.png') repeat-x;
    background-size: 100% 100%;
    width: 0px;
}

.energy_bar_end_red {
    background: url('../img/fill_red_right_end.png') no-repeat;
    background-size: 100% 100%;
}

.energy_bar_start_orange {
    background: url('../img/fill_orange_left_end.png') no-repeat;
    background-size: 100% 100%;
}

.energy_bar_fill_orange {
    background: url('../img/fill_orange_center_repeating.png') repeat-x;
    background-size: 100% 100%;
    width: 0px;
}

.energy_bar_end_orange {
    background: url('../img/fill_orange_right_end.png') no-repeat;
    background-size: 100% 100%;
}

.energy_bar_start_purple {
    background: url('../img/fill_purple_left_end.png') no-repeat;
    background-size: 100% 100%;
}

.energy_bar_fill_purple {
    background: url('../img/fill_purple_center_repeating.png') repeat-x;
    background-size: 100% 100%;
    width: 0px;
}

.energy_bar_end_purple {
    background: url('../img/fill_purple_right_end.png') no-repeat;
    background-size: 100% 100%;
}

.user_menu {
    /* keep Sugar Rush + the home/settings/audio cluster on ONE line inside
       the fixed 210px .energy panel (otherwise the inline-flex cluster wraps) */
    white-space: nowrap;
}

.user_interactions {
    /* background: url('../img/plank_medium_03.png') no-repeat; */
    background-size: 100% 100%;
    display: block;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    overflow: hidden;
}


.user_interactions .action {
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    text-align: center;
    width: 50px;
    height: 50px;
    margin-left: 20px;
}

.user_interactions .action:active:not([disabled]) {
    position: relative;
    top: 1px;
    left: 1px;
}

.user_interactions img {
    width: 65%;
    height: 65%;
    display: inline-block;
    vertical-align: middle;
    margin-top: 8px;
}

.user_interactions .on {
    background: url('../img/round_wooden_button_light_wood.png') no-repeat;
    background-size: 100% 100%;
}

.user_interactions .status {
    width: 65%;
    height: 65%;
    display: block;
    float: left;
    position: relative;
    top: -25px;
    left: 25px;
}

.user_interactions .status_on {
    background: url('../img/tick_icon.png') no-repeat;
    background-size: 100% 100%;
}

.user_interactions .status_off {
    background: url('../img/cross_icon.png') no-repeat;
    background-size: 100% 100%;
}

.user_interactions .status_cooldown_on {
    opacity: 0.5;
}

.user_interactions .locked {
    background: url('../img/lock_locked.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 0px;
    margin-left: -3px;
}

.v_label {
    /** 
    - vertical text label
    **/
    writing-mode: vertical-rl;
    transform: rotate(235deg);
    text-align: center;
    font-size: 9pt;
    font-weight: bold;
    color: white;
    text-shadow: #0a0a0a -1px 1px 1px;
    display: block;
    width: 10px;
    height: 45px;
    margin-top: -55px;
}

#fight .v_label {
}

#talk_icon {
    width: 32px;
    height: 38px;
    background: url('../img/vector_emotes.png') -64px -114px no-repeat;
    scale: 0.75;
    display: inline-block;
    vertical-align: middle;
    margin-top: 6px;
}

#sugar_rush_cost {
    margin-top: -45px;
    margin-right: -18px;
    float: right;
    right: 0px;
    text-align: center;
    font-size: 8pt;
    vertical-align: middle;
    padding: 2px;

    height: 1.2em;
    line-height: 1.2em;
    width: 50px;
    text-shadow: none;
    color: purple;
    font-style: normal;
    display: none;
}

#sugar_rush_cost img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 2px;
    margin-top: -2px;
    margin-left: 0px;
}

.consumables {
    /* Relocated into the action row, in-flow left of the Talk button */
    display: inline-block;
    text-align: left;
}

.consumables_container {
    display: inline-block;
    vertical-align: middle;
}

.consumable {
    background: url('../img/short_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    display: inline-block;
}

.consumable span {
    display: inline-block;
    margin-right: 0px;
}

.consumables .on {
    background: url('../img/short_wooden_button_light_wood.png') no-repeat;
    background-size: 100% 100%;
}

#sugar_rush {
    cursor: pointer;
    text-align: center;
    padding-right: 4px;
    font-size: 10pt;
    text-shadow: purple 1px 1px 1px;
    margin-left: 0px;
    margin-right: 0px;
    line-height: 20px;
    vertical-align: middle;
    font-style: italic;
    color: black;
}

.consumable span {
    display: inline-block;
    padding: 8px 10px 10px 10px;
}

#my_ant {
    cursor: pointer;
    text-align: center;
    padding-right: 10px;
    font-size: 10pt;
    text-shadow: purple 1px 1px 1px;
    margin-left: -6px;
    margin-right: 0px;
    line-height: 40px;
    vertical-align: middle;
    font-style: italic;
    color: black;
}

#my_ant span {
    margin-left: 5px;
    margin-right: 5px;
}

.consumables button:active:not([disabled]) {
    position: relative;
    top: 1px;
    left: 1px;
}

.consumables .skill_slot {
    display: inline-block;
    height: 50px;
    width: 50px;
    background: url('../img/short_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 8px;
    text-align: center;
    margin-left: -2px;
}

.consumable img {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 0px;
    margin-left: 10px;
}

.consumables .status_cooldown_on {
    opacity: 0.5;
}

.consumable .status {
    width: 25px;
    height: 25px;
    display: block;
    margin-top: -25px;
    margin-left: 30px;
}

#sugar_rush .locked {
    margin-left: 98px;
    margin-right: -95px;
}

.consumables .locked {
    background: url('../img/lock_locked.png') no-repeat;
    background-size: 100% 100%;
}

.consumables .skill_slot .empty_skill {
    width: 35px;
    height: 25px;
    vertical-align: middle;
    border: grey 1px dashed;
    margin-left: 7px;
    margin-top: 6px;
    margin-bottom: 10px;
}

#music_player,
#config_button,
#config_settings_button {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
    z-index: 200;
    margin-bottom: -50px;
    text-align: center;

    top: 87px;
    left: 215px;
    z-index: 300;
}

#config_button {
    left: 0px;
}

#config_settings_button {
    left: 50px;
}

#music_player_button {
    display: block;
    margin: 0px;
    padding: 0px;
    width: 38px;
    height: 38px;
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
}

#config_button_button {
    display: block;
    margin: 0px;
    padding: 0px;
    width: 30px;
    height: 30px;
    background: url('../img/round_wooden_button_light_wood.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
}

#config_settings_button_button {
    display: block;
    margin: 0px;
    padding: 0px;
    width: 40px;
    height: 40px;
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
}

.config_button_icon {
    width: 15px;
    height: 15px;
    background: url('../img/favicon.png') no-repeat !important;
    background-size: 100% 100% !important;
    display: inline-block;
    margin-left: -1px;
}

.config_settings_button_icon {
    width: 20px;
    height: 20px;
    background: url('../img/settings_3.png') no-repeat !important;
    background-size: 100% 100% !important;
    display: inline-block;
    margin: 1px 0px 0px 1px;
}

.music_on {
    background: url('../img/round_wooden_button_green.png') no-repeat !important;
    background-size: 100% 100% !important;
}

#music_player_button:active:not([disabled]),
#config_button_button:active:not([disabled]) {
    position: relative;
    top: 1px;
    left: 1px;
}

.music_status {
    width: 15px;
    height: 15px;
    display: inline-block;
}

.music_off .music_status {
    background: url('../img/sound_off.png') no-repeat;
    background-size: 100% 100%;
}

.music_on .music_status {
    background: url('../img/sound_on.png') no-repeat;
    background-size: 100% 100%;
}

#top_buttons {
    display: block;
    position: absolute;
    top: 82px;
    width: 340px;
    left: 20px;
    z-index: 200;
    font-size: 10pt;
    height: 50px;
    font-size: 10pt;
    line-height: 50px;
}

#disclaimers {
    position: relative;
    top: -50px;
}

.disclaimer {
    position: relative;
    float: right;
    right: 0px;
    vertical-align: top;
}

#top_buttons a {
    margin-left: 15px;
    display: inline-block;
    vertical-align: top;
    text-shadow: 1px 1px 1px white;
    color: darkblue;
    text-decoration: none;
    cursor: pointer;
}

#top_buttons a:visited {
    color: darkblue;
}

#top_buttons a:active:not([disabled]) {
    color: blue;
}

#admin_toggle.active {
    color: green;
    font-weight: bold;
}

.top_info_container {
    position: absolute;
    display: none;
    top: 135px;
    left: 50%;
    margin-left: -192px;
    z-index: 100;
    width: 385px;
    height: 60px;
}

.top_info_container .top_HUD {
    display: block;
    width: 360px;
    left: 50%;
    margin-left: -185px;
    margin-top: 0px;
    z-index: 101;
    position: relative;
    max-height: 300px;
}

.red_awning {
    background: url('../img/red_awning_complete.png') no-repeat;
    background-size: 100% 100%;
    width: 110%;
    height: 75px;
    margin-left: -5%;
    position: relative;
    margin-bottom: -40px;
    margin-top: -10px;
    display: none;
}

.store_banner {
    background: url('../img/panel_medium_wood_medium_horizontal.png') no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 100%;
    height: 60px;
    margin-bottom: 0px;
}

.top_info {
    background: url('../img/plank_medium_bottom.png') no-repeat;
    background-size: 100% 100%;
    padding-left: 10px;
    min-height: 50px;
    max-height: 100%;
    padding-top: 10px;
    margin-bottom: -10px;
    padding-bottom: 3px;
    margin-top: -7px;
}

.top_info .info {
    background: url('../img/plank_dark_01.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    font-size: 11pt;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    width: 160px;
    height: 2.2em;
    line-height: 2.3em;
    float: left;
    margin-right: 15px;
    margin-top: 5px;
}

#sugar,
#crumbs {
    font-weight: bold;
    text-shadow: #0a0a0a 1px 1px 1px;
    pointer-events: none;
}

.store_bar {
    background: url('../img/panel_medium_wood_medium_horizontal.png') no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: -5px;
    margin-top: 5px;
    padding-top: 10px;
}

.store_bar .label {
    text-align: center;
    font-size: 11pt;
    font-weight: bold;
    color: white;
    text-shadow: #0a0a0a -1px 1px 1px;
    display: block;
    float: left;
    display: block;
    position: relative;
    writing-mode: vertical-rl;
    transform: rotate(235deg);
    top: -6px;
    height: 65px;
    width: 35px;
    left: 30px;
}

.store_bar .store_item {
    background: url('../img/inner_panels_horizontal_strip.png') no-repeat;
    background-size: 100% 100%;
    display: block;
    margin-left: 95px;
    width: 250px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    color: rgba(238, 179, 70, 0.9);
    text-shadow: #0a0a0a 1px 1px 1px;
    font-style: italic;
}

#ground_block {
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: 5px 5px 200px 200px rgba(0, 0, 0, 0.75);
    z-index: 30;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 50%;
    width: 200px;
    margin-left: -100px;
}

#sugar_score .scrollable {
    display: block;
    /* Fixed height sized to hold exactly LeaderboardPanel.PAGE_SIZE (7) rows so
       one page fills the panel with no scrollbar; a short last page top-aligns.
       overflow-y:hidden (not scroll) — paging replaces the set, we never scroll. */
    height: 310px;
    padding: 5px 5px 5px 10px;
    overflow: scroll;
}

.header_container {
    padding-top: 60px;
    text-align: left;
}

#sugar_score_table .high_score:nth-child(odd) {
    background: url('../img/plank_medium_03.png') no-repeat;
    background-size: 100% 100%;
}

#sugar_score_table .high_score:nth-child(even) {
    background: url('../img/plank_dark_01.png') no-repeat;
    background-size: 100% 100%;
}

.high_score {
    display: block;
    font-size: 9pt;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
    cursor: pointer;
}

.high_score:hover {
    filter: brightness(1.2);
}

#sugar_score_table .hs_rank {
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    display: inline-block;
    width: 40px;
    height: 40px;

    vertical-align: middle;
    line-height: 37px;

    font-size: 13pt;
    color: white;
    text-shadow: #0a0a0a 2px 2px 2px;
    background-size: 100% 100%;
}

#sugar_score_table .hs_ant {
    text-align: left;
    display: inline-block;
    width: 180px;
    padding-left: 20px;
    font-size: 10pt;
}

#sugar_score_table .hs_sugar {
    padding-right: 15px;
    display: inline-block;
    width: 70px;
}

.hs_sign {
    display: block;
    float: left;
    margin-bottom: -100%;
    position: absolute;
    top: 10px;
    left: 35px;
    transform: rotate(-1deg);
    font-size: 16pt;
    font-weight: bold;
    text-shadow: purple 2px 2px 2px;
    background: url('../img/plank_dark_01.png') no-repeat;
    background-size: 100% 100%;
    padding: 15px;
    padding-top: 10px;
    margin-top: 0px;
}

.high_score_topper {
    display: block;
    width: 100%;
    height: 110px;
    background: url('../img/header_board_medium_wood_small_arched_top.png')
        no-repeat;
    background-size: 100% 100%;
    text-align: center;
    font-size: 11pt;
    font-weight: bold;
    color: white;
    text-shadow: #0a0a0a -1px 1px 1px;
    position: relative;
    z-index: 101;
}

.high_score_topper #hs_rank {
    width: 150px;
    display: inline-block;
    text-align: left;
    padding-left: 35px;
    display: none;
}

.high_score_topper #hs_ant {
    width: 165px;
    display: inline-block;
}

.high_score_topper #hs_sugar {
    display: inline-block;
    padding-left: 0px;
    width: 100px;
}

.high_score_topper #hs_filter {
    display: inline-block;
    height: 50px;
    width: 50px;
    margin-left: 20px;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.high_score_topper #hs_filter button {
    background: none;
    height: 40px;
    width: 40px;
}

.high_score_topper #hs_filter button:active:not([disabled]) {
    position: relative;
    top: 1px;
    left: 1px;
}

#high_score_container {
    overflow: hidden;
    padding: 25px 15px 15px 5px;
    background: url('../img/panel_dark_wood_mobile_vertical.png') no-repeat;
    background-size: 100% 100%;
    margin-top: -30px;
    width: 360px;
}

/* ── Leaderboard Search ──
   The search row lives in the topper between the title sign and the Ant/Sugar
   header and is collapsed by default; the 🔍 toggle (top-right, next to the
   title) puts .search_open on #hs_topper to expand it. Collapsed, the topper
   keeps its fixed 110px so the panel looks unchanged. */
.hs_search_toggle {
    position: absolute;
    top: 12px;
    right: 48px;
    font-size: 14pt;
    background: transparent;
    display: none;
}

.hs_search_toggle:active:not([disabled]) {
    transform: translate(1px, 1px);
}

.hs_search_container {
    display: none;
    padding: 0 25px 0 20px;
    align-items: stretch;
    gap: 6px;
}

/* Expanded: the topper grows (the arched background stretches). The sign
   clearance is topper padding, NOT margin on the search row — a top margin
   on the first in-flow child would collapse through the (padding-less)
   topper and shove the whole board down over the panel below. */
.high_score_topper.search_open {
    height: auto;
    padding-top: 55px;
    padding-bottom: 8px;
}

.high_score_topper.search_open .hs_search_container {
    display: flex;
}

.high_score_topper.search_open .header_container {
    padding-top: 6px;
}

.hs_search_input {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 5px;
    background: url('../img/inner_panels_horizontal_strip.png') no-repeat;
    background-size: 100% 100%;
}

.hs_search_input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.hs_search_input:focus {
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}


#sugar_score_table .me {
    background: url('../img/plank_light_03.png') no-repeat !important;
    background-size: 100% 100% !important;
}

/* ── Leaderboard Pager ── */
.hs_pager {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 2px;
}

.hs_page_button {
    width: 32px;
    height: 32px;
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.hs_page_button:active:not([disabled]) {
    background: url('../img/round_wooden_button_light_wood.png') no-repeat;
    background-size: 100% 100%;
}

.hs_page_button .arrow {
    width: 15px;
    height: 15px;
    display: block;
    margin: auto;
    background-size: 100% 100%;
}

#hs_prev_page .arrow {
    background: url('../img/arrow_left.png') no-repeat;
    background-size: 100% 100%;
}

#hs_next_page .arrow {
    background: url('../img/arrow_right.png') no-repeat;
    background-size: 100% 100%;
}

/* Hidden (not display:none) so the indicator stays centred and the surviving
   arrow keeps its side when the other is hidden at a page boundary. */
.hs_page_button.is_hidden {
    visibility: hidden;
    pointer-events: none;
}

.hs_page_indicator {
    flex: 1 1 auto;
    text-align: center;
    color: white;
    font-size: 9pt;
    text-shadow: #0a0a0a 1px 1px 1px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#top_HUD {
    position: absolute;
    width: 358px;
    left: 50%;
    margin-left: -190px;
    /* top: 190px; */
    z-index: 50;
    top: 190px;
    display: block;
    opacity: 0;
}

.crumbs_store {
    margin-top: 15px;
    padding-left: 10px;
}

#sugar_score {
    display: block;
    position: absolute;
    z-index: 51;
    top: -452px;
    margin-top: 5px;
}

#crumbs_store {
    position: absolute;
    z-index: 51;

    top: -452px;
    width: 100%;
}

#sugar_score_container {
    position: relative;
    left: 203px;
    top: -37px;
    width: 155px;
}

#ant_nickname {
    background: url('../img/panel_medium_wood_horizontal_strip.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 3px;
    width: 190px;
    height: 30px;
    text-align: center;
    padding-top: 8px;
    overflow: hidden;
}

#ant_nickname_button {
    font-size: 13pt;
    background: transparent;
    position: relative;
    top: -1px;
    text-shadow: #0a0a0a 1px 1px 1px;
    color: white;
}

#ant_nickname_random,
#ant_nickname_random_ctrl {
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
    cursor: pointer;
    text-align: center;
}

#ant_nickname_random {
    position: absolute;
    top: -3px;
    left: -25px;
    display: none;
}

#ant_nickname_random_ctrl {
    position: absolute;
    right: 60px;
    top: 49px;
    display: none;
}

#ant_nickname_random_ctrl:active:not([disabled]) {
    position: absolute;
    right: 61px;
    top: 50px;
}

#ant_nickname_random_icon::before,
#ant_nickname_random_icon_ctrl::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

#ant_nickname_random_icon,
#ant_nickname_random_icon_ctrl {
    background: url('../img/replay.png') no-repeat;
    background-size: 100% 100%;
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}

#ant_nickname_adornment {
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
    position: absolute;
    top: -3px;
    left: -5px;
    cursor: pointer;
    text-align: center;
    display: none;
}

#ant_nickname_adornment_icon::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
        4,
        231,
        16,
        0.5
    ); /* Change the color and opacity as needed */
    border-radius: 50%;
}
#ant_nickname_adornment_icon {
    background: url('../img/save.png') no-repeat;
    background-size: 100% 100%;
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}

#crumbs_store_adornment,
#sugar_score_adornment {
    display: block;
    position: relative;
    width: 35px;
    height: 35px;
    margin-bottom: -35px;
    margin-right: -35px;
    top: 3px;
    cursor: pointer;
    rotate: 5deg;
}

#crumbs_store_button:active:not([disabled]),
#sugar_score_button:active:not([disabled]) {
    position: relative;
    top: 1px;
    left: 1px;
}

#sugar_score_adornment {
    background: url('../img/gold_cup_trophy.png') no-repeat;
    background-size: 100% 100%;
    left: -15px;
}

#crumbs_store_adornment {
    background: url('../img/inventory_bag.png') no-repeat;
    background-size: 100% 100%;
    left: 165px;
    top: 2px;
    transform: rotate(15deg);
}

#bottom_HUD {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 375px;
    z-index: 10;
}

.hidden {
    display: none !important;
}

.first_place,
.second_place,
.third_place {
    font-weight: bold;
    text-shadow: 1px 1px 1px #0a0a0a;
}

.first_place .hs_rank,
.second_place .hs_rank,
.third_place .hs_rank {
    font-size: 18pt !important;
    background: none !important;
    text-shadow: none !important;
}

.first_place {
    color: gold;
}

.second_place {
    color: silver;
}

.third_place {
    color: #cd7f32;
}

#loading_box {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgb(23, 18, 40) url('../img/space.jpg');
    background-repeat: repeat;
    opacity: 0;
}

#you_are_an_ant_loader {
    position: absolute;
    vertical-align: middle;
    line-height: 50px;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 50px;
    margin-left: -100px;
    margin-top: -14px;

    text-align: center;

    background: rgba(0, 0, 0, 0.75);
    font-size: 16pt;
    color: white;
    text-shadow: 1px 1px 1px #0a0a0a;

    border-radius: 10px;
}

#oob_name_input {
    position: absolute;
    display: block;
    width: 250px;
    left: 50%;
    margin-left: -135px;
    text-align: center;
    margin-top: -90px;
    top: 50%;
    background: rgba(0, 0, 0, 0.75);
    padding: 10px;
    padding-top: 15px;
    opacity: 0;

    border-radius: 10px;
    box-shadow: 1px 1px 1px #0a0a0a;
}

#oob_name_input_label {
    font-size: 12pt;
    color: white;
    text-shadow: 1px 1px 1px #0a0a0a;
    margin-bottom: 15px;
}

#oob_name_input input {
    width: 200px;
    height: 30px;
    text-align: center;
    font-size: 10pt;
    font-weight: normal;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
    margin-bottom: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#oob_name_input_button {
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
    padding: 15px;
    margin-top: 0px;
    background: url('../img/short_wooden_button_light_wood.png') no-repeat;
    background-size: 100% 100%;
    color: white;
    text-shadow: 1px 1px 1px #0a0a0a;
}

#oob_name_input_button:active:not([disabled]) {
    position: relative;
    top: 1px;
    left: 1px;
}

#oob_name_input_button:disabled {
    background: url('../img/short_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
}

#oob_name_input_container p {
    font-size: 9pt;
    color: grey;
    display: block;
    margin-bottom: 10px;
}

#control_panel {
    width: 380px;
    height: 439px;
    position: absolute;
    left: 50%;

    /** animated values **/
    top: -266px;

    margin-left: -192px;
    z-index: 50;
    opacity: 0;
    overflow: hidden;
}

#control_panel_container {
    padding: 5px;
}

#controL_panel_menu {
    display: block;
    height: 425px;
    width: 50px;
    margin-bottom: 10px;
    float: left;
    position: relative;
    background: url('../img/panel_medium_wood_large_full_screen.png') no-repeat;
    background-size: 100% 100%;
    padding: 5px;
    padding-bottom: 10px;
    margin-top: -5px;
}

#control_panel_page {
    height: 380px;
    width: 300px;
    float: right;
}

.profile_item button {
    padding: 7px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 5px;
    background: url('../img/short_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    color: white;
    text-shadow: 1px 1px 1px #0a0a0a;
}

#control_panel_page input,
#control_panel_page textarea {
    padding: 12px;
    margin-right: 5px;
    width: 240px;
    margin-bottom: 0px;
    margin-top: 3px;
    border-radius: 5px;
    background: url('../img/inner_panels_horizontal_strip.png') no-repeat;
    background-size: 100% 100%;
    color: white;
}

#login_input_container {
    width: 270px;
}

#bio {
    background: url('../img/panel_medium_wood_large_square.png') no-repeat;
    background-size: 100% 100%;
    padding-bottom: 20px !important;
}

#control_panel_page textarea {
    height: 100px;
    width: 230px;
    resize: none;
    padding-top: 20px;
    margin-top: 0px;
}

.cta {
    margin-top: 0px;
    margin-bottom: 15px;
    border-bottom: 1px solid white;
    text-shadow: 1px 1px 1px purple;
    font-size: 18pt;
}

.discord_login,
.twitter_login {
    background: url('../img/short_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    color: white;
    text-shadow: 1px 1px 1px #0a0a0a;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

#validate_message {
    font-size: 9pt;
    color: white;
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    width: 250px;
}

.validate_error {
    background: white !important;
    color: black !important;
}

.validate_success {
    background: rgb(52, 230, 36) !important;
    color: black !important;
}

.login_input_container {
    text-align: center;
}

.dashed_lines {
    color: white;
    text-align: center;
    margin: 10px 0px;
}

#page_profile .label,
#page_settings .label {
    font-size: 11pt;
    color: white;
    text-shadow: 1px 1px 1px #0a0a0a;
    margin-top: -3px;
    margin-bottom: 3px;
}

#settings_email_label {
    margin-bottom: 5px;
}

#page_profile .profile_item,
#page_settings .settings_item {
    display: block;
    text-align: left;
    background: url('../img/panel_medium_wood_large_full_screen.png') no-repeat;
    background-size: 100% 100%;
    padding: 15px;
    margin-top: 3px;
    padding-bottom: 5px;
    min-height: 70px;
    padding-left: 18px;
}

#profile_save {
    text-align: left;
    margin-bottom: 10px;
}

#profile_nickname_input {
    width: 170px !important;
}

#profile_save_button,
#page_profile button {
    padding: 15px;
    padding-top: 15px;
    margin-right: 5px;
    background: url('../img/long_wooden_button_green.png') no-repeat;
    background-size: 100% 100%;
    color: white;
    text-shadow: 1px 1px 1px #0a0a0a;
    padding-top: 10px;
    margin-top: 5px;
}

#profile_save_button:disabled,
#page_profile button:disabled {
    background: url('../img/long_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
}

#settings_login_button {
    padding: 15px;
    padding-top: 10px;
    margin-right: 5px;
    background: url('../img/long_wooden_button_yellow.png') no-repeat;
    background-size: 100% 100%;
    color: white;
    text-shadow: 1px 1px 1px #0a0a0a;
    width: 100px;
}

#settings_login_button:disabled {
    background: url('../img/long_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
}

#settings_login_button:active:not([disabled]) {
    position: relative;
    top: 1px;
    left: 1px;
}

#settings_login {
}

#settings_login_inputs {
    margin-bottom: 5px;
}

#settings_login_errors {
    color: white;
    text-align: center;
    margin-bottom: 5px;
    float: right;
    width: 200px;
    height: 1.2em;
    margin-top: -1.5em;
    margin-right: 10px;
    font-size: 9pt;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding: 2px 0px;
    margin-bottom: -2em;
}

#settings_login_inputs .valid {
    color: white;
}

#settings_login_inputs .invalid {
    color: white;
}

.login_cta {
    font-size: 10pt;
    text-align: center;
    width: 150px;
    display: inline-block;
    margin-top: 3px;
}

.login_block {
    background: url('../img/space.jpg') no-repeat;
    background-blend-mode: color;
    background-color: rgba(0, 0, 0, 0.5);
    display: block;
    text-align: left;
    position: absolute;
    top: 188px;
    right: 5px;
    width: 300px;
    border-radius: 5px;
    color: white;
    border: 1px solid white;
}

.login_container {
    padding: 15px;
    padding-bottom: 12px;
}

/* Centered "Processing…" shown in the signup box while the validation email
   request is in flight (anime.js fades it in/out; see auth_forms.js). The
   parent .login_block is position:absolute, so this centers within the box. */
.login_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-size: 14pt;
    text-shadow: 1px 1px 1px #0a0a0a;
    opacity: 0;
    pointer-events: none;
}

.login_button,
#settings_password_button,
#settings_logout_button {
    padding: 22px;
    color: white;
    text-shadow: 1px 1px 1px #0a0a0a;
    background: url('../img/short_wooden_button_green.png') no-repeat;
    background-size: 100% 100%;
    margin-left: -5px;
    width: 200px;
    padding-top: 20px;
}

#login_email_input:disabled {
    color: grey;
    text-shadow: 1px 1px 1px white;
}

.login_button {
    padding: 15px;
    padding-bottom: 20px;
}

.login_button:disabled {
    background: url('../img/short_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
}

.login_button:active:not([disabled]),
#settings_password_button:active:not([disabled]),
#settings_logout_button:active:not([disabled]) {
    position: relative;
    top: 1px;
    left: 1px;
}

.login_block input {
    width: 200px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#top_HUD_close_button,
#control_panel_close_button {
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    background: transparent;
    z-index: 200;
}

#control_panel_close_button {
    top: -5px;
    right: -10px;
}

#top_HUD_close_button {
    top: -5px;
    right: -5px;
}

#top_HUD_close_button:active:not([disabled]),
#control_panel_close_button:active:not([disabled]) {
    top: -4px;
    right: -8px;
}

#about_close_button {
    position: sticky;
    top: 148px;
    float: right;
    width: 50px;
    height: 50px;
    text-align: center;
    background: transparent;
    z-index: 200;
    margin-right: -5px;
}

#about_close_button:active:not([disabled]) {
    top: 150px;
    margin-left: -2px;
}

#controL_panel_menu {
    padding-top: 15px;
}

#controL_panel_menu .active {
    background: url('../img/round_wooden_button_light_wood.png') no-repeat;
    background-size: 100% 100%;
}

#ctrl_profile {
    margin-top: 10px;
}

#controL_panel_menu button {
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    width: 50px;
    height: 50px;
    text-align: center;
    margin-bottom: 10px;
    display: block;
}

#controL_panel_menu button:active:not([disabled]) {
    position: relative;
    top: 1px;
    left: 1px;
}

#controL_panel_menu button div {
    display: inline-block;
    width: 30px;
    height: 30px;
}

#ctrl_settings {
    position: absolute;
    bottom: 10px;
}

.profile_icon {
    background: url('../img/favicon.png') no-repeat;
    background-size: 100% 100%;
}

.wallet_icon {
    background: url('../img/cash_stack.png') no-repeat;
    background-size: 100% 100%;
}

.settings_icon {
    background: url('../img/settings_3.png') no-repeat;
    background-size: 100% 100%;
}

.close_button {
    width: 35px;
    height: 35px;
    background: url('../img/cross_icon.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    display: inline-block;
}

#bio_input {
    margin-bottom: 30px;
}

/* ── Touch buttons (Home / Settings / Audio), in the Sugar Rush HUD row ── */

#bl_leaderboard {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    vertical-align: middle;
    pointer-events: auto;
}

#bl_leaderboard button {
    margin-left:2px;
}

#bl_go_home {
    pointer-events: auto;
    display: block;
    width: 38px; /* prevents flex cross-axis stretch */
    height: 38px;
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    font-size: 16px;
    line-height: 38px;
}

#bl_go_home:active:not([disabled]) {
    background: url('../img/round_wooden_button_light_wood.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 1px;
    left: 1px;
}

#bl_settings {
    pointer-events: auto;
    display: block;
    width: 38px;
    height: 38px;
    background: url('../img/round_wooden_button_grey.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 38px;
}

#bl_settings:active:not([disabled]) {
    background: url('../img/round_wooden_button_light_wood.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 1px;
    left: 1px;
}

#bl_settings .settings_icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

#bl_leaderboard #music_player {
    pointer-events: auto;
    position: static; /* cancel the banner's relative top/left offset */
    top: auto;
    left: auto;
    width: 38px;
    height: 38px;
    margin: 0 0 0 0; /* match #bl_settings spacing */
    z-index: auto;
}

@media (max-width: 600px) {
    .billboard {
    }

    #music_player {
    }

    #config_button {
    }

    #config_settings_button {
    }
}

.on_screen_HUD {
    opacity: 0;
}

#about {
    position: absolute;
    left: 50%;
    margin-left: -195px;
    background: rgba(0, 0, 0, 0.75);
    color: black;
    background-size: 100% 100%;
    overflow: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 360px;
    top: -100%;
    height: 100%;
    opacity: 0;
}

.about_container {
    font-size: 10pt;
    margin-top: 152px;
}

.about_container p {
    margin-bottom: 10px;
}

.about_container h3 {
    font-size: 13pt;
    margin-bottom: 10px;
    border-bottom: 1px dashed black;
}

.about_container ul {
    margin-left: -10px;
}

.about_text {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.75);
    padding-bottom: 10px;
}

.about_text {
    margin-bottom: 15px;
}

.about_container .quote {
    font-style: italic;
    font-size: 12pt;
    margin-bottom: 15px;
    border-left: 3px solid black;
    padding-left: 10px;
}

.about_text code {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 9pt;
}

#email_verification_message * {
    touch-action: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

#email_verification_message {
    position: absolute;
    top: 200px;
    left: 50%;
    width: 350px;
    margin-left: -175px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    text-align: center;
    border-radius: 10px;
    z-index: 100;
}

#email_verification_message_container {
    padding: 20px;
    font-size: 11pt;
}

#email_verification_message_container h2 {
    margin-bottom: 0.75em;
    text-decoration: underline;
}

#email_verification_message_container a {
    display: block;
    margin-top: 1em;
}

#email_verification_message_container #password {
    padding: 15px;
    background: rgba(255, 255, 255, 0.5);
    margin: 10px;
}

#email_verification_message_container #login_email_input {
    padding: 10px;
    margin: 20px 10px;
    border: 1px solid white;
    border-radius: 5px;
    width: 250px;
}

#password_reset_message {
    padding: 5px;
    background: rgba(255, 255, 255, 0.75);
    color: black;
    margin-top: 15px;
}

.standalone {
    height: 100%;
    display: block;
    overflow: auto;
}

.standalone #about {
    position: relative;
    top: 0px;
    opacity: 1;
    height: 100%;
}