/*
Theme Name: Mafondana
Text Domain: mafondana.com
Version: 1.0
Description: Site de Gestão de Restaurantes
Author: Grupo Macedo Afonso
Author URI: https://victormacedo.com.br/
Theme URI: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
*/

:root {
    --base-gray-color-1:#F4F4F4;
    --base-gray-color-2:#EFEFEF;
    --base-gray-color-3:#D6D6D6;
    --base-gray-color-4:#B7B7B7;
    --base-gray-color-5:#7f7f7f;

    --light-color:#FFE7E1;
    --first-color:#F6BA97;
    --second-color:#F29A9A;
    --third-color:#511009;

    --first-details-color:#46952B;
    --second-details-color:#004619;
    --third-details-color:#002604;

    --text-color:#002604;
    --error:#cf2e2e;

    --gold:#A19276;
}

/* Reset básico para zerar estilos padrão dos navegadores */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1.5rem;
}


ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Ordem recomendada */
a, a:link, a:visited, a:hover, a:focus, a:active{ color: var(--text-color); text-decoration: none;}

h1, h2, h3, h4, h5, h6{color: var(--gold) !important;}

h1{font-size: 180%}
h2{font-size: 150%}
h3{font-size: 120%}
h4{font-size: 100%}
h5{font-size: 80%}
h6{font-size: 70%}

/* styles.css */

/* Estilos globais */


body {
    font-family: 'Segoe UI';
    background-color: var(--base-gray-color-1);
    color: var(--text-color);
}
body *{
    font-family: 'Segoe UI';
    font-size: 16px;
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Typold Extended';
    margin: 30px 0;
    line-height: 35px;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child{
    margin: 0 0 30px;
}
ul{margin-left: 20px}
li{list-style: none;}
ul li:before {
  content: '\2022';
  margin: 0 10px;
  color: var(--first-color);
}
hr {
  border: none; /* remove a borda padrão */
  height: 2px; /* define a altura da linha */
  background-color: var(--base-gray-color-3); /* cor da linha */
  width: 100%; /* largura da linha */
  margin: 50px 0;
}
input, select, textarea, button, .button,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], 
input[type="search"], input[type="tel"], input[type="url"], input[type="date"], 
input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], 
input[type="checkbox"], input[type="radio"], input[type="file"], input[type="range"], input[type="color"],
input:hover, select:hover, textarea:hover, button:hover,
input:focus, select:focus, textarea:focus, button:focus,
input:active, select:active, textarea:active, button:active{
    padding: 7px 15px;
    border: 2px solid var(--base-gray-color-4);
    border-radius: 7px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    line-height: 1.5;
    font-size: 16px;
    outline: none;

}
input:disabled, select:disabled, textarea:disabled, button:disabled{
    padding: 7px 15px;
    border: 2px solid var(--base-gray-color-3);
    border-radius: 7px;
    background-color: var(--base-gray-color-1);
    box-sizing: border-box;
    line-height: 1.5;
    font-size: 16px;
    font-style: italic;
    color: var(--base-gray-color-4);
    cursor: auto !important;
}
.button{display: inline-block;}
._formError, ._formError:hover, ._formError:focus, ._formError:active, ._formError:disabled{
    border: 2px solid var(--error) !important;
}
.smaller_button, .smaller_button:hover, .smaller_button:focus, .smaller_button:active, .smaller_button:disabled{
    padding: 2px 7px;
}
.inline, .smaller_button:hover, .inline:focus, .inline:hover, .inline:active, .inline:disabled{
    display: inline-block;
}

._formError path{
    fill:var(--error) !important;
}
._formErrorP, ._formErrorP a, ._formErrorP a:hover,._formErrorP a:focus,._formErrorP a:active,._formErrorP a:disabled{
    color: var(--error);
}

input, select, textarea, button, label,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], 
input[type="search"], input[type="tel"], input[type="url"], input[type="date"], 
input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], 
input[type="file"], input[type="range"], input[type="color"],
input:hover, select:hover, textarea:hover, button:hover,
input:focus, select:focus, textarea:focus, button:focus,
input:active, select:active, textarea:active, button:active,
input:disabled, select:disabled, textarea:disabled, button:disabled {
   display: grid; 
}
input[type="checkbox"], input[type="radio"], label.radio_check{
   display: flex;    
}
.radio_check input{
    width: 20px;
}

span.span_pass, span.span_seach{
    display: grid;
    position: relative;
}


.loader-box {
  display: none;
  width: 100%;
  background-color: var(--base-gray-color-3);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.shine {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  filter: blur(3px);
  animation: shine 1.2s infinite;
}


@keyframes shine {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

#set_container{
    opacity: 0;
}

#content_full_extra_info, #background_full_extra_info{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    z-index: 9999;
}
#background_full_extra_info{
   background-color: rgba(255,255,255,0.8);
   display: flex;
}
.box_extra_info{
    width: calc(100% - 100px);
    padding: 20px;
    border-radius: 7px;
    box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 50px 100px -20px rgba(0, 0, 0, 0.25), 0px 30px 60px -30px rgba(0, 0, 0, 0.3);
    background-color: var(--base-gray-color-2);
    z-index: 99999;
}
.box_extra_info.center{
    text-align: center;
}
.yes_not_bt{
    margin: 10px;
}
.wait_box{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.8);
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
    #box_content_wait{
        width: 200px;
        text-align: center;

    }
    figure.figure_wait_box{
       width: 50px;
       margin: 0 auto;
    }
    .figure_wait_box{
        fill: var(--first-details-color);
    }
    #box_content_wait p{
        font-family: 'Typold Extended';
        margin: 10px 0;
        line-height: 35px;
        font-size: 150%;
        font-weight: 600;
    }


.mandatory{
    margin: 0 0 0 10px;
    font-size: 80%;
    font-style: italic;
    vertical-align: top;
    color: var(--base-gray-color-5);
}

/*Info Notificações*/
@keyframes info_appears{
  0% {
    top: 30px;
    opacity: 0;
    display: none;
  }
  100% {
    top: 40px;
    opacity: 1;
    display: block;
  }
}

/*Desaparecer Info*/
@keyframes disappear_info{
  0% {
    top: 40px;
    opacity: 1;
    display: block;
  }
  100% {
    top: 30px;
    opacity: 0;
    display: none;
  }
}



