.title-bar {
    background: #d00;
    color: #fefefe;
    padding: 0.5rem; }
.title-bar::before, .title-bar::after {
    content: ' ';
    display: table; }
.title-bar::after {
    clear: both; }
.title-bar .menu-icon {
    margin-left: 0.25rem;
    margin-right: 0.5rem; }

.button.alert {
    background: #0C147A;
    color: #fff; }

.top-bar {
    padding: 0.5rem; }
.top-bar::before, .top-bar::after {
    content: ' ';
    display: table; }
.top-bar::after {
    clear: both; }
.top-bar, .top-bar ul {
    background: #4856A8;
}
.top-bar input {
    width: 200px;
    margin-right: 1rem; }

@media screen and (min-width: 40em) {
    .top-bar-left {
        float: left; }
    .top-bar-right {
        float: right; } 
}