*{
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-family: "Roboto", sans-serif;
}

:root {
    --fundo-secundario: #18171c; 
  }  

a {
    text-decoration: none;
    color: #FFF;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

a:hover{
    filter: brightness(85%);
}

html{
    background:#0e0d12;
    color:#FFF;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    font-size:16px;
    padding-bottom: 70px;
}

textarea:focus, input:focus{
    outline: none;
}

.center_container{
    width:1200px;
    text-align:left;
}

.top_bar{
    background:var(--fundo-secundario);
    width:100%;
    height:60px;
    position:fixed;
    z-index:99999;
}

.top_bar_hide{
    width:100%;
    height:60px;
}

.container_microblog{
    width:600px;
    text-align:left;
    float:left;
    margin-top:10px;
}

.left_container{
    position:fixed;
    width:300px;
    padding:10px;
    z-index:9999;
    height:calc(100% - 60px);
}

.left_container_hide{
    float:left;
    width:300px;
    height:600px;
}

.right_container{
    width:300px;
    padding:10px;
    float:left;
}

.boxes{
    background:var(--fundo-secundario);
    float:left;
    padding:15px;
    width:100%;
}

.border_radius_general{
    border-radius:5px;
}

.post{
    background:var(--fundo-secundario);
    margin-bottom:10px;
    padding:20px;
    overflow:auto;
}

.search_bar{
    float:left;
    background:rgba(255, 255, 255, 0.08);
    width:200px;
    color:#8b8c8c;
    font-weight:bold;
    margin-left:5px;
}

.search_button{
    display:none;
}

.footer_mobile{
    display:none;
}

.menu_icon{
    width:15px;
    height:15px;
}

#feed_load{
    margin-top:10px;
}

.login_input{
    background:#333;
    border:0;
    padding:10px;
    margin-top:10px;
    color:#FFF;
    width:100%;
    font-size:15px;
}

.login_button{
    cursor:pointer;
    background:#8B008B;
    color:#FFF;
    padding:15px;
    width:100%;
    border:0;
    font-weight:bold;
    font-size:18px;
}

.quebra_linha{
    overflow-wrap: break-word; /* Quebra palavras muito longas para evitar estouro */
    word-break: break-word; /* Permite quebra de palavras muito longas */
    white-space: normal; /* Permite quebras de linha normais */  
}

.event_box{
    margin-top:10px;
    float:left;
    width:calc(33.3% - 10px);
    margin:10px 5px;
}

.artist_box{
    float:left;
    width:calc(25% - 10px);
    margin:10px 5px 0px 5px;
}

.event_ver_mais{
    display:block;
}

.events_ver_mais_mobile{
    display:none;
}

.box_filtro{
    background:var(--fundo-secundario);
    padding:10px;
    float:left;
    font-weight:bold;
    cursor:pointer;
    text-align:center;
}

.filtro_evento{
    display:none;

    float:left;
    width:100%;
    margin-bottom:10px;
}

.post_buttons{
    fill:#888;
    cursor: pointer;
}

.post_buttons:hover {
    fill:#8B008B;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 50px white inset;
}


.boun_1 {
    width:300px;
    height:250px;
    margin:10px;
}

.boun_2 {
    width:100%;
    height:60px;
    margin-bottom:20px;
}



@media screen and (max-width: 1200px) {
    .boun_1 {
        width:100%;
        height:auto;
        margin:0;
        margin-bottom:30px;
    }
    .boun_2 {
        width:100%;
        height:auto;
        margin-bottom:20px;
    }
    
    .left_container{
        display:none;
    }

    .center_container{
        width:100%;
        padding:0px 10px;
    }
    .left_container_hide{
        display:none;
    }
    .container_microblog{
        width:600px;
    }
    .search_bar{
        display:none;
    }
    .search_button{
        display:block;
    }
    .footer_mobile{
        position: fixed;
        left:0;
        bottom:0;
        width:100%;
        background:#0e0d12;
        z-index:9999999;
        display: block;
        border-top:1px solid #202020;
        padding-top:10px;
        padding-bottom:20px;
    }
    .post{
        margin-bottom:10px;
    }
    #feed_load{
        margin-top:10px;
    }
}

@media screen and (max-width:600px){
    .outer-container {
        overflow: hidden;
        width: 100%;
    }

    .right_container{
        width:100%;
        padding:0px;
    }

    .container_microblog{
        width:100%;
    }

    .scroll-container {
        display: flex;
        overflow-x: scroll;

        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        scrollbar-width: none; /* Hide scrollbar in Firefox */
    }

    .scroll-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar in WebKit-based browsers */
    }

    .scroll-item {
        display: inline-block;
        min-width: 150px; /* Ajuste conforme necessário */
        box-sizing: border-box;
        margin:10px 5px;
    }

    .event_box{
        width:100%;
    }

    .artist_box{
        width:100%;
    }

    .event_ver_mais{
        display:none;
    }

    .events_ver_mais_mobile{
        display:block;
    }
}