.info{
    margin:0 0 0 3px;
    display: inline-block;
    position: absolute;
    z-index: 99;
}
.i{    
    font-size: 60%;
    font-style: italic;
    font-weight: bold;
    vertical-align: top;
    color: var(--base-gray-color-1);
    background-color: var(--base-gray-color-4);
    padding: 0.5px 5px;
    border-radius: 100%;
    cursor: pointer;
}
.i.clean{
    color: var(--base-gray-color-4);
    background-color: var(--base-gray-color-1);
}
.info_text{
    width: 200px;
    position: absolute;
    padding: 10px;
    background-color: white;
    border-radius: 7px;
    border: 2px solid var(--base-gray-color-3);
    display: flex;
}

.info_text figure.arrow-info_text{
    width: 35px;
    position: absolute;
    top: -16px;
}
.info_text p{
    font-size: 80%;
    margin-bottom: 10px;
    text-align: left;
}
.info_text p:last-child{
    margin-bottom: 0;
}
.info_text strong{
    font-size: 110%;
    font-weight: 600;
}

.info_text.dir.top{
    left: -20px;
    top: 40px;
}
    .info_text.dir.top figure.arrow-info_text{
        left: 0;
        margin-left: 10px;
    }
.info_text.mid.top{
    left: -100px;
    top: 40px;
}
    .info_text.mid.top figure.arrow-info_text{
        left: -17.5px;
        margin-left: 50%;
    }
.info_text.esq.top{
    right: -20px;
    top: 40px;
}
    .info_text.esq.top figure.arrow-info_text{
        right: 0;
        margin-right: 10px;
    }


.info.open .info_text{
        animation: info_appears 0.5s ease-in-out forwards;
    }
    .info .info_text{
        animation: disappear_info 0.5s ease-in-out forwards;
    }
    .info.info_close .info_text{
        top: 30px;
        opacity: 0;
        display: none;
    }




#rulers_alert, #rulers_alert_edit{
    color: var(--error);
    font-style: italic;
    margin-top: 20px;    
    background-image: url("https://mafondana.com/wp-content/themes/mafondana/img/atention-red.svg");
    background-size: 20px 20px;
    background-repeat: no-repeat;    
    display: none;
}
#rulers_alert *, #rulers_alert_edit *{
    color: var(--error);
    font-style: italic;
}
#rulers_alert a, #rulers_alert a:hover, #rulers_alert a:focus, #rulers_alert a:active, #rulers_alert a:disabled,
#rulers_alert_edit a, #rulers_alert_edit a:hover, #rulers_alert_edit a:focus, #rulers_alert_edit a:active, #rulers_alert_edit a:disabled {
    text-decoration: underline;
}
#rulers_alert.justify-center, 
#rulers_alert_edit.justify-center {
    padding-top: 20px;
    text-align: center;
    background-position: center top;
}

#rulers_alert.right,
#rulers_alert_edit.right{
    padding-right: 30px;
    text-align: right;
    background-position: right center;
}

#rulers_alert.left,
#rulers_alert_edit.left{
    padding-left: 30px;
    text-align: left;
    background-position: left center;
}

.show_pass, .show_pass:hover, .show_pass:focus, .show_pass:active, .show_pass:disabled{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    border-radius: 0 7px 7px 0;
    padding: 0;
    background-color: var(--base-gray-color-2); 
    margin: 0 !important; 
}
.show_pass figure, .show_pass:hover figure, .show_pass:focus figure, .show_pass:active figure, .show_pass:disabled figure{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -15px !important;
}

.show_pass figure .show_pass, .show_pass:hover figure .show_pass, .show_pass:focus figure .show_pass, .show_pass:active figure .show_pass, .show_pass:disabled figure .show_pass{
    fill:var(--base-gray-color-4); 
}

.show_pass[data-ref="close"] figure.close{
    display: block;
}
.show_pass[data-ref="open"] figure.open{
    display: block;
}
.show_pass[data-ref="close"] figure.open{
    display: none;
}
.show_pass[data-ref="open"] figure.close{
    display: none;
}


.button_seach, .button_seach:hover, .button_seach:focus, .button_seach:active, .button_seach:disabled{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
    border-radius: 0 7px 7px 0;
    padding: 0;
    background-color: var(--base-gray-color-2); 
    margin: 0 !important; 
}
.button_seach figure, .button_seach:hover figure, .button_seach:focus figure, .button_seach:active figure, .button_seach:disabled figure{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -15px !important;
}

.button_seach figure .button_seach, .button_seach:hover figure .button_seach, .button_seach:focus figure .button_seach, .button_seach:active figure .button_seach, .button_seach:disabled figure .button_seach{
    fill:var(--base-gray-color-4); 
}

#terms_and_policies{
    display: flex;
    margin-right: 5px;
    align-items: baseline;
}
#terms_and_policies a{
    text-decoration: underline;
}

button, input[type="button"], input[type="submit"], input[type="reset"], .button,
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .button:hover,
button:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, .button:focus,
button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, .button:active,
button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, .button:disabled {
  cursor: pointer;
}

#langChoice{
    margin: 20px 0;
    text-align: center;
}
#languageChoice{
    display: inline-block;
}

.btIn, a.btIn{
  border: 2px solid var(--second-details-color);
  background-color: var(--first-details-color);
  color: var(--base-gray-color-1);
  border-radius: 7px;    
}

.btIn:hover, .btIn:focus, .btIn:active, .btIn:disabled, a.btIn:hover, a.btIn:focus, a.btIn:active, a.btIn:disabled{
  border: 2px solid var(--third-details-color);
  background-color: var(--second-details-color);
  color: var(--base-gray-color-1);
  border-radius: 7px;    
}
.close_nav_maf, .close_nav_maf:hover, .close_nav_maf:focus, .close_nav_maf:active, .close_nav_maf:disabled{
    border: 2px solid var(--base-gray-color-3);
    background-color: var(--base-gray-color-1);
    color: var(--base-gray-color-1);
    border-radius: 7px;   
}
button.disabled, button.disabled:hover, button.disabled:focus, button.disabled:active, button.disabled:disabled{
    border: 2px solid var(--base-gray-color-3) !important;
    background-color: var(--base-gray-color-2) !important;
    color: var(--base-gray-color-4) !important;
    border-radius: 7px;
    cursor: auto;   
}

