body {
    font-family: 'Mali', sans-serif;
    font-size: 1em;
    background-image: radial-gradient(#71bb8b 20%, transparent 20%),
        radial-gradient(#a5d3a2 20%, transparent 20%);
    background-color: #88c9a1;
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
    margin: 0;
}

h1, h2 {
    margin: 0;
}

h1 {
    margin-top: 0.5em;
}

p {
    font-family: 'Source Sans Pro', sans-serif;
}

table {
    border-collapse: collapse;
}

.visitorHistory>thead>tr>td {
    font-size: 80%;
    border: 1px solid black;
    text-align: center;
}

.visitorHistory>tbody>tr>td {
    padding: 8px;
    border: 1px solid black;
}

.visitorQueue>tbody>tr>td {
    padding: 8px;
}

button {
    font-family: 'Mali', sans-serif;
    font-size: 1em;
    padding: 4px;
    background-color: #055d8d;
    color: white;
    border: 1px solid black;
    cursor: pointer;
    border-radius: 8px;
}

button:hover {
    background-color: #023a58;
}

.btnWarning {
    background-color: #b4440c;
}

.btnWarning:hover {
    background-color: #882d00;
}

.btnSuggest {
    background-color: #2a9201;
}

.btnSuggest:hover {
    background-color: #1b6100;
}

.btnBig {
    font-size: 1.5em;
}

input, select {
    font-size: 1em;
    margin: 0.2em;
}

fieldset {
    margin: 0;
}

legend {
    font-size: 0.4em;
    margin: 0;
    padding: 0;
}

.footer {
    font-family: monospace;
    font-size: 1rem;
    width: 100%;
    text-align: center;
    margin-top: 4em;
    margin-bottom: 2em;
}

#content {
    background-color: #edeceb;
    margin: 1em auto;
    padding: 0 1em;
    border: 1px solid;
    box-shadow: 0 0 20px black;
}

.overlay {
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,0.7);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#alert {
    z-index: 999;
    position: fixed;
    top: .5rem;
    left: 0;
    right: 0;
    max-width: 22em;
    display: none;
    border: 2px solid black;
    padding: 1em;
    margin: auto;
    text-align: center;
    border-radius: 40px;
    background-color: #ebda91;
    font-size: 1.4em;
}

#alertHeader {
    margin-bottom: 0.7em;
}

#alertBody {
    margin: 0 0 0.7em;
    overflow-y: auto;
    max-height: 55vh;
}

#alertBtnLeft {
    float: left;
}

#alertBtnRight {
    float: right;
}

.islandInfo {
    border: 2px solid black;
    margin: 1em;
    border-radius: 40px;
    background-color: #ecffd9;
    font-size: 1.4em;
}

.dodoCode {
    font-family: 'Mali', sans-serif;
    margin: auto;
    padding: 0.1em 1em;
    font-size: 2em;
    border: 3px dashed red;
    width: 50px;
}

.center {
    text-align: center;
}

#visitors td, #queueList td {
    font-size: 1em;
}

#host {
    float: right;
}

#warnPlannedClose {
    display: none;
    font-size: 0.9rem;
    margin-top: 0;
}

.optional>td {
    background-color: #b5b5b5;
    padding: 0.5rem;
}

.estWait {
    font-size: 0.7em;
}

@media (min-width: 768px) {
    #content {
        width: 60%;
    }

    #alert {
        top: auto;
    }
}

/* Spinner from https://tobiasahlin.com/spinkit/ */
.spinner>div{width:10px;height:10px;background-color:#333;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}

/* beta ribbon from https://www.cssportal.com/css-ribbon-generator/ */
.box{position:relative;border:1px solid #bbb;background:#eee}.ribbon{position:absolute;right:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}.ribbon span{font-size:10px;font-weight:700;color:#fff;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:100px;display:block;background:#79a70a;background:linear-gradient(#f70505 0,#8f0808 100%);box-shadow:0 3px 10px -5px #000;position:absolute;top:19px;right:-21px}.ribbon span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #8f0808;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #8f0808}.ribbon span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #8f0808;border-bottom:3px solid transparent;border-top:3px solid #8f0808}

/* animate.css */
:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animated{animation-duration:var(--animate-duration);animation-fill-mode:both}@media print,(prefers-reduced-motion:reduce){.animated{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}.animated[class*=Out]{opacity:0}}@keyframes jackInTheBox{from{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{animation-name:jackInTheBox}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}