/* If the width of the screen/device is less than max-width, them apply smaller fonts, etc. */
@media only screen and (max-width: 750px) {
    html {
        font-size: 12px;
    }

    .home-icon {
        height: 30px;
    }

    .forms-img {
        top: 50%;
    }

    .grid-pad {
        padding: 8px 5px 8px 15px;
    }

    .is-desktop {
        display: none !important;
    }

    .message-container {
        min-width: 330px;
    }

    .status-container {
        min-width: 330px;
    }

    .btn-listitem, .btn-multilistitem {
        width: 35px;
        height: 35px;
        font-size: 31px !important;
        line-height: 35px !important;
    }

    .btn-multilistitem {
        width: 35px;
        height: 35px;
    }

    .list-row {
        line-height: 25px;
        height: 30px;
    }

    .updated-on {
        margin-right: 5px;
    }

    .variable-col-2 {
        width: 43%;
    }

    .variable-col-3 {
        width: 43.5%;
    }

    .mb-1 {
        max-width: 8.33%;
        flex: 0 0 8.33%;
    }

    .mb-2 {
        max-width: 16.6666%;
        flex: 0 0 16.6666%;
    }

    .mb-3 {
        max-width: 25%;
        flex: 0 0 25%;
    }

    .mb-4 {
        max-width: 33.333333%;
        flex: 0 0 33.333333%;
    }

    .mb-5 {
        max-width: 41.666667%;
        flex: 0 0 41.666667%;
    }

    .mb-6 {
        max-width: 50%;
        flex: 0 0 50%;
    }

    .mb-7 {
        max-width: 58.333333%;
        flex: 0 0 58.333333%;
    }

    .mb-8 {
        max-width: 66.666667%;
        flex: 0 0 66.666667%;
    }

    .mb-9 {
        max-width: 75%;
        flex: 0 0 75%;
    }

    .mb-10 {
        max-width: 83.333333%;
        flex: 0 0 83.333333%;
    }

    .mb-11 {
        max-width: 91.666667%;
        flex: 0 0 91.666667%;
    }

    .mb-12 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .form-page {
        overflow-x: hidden;
    }

    .scrolling-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    .form-container {
        padding: 30px;
    }

    .select2-selection__choice {
        font-size: 18px;
        min-width: 100px !important;
    }

    .photo-container .camera {
        width: 320px !important;
        height: 240px !important;
    }

    .barcode-modal .barcode-container .camera {
        width: 320px !important;
        height: 320px !important;
        margin-top: 10px;
    }

        .barcode-modal .barcode-container .camera .barcode-reader {
            width: 320px !important;
            height: 320px !important;
        }

    .barcode-modal .barcode-container .barcode-controls {
        width: 320px !important;
        height: 100px !important;
    }

        .photo-container .camera .annon-canvas {
            max-width: 100%;
            max-height: 100%;
        }

    .photo-modal .photo-container .image-gallery-body {
        margin-top: 40px;
    }

    .signature-modal .signature-container .signature-body .x {
        left: 15px;
    }

    .modal .modal-top-nav {
        padding-left: 0;
        margin: 10px 5px 10px 5px !important;
    }

        .modal .modal-top-nav .modal-title {
            font-size: 18px;
        }

        .modal .modal-top-nav .btn-action {
            min-height: 40px;
            width: 70px;
        }

    .modal .modal-container.non-full-width {
        width: 95%;
    }

    .modal .modal-content {
        margin: 5px;
    }

    .modal .modal-top-nav .btn-close {
        margin-right: 0px;
    }

    .list-modal .list-container .list-body {
        margin-top: 40px;
    }

    .webcamjs-ios-placeholder {
        font-size: 0;
        pointer-events: none;
    }

    .modal .modal-scrolling-container {
        width: 100% !important;
    }

    .main-menu-modal .main-menu-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .video-modal .video-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .barcode-input-modal  {
        height: 250px;
    }

    .barcode-input-modal .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .audio-modal .audio-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .grecaptcha-badge {
        opacity: 0 !important;
    }

    .inbox .tabs {
        width: 100%;
    }

    .tasks .task-item .submitted i {
        width: 50px;
    }
}

@media only screen and (min-width : 640px) and (max-width: 960px) and (orientation: landscape) {
    .signature-modal .signature-container .signature-body {
        margin-top: 8px;
        width: 100%;
        height: 100%;
    }

    .signature-modal .signature-container .signature-body canvas {
        margin: 0;
        width: 100%;
        height: 215px;
        max-width: 100%;
        max-height: 100%;
    }

    .signature-modal .signature-container .signature-body .signature-buttons {
        margin-top: 15px;
        margin-bottom: 10px;
    }
}

