/* container de pie charts, bar charts, titulos */
.shadowforce {
    user-select     : none;
    margin          : auto;
}


/* titulo do componente */
.shadowforce_title {
    text-align      : center;
    color           : white;
}


/* título dos graficos (barras) e seus media queries */
.shadowforce_chart_title {
    font-size       : 11px;
    font-weight     : bold;
    text-align      : center;
    padding         : 0;
    color           : white;

    margin-top      : 10px;
    /*border: 2px red solid;*/
}


/* container de gráfico barras */
.shadowforce_bar_chart_container {
    width           : 98%;
    aspect-ratio    : 0.65;
    padding         : 0;
    margin          : auto;
    margin-top      : 10px ;
}


/* container dos graficos de pizza*/
.shadowforce_trend_chart_container,
.shadowforce_pie_chart_container {
    position        : relative;
    display         : flex;
    justify-content : center;
    align-items     : center;

    width           : 100% !important;
    aspect-ratio    : 1.3;
    margin-top      : 10px;

    /*border: 2px solid red;*/

}


/* propriedades a se colocar a mais no gráfico */
.shadowforce_trend_chart_adapt {

    width           : 52% !important;
    margin          : auto;
}


/* conjunto de titulo + gráfico*/
.shadowforce_whole_trend_component {

    margin-top      : 10px;
    margin-left     : auto;
    margin-right    : auto;
    margin-bottom   : auto;
}


.shadowforce_screen_too_small {

    display         : none;
    justify-content : center;
    align-items     : center;
    text-align      : center;

    height          : 100% !important;
    color           : white ;
}



/* media queries */
/*
@media screen and (max-width: 768px) {

    .shadowforce_chart_title    { font-size: 10px;  }
    .markers_div.neg            { font-size: 8px; }
    .markers_div.pos            { font-size: 8px; }

}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .shadowforce_chart_title    { font-size: 10px;  }
    .markers_div.neg            { font-size: 8px; }
    .markers_div.pos            { font-size: 8px; }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .shadowforce_chart_title    { font-size: 10px;  }
    .markers_div.neg            { font-size: 10px; }
    .markers_div.pos            { font-size: 10px; }
}

@media screen and (min-width: 1201px) {
    .shadowforce_chart_title    { font-size: 10px;  }
    .markers_div.neg            { font-size: 12px; }
    .markers_div.pos            { font-size: 12px; }
}
*/


@media (max-width: 1024px)
{
    .shadowforce_screen_too_small   { display : flex; }
}