body#home {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;    
}
body#home header{
    background: rgba(0, 0, 0, 0);
    background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    height: 100px;
    z-index: 11;
    position: relative;
}
body#home footer{
    position: absolute;
    width: 100%;
    height: 120px;
    left: 0;
    bottom: 0;
    text-align: center;
}

nav#menu_mafondana.desktop{
    width: 100%;
    text-align: right;
    padding: 30px 0;
    display: block;
}
nav#menu_mafondana.desktop ul{
    display: inline-block;
    margin: 0;
}
nav#menu_mafondana.desktop ul a{
    margin-right: 50px;
    color: #FFFFFF;
}

nav#menu_mafondana.mobile{
    position: fixed;
    width: 90%;
    height: 100%;
    max-width: 400px;
    top: 0;
    right: -100%;
    background-color: white;
    text-align: center;
    padding: 80px 0;
    z-index: 11;
    box-shadow: rgba(0, 0, 0, 0.25) -50px 0px 60px;

}
nav#menu_mafondana.mobile ul{
    margin: 0;
    border-bottom: 2px solid var(--base-gray-color-1);
}
nav#menu_mafondana.mobile ul a{
    display: grid;
    padding: 20px 0;
}
.open_nav_maf, .open_nav_maf:hover, .open_nav_maf:focus, .open_nav_maf:active, .open_nav_maf:disabled{
    position: absolute;
    top: 20px;
    right: 30px;
    padding: 0;
}
.open_nav_maf{
    display: none;
}
.close_nav_maf, .close_nav_maf:hover, .close_nav_maf:focus, .close_nav_maf:active, .close_nav_maf:disabled{
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
}
.close_nav_maf figure, .open_nav_maf figure{
    width: 30px;
    height: 30px;
    margin: 5px 5px;
}
.close_nav_maf figure .button_nav, .open_nav_maf figure .button_nav{
    fill: var(--base-gray-color-4);
}
#forca_pass{
    margin: 10px 0;
}
.barr_pass{
    display: grid;
    background-color: var(--base-gray-color-3);
    height: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.nivel_pass{
    display: block;
    width: 0;
    height: 50px;
    background-color: red;
    margin-top: -25px;
}
.status_pass{
    font-size: 80%;
    font-style: italic;
}

/*Home*/

body#home main#container{
    position: fixed;
    width: 100%;
    height: calc(100% - 250px);
    top: 100px;
    left: 0;
    display: flex;
    justify-content: center; /* centra na horizontal */
    align-items: center;     /* centra na vertical */
    z-index: 10;
}
body#home .background_maf{
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    z-index: 9;
    background-image: url("https://mafondana.com/wp-content/themes/mafondana/img/background-home.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-position: 50% 50%;
}
.maf_loguin{
    margin: -20px 30px 0 30px;
    max-width: 400px;
    width: 100%;
    padding: 20px;
    border-radius: 7px;
    box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 50px 100px -20px rgba(0, 0, 0, 0.25), 0px 30px 60px -30px rgba(0, 0, 0, 0.3);
    background-color: var(--base-gray-color-2);
}
figure.logoMaf{
    width: calc(100% - 50px);
    max-width: 250px;
    margin: 0 auto 30px;
}
.logoMaf{
    fill:var(--second-details-color);
}
figure.logoMaf figcaption{
    text-align: center;
    font-family: 'Typold Extended';
    color:var(--second-details-color);
    font-size: 15px;
    margin-top: -5px;
    display: block;
}


#loguin_mafondana{
    display: grid;
}
#loguin_mafondana label, #loguin_mafondana button{
    margin:5px 0px 10px;
}
#loguin_mafondana p{
    margin: 0 0 5px 5px;
}
.makeCount{
    color: var(--second-details-color);
    display: grid;
    margin: 20px 0 10px;
}
.makeCount:hover{
    text-decoration: underline;
}

#sys_main_content h1{
    font-size: 150%;
}

#sys_main_content h2{
    font-size: 130%;
}

#sys_main_content h3{
    font-size: 100%;
}

#sys_main_content h4{
    font-size: 90%;
}

#sys_main_content h5{
    font-size: 80%;
}

#sys_main_content h6{
    font-size: 70%;
}




/*Create your account*/
body.create-account header h1{
    display: none;
}
body.create-account header{
    position: fixed;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("https://mafondana.com/wp-content/themes/mafondana/img/chef-with-tablet-thumb.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-position: 50% 50%;
}
body.create-account.confirmed-email header{
    background-image: url("https://mafondana.com/wp-content/themes/mafondana/img/mulher-sorridente-de-tiro-medio-com-tablet-thumb.jpg");
}
body.create-account.complaint-email header{
    background-image: url("https://mafondana.com/wp-content/themes/mafondana/img/vista-frontal-cozinheiro-masculino-cortando-aipo-na-mesa-escura-salada-dieta-refeicao-foto-colorida-saude-alimentar-thumb.jpg");
}
body.create-account.resend-email header{
    background-image: url("https://mafondana.com/wp-content/themes/mafondana/img/medium-shot-man-with-laptop-thumb.jpg");
}
body.create-account footer{
    position: fixed;
    height: 50px;
    padding:20px;
    width: calc(50% - 40px);
    right: 0;
    bottom: 0;
    background-color: var(--base-gray-color-1);
    display: flex;
    align-items: center;
    justify-content: space-around;
}
body.create-account main.main-content{
    position: fixed;
    overflow-y: scroll;
    width: calc(50% - 40px);
    height: 100%;
    padding:0 20px;
    top: 0;
    right: 0;
}
body.create-account main.main-content form{
    margin-bottom: 150px;
    width: 100%;
    max-width: 450px;
}
body.create-account main.main-content form label{
    margin: 20px 0 0;
}
#label_tel_cod{
    display: block;
}
#div_cod_tel{
    display: flex;
    justify-content: space-between;
}
.col_tel{
    display: inline-block;
    width: 180px;
}
.telephone{
    display: inline-block;
    width: calc(100% - 190px);
}

body.create-account main.main-content figure.logo_create_account{
    width: 250px;
    margin: 30px 0 30px;
}
.logo_create_account{
    fill:var(--second-details-color);
}
figure.logo_create_account figcaption{
    text-align: center;
    font-family: 'Typold Extended';
    color:var(--second-details-color);
    font-size: 15px;
    margin-top: -5px;
}
body.create-account main.main-content form h1, body.create-account.confirmed-email main.main-content h1, body.create-account.complaint-email main.main-content h1, body.create-account.resend-email main.main-content h1{
    font-size: 1.5rem;
    font-weight: 500;
    text-align: left;
}
body.create-account.confirmed-email main.main-content p, body.create-account.complaint-email main.main-content p, body.create-account.resend-email main.main-content p, p.login{
    text-align: left;
}

