.page { position: relative; display: flex; flex-direction: column; } main { flex: 1; } .sidebar, .sidebarSmall { background-image: -webkit-linear-gradient(180deg, #052767 20%, #3aa6ff 90%); background-image: linear-gradient(180deg, #052767 20%, #3aa6ff 90%); } .top-row { background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; justify-content: flex-end; height: 3.5rem; display: flex; align-items: center; /*justify-content: space-evenly; display: flex;*/ } .top-row ::deep a, .top-row .btn-link { white-space: nowrap; margin-left: 1.5rem; } .top-row a:first-child { overflow: hidden; text-overflow: ellipsis; } .bottom-row { color: #dedede; background-color: #000000; height: 2rem; align-items: center; } @media (max-width: 640.98px) { .top-row:not(.auth) { display: none; } .top-row.auth { justify-content: space-between; } .top-row a, .top-row .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: 4.5rem; height: 100vh; position: sticky; top: 0; } .top-row { position: sticky; top: 0; z-index: 1; } .top-row, article { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .bottom-row { position: fixed; bottom: 0; z-index: 1; } .main > div { padding-left: 0.5rem !important; padding-right: 0.5rem !important; /*padding-left: 2rem !important; padding-right: 1.5rem !important;*/ } }