body {
    margin: 0;
    padding: 0;
    background-image: none;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    color: #222222;
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

.mainClient {
    width: 980px;
    margin: 10px auto;
}

h1 {
    font-size: 15px;
}
.mobileMenuButton {
    display:none; 
}

.mt-2 {
    margin-top: 0.5rem;
}

@media (max-width:768px) {
    .pageHeader h2 {
        padding: 0 10px;
    }
    input[type=text], input[type=password], select {
        width:100%; 
    }

    .mainClient {
        width: 100%;
        margin: 0;
    }

        .mainClient > div {
            padding-left: 0 !important;
        }

    .divPersonnelHeaderMessage, .kalendae .k-separator, .staffImage {
        display: none;
    }

    .mobileMenuButton {
        display:block;
        font-size: 28px;
        color: #666;
        position: absolute;
        top: 12px;
        right: 10px;
    }

    .kalendae .k-calendar {
        display: block;
        width: 100%;
    }

    .divTabs {
        margin-right: 10px !important;
    }

    .divPersonnelMainMenu {
        position: absolute;
        top: 50px;
        right: 0px;
        margin: 0 !important;
        padding: 0;
        z-index: 9999;
        display: none;
        box-shadow: 0 0 5px #999;
    }

        .divPersonnelMainMenu a {
            float: none;
            border-right: none !important;
            padding: 10px 20px;
        }

    .divPersonnelHeader, .divPersonnelHeaderTable {
        width: 100% !important;
        height: auto !important;
        background-image: none !important;
    }

    .divPersonnelHeaderTable {
        background-color: #ededed;
        box-shadow: 0 0 5px #999;
    }


        .divPersonnelHeaderTable table {
            height: auto !important;
        }

    .divPersonnelHeader img {
        padding: 5px 0;
    }

    #divFilters.pageHeader {
        padding: 0;
        margin: 0;
    }

        #divFilters.pageHeader table, #divFilters.pageHeader table tbody, #divFilters.pageHeader table tbody tr, #divFilters.pageHeader table tbody tr td, .shiftDetails > table, .shiftDetails > table tbody, .shiftDetails > table > tbody > tr, .shiftDetails > table > tbody > tr > td, .details table, .details table tbody, .details table tbody tr, .details table tbody tr td {
            display: block;
            background-color:transparent!important;
        }

    .details table {
        float:none!important; 
    }


    .staffInfo {
        width:100%!important; 
        margin:0;
    }

        .staffInfo table tr {
            padding-top:10px;
            color:#999;
        }
        .staffInfo table td {
            padding:0 10px;
        }

        .staffInfo span {
            right:0; 
        }

        .divMobileMainContent {
            padding: 0 !important;
        }

    .list {
        width: 100%;
        overflow-x: auto;
        height: auto !important;
        padding-bottom:10px;
    }

    #divShiftAdditionalInfo > div, .popUpContent > div {
        width: 100% !important;
    }

    .dayShift {
        padding-left: 0;
    }

    #btnExcel.button, #aPersonnelInvoice {
        display: none;
    }
    .button {
        margin-right:10px; 
    }
    #map {
        width:100%!important; 
        min-width:250px;
    }

    .descriptionPopUp {
        display: block;
        margin: 15px;
    }
    .PopUpBox {
        max-height:100%;
        overflow:auto;
    }
}