.login{
    font-style: italic;
}
.login a:hover{
    text-decoration: underline;
}

#same_pass{
    font-style: italic;
}
#same_pass.true{color: green;}
#same_pass.false{color: var(--error);}

.btCadastrar{
    width: 100%;
    margin: 30px 0;
}
#perfil_person{
    display: flex;
    margin-top: 20px;
}
#type_tax{
    display: flex;
    align-items: center;
    margin: 0 10px 0 0;
}
#type_tax figure.type_tax{
    height: 30px;
    display: flex;
    width: 150px;
}
#type_tax figure.type_tax .type_tax{
    fill: var(--base-gray-color-4);
}
#type_tax figure.type_tax figcaption{
    align-items: center;
    display: flex;
    color: var(--base-gray-color-4);
    font-style: italic;
}

#type_tax.true figure.type_tax .type_tax, #type_tax.true figure.type_tax figcaption{
    fill: var(--second-details-color);
    color: var(--second-details-color);
}

.text_error{
    color: var(--error);
}


/*System*/
body.system{
    background-color: var(--base-gray-color-3);
}

.div-container{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 315px);
    padding: 20px 20px 20px 35px;
    z-index: 8;
}

aside.dashboard_system{
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100%;
    background-color: var(--base-gray-color-1);
    padding:0 20px;
    z-index: 9;
}
aside.dashboard_system div.logoSysMaf{
    background-color: var(--base-gray-color-1);
}
aside.dashboard_system figure.logoSysMaf{
    max-width: 100%;
    padding: 20px 0;
    margin: 0 auto;
}
aside.dashboard_system figure.logoSysMaf.desktop{
    display: block;
}

aside.dashboard_system figure.logoSysMaf.mobile{
    display: none;
}

aside.dashboard_system .logoSysMaf{
    fill: var(--second-details-color);
}


#sytem_nav{
    top: 0;
    position: relative;
    height: calc(100% - 90px);
    overflow-y: scroll; /* ou auto */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE e Edge antigos */
}

#sytem_nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari e Opera */
}

#sytem_nav ul{
    display: block;
    margin: 0;
}

#sytem_nav ul a{
    padding: 20px 0;
    display: block;
    display: flex;
    justify-content: left;
    align-items: center;
}
#sytem_nav ul a span{
    font-family: 'Typold Extended';
}

#sytem_nav ul a figure.icon_nav{
    width: 40px;
    height: 40px;
    margin-right: 5px;
}
#sytem_nav ul a:hover .icon_nav, #sytem_nav ul.active a .icon_nav{
    fill: var(--first-details-color);
}
#sytem_nav ul a:hover span, #sytem_nav ul.active a span{
    color: var(--first-details-color);
}
#sytem_nav ul a span{
    display: inline-block;
}

#sytem_nav ul li{
    display: none;
    text-decoration: none;
    padding-left: 35px;
    background-image: url("https://mafondana.com/wp-content/themes/mafondana/img/sub-menu.svg");
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 30px 44px;

}
#sytem_nav ul.active li{
    display: block;
}
aside.dashboard_system.collected #sytem_nav ul li{
    display: none;
}
#sytem_nav ul li a{
    padding: 10px 0;
}
#sytem_nav ul li:before{
    content: none;
}


/*Botão de Recolher*/
aside.dashboard_system #col_exp_dash{
    display: block;
    position: absolute;
    border: none;
    border-radius: 0 7px 7px 0;
    width: 25px;
    height: 40px;
    padding: 0;
    top: 20px;
    right: -25px;
    background-color: var(--base-gray-color-1);
}
aside.dashboard_system #col_exp_dash figure.aside_dash{
    width: 20px;
    margin: 2.5px 2px;
}
aside.dashboard_system #col_exp_dash .aside_dash{
    fill: var(--base-gray-color-4);
}


    /*Sistema aside recolhido*/
    @keyframes aside_collected {
      0% {
        width: 220px;
      }
      100% {
        width: 35px;
      }
    }

    @keyframes dash_collected {
      0% {
        width: calc(100% - 315px);
      }
      100% {
        width: calc(100% - 130px); 
      }
    }


    /*Sistema aside expandido*/
    @keyframes aside_expanded {
      0% {
        width: 35px;
      }
      100% {
        width: 220px;
      }
    }

    @keyframes dash_expanded {
      0% {
        width: calc(100% - 130px);
      }
      100% {
        width: calc(100% - 315px);
      }
    }

/*Recolhe*/

.div-container.collected{
   animation: dash_collected 0.2s ease-in-out forwards;
}

aside.dashboard_system.collected{
    animation: aside_collected 0.2s ease-in-out forwards;
}
    aside.dashboard_system.collected figure.logoSysMaf.desktop{
        display: none;
    }

    aside.dashboard_system.collected figure.logoSysMaf.mobile{
        display: block;
    }

    aside.dashboard_system.collected #sytem_nav ul a span{
        display: none;
    }

/*Expande*/

.div-container.collected.expanded{
   animation: dash_expanded 0.2s ease-in-out forwards;
}

aside.dashboard_system.collected.expanded{
    animation: aside_expanded 0.2s ease-in-out forwards;
}
    aside.dashboard_system.collected.expanded figure.logoSysMaf.desktop{
        display: block;
    }

    aside.dashboard_system.collected.expanded figure.logoSysMaf.mobile{
        display: none;
    }

    aside.dashboard_system.collected.expanded #sytem_nav ul a span{
        display: block;
    }


/*Botão mobile/Desk*/
button.button_aside_dash.open{
    display: none;
    margin-bottom: 20px;
    margin-left: 0;
}
button.button_aside_dash.close{
    display: none;
    margin: 20px 0;
    margin-left: calc(100% - 45px);
}
button.button_aside_dash{
    padding: 0;
}
figure.button_aside_dash{
    width: 30px;
    height: 30px;
    margin: 5px;
    padding: 0;
}
figure.button_aside_dash .button_aside_dash{
    fill: var(--base-gray-color-4);
}

