.page { position: relative; display: flex; flex-direction: column; } main { flex: 1; } .sidebar, .sidebarSmall { /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 20%, #3aa6ff 90%);*/ background: -webkit-linear-gradient(to bottom, #053787, #00A5FF); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #053787, #00A5FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .top-row { background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; /*justify-content: flex-end;*/ height: 3.5rem; display: flex; align-items: center; } .top-row ::deep a, .top-row ::deep .btn-link { white-space: nowrap; margin-left: 1.5rem; text-decoration: none; } .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { text-decoration: underline; } .top-row ::deep a:first-child { overflow: hidden; text-overflow: ellipsis; } .bottom-row { color: #dedede; background-color: #000000; height: 1.6rem; align-items: center; } @media (max-width: 640.98px) { .top-row { justify-content: space-between; } .top-row ::deep a, .top-row ::deep .btn-link { margin-left: 0; } } @media (min-width: 641px) { .page { flex-direction: row; } .sidebar { width: 13.5rem; height: 100vh; position: sticky; top: 0; } .sidebarSmall { width: 5rem; height: 100vh; position: sticky; top: 0; } .top-row { position: sticky; top: 0; z-index: 1; } .top-row.auth ::deep a:first-child { flex: 1; text-align: right; width: 0; } .top-row, article { padding-left: 2rem !important; padding-right: 1.5rem !important; } } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }