* { font-family: Arial, Helvetica, sans-serif;}


.bg_cinza{ background-color: #f2f2f2; height: 100vh;}

.fundo_container{    padding: 30px; width: 350px; margin-left: auto; margin-right: auto;
                     max-width: 350px  ; border-radius: 20px;
                     background: #fff;  ;}

.app_body{ background-color: #efefef; min-height: 100vh;}

.container__app{ max-width: 1210px; margin:auto; }

.painel_esc   { padding: 20px; ;}

.textarea    { min-height: 80px;}

.borda_redonda{ border-radius: 10px;}

p{ color: #5b5b5e; }
.nome_persona{ font-size: 28px; line-height: 32px; font-weight: 600; margin-top: 10px; color: #5b5b5e}

hr{ background-color: #dcdcdc;}

.persona_mural { background: url(../imgs/Capa.png); height: 160px; padding: 10px ; position: relative;}
.persona_img { width: 100px; height: 100px; border-radius: 50% ; overflow: hidden; background-color: #3333;}
.persona_img{ position: absolute; left: 10px; bottom: 10px ; }

.button{ width: 100% ; text-align: left; display: flex; align-items: center; gap: 10px;
           justify-content: flex-start; font-weight: bold; height: 48px; font-size: 16px; }


.button img    { border-radius: 50%; overflow: hidden ;}

.button_painel { background-color: #1e8897; color:white ; text-align: left!important;
                  margin-bottom: 15px;  position: relative;}

.button_painel::after{ content: " " ; width: 5px; height: 10px; display: inline-block; background-image: url(../imgs/setinha.png);
                        background-size: cover; background-repeat: no-repeat ; position: absolute; right: 20px; 
                        ;}

.button_painel:hover{ color:white ; }

.button.curtir       { background-color: #866695 ; color:white ;  }
.button.comentar     { background-color: #e8e8e8 ; color: #303030 ;  }
.button.sem_borda    { border:none; background-color: transparent; color: #5b5b5e; height: fit-content;
                        border-radius: 0px!important;; border-bottom: 1px solid #5b5b5e; padding: 3px;
                         font-weight: 400;}

.fit-w { width: fit-content;}
.fit-w::after { display: none ;}

.bloco_dir, 
.bloco_central{ background-color: white ; width: 100% ; padding: 20px;  ;}


.bloco_central__title  { font-size: 18px; line-height: 22px; font-weight: bold; color:#5b5b5e ;}
.bloco_central__desc   { font-size: 16px; font-weight: 400; color:#5b5b5e ;}


.bloco_central__user_foto     { border-radius: 50%; overflow: hidden; width: 58px ; height: 58px ;}

.bloco_central__user_foto img { width: fit-content;}

.cab{ display: flex; gap: 15px; }

.painel_btn { display: flex; align-items: center; gap: 5px; }


.modo_texto{ background: linear-gradient(90deg, #f3b844 , #dd9b43); color: #000000; padding: 20px ; font-size: 18px; line-height: 21px; }
.modo_texto.gestor{ background: #fcf0d6 ; ; font-size: 16px; line-height: 18px; color: #212121;}
.modo_texto *{ color: #000; }
.mensagem       { width: 100%; display: flex; align-items: flex-start; gap: 10px}
.mensagem figure{ width: 44px; height: 44px; overflow: hidden ;  border-radius: 50%; flex-shrink: 0;}


.corpo_mensagem           { background-color: #fcf0d6; padding: 15px ; flex-grow: 1 ;
                            ;}
.corpo_mensagem
    .bloco_central__title { color: #5b5b5e; }
.corpo_mensagem
    .bloco_central__desc  {color: #212121}

.comentario_container_interna{ flex-grow: 1;}

a{ font-family: Arial, Helvetica, sans-serif;}
a:focus, a:hover{ text-decoration: none!important;}

.modal-content .box{ box-shadow: none;}

.pagination{ width: fit-content;}

.pagination a,
.pagination strong{ padding: 10px 20px;background: linear-gradient(90deg, #f3b844, #dd9b43); border-radius: 10px; margin-right: 20px;
                      color:#000; }
.pagination strong{ font-weight: bold; }

.youtube_container iframe{ width: 100%; height: 320px;}

.video_container img{ border-radius: 10px;}


.menu_mob { display: flex; position: fixed; width: 100%; z-index: 99;; align-items: center;
            height: 60px; justify-content: center; background: #fff; padding: 5px 10px; }

.menu_mob img{ height: 40px;}

.hamb{ background-color: #1e8897; border-radius: 3px; width: 45px ; height: 45px; margin-left: auto; padding: 4px; 
        align-items: center; justify-content: center; display: flex; flex-direction: column; border:none; box-shadow: none;}

.hamb div{ width: 80%; margin: 4px; background-color: #fff; height: 3px;}


/*menu*/
.menu_desloc{ display: none; padding: 0px; }

.menu_desloc  .painel_esc {    width: 80%;
    height: 100%;
    z-index: 20;
    position: relative;
    background: #fff;
}


.menu_desloc .close_menu { z-index: 10 ;;}
.close_menu{    position: fixed;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    background: #3333;
}


@media screen and (min-width: 769px){
   
    .menu_mob{ display: none ;}


    .box{     height: 500px; margin: 20px;  }

    .modal-content, 
    .modal-card {
        width: 750px; 
    }

}

.ql-toolbar.ql-snow + .ql-container.ql-snow
{ height: 60% ;}



@media(max-width: 640px){
/* .painel_btn .button span { display: none;} */

.app_body{ padding-bottom: 80px;}
.container__app{ padding-top: 80px;} 
.modal{ z-index: 400;}
.menu_desloc {
    position: fixed;
    display: inline-block;
    vertical-align: top;
    max-height: 100vh;
    overflow-y: auto;
    width: 100vw;
    top: 0;
    bottom: 0;
    transform: translateX(-1000px);
    transition: 0.3s ease-in-out all;
    z-index: 99;
}
.close_menu_btn{    margin-left: auto; border-radius: 50%; background-color: #333; border:none; color:#fff; width: 30px; height: 30px ;
                        display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 10px; }
.menu_desloc.is-active{     transform: translateX(0px); }

.button_painel{ margin-bottom: 0px; }

    .modo_texto{ font-size: 14px; line-height: 17px;}

    .columns{ margin-left: 0px; margin-right: 0px;}

    .modal-content, 
    .modal-card {
        height: 550px; 
    }
    .box{     height: 100%;  }

    .modal.is-active{ padding: 10px ; }

    .btns_publique{
        position: fixed; bottom: 0px; background: white; right: 0px; padding: 10px;
             z-index: 10;  
                width: 100% ; display: flex; justify-content: center;
    }    

    .btns_publique button{ width: fit-content;}
    .btns_publique button::after{display: none;}
    .btns_publique button:last-of-type{margin-bottom: 0px;}
    /* [data-target=novo_post_texto]{ position:fixed; right: 20px; bottom: 80px; width: 80px; z-index: 2; }
    [data-target=novo_post_texto_imagem]{ position:fixed; right: 20px; bottom: 20px; width: 80px; z-index: 2; } */
}