.div-container.nav_mobile_dash{
   width: calc(100% - 40px) !important;
}

aside.dashboard_system.nav_mobile_dash{
    width: calc(100% - 40px) !important;
    
}
    aside.dashboard_system.nav_mobile_dash figure.logoSysMaf.desktop{
        display: block !important;
    }

    aside.dashboard_system.nav_mobile_dash figure.logoSysMaf.mobile{
        display: none !important;
    }

    aside.dashboard_system.nav_mobile_dash #sytem_nav ul a span{
        display: block !important;
    }


header#sys_header, main#sys_main_content, footer#sys_footer{
    background-color: var(--base-gray-color-1);
    width: calc(100% - 40px);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 7px;
}
footer#sys_footer{
    margin-bottom: 0;
}

    /*header*/

    header#sys_header{
        display: flex;
        justify-content: space-around;
        position: relative;
    }
    .box_header{
        display: grid;
        align-content: center;
    }

    #header_name_tax_id{
        width: calc(70% - 50px);
        position: relative;
        display: block;
    }
    #header_seach{
        width: calc(30% - 50px);
        position: relative;
    }
    #header_info_logout{
        width: 100px;
        position: relative;
    }

    /*Aparecer Notificações*/
    @keyframes notification_appears{
      0% {
        top: 50px;
        opacity: 0;
        display: none;
      }
      100% {
        top: 65px;
        opacity: 1;
        display: block;
      }
    }

    /*Desaparecer Notificações*/
    @keyframes disappear_notification{
      0% {
        top: 65px;
        opacity: 1;
        display: block;
      }
      100% {
        top: 50px;
        opacity: 0;
        display: none;
      }
    } 

    #header_info_logout #list_notification{
        width: 300px;
        position: absolute;
        right:-10px;
        padding: 10px;
        background-color: white;
        border-radius: 7px;
        border: 2px solid var(--base-gray-color-3);
    }
        
        #header_info_logout #list_notification ul{
            margin: 0px;
            padding: 10px;
        }
        #header_info_logout #list_notification ul a li, #header_info_logout #list_notification ul a li::before{
            list-style: none;
            content: '';
            margin: 0px;
            padding: 20px 0;
            border-top: 2px solid var(--base-gray-color-2);
        }
        #header_info_logout #list_notification ul a:first-child li{
            border-top: none;
            padding: 10px 0 20px;
        }
        #header_info_logout #list_notification ul a li.show_more{
            border-top: none;
            text-align: center;
            border-radius: 7px;
            padding: 7px 15px;
            border: 2px solid var(--second-details-color);
            background-color: var(--first-details-color);
            color: var(--base-gray-color-1);
            font-family: 'Typold Extended';
            color: white;
        }
        #header_info_logout #list_notification ul a li.show_more:hover{
            
            border: 2px solid var(--third-details-color);
            background-color: var(--second-details-color);
            color: var(--base-gray-color-1);
        }

    #header_info_logout.box_header.open_notification #list_notification{
        animation: notification_appears 0.5s ease-in-out forwards;
    }
    #header_info_logout.box_header #list_notification{
        animation: disappear_notification 0.5s ease-in-out forwards;
    }
    #header_info_logout.notification_close #list_notification{
        top: 50px;
        opacity: 0;
        display: none;
    }
        #list_notification figure.arrow-notification{
            width: 35px;
            position: absolute;
            top: -17.5px;
            right: 65px;
        }

    #header_name_tax_id h2, #header_name_tax_id h3{
        margin: 0;
        color: var(--text-color) !important;
        line-height: 25px;
    }
    #header_name_tax_id h3{
        font-size: 90%;
    }

    #header_name_tax_id h2{
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }
    .name_bussiness_content{
        max-width: calc(100% - 155px);        /* define o espaço disponível */
        overflow: hidden;    /* esconde o conteúdo que ultrapassa */
    }
    .name_bussiness_content .name_bussiness{
        white-space: nowrap;       /* impede que o texto quebre para outra linha */
        overflow: hidden;          /* oculta o texto que não cabe */
        text-overflow: ;   /* mostra "..." no final */
        font-family: 'Typold Extended';
        font-weight: 500;
        font-size: 130%;
        color: var(--gold) !important;
    }
    .type_account{
        display: flex;
        width: 150px;
        margin-left: 5px;
        font-size: 80%;
        font-style: italic;
    }

    .access_by{
        display: flex;
        width: 100%;
    }
    .access_by p{
        font-size: 80%;
        font-style: italic;
        color: var(--first-details-color);
        margin-left: 5px;
    }
    .access_by_img{
        width: 20px;
        height: 20px;
    }
    figure.access_by_img{
        fill: var(--second-details-color);
    }

    #header_seach form{
        width: calc(100% - 50px);
        margin-right: 50px;
    }

    #header_info_logout{
        display: flex;
        justify-content: right;
        align-items: center;
    }

    button.button_info, button.button_logout{
        border: none;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
        margin: 0 5px;
        display: flow;
    }

    
    button.button_info figure.button_info, button.button_logout figure.button_logout{
        width: 30px;
        height: 30px;
        margin: 5px;
    }
    button.button_info figure.notification{
        display: flex;
    }
    button.button_info figure.notification_alert{
        display: none;
    }

    button.button_info.notification figure.notification{
        display: none;
    }
    button.button_info.notification figure.notification_alert{
        display: flex;
    }

    button.button_logout figure.button_logout{
        fill:var(--base-gray-color-4);
    }


    form.grid_content{
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 4 colunas de largura igual */
        gap: 20px; /* Espaço entre os itens (opcional) */
    }

    form.grid_content h2, form.grid_content hr, #tax_id_account{
        grid-column: span 3;
    }

    .button_account{
        grid-column-start: 1; /* começa na primeira coluna */
    }

    #tax_id_account p{
        font-family: 'Typold Extended';
        font-weight: 500;
        font-size: 18px;
        color: var(--base-gray-color-5);
    }

