/* 
    Created on : 18/07/2018, 17:00:33
    Author     : ti4
*/

/* GERADOR INFORMAÇÃO */

.gerador-info
{
    display: block;
    width: 100%;

    background-color: #fff;
    font-size: 1rem;
}

.gerador-info-titulo,
.gerador-info-topico,
.gerador-info-subtopico,
.gerador-info-paragrafo
{
    padding: 2px 0px 2px 10px !important;
    text-align: justify;
}

.gerador-info-titulo
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    padding: 5px 5px 5px 10px;

    background: #000;

    text-align: justify;
    color: #fff;
}

.gerador-info-titulo h5
{
    margin: 0;
    height: auto;
    font-size: 1em;
}

.gerador-info-titulo svg
{
    width: 1.4em;
    height: 1.4em;
    margin-right: .75em;
}

.gerador-info-titulo svg path
{
    fill: #fff;
}

.gerador-info-titulo.gerador-info-aviso
{
    background: #cc0000;
    color: #fff;
}

.gerador-info > ul
{
    padding: .4em;
}

.gerador-info li > ul
{
    margin-left: .75em;
}

.gerador-info-topico
{
    font-weight: bold;
    background: yellow;
    color: #000;
    text-transform: uppercase;
}

/* BARRA INFORMAÇÃO */

.cfuncao-informacao
{

}

@media only screen and (max-width: 600px)
{
    .cfuncao-informacao
    {
        height: 4rem;
    }

    .cfuncao-informacao-content
    {
        justify-content: flex-start;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -webkit-flex-direction: row;
        flex-direction: row;
        display: flex;
    }

    .cfuncao-informacao-elem
    {
        width: 4em;
        height: 4em;
    }

    .cfuncao-informacao-elem .gerador-info,
    .cfuncao-informacao-elem .gerador-info .gerador-info-titulo
    {
        width: 100%;
        height: 100%;

        padding: 0;

        justify-content: center;
    }

    .cfuncao-informacao-elem .gerador-info .gerador-info-titulo svg
    {
        width: 2.8em;
        height: 2.8em;
        margin-right: 0;
    }

    .cfuncao-informacao-elem .gerador-info .gerador-info-titulo h5
    {
        display: none;
    }

    .cfuncao-informacao-elem .gerador-info > ul
    {
        display: none;
        position: absolute;
        top: 4em;
        left: 0;

        padding: .3em .5em;

        width: 100%;

        background-color: #fafafa;

        -webkit-box-shadow:
            0 2px 2px 0 rgba(0, 0, 0, 0.14), 
            0 1px 5px 0 rgba(0, 0, 0, 0.12), 
            0 3px 1px -2px rgba(0, 0, 0, 0.2);
        box-shadow: 
            0 2px 2px 0 rgba(0, 0, 0, 0.14), 
            0 1px 5px 0 rgba(0, 0, 0, 0.12), 
            0 3px 1px -2px rgba(0, 0, 0, 0.2);

        transition: all ease-out .2s;
        z-index: 10;
    }

    .cfuncao-informacao-elem:hover .gerador-info > ul
    {
        display: block;
    }

    .cfuncao-informacao-elem .gerador-info .gerador-info-titulo,
    .cfuncao-informacao-elem .gerador-info .gerador-info-titulo svg path
    {
        transition: all ease-in-out .2s;
    }

    .cfuncao-informacao-elem:not(:hover) .gerador-info .gerador-info-titulo
    {
        background-color: #fff;
    }

    .cfuncao-informacao-elem:not(:hover) .gerador-info .gerador-info-titulo svg path
    {
        fill: #000;
    }

    .cfuncao-informacao-elem:not(:hover) .gerador-info .gerador-info-titulo.gerador-info-aviso svg path
    {
        fill: #cc0000;
    }

}