body {
    margin: 0;
    padding: 8px;
    background-color: #008080;
    font-family: "MS Sans Serif", Arial, sans-serif;
    font-size: 11px;
}

@keyframes pnlGlow {
    0% {
        box-shadow: 0 0 10px rgba(255,255,0,0.5);
        background: #FFFF00;
    }
    100% {
        box-shadow: 0 0 20px rgba(255,255,0,0.8), 0 0 30px rgba(255,255,0,0.6);
        background: #FFFF44;
    }
}

input, select, textarea, button {
    font-family: "MS Sans Serif", Arial, sans-serif;
    font-size: 11px;
    border: 1px solid #000;
}

input[type="text"], textarea {
    background: #FFFFFF;
    border: 1px inset #808080;
    padding: 2px;
}

select {
    background: #FFFFFF;
    border: 1px inset #808080;
}

textarea {
    resize: none;
}

.button {
    background: #C0C0C0;
    border-width: 2px;
    border-style: outset;
    border-color: #FFFFFF #808080 #808080 #FFFFFF;
    padding: 2px 8px;
    font-weight: bold;
    cursor: pointer;
}

.button:active {
    border-style: inset;
    border-color: #808080 #FFFFFF #FFFFFF #808080;
    padding: 3px 7px 1px 9px;
}

#bodyCanvas {
    background: #FFFFFF;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    touch-action: none;
}

#complaintsContainer {
    font-size: 10px;
    scrollbar-width: 16px;
}

#complaintsContainer::-webkit-scrollbar {
    width: 16px;
}

#complaintsContainer::-webkit-scrollbar-track {
    background: #C0C0C0;
}

#complaintsContainer::-webkit-scrollbar-thumb {
    background: #808080;
    border: 1px outset #C0C0C0;
}

.complaint-entry {
    margin-bottom: 4px;
    padding: 2px;
    border-bottom: 1px dotted #808080;
}

.red-x {
    color: #FF0000;
    font-weight: bold;
    font-size: 14px;
}

@media screen and (max-width: 650px) {
    body {
        padding: 0;
    }
    
    table[width="640"] {
        width: 100% !important;
    }
    
    td[width="50%"] {
        display: block;
        width: 100% !important;
    }
}