/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21/07/2018, 20:15:26
    Author     : ti4
*/

/* BARRA */

.bar-aux-cfuncao
{
    font-size: 1rem;
    padding: 0px !important;
    margin: 0px !important;
}

.bar-aux-cfuncao-container{
    overflow-y: hidden;
    overflow-x: auto;
}

/* ITENS GENERICOS */

.cfuncao-item-aux
{
    font-size: 1Em;
}

.cfuncao-item-aux .cfuncao-item-aux-content > div > ul > li .collapsible-header,
.cfuncao-item-aux .cfuncao-item-aux-content > div > ul > li .collapsible-body
{
    padding: 0px !important;
}

cfuncao-item-aux svg
{
    width: 36px;
    height: 36px;
}

.cfuncao-item-aux-titulo
{
    /*display: block;*/
    padding: 5px 5px 5px 10px;
    width: 100%;
}

.cfuncao-item-aux-content
{
    padding: 0px 0px 6px 0px;
}

.cfuncao-item-aux-titulo svg
{
    width: 1em;
    height: 1em;
    padding: 3px;
}

.cfuncao-item-aux.btn-filter
{
    display: none;
}
.cfuncao-item-aux.btn-filter a
{
    border: 1px solid #ccc;
}

@media only screen and (max-width: 600px)
{
    .bar-aux-cfuncao
    {
        width: 100%;
        height: 3.5Em;
    }

    .bar-aux-cfuncao-container
    {
        position: fixed;
        z-index: 1000;

        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: flex-start;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;

        width: 100%;
        max-height: 3.5Em;

        background-color: #fff;

        -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);
    }
    .cfuncao-item-aux
    {
        width: 3.5Em;
        height: 3.5Em;
        display: none;
    }

    .cfuncao-item-aux-titulo
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;

        padding: 0;
        width: 100%;
        height: 100%;

        background-color: #fafafa;
        border-bottom: none;
    }
    .cfuncao-item-aux-titulo > .display
    {
        padding:  0px;
        border: 0px solid #ccc;
    }

    .cfuncao-item-aux-titulo span
    {
        display: none;
    }
    .cfuncao-item-aux-titulo,
    .cfuncao-item-aux-titulo svg,
    .cfuncao-item-aux-titulo svg fill
    {
        transition: all ease-in-out .2s;
    }

    .cfuncao-item-aux:hover .cfuncao-item-aux-titulo
    {
        background-color: #c0c0c0;
    }

    .cfuncao-item-aux:hover .cfuncao-item-aux-titulo svg
    {

    }

    .cfuncao-item-aux:hover .cfuncao-item-aux-titulo svg fill
    {
        fill: #333;
    }

    .cfuncao-item-aux-content
    {
        display: none;
        position: fixed;
        top: 90px;
        left: 0;

        /*padding: .3em .5em .3em .5em;*/
        padding: 1em;

        width: 100%;

        font-size: 1.2Em;
        color: #000;

        -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-item-aux:hover .cfuncao-item-aux-content
    {
    }

    .cfuncao-item-aux.btn-filter
    {
        margin: auto;
        padding: 0px;
        display: block;
    }
}