.c-layout {
    --layout-mode: block;
    --layout-template: auto;
    display: var(--layout-mode);
    grid-template: var(--layout-template);
    grid-auto-flow: column;
    width: 100%;
    height: 100%;
}

.c-layout--singlelayout, .c-layout--singlelayout-1 {
    --layout-mode: grid;
    --layout-template: "header" auto "main" 1fr / 1fr;
}

.c-layout--singlelayout-4 {
    --layout-mode: grid;
    --layout-template: "main" 1fr "footer" auto / 1fr auto;
}

@media (max-width: 640.98px) {
    .c-layout--singlelayout-2 {
        --layout-mode: grid;
        --layout-template: "sidebar-left" auto "main" 1fr / auto 1fr;
    }

    .c-layout--singlelayout-3 {
        --layout-mode: grid;
        --layout-template: "main" 1fr "sidebar-right" auto / 1fr auto;
    }

    .c-layout--duallayout, .c-layout--duallayout-1, .c-layout--duallayout-2 {
        --layout-mode: grid;
        --layout-template: "header" auto "sidebar-left" auto "main" 1fr / auto auto 1fr;
    }

    .c-layout--duallayout-3, .c-layout--duallayout-4 {
        --layout-mode: grid;
        --layout-template: "header" auto "main" 1fr "sidebar-right" auto / auto 1fr auto;
    }

    .c-layout--duallayout-5 {
        --layout-mode: grid;
        --layout-template: "sidebar-left" auto "main" 1fr "sidebar-right" auto / auto 1fr auto;
    }

    .c-layout--duallayout-6 {
        --layout-mode: grid;
        --layout-template: "header" auto "main" 1fr "footer" auto / auto 1fr auto;
    }

    .c-layout--duallayout-7, .c-layout--duallayout-8 {
        --layout-mode: grid;
        --layout-template: "sidebar-left main" 1fr "footer footer" auto / auto 1fr;
    }

    .c-layout--duallayout-9, .c-layout--duallayout-10 {
        --layout-mode: grid;
        --layout-template: "main" 1fr "sidebar-right" auto "footer" auto / 1fr auto auto;
    }

    .c-layout--trilayout, .c-layout--trilayout-1, .c-layout--trilayout-2, .c-layout--trilayout-3, .c-layout--trilayout-4 {
        --layout-mode: grid;
        --layout-template: "header" auto "sidebar-left" auto "main" 1fr "sidebar-right" auto / auto auto 1fr auto;
    }

    .c-layout--trilayout-5, .c-layout--trilayout-6, .c-layout--trilayout-7, .c-layout--trilayout-8 {
        --layout-mode: grid;
        --layout-template: "header" auto "sidebar-left" auto "main" 1fr "footer" auto / auto auto 1fr auto;
    }

    .c-layout--trilayout-9, .c-layout--trilayout-10, .c-layout--trilayout-11, .c-layout--trilayout-12 {
        --layout-mode: grid;
        --layout-template: "header" auto "main" 1fr "sidebar-right" auto "footer" auto / auto 1fr auto auto;
    }

    .c-layout--trilayout-13, .c-layout--trilayout-14, .c-layout--trilayout-15, .c-layout--trilayout-16 {
        --layout-mode: grid;
        --layout-template: "sidebar-left" auto "main" 1fr "sidebar-right" auto "footer" auto / auto 1fr auto auto;
    }

    .c-layout--quadlayout, .c-layout--quadlayout-1, .c-layout--quadlayout-2, .c-layout--quadlayout-3, .c-layout--quadlayout-4, .c-layout--quadlayout-5, .c-layout--quadlayout-6 {
        --layout-mode: grid;
        --layout-template: "header" auto "sidebar-left" auto "main" 1fr "sidebar-right" auto "footer" auto;
    }
}