/*USUÁRIOS*/
    .not_registers{
        margin: 20px 0;
        text-align: center;
        font-style: italic;
    }

    div#box_table{
        width: 100%;
        overflow: auto; /* Mantém a rolagem */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE e Edge antigos */
        border-radius: 7px;
        margin: 50px 0;
    }

    div.table_line{
        display: grid;
        grid-template-columns: minmax(50px, 5%) minmax(200px, 40%) minmax(200px, 40%) minmax(100px, 10%) minmax(100px, 10%) ;/*repeat(6, 1fr); /* 6 colunas de largura igual */
    }
    div.table_line > div#infos_user{
        grid-column: 1 / 6; /* por exemplo, só ocupa colunas 2 e 3 */
        grid-row: 2;
        background-color: var(--base-gray-color-3);
    }
    div.table_header div.table_line div.table_colum{
        padding: 15px 10px;
        font-weight: 600;
        color: white;
        font-size: 110%;
        display: grid;
        align-content: center;
        background-color: var(--base-gray-color-4);
    }
    div.table_body div.table_line.impar div.table_colum{
        background-color: var(--base-gray-color-2);
    }
    div.table_body div.table_line div#infos_user{
        overflow: hidden;
        display: none;
    }
    div.table_line div.table_colum, div#infos_user{
        padding: 15px 10px;
        display: grid;
        align-content: center;
    }
    span.situation{
        width: 10px;
        height: 10px;
        display: grid;
        border-radius: 100%;
        background-color: var(--base-gray-color-3);
    }
    span.situation.confirmed{
        background-color: var(--first-details-color);
    }
    span.situation.guest{
        background-color: var(--base-gray-color-3);
    }
    span.situation.off{
        background-color: var(--error);
    }
    span.situation.frozen{
        background-color: blue;
    }
    div.table_colum#name p{
        cursor: pointer;
        font-weight: 600;
    }
    div.table_colum#level{
        font-style: italic;
    }
    div.table_colum#status, div.table_colum#del, div.table_colum#edt, div.table_colum#situation{
        text-align: center;
        display: grid;
        justify-content: center;
    }
    button.trash, button.edit{
        padding: 0px;
        width: 45px;
        height: 45xp;
    }
    div.table_header .trash, div.table_header .edit{
        fill: var(--base-gray-color-2);
    }

    figure.trash, figure.edit{
        width: 30px;
        height: 30px;
        margin: 5px auto;
    }
    .trash, .edit{
        fill: var(--base-gray-color-5);
    }
    div.table_header #del figure.trash, div.table_header #edt figure.edit{
        margin: 5px;
    }

/*Navegação*/
    #pagination_hdd{
        display: none;
    }
    #navegation{
        margin: 20px 0 0 0;
    }
    #navegation nav{
        text-align: center;
    }
    #navegation a{
        font-family: 'Typold Extended';
        display: inline-grid;
        align-content: center;
        justify-content: center;
        vertical-align: top;
        height: 50px;
        width: 50px;
        font-size: 110%;
        font-weight: 500;
        color: var(--second-details-color);
        margin: 0 2.5px;
    }

    figure.prev, figure.next{
        width: 15px;
        display: grid;

    }
    .prev, .next{
        fill: var(--second-details-color);
    }
    .disabled{
        border-color: var(--base-gray-color-3);
        background-color: var(--base-gray-color-1);
        color: var(--base-gray-color-3) !important;
    }
    .disabled figure.prev, .disabled figure.next{
        color: var(--base-gray-color-3);
        
    }
    .disabled .prev, .disabled .next{        
        fill: var(--base-gray-color-3);
    }

/*Produtos*/
form#register_product{
    display: grid;
    grid-template-columns: minmax(120px, 12.5%) minmax(120px, 12.5%) minmax(120px, 12.5%) minmax(120px, 12.5%) minmax(120px, 12.5%) minmax(120px, 12.5%) minmax(120px, 12.5%) minmax(120px, 12.5%);
    /*grid-template-columns: minmax(120px, 11.111%) minmax(120px, 11.111%) minmax(120px, 11.111%) minmax(120px, 11.111%) minmax(120px, 11.111%) minmax(120px, 11.111%) minmax(120px, 11.111%) minmax(120px, 11.111%) minmax(120px, 11.111%);*/
    column-gap: 5px;
    /*overflow: auto; /* Mantém a rolagem */
    /*scrollbar-width: none; /* Firefox */
    /*-ms-overflow-style: none; /* IE e Edge antigos */

}
form#register_product label, form#register_product .label, form#register_product label input, form#register_product label select, form#register_product .label div, form#register_product .label button{
    width: 100%;
    position: relative;
}
form#register_product label, form#register_product .label{
    margin: 10px 0;
}
div#edit_product{
    text-align: left;
}
div#edit_product hr{
    margin: 10px 0;
}
div#edit_product label, div#edit_product .label{
    display: inline-block;
    width: calc(48% - 10px);
    margin: 5px;
    vertical-align: top;
    position: relative;
}
div#edit_product.raw_material label, div#edit_product.raw_material .label{
    width: calc(100% - 10px);
}
div#edit_product label.change_refs{
    width: 100%;
    display: ruby;
}
div#edit_product label input, div#edit_product label select, div#edit_product .label button{
    width: 100%;
}
div#edit_product label.change_refs input{
    width: 20px;
}
#customSearchResults, #customSearchResults_edit, .customSearchResults_ {
    border: 1px solid #ddd;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    position: absolute; /* Ou relativo, dependendo do layout */
    z-index: 100;
    width: 200px; /* Ou a largura do input */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 7px;
    top: 70px;
    padding: 10px;
    display: none;
}
div.label#just_this_box{
    opacity: 0;
}
.datalist_cat{
    display: block;
    text-decoration: none !important;
    cursor: pointer;
}

#fractional_cost{
    padding:9px 0;
}

.see_all{
    margin: 20px 0;
}

select optgroup {
    font-weight: normal;
}

select option {
    padding-left: 0; /* remove indentação */
}
select:not(:-internal-list-box):not([multiple]) optgroup option {
    padding-inline-start: -internal-auto-base(0, 0);
}



#table_products_registers, #prod_name_datas, .recipiente{
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#table_products_registers:active, #prod_name_datas:active, .recipiente:active{
    cursor: grabbing;
}

#table_products_registers::-webkit-scrollbar,  #prod_name_datas::-webkit-scrollbar, .recipiente::-webkit-scrollbar{
    display: none;
}

.line_product{
    display: grid;
    grid-template-columns: minmax(150px, 12.5%) minmax(150px, 12.5%) minmax(150px, 12.5%) minmax(150px, 12.5%) minmax(150px, 12.5%) minmax(150px, 12.5%) minmax(150px, 12.5%) minmax(150px, 12.5%);
    margin: 0;
    /*padding: 0 5px;
    width: calc(100% - 10px);*/
}



