@media (max-width:800px){

/* -------------------------
GERAL
--------------------------*/

body{

overflow-x:hidden;

}

.main{

margin-left:0!important;

width:100%!important;

padding:12px!important;

}

.sidebar{

position:relative!important;

left:0!important;

width:100%!important;

height:auto!important;

padding:12px!important;

border-radius:0 0 30px 30px;

}

/* -------------------------
HOME
--------------------------*/

.brand-card{

padding:12px!important;

min-height:390px!important;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.mascot{

height:330px!important;

margin:0 auto -70px!important;

}

.logo{

width:95%!important;

max-width:360px;

margin:0 auto!important;

}

/* -------------------------
MENU
--------------------------*/

.desktop-nav{

display:none!important;

}

.mobile-nav{

display:grid!important;

grid-template-columns:repeat(5,1fr);

gap:10px;

margin-top:-30px;

margin-bottom:18px;

}

.mobile-btn{

background:#fff;

border:none;

border-radius:20px;

height:82px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

font-size:22px;

font-weight:700;

box-shadow:0 8px 20px rgba(0,0,0,.12);

transition:.2s;

}

.mobile-btn.active{

background:#ff6fa8;

color:#fff;

}

/* -------------------------
PORTAL
--------------------------*/

.values{

display:none!important;

}

/* -------------------------
CARDS
--------------------------*/

.metrics{

grid-template-columns:1fr!important;

gap:14px;

}

.metric{

min-height:110px;

}

/* -------------------------
GRIDS
--------------------------*/

.grid{

display:grid!important;

grid-template-columns:1fr!important;

gap:18px;

}

.ranking-grid{

grid-template-columns:1fr!important;

}

/* -------------------------
PAINÉIS
--------------------------*/

.panel{

padding:20px!important;

min-height:auto!important;

}

/* -------------------------
DONUT
--------------------------*/

.donut-row{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:20px;

}

.donut{

width:230px!important;

height:230px!important;

margin:auto;

}

.donut:after{

width:135px!important;

height:135px!important;

}

.donut b{

font-size:42px!important;

}

.donut span{

font-size:16px!important;

margin-top:62px!important;

}

.mini-stats{

width:100%;

}

.mini-stats div{

margin-bottom:12px;

}

/* -------------------------
GRÁFICOS
--------------------------*/

.chart{

display:flex;

justify-content:center;

align-items:center;

width:100%;

}

.chart svg{

width:100%!important;

max-width:360px!important;

height:auto!important;

display:block;

margin:auto;

}

.chart-weeks{

display:flex;

justify-content:space-between;

align-items:center;

width:100%;

max-width:360px;

margin:10px auto 0;

font-size:13px;

font-weight:700;

padding:0 10px;

}

/* -------------------------
LEGENDA
--------------------------*/

.legend-row{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:16px;

}

/* -------------------------
TOP 5
--------------------------*/

.bar{

grid-template-columns:70px 1fr 45px;

}

/* -------------------------
TABELAS
--------------------------*/

.table-panel{

overflow-x:auto;

}

table{

min-width:760px;

}

}

/* CELULARES PEQUENOS */

@media (max-width:430px){

.mascot{

height:290px!important;

}

.logo{

width:100%!important;

}

.donut{

width:210px!important;

height:210px!important;

}

.page-head h2{

font-size:34px!important;

}

}