/* Windows 98 Style Loading Animation */

.spinner {
    margin: 40px auto;
    width: 200px;
    height: 20px;
    text-align: center;
    font-size: 11px;
    position: relative;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 2px;
}

.spinner::before {
    content: 'loading...';
    position: absolute;
    top: -20px;
    left: 0;
    font-family: 'MS Sans Serif', Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #000000;
}

.spinner > div {
    background: #000080;
    height: 100%;
    width: 0%;
    display: block;
    animation: progress-bar 2s linear infinite;
}

.spinner .rect2,
.spinner .rect3,
.spinner .rect4,
.spinner .rect5 {
    display: none;
}

@keyframes progress-bar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

#empty-mailbox {
    text-align: center;
    padding: 40px 20px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #000000 #000000 #ffffff;
    margin: 0;
}

#empty-mailbox::before {
    content: 'Please wait...';
    display: block;
    font-family: 'MS Sans Serif', Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #000000;
    margin-bottom: 20px;
    font-weight: normal;
}