/* Navbar:
    left margin + top border (>= 700px) */
@media (min-width: 700px) {
    .navbar {
        margin-left: .125rem;
        border-top: 2px solid #f2f2f2;
    }
}

/* Navbar with main title:
    full width (>= 400px), offset from sidebar (>= 700px) */
@media (min-width: 400px) {
    .navbar.main-title {
        left: 0;
        right: 0;
    }
}
@media (min-width: 700px) {
    .navbar.main-title {
        left: 18.75rem;
    }
}
@media (min-width: 1200px) {
    .navbar.main-title {
        left: 20rem;
    }
}

/* Navbar with main title:
    vertical space with the first div below */
@media (min-width: 700px) {
    .navbar.u-position-fixed.main-title + div {
        margin-top: 3.875rem;
    }
}
@media (min-width: 1040px) {
    .navbar.u-position-fixed.main-title + div {
        margin-top: 4.375rem;
    }
}

/* Navbar with main title and toolbar:
padding, white background, rounded corners, centered content */
.navbar.main-title .toolbar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background: #fff;
    align-content: center;
    border-radius: 4px;
}
/* Fixed height on desktop */
@media (min-width: 1025px) {
    .navbar.main-title .toolbar {
        height: 4rem;
    }
}

/* Navbar with main title and toolbar:
    center toolbar items (>= 700px) */
@media (min-width: 700px) {
    .navbar.main-title .toolbar-left,
    .navbar.main-title .toolbar-center,
    .navbar.main-title .toolbar-right {
            align-self: center;
    }
}