html, body {
    font-family: Helvetica, Arial,sans-serif;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body,
.body-content {
    height: 100%;
    overflow:auto;
}

.text-danger {
    color: #FF0000;
}

.pwa-body-content {
    width: 100%;
}

.pwa-button {
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.5);
    background-color: #112899;
    color: #fff;
    text-align: center;
    border: 0;
}

    .pwa-button:disabled {
        background-color: #d8d8d8;
    }

.body-content > .header, .pwa-container > .header {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 7.375rem;
    background-color: #fff;
    color: #5e5e5e;
    font-size: 1.5625rem;
    line-height: 7.375rem;
    z-index: 100;
}

    .body-content > .header > .pwa-left, .body-content > .header > .pwa-right {
        width: 25%;
        display: flex;
        align-items: center;
    }

    .body-content > .header > .pwa-left {
        padding: 1.25rem 0 1.25rem 1.875rem;
        justify-content: flex-start;
        color: #000;
        width:30%;
    }

    .body-content > .header > .pwa-left > img, .body-content > .header > .pwa-right > img {
        width: auto;
        height: 4.875rem;
        object-fit: contain;
    }

    .body-content > .header > .pwa-left > img{
        width:100%;
    }

    .body-content > .header > .pwa-right {
        padding: 1.25rem 1.875rem 1.25rem 0;
        justify-content: flex-end;
    }

    .body-content > .header > .home {
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
    }

        .body-content > .header > .home > i {
            font-size: 2.5rem;
        }

        .body-content > .header > .home > span {
            font-size: 0.875rem;
            line-height: 1.25rem;
            padding-left: 0.3rem;
        }

    .body-content > .header > .pwa-center {
        color: #000;
        display: flex;
        text-align: center;
        flex-direction: column;
        width:45%; 
        padding-right: 2%;
    }

        .body-content > .header > .pwa-center > div:first-child {
            margin-top: 1rem;
            height: 4rem;
            line-height: 4rem;
            font-size: 2rem;
        }

        .body-content > .header > .pwa-center > div:last-child {
            height: 2rem;
            line-height: 2rem;
            font-size: 1.70rem;
            font-weight: 400;
        }

    .pwa-container > .header i {
        font-size: 2.5rem;
    }

    .pwa-container > .header > div {
        display: flex;
    }

    .pwa-container > .header > .pwa-left {
        width: 14%;
        align-items: center;
    }

        .pwa-container > .header > .pwa-left.show {
            display: flex !important;
        }

        .pwa-container > .header > .pwa-left > i {
            padding-left: 1.0625rem;
            padding-right: 0.8125rem;
        }

    .pwa-container > .header.edit > .pwa-left {
        display: none;
    }

    .pwa-container > .header > .pwa-center {
        width: 72%;
        justify-content: center;
        font-size: 3.75rem;
        color: #000000;
    }

    .pwa-container > .header > .pwa-right {
        width: 14%;
        justify-content: flex-end;
        align-items: center;
    }

        .pwa-container > .header > .pwa-right > span {
            padding-right: 1.0625rem;
            padding-left: 0.8125rem;
        }

/*build info*/
.build-info{
    position: absolute;
    font-size: 0.6em;
    color: gray;
    bottom: 0;
    height: 1.1em;
    display: block;
    line-height: normal;
}
/*build info*/

.pwa-container > .content {
    padding-top: 7.375rem;
}

.pwa-container > .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f7f6f6;
    height: 6.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pwa-container > .footer .pwa-button {
        width: 19rem;
        height: 3.25rem;
        font-size: 1.25rem;
        font-weight: normal;
        line-height: 3.25rem;
    }

.pwa-popup {
    position: fixed;
    top: 7.375rem;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.59);
    padding: 0 7.06rem 4rem 7.06rem;
    overflow-y: scroll;
}

.popup-container {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
}

    .popup-container > .pwa-row {
        display: flex;
    }

    .popup-container > .header {
        height: 6.625rem;
        background-color: #112899;
        padding-left: 2.8125rem;
        padding-right: 2.5rem;
        justify-content: space-between;
        align-items: center;
        margin: 0 7.06rem 4rem 7.06rem;
        position: fixed;
        right: 0;
        left: 0;
        top: 7.375rem;
        z-index: 99;
    }

        .popup-container > .header > .pwa-col {
            display: flex;
            font-size: 1.5625rem;
            color: #fff;
            font-weight: bold;
        }

            .popup-container > .header > .pwa-col:nth-child(1) {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 600px !important;
                padding-right: 12px;
                display: block;
            }

            .popup-container > .header > .pwa-col > .fa-times {
                margin-right: 0.75rem;
                font-size: 2rem;
            }

        .popup-container > .header .pwa-datetime {
            display: flex;
            flex-direction: column;
            min-width: 200px;
        }

    .popup-container > .content {
        margin-top: 6.625rem;
        padding: 2.375rem 2.8125rem;
    }

        .popup-container > .content .pwa-col:nth-child(1) {
            width: 34%;
            display: flex;
            justify-content: center;
        }

        .popup-container > .content .fa-heart-rate {
            color: #00aff0;
            font-size: 7.5rem;
            display: flex;
            align-items: center;
        }

        .popup-container > .content .pwa-col:nth-child(2) {
            width: 66%;
            padding-left: 4.6875rem;
            font-size: 1.125rem;
            color: #757575;
        }

        .popup-container > .content .pwa-bts {
            display: flex;
            justify-content: space-between;
        }

            .popup-container > .content .pwa-bts .pwa-button {
                width: 45%;
                height: 3.125rem;
                line-height: 3.125rem;
                font-size: 1.5625rem;
                font-weight: bold;
            }


#terms-start-popup {
    z-index: 301;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: :translateX(-50%) translateY(-50%);
    -moz-transform: :translateX(-50%) translateY(-50%);
    -webkit-transform: :translateX(-50%) translateY(-50%);
    bottom: auto;
    padding: 100% 7.06rem;
}
    #terms-start-popup .popup-container > .content .pwa-col.terms {
        width: 100%;
        font-size: 1.385rem;
        color: #757575;
        display: block;
    }

    #terms-start-popup .popup-container > .content .terms > div:nth-child(2) {
        margin-top: 1rem;
    }

    #terms-start-popup .popup-container > .content .d-block {
        display: block;
    }

    #terms-start-popup .popup-container > .content .pwa-bts label {
        font-weight: normal;
    }

    #terms-start-popup .popup-container > .content .pwa-bts > .pwa-bt {
        margin-top: 1.5rem;
    }

        #terms-start-popup .popup-container > .content .pwa-bts > .pwa-bt:nth-child(2) .pwa-button {
            background-color: #b52a2a;
        }

    #terms-start-popup .popup-container > .header{
        margin: 0;
        position: inherit;
        right: inherit;
        left: inherit;
        top: inherit;
    }
    #terms-start-popup .popup-container > .header .pwa-col {
        height: 5rem;
        line-height: 5rem;
    }
    #terms-start-popup .popup-container > .content{
        margin-top:0;
    }

.normal-msg-popup .pwa-description {
    font-size: 1.125rem;
    color: #757575;
}

.normal-msg-popup .pwa-bts {
    justify-content: space-around;
    margin-top: 4rem;
}

    .normal-msg-popup .pwa-bts > .pwa-button{
        width: 16.5rem;
    }

.normal-msg-popup .header .pwa-col {
    height: 5rem;
    line-height: 5rem;
}
#idle-timeout-popup {
    z-index: 1000;
}

#offline-popup {
    z-index: 1001;
}
#events-update-popup {
    z-index: 998;
}

#mcollect > .content > .pwa-left {
    display: flex;
    width: 26%;
    background-color: #112899;
    padding: 2.1875rem 1.875rem 1.25rem 1.875rem;
    box-sizing: border-box;
}

#mcollect > .content > .pwa-right {
    position: fixed;
    display: flex;
    left: 26%;
    top: 7.375rem;
    bottom: 1rem;
    width: 74%;
    background: #fff;
    padding: 2.25rem 2.125rem 0rem 3.3125rem;
}

#mcollect > .content.edit > .pwa-left, #mcollect > .content.edit .pwa-commands {
    display: none;
}

