.loader {
    background: url("../images/exar-loader.svg") center no-repeat;
    background-size: contain;
    width: 32px;
    height: 32px;
    align-self: center;
}

.placeCenter {
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}


.topBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 5%;
    height: var(--top-bar-height);
}

.topArea {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--neutrals-8);
    box-shadow: 0 12px 16px -8px var(--box-shadow);
}

.list-spacer {
    padding-top: var(--top-bar-with-space);
    padding-bottom: var(--footer-height);
    min-height: 100dvh;
}

.viewPage {
    width: 100%;
    max-width: min(900px, 90dvw);
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-margin-top: var(--top-bar-height);
}

.logo {
    height: 36px;
    aspect-ratio: 4.4769503546;
}

main {
    width: 100%;
}

.content {
    position: relative;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
}