/*------------------------- responsive ---------------------------*/
/*------------------------- menu button ---------------------------*/

div.navbar-header button.navbar-toggle {
    border-left:1px solid #ddd;
    border-radius: 0px;
    border-bottom:0px;
    border-right:0px;
    border-top:0px;
    padding: 18px;
    height: 59px;
    width: 60px;
    margin: 0px;
}

div.navbar-header button.navbar-toggle:hover {background-color: #f3f3f3;}
div.navbar-header button.navbar-toggle:hover span{background-color: #37bc9b;}

/*------------------------- media query ---------------------------*/

@media (max-width: 767px) {

    footer{display: none !important;}

    div.navbar-collapse{
        background-color: #fff;
        min-height: 350px;
        box-shadow: none;
        border: none;
    }

    .navbar .nav.header_menu{float: none !important;}

    .navbar .nav.header_menu > li{
        margin: 0 0 0 -15px;
        float: none;
    }

    div.checkboxContainer{margin: 10px 0px 20px 0px;}

    div.monthes_container,
    div.years_container,
    div.legend_container{float: none !important;}

    div.years_container{
        display: inline-block;
        margin: 15px 0 0 15px !important;
    }

}

@media (max-width: 760px) {

    .tab-content .grid-view table tbody tr,
    table.table tbody tr{border:none !important;}

    .tab-content .grid-view table tbody tr.even td,
    table.table tbody tr.even td{background-color: #f6f6f6 !important;}

    .tab-content .grid-view table tbody tr.odd td,
    table.table tbody tr.odd td{background-color: #fff !important;}

    .tab-content .grid-view table tbody tr td,
    table.table tbody tr td {
        width: 100% !important;
        border-right: 0px;
        border-left: 0px;
        padding: 8px 15px;
    }

    table.presence_sheet_employee tbody tr td{
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        padding: 8px 15px;
    }

    .tab-content .grid-view table tbody tr td.actions_container,
    table.table tbody tr td.actions_container{
        border-bottom: 1px solid #ccc !important;
        border-left: 0px !important;
        text-align:left !important;
        width:auto !important;
    }
}

@media (max-width: 520px) {

    h1{
        max-width: 190px;
    }

}

@media (max-width: 395px) {

    h1{
        max-width: 100px;
    }

}