#mcollect > .content.edit > .pwa-right {
    left: 13%;
}

#mcollect > .content > .pwa-right > .pwa-col:nth-child(1) {
    width: 59%;
    padding-right: 3.3125rem;
    box-sizing: border-box;
    position:relative;
}

#mcollect > .content > .pwa-right > .pwa-col:nth-child(2) {
    width: 41%;
    background-color: #f2f2f2;
}

#mcollect > .content > .pwa-right > .pwa-col > .pwa-title {
    font-size: 2rem;
    color: #092ba7;
    font-weight: bold;
    text-align: center;
}

#mcollect > .content > .pwa-right > .pwa-col > .pwa-description {
    margin-top: 1.1875rem;
    font-size: 1.125rem;
    color: #757575;
    height: 19.5rem;
}

#mcollect > .content > .pwa-right > .pwa-col > .pwa-commands {
    font-size: 1.25rem;
    font-weight: bold;
    color: #545454;
    height: 4rem;
    text-decoration: underline;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 90%;
    position: absolute;
    bottom: 0;
}

    #mcollect > .content > .pwa-right > .pwa-col > .pwa-commands .pwa-finish {
        justify-self: end;
    }

#mcollect .cal-container {
    overflow-y: auto;
}

    #mcollect .cal-container .cal-value {
        margin: 0.625rem 1.125rem 0 0.75rem;
        text-align: center;
        border: solid 0.1875rem #112899;
        font-size: 3.125rem;
        color: #112899;
        font-weight: bold;
        height: 5.25rem;
        line-height: 5.25rem;
    }

        #mcollect .cal-container .cal-value.placeholder {
            font-size: 1.5625rem;
            color: #8d8d8d;
        }

        #mcollect .cal-container .cal-value.cal-out-range {
            color: red;
        }

    #mcollect .cal-container .cal-hint {
        font-size: 1.25rem;
        color: #2b2b2b;
        height: 3.25rem;
        line-height: 3.25rem;
        text-align: center;
    }

    #mcollect .cal-container .cal-keys {
        padding: 0.875rem 1.5rem 1.25rem 1.25rem;
        display: flex;
        flex-wrap: wrap;
    }

        #mcollect .cal-container .cal-keys .pwa-col {
            width: 33.33%;
            position: relative;
            margin-bottom: 1px;
        }

            #mcollect .cal-container .cal-keys .pwa-col::before {
                content: "";
                display: block;
                padding-bottom: 82%;
            }

            #mcollect .cal-container .cal-keys .pwa-col > .pwa-key {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                padding: 1px 1px;
                display: flex;
            }

                #mcollect .cal-container .cal-keys .pwa-col > .pwa-key button {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    border-radius: 0.875rem;
                    box-shadow: 0 0.125rem 0.25rem 0 rgba(81, 81, 81, 0.5);
                    background-color: #ebebeb;
                    color: #112899;
                    font-weight: bold;
                    font-size: 3.125rem;
                    border: none;
                    padding: 0;
                    flex: auto;
                    outline: none;
                }

                #mcollect .cal-container .cal-keys .pwa-col > .pwa-key button:active {
                    background-color: #112899;
                    color: #fff;
                }

    #mcollect .cal-container .cal-buttons {
        padding: 0 0.625rem 0 1.25rem;
        display: flex;
    }

        #mcollect .cal-container .cal-buttons > button {
            width: 47%;
            height: 3.25rem;
            line-height: 3.25rem;
            text-align: center;
            box-shadow: 0 0.125rem 0.25rem 0 rgba(91, 90, 90, 0.5);
            background-color: #112899;
            color: #ffffff;
            font-size: 1.25rem;
            outline: none;
        }

            #mcollect .cal-container .cal-buttons > button:first-child {
                margin-right: 6%;
            }

            #mcollect .cal-container .cal-buttons > button.cal-disabled {
                color: rgb(161, 159, 157);
                background-color: rgb(243, 242, 241);
            }

.setps-icons {
    width: 1.625rem;
    margin-top: 0.5875rem;
}

    .setps-icons > .step-nav {
        border: 0.125rem solid #fff;
        width: 1.625rem;
        height: 1.625rem;
        box-sizing: border-box;
        background-color: transparent;
        border-radius: 50%;
    }

        .setps-icons > .step-nav.value {
            background-color: #fff;
        }

.step-line {
    display: flex;
    width: 1.625rem;
    justify-content: center;
}

    .step-line > i {
        width: 0.125rem;
        height: 1.175rem;
        background: #fff;
    }

.setps-titles {
    color: #fff;
    width: 100%;
    margin-left: 1rem;
}

    .setps-titles > .step-nav {
        display: flex;
        height: 2.8rem;
        justify-content: flex-start;
        align-items: center;
    }

        .setps-titles > .step-nav > span {
            display: block;
            font-size: 0.875rem;
        }

        .setps-titles > .step-nav.current > span {
            font-size: 1.125rem;
            font-weight: bold;
        }

.vitals-confirm .content {
    padding: 7.375rem 2.625rem 6.625rem 3.125rem;
    background-color: white;
    width: 50%;
    margin: auto;
}

    .vitals-confirm .content.split {
        width: 50%;
        float: left;
    }

    .vitals-confirm .content .pwa-row {
        display: flex;
        padding: 0.5rem 0;
        border-bottom: .0625rem dashed #979797;
    }

        .vitals-confirm .content .pwa-row > .pwa-col:nth-child(1) {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;
            width: 52%;
            color: #757575;
            font-size: 1.25rem;
        }

        .vitals-confirm .content .pwa-row > .pwa-col:nth-child(2) {
            display: flex;
            justify-content: center;
            width: 11%;
            color: #757575;
            font-size: 1.5625rem;
            font-weight: bold;
        }

        .vitals-confirm .content .pwa-row > .pwa-col:nth-child(3) {
            display: flex;
            justify-content: flex-end;
            width: 37%;
        }

#mconfirm .content .pwa-row > .pwa-col .pwa-button {
    padding: .1875rem 1.375rem;
    font-size: 1.25rem;
    margin-right: 2rem;
}

#mconfirm .content .pwa-row > .pwa-col .remove-icon {
    font-size: 1.75rem;
    color: #b52a2a;
    display: flex;
    align-items: center;
}

.vitals-confirm .content .pwa-row.header {
    display: flex;
    align-items: center;
    padding: 0;
    height: 2.5rem;
    color: #112899;
    font-size: 1.25rem;
    border-bottom: solid .0625rem #112899;
}

    .vitals-confirm .content .pwa-row.header > .pwa-col {
        color: #112899;
        font-size: 1.25rem;
        font-weight: normal;
    }

#dayVitals {
    z-index: 1002;
    background-color: white;
    overflow: hidden;
    color: #5e5e5e;
}

    #dayVitals.vitals-confirm .content {
        padding-bottom: 9.625rem;
        padding-left: 22%;
        padding-right: 22%;
    }

    #dayVitals.pwa-container > .header {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }

        #dayVitals.pwa-container > .header > span {
            display: block;
            text-align: center;
        }

            #dayVitals.pwa-container > .header > span.title {
                margin-top: 2rem;
                font-size: 2rem;
                line-height: 2rem;
            }

            #dayVitals.pwa-container > .header > span.note {
                font-size: 1rem;
                line-height: 2rem;
            }

    #dayVitals .content > .header {
        display: flex;
        align-items: center;
        padding: 0;
        height: 2.5rem;
        font-size: 1.25rem;
    }

        #dayVitals .content > .header > .pwa-col {
            font-size: 1.25rem;
            text-decoration: underline;
            font-weight: bold;
        }

    #dayVitals .content > .item {
        display: flex;
        padding: .3rem 0;
        border-bottom: none;
    }

    #dayVitals .content > div > .pwa-col:nth-child(1) {
        width: 40%;
    }

    #dayVitals .content > div > .pwa-col:nth-child(2) {
        width: 35%;
        justify-content: left;
    }

    #dayVitals .content > div > .pwa-col:nth-child(3) {
        width: 25%;
        justify-content: left;
    }

    #dayVitals.pwa-container > .footer {
        justify-content: space-between;
        padding-left: 20%;
        padding-right: 20%;
    }

    #dayVitals.pwa-container > .note {
        position: fixed;
        bottom: 6.625rem;
        background-color: #f7f6f6;
        text-align: left;
        width: 100%;
        height: 4rem;
    }

        #dayVitals.pwa-container > .note > p {
            margin-top: 1rem;
            padding-left: 15%;
            padding-right: 15%;
        }

