/*x-Small devices*/
@media only screen and (min-width: 320px) and (max-width: 374px) {
    html {
        overflow-y: auto;
        overflow-x:hidden;
    }
    .page-loader > .main-loader-container > .main-loader {
        font-size: 2.5rem !important;
    }

    body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .main-content {
        margin-left: 0;
    }

    .main-content > div > .main-menu > div >.menubar {
        overflow: hidden;
        margin-bottom: 10px;
    }

    footer {
        bottom: -3.5rem;
        background: #cdced4;
        margin-left: -10px;
        z-index: 999;
        width: 100%;
        line-height: 1;
    }

    footer > .card-body {
            padding: 0.2rem !important;
    }

    footer > .card-body > .footer-container {
        flex-direction: column;
        text-align: center;
    }

    footer .card-body .footer-container  p {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    footer > .card-body > .footer-container >.powered-by {
        margin-top: 10px;
    }

    .main-content > div > .main-menu > div > .menubar > .home-menu {
        display: block;
    }
    .main-content > div > .main-menu > .menu-button {
        display: none;
    }
  
    .scroll-top {
        background-color: #cad8fb;
        position: fixed;
        bottom: 60px;
        right: 12px;
        height: 45px;
        width: 45px;
        display: grid;
        place-items: center;
        border-radius: 15%;
        box-shadow: 0 0 10px #969696;
        cursor: pointer;
        z-index: 99999 !important;
    }

    .scroll-bottom {
        background-color: #cad8fb;
        position: fixed;
        bottom: 10px;
        right: 12px;
        height: 45px;
        width: 45px;
        display: grid;
        place-items: center;
        border-radius: 15%;
        box-shadow: 0 0 10px #969696;
        cursor: pointer;
        z-index: 99999 !important;
    }
    div > .grid-table-body > .grid-title {
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translate(-50%);
        width: 100%;
        text-align: center;
    }

    .title-container .dataTables_wrapper > .dataTables_length {
        margin-bottom: 0.5rem;
        margin-top: 1.5rem;
    }

    .legend-container .dataTables_wrapper > .dataTables_length {
        margin-bottom: 0.5rem;
        margin-top: 3rem;
    }

    .title-container .dt-length {
        margin-top: 1rem;
    }
    .legend-container .dt-length {
        margin-top: 2.5rem;
    }

    .dataTables_wrapper > .dataTables_filter {
        margin-bottom: 1rem;
    }
    .grid-table-body > .legend > .legend-minlevel {
        position: absolute;
        left: 49%;
        transform: translate(-50%, -10px);
        text-align:center;
        width:100%;
    }
    .grid-table-body > .legend > .legend-maxlevel {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 10px);
        text-align: center;
        width: 100%;
    }
    .grid-table-body > .legend > .onHold-WO {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 10px);
        text-align: center;
        width: 100%;
    }
    .grid-table-body > .legend > .legend-expired {
        position: absolute;
        left: 38.3%;
        transform: translate(-50%, 30px);
        text-align: center;
        width: 100%;
    }
    .offcanvas-bottom {
        width: 80% !important;
        height: 80%;
        bottom: 0;
    }

    .input-group > .form-select-custom {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        min-width: 100%;
    }

    .input-group-text-custom {
        margin-bottom: .5rem;
        white-space: normal;
    }
    .custom-mt-2{
        margin-top:1rem !important;
    }

    .qiss-lab-login-main-body > div {
        padding-left: 25px;
        padding-right: 25px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > small.text-dark {
            display: none;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > p.text-dark {
            display: none;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > div {
            margin: 0 auto !important;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box div.water-container {
            display: none !important;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > div .qiss-lab-login-logo {
            height: 35px;
            width: auto;
        }

    .qiss-lab-login-main-body div > div > div.qiss-lab-login-right-side-box {
        margin-top:5px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > div.qiss-lab-login-main > img.qiss-lab-client-logo {
        margin-bottom: 1rem;
        height: auto;
        max-height: 45px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > h5 {
        font-size: 15px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > p {
        font-size: 14px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group {
        font-size: 13px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span.input-group-text {
            padding: .275rem .5rem;
            font-size: 13px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span > svg {
            transform: scale(0.85);
            height: 30px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span > svg {
            transform: scale(0.85);
            height: 30px;
        }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > span.text-danger {
        font-size: 12px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > div.form-floating > input.form-control {
        height: 30px !important;
        min-height: calc(2.8rem + calc(var(--bs-border-width) * 2)) !important;
    }


    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > button {
        height: 40px;
    }


    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 12px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title::before {
            width: 70px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title::after {
            width: 70px;
        }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.with-social > div.social {
        width: 30px;
        height: 30px;
    }

    .qiss-lab-login-main-body > div > div.qiss-lab-copyright {
        font-size: 10px;
    }

    .software-name {
        font-weight: 500;
        margin-top: 5px;
    }

    .rounded-bottom-5 {
        border-radius: 5px;
    }

    .compose-dd .select2-container .select2-search__field {
        width: 100% !important;
    }
  


}

/*Smaller devices*/
@media only screen and (min-width: 375px) and (max-width: 424px) {
    html {
        overflow-y: auto;
    }

    body {
        overflow-y: auto;
    }
    .page-loader > .main-loader-container > .main-loader {
        font-size: 3rem !important;
    }

    .main-content {
        margin-left: 0;
    }

    .main-content > div > .main-menu > div >.menubar {
        overflow: hidden;
        margin-bottom: 10px;
    }

    footer {
        border-top: 1px solid #e7e7e7;
        position: absolute;
        bottom: -3.5rem;
        background: #cdced4;
        margin-left: -10px;
        z-index: 999;
        width: 100%;
        line-height: 1;
    }

    footer > .card-body {
        padding: 0.2rem !important;
    }

    footer > .card-body > .footer-container {
        flex-direction: column;
        text-align: center;
    }

    footer .card-body .footer-container p {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer > .card-body > .footer-container >.powered-by {
        margin-top: 10px;
    }

    .main-content > div > .main-menu > div > .menubar > .home-menu {
        display: block;
    }

    .main-content > div > .main-menu > .menu-button {
        display: none;
    }
    .scroll-top {
        background-color: #cad8fb;
        position: fixed;
        bottom: 60px;
        right: 12px;
        height: 45px;
        width: 45px;
        display: grid;
        place-items: center;
        border-radius: 15%;
        box-shadow: 0 0 10px #969696;
        cursor: pointer;
        z-index: 99999 !important;
    }

    .scroll-bottom {
        background-color: #cad8fb;
        position: fixed;
        bottom: 10px;
        right: 12px;
        height: 45px;
        width: 45px;
        display: grid;
        place-items: center;
        border-radius: 15%;
        box-shadow: 0 0 10px #969696;
        cursor: pointer;
        z-index: 99999 !important;
    }
    div > .grid-table-body > .grid-title {
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translate(-50%);
        width: 100%;
        text-align: center;
    }
    .title-container .dataTables_wrapper > .dataTables_length {
        margin-bottom: 0.5rem;
        margin-top: 1.5rem;
    }
    .legend-container .dataTables_wrapper > .dataTables_length {
        margin-bottom: 0.5rem;
        margin-top: 3rem;
    }
    .title-container .dt-length {
        margin-top: 1rem;
    }
    .legend-container .dt-length {
        margin-top: 2.5rem;
    }
    .dataTables_wrapper > .dataTables_filter {
        margin-bottom: 1rem;
    }
    .grid-table-body > .legend > .legend-minlevel {
        position: absolute;
        left: 49%;
        transform: translate(-50%, -10px);
        text-align: center;
        width: 100%;
    }

    .grid-table-body > .legend > .legend-maxlevel {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 10px);
        text-align: center;
        width: 100%;
    }
    .grid-table-body > .legend > .onHold-WO {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -10px);
        text-align: center;
        width: 100%;
    }

    .grid-table-body > .legend > .legend-expired {
        position: absolute;
        left: 40%;
        transform: translate(-50%, 30px);
        text-align: center;
        width: 100%;
    }
    .offcanvas-bottom {
        width: 80% !important;
        height: 80%;
        bottom: 0;
    }
 /*   .custom-table thead {
        display: none !important;
    }

    .custom-table,
    .custom-table tbody,
    .custom-table tr,
    .custom-table td {
        display: block !important;
        width: 100% !important;
    }

        .custom-table tr {
            margin-bottom: 15px !important;
        }

        .custom-table td {
            text-align: right !important;
            padding-left: 50% !important;
            text-align: right !important;
            position: relative !important;
        }

            .custom-table td::before {
                content: attr(data-label) !important;
                position: absolute !important;
                left: 0 !important;
                width: 50% !important;
                padding-left: 15px !important;
                font-size: 15px !important;
                font-weight: bold !important;
                text-align: left !important;
                top: 40% !important;
            }*/

    .input-group > .form-select-custom {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        min-width: 100%;
    }

    .input-group-text-custom {
        margin-bottom: .5rem;
        white-space: normal;
    }
    .custom-mt-2 {
        margin-top: 1rem !important;
    }
    .qiss-lab-login-main-body > div {
        padding-left: 25px;
        padding-right: 25px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > small.text-dark {
            display: none;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > p.text-dark {
            display: none;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > div {
            margin: 0 auto !important;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box div.water-container {
            display: none !important;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > div .qiss-lab-login-logo {
            width: auto;
            height: 45px;
            display: block;
            margin: 0 auto;
            max-width: 150px;
        }

    .qiss-lab-login-main-body div > div > div.qiss-lab-login-right-side-box {
        margin-top: 5px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > div.qiss-lab-login-main > img.qiss-lab-client-logo {
        margin-bottom: 1rem;
        height: auto;
        max-height: 60px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > h5 {
        font-size: 15px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > p {
        font-size: 14px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group {
        font-size: 13px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span.input-group-text {
            padding: .275rem .5rem;
            font-size: 13px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span > svg {
            transform: scale(0.85);
            height: 30px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span > svg {
            transform: scale(0.85);
            height: 30px;
        }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > span.text-danger {
        font-size: 12px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > div.form-floating > input.form-control {
        height: 30px !important;
        min-height: calc(2.8rem + calc(var(--bs-border-width) * 2)) !important;
    }


    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > button {
        height: 40px;
    }


    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 12px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title::before {
            width: 70px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title::after {
            width: 70px;
        }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.with-social > div.social {
        width: 30px;
        height: 30px;
    }

    .qiss-lab-login-main-body > div > div.qiss-lab-copyright {
        font-size: 11px;
    }

    .software-name {
        font-weight: 500;
        margin-top: 5px;
    }

    .rounded-bottom-5 {
        border-radius: 5px;
    }
    .compose-dd .select2-container .select2-search__field {
        width: 100% !important;
    }
   
}

/*Tablet ||IPad devices*/
@media only screen and (min-width: 425px) and (max-width: 767px) {
    html {
        overflow-y: auto;
    }

    body {
        overflow-y: auto;
    }
    .page-loader > .main-loader-container > .main-loader {
        font-size: 3rem !important;
    }
    .main-content {
        margin-left: 0;
    }

   .main-content > div > .main-menu > div >.menubar {
        overflow: hidden;
        margin-bottom: 10px;
   }

    footer {
        border-top: 1px solid #e7e7e7;
        position: absolute;
        bottom: -3.5rem;
        background: #cdced4;
        margin-left: -10px;
        z-index: 999;
        width: 100%;
        line-height: 1;
    }
    footer > .card-body {
        padding: 0.2rem !important;
    }
    footer > .card-body > .footer-container {
        flex-direction: column;
        text-align: center;
    }

    footer .card-body .footer-container p {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    footer > .card-body > .footer-container > .powered-by {
        margin-top: 10px;
    }

    .main-content > div > .main-menu > div > .menubar > .home-menu {
        display: block;
    }

    .main-content > div > .main-menu > .menu-button {
        display: none;
    }
    div > .grid-table-body > .grid-title {
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translate(-50%);
        width: 100%;
        text-align: center;
    }

    .title-container .dataTables_wrapper > .dataTables_length {
        margin-bottom: 0.5rem;
        margin-top: 1.5rem;
    }
    .legend-container .dataTables_wrapper > .dataTables_length {
        margin-bottom: 0.5rem;
        margin-top: 3rem;
    }

    .title-container .dt-length {
        margin-top: 1rem;
    }

    .legend-container .dt-length {
        margin-top: 2.5rem;
    }

    .dataTables_wrapper > .dataTables_filter {
        margin-bottom: 1rem;
    }
    .grid-table-body > .legend > .legend-minlevel {
        position: absolute;
        left: 49%;
        transform: translate(-50%, -10px);
        text-align: center;
        width: 100%;
    }

    .grid-table-body > .legend > .legend-maxlevel {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 10px);
        text-align: center;
        width: 100%;
    }

    .grid-table-body > .legend > .onHold-WO {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 10px);
        text-align: center;
        width: 100%;
    }

    .grid-table-body > .legend > .legend-expired {
        position: absolute;
        left: 41.2%;
        transform: translate(-50%, 30px);
        text-align: center;
        width: 100%;
    }

    .grid-table-body > .legend > .onHold-WO {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -6px);
        text-align: center;
        width: 100%;
    }

    .offcanvas-bottom {
        width: 80% !important;
        height: 80%;
        bottom: 0;
    }
    .input-group > .form-select-custom {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        min-width: 100%;
    }

    .input-group-text-custom {
        margin-bottom: .5rem;
        white-space: normal;
    }
    .custom-mt-2 {
        margin-top: 1rem !important;
    }
    .qiss-lab-login-main-body > div {
        padding-left: 25px;
        padding-right: 25px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > small.text-dark {
            display: none;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > p.text-dark {
            display: none;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > div {
            margin: 0 auto !important;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box div.water-container {
            display: none !important;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > div .qiss-lab-login-logo {
            width: auto;
            height: 45px;
            display: block;
            margin: 0 auto;
            max-width: 150px;
        }

    .qiss-lab-login-main-body div > div > div.qiss-lab-login-right-side-box {
        margin-top: 5px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > div.qiss-lab-login-main > img.qiss-lab-client-logo {
        margin-bottom: 1rem;
        height: auto;
        max-height: 60px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > h5 {
        font-size: 15px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > p {
        font-size: 14px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group {
        font-size: 13px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span.input-group-text {
            padding: .275rem .5rem;
            font-size: 13px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span > svg {
            transform: scale(0.85);
            height: 30px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span > svg {
            transform: scale(0.85);
            height: 30px;
        }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > span.text-danger {
        font-size: 12px;
    }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > div.form-floating > input.form-control {
        height: 30px !important;
        min-height: calc(2.8rem + calc(var(--bs-border-width) * 2)) !important;
    }


    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > button {
        height: 40px;
    }


    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 12px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title::before {
            width: 70px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title::after {
            width: 70px;
        }

    .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.with-social > div.social {
        width: 30px;
        height: 30px;
    }

    .qiss-lab-login-main-body > div > div.qiss-lab-copyright {
        font-size: 12px;
    }

    .software-name {
        font-weight: 500;
        margin-top: 5px;
    }

    .rounded-bottom-5 {
        border-radius: 5px;
    }
    .compose-dd .select2-container .select2-search__field {
        width: 100% !important;
    }
}

/*Laptop devices*/
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    html {
        position: relative;
        overflow-y: auto;
        min-height: 100%;
    }

    body {
        overflow-y: hidden;
    }
    .page-loader > .main-loader-container > .main-loader {
        font-size: 4rem !important;
    }
    .main-content {
        margin-left: 0;
    }

   .main-content > div > .main-menu > div >.menubar {
        overflow: hidden;
        margin-bottom: 10px;
    }

    footer {
        border-top: 1px solid #e7e7e7;
        position: absolute;
        bottom: -5.5rem;
        background: #cdced4;
        margin-left: -10px;
        z-index: 999;
        width: 100%;
        line-height: 1;
    }
    footer .card-body .footer-container p {
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: center;
    }

    .scroll-top {
        background-color: #cad8fb;
        position: fixed;
        bottom: 60px;
        right: 22px;
        height: 45px;
        width: 45px;
        display: grid;
        place-items: center;
        border-radius: 15%;
        box-shadow: 0 0 10px #969696;
        cursor: pointer;
        z-index: 99999 !important;
    }
    .scroll-bottom {
        background-color: #cad8fb;
        position: fixed;
        bottom: 10px;
        right: 22px;
        height: 45px;
        width: 45px;
        display: grid;
        place-items: center;
        border-radius: 15%;
        box-shadow: 0 0 10px #969696;
        cursor: pointer;
        z-index: 99999 !important;
    }

    .main-content > div > .main-menu > div > .menubar > .home-menu {
        display: block;
    }

    .main-content > div > .main-menu > .menu-button {
        display: none;
    }
    div > .grid-table-body > .grid-title {
        position: absolute;
        top: 0.5rem;
        left: 45%;
        transform: translate(-50%, 0.5rem);
    }
    .legend-container .dataTables_wrapper > .dataTables_filter {
        margin-bottom: 2rem;
    }
   
    .legend-container .dt-length {
        margin-bottom: 2rem;
    }
    .legend-container .dt-search {
        margin-bottom: 2rem;
    }
    .grid-table-body > .legend > .legend-minlevel {
        position: absolute;
        transform: translate(-60%,3rem);
        text-align: center;
        width: 100%;
    }

    .grid-table-body > .legend > .legend-maxlevel {
        position: absolute;
        transform: translate(-50%,3rem);
        text-align: center;
        width: 100%;
    }
    .grid-table-body > .legend > .onHold-WO {
        position: absolute;
        transform: translate(-50%,1rem);
        text-align: center;
        width: 100%;
    }
    .grid-table-body > .legend > .legend-expired {
        position: absolute;
        transform: translate(-40%, 3rem);
        text-align: center;
        width: 100%;
    }
    .modal > .modal-dialog > .modal-content > .modal-body >.fix-ht {
        height: 190px !important;
    }

    .qiss-lab-login-main-body > div {
        padding-left: 25px;
        padding-right: 25px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > small.text-dark {
            font-size: 14px;
            width: 18rem;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > p.text-dark {
            font-size: 16px !important;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > div .qiss-lab-login-logo {
            height: 45px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > div.qiss-lab-login-main > img.qiss-lab-client-logo {
            margin-bottom: 25px;
            height: auto;
            max-height: 80px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > h5 {
            font-size: 15px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > p {
            font-size: 14px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group {
            font-size: 13px;
        }

            .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span.input-group-text {
                padding: .275rem .5rem;
                font-size: 13px;
            }

            .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span > svg {
                transform: scale(0.85);
                height: 30px;
            }

            .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > span > svg {
                transform: scale(0.85);
                height: 30px;
            }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > span.text-danger {
            font-size: 12px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > div.form-floating > input.form-control {
            height: 30px !important;
            min-height: calc(2.8rem + calc(var(--bs-border-width) * 2)) !important;
        }


        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > button {
            height: 40px;
        }


        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title {
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 12px;
        }

            .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title::before {
                width: 70px;
            }

            .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.qiss-lab-social-title::after {
                width: 70px;
            }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div.with-social > div.social {
            width: 30px;
            height: 30px;
        }

        .qiss-lab-login-main-body > div > div.qiss-lab-copyright {
            font-size: 13px;
        }
    .input-group > .wo-date-text {
        width: 180px !important;
    }
  
}

/*Desktop devices*/
@media only screen and (min-width: 1024px) and (max-width: 1440px) {

    body {
        overflow-y: hidden;
        max-height: 100vh !important;
    }

    .main-content > div > .main-menu {
        position: relative;
        height: calc(100vh - 53px);
    }

    .main-content > div > .main-menu > div > .menubar {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
    }

    #form {
        max-height: calc(100vh - 165px);
        overflow-y: auto; /*overflow-y */
        font-weight: 400;
    }

    .form-container > div >.my-tab-content {
        max-height: calc(100vh - 144px);
        overflow-y: auto;
        overflow-x: hidden !important;
    }

 /*   #GridTableBody {
        max-height: calc(100vh - 135px);
        overflow-y: auto;
        overflow-x: hidden;
    }*/
    .grid-table-body {
        max-height: calc(100vh - 155px);
        overflow-y: auto;
        overflow-x: hidden;
    }

  /*  #OrderGridTableBody {
        max-height: calc(100vh - 93px);
        overflow-y: scroll;
        overflow-x: hidden;
    }*/

    .main-content > div > .main-menu > div > .menubar > .home-menu {
        display: block;
    }

    footer {
        border-top: 1px solid #e7e7e7;
        position: absolute;
        bottom: 0px;
        background: #cdced4;
        margin-left: -88px;
        z-index: 999;
        width: calc(100% + 88px);
        line-height: 1.3;
    }
    footer > .card-body {
        padding: 0.3rem !important;
    }
    footer .card-body .footer-container p {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .legend-container .dataTables_wrapper > .dataTables_filter {
        margin-bottom: 2rem;
    }


    .legend-container .dt-length {
        margin-bottom: 2rem;
    }
    .legend-container .dt-search {
        margin-bottom: 2rem;
    }

    .grid-table-body > .legend > .legend-minlevel {
        position: absolute;
        transform: translate(-60%,3rem);
        text-align: center;
        width: 100%;
    }

    .grid-table-body > .legend > .legend-maxlevel {
        position: absolute;
        transform: translate(-50%,3rem);
        text-align: center;
        width: 100%;
    }
    .grid-table-body > .legend > .onHold-WO {
        position: absolute;
        transform: translate(-50%,1rem);
        text-align: center;
        width: 100%;
    }

    .grid-table-body > .legend > .legend-expired {
        position: absolute;
        transform: translate(-40%, 3rem);
        text-align: center;
        width: 100%;
    }
    .search-email > div > div > div > .search-box > .search-icon {
        position: absolute;
        right: 0px !important;
    }
    .modal > .modal-dialog > .modal-content > .modal-body > .fix-ht {
        height: 190px !important;
    }
    .custom-row > .custom-col-6 {
        flex: 0 0 50%; 
        max-width: 50%;
    }
    .qiss-lab-login-main-body > div {
        padding-left: 25px;
        padding-right: 25px;
    }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > small.text-dark {
            font-size: 14px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > p.text-dark {
            font-size: 16px !important;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-left-side-box > div .qiss-lab-login-logo {
            height: 45px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > div.qiss-lab-login-main > img.qiss-lab-client-logo {
            margin-bottom: 25px;
            height: auto;
            max-height: 80px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > div > h5 {
            font-size: 15px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > span.text-danger {
            font-size: 13px;
        }

        .qiss-lab-login-main-body > div > div > div.qiss-lab-login-right-side-box > div > form > div.input-group > button {
            height: 40px;
        }

        .qiss-lab-login-main-body > div > div.qiss-lab-copyright {
            font-size: 14px;
        }
    .report-form .Submit-Button {
        white-space: nowrap !important;

    }
    .input-group > .wo-date-text{
        width:180px !important;
    }
}

/*XX-Large devices (larger desktops, 1441px and up)*/
@media (min-width: 1400px) {
  
    body {
        overflow-y: hidden;
        max-height: 100vh !important;
    }

    .main-content > div > .main-menu {
        position: relative;
        height: calc(100vh - 53px);
    }

    .main-content > div > .main-menu > div > .menubar {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
    }

    #form {
        max-height: calc(100vh - 165px);
        overflow-y: auto;
        font-weight: 400;
    }

    .form-container > div > .my-tab-content {
        max-height: calc(100vh - 144px);
        overflow-y: auto;
        overflow-x: hidden !important;
    }

  /*  #GridTableBody {
        max-height: calc(100vh - 135px);
        overflow-y: auto;
        overflow-x: hidden;
    }*/
    .grid-table-body {
        max-height: calc(100vh - 155px);
        overflow-y: auto;
        overflow-x: hidden;
    }

  /*  #OrderGridTableBody {
        max-height: calc(100vh - 93px);
        overflow-y: scroll;
        overflow-x: hidden;
    }*/

    footer {
        border-top: 1px solid #e7e7e7;
        position: absolute;
        bottom: 0px;
        background: #cdced4;
        margin-left: -88px;
        z-index: 999;
        width: calc(100% + 88px);
        line-height: 1.3;
    }

    footer > .card-body {
         padding: 0.5rem !important;
    }
    footer .card-body .footer-container p {
         display: flex;
         align-items: center;
         justify-content: center;
    }
    .modal > .modal-dialog > .modal-content > .modal-body > .fix-ht {
        height: 190px !important;
    }
    .input-group > .wo-date-text {
        width: 160px !important;
    }
      
}