/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
    .btn-switch-camera {
        display: none;
    }

    input:disabled, textarea:disabled {
        opacity: 0.6;
        color: black !important;
    }

    .camera-panel {
        background-color: #E0E6ED !important;
    }

        .camera-panel::after {
            content: "\f03e";
            color: #8492A6;
            font-family: "FontAwesome";
            font-size: 60px;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            left: 50%;
            margin-left: -30px;
        }
}

/* If the width of the screen/device is less than max-width, them apply smaller fonts, etc. */
@media only screen and (max-width: 960px) and (min-width: 750px) {
    html {
        font-size: 12px;
    }

    .home-icon {
        height: 40px;
    }

    .forms-img {
        top: 50%;
    }

    .grid-pad {
        padding: 8px 5px 8px 15px;
    }

    .message-container {
        min-width: 330px;
    }

    .status-container {
        min-width: 330px;
    }

    .btn-listitem, .btn-multilistitem {
        width: 35px;
        height: 35px;
        font-size: 31px !important;
        line-height: 35px !important;
    }

    .btn-multilistitem {
        width: 35px;
        height: 35px;
    }

    .list-row {
        line-height: 25px;
        height: 30px;
    }

    .variable-col-2 {
        width: 57%;
    }

    .variable-col-3 {
        width: 30.5%;
    }

    .mb-1 {
        max-width: 8.33%;
        flex: 0 0 8.33%;
    }

    .mb-2 {
        max-width: 16.6666%;
        flex: 0 0 16.6666%;
    }

    .mb-3 {
        max-width: 25%;
        flex: 0 0 25%;
    }

    .mb-4 {
        max-width: 33.333333%;
        flex: 0 0 33.333333%;
    }

    .mb-5 {
        max-width: 41.666667%;
        flex: 0 0 41.666667%;
    }

    .mb-6 {
        max-width: 50%;
        flex: 0 0 50%;
    }

    .mb-7 {
        max-width: 58.333333%;
        flex: 0 0 58.333333%;
    }

    .mb-8 {
        max-width: 66.666667%;
        flex: 0 0 66.666667%;
    }

    .mb-9 {
        max-width: 75%;
        flex: 0 0 75%;
    }

    .mb-10 {
        max-width: 83.333333%;
        flex: 0 0 83.333333%;
    }

    .mb-11 {
        max-width: 91.666667%;
        flex: 0 0 91.666667%;
    }

    .mb-12 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .updated-on {
        margin-top: 2.5%;
    }

    .scrolling-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    .photo-container .camera {
        width: 320px !important;
        height: 240px !important;
    }

    .barcode-modal .barcode-container .camera {
        width: 320px !important;
        height: 320px !important;
        margin-top: 10px;
    }

        .barcode-modal .barcode-container .camera .barcode-reader {
            width: 320px !important;
            height: 320px !important;
        }

    .barcode-modal .barcode-container .barcode-controls {
        width: 320px !important;
        height: 100px !important;
    }

    .photo-container .camera .annon-canvas {
        max-width: 100%;
        max-height: 100%;
    }

    .photo-modal .photo-container .image-gallery-body {
        margin-top: 40px;
    }

    .signature-modal .signature-container .signature-body .x {
        left: 15px;
    }

   .modal .modal-top-nav {
        padding-left: 0;
    }

    .modal .modal-top-nav .btn-close {
        margin-right: 0px;
    }

    .list-modal .list-container .list-body {
        margin-top: 40px;
    }

    .webcamjs-ios-placeholder {
        font-size: 0;
        pointer-events: none;
    }

    .modal .modal-top-nav {
        padding-left: 0;
        margin: 5px !important;
    }

    .modal .modal-container.non-full-width {
        width: 85%;
    }

    .modal .modal-content {
        margin-left: 20px;
        margin-right: 20px;
    }

    .modal .modal-top-nav .btn-close {
        margin-right: 0px;
    }

    .webcamjs-ios-placeholder {
        font-size: 0;
        pointer-events: none;
    }

    .modal .modal-scrolling-container {
        width: 100% !important;
    }

    .main-menu-modal .main-menu-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .video-modal .video-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .barcode-input-modal {
        height: 250px;
    }

    .barcode-input-modal .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .audio-modal .audio-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .grecaptcha-badge {
        opacity: 0 !important;
    }
}