#mSubmissionMsg {
    z-index: 253;
    width: 100%;
}

    #mSubmissionMsg .pwa-center {
        width: 100%;
    }

#ac-dialog > .content {
    height: 100vh;
}

    #ac-dialog > .content .hint, #mSubmissionMsg > .content .hint {
        height: 90vh;
        line-height: 5vh;
        padding: 20vh 5vh 0 5vh;
    }

#mSubmissionMsg.event-popup {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
}

#mSubmissionMsg .content > .pwa-row {
    display: flex;
    justify-content: center;
    color: #3b3b3b;
    font-size: 1.25rem;
}

    #mSubmissionMsg .content > .pwa-row:first-child {
        padding: 2rem 0;
    }

#mSubmissionMsg .sending .back, #mSubmissionMsg .sending .pwa-button {
    display: none;
}

#mSubmissionMsg .sending.header > .pwa-center {
    width: 100%;
}
#mSubmissionMsg > .sending.content .hint{
    height: auto;
    line-height: normal;
    padding:1.5rem;
}

.loader {
    margin: 100px auto;
    font-size: 25px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    animation: spinner 1.1s infinite ease;
    transform: translateZ(0);
}

/*camera loader*/
#mSubmissionMsg.camera .loader{
    margin-bottom: 0;
    margin-top: 80px;
}
/*camera loader*/

@keyframes spinner {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #00aff0, 1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2), 2.5em 0em 0 0em rgba(0, 175, 240, 0.2), 1.75em 1.75em 0 0em rgba(0, 175, 240, 0.2), 0em 2.5em 0 0em rgba(0, 175, 240, 0.2), -1.8em 1.8em 0 0em rgba(0, 175, 240, 0.2), -2.6em 0em 0 0em rgba(0, 175, 240, 0.5), -1.8em -1.8em 0 0em rgba(0, 175, 240, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 175, 240, 0.7), 1.8em -1.8em 0 0em #00aff0, 2.5em 0em 0 0em rgba(0, 175, 240, 0.2), 1.75em 1.75em 0 0em rgba(0, 175, 240, 0.2), 0em 2.5em 0 0em rgba(0, 175, 240, 0.2), -1.8em 1.8em 0 0em rgba(0, 175, 240, 0.2), -2.6em 0em 0 0em rgba(0, 175, 240, 0.2), -1.8em -1.8em 0 0em rgba(0, 175, 240, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 175, 240, 0.5), 1.8em -1.8em 0 0em rgba(0, 175, 240, 0.7), 2.5em 0em 0 0em #00aff0, 1.75em 1.75em 0 0em rgba(0, 175, 240, 0.2), 0em 2.5em 0 0em rgba(0, 175, 240, 0.2), -1.8em 1.8em 0 0em rgba(0, 175, 240, 0.2), -2.6em 0em 0 0em rgba(0, 175, 240, 0.2), -1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 175, 240, 0.2), 1.8em -1.8em 0 0em rgba(0, 175, 240, 0.5), 2.5em 0em 0 0em rgba(0, 175, 240, 0.7), 1.75em 1.75em 0 0em #00aff0, 0em 2.5em 0 0em rgba(0, 175, 240, 0.2), -1.8em 1.8em 0 0em rgba(0, 175, 240, 0.2), -2.6em 0em 0 0em rgba(0, 175, 240, 0.2), -1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 175, 240, 0.2), 1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2), 2.5em 0em 0 0em rgba(0, 175, 240, 0.5), 1.75em 1.75em 0 0em rgba(0, 175, 240, 0.7), 0em 2.5em 0 0em #00aff0, -1.8em 1.8em 0 0em rgba(0, 175, 240, 0.2), -2.6em 0em 0 0em rgba(0, 175, 240, 0.2), -1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 175, 240, 0.2), 1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2), 2.5em 0em 0 0em rgba(0, 175, 240, 0.2), 1.75em 1.75em 0 0em rgba(0, 175, 240, 0.5), 0em 2.5em 0 0em rgba(0, 175, 240, 0.7), -1.8em 1.8em 0 0em #00aff0, -2.6em 0em 0 0em rgba(0, 175, 240, 0.2), -1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 175, 240, 0.2), 1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2), 2.5em 0em 0 0em rgba(0, 175, 240, 0.2), 1.75em 1.75em 0 0em rgba(0, 175, 240, 0.2), 0em 2.5em 0 0em rgba(0, 175, 240, 0.5), -1.8em 1.8em 0 0em rgba(0, 175, 240, 0.7), -2.6em 0em 0 0em #00aff0, -1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 175, 240, 0.2), 1.8em -1.8em 0 0em rgba(0, 175, 240, 0.2), 2.5em 0em 0 0em rgba(0, 175, 240, 0.2), 1.75em 1.75em 0 0em rgba(0, 175, 240, 0.2), 0em 2.5em 0 0em rgba(0, 175, 240, 0.2), -1.8em 1.8em 0 0em rgba(0, 175, 240, 0.5), -2.6em 0em 0 0em rgba(0, 175, 240, 0.7), -1.8em -1.8em 0 0em #00aff0;
    }
}

.ac-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -0.5em;
    margin-top: -0.5em;
    z-index: 1000;
}

    .ac-loading.span {
        display: block;
    }

/*.content > .pwa-row > .fa-spinner {
    font-size: 15rem;
    color: #00aff0;
}*/

#upload {
    width: 100%;
    padding: 1rem 1rem;
}

    #upload > .webcam-container {
        position: fixed;
        top: 1rem;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        border: 1px solid #000;
    }

    #upload .close {
        width: 2rem;
        height: 2rem;
        background: #112899;
        border-radius: 1rem;
        position: fixed;
        top: .5rem;
        right: .5rem;
        opacity: 1;
        color: #fff;
    }

    #upload > .webcam-container > .content {
        position: fixed;
        top: 2rem;
        left: 3rem;
        right: 3rem;
        /*bottom: 4.525rem;*/
        bottom: 5rem;
    }

    #upload .picture-container {
        position: relative;
    }

        #upload .picture-container > .note {
            z-index: 10;
            position: absolute;
            bottom: .5rem;
            left: 0;
            right: 0;
            text-align: center;
            color: #fff;
            font-size: 1.25rem;
            text-shadow: 0 0 1px #999, 1px 1px 2px #888, 2px 2px 2px #777, 3px 3px 2px #666, 4px 4px 2px #555, 5px 5px 2px #333;
        }

        #upload video, #upload .picture-container img {
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

    #upload > .web-bts {
        position: fixed;
        height: 3.125rem;
        bottom: 1.4rem;
        left: 3rem;
        right: 3rem;
        display: flex;
        justify-content: space-between;
    }

        #upload > .web-bts > .note {
            line-height: 3.125rem;
        }

        #upload > .web-bts > .pwa-button {
            padding: 0.625rem 2.625rem .625rem 2.625rem;
            font-size: 1.5625rem;
            font-weight: bold;
        }

    #upload .capture-after, #upload .picture-container, #upload canvas {
        display: none;
    }

    #upload > .web-bts button.pwa-button{
        padding: 0.625rem 3.05rem 0.625rem 3.05rem;
    }


#eductaion {
    margin-top: 7.375rem;
}

#eductaion-tabs {
    position: fixed;
    top: 7.375rem;
    height: 3.5625rem;
    width: 100%;
    z-index: 100;
}

    #eductaion-tabs > ul {
        display: flex;
        flex-direction: row;
        height: 100%;
        padding: 0;
    }

        #eductaion-tabs > ul > li {
            width: 33.33%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #112899;
            color: #fff;
            font-size: 1.5625rem;
            font-weight: bold;
            border-left: 1px solid #fff;
        }

            #eductaion-tabs > ul > li.active {
                background-color: #00aff0;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
            }