@media (min-width: 641px) {
    .c-layout--singlelayout-2 {
        --layout-mode: grid;
        --layout-template: "sidebar-left main" 1fr / 1fr;
    }

    .c-layout--singlelayout-3 {
        --layout-mode: grid;
        --layout-template: "main sidebar-right" 1fr / 1fr;
    }

    .c-layout--duallayout-1 {
        --layout-mode: grid;
        --layout-template: "header header" auto "sidebar-left main" 1fr / auto 1fr;
    }

    .c-layout--duallayout-2 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header" auto "sidebar-left main" 1fr / auto 1fr;
    }

    .c-layout--duallayout-4 {
        --layout-mode: grid;
        --layout-template: "header sidebar-right" auto "main sidebar-right" 1fr / auto 1fr;
    }

    .c-layout--duallayout-3 {
        --layout-mode: grid;
        --layout-template: "header header" auto "main sidebar-right" 1fr / auto 1fr;
    }

    .c-layout--duallayout-5 {
        --layout-mode: grid;
        --layout-template: "sidebar-left main sidebar-right" 1fr / auto 1fr auto;
    }

    .c-layout--duallayout-6 {
        --layout-mode: grid;
        --layout-template: "header" auto "main" 1fr "footer" auto / 1fr;
    }

    .c-layout--duallayout-7 {
        --layout-mode: grid;
        --layout-template: "sidebar-left main" 1fr "sidebar-left footer" auto / 1fr auto;
    }

    .c-layout--duallayout-8 {
        --layout-mode: grid;
        --layout-template: "sidebar-left main" 1fr "footer footer" auto / 1fr auto;
    }

    .c-layout--duallayout-9 {
        --layout-mode: grid;
        --layout-template: "main sidebar-right" 1fr "footer sidebar-right" auto / 1fr auto;
    }

    .c-layout--duallayout-10 {
        --layout-mode: grid;
        --layout-template: "main sidebar-right" 1fr "footer footer" auto / 1fr auto;
    }

    .c-layout--trilayout, .c-layout--trilayout-1 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header sidebar-right" auto "sidebar-left main sidebar-right" 1fr / auto 1fr auto;
    }

    .c-layout--trilayout-2 {
        --layout-mode: grid;
        --layout-template: "header header sidebar-right" auto "sidebar-left main sidebar-right" 1fr / auto 1fr auto;
    }

    .c-layout--trilayout-3 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header header" auto "sidebar-left main sidebar-right" 1fr / auto 1fr auto;
    }

    .c-layout--trilayout-4 {
        --layout-mode: grid;
        --layout-template: "header header header" auto "sidebar-left main sidebar-right" 1fr / auto 1fr auto;
    }

    .c-layout--trilayout-5 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header" auto "sidebar-left main" 1fr "footer footer" auto / auto 1fr;
    }

    .c-layout--trilayout-6 {
        --layout-mode: grid;
        --layout-template: "header header" auto "sidebar-left main" 1fr "footer footer" auto / auto 1fr;
    }

    .c-layout--trilayout-7 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header" auto "sidebar-left main" 1fr "sidebar-left footer" auto / auto 1fr;
    }

    .c-layout--trilayout-8 {
        --layout-mode: grid;
        --layout-template: "header header" auto "sidebar-left main" 1fr "sidebar-left footer" auto / auto 1fr;
    }

    .c-layout--trilayout-9 {
        --layout-mode: grid;
        --layout-template: "header sidebar-right" auto "main sidebar-right" 1fr "footer footer" auto / 1fr auto;
    }

    .c-layout--trilayout-10 {
        --layout-mode: grid;
        --layout-template: "header header" auto "main sidebar-right" 1fr "footer footer" auto / 1fr auto;
    }

    .c-layout--trilayout-11 {
        --layout-mode: grid;
        --layout-template: "header sidebar-right" auto "main sidebar-right" 1fr "footer sidebar-right" auto / 1fr auto;
    }

    .c-layout--trilayout-12 {
        --layout-mode: grid;
        --layout-template: "header header" auto "main sidebar-right" 1fr "footer sidebar-right" auto / 1fr auto;
    }

    .c-layout--trilayout-13 {
        --layout-mode: grid;
        --layout-template: "sidebar-left main sidebar-right" 1fr "sidebar-left footer sidebar-right" auto / auto 1fr auto;
    }

    .c-layout--trilayout-14 {
        --layout-mode: grid;
        --layout-template: "sidebar-left main sidebar-right" 1fr "footer footer sidebar-right" auto / auto 1fr auto;
    }

    .c-layout--trilayout-15 {
        --layout-mode: grid;
        --layout-template: "sidebar-left main sidebar-right" 1fr "sidebar-left footer footer" auto / auto 1fr auto;
    }

    .c-layout--trilayout-16 {
        --layout-mode: grid;
        --layout-template: "sidebar-left main sidebar-right" 1fr "footer footer footer" auto / auto 1fr auto;
    }

    .c-layout--quadlayout, .c-layout--quadlayout-1 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header" auto "sidebar-left main" 1fr "sidebar-left sidebar-right" auto "sidebar-left footer sidebar-right" auto / auto 1fr auto auto;
    }

    .c-layout--quadlayout-2 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header" auto "sidebar-left main" 1fr "sidebar-right sidebar-right" auto "footer footer footer" auto / auto 1fr auto auto;
    }

    .c-layout--quadlayout-3 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header" auto "sidebar-left main" 1fr "sidebar-left sidebar-right" auto "sidebar-left footer" auto / auto 1fr auto auto;
    }

    .c-layout--quadlayout-4 {
        --layout-mode: grid;
        --layout-template: "header header" auto "sidebar-left main" 1fr "sidebar-right sidebar-right" auto "footer footer" auto / auto 1fr auto auto;
    }

    .c-layout--quadlayout-5 {
        --layout-mode: grid;
        --layout-template: "header header" auto "sidebar-left main" 1fr "sidebar-left sidebar-right" auto "sidebar-left footer sidebar-right" auto / auto 1fr auto auto;
    }

    .c-layout--quadlayout-6 {
        --layout-mode: grid;
        --layout-template: "header header" auto "sidebar-left main" 1fr "sidebar-right sidebar-right" auto "footer footer" auto / auto 1fr auto auto;
    }
}

