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

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

    margin-top       : var(--replay_ui_height) !important;

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


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

    border           : 3px solid var(--gray_background) !important;

    transition       : transform 0.5s ease-in-out;
}


.sidebar_replay.gone {  display: none; }


.replay_layout_container {
    min-width       : 400px !important ;
    margin-right    : 0;
    transition      : margin-right 0.5s ease-in-out !important;
}

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

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

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


/**/
.sidebar_replay_title,
.sidebar_replay_asset {

    white-space     : pre;       /* mostrar espaços do children, em vez de ignorar */
    font-weight     : bold;
    font-size       : small;
    color           : white;
}

.sidebar_replay_title {
    margin-right    : 20px;
}


.sidebar_replay_header {
    display         : flex;
    justify-content : center;
    visibility      : visible;

    margin-top      : 15%;
    margin-bottom   : 30px;
}

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

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


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


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


@media (max-width: 1024px)
{
    .sidebar_replay_body                { display : none; }

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