#eductaion-content {
    margin-top: 11.0275rem;
    padding: 0.875rem 5.25rem 2rem 5.25rem;
}

    #eductaion-content .tab-nodata {
        text-align: center;
        line-height: 2.875rem;
        font-size: 1.125rem;
        font-weight: 500
    }

.education-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

    .education-list > li {
        width: 25%;
        padding: 0.875rem 0.5rem 0.875rem 0.5rem;
    }

        .education-list > li > .video-item, .education-list > li > .dt-item {
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
            background-color: #f3f3f3;
            cursor: pointer;
            /*height: 14.375rem;*/
            position: relative;
        }

        .education-list > li > .dt-item {
            display: flex;
            flex-direction: column;
            text-decoration: none;
        }

            .education-list > li > .dt-item > .dt-icon {
                display: flex;
                height: 9.375rem;
                width: 100%;
                background-color: #d3e3e9;
                flex-direction: column;
                align-items: center;
            }

                .education-list > li > .dt-item > .dt-icon > i {
                    margin-top: 2.625rem;
                    font-size: 4.125rem;
                    color: #000;
                }
.tutorials-container .education-list > li > .dt-item.db-color{
    background-color:#132F99;
}
.tutorials-container .education-list > li > .dt-item.lb-color{
    background-color:#5AB1EF;
}
.tutorials-container .education-list > li > .dt-item.g-color{
    background-color:#62B545;
}
.tutorials-container .education-list > li > .dt-item > .item-title{
    position: relative;
    padding-left: 5rem;
    height: 4.5rem;
    text-align: left;
    padding-top: 0.1rem;
}
.tutorials-container .education-list > li > .dt-item.default {background-color:#d3e3e9;}
.tutorials-container .education-list > li > .dt-item:not(.default) > .item-title {color:#fff;}
.tutorials-container .education-list > li > .dt-item > .item-title > img{position:absolute;left: 1rem;top: 0.4rem;width:3rem;height:3rem;}
.tutorials-container .education-list > li > .dt-item > .item-title > img.not-done{
    content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTcuODM0IDkuMzg2SDQuNjkzYS45MzkuOTM5IDAgMCAxLS45MzktLjkzOFY0LjY5MmEuOTM5LjkzOSAwIDAgMSAuOTM5LS45MzloMTMuMTRhLjkzOC45MzggMCAwIDEgLjk0Ljk0djMuNzUzYS45MzkuOTM5IDAgMCAxLS45NC45NHpNNS42MzIgNy41MWgxMS4yNjNWNS41NzVINS42MzJWNy41MXpNMTcuODM0IDExLjMzOEg0LjY5M2EuOTM5LjkzOSAwIDAgMC0uOTM5LjkzOXYzLjY4YS45MzguOTM4IDAgMCAwIC45MzkuOTM4aDEwLjY2M2wzLjQxNi0zLjQ3M3YtMS4xNDVhLjkzOS45MzkgMCAwIDAtLjkzOC0uOTM5em0tLjk0IDMuNjhINS42MzNWMTMuMTRoMTEuMjYzdjEuODc4eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik04LjUwNCAyNy42OTh2LS4wNTZsLjMtMS4zMDVIMS44NzdWMS44NzdIMjAuNjV2OS42MjFsMS44NzgtMS43NzRWLjkzOUEuOTM5LjkzOSAwIDAgMCAyMS41ODggMEguOTM4QS45MzkuOTM5IDAgMCAwIDAgLjkzOXYyNi4yOGEuOTM5LjkzOSAwIDAgMCAuOTM5Ljk0aDcuNTA4Yy4wMDgtLjE1NS4wMjctLjMwOS4wNTctLjQ2ek0xOC43NzIgMTYuMTE2bC0uNzMyLjc0MmEuOTM5LjkzOSAwIDAgMCAuNzMyLS43NDJ6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTMuNzU0IDIzLjQwOWEuOTM5LjkzOSAwIDAgMCAuOTM5LjkzOWg0LjU0M2wuMjgxLTEuMjIuMTIyLS41MTd2LS4wNDdINS42MzJWMjAuNjVoNS45NWwxLjg3OC0xLjg3N0g0LjY5M2EuOTM4LjkzOCAwIDAgMC0uOTM5LjkzOXYzLjY5OHpNMjkuNTU2IDEzLjc3bC0zLjE2My0zLjE2NGExLjUxIDEuNTEgMCAwIDAtMi4xNCAwTDExLjM4NSAyMy41NWwtMS4wNiA0LjUxNGExLjUxMSAxLjUxMSAwIDAgMCAxLjE4MiAxLjc4NGMuMDk3LjAxLjE5NC4wMS4yOTEgMCAuMTE1LjAxOC4yMzIuMDE4LjM0NyAwbDQuNTUzLTEuMDA1IDEyLjg1OC0xMi44ODdhMS41IDEuNSAwIDAgMCAwLTIuMTN2LS4wNTd6TTE1Ljc0IDI3LjEzNGwtMy40MzUuNzYuODM1LTMuNDA3IDkuNjUtOS43NTIgMi42NDYgMi42NDctOS42OTYgOS43NTJ6bTEwLjc1Ny0xMC44MTNsLTIuNjQ3LTIuNjQ2IDEuNDkyLTEuNDc0IDIuNjY2IDIuNjY2LTEuNTExIDEuNDU0eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
}
.tutorials-container .education-list > li > .dt-item > .item-title > img.all-done{
    content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iNzUiIHZpZXdCb3g9IjAgMCA3NSA3NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjMuNyAzOS4yMjVsMTAuMzUgMTAuMzUgMTcuMjUtMjAuNyIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0zNy41IDcyQzU2LjU1NCA3MiA3MiA1Ni41NTQgNzIgMzcuNSA3MiAxOC40NDYgNTYuNTU0IDMgMzcuNSAzIDE4LjQ0NiAzIDMgMTguNDQ2IDMgMzcuNSAzIDU2LjU1NCAxOC40NDYgNzIgMzcuNSA3MnoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9zdmc+);
}
.tutorials-container .education-list > li > .dt-item.default > .item-title > img.not-done{
    content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTcuODM0IDkuMzg2SDQuNjkzYS45MzkuOTM5IDAgMCAxLS45MzktLjkzOFY0LjY5MmEuOTM5LjkzOSAwIDAgMSAuOTM5LS45MzloMTMuMTRhLjkzOC45MzggMCAwIDEgLjk0Ljk0djMuNzUzYS45MzkuOTM5IDAgMCAxLS45NC45NHpNNS42MzIgNy41MWgxMS4yNjNWNS41NzVINS42MzJWNy41MXpNMTcuODM0IDExLjMzOEg0LjY5M2EuOTM5LjkzOSAwIDAgMC0uOTM5LjkzOXYzLjY4YS45MzguOTM4IDAgMCAwIC45MzkuOTM4aDEwLjY2M2wzLjQxNi0zLjQ3M3YtMS4xNDVhLjkzOS45MzkgMCAwIDAtLjkzOC0uOTM5em0tLjk0IDMuNjhINS42MzNWMTMuMTRoMTEuMjYzdjEuODc4eiIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik04LjUwNCAyNy42OTh2LS4wNTZsLjMtMS4zMDVIMS44NzdWMS44NzdIMjAuNjV2OS42MjFsMS44NzgtMS43NzRWLjkzOUEuOTM5LjkzOSAwIDAgMCAyMS41ODggMEguOTM4QS45MzkuOTM5IDAgMCAwIDAgLjkzOXYyNi4yOGEuOTM5LjkzOSAwIDAgMCAuOTM5Ljk0aDcuNTA4Yy4wMDgtLjE1NS4wMjctLjMwOS4wNTctLjQ2ek0xOC43NzIgMTYuMTE2bC0uNzMyLjc0MmEuOTM5LjkzOSAwIDAgMCAuNzMyLS43NDJ6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTMuNzU0IDIzLjQwOWEuOTM5LjkzOSAwIDAgMCAuOTM5LjkzOWg0LjU0M2wuMjgxLTEuMjIuMTIyLS41MTd2LS4wNDdINS42MzJWMjAuNjVoNS45NWwxLjg3OC0xLjg3N0g0LjY5M2EuOTM4LjkzOCAwIDAgMC0uOTM5LjkzOXYzLjY5OHpNMjkuNTU2IDEzLjc3bC0zLjE2My0zLjE2NGExLjUxIDEuNTEgMCAwIDAtMi4xNCAwTDExLjM4NSAyMy41NWwtMS4wNiA0LjUxNGExLjUxMSAxLjUxMSAwIDAgMCAxLjE4MiAxLjc4NGMuMDk3LjAxLjE5NC4wMS4yOTEgMCAuMTE1LjAxOC4yMzIuMDE4LjM0NyAwbDQuNTUzLTEuMDA1IDEyLjg1OC0xMi44ODdhMS41IDEuNSAwIDAgMCAwLTIuMTN2LS4wNTd6TTE1Ljc0IDI3LjEzNGwtMy40MzUuNzYuODM1LTMuNDA3IDkuNjUtOS43NTIgMi42NDYgMi42NDctOS42OTYgOS43NTJ6bTEwLjc1Ny0xMC44MTNsLTIuNjQ3LTIuNjQ2IDEuNDkyLTEuNDc0IDIuNjY2IDIuNjY2LTEuNTExIDEuNDU0eiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}
.tutorials-container .education-list > li > .dt-item.default > .item-title > img.all-done{
    content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iNzUiIHZpZXdCb3g9IjAgMCA3NSA3NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjMuNyAzOS4yMjVsMTAuMzUgMTAuMzUgMTcuMjUtMjAuNyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0zNy41IDcyQzU2LjU1NCA3MiA3MiA1Ni41NTQgNzIgMzcuNSA3MiAxOC40NDYgNTYuNTU0IDMgMzcuNSAzIDE4LjQ0NiAzIDMgMTguNDQ2IDMgMzcuNSAzIDU2LjU1NCAxOC40NDYgNzIgMzcuNSA3MnoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9zdmc+);
}
.tutorials-container .education-list > li > .dt-item > .dt-icon {
    height: 3.5rem;
    background-color:#F1F1F1;    
}
.tutorials-container .education-list > li > .dt-item > .dt-icon >span{
    font-weight:bold;
    font-size: 1.3rem;
    text-transform: capitalize;
    color: #000;
    padding-top: 0.8rem;
}
.tutorials-container .education-list > li > .dt-item:not(.default) > .dt-icon>span{
   color:#132F99;    
}

