/* body{
    background-color: palevioletred;
    background-color: beige;
} */
/* 1080dp
720dp
540dp
480dp
360dp */


@media only screen and (max-width: 1250px) {

    /* ==========header.php========== */
    .bg-logo {
        height: 40px !important;
        padding: 10px 0 10px 10px !important;
        text-align: start;
    }

    .div-header {
        display: block;
        padding: 2vh;
        text-align: center;
    }

    .div-header-bars {
        position: relative;
        display: inline-block !important;
        width: 40px;
        font-size: 36px !important;
        padding: 0 1vh;
        color: gray;
        cursor: pointer;
    }

    .div-header-bars>i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .div-header-menu {
        position: fixed;
        display: none;
        width: 90%;
        height: calc(100%);
        margin-top: 60px;
        white-space: nowrap;
        background-color: #F8F8FF;
        opacity: .95;
		text-align: center;
    }

    .div-sub-header {
        position: relative;
        display: block;
        width: 100%;
        margin-top: 14px;
    }

    /* ==========mainpage.php========== */
    .div-display {
        top: 60px;
        top: 40px;
        height: calc(100% - 109px);
        height: calc(100% - 90px);
        min-height: 380px;
        padding-bottom: 46px;
    }

    /* ==========login.php========== */
    .div-login {
        margin-top: 52px;
    }
}


@media only screen and (max-width: 1100px) {

    /* ==========profileDetailEdit.php========== */
    .slice-third {
        width: 49% !important;
    }
}


@media only screen and (max-width: 800px) {

    /* ==========login.php========== */
    .div-login {
        height: calc(100% - 84px) !important;
        margin-top: 42px !important;
        margin-bottom: 42px !important;
    }

    .div-login>.block2 {
        top: calc(50% - 70px) !important;
        width: auto !important;
    }

    .div-login-bg-left {
        width: 110px !important;
        top: calc(50% + 220px) !important;
        left: calc(50%) !important;
    }

    .login-box {
        background-color: #FFFFFF;
        border: 10px solid white;
        box-shadow: #4d94ff 6px 6px 22px -6px;
    }


}


@media only screen and (max-width: 640px) {

    /* ==========changePassword.php========== */
    .slice-first {
        max-width: 85% !important;
    }

    /* ==========profileDetailEdit.php========== */
    .slice-first,
    .slice-third {
        width: 100% !important;
    }

    /* ==========requestFormWeb.php========== */

    .div-detail {
        margin: 10px 5% !important;
    }

    .div-table {
        margin: 0 5% !important;
        margin-bottom: 30px !important;
        background: none !important;
    }

    .div-table-body {
        margin: 15px 0;
    }

    .div-table-body>label {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 10px;
        font-size: 14px;
        /* color: grey; */
    }

    .div-table-body>input[type="text"] {
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 700;
        margin-top: 20px;
        width: 95% !important;
        background: #FFFFFF;
        border: 1px solid #f7f9fc !important;
        /* border-radius: 5px; */
        line-height: 42px !important;
        margin-left: 0;
    }

    .div-table-body.checkbox-fill {
        padding-left: calc(5% + 5px) !important;
    }

    .div-table-body.checkbox-fill>label {
        position: inherit !important;
        width: calc(100% - 50px) !important;
        padding-left: calc(5%);
    }

    .div-table-body.checkbox-fill>input[type="text"] {
        margin-top: 5px;
    }

    input[type="text"]:disabled,
    input[type="number"]:disabled,
    textarea:disabled {
        background: #F3F3F3;
        opacity: 0.8;
    }

    /* ==========dataProtection.php========== */
    .table-striped.dataprotection>thead>tr>th:nth-child(1),
    .table-striped.dataprotection>tbody>tr>td:nth-child(1) {
        display: none;
    }

    .title-detail {
        width: 100% !important;
        top: 5%;
        left: 50%;
        font-size: 30px !important;
    }

    .title-bg1 {
        height: 50%;
        left: 50% !important;
        transform: translate(-50%, 0%) !important;
    }

    .title-bg2 {
        height: 25%;
        bottom: calc(0% + 16px);
        left: 50% !important;
        transform: translate(-50%, 50%);
        width: 100px;
        background-repeat: repeat;
    }

    .option {
        padding-top: 0 !important;
    }


    /* ==========changePassword.php========== */
    .title-bg3 {
        height: 25%;
        bottom: calc(0% + 30px);
        left: 50% !important;
        transform: translate(-50%, 50%);
        width: 84px;
        background-repeat: repeat;
    }

    /* ==========paySlip.php========== */
    .bf-btn-info{
        display: block;
    }
    
    /* ==========paySlipManage.php========== */
    /* .table-striped.payslip>thead>tr>th:nth-child(1),
    .table-striped.payslip>tbody>tr>td:nth-child(1) {
        display: none;
    } */
}