/* =========================================================
   REWRD — LAYOUT PRINCIPAL
   ========================================================= */

* {
    box-sizing: border-box;
}


/* =========================================================
   ESTRUTURA GERAL
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}


body {
    min-height: 100vh;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width: 232px;

    z-index: 1000;

    overflow-y: auto;
    overflow-x: hidden;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main-content {
    position: relative;

    min-height: 100vh;

    margin-left: 232px;

    width: calc(100% - 232px);

    display: flex;

    flex-direction: column;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    width: 100%;

    flex-shrink: 0;
}


/* =========================================================
   PAGE CONTENT
   ========================================================= */

.page-content {
    width: 100%;

    flex: 1;

    padding: 32px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .sidebar {
        width: 210px;
    }

    .main-content {
        margin-left: 210px;

        width: calc(100% - 210px);
    }

}


@media (max-width: 700px) {

    .sidebar {
        position: relative;

        width: 100%;

        height: auto;

        min-height: auto;
    }

    .main-content {
        margin-left: 0;

        width: 100%;
    }

    .page-content {
        padding: 24px;
    }

}