#eductaion-content .tutorials-container i.percent {
    margin-top: 1rem;
    background-color: white;
    opacity: 1;
}

.education-list > li > .dt-item > .dt-icon > i.percent {
    width: 3.5rem;
    height: 3.5rem;
    border: 5px solid #fff;
    border-radius: 2.5625rem;
    box-sizing: border-box;
    font-size: 1.25rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    letter-spacing: -0.21px;
    opacity: 0.6;
}

    .education-list > li > .dt-item > .dt-icon > i.percent.all-done {
        color: green;
    }

    .education-list > li > .dt-item > .dt-icon > i.percent.all-zero {
        color: red;
    }

/*fix PDF style - remove icon*/
.documents-container .education-list > li > .dt-item > .dt-icon {
    height: 5.375rem;
}

    .documents-container .education-list > li > .dt-item > .dt-icon > i.fa-file-pdf {
        display: none;
    }

    .documents-container .education-list > li > .dt-item > .dt-icon > .pwa-button {
        margin-top: 1.6rem;
    }
/*fix PDF style - remove icon*/
.education-list > li > .dt-item > .dt-icon > .pwa-button {
    margin-top: 1rem;
    width: 5.8125rem;
    height: 1.875rem;
    line-height: 1.875rem;
}

.education-list > li > .video-item > .video-image {
    display: flex;
    justify-content: center;
}

    .education-list > li > .video-item > .video-image > img {
        height: 8.75rem;
        max-width: 100%;
    }

.education-list > li .item-title {
    margin-top: .8rem;
    margin-bottom: .8rem;
    height: 3.625rem;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
    text-align: center;
    color: #070707;
    font-size: 1.07rem;
    font-weight: bold;
    padding: 0.8rem;
}

.education-list > li > .video-item > i {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 5rem;
    color: #e0e0e0;
    top: 2rem;
    opacity: .7;
}
.education-list > li > .video-item > .item-title{
    padding-bottom:3.7rem;
}
/*video/ifram modal*/
.pwa-modal {
    display: none;
}

    .pwa-modal > div {
        z-index: 200;
    }

    .pwa-modal .modal-body {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        bottom: 6.25rem;
    }

        .pwa-modal .modal-body iframe {
            width: 100%;
        }

        .pwa-modal .modal-body video {
            height: 100%;
        }

    .pwa-modal .footer {
        position: fixed;
        bottom: 0;
        height: 6.25rem;
        background: #f7f6f6;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

        .pwa-modal .footer .pwa-button {
            margin-top: 1.5rem;
            margin-right: 3rem;
            height: 3.25rem;
            line-height: 3.25rem;
            width: 19rem;
            font-size: 1.5625rem;
            font-weight: bold;
        }

.offline-modal.pwa-modal .modal-body {
    display: block;
}

    .offline-modal.pwa-modal .modal-body .header {
        margin-bottom: 1rem;
        font-weight: bold;
        font-size: 1.25rem;
    }

        .offline-modal.pwa-modal .modal-body .header img {
            width: 4rem;
            height: 4rem;
            margin-right: 1rem;
        }

    .offline-modal.pwa-modal .modal-body .content {
        font-size: 1rem;
    }
/*#region notifications & event detail*/
 .notifications{
    z-index: 300;
}
.notifications.invisible{
    z-index: 0;
}

    .notifications > .popup-container > .header {
        padding-left: 2.375rem;
        padding-right: 2.25rem;
    }

        /*    .notifications > .popup-container > .header .pwa-title {
            min-width: 100%;
        }
*/
         .notifications > .popup-container > .header .pwa-title > .pwa-row {
            width: 100%;
            margin-left: 0;
            display: flex;
            align-items: center;
        }

             .notifications > .popup-container > .header .pwa-title > .pwa-row > div {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 70%;
            }

     .notifications .popup-container > .header > .pwa-col:nth-child(1) {
        max-width: 100% !important;
        min-width: 100%;
    }


     .notifications > .popup-container > .header .pwa-title > .pwa-row > .pwa-col:nth-child(2) {
        padding-left: 5px;
        width: 40%;
        text-align: right;
    }

     .notifications > .popup-container > .header .pwa-title > .pwa-row > .pwa-col:nth-child(3) {
        padding-left: 5px;
        width: 23%;
    }

/*reminder*/
 .notifications.reminders{}
 .notifications.reminders  > .popup-container > .content > p{display:none;}
/*reminder*/

.popup-container > .header > .pwa-col > i {
    line-height: inherit;
    margin-right: 0.875rem;
    font-size: 2.5rem;
}

.popup-container .action-bts > .pwa-button {
    width: 9rem;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    background-color: #00aff0;
    margin-left: 1.4375rem;
    height: 2.625rem;
    line-height: 2.625rem;
}

#month_calendar .pwa-button.disabled {
    opacity: 0.67;
    cursor: default;
}

.event-popup > .popup-container > .content {
    padding: 3.4375rem 2.25rem 2.25rem 2.25rem;
    display: block;
}

    .event-popup > .popup-container > .content > p {
        margin-bottom: 1.375rem;
        font-size: 1.5625rem;
        color: #757575;
        letter-spacing: -1.45px;
    }

.event-popup > .popup-container > .content img{
    max-width:100%;
}

.event-popup > .popup-container > .footer {
    padding-bottom: 2.25rem;
    justify-content: space-around;
}

    .event-popup > .popup-container > .footer > .pwa-button {
        font-size: 1.5625rem;
        font-weight: bold;
        line-height: normal;
        color: #ebeeea;
        padding: 0.75rem 4.5rem;
    }

