/* Login Page */
#login { background-color: rgba(0, 0, 64, 0.5); }
/* Controller */
body.controller .main { background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 255, 0.25)); }
/* On Screen Objects */
body.controller #room { background-color: #808080; cursor: pointer; }
.nametag {
    text-align: center;
    width: 100vw;
    transform: translate(-50%, 100px);
    text-shadow: 0 0 5px var(--background), 0 0 5px var(--background), 0 0 5px var(--background), 0 0 5px var(--background), 0 0 5px var(--background);
    opacity: 1;
}
/* Layout */
.body .hlist > [class*="list"] { align-self: flex-start; }
h3 { margin-bottom: 10px; }
p { margin-top: 6.5px; margin-bottom: 6.5px; margin-left: 8px; }
p:not(:last-child) { margin-right: 11px; }
p:not(:first-child) { margin-left: 11px; }
input, select, button { margin: 8px 8px; }
/* Custom Button */
button { background-color: rgba(217, 217, 217, 0.2); }
button:hover, button.active { background-color: var(--o); color: var(--background); }
button:hover .o, button.active .o { color: var(--background); }
/* Custom Input */
input { min-width: 0; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { appearance: none; margin: 0; }
input[type=number] { appearance: textfield; max-width: 128px; }
input, select { background-color: rgba(217, 217, 217, 0.2); color: var(--text); border: 1px solid var(--o); padding: 7px; }
input:focus, select:focus { background-color: rgba(217, 217, 217, 0.5); }
.percent-wrapper::after { 
    content: "%"; 
    position: absolute;
    top: 15px;
    right: 1em;
    pointer-events: none;
}
/* Custom Select */
.settings > .hlist > .vlist { margin-bottom: 32px; }
select { appearance: none; padding-right: 48px; }
option { color: black; }
.select-wrapper::after {
    content: "v";
    position: absolute;
    display: block;
    top: 14px;
    right: 24px;
    color: var(--o);
    pointer-events: none;
    transform: scale(2, 0.75);
}
/* Preview Icon */
.expression { margin: 11px 0; }
.expression p { margin-top: 0; margin-bottom: 0; }
.preview { 
    width: 96px;
    height: 96px;
    margin-right: 12px;
    align-items: center;
}
.preview img { 
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}