.line_product .colum_product{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 7px 5px;
}

.line_product.pair .colum_product{
    background-color: var(--base-gray-color-3);
}


.line_product .colum_product.comands{
    justify-content: space-around;
    grid-template-columns: 59.5% 39.5%;
    column-gap: 1%;
}
.colum_product.comands .button{
    width: fit-content;
}
/*Busca*/
#seach_phrase, #seach_phrase *{
    font-family: 'Typold Extended';
}
#seach_phrase{
    display: none;
}
#seach_word{
    color: var(--first-details-color);
}
#seach_phrase.active_seach{
    display: block;
}
#seach_section{
    margin: 40px 0;
}
#del_edit_spec_prod{
    margin: 40px 0;
}

/*Comandos*/
#seach_prod_form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.colum_commands{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    width: auto;
}

#seach_prod_form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 200px; /* ou ajuste conforme o necessário */
}


/*All Product*/

.prod_name_datas{
    margin: 25px 0;
    min-width: 1200px;
}
.prod_name_datas:first-child{
    margin: 0 0 25px 0;
}
.prod_name_datas.space_btt{
    margin-bottom: 75px !important;
}

.bar_prod{
    padding: 7px 5px;
    background-color: var(--second-details-color);
    display: grid;
    grid-template-columns: calc(50% - 50px) calc(50% - 50px) 100px;
    
}
.bar_prod p, .bar_prod a{
    color: white;
}
.bar_prod a.button{
    color: var(--text-color);
}
.info_prod{
    display: grid;
    align-items: center;
    justify-content: center;
}
#select_prod label{
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: end;
}
#name_prod{
    justify-content: left;
    white-space: nowrap; /* Impede quebras de linha */
    overflow: hidden; /* Esconde o conteúdo que ultrapassa o elemento */
    text-overflow: ellipsis; /* Mostra '...' se o texto for muito longo */
    width: 100%; /* Define um limite para a largura do elemento */
}
#select_prod{
    justify-content: right;
}
#select_prod p{
    margin-right: 10px;
}
#button_specific_prod{
    position: absolute;
    margin: 10px 50%;
    left: -90px;
}
#button_specific_prod a{
    width: 180px;
    text-align: center;
}



/*RECEITUÁRIO*/

#header_register_recipe{
    display: grid;
    grid-template-columns: calc(100% - 300px) 300px;
    column-gap: 5px;
}
.colum_recipe{
    /*display: grid;*/
    /*align-content: end;*/
    padding: 10px;
}
#recipe.colum_recipe{
    background-color: white;
    border-radius: 7px;
    box-shadow: rgb(0, 0, 0, 0.1) 3px 3px 10px 0px inset;
    border: 2px solid var(--base-gray-color-3);
}
#controls.colum_recipe{
    justify-content: center;
}

#box_img_load{
    width: 250px;
    height: 250px;
    background-color: var(--base-gray-color-3);
    border-radius: 7px;
    margin-bottom: 5px;
}
#loading_img{
    width: 250px;
}
#header_recipe{
    margin-top: 100px;
    display: grid;
    grid-template-columns: calc(100% - 255px) 250px;
    column-gap: 5px;
}
#type_recipe{
    width: 250px;
    /*height: fit-content;*/
}

input.name_recipe{
    width: 100%;
    border: none;
    border-radius: 0;
    font-size: 150%;
    border-bottom: 2px solid var(--first-details-color);
    font-family: 'Typold Extended';
    color: var(--first-details-color);
    background-color: transparent;
    
}
.conteiner_img{
    display: none;
}
#conjunt_of_raw_materials{
    margin: 50px 0;
    padding: 0 0 250px 0;
}
.lines_of_raw_materials{
    display: grid;
    grid-template-columns: minmax(120px, calc(25% - 86.25px)) minmax(120px, calc(25% - 86.25px)) 150px minmax(120px, calc(25% - 86.25px)) minmax(120px, calc(25% - 86.25px)) 150px 45px;
    column-gap: 5px;
}
.lines_of_raw_materials.body_recipe_materials{
    margin: 5px 0;
}
.lines_of_raw_materials label, .lines_of_raw_materials .label{
    display: grid;
    align-items: center;
    position: relative;
}
.lines_of_raw_materials input{
    width: 100%;
}

.line_material_recipe.comands{
    display: grid;
}
.line_material_recipe.comands.close *{
    display: none;
}
.lines_of_raw_materials.body_recipe_materials .customSearchResults_{
    top: 50px;
}
figure.add_plus{
    display: grid;
    grid-template-columns: 30px calc(100% - 35px);
    align-items: anchor-center;
    column-gap: 5px;
}
.add_plus svg{
    width: 30px;
}
figure.add_plus svg .add_plus{
    fill: var(--base-gray-color-5);
}
.add_plus figcaption{
    width: 100%;
}
#add_raw_material{
    margin: 50px 0 0 0;
}



/*@MEDIAS*/


@media only screen and (max-width: 1369px) {
    form#register_product{
        grid-template-columns: minmax(120px, 25%) minmax(120px, 25%) minmax(120px, 25%) minmax(120px, 25%);

    }
}

@media only screen and (max-width: 1220px) {
    .colum_commands{
        display: grid;
        align-self: flex-start;
    }
}