@media (min-width: 901px) {
    .c-layout--quadlayout, .c-layout--quadlayout-1 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header sidebar-right" auto "sidebar-left main sidebar-right" 1fr "sidebar-left footer sidebar-right" auto / auto 1fr auto;
    }

    .c-layout--quadlayout-2 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header sidebar-right" auto "sidebar-left main sidebar-right" 1fr "footer footer footer" auto / auto 1fr auto;
    }

    .c-layout--quadlayout-3 {
        --layout-mode: grid;
        --layout-template: "sidebar-left header header" auto "sidebar-left main sidebar-right" 1fr "sidebar-left footer footer" auto / auto 1fr auto;
    }

    .c-layout--quadlayout-4 {
        --layout-mode: grid;
        --layout-template: "header header sidebar-right" auto "sidebar-left main sidebar-right" 1fr "footer footer sidebar-right" auto / auto 1fr auto;
    }

    .c-layout--quadlayout-5 {
        --layout-mode: grid;
        --layout-template: "header header header" auto "sidebar-left main sidebar-right" 1fr "sidebar-left footer sidebar-right" auto / auto 1fr auto;
    }

    .c-layout--quadlayout-6 {
        --layout-mode: grid;
        --layout-template: "header header header" auto "sidebar-left main sidebar-right" 1fr "footer footer footer" auto / auto 1fr auto;
    }
}

.c-header {
    grid-area: header;
}

.c-sidebar__left {
    grid-area: sidebar-left;
    overflow: hidden;
}

.c-sidebar__right {
    grid-area: sidebar-right;
    overflow: hidden;
}

.c-main {
    grid-area: main;
    width: 100%;
    overflow-y: auto;
    --my-color: var(--color-main);
    background-color: var(--my-color);
}

.c-footer {
    grid-area: footer;
    width: 100%;
}

.content {
    padding-top: 1.1rem;
}

.c-header.top-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: fit-content;
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
}

    .c-header.top-row a, .c-header.top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .c-header.top-row a:hover, .c-header.top-row .btn-link:hover {
            text-decoration: underline;
        }

        .c-header.top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.c-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 3.5rem;
    background-color: #f7f7f7;
    border-top: 1px solid #d6d5d5;
}

    .c-footer > p {
        padding-right: 1.5rem;
        margin: 0;
        color: rgba(0, 0, 0, 0.6);
    }

@media (max-width: 640.98px) {
    .c-header {
        /*&.top-row:not(.auth) {
        display: none;
    }*/
    }

        .c-header.top-row.auth {
            justify-content: space-between;
        }

        .c-header.top-row a, .c-header.top-row .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    .c-sidebar {
        width: fit-content;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    .c-header.top-row {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .c-header.top-row.auth a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .c-header.top-row {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}