/*notification & reminder cascading style*/
.notifications >.popup-container{position:relative;}
.notifications >.popup-container>*:not(.header){position:relative;z-index:3;}
.notifications >.popup-container .footer{border-bottom: 1px solid #112899;}
.notifications >.popup-container .multi-tip{
    position:absolute;
    z-index:3;
    bottom: 0.5rem;
    padding-left: 2.25rem;
    font-size: 1.1rem;
    color: #757575;
}
.notifications >.popup-container .multi-1{
    position: absolute;
    background-color: rgba(255, 255, 255, 1);
    height: 2rem;
    bottom: -0.9rem;
    width: 98%;
    left: 1%;    
    z-index:2;
    border-bottom: 1px solid #112899;
}
.notifications >.popup-container .multi-2{
    position:absolute;
    background-color: rgba(255, 255, 255, 1);
    height: 2rem;
    bottom: -1.7rem;
    width:96%;
    left:2%;    
    z-index:1;
    border-bottom: 1px solid #112899;
}
/*notification & reminder cascading style*/

/*#notifications*/

/*calendar*/
/*home page*/
/*#region home page*/
.ac-container > .header {
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 7.375rem;
    background-color: #f2f2f2;
    color: #5e5e5e;
    font-size: 1.5625rem;
}

.ac-container .hostpital-logo,
.ac-container .acticare-logo {
    display: block;
    width: 10.9375rem;
    height: 2.91875rem;
    background-image: url("/content/images/acticare.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.ac-container .ac-center {
    display: block;
    flex-grow: 1;
    text-align: center;
    margin: auto;
}

    .ac-container .ac-center .time {
        font-size: 4rem;
    }

    .ac-container .ac-center .date {
        font-size: 1.125rem;
    }

.ac-container .ac-right,
.ac-container .ac-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.red {
    color: red;
}

.green {
    color: green;
}

.status .signal{
    margin-right:0.2em;
}
.status .signal.wifi{
    margin-left:1.2em;
    text-transform: capitalize;
}
.status .signal.cellular{
    margin-left:1em;
    text-transform: capitalize;
}
.status i.signal{
    vertical-align: text-top;
}
.status .fa-exclamation-triangle{color:red;}

.charging {
    margin: 0 0 0 1rem;
}

    .charging img {
        width: 40px;
        height: 2rem;
    }    

.ac-container > .content {
    padding-top: 9.375rem;
    text-align: center;
    overflow-y: auto;
    box-sizing: padding-box;
}

.ac-container .pwa-container .content {
    margin-top: 0;
}

.ac-container .status-bar {
    height: 2.0rem;
    background-color: #112899;
    color: white;
    font-size: 1.125rem;
    font-weight: bold;
    display: flex;
    text-align: center;
    position: fixed;
    top: 7.375rem;
    width: 100%;
}

    .ac-container .status-bar .status {
        font-size: 1rem;
        margin: auto;
        line-height: 2.0rem;
    }

    .ac-container .status-bar .title {
        flex-grow: 1;
        margin: auto;
    }

/*.ac-container .status-bar .evt-count {
        background-color: #00aeef;
        padding: 0.25rem 0.5rem 0.2rem;
    }*/

.ac-container > .footer {
    display: flex;
    flex-wrap: nowrap;
    background-color: #f5f2f2;
    box-shadow: 11px 0 5px 10px rgba(106, 106, 106, 0.64);
    position: fixed;
    bottom: 0;
    width: 100%;
}

.ac-container .footer .footer-sub-container {
    display: flex;
    margin: auto;
    text-align: center;
}

.ac-container .footer .nav-item {
    flex-grow: 1;
    text-align: center;
    min-width: 150px;
}
    /*bug #38955.*/
    /*        .ac-container .footer .nav-item:nth-child(5), .ac-container .footer .nav-item:nth-child(6) {
            min-width: 110px;
            width: 110px;
        }*/

    .ac-container .footer .nav-item a {
        display: inline-block;
        margin: 1rem auto;
        font-size: 1.5625rem;
        color: #000000;
    }

        .ac-container .footer .nav-item a:hover {
            text-decoration: none;
        }

.ac-container .footer .circle {
    display: block;
    height: 4.5rem;
    width: 4.5rem;
    border-radius: 6.5rem;
    background-color: #55bba4;
    text-align: center;
    margin-bottom: 0.875rem;
    margin: auto;
}

    .ac-container .footer .circle .fad {
        font-size: 2.3rem;
        margin: auto;
        line-height: 4.5rem;
        --fa-secondary-opacity: 1;
        color: black;
    }

    .ac-container .footer .circle.calendar-icon .fad {
        color: #e18936;
        --fa-secondary-color: #fffffd;
    }


    .ac-container .footer .circle.phone-icon {
        background-color: #63a0a6;
    }

        .ac-container .footer .circle.phone-icon .fad {
            color: #d3d2d2;
            --fa-secondary-color: #f1eeda;
        }

    .ac-container .footer .circle.dashboard-icon {
        background-color: #8bb5ff;
    }

        .ac-container .footer .circle.dashboard-icon .fad {
            color: #1e6775;
            --fa-secondary-color: #1e6775;
        }

    .ac-container .footer .circle.education-icon {
        background-color: #9f8cff;
    }

        .ac-container .footer .circle.education-icon .fad {
            --fa-secondary-color: #bfa237;
        }

    .ac-container .footer .circle.vitals-icon {
        background-color: #607bab;
    }

        .ac-container .footer .circle.vitals-icon .fad {
            color: white;
            --fa-secondary-color: black;
        }

    .ac-container .footer .circle.camera-icon {
        background-color: #a7abc9;
    }

        .ac-container .footer .circle.camera-icon .fad {
            --fa-secondary-color: #faf7f7;
        }

    .ac-container .footer .circle.settings-icon {
        background-color: #b4d0f9;
    }

.ac-container .event-item .status .fa-circle {
    color: transparent;
}

    .ac-container .event-item .status .fa-circle.current {
        color: #00b0f1;
    }



.ac-container .event-item {
    display: flex;
    border-bottom: solid 1px #979797;
    font-size: 1.5625rem;
    height: 3.8rem;
    line-height: 3.8rem;
    text-align: left;
    cursor: pointer;
}

    .ac-container .event-item .status {
        width: 6%;
        padding-left: 2.5rem;
    }

    .ac-container .event-item .time {
        width: 10%;
        letter-spacing: -0.09rem;
        color: #112899;
        padding-right: 1.5rem;
        text-align: right;
        min-width:110px;
    }

    .ac-container .event-item .title {
        width: 73%;
        letter-spacing: -0.09rem;
        color: #112899;
        padding-right: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ac-container .event-item.patient-event .time, .ac-container .event-item.patient-event .title {
        color: #0b7faa;
    }

    .ac-container .event-item .action {
        width: 11%;
        padding-right: 2.5rem;
        text-align: right;
        height: 3.8rem;
        line-height: 3.5rem;
    }

        .ac-container .event-item .action button {
            width: 4.9rem;
            font-size: 18px;
            text-transform: uppercase;
            color: white;
            border: none;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
            background-color: #112899;
            height: 2.5625rem;
            line-height: 2.5625rem;
        }
/*#endregion*/

/*#region 3 weeks calendar view*/
/*overide fullcalendar*/
.month-calendar .main > table {
    border: none;
    background-color: #d8d8d8;
}

.month-calendar .fc-day.fc-col-header-cell {
    background-color: #d8d8d8;
}

    .month-calendar .fc-day.fc-col-header-cell a {
        color: #5e5e5e;
    }

.month-calendar .fc-day {
    background-color: white;
}

    .month-calendar .fc-day .fc-daygrid-day-top {
        background-color: #f6f6f6;
        padding: 0.125rem;
        height: 2.125rem;
        line-height: 2.125rem;
    }


        .month-calendar .fc-day .fc-daygrid-day-top .fc-daygrid-day-number {
            font-size: 1.5625rem;
            color: #5e5e5e;
            padding: 0;
        }

        .month-calendar .fc-day .fc-daygrid-day-top .evt-count {
            color: #112899;
            flex-grow: 1;
            font-size: 1.125rem;
            position: absolute;
            left: 7px;
        }

    .month-calendar .fc-day.selected .fc-daygrid-day-top {
        background-color: #112899;
    }

        .month-calendar .fc-day.selected .fc-daygrid-day-top .evt-count {
            font-weight: bold;
            color: #ffffff;
        }

        .month-calendar .fc-day.selected .fc-daygrid-day-top .fc-daygrid-day-number {
            background-color: #00aff0;
            border-radius: 50%;
            height: 1.75rem;
            width: 1.75rem;
            font-size: 1.125rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            margin-right: 0.125rem;
        }

.month-calendar .fc .fc-daygrid-day.fc-day-today {
    background-color: white;
}

    .month-calendar .fc .fc-daygrid-day.fc-day-today > .fc-daygrid-day-frame {
        border: 1px solid #00aff0;
    }

.month-calendar .fc-daygrid-dot-event .fc-event-title {
    font-weight: normal;
}


.month-calendar .fc-event {
    cursor: pointer;
    color: #112899;
}

    .month-calendar .fc-event > .fc-daygrid-event-dot {
        display: none;
    }

    .month-calendar .fc-event > .fc-event-time {
        margin-left: 0.2rem;
        margin-right: 0.3rem;
        text-align: right;
        min-width: 45px;
    }

    .month-calendar .fc-event > .fc-event-title {
        text-align: left;
        margin-right: 0.5rem;
        text-overflow: ellipsis;
    }

    .month-calendar .fc-event.patient-event {
        color: #0b7faa;
    }

.month-calendar .fc .fc-daygrid-day-bottom {
    margin-left: .8rem;
}

.month-calendar, .darshboard-container {
    padding-top: 7.375rem;
}

    .month-calendar > .header, .darshboard-container > .header {
        color: white;
        font-size: 1.5625rem;
        font-weight: bold;
        height: 4.125rem;
        background-color: #112899;
        text-align: center;
        line-height: 4.125rem;
        position: relative;
    }


        .month-calendar > .header .fa-less-than {
            font-weight: normal;
            margin-right: 0.5rem;
            cursor: pointer;
        }

        .month-calendar > .header .fa-greater-than {
            font-weight: normal;
            margin-left: 0.5rem;
            cursor: pointer;
        }

    .month-calendar .add-event {
        position: absolute;
        right: 0;
        top: 0;
    }

        .month-calendar .add-event button {
            height: 2.3125rem;
            line-height: 2.3125rem;
            background-color: #0b99cd;
            font-size: 0.875rem;
            border: none;
            color: #fffafa;
            margin-right: 1.8125rem;
            text-transform: uppercase;
            font-weight: normal;
            padding: 0 1.4375rem;
        }

#month_calendar .fa-less-than, #month_calendar .fa-greater-than {
    border: 3px solid white;
    border-radius: 5px;
    font-size: 1.45rem;
    height: 27px;
    width: 30px;
}
#month_calendar .fa-less-than:hover,
#month_calendar .fa-greater-than:hover,
#month_calendar .fa-less-than:focus,
#month_calendar .fa-greater-than:focus{
  background-color: #00FF00;
  border-color: #dbdbdb;
}
#month_calendar .fa-less-than:active,
#month_calendar .fa-greater-than:active{
  background-color: #32CD32;
  border-color: #dbdbdb;
}
/*#endregion*/
/*#region day events list pop up*/
#day-events-popup {
    z-index: 250;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: :translateX(-50%) translateY(-50%);
    -moz-transform: :translateX(-50%) translateY(-50%);
    -webkit-transform: :translateX(-50%) translateY(-50%);
    bottom: auto;
    padding: 100% 7.06rem;
}

