body {
    font-size: 2.5vh;
    color: white;
    background: transparent;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.hide {
    display: none;
}

.dialog {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
}


.dialog .frame {
    display: inline-block;
    background: #222;
    border: 3px solid #888;
    border-top-color: #aaa;
    border-left-color: #aaa;
    filter: drop-shadow(1vh 1vh 0.6vh rgba(0,0,0,0.7));
}

.dialog.active .frame {
    border-top-color: #aaa;
    border-left-color: #aaa;
}

.dialog .frame > header {
    background-color: #46a;
    background: linear-gradient(0deg, #333 0%, #444 100%);
    border-bottom: 3px solid #888;
    color: #ccc;
    text-align: center;
    padding: 10px;
}

.dialog.active .frame > header {
    background: linear-gradient(0deg, #345 0%, #456 100%);
    color: white;
}

.selectDialog button {
    display: block;
    border: 2px solid #555;
    background: transparent;
    margin: 1vh;
    min-width: 30vw;
    font-size: 2.5vh;
    color: white;
    padding: 1vh 4vh 1vh 4vh;
}

.selectDialog button:focus {
    border-color: #48d;
    background: #246;
    outline: none;
}

.dropbox {
    display: inline-block;
    box-sizing: border-box;
    padding-left: 2vh;
    border: 2px solid #ccc;
    color: white;
    background: #444;
    font-size: 2.5vh;
    line-height: 6vh;
}

.dropbox::after {
    display: inline-block;
    box-sizing: border-box;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAiCAQAAACzFZKcAAACDklEQVRIx7XWv2sTcRjH8c9d0iQkcLXWxS66qARB3JRYOvUPqD9Ahw6Cm6hrt4LgpoMg6OagFTuWInRSyaSbteBQjIgVTCnVtmlamh93b4cQkrR3yeVy99z8/by+PM+XhxNJxpmjiE2YZfOH11whKW6xRlT1i5sG33ROMUVTda0a7CojIyIAlU19VFVRVVV5cZkfIQ+4WQ4/yZla0TOVI7n/rp5qWYjjLFIN/f5V3jGKhIhH0CabApeINQCR4h6lUIESd0mhJiBGeMNBaPEHvGWkkdwETLJ8pR5KfJ1lzmN2AiLBdf6GAvzjBolmbgsQwzxhb+D4Mo8ZbqW2AwZjfKA2UHyN94xhuAMiTo7vAzxYmwI54u2ZnYBIcZvtwMA2dxqP0xsQFi/YDxS/z3Osw3lHAYNT5ANMokae083H2Q0QcSZYw+lzc/5morP73oBI84CtvoAt7pN2y3IHhMXLPlZHhVccc0/yAkzO8NnnJGp84uzR7ncHxBCTFH1MwqHIJENeOd6ASDPDTk9ghxn37vcGxCjzVHp0f54T7auhP8Aky5cuS7zOClmv7vsBRIIp1j0m4bDOVGsxBwNEmoceS3yPR9267xcwOMmCyyQqLHQu5qCAiHGB1UNL3KbARWK9T/sBRJJpNtom4bDBNEk/Z/0BIsNs249NiVky/k76BQwsrrHEJpsscRWrd/cb33++YMqU7zTftAAAAABJRU5ErkJggg==);
    background-repeat:  no-repeat;
    background-size: 2vh 1.5vh;
    background-position: center;
    margin: 0 0 0 1vh;
    content: "v";
    width: 3vh;
    font-size: 0;
    height: 4vh;
}

.dropbox:focus {
    border-color: #48d;
    background: #246;
    outline: none;
}

.dropbox:focus::after {
    background-color: linear-gradient(0deg, #345 0%, #456 100%);
    border-color: #48d;
}


.focused{
    border-color: #48d !important;
    background: #246 !important;
    outline: none !important;
}


/* Pop-up Message-Box Styles */
#popups {
    z-index: 9999;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    text-align: center;
}

#popups > div {
    display: block;
    box-sizing: border-box;
    width: fit-content;
    border: 2px solid #48d;
    background-color: #035;
    margin: 20px 0 20px 0;
    filter: drop-shadow(0.8vh 0.8vh 0.5vh rgba(0,0,0,0.7));
    font-weight: bold;
    font-size: 3vh;
    color: #fff;
    padding: 2vh;
    transition: font-size 0.3s ease;
    font-size: 0;
}

#popups > div.on {
    font-size: 3vh;
}

#popups > div.pre {
    text-align: left;
    white-space: pre;
}

