main.grind-page {
    display: flex;
    justify-content: center;
    height: calc(100vh - 64px); /* Subtract header height */
    overflow: hidden;
}
.login-container {
    display: block;
    margin-top: 3rem;
    gap: 5rem;
    text-align: center;
}

.login-container > * {
    padding: 0.5rem;
}

.login-container > h1 {
    padding-bottom: 2rem;
}

.user-suggest > * {
    cursor: pointer;
    margin-bottom: 0.7rem;
}

.grind-page-container-full {
    display: flex;
    width: 100%;
    height: 100%;
}

.grind-page-container-full .page-leaderboard {
    display: flex;
    width: 100%;
    height: 100%;
}

.grind-meta {
    width: 300px;
    flex-shrink: 0;
    height: 100%;
    padding-block: 2rem;
    padding-inline: 4rem;
    overflow-y: auto;
    border-right: 1px solid var(--color-background-hover);
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.grind-meta::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.grind-meta > * {
    margin-top: 0.7rem;
    margin-bottom: 0.7rem;
}

.main-grind-list {
    float: left;
    height: 100%
}

.grind-level-container {
    grid-row: 1;
    grid-column: 2 / span 2;
    overflow-y: auto;
    padding-right: 2rem;
}

.grind-level-container {
    display: flex;
    flex-direction: column;
    padding-block: 2rem;
}

.grind-level-container .level {
    display: grid;
    grid-template-columns: 12rem 1fr;
    grid-auto-rows: max-content;
    border-radius: 1rem;
    overflow: hidden;
    width: 100%;
    background-color: var(--color-background-hover);
    transition: background-color 0.3s ease-out;
}
.grind-level-container .level .video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.grind-level-container .level .meta {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.grind-level-container .level .actions {
    grid-column: 1 / span 2;
    background-color: #1b314f;
    margin: 0;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    order: -1;
}
.grind-level-container .level .actions input {
    border: none;
    border-radius: 0.5rem;
    padding: 0.7rem;
    background-color: #475a7b;
    flex: 1;
    color: white;
    width: 4rem;
}
.grind-level-container .level .actions input::placeholder {
    color: #7487aa;
}
.grind-level-container .results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.grind-level-container .results h1 {
    margin-bottom: 0.5rem;
}
.grind-level-container .results .btn {
    margin-top: 1rem;
}
.grind-level-container .stats-focused {
    height: 120%;
    margin-bottom: 3rem;
}
.toasts-container {
    overflow-y: auto;
    grid-column: 2 / span 2;
    grid-row: 1;
    align-self: start;
    margin-block: 2rem;
    margin-right: 2rem;
}
.toasts {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow-y: auto;
}
.toast {
    display: flex;
    background-color: #d50000;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
}

@media screen and (min-width: 1366px) {
    .grind-level-container-container {
        grid-column: 2;
        padding-right: 0;
    }
    .toasts-container {
        grid-column: 3;
        margin: 0;
        padding-right: 2rem;
        padding-block: 2rem;
        align-self: stretch;
    }
}

.rank-container {
    display: inline-block;
    width: 10%;
    vertical-align: top;
}

.nong-container {
    display: inline-block;
    width: 90%;
    vertical-align: top;
    text-align: right;
    text-wrap: wrap;
}

.extra-stats {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.extra-stats ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
}

.extra-stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 1rem;
}

.extra-stats-container {
    width: 700px;
    display: flex;
    justify-content: right;
    align-items: right;
    float: right;
}
.extra-stats-container > * {
    float: center;
}

.level.completed {
    background-color: rgba(0, 128, 0, 0.579)
}

.rank-container {
    white-space: nowrap;
}

.left-info-box > * {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.left-info-box::last-child {
    margin-bottom: 3rem;
}

.uncompleted-container {
    flex: 0 1 800px; /* This replaces "flex: 1" and sets a max-width of 800px */
    height: 100%;
    overflow-y: auto;
    padding: 2rem;
}

.completed-levels-container > * {
    margin-top: 1.3rem;
}

.grind-actions > button {
    color: white;
}