/* =========================================================
   RESPONSIVE
   ESTRUTURA GERAL DO SITE
========================================================= */


/* =========================================================
   DESKTOP
========================================================= */

@media screen and (min-width: 769px) {


    /* -----------------------------------------------------
       SIDEBAR
    ----------------------------------------------------- */

    .sidebar {

        display: none !important;

    }


    .mobile-menu-button {

        display: none !important;

    }


    .sidebar-overlay {

        display: none !important;

    }


    /* -----------------------------------------------------
       APP
    ----------------------------------------------------- */

    .app-layout {

        display: block !important;

        width: 100% !important;

        min-height: 0 !important;

    }


    .content-area {

        width: 100% !important;

        box-sizing: border-box;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {


    /* -----------------------------------------------------
       SIDEBAR
    ----------------------------------------------------- */

    .sidebar {

        display: block !important;

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        bottom: 0 !important;

        width: 280px !important;

        max-width: 85vw !important;

        height: 100vh !important;

        box-sizing: border-box !important;

        padding: 25px 20px !important;

        margin: 0 !important;

        background: #ffffff !important;

        z-index: 100000 !important;

        overflow-y: auto !important;

        transform:
            translateX(-110%) !important;

        transition:
            transform .25s ease !important;

        box-shadow:
            5px 0 25px rgba(0,0,0,.25) !important;

    }


    /* -----------------------------------------------------
       SIDEBAR ABERTA
    ----------------------------------------------------- */

    body.menu-open .sidebar {

        transform:
            translateX(0) !important;

    }


    /* -----------------------------------------------------
       TÍTULO DO SIDEBAR
    ----------------------------------------------------- */

    .sidebar-title {

        display: block !important;

        font-size: 22px !important;

        font-weight: bold !important;

        color: #e53935 !important;

        margin-bottom: 25px !important;

    }


    /* -----------------------------------------------------
       MENU SIDEBAR
    ----------------------------------------------------- */

    .sidebar-menu {

        display: flex !important;

        flex-direction: column !important;

        gap: 8px !important;

        width: 100% !important;

    }


    .sidebar-menu a {

        display: block !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 13px 12px !important;

        color: #333 !important;

        background: transparent !important;

        text-decoration: none !important;

        border-radius: 8px !important;

    }


    .sidebar-menu a:hover {

        background: #f5f5f5 !important;

        color: #e53935 !important;

    }


    .sidebar-menu hr {

        width: 100% !important;

        border: 0 !important;

        border-top: 1px solid #ddd !important;

        margin: 15px 0 !important;

    }


    /* -----------------------------------------------------
       APP
    ----------------------------------------------------- */

    .app-layout {

        display: block !important;

        width: 100% !important;

        min-height: 0 !important;

    }


    /* -----------------------------------------------------
       CONTEÚDO
    ----------------------------------------------------- */

    .content-area {

        width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;

        padding:
            25px 15px 30px !important;

    }


    .site-content {

        width: 100% !important;

        box-sizing: border-box !important;

    }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media screen and (max-width: 480px) {


    .content-area {

        padding-left: 12px !important;

        padding-right: 12px !important;

    }

}