#popups > div.warning::before, #popups > div.error::before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 4vh;
    height: 4vh;
    background-size: contain;
    margin-right: 1vh;
}

#popups > div.warning::before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAChUlEQVRoge2YT2sTQRjGf9Nmd6NFIlHx4EUQPbR48AOIVtFDUD9Bj6LFPwj2JngRBMFiBC9+Bc+CJ8GmQu9SAoIEL7UgDShEoWnavF7aZLvN7szszlbB/Z2WzOy8z5tn5mESKCgoKCj4n1F5LSwLwRUUrwHoq9tqev19HnVyaUCWqNIrfwGpbn/0k75/Wk132q5rjbleEIBe8DQkHuAw4xtP8ijl3AFZ9CcR9QkoRYa2QM6pCxvLLuu5d0BUnb3iAcZBvXRdzmkD0ghuAFcTplySheC6y5rOtpA08WkHy8AZTcUWv7pTqkbXRV13DrSD++jEAwinOBjcdVXWiQMjYlOHs1h148De2NThLFYzOxAXmw/mp/jR8QA4UulRf9iMvuokVrM7EBObXqk/ePa9fnQYHMVqpgaSYtP3ZPAcbiZC5lhN3YA08YHncePhbz3czAgFdXlHkFZHegc0semVhqL9eAcyx2qqBmSJKqhHSXN2O5DQAIDisXw4dDSNlnQOGMRmWLSnayBDrFo3IIv+JHBTNy+8bfxSwhkYLMwtafhnbfXYOxB/29yF8RkYkipWrRowuG0OsDoDQ6xj1bgBXWxGsTwDYUVWsWrugOltc5uwaM/kDOxgGatGd6EUt82sGN9WzRywv21mxThWtQ4k/EhP5Ntambcfj6OAa+e/c+LYus3rYHhb1YsyjM0or96cZHWtDMDX1QM8u/fZdomdWL2cNClxC9nEZpTOb2/ksyXaWI1twDY2o8zUVqhMbFKZ2GSmtpJ2GW2sxp4BaQRzwHz6yg4R5tTF7otRQ0lb6E5OcuwZi9eSz3+j+0h8A8IsitY+ahmNosWWmv3bMgoKCgoK/k3+AILkzValVvu5AAAAAElFTkSuQmCC);
}

#popups > div.error::before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAACxklEQVRoge2ZQWsTQRiG38lOTEpaEI8igkehJ03TRoiFJgcDan+CB/VQqIZWqVVRqJSi0uagEAVPnkQ8KETBgwmIgpjon5DQo7aSQNYk+3mwRNdkdrOzMw3KPsf9dpL3YSYz326AgICAgGHC3G5oZCZnyaIFMMQBxHYhEwA0AKoyQj5WrhadbnQUqGcSt0G4ojabNwhYGytVrovqQoFGZnKWiF7oieUNBpyKlSov+9VCokFk0YK+SN4gYFFUEwowhqN64kgRFxXEMwCM6skixZioIBT4V/AvwDnAXHdjbfgT4GFEc9cQOX/RswRPToMnp319PQBw+ZFhRHNXYUwc614yH90DiNyHTqUQmV/6Jc052u9K0jGkZyBydt4Wns9ksefMnOtM8KkUIheWAcMAQiFE5i6Bp9KyMeQFWsVnoK2vtmvhE6cdl5Mt/J8MMGsipAWszRqat5Z6JPhMtq9E3/CWBbOwjvb7smwMfz/iQSV0hQcUbKNuEjx5XFt4wKGZq6cTnhZmaP8BRG/eBdu7z14gsi8nyfCjpUrfrMpOYtFMqAjvhNJWoivRqPcWiWAWNpSGBzT0QqGDh8BGRnoLjME4PK687VAq0N1tQkb/ejqLyDnvbYcTygREWyU1Gvb7FEsoEXDa55s3cr1brEIJ3wJuh5TwnFAk4Utg0BNWp4S0gNf2wNqsobm6DNresn9OeqeLlURawIgn7eE7HZj37zju81btC5orl3tmgra/ycaQFzAL678fRCwL5oMNtD+8dR3393L68fQxWs+fyMbw8URmWTAf5gHG0Pn8caDw3aE7y8kYP4LWa3/vzpQ1c7rR3swNi/9XgAF9Wsqh8V1UcHi1SJ/0ZJFCmEU8A4S8nizeYUycRSgQK1eLBKzpiTQ4RGw19qbySlR3/4spnThJwCIDJnbrjTUD6gRUGEPeKXxAQEDA8PkJgI88lTbzutkAAAAASUVORK5CYII=);
}