.grid {
    width:100%;
}

.botoes-grid {
    margin-bottom: 10px;
}

.grid > .head > div {
    display:inline;
    padding-left:20px;
}

.grid > .head > div > i {
    position: absolute;
    left:5px;
    top:5px;
    cursor:pointer;
}

.grid > span {
    white-space:nowrap
}

.grid > .footer {
    height:30px;
    min-height:30px;
    background-color: #F7F7F7;
}

@media screen and (min-width: 768px) {
    .grid .head
    {
        font-weight: bold;
        line-height:35px;
        height:35px;
        vertical-align: middle;
        border:1px solid #dddddd;
        background-color: #F7F7F7;
        font-size:16px;
    }

    .grid .body{
        border-left:1px solid #dddddd;
        border-right:1px solid #dddddd;
    }

    .grid .body > div > header{
        display:none;
    }
    .grid .body > div > div
    {
        display:inline;
        white-space:nowrap;
        text-overflow: ellipsis;
    }
    .grid .body > div:hover{
        background-color: #2C3E50;
        color:#FFF;
        cursor:pointer;
    }

    .grid .body > div > div > label {
        display: none;
    }

    .grid .body > div > div > span {
        display: inline-block;

    }

    .grid  .body > div{
        line-height:25px;
        height: 25px;
        border-bottom: 1px solid #dddddd;
    }

}

@media screen and (max-width: 767px) /* Mobile */ {
    .grid > .head {
        display: none;
    }

    .grid > .footer{
        display:none;
    }

    .grid > .paginator{
        display: none;
    }
    .grid > .body > div > header
    {
        font-weight: bold;
        line-height:30px;
        height:30px;
        vertical-align: middle;
        border:1px solid #1D96B2;
        background-color: #1D96B2;
    }

    .grid > .body > div{

        border:2px solid #1D96B2;
        margin-bottom:10px;
    }

    .grid > .body > div > div{
        height:25px;
        line-height: 25px;
        vertical-align: middle;
        min-height:25px;
        border-bottom:1px solid #dddddd;
        clear:both;
    }
    .grid > .body > div > div > label{
        float:left;
    }
    .grid > .body > div > div > span{
        float:right;
    }
}

.menuMostrarColunas {
    max-width: 350px;
    height: 300px;
}

.menuMostrarColunasFieldset {
    border: 0;
    height: 210px;
    font-size: 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

.menuMostrarColunasTitulo {
    padding: 5px;
    color: #FFFFFF;
    background: #3f51b5;
    border-radius: 4px 4px 0 0;
}

.menu {
    top: 0;
    cursor: pointer;
    position: fixed;
    min-width: 140px;
    border-radius: 4px;
    background-color: #FFF;
    border: 2px solid #DDDDDD;
}

.menu > ul {
    margin:0;
    padding:0;
    list-style: none;
}

.menu > ul > li {
    padding: 5px;
    vertical-align: middle;
    border-bottom: 1px solid #DDDDDD;
}

.menu > ul > li:hover {
    background-color: #f4efef;
}

.body-table > tr:hover {
    background-color: #f4efef;
}

.item-selecionado {
    background-color: #f4efef;
}

.text-pagination {
    font-size: 12px;
    color: #808080;
    margin-bottom: -5px;
}