/*    #day-events-popup.moreitems {
        top: 0;
        max-height: 800px;
        overflow-y: scroll;
    }*/
    #day-events-popup.moreitems > .popup-container {
        max-height: 650px;
        overflow-y: scroll;
    }

    #day-events-popup .pwa-row.header {
        margin: 0;
        position: inherit;
        right: inherit;
        left: inherit;
        top: inherit;
    }

    #day-events-popup.event-popup > .popup-container > .content {
        padding: 0 0 2.25rem 0;
    }

    #day-events-popup .evt-item {
        display: flex;
        font-size: 1.5625rem;
        padding: 0.45rem 0;
        border-bottom: solid 1px #979797;
        color: #757575;
    }

        #day-events-popup .evt-item.evt-assigned {
            color: #4ea1bf;
        }

        #day-events-popup .evt-item .time {
            width: 20%;
            text-align: right;
            padding-right: 3rem;
        }

        #day-events-popup .evt-item .title {
            width: 53%;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #day-events-popup .evt-item .action {
            width: 27%;
            color: #fff;
            font-size: 1.125rem;
            line-height: 2.06rem;
        }

            #day-events-popup .evt-item .action > div {
                padding: 0.375rem 0.6875rem;
            }

            /*            #day-events-popup .evt-item .action.show {
                display: flex !important;
            }*/

            #day-events-popup .evt-item .action .far {
                margin-right: 0.375rem;
            }

        #day-events-popup .evt-item .edit-btn, #day-events-popup .evt-item .open-btn {
            background-color: #112899;
            margin-right: 2.5rem;
        }

        #day-events-popup .evt-item .remove-btn {
            background-color: #ac1414;
        }

        #day-events-popup .evt-item .action > div.open-btn {
            padding: 0.375rem 2.6875rem;
            float: right;
        }

    #day-events-popup .popup-container > .header > .pwa-col {
        height: 5rem;
        line-height: 5rem;
    }

        #day-events-popup .popup-container > .header > .pwa-col:nth-child(1) {
            display: inherit;
        }

    #day-events-popup .pwa-title.show {
        font-size: 1.5625rem;
        color: #fff;
        font-weight: bold;
    }

    #day-events-popup .disabled {
        opacity: 0.47;
        cursor: default;
    }

    #day-events-popup .popup-container > .content {
        margin-top: 0;
    }
/*#endregion*/
/*#region calendar edit event form*/
#event-form.pwa-popup {
    z-index: 251;
    top: 0;
}

#event-form .popup-container > .content .pwa-row, #event-form .popup-container > .content .pwa-col {
    color: #3b3b3b;
    font-size: 1.25rem;
}

#event-form input, #event-form select {
    height: 2.5rem;
    width: 100%;
    padding-left: .5rem;
    border: none;
    font-size: 1rem;
}

#event-form .content > .pwa-row {
    margin-bottom: 1.5rem;
}

    #event-form .content > .pwa-row:first-child {
        margin-top: .5rem;
    }

#event-form .content .field-input {
    position: relative;
    border: 1px solid #979797;
}

    #event-form .content .field-input .field-icon {
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        width: 4.18rem;
        background: #d8d8d8;
        font-size: 1.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

#event-form .content .event-datetime, #event-form .content .event-repeat {
    display: flex;
    justify-content: space-between;
}


#event-form .event-datetime > .pwa-col, #event-form .event-repeat > .pwa-col {
    display: block;
    padding: 0;
}

    #event-form .event-datetime > .pwa-col:first-child, #event-form .event-repeat > .pwa-col:first-child {
        width: 40%
    }

    #event-form .event-datetime > .pwa-col:last-child, #event-form .event-repeat > .pwa-col:last-child {
        width: 52%
    }

#event-form .time {
    display: flex;
    justify-content: flex-start;
}

    #event-form .time > .pwa-col:first-child {
        width: 30%;
    }

    #event-form .time > .pwa-col:last-child {
        width: 20%;
        margin-left: 5%;
        padding-left: 0
    }

#event-week > .pwa-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#event-week .data-weekly {
    width: 30%;
    text-align: center;
    font-size: 1rem;
    padding: .3rem 0;
    border: 1px solid #696969;
    margin-top: 1rem;
    background-color: #fff;
}

    #event-week .data-weekly.selected {
        background-color: #112899;
        color: #fff;
    }

#event-form .event-repeat > .pwa-col:first-child > .pwa-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

    #event-form .event-repeat > .pwa-col:first-child > .pwa-row .pwa-button {
        width: 60%;
        height: 3.25rem;
        font-size: 1.25rem;
        font-weight: normal;
        line-height: 3.25rem;
        margin-top: 1rem;
        border: none;
    }

#event-form.event-popup > .popup-container > .content {
    padding: 0 2.5rem 2.5rem 2.5rem;
}
/*#endregion*/

/*#region calendar delete event form*/
#delete-event-form {
    z-index: 252;
}
/*#endregion*/

