/*Sistema de GRID manual baseado nos grids BOOTSTRAP*/
/* reset */

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* container */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 20px;
}

@media (min-width: 1170px) {
    .container {
        max-width: 900px;
        padding: 0;
    }
}

/* configuração linha */
.row {
    margin: 0;
    padding: 0;
    /* margin-left: -5px; */
    /* margin-right: -5px; */
}

    .row:before,
    .row:after {
        content: "";
        display: table;
    }

    .row:after {
        clear: both;
    }

/* configuração coluna */
.col {
    display: inline-block;
    vertical-align: top;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    margin-right: -4px;
}

    @media (min-width: 480px){
        .col-2 {
            width: 50%;
        }
    }

    @media (min-width: 728px){
        .col-3 {
            width: 33.3333%;
        }
    }


    /* Painel de login */
    @media (min-width: 728px){
        .col-login-3 {
            width: 30%;
            padding: 0;
        }

        .col-login-7 {
            width: 70%;
            padding: 0;
        }
    }

    /* dashboard */
    @media (min-width: 728px){
        .col-dashboard-1 {
            width: 6%;
            padding: 0;
        }

        .col-dashboard-2 {
            width: 11%;
            padding: 0;
        }

        .col-dashboard-7 {
            width: 83%;
            padding: 0;
        }
    }

    @media (min-width: 1200px) and (max-width: 1399.98px) {
        .col-dashboard-1 {
            width: 7%;
            padding: 0;
        }

        .col-dashboard-2 {
            width: 13%;
            padding: 0;
        }

        .col-dashboard-7 {
            width: 80%;
            padding: 0;
        }
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        .col-dashboard-1 {
            width: 8%;
            padding: 0;
        }

        .col-dashboard-2 {
            width: 15%;
            padding: 0;
        }

        .col-dashboard-7 {
            width: 77%;
            padding: 0;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .col-dashboard-1 {
            width: 10%;
            padding: 0;
        }

        .col-dashboard-2 {
            width: 0%;
            padding: 0;
            display: none;
        }

        .col-dashboard-7 {
            width: 90%;
            padding: 0;
        }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        .col-dashboard-1 {
            width: 10%;
            padding: 0;
        }

        .col-dashboard-2 {
            width: 0%;
            padding: 0;
            display: none;
        }

        .col-dashboard-7 {
            width: 90%;
            padding: 0;
        }
    }