@media only screen and (max-width: 1024px) {
    a, a:link, a:visited, a:hover, a:focus, a:active{text-decoration: none;}
    nav a, nav a:link, nav a:visited, nav a:hover, nav a:focus, nav a:active{text-decoration: none;}

    /*Create account*/
    body.create-account header{
        width: 20%;
    }
    body.create-account footer{
        width: calc(80% - 40px);
    }
    body.create-account main.main-content{
        width: calc(80% - 40px);
    }
    body.create-account main.main-content figure.logo_create_account{
        margin: 30px 0;
    }

    /*System*/

    .div-container{
        width: calc(100% - 115px);
        padding: 20px 20px 20px 20px;
    }

    aside.dashboard_system{
        width: 35px;
        left: 0;
    }

    /*Logo*/

    aside.dashboard_system figure.logoSysMaf.desktop{
        display: none;
    }

    aside.dashboard_system figure.logoSysMaf.mobile{
        display: block;
    }

    #sytem_nav ul a span{
        display: none;
    }

    /*Botão de Recolher*/
    aside.dashboard_system #col_exp_dash{
        display: none;
    }


    /*Recolhe*/
    .div-container.collected{
       animation: none;
    }
    aside.dashboard_system.collected{
        animation: none;
    }
        aside.dashboard_system.collected figure.logoSysMaf.desktop{
            display: none;
        }

        aside.dashboard_system.collected figure.logoSysMaf.mobile{
            display: block;
        }

        aside.dashboard_system.collected #sytem_nav ul a span{
            display: none;
        }

    #sytem_nav ul a figure.icon_nav{
        margin-right: 0;
    }

    #sytem_nav ul li, #sytem_nav ul.active li{
        display: none;
    }

    /*Expande*/
    .div-container.collected.expanded{
       animation: none;
       width: calc(100% - 115px);
    }

    aside.dashboard_system.collected.expanded{
        animation: none;
        width: 35px;
        
    }
        aside.dashboard_system.collected.expanded figure.logoSysMaf.desktop{
            display: none;
        }

        aside.dashboard_system.collected.expanded figure.logoSysMaf.mobile{
            display: block;
        }

        aside.dashboard_system.collected.expanded #sytem_nav ul a span{
            display: none;
        }

    form.grid_content{
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 3 colunas de largura igual */
        gap: 20px; /* Espaço entre os itens (opcional) */
    }

    form.grid_content h2, form.grid_content hr, #tax_id_account{
        grid-column: span 2;
    }

    .button_account{
        grid-column-start: 1; /* começa na primeira coluna */
    }

    

}

@media only screen and (max-width: 769px) {
    a, a:link, a:visited, a:hover, a:focus, a:active{text-decoration: none;}
    nav a, nav a:link, nav a:visited, nav a:hover, nav a:focus, nav a:active{text-decoration: none;}
    a.button{text-decoration: none}
    nav#menu_mafondana.desktop{
        display: none;
    }    
    .open_nav_maf{
        display: block;
    }

    /*Create account*/
    body.create-account header{
        width: 0;
    }
    body.create-account footer{
        width: calc(100% - 40px);
    }
    body.create-account main.main-content{
        width: calc(100% - 40px);
    }
    body.create-account main.main-content figure.logo_create_account{
        margin: 30px auto;
    }

    /*Register account*/
    body.create-account main.main-content form h1, body.create-account.confirmed-email main.main-content h1, body.create-account.complaint-email main.main-content h1, body.create-account.resend-email main.main-content h1{
        text-align: center;
    }
    body.create-account.confirmed-email main.main-content p, body.create-account.complaint-email main.main-content p, body.create-account.resend-email main.main-content p, p.login{
        text-align: center;
    }
    body.create-account main.main-content form{
         margin:0 auto 150px;
    }



    /*System*/

    .div-container{
        width: calc(100% - 40px);
    }

    aside.dashboard_system{
        width: calc(100% - 40px);
        left: -100%;
    }

    /*Logo*/

    aside.dashboard_system figure.logoSysMaf{
        max-width: 70%;
        margin: 0;
    }

    aside.dashboard_system figure.logoSysMaf.desktop{
        display: block;
    }

    aside.dashboard_system figure.logoSysMaf.mobile{
        display: none;
    }

    #sytem_nav ul a span{
        display: inline-block;
    }

    /*botões desk-mobile*/

    button.button_aside_dash.open{
        display: flex;
    }
    button.button_aside_dash.close{
        display: flex;
    }

    /*Recolhe - Que não existe aqui*/
        aside.dashboard_system.collected figure.logoSysMaf.desktop{
            display: block;
        }

        aside.dashboard_system.collected figure.logoSysMaf.mobile{
            display: none;
        }

        aside.dashboard_system.collected #sytem_nav ul a span{
            display: block;
        }

    /*Expande*/
    .div-container.collected.expanded{
       width: calc(100% - 40px);
    }

    aside.dashboard_system.collected.expanded{
        width: calc(100% - 40px);
        
    }
        aside.dashboard_system.collected.expanded figure.logoSysMaf.desktop{
            display: block;
        }

        aside.dashboard_system.collected.expanded figure.logoSysMaf.mobile{
            display: none;
        }

        aside.dashboard_system.collected.expanded #sytem_nav ul a span{
            display: block;
        }

    /*header*/
    header#sys_header{
        display: flow;
        justify-content: space-around;
        position: relative;
    }
    #header_name_tax_id, #header_seach{
        width: 100%;
        margin-bottom: 20px;
    }
    #header_info_logout{
        position: absolute;
        top: -64px;
        right: 0;
    }

    /*Aparecer Notificações*/
    @keyframes notification_appears{
      0% {
        top: 40px;
        opacity: 0;
        display: none;
      }
      100% {
        top: 55px;
        opacity: 1;
        display: block;
      }
    }

    /*Desaparecer Notificações*/
    @keyframes disappear_notification{
      0% {
        top: 55px;
        opacity: 1;
        display: block;
      }
      100% {
        top: 40px;
        opacity: 0;
        display: none;
      }
    } 

    #header_info_logout #list_notification{
        right:10px;
    }

        #header_info_logout #list_notification a{
            text-decoration: none;
        }

    #header_info_logout.notification_close #list_notification{
        top: 40px;
        opacity: 0;
        display: none;
    }
        #list_notification figure.arrow-notification{
            right: 52px;
        }

    #header_seach form{
        width: 100%;
        margin-right: 0;
    }
    button.button_info, button.button_logout{
        border: 2px solid var(--base-gray-color-4);
        background-color: #FFFFFF;
        border-radius: 7px;
    }

    form.grid_content{
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 4 colunas de largura igual */
        gap: 20px; /* Espaço entre os itens (opcional) */
    }

    form.grid_content h2, form.grid_content hr, #tax_id_account{
        grid-column: span 1;
    }

    .button_account{
        grid-column-start: 1; /* começa na primeira coluna */
    }

    form#register_product{
        grid-template-columns: 100%;
        column-gap: 0;
    }

    /*all produtos*/
    .colum_commands{
        display: block;
        width: 100%;
    }

}

@media only screen and (max-width: 375px) {
    body * {
        font-size: 13px;
    }
    figure.logoMaf figcaption{
        font-size: 11px;
    }
}