/*@media only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 1280px) and (device-height: 720px),only screen and (-webkit-min-device-pixel-ratio: 1) and (device-width: 1920px) and (device-height: 1080px), only screen and ( min--moz-device-pixel-ratio: 1) and (device-width: 1280px) and (device-height: 720px),only screen and ( min--moz-device-pixel-ratio: 1) and (device-width: 1920px) and (device-height: 1080px), only screen and ( -o-min-device-pixel-ratio: 1/1) and (device-width: 1280px) and (device-height: 720px),only screen and ( -o-min-device-pixel-ratio: 1/1) and (device-width: 1920px) and (device-height: 1080px), only screen and ( min-device-pixel-ratio: 1) and (device-width: 1280px) and (device-height: 720px),only screen and ( min-device-pixel-ratio: 1) and (device-width: 1920px) and (device-height: 1080px), only screen and ( min-resolution: 96.00dpi) and (device-width: 1280px) and (device-height: 720px),only screen and ( min-resolution: 96.00dpi) and (device-width: 1920px) and (device-height: 1080px), only screen and ( min-resolution: 1.00dppx) and (device-width: 1280px) and (device-height: 720px),only screen and ( min-resolution: 1.00dppx) and (device-width: 1920px) and (device-height: 1080px) {*/
/*@media only screen and (max-device-width: 480px) {*/
@media only screen and (max-width: 480px) {


    .mainWrapper.withMenu, .appMainContainer.withMenu {
        /*-moz-transform: translateX(280px);
        -ms-transform: translateX(280px);
        -o-transform: translateX(280px);
        -webkit-transform: translateX(280px);
        transform: translateX(280px);*/
        background-color: rgba(255, 255, 255, 0.72);
        -ms-filter: blur(2px);
        -webkit-filter: blur(2px);
        filter: blur(2px);
        pointer-events: none;
    }

    .QLinks li a, .appMainMenu li a, .myReportsMenu a, .reportBtns, .ObjBtn {
        min-height: 30px;
        padding: 4px 6px;
    }

    .siteHeader {
        height: 38px;
    }

    .appLogo {
        height: 40px;
        padding: 5px 0px;
    }

        .appLogo .csLogo {
            height: 30px;
        }

    .forgetPass .appLogo .csLogo {
        height: 34px;
    }


    form#logoutForm {
        margin: 0;
    }

    .logOut {
        padding: 10px 0;
        width: 40px;
        margin: 0 5px;
        font-size: 12px;
    }

    .appMainMenu li a:hover, .appMainMenu li a {
        padding: 5px;
    }

    .master-controlpanel .master-user .master-userImage {
        height: 30px;
        width: 30px;
    }

    .appSideMenu {
        width: 40px;
        padding: 13px 0;
    }

    select[id*=WebGroupBox3_WCalender_] {
        padding: 0px;
        vertical-align: top;
        display: inline-block;
    }

    .appMainMenu {
        width: 100%;
    }

        .appMainMenu > table tr {
            padding-left: 0;
        }

            .SideMenuItmActive, .appMainMenu > table tr[onmouseover^="Menu_"] {
                padding-left: 20px;
            }



    #ctl00_ContentPlaceHolder1_WebGroupBox3_lstDate:focus {
        border-radius: 4px;
    }

    .appLogo {
        padding: 10px 0 0;
    }

        .appLogo .csLogo {
            height: 25px;
        }

    .UserCard, .widgetContainer {
        max-height: 100%;
        height: auto;
    }

    .moduleName {
        margin: 5px 0;
        height: 15px;
        padding: 0px 0px 0px 5px;
        display: none;
    }

        .moduleName h4 {
            font-size: 12px;
        }

    .clear {
        height: 15px;
    }

    .modal-footer .btn + .btn {
        margin-left: auto;
        margin-bottom: 5px;
    }

    .btn + .btn {
        margin-bottom: 5px;
    }

    [class^='ctl00_Menu1_EssMenu_'] a[class^='ctl00_Menu1_EssMenu_'] {
        font-size: 17px;
        font-weight: 300;
    }

    .ProperCase {
        font-size: 14px;
        padding: 8px 0;
        text-align: right;
    }

    .loginArea {
        -moz-animation: 2.5s loginfadeIn forwards;
        -o-animation: 2.5s loginfadeIn forwards;
        -webkit-animation: 2.5s loginfadeIn forwards;
        animation: 2.5s loginfadeIn forwards;
        -moz-animation-timing-function: linear;
        -o-animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

    /*body:before {
        -moz-animation: 5s forwards backgroundAnimation, spinEarth 200s linear infinite;
        -o-animation: 5s forwards backgroundAnimation, spinEarth 200s linear infinite;
        -webkit-animation: 5s forwards backgroundAnimation, spinEarth 200s linear infinite;
        animation: 7s forwards backgroundAnimation, spinEarth 200s linear infinite;
        -moz-animation-timing-function: ease-out;
        -o-animation-timing-function: ease-out;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }*/

    .loginArea {
        top: calc(38% - 30vh);
        top: 60px;
        margin-bottom: 0px;
    }

    .mainWrapper {
        height: 100%;
        height: calc(100% - 60px);
    }

    .btn-row {
        margin: 30px 0 15px 0;
    }

    .btn {
        border-radius: 0;
        margin-bottom: 5px;
    }

    .form-control, select, input[type=text], select[size] {
        height: 40px;
        font-size: 14px;
        line-height: 40px;
    }

    textarea.form-control {
        height: 70px;
        line-height: 1.2em  !important;
    }

    .control-label {
        font-size: 14px;
        font-weight: 200 !important;
        font-family: monteserat,sans-serif !important;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .form-align {
        line-height: initial;
        padding-left: 30px;
    }

    li.MainMenu ul a {
        font-size: 16px;
    }

    li.MainMenu > a {
        font-size: 18px !important;
    }

    .dashBoardArea {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }

    .dashBoardArea, .contentArea {
        width: 100vw;
        padding: 0px;
        margin: 0;
    }

    .widget {
        width: 100vw;
        margin-bottom: 0 !important;
        flex: 1 0 100%;
        height: 37%;
    }

        .widget .widgetContainer {
            display: block;
            flex-flow: column wrap;
            justify-content: flex-end;
            background-color: rgba(52, 73, 94, 0.65);
            height: 30%;
            position: absolute;
            bottom: 0px;
        }

    .widgetHeader {
        text-align: left;
        margin: 10px 0 0;
    }

    .loginArea .widgetHeader {
        margin: 0;
    }

    .widgetIcon {
        font-size: 7vw;
        float: left;
        margin: 0 10px;
        line-height: 2;
    }

    .widgetLinks {
        padding: 0 5px;
        display: inline-block;
    }

    .widgetListItem {
        float: left;
        padding: 0 5px;
    }

    .leaves .widgetListItem {
        width: 50%;
    }

    .Travel .widgetListItem {
        width: 50%;
    }

    .Requests .widgetListItem {
        width: 100%;
    }

    .Payslips .widgetListItem {
        width: 50%;
    }

    .QLinks li a, .appMainMenu li a, .myReportsMenu a, .reportBtns, .ObjBtn, td.SideMenuItm, td.SideMenuItmOver, .SideMenuItmActive, [onmouseover^="Menu_"], .MainMenu a {
        font-size: 16px;
        background-color: transparent;
        margin-bottom: 0;
        border-top: none;
        color: #dedede;
    }


    .QLinks li a, .appMainMenu li a, .myReportsMenu a, .reportBtns, .ObjBtn {
        min-height: 25px;
        padding: 5px 0;
    }


    .openWidget .widgetContainer {
        height: 100%;
    }

    .openWidget .reportTitle {
        font-size: 22px;
    }

    .openWidget .widgetIcon {
        font-size: 20px;
        float: left;
        /*margin: 10px;*/
    }

    .openWidget .QLinks {
        display: block;
    }

    .QLinks .linksHeader {
        display: none;
    }

    .panel-body {
        overflow-x: auto;
    }

    td[id*='_WCalender_'] {
        width: 30px;
    }

    .OVH {
        overflow: hidden;
    }

    #lstLeaveType td {
        display: block;
        width: 100% !important;
    }

    #lstLeaveType tr:nth-child(2) {
        display: table-cell;
    }

    #lstLeaveType td[valign="middle"] {
        transform: rotate(90deg) translateY(-60px);
        height: 60px;
    }
    .WideInsmall {
            padding-right: 0px !important;
    padding-left: 0px !important;
    }
    footer {
    margin-top: 3em;
}
    .loginArea .loginLinks {
        margin-bottom:0px !important;
    }
   .loginArea  .btn-row {
    margin: 0px 0 15px 0 !important;
}
    .loginBtn {
            margin: 10px 0 !important;
    }
}