#event-open-popup {
    z-index: 251;
}

    #event-open-popup .pwa-datetime > div {
        text-align: right;
    }
/*#region survey form*/
#surveyModal.pwa-modal > div {
    z-index: 301;
}

.darshboard-container .charts {
    width: 100%;
    padding: 0 1rem;
}

.darshboard-container .chart {
    background-color: #fff;
    display: block;
    margin: 1.25rem 0;
}

    .darshboard-container .chart .sub-chart {
        margin-bottom: 10px;
        position: relative;
        width: 33%;
        display: inline-block;
        height: 250px;
    }

        .darshboard-container .chart .sub-chart .chart-title {
            margin-bottom: 10px;
            text-align: center;
            font-weight: 600;
        }

        .darshboard-container .chart .sub-chart .legend {
            margin-bottom: 10px;
        }

        .darshboard-container .chart .sub-chart .canvas {
            width: 350px;
        }

#chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 3px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
/*#endregion*/

/*force landscape*/
@media screen and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}
@media screen and (max-width: 991px) and (orientation: portrait){
.fc-col-header{width:100%!important;}
table.fc-scrollgrid-sync-table{height:420px!important;}
} 
/*force landscape*/

/*10.5: 1138 * 640 2.25*/
/*8.4 960 * 528 2*/
@media screen and (max-width: 991px) {
    html, body {
        font-size: 12px;
    }

    #mcollect .cal-container .cal-keys .pwa-col::before {
        padding-bottom: 80%;
    }

    .popup-container > .content .pwa-col > .fa-heart-rate {
        font-size: 14rem;
    }

    #event-form .content > .pwa-row {
        margin-bottom: 1rem;
    }

    .month-calendar .fc-event > .fc-event-time {
        min-width: 40px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    html, body {
        font-size: 14px;
    }

    .month-calendar .fc-event > .fc-event-time {
        min-width: 48px;
    }
}

@media screen and (max-width: 1199px) {
    #mcollect .cal-container .cal-keys {
        padding-top: 0;
    }

    #mcollect .cal-container .cal-hint {
        line-height: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }

    #mcollect .cal-container .cal-keys .pwa-col > .pwa-key button {
        font-size: 2.5rem;
    }

    #mcollect .cal-container .cal-value {
        height: 4rem;
        line-height: 4rem;
        font-size: 3rem;
    }

    #upload .close {
        width: 3rem;
        height: 3rem;
        border-radius: 1.5rem;
        top: .25rem;
        right: .25rem;
    }

    #day-events-popup .evt-item .time {
        width: 20%;
        text-align: right;
    }

    #day-events-popup .evt-item .title {
        width: 50%;
    }

    #day-events-popup .evt-item .action {
        width: 30%;
    }
    #day-events-popup.moreitems > .popup-container {
        max-height: 550px;
        overflow-y: scroll;
    }
    #detece-small-screen{display:none;}
}

@media (min-width: 1200px) {
    html, body {
        font-size: 16px;
    }

    .month-calendar .fc-event > .fc-event-time {
        min-width: 54px;
    }
}

pwa-update::part(updateToast) {
    z-index: 1040;
    display:none;
}

.sound-container{display:none;}

/* Common Dialog Start */
.ac-dialog {
    z-index: 999;
    overflow: hidden;
    padding: 0 12.06rem 4rem 12.06rem;
}

    .ac-dialog .popup-container {
        margin: auto;
        min-height: 500px;
    }

        .ac-dialog .popup-container > .header {
            margin: 0;
            position: relative;
            top: initial;
            left: initial;
            right: initial;
            text-transform: uppercase;
        }

        .ac-dialog .popup-container > .header {
            flex: auto;
            justify-content: center;
            padding: 0 2.5rem;
        }

            .ac-dialog .popup-container > .header > .pwa-col.close,
            .ac-dialog .popup-container > .header > .pwa-col.close:hover,
            .ac-dialog .popup-container > .header > .pwa-col.close:focus {
                align-items: center;
                text-shadow: none;
                color: #FFF;
                opacity: 1;
            }

            .ac-dialog .popup-container > .header > .pwa-col:first-child {
                position: absolute;
                left: 2.5rem;
            }

            .ac-dialog .popup-container > .header > .pwa-col:last-child {
                position: absolute;
                right: 2.5rem;
            }

            .ac-dialog .popup-container > .header > .pwa-col > i {
                line-height: inherit;
                margin-right: 0.875rem;
                font-size: 2.5rem;
            }

        .ac-dialog .popup-container .action-bts > .pwa-button {
            width: 9rem;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
            background-color: #00aff0;
            margin-left: 1.4375rem;
            height: 2.625rem;
            line-height: 2.625rem;
        }

            .ac-dialog .popup-container .action-bts > .pwa-button.disabled {
                opacity: 0.67;
                cursor: default;
            }

            .ac-dialog .popup-container .action-bts > .pwa-button.home {
                margin-left: 0;
            }

    .ac-dialog > .popup-container > .content {
        padding: 6.4375rem 2.25rem 2.25rem 2.25rem;
        margin: 0 1.375rem;
        font-size: 1.5625rem;
        color: #757575;
        letter-spacing: -1.45px;
    }

        .ac-dialog > .popup-container > .content.center {
            justify-content: center;
        }

    .ac-dialog > .popup-container > .footer {
        padding-bottom: 2.25rem;
        justify-content: space-around;
    }

        .ac-dialog > .popup-container > .footer > .pwa-button {
            font-size: 1.5625rem;
            font-weight: bold;
            line-height: normal;
            color: #ebeeea;
            padding: 0.75rem 4.5rem;
            text-transform: uppercase;
        }
        #ac-dialog > .popup-container > .content {
            padding: 6.4375rem 2.25rem 4.25rem 2.25rem;
        }

        #ac-dialog .popup-container {
            min-height: 300px;
        }

        #ac-dialog > .popup-container > .footer {
            padding-bottom: 3.25rem;
            justify-content: space-around;
        }
/* Common Dialog End */
/*reset app dialog*/
.ac-dialog.reset-app {padding:2em 19.5rem 4rem 19.5rem;}
.ac-dialog.reset-app .popup-container {min-height:unset;}
.ac-dialog.reset-app .popup-container .btn-red {background-color: #F9625C;}
.ac-dialog.reset-app .popup-container .btn-blue{background-color:#54AFEF;}
.ac-dialog.reset-app .popup-container .content{padding:0rem 1rem 0.85rem 1rem;}
.ac-dialog.reset-app .popup-container .content>*{display:block;width:100%;}
.ac-dialog.reset-app .popup-container .content>.menu{display: flex;flex-wrap: wrap;justify-content: flex-start;padding: 0;justify-content: space-between;}
.ac-dialog.reset-app .popup-container .content>.menu .pwa-button{width:137px;font-size: 13px;margin-bottom:10px;}
.ac-dialog.reset-app .popup-container .content input{width:100%;border: 1px solid #000;height:34px;}
.ac-dialog.reset-app .popup-container .content .input-title{color: #142D97;font-size: 16px;font-weight: bold;padding-bottom: 0.5em;letter-spacing: normal;}
.ac-dialog.reset-app .popup-container .header {background-color:#fff;justify-content: left;}
.ac-dialog.reset-app .popup-container .header .pwa-title{color:#142D97;font-size:16px;}
.ac-dialog.reset-app .popup-container .pwa-button {color: #fff;width: 145px;font-size: 14px;text-align: center;height: 40px;padding: 0.9em 0 0.4em 0;letter-spacing: normal;}
.ac-dialog.reset-app .popup-container .footer .pwa-button.verify.cancel,
.ac-dialog.reset-app .popup-container .footer .pwa-button.enter-sn.cancel {margin-right: 2em;}
.ac-dialog.reset-app .popup-container .tip {color:#000;visibility: hidden;min-height:1em;justify-content:center;}
.ac-dialog.reset-app .popup-container .tip.error {color:red;visibility: hidden;min-height:1em;justify-content:center;}
.ac-dialog.reset-app .popup-container .signal-info .pwa-row {overflow-y: auto;height: 18rem;}
.ac-dialog.reset-app .popup-container .signal-info .pwa-row pre {display: none;}
/*reset app dialog*/