/* —————————————————————————————————
    sidebar :: offcanvas
*/

.sidebar_live {
    user-select      : none;
    height           : var(--sidebar_height);

    margin-top       : var(--navbar_height);

    background-color : black;
    padding          : 0;
    margin-left      : 0;
    margin-bottom    : 0;


    background-color :  rgb(40,40,60);

    border           : 3px solid var(--gray_background) !important;    /* !important, para fazer valer isso aqui  */

    transition       : transform 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out;
}


.sidebar_live.gone {  display: none; }



/* —————————————————————————————————
    helper para o body
 */

.sidebar_live_body {
    display         : flex;
    flex-direction  : column;

    padding-top     : 0px;
    margin-top      : 0px;
}


/* —————————————————————————————————
    media queries. ver globals.css
*/

@media screen and (min-width: 1601px)
{
    .sidebar_live           { width        : var(--sidebar_w4) !important; }
    .layout_visible.shifted { margin-right : var(--sidebar_w4) !important; }
}


@media screen and (min-width: 1201px) and (max-width: 1600px)
{
    .sidebar_live           { width        : var(--sidebar_w3) !important; }
    .layout_visible.shifted { margin-right : var(--sidebar_w3) !important; }
}


@media screen and (min-width: 1025px) and (max-width: 1200px)
{
    .sidebar_live           { width        : var(--sidebar_w2) !important; }
    .layout_visible.shifted { margin-right : var(--sidebar_w2) !important; }
}


@media (max-width: 1024px)
{
    .sidebar_live_body      { display : none; }
    /*.sidebar_live_error     { display : flex; }*/


    .sidebar_live           { width        : var(--sidebar_w1) !important; }
    .layout_visible.shifted { margin-right : var(--sidebar_w1) !important; }

}




/*
var(--sidebar_w2)
*/