@-moz-keyframes backgroundAnimation {
    0% {
        -moz-transform: scale(.3);
        -ms-transform: scale(.3);
        -o-transform: scale(.3);
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }

    100% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes backgroundAnimation {
    0% {
        -moz-transform: scale(.3);
        -ms-transform: scale(.3);
        -o-transform: scale(.3);
        -webkit-transform: scale(.3);
        transform: scale(.3);
        -ms-filter: blur(6px) sepia(1);
        -webkit-filter: blur(6px) sepia(1);
        filter: blur(6px) sepia(1);
    }

    100% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: blur(0) sepia(0);
        -webkit-filter: blur(0) sepia(0);
        filter: blur(0) sepia(0);
    }
}

@keyframes backgroundAnimation {
    0% {
        -moz-transform: scale(.3);
        -ms-transform: scale(.3);
        -o-transform: scale(.3);
        -webkit-transform: scale(.3);
        transform: scale(.3);
        -ms-filter: blur(6px) sepia(1);
        -webkit-filter: blur(6px) sepia(1);
        filter: blur(6px) sepia(1);
    }

    100% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: blur(0) sepia(0);
        -webkit-filter: blur(0) sepia(0);
        filter: blur(0) sepia(0);
    }
}

/* ========================== === ========================= */

@-moz-keyframes loginfadeIn {
    0% {
        -moz-transform: scale(.2);
        -ms-transform: scale(.2);
        -o-transform: scale(.2);
        -webkit-transform: scale(.2);
        transform: scale(.2);
    }

    100% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes loginfadeIn {
    0% {
        -moz-transform: scale(.2);
        -ms-transform: scale(.2);
        -o-transform: scale(.2);
        -webkit-transform: scale(.2);
        transform: scale(.2);
    }

    100% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes loginfadeIn {

    0% {
        opacity: 0;
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        opacity: 0;
        -moz-transform: scale(.2);
        -ms-transform: scale(.2);
        -o-transform: scale(.2);
        -webkit-transform: scale(.2);
        transform: scale(.2);
    }

    100% {
        opacity: 1;
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

}