* {
        margin: 0;
        padding: 0;
        font-family: serif;
    }
    
    body {
        height: 100%;
        width: 100%;
        text-align: center;
    }
    
    a {
        text-decoration: none;
        color: initial;
    }
    
    a:visited {
        text-decoration: none;
        color: initial;
    }
    
    #opcoes_usu {
        display: none;
    }
    /**
      *   BARRA DO MENU
      */
    
    #menu {
        height: 9%;
        min-height: 80px;
        max-height: 100px;
        width: 100%;
        border: 0px solid;
        align-items: center;
        overflow-y: visible;
        background-color: #0F4C75;
        position: fixed;
        z-index: 2;
    }
    
    #link_logo {
        position: absolute;
        width: 147px;
        height: 150px;
        left: 5%;
        top: 20px;
    }
    
    #logo {
        position: absolute;
        left: 0%;
        right: 0%;
        top: 0%;
        bottom: -1%;
        background: #FFFFFF;
        border-radius: 20px;
    }
    
    #retangle {
        position: absolute;
        left: 3%;
        right: 4%;
        top: 5%;
        bottom: 2.68%;
        background: url(../Logo.png);
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 18px;
    }
    
    #Login_link {
        color: white;
        font-size: 25px;
        font: serif;
        position: absolute;
        display: none;
        left: 90%;
        top: 25px;
    }
    
    #menu_sidenav_container {
        position: absolute;
        top: 180px;
        left: 7.5%;
        cursor: pointer;
    }
    
    #container_usuario_link {
        position: absolute;
        left: 90%;
        top: 10px;
        background-color: white;
        height: 40px;
        border-radius: 40px;
        padding: 10px;
        width: 40px;
        align-items: center;
        display: none;
        justify-content: center;
        cursor: pointer;
    }
    
    #container_svg_exit {
        vertical-align: middle;
        display: block;
        padding: 0;
    }
    
    #svg_exit {
        display: inline-block;
        vertical-align: middle;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
    }
    
    #txt_deslogar {
        margin: 0;
        padding: 0;
        display: inline;
        vertical-align: middle;
    }
    
    @media (max-width: 900px) {
        #menu {
            height: 6%;
            min-height: 0;
        }
    }
    /*
    *       Pesquisa
    */
    
    .search-box {
        position: absolute;
        top: 70px;
        left: 80%;
        transform: translate(-100%, -100%);
        background-color: white;
        height: 40px;
        border-radius: 40px;
        padding: 10px;
        display: flex;
        align-items: center;
    }
    
    .search-box:hover>.search-txt {
        width: 350px;
        padding: 0px 6px;
    }
    
    .search-box:hover>.search-btn {
        transition: 0.01s;
        background-color: #c0c0c0;
    }
    
    .search-btn {
        text-decoration: none;
        cursor: pointer;
        float: right;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        transition: 0.01s;
    }
    
    .search-txt {
        border: none;
        background: none;
        outline: none;
        float: left;
        padding: 0;
        color: black;
        font-size: 16px;
        transition: 0.4s;
        line-height: 40px;
        width: 0px;
    }
    /*
    *       Area central da Página E Noticia
    */
    /* obs: as paginas terão uma area central 
    que agrupará tudo o que o usuario for visualizar 
    podendo ser um noticia, perfil de um usuario, Etc*/
    
    #Container_conteudo {
        /*background-color: #d5d5d5;*/
        text-align: center;
        margin-left: 25%;
        top: 50px;
        height: auto;
        min-height: 1000px;
        width: 50%;
        padding-top: 3%;
        border-left: solid 3px grey;
        border-right: solid 3px grey;
    }
    /*usar apenas classes pois são elementos repetidos muitas vezes
    *usar id apenas para elementos unicos na pagina*/
    
    .Container_noticia {
        height: auto;
        color: black;
        overflow-x: hidden;
        font-family: 'Times New Roman', Times, serif;
        padding-bottom: 150px;
        width: 100%;
        margin-bottom: 0px;
        border-bottom: 2px solid #000;
        padding-top: 20px;
        background-color: white;
    }
    
    .Noticia_titulo {
        padding: 20px;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .Noticia_img {
        width: 100%;
        height: auto;
    }
    /*Containers do rodape*/
    
    .Container_rodape {
        background-color: white;
        height: auto;
        width: 100%;
    }
    
    .Container_autor {
        vertical-align: middle;
        display: block;
        float: left;
        margin: 10px;
        text-decoration: none;
    }
    
    .Container_like {
        vertical-align: middle;
        display: block;
        cursor: pointer;
        float: right;
        margin-top: 25px;
        margin-right: 16%;
    }
    
    .Container_view {
        vertical-align: middle;
        display: block;
        float: right;
        margin: 15px;
        margin-top: 25px;
        margin-right: 16%;
    }
    /*Elementos dos containers*/
    
    .Autor_img {
        display: inline-block;
        height: 60px;
        width: 60px;
        border-radius: 40px;
        vertical-align: middle;
        cursor: pointer;
    }
    
    .Autor_nome {
        margin-left: 20px;
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
        color: black;
    }
    
    .Svg_like {
        display: inline-block;
        vertical-align: middle;
    }
    
    .Num_like {
        margin-left: 15px;
        display: inline-block;
        vertical-align: middle;
    }
    
    .Svg_view {
        display: inline-block;
        vertical-align: middle;
    }
    
    .Num_view {
        margin-left: 15px;
        display: inline-block;
        vertical-align: middle;
    }
    
    #container_conteudo_noticia {
        height: auto;
        font-family: 'Times New Roman', Times, serif;
        width: 100%;
        padding: 20px;
        margin-top: 100px;
        border-bottom: 2px solid #000;
        padding-top: 20px;
        background-color: #fff;
        text-align: left;
    }
    
    #conteudo_noticia {
        width: 70%;
        padding: 0px;
    }
    
    .svg_edt_noticia {
        border-radius: 40px;
        padding: 10px;
        cursor: pointer;
        transition: 0.4s;
    }
    
    .svg_edt_noticia:hover {
        background-color: lightblue;
    }
    
    #container_editar_noticia {
        float: right;
        margin-right: 20px;
        margin-top: 25px;
    }
    /*
    *       LOGIN , CADASTRO E FEEDBACK CSS 
    */
    
    .login {
        min-height: 100px;
        width: 30%;
        left: 18%;
    }
    
    #area {
        background-color: rgba(50, 130, 184, 0.4);
        position: absolute;
        margin-left: 10%;
        top: 30%;
        height: auto;
        /*min-width: 300px;*/
        padding: 3%;
    }
    
    #Icon_seta {
        width: 40px;
        height: auto;
        float: left;
        display: inline-flex;
        cursor: pointer;
    }
    
    #Login_titulo {
        font-size: 35px;
        font-family: 'Times New Roman', Times, serif;
        text-align: center;
    }
    
    #Confirmar_button {
        padding: 5px;
        border: none;
        background-color: none;
        width: 100%;
    }
    
    #Text_input>input {
        background-color: rgba(0, 0, 0, 0);
        border: none;
        border-bottom: 2px #0F4C75 solid;
        height: 30px;
        width: 100%;
        border-radius: 4px;
        font-size: 20px;
        margin-bottom: 30px;
        -webkit-appearance: none;
    }
    
    #Text_input>label {
        font-size: 20px;
        position: absolute;
        margin-top: 9px;
        top: 0;
        left: 0;
        pointer-events: none;
        display: inline-flex;
        user-select: none;
        outline: none;
        transition: all 0.3s;
    }
    
    #Text_input {
        position: relative;
        padding-top: 13px;
    }
    
    #Text_input input:focus {
        border-bottom: 2px solid #0F4C75;
    }
    
    #Text_input input::placeholder {
        color: transparent;
    }
    
    #Text_input>input:focus+label,
    #Text_input>input:not(:placeholder-shown)+label {
        font-size: 13px;
        margin-top: 0;
        color: #0f4c7577;
    }
    
    #Text_input>input:focus {
        outline: 0;
    }
    
    #Confirmar_button {
        padding: 20px;
        border: 0px;
        background-color: white;
        cursor: pointer;
    }
    
    #Input_nome {
        width: 50%;
    }
    
    #Link_cadastro {
        transition: 0.3s;
        font-size: 18px;
    }
    
    #Link_cadastro:visited {
        color: #000;
    }
    
    #Link_cadastro:hover {
        color: #818181;
    }
    
    #Text_opniao {
        width: 80%;
        height: 100px;
        font-size: 20px;
    }
    
    #mensagem {
        color: red;
        font-size: 30px;
    }
    /**
    *   Formatação Sidenav 
    */
    
    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        margin-top: 80px;
        padding-top: 100px;
        background-color: #FFFFFF;
        overflow-x: hidden;
        transition: 0.5s;
        text-align: center;
        border-right: 3px solid #0f4c75;
    }
    
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    .sidenav a:hover {
        color: #0f4c75;
    }
    
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    #svg_darktheme {
        position: absolute;
        top: 20;
        cursor: pointer;
        right: 25px;
        margin-left: 50px;
        width: 40px;
        height: 40px;
    }
    
    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 25px;
        }
        .sidenav a {
            font-size: 18px;
        }
    }
    /**
        PAGINA DO USUARIO
    */
    
    #container_perfil {
        margin-top: 20px;
        text-align: center;
        width: 100%;
        height: auto;
        background-color: #fff;
        display: block;
    }
    
    #container_img_usu {
        vertical-align: middle;
        overflow: hidden;
    }
    
    #img_usu {
        top: 500px;
        width: 60%;
        height: auto;
        left: 5%;
        border-radius: 35px;
    }
    
    #banner_usu {
        width: 100%;
    }
    
    #tittle_timeline {
        color: #81818181;
    }
    
    #nome_usu {
        font-size: 50px;
    }
    
    #container_edt {
        background-color: #00000000;
        border: 4px solid #0F4C75;
        color: #0F4C75;
        width: 10%;
        transition: 0.4s;
        cursor: pointer;
        padding: 15px;
        text-align: center;
        vertical-align: center;
        float: right;
        display: none
    }
    
    #container_edt:hover {
        background-color: #0F4C75;
        color: white;
    }
    
    #svg_edt {
        display: inline-block;
        vertical-align: middle;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
    }
    
    #editar_perfil {
        background-color: white;
        border: 2px solid #3282B8;
        position: absolute;
        display: none;
        margin-left: 10%;
        top: 20%;
        height: auto;
        width: 40%;
        padding: 3%;
    }
    
    #cancelar_edicao {
        border: 4px solid #af1818;
        color: #af1818;
        width: 200px;
        float: right;
        transition: 0.4s;
        cursor: pointer;
        padding: 15px;
        text-align: center;
        vertical-align: center;
    }
    
    #cancelar_edicao:hover {
        background-color: #af1818;
        color: white;
    }
    
    #confirmar_edicao {
        border: 4px solid #18af3e;
        color: #18af3e;
        width: 200px;
        float: left;
        transition: 0.4s;
        cursor: pointer;
        padding: 15px;
        text-align: center;
        vertical-align: center;
    }
    
    #confirmar_edicao:hover {
        background-color: #18af3e;
        color: white;
    }
    /*
    *   Estilizacao do editor
    */
    
    .cd-toolbar {
        box-sizing: border-box;
        min-height: 40px;
        border: 1px solid #999;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        list-style: none;
        margin: 0;
        padding: 5px 10px;
        background-color: #ddd;
    }
    
    .cd-toolbar li {
        margin: 0;
        padding: 5px 0;
        display: inline-block;
    }
    
    .cd-toolbar button {
        height: 20px;
        width: 20px;
        background-color: #fff;
        border: 1px solid #999;
    }
    
    .cd-toolbar select {
        height: 20px;
        min-width: 40px;
        background-color: #fff;
        border: 1px solid #999;
    }
    
    .cd-toolbar li.space {
        content: '/';
        width: 5px;
        margin-left: 5px;
        border-left: 1px solid #999;
    }
    
    #color {
        width: 80px;
    }
    
    #color option span {
        width: 80px;
        content: '&nbsp';
        border: 1px solid #999;
    }
    
    .cd-editor {
        background-color: #fff;
        box-sizing: border-box;
        width: 100%;
        min-height: 1000px;
        margin: 0;
        padding: 10px;
        border: 0;
        display: block;
        overflow: auto;
        border: 1px solid #999;
        border-top: none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    
    .container {
        width: 50%px;
        margin: 0 auto;
    }
    
    h1 {
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        text-align: center;
        padding: 20px 0;
        color: dimgray;
    }
    
    .actions {
        text-align: center;
        margin-top: 10px;
    }
    
    #save {
        background-color: #fff;
        padding: 10px 20px;
        border: 1px solid #999;
        font-size: 30px;
    }
    
    .editor_texto {
        width: 60%;
        height: auto;
        left: 8%;
    }
    
    .preview_img {
        width: 300px;
        height: auto;
    }