/* offcanvas com opções e informação da licença */
.offcanvas_body {
    background-color: var(--gray_background);
    user-select     : none;

}


.offcanvas_logo {
    display         : block;
    margin-left     : auto;
    margin-right    : auto;
    width           : 40%;
  }


/*  para usar o dmc.Select, tem que colocar um zindex maior que o offcanvas, senão o combox não aparece,
    pois fica atrás do offcanvas. Detalhe, só consegui fazer usando styles inline, com o css daqui,
    não functionou
*/

.offcanvas_input {
    font-family : "Nunito Sans";
    user-select : none;
}



.offcanvas_submit {
    margin-left  : auto;
    margin-right : auto;
    border-radius: 15px;
    width        : 50%
  }



@keyframes offcanvas_in_out {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



.offcanvas_options {
    animation   : offcanvas_in_out 1.0s ease-in 1;
    opacity     : 1;
}


/* radio buttons com nomes dos layouts */
.offcanvas_radio_items {

    display              : grid;

    grid-template-columns: 1fr 1fr;     /* Create 2 equal-width columns */
    gap                  : 10px;        /* Space between grid items */

    justify-content      : center;      /* Center the grid horizontally */
    align-items          : center;      /* Center the grid vertically */



}

/*  div que envolve os radio_buttons, é uma maneira de
    conseguir centralizar os radio items, já que fazer
    diretamente neles, não ficou bom
*/
.offcanvas_radio_items_div {

    width   : max-content;
    margin  : auto;
}



/* perfumaria */
@keyframes draw-border {
    0% {
        border: 0 solid transparent;
    }
    25% {
        border-top      : 1px solid var(--vert_50_border_color);
        border-right    : 0 solid transparent;
        border-bottom   : 0 solid transparent;
        border-left     : 0 solid transparent;
        border-radius   : var(--vert_50_border_radius);
    }
    50% {
        border-top      : 1px solid var(--vert_50_border_color);
        border-right    : 1px solid var(--vert_50_border_color);
        border-bottom   : 0 solid transparent;
        border-left     : 0 solid transparent;
        border-radius   : var(--vert_50_border_radius);
    }
    75% {
        border-top      : 1px solid var(--vert_50_border_color);
        border-right    : 1px solid var(--vert_50_border_color);
        border-bottom   : 1px solid var(--vert_50_border_color);
        border-left     : 0 solid transparent;
        border-radius   : var(--vert_50_border_radius);
    }
    100% {
        border: 1px solid var(--vert_50_border_color);
        border-radius   : var(--vert_50_border_radius);
    }
}


.offcanvas_option_vertical_50 {
    --vert_50_border_color  : rgb(170,170,170);
    --vert_50_border_radius : 10px;

    width           : max-content;
    margin          : auto;
    animation       : draw-border 2s linear forwards;
    padding-bottom  : 15px;
    box-sizing      : border-box;


}