@media (max-width: 530px) {

    /* MENU */

    .horizontal-app-menu .menu-bar > ul > li.open > a {
        color: #ffffff !important;
    }

    .horizontal-app-menu .menu-bar ul li > ul {
        background: #ffffff !important;
    }

    /* header */

    .horizontal-app-menu .header .page-title {
        font-size: 8px;
        line-height: 8px;
        margin-left: 0;
    }

    .sm-padding-10 {
        padding: 0 !important;
    }

    .ez-dashboard__row {
        margin: 0;
    }

    /* card */

    .card .card-header {
        flex-direction: column;
    }

    .ez-card__header-title,
    .ez-card__header-right {
        width: 100%;
    }

    .ez__table-controls {
        flex-direction: column;
    }

    .ez__table-controls a.btn {
        width: 100%;
        margin: 10px 0;
    }

    .ez__table-controls h1 {
        display: none;
    }

    /* TIMESHEET */

    .btn-group {
        flex-wrap: wrap;
    }

    .ez-timesheet__inner-container {
        padding: 0 0 !important;
    }

    .ez-form__section-header {
        font-size: 20px;
    }
    #select-start-date-btn {
        white-space: normal;
        line-height: 28px;
        margin-left: 10px;
        margin-right: 10px;
        height: 100% !important;
        max-height: 100% !important;
        top-padding: 20px;
    }
    #timesheet-time-modal .modal-dialog,
    #timesheet-pay-period-modal .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;

    }

    #timesheet-time-modal .modal-content,
    #timesheet-pay-period-modal .modal-content {
        height: calc(100vh - 46px);
        margin-top: 46px;
    }

    #timesheet-pay-period-modal .select2-selection__rendered {
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .modal-backdrop {
        z-index: -1;
    }

    /* TIMESHEET FORM */

    .lock-timesheet-status {
        margin-bottom: 10px;
    }

    .form-group-default {
        box-shadow: unset;
    }

    .ez__form-title {
        background-color: #ffffff;
    }

    .ez__form-title span {
        border: 1px solid #ffffff;
    }

    .hide-form-title .ez__form-title {
        display: block;
    }

    .time-section .input-group-append {
        display: none;
    }

    .time-section-toggle {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 25px;
        z-index: 1064;
        cursor: pointer;
        top: 5px;
        display:block;
    }

    .time-section-toggle:before {
        content: "\e986";
        color: #000000;
        font-size: 40px;
        font-family: "pages-icon";
        line-height: 1;
    }

    .time-section {
        position: relative;
        overflow: hidden;
        height: 100px;
    }

    .time-section.open {
        height:fit-content;
    }

    input.ez__signature,
    input.ez__signature-text {
        font-size: 30px;
        height: 50px !important;
    }

    .ez__header-brand .page-title {
        display: none;
    }

    .ez__header-brand .page-title__mobile {
        display: block;
    }

    .ez-mobile__env {
        display: block
    }

    .ez__env {
        display: none;
    }

    .login-wrapper .login-container {
        padding: 15px;
    }

    .ez__login-container {
        padding: 0 !important;
    }

    .ez__page-header h4.ez__standout {
        font-size: 20px;
    }

    /* FORMS */

    .ez-form__container {
        padding: 0;
    }

    /* CARDS */

    .card .card-body {
        padding: 0;
    }

    /* NOTIFICATIONS POPUP */
    .ez-notification {
        width: 100% !important;
    }

    .ez-notification__title {
        font-size: 25px !important;
    }

    .ez-notification__html-content {
        margin: 0 !important;
        font-size: 14px !important;
    }
}

@media only screen and (orientation: landscape) {

    /* MENU */

    .horizontal-app-menu .menu-bar > ul > li.open > a {
        color: #ffffff !important;
    }

    .horizontal-app-menu .menu-bar ul li > ul {
        background: #ffffff !important;
    }

    /* header */

    .horizontal-app-menu .header .page-title {
        font-size: 8px;
        line-height: 8px;
        margin-left: 0;
    }

    .sm-padding-10 {
        padding: 0 !important;
    }

    .ez-dashboard__row {
        margin: 0;
    }

    /* card */

    .card .card-header {
        flex-direction: column;
    }

    .ez-card__header-title,
    .ez-card__header-right {
        width: 100%;
    }

    .ez__table-controls {
        flex-direction: column;
    }

    .ez__table-controls a.btn {
        width: 100%;
        margin: 10px 0;
    }

    .ez__table-controls h1 {
        display: none;
    }

    /* TIMESHEET */

    .btn-group {
        flex-wrap: wrap;
    }

    .ez-timesheet__inner-container {
        padding: 0 0 !important;
    }

    .ez-form__section-header {
        font-size: 20px;
    }
    #select-start-date-btn {
        white-space: normal;
        line-height: 28px;
        margin-left: 10px;
        margin-right: 10px;
        height: 100% !important;
        max-height: 100% !important;
        top-padding: 20px;
    }
    #timesheet-time-modal .modal-dialog,
    #timesheet-pay-period-modal .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0;

    }

    #timesheet-time-modal .modal-content,
    #timesheet-pay-period-modal .modal-content {
        height: 100vh;
    }

    #timesheet-pay-period-modal .select2-selection__rendered {
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .modal-backdrop {
        z-index: -1;
    }

    /* TIMESHEET FORM */

    .lock-timesheet-status {
        margin-bottom: 10px;
    }

    .form-group-default {
        box-shadow: unset;
    }

    .ez__form-title {
        background-color: #ffffff;
    }

    .ez__form-title span {
        border: 1px solid #ffffff;
    }

    .hide-form-title .ez__form-title {
        display: block;
    }

    .time-section .input-group-append {
        display: none;
    }

    .time-section-toggle {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 25px;
        z-index: 1064;
        cursor: pointer;
        top: 5px;
        display:block;
    }

    .time-section-toggle:before {
        content: "\e986";
        color: #000000;
        font-size: 40px;
        font-family: "pages-icon";
        line-height: 1;
    }

    .time-section {
        position: relative;
        overflow: hidden;
        height: 100px;
    }

    .time-section.open {
        height:fit-content;
    }

    input.ez__signature,
    input.ez__signature-text {
        font-size: 30px;
        height: 50px !important;
    }
}