*,
body {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box !important
}

body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    background: #fff;
    font-size: 16px;
    word-wrap: break-word;
    color: #474747;
    padding: 0;
    box-sizing: border-box
}

ul {
    list-style: none;
    padding: 0
}

a {
    color: #00b4d8;
    text-decoration: none;
    font-weight: 400;
    outline: none !important;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s
}

a:hover,
a:focus {
    color: #00a3c3;
    text-decoration: none
}

p {
    color: #000
}

.siteForm small {
    font-size: 12px
}

.siteForm .form-group {
    margin-bottom: 15px
}

.siteForm label {
    font-size: 14px;
    font-weight: 500;
    color: #4e4c4c;
    margin-bottom: 5px
}

.siteForm input[type=text],
.siteForm input[type=email],
.siteForm input[type=url],
.siteForm input[type=number],
.siteForm input[type=tel],
.siteForm input[type=password],
.siteForm input[type=file],
.siteForm input[type=date],
.siteForm input[type=search],
.siteForm select,
.siteForm textarea {
    width: 100%;
    background-color: #fdfdfd;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 5px #0000000f;
    height: 45px;
    padding: 5px 15px;
    font-size: 16px;
    color: #636578;
    font-weight: 400;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    border-radius: 5px !important
}

@media(max-width: 767px) {

    .siteForm input[type=text],
    .siteForm input[type=email],
    .siteForm input[type=url],
    .siteForm input[type=number],
    .siteForm input[type=tel],
    .siteForm input[type=password],
    .siteForm input[type=file],
    .siteForm input[type=date],
    .siteForm input[type=search],
    .siteForm select,
    .siteForm textarea {
        font-size: 14px
    }
}

.siteForm input[type=text]:focus,
.siteForm input[type=email]:focus,
.siteForm input[type=url]:focus,
.siteForm input[type=number]:focus,
.siteForm input[type=tel]:focus,
.siteForm input[type=password]:focus,
.siteForm input[type=file]:focus,
.siteForm input[type=date]:focus,
.siteForm input[type=search]:focus,
.siteForm select:focus,
.siteForm textarea:focus {
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 5px #00000032;
    background-color: #fdfdfd;
    outline: none
}

.siteForm input[type=text]:disabled,
.siteForm input[type=email]:disabled,
.siteForm input[type=url]:disabled,
.siteForm input[type=number]:disabled,
.siteForm input[type=tel]:disabled,
.siteForm input[type=password]:disabled,
.siteForm input[type=file]:disabled,
.siteForm input[type=date]:disabled,
.siteForm input[type=search]:disabled,
.siteForm select:disabled,
.siteForm textarea:disabled {
    background: #f0f0f0;
    cursor: not-allowed;
    opacity: .75
}

.siteForm select {
    height: 45px !important;
    color: #474747;
    padding: 5px 25px 5px 15px
}

.siteForm select:focus::-ms-value {
    color: #474747
}

.siteForm select option {
    padding: 5px
}

.siteForm textarea {
    height: 100px !important;
    padding: 10px 15px !important
}

.siteForm input[type=file] {
    padding: 9px 15px
}

.siteForm input[type=submit],
.siteForm input[type=button] {
    display: block;
    height: 45px;
    padding: 6px 10px !important;
    text-align: center;
    background: #00b4d8;
    font-size: 18px;
    color: #fff;
    border: none;
    font-weight: 500;
    width: 100%;
    outline: none;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    border-radius: 5px !important
}

.siteForm input[type=button].clear {
    display: block;
    height: 45px;
    padding: 9px 10px !important;
    text-align: center;
    background: #f94f3c;
    font-size: 18px;
    color: #fff;
    border: none;
    font-weight: 500;
    width: 67%;
    outline: none;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    border-radius: 5px !important;
    transition: none;
}

.siteForm input[type=button].clear:hover,
.siteForm input[type=button].clear:focus{
    background: #fc2020 !important;
    color: #fff !important;
}

.siteForm a.cancel {
    display: block;
    height: 45px;
    padding: 9px 10px !important;
    text-align: center;
    background: #ff6e5e;
    font-size: 18px;
    color: #fff;
    border: none;
    font-weight: 500;
    width: 67%;
    outline: none;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    border-radius: 5px !important;
    transition: none;
}

.siteForm a.cancel:hover,
.siteForm a.cancel:focus {
    background: #fc2020 !important;
    color: #fff !important;
}


@media(max-width: 767px) {

    .siteForm input[type=submit],
    .siteForm input[type=button] {
        font-size: 16px
    }
}

.siteForm input[type=submit]:hover,
.siteForm input[type=button]:hover {
    border: none;
    outline: none;
    background: #00a3c3;
    color: #fff
}

.siteForm input[type=submit]:focus,
.siteForm input[type=button]:focus {
    border: none;
    outline: none;
    background: #00a3c3;
    color: #fff
}

.siteForm input[type=submit].sm,
.siteForm input[type=button].sm {
    width: auto;
    padding: 8px 30px !important
}

.siteForm input[type=button].cancel {
    background-color: #ff6e5e;
    width: auto;
    padding: 8px 30px !important
}

.siteForm .inputIconField {
    position: relative
}

.siteForm .inputIconField .inputIcon {
    position: absolute;
    left: 20px;
    top: 12px;
    width: 18px;
    height: auto
}

.siteForm .inputIconField input {
    padding-left: 55px
}

.siteForm .noLabelLg {
    padding-top: 28px
}

@media(max-width: 992px) {
    .siteForm .noLabelLg {
        padding-top: 0
    }
}

.siteForm .noLabelMd {
    padding-top: 28px
}

@media(max-width: 767px) {
    .siteForm .noLabelMd {
        padding-top: 0
    }
}

.siteForm .noLabelSm {
    padding-top: 28px
}

@media(max-width: 576px) {
    .siteForm .noLabelSm {
        padding-top: 0
    }
}

.siteForm .form-check label {
    color: #4e4c4c !important
}

.siteForm .form-check-input:checked {
    background-color: #00b4d8 !important;
    border-color: #00b4d8 !important
}

.siteForm .form-text {
    font-size: 14px;
    display: block;
    padding-top: 4px;
    color: #4e4c4c
}

.siteForm ::placeholder {
    color: #636578;
    opacity: 1
}

.siteForm :-ms-input-placeholder {
    color: #636578
}

.siteForm ::-ms-input-placeholder {
    color: #636578
}

.siteBtn {
    background: #00b4d8;
    border: 1px solid #00b4d8;
    padding: 12px 40px;
    display: inline-block;
    font-size: 18px;
    color: #fff;
    text-align: center;
    font-weight: 400;
    outline: none;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    border-radius: 5px !important
}

@media(max-width: 992px) {
    .siteBtn {
        font-size: 16px;
        padding: 10px 30px
    }
}

@media(max-width: 767px) {
    .siteBtn {
        font-size: 14px;
        padding: 10px 15px
    }
}

.siteBtn:hover {
    outline: none;
    background: #00a3c3;
    color: #fff !important
}

.siteBtn:focus {
    outline: none;
    background: #00a3c3;
    color: #fff !important
}

.siteBtn.md {
    font-size: 16px;
    padding: 8px 20px
}

.siteBtnOt {
    background: #fff;
    border: 1px solid #00b4d8;
    color: #00b4d8;
    padding: 12px 40px;
    display: inline-block;
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    outline: none;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    border-radius: 5px !important
}

@media(max-width: 992px) {
    .siteBtnOt {
        font-size: 16px;
        padding: 10px 30px
    }
}

@media(max-width: 767px) {
    .siteBtnOt {
        font-size: 14px;
        padding: 10px 15px
    }
}

.siteBtnOt:hover {
    outline: none;
    background: #00a3c3;
    color: #fff !important
}

.siteBtnOt:hover i {
    color: #fff !important
}

.siteBtnOt:focus {
    outline: none;
    background: #00a3c3;
    color: #fff !important
}

.siteBtnOt.md {
    font-size: 16px;
    padding: 8px 20px
}

.siteTable {
    background: #fff;
    margin-bottom: 30px
}

@media(max-width: 767px) {
    .siteTable {
        border: 1px solid #eee
    }
}

.siteTable table {
    margin: 0
}

.siteTable thead tr th {
    padding: 10px 15px;
    background: #00b4d8;
    color: #fff
}

.siteTable tbody th {
    background: #fbfbfb
}

.siteTable th,
.siteTable td {
    padding: 10px 15px
}

.siteTable th {
    font-size: 14px;
    font-weight: 600;
    color: #0495b1
}

.siteTable td {
    color: #474747;
    font-weight: 500;
    font-size: 12px
}

.modal-backdrop {
    background: #000 !important
}

.modal-backdrop.show {
    opacity: .7 !important
}

.siteModal .modal-dialog .modal-content {
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    -ms-border-radius: 15px !important;
    border-radius: 15px !important
}

.siteModal .modal-header {
    border: none;
    padding: 0
}

.siteModal .modal-body {
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    -ms-border-radius: 15px !important;
    border-radius: 15px !important;
    background: #fbfbfc;
    padding: 20px 15px
}

.siteModal .modal-body h3 {
    text-align: center
}

.siteModal .btn-close {
    width: 40px;
    border-radius: 50%;
    height: 40px;
    line-height: 38px;
    background: #00b4d8;
    position: absolute;
    top: -15px;
    right: -15px;
    z-index: 9999;
    color: #576167;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    opacity: 1 !important;
    padding: 0;
    border: 3px solid #fff
}

.siteModal .btn-close:hover,
.siteModal .btn-close:focus {
    background: #00a0c0;
    color: #fff;
    border: 3px solid #fff;
    outline: none
}

.siteModal.videoModal .modal-body {
    padding: 0 !important
}

.customScroll {
    border: 1px solid #eee;
    overflow: auto;
    scrollbar-color: #c3c3c3 #e4e4e4;
    scrollbar-width: thin
}

.customScroll::-webkit-scrollbar {
    width: 4px
}

.customScroll::-webkit-scrollbar-track {
    background: #e4e4e4;
    border-radius: 3px;
    border: none
}

.customScroll::-webkit-scrollbar-thumb {
    background: #c3c3c3;
    border-radius: 3px
}

.customScroll::-webkit-scrollbar-thumb:hover {
    background: #afafaf
}

.customSwitch {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 36px
}

.customSwitch input {
    opacity: 0;
    width: 0;
    height: 0
}

.customSwitch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 1px solid #eaeaea;
    -webkit-transition: .4s;
    transition: .4s
}

.customSwitch .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #8a8c8f;
    -webkit-transition: .4s;
    transition: .4s
}

.customSwitch input:checked+.slider {
    border: 1px solid #00b4d8;
    background-color: #00b4d8
}

.customSwitch input:checked+.slider:before {
    background: #fff
}

.customSwitch input:focus+.slider {
    box-shadow: 0 0 1px #eee
}

.customSwitch input:checked+.slider:before {
    -webkit-transform: translateX(28px);
    -ms-transform: translateX(28px);
    transform: translateX(28px)
}

.customSwitch .slider.round {
    border-radius: 34px
}

.customSwitch .slider.round:before {
    border-radius: 50%
}

.forWebOnly {
    display: block
}

@media(max-width: 992px) {
    .forWebOnly {
        display: none
    }
}

.forMobOnly {
    display: none
}

@media(max-width: 992px) {
    .forMobOnly {
        display: block !important
    }
}

.loginWrapper {
    background: #fff;
    height: 100vh
}

.loginLeftSec {
    background: #4e4c4c;
    min-height: 100vh;
    padding: 0 30px
}

@media(max-width: 992px) {
    .loginLeftSec {
        min-height: 10px
    }
}

.loginLeftSec .loginLeftSecInner {
    padding: 20px 20px
}

@media(max-width: 992px) {
    .loginLeftSec .loginLeftSecInner {
        padding: 50px 0
    }
}

@media(max-width: 767px) {
    .loginLeftSec .loginLeftSecInner {
        padding: 30px 0
    }
}

.branding {
    margin-bottom: 120px;
    text-align: right
}

@media(max-width: 992px) {
    .branding {
        text-align: center
    }
}

@media(max-width: 992px) {
    .branding {
        margin-bottom: 0
    }
}

.branding strong {
    font-family: "Helvetica";
    display: block;
    font-size: 60px;
    color: #fff
}

@media(max-width: 767px) {
    .branding strong {
        font-size: 40px
    }
}

.branding span {
    display: block;
    font-size: 20px;
    color: #fff
}

@media(max-width: 767px) {
    .branding span {
        font-size: 16px
    }
}

@media(max-width: 992px) {
    .loginFooter {
        background: #4e4c4c;
        padding: 50px 30px
    }
}

.loginFooter .copyRights {
    font-size: 14px;
    color: #fff
}

@media(max-width: 1200px) {
    .loginFooter .copyRights {
        text-align: right;
        margin-bottom: 10px
    }
}

@media(max-width: 992px) {
    .loginFooter .copyRights {
        text-align: center
    }
}

.loginFooter .loginNav {
    text-align: right
}

@media(max-width: 1200px) {
    .loginFooter .loginNav {
        margin-bottom: 20px
    }
}

@media(max-width: 992px) {
    .loginFooter .loginNav {
        text-align: center
    }
}

.loginFooter .loginNav ul {
    padding: 0;
    margin: 0
}

.loginFooter .loginNav ul li {
    display: inline-block;
    margin-left: 15px
}

@media(max-width: 767px) {
    .loginFooter .loginNav ul li {
        margin: 0 10px 10px 10px
    }
}

.loginFooter .loginNav ul li a {
    font-size: 14px;
    padding: 0;
    color: #fff;
    text-decoration: underline
}

.loginFooter .loginNav ul li a:hover {
    opacity: .7
}

.loginRightSec {
    background: #fff;
    height: 100vh;
    overflow: auto
}

@media(max-width: 992px) {
    .loginRightSec {
        height: auto
    }
}

.loginRightSec .loginRightSecInner {
    padding: 50px 20px;
    max-width: 600px;
    margin: 0 auto
}

@media(max-width: 1200px) {
    .loginRightSec .loginRightSecInner {
        padding: 50px 0
    }
}

@media(max-width: 992px) {
    .loginRightSec .loginRightSecInner {
        padding: 50px 30px
    }
}

.loginRightSec .loginRightSecInner .loginSecTop {
    margin-bottom: 30px
}

@media(max-width: 767px) {
    .loginRightSec .loginRightSecInner .loginSecTop {
        text-align: center
    }
}

.loginRightSec .loginRightSecInner .loginSecTop h1 {
    font-family: "Helvetica";
    font-size: 34px;
    font-weight: 600;
    color: #636578;
    margin: 0;
    padding: 0
}

@media(max-width: 767px) {
    .loginRightSec .loginRightSecInner .loginSecTop h1 {
        font-size: 24px
    }
}

.loginRightSec .loginRightSecInner .loginSecTop p {
    padding-top: 10px;
    font-size: 14px;
    color: #4e4c4c
}

.rememberMe {
    margin-bottom: 10px
}

.forgotPass {
    text-align: right;
    font-size: 14px
}

.forgotPass a {
    font-weight: 500;
    color: #00b4d8
}

.forgotPass a:hover {
    text-decoration: underline
}

.tandc {
    text-align: right;
    font-size: 14px
}

.tandc a {
    font-weight: 500;
    text-decoration: underline;
    color: #00b4d8
}

.tandc a:hover {
    text-decoration: underline
}

.signupLink {
    text-align: right;
    font-size: 14px
}

.signupLink a {
    font-weight: 500;
    display: inline-block;
    padding-left: 5px;
    color: #00b4d8
}

.signupLink a:hover {
    text-decoration: underline
}

body.overflohidden {
    overflow: hidden
}

.dashboardMainWrap {
    background: #f1f1f1;
    min-height: 100vh;
    padding: 100px 0 0 300px
}

.dashboardMainWrap.hasNotification {
    padding-top: 130px
}

@media(max-width: 992px) {
    .dashboardMainWrap {
        padding: 100px 0 0 250px
    }
}

@media(max-width: 767px) {
    .dashboardMainWrap {
        padding: 100px 0 0 70px
    }
}

.dashboardMainWrap.close {
    padding: 100px 0 0 70px
}

.dashboardMainWrap.close .dbHeader {
    padding: 10px 15px 10px 85px
}

.mainContentContainer {
    padding: 20px 15px;
    min-height: 550px
}

.mainContentContainer .mainContentbox {
    box-shadow: 0 0 5px #0000000f;
    border-radius: 10px;
    padding: 15px 25px;
    background: #fff
}

@media(max-width: 767px) {
    .mainContentContainer .mainContentbox {
        padding: 15px
    }
}

.papetitle {
    margin-bottom: 30px
}

@media(max-width: 767px) {
    .papetitle {
        margin-bottom: 20px
    }
}

.papetitle h1 {
    display: inline-block;
    position: relative;
    font-size: 30px;
    font-weight: 500;
    color: #636578;
    margin: 0;
    padding: 0;
    padding-bottom: 15px
}

@media(max-width: 767px) {
    .papetitle h1 {
        font-size: 24px
    }
}

@media(max-width: 576px) {
    .papetitle h1 {
        font-size: 18px
    }
}

.papetitle h1:after {
    display: block;
    content: "";
    width: 60%;
    height: 2px;
    background: #00b4d8;
    position: absolute;
    left: 0;
    bottom: 0
}

.dbSecTitle {
    margin-bottom: 30px
}

.dbSecTitle h2,
.dbSecTitle h3,
.dbSecTitle h4 {
    display: inline-block;
    position: relative;
    font-size: 24px;
    font-weight: 500;
    color: #636578;
    margin: 0;
    padding: 0;
    padding-bottom: 15px
}

@media(max-width: 767px) {

    .dbSecTitle h2,
    .dbSecTitle h3,
    .dbSecTitle h4 {
        font-size: 20px
    }
}

.dbSecTitle h2:after,
.dbSecTitle h3:after,
.dbSecTitle h4:after {
    display: block;
    content: "";
    width: 60%;
    height: 2px;
    background: #00b4d8;
    position: absolute;
    left: 0;
    bottom: 0
}

.contentBox {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 30px;
    min-height: 200px;
    padding: 15px;
    box-shadow: 0 0 5px #0000000f
}

.contentBox .contentBoxTitle {
    margin-bottom: 20px
}

.contentBox .contentBoxTitle h2 {
    font-size: 24px;
    color: #636578;
    font-weight: 600
}

@media(max-width: 767px) {
    .contentBox .contentBoxTitle h2 {
        font-size: 20px
    }
}

.statBox {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 30px;
    min-height: 200px;
    padding: 15px;
    border: 1px solid #eee;
    box-shadow: 0 0 5px #0000000f
}

@media(max-width: 576px) {
    .statBox {
        margin-bottom: 10px;
        min-height: 100px
    }
}

.statBox strong {
    display: block;
    font-weight: 600;
    font-size: 20px;
    color: #636578;
    margin-bottom: 20px
}

.statBox .statBoxContent table {
    width: 100%
}

.statBox .statBoxContent table th,
.statBox .statBoxContent table tr {
    font-size: 14px;
    font-weight: 500;
    color: #636578;
    padding: 5px 0
}

.statBox .statBoxContent table td {
    text-align: center
}

.statBox .statBoxContent table td strong {
    font-weight: 600;
    font-size: 14px;
    margin: 0;
    color: #1aa8e9
}

.statBox .statBoxContent .statMonth {
    color: #908da7;
    font-size: 11px;
    font-weight: 600
}

.statBox .statBoxContent .wfhScheduleInfo {
    margin-top: -20px;
    margin-bottom: 30px
}

.statBox .statBoxContent .wfhScheduleInfo ul {
    text-align: right;
    font-size: 0px
}

.statBox .statBoxContent .wfhScheduleInfo ul li {
    margin: 0 3px 3px 0
}

.statBox .statBoxContent .wfhScheduleInfo ul li strong {
    display: inline-block;
    width: 100px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    padding-right: 10px;
    margin: 0
}

.statBox .statBoxContent .wfhScheduleInfo ul li span {
    width: 30px;
    height: 12px;
    background: #4e4c4c;
    display: inline-block
}

.statBox .statBoxContent .wfhScheduleInfo ul li.wfo span {
    background: #0ab5d7
}

.statBox .statBoxContent .wfhScheduleInfo ul li.wfh span {
    background: #059d5d
}

.statBox .statBoxContent .wfhSchedule ul li {
    display: inline-block;
    margin: 0 3px 3px 0
}

.statBox .statBoxContent .wfhSchedule ul li span {
    width: 30px;
    height: 30px;
    background: #4e4c4c;
    border-radius: 50%;
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    padding-top: 5px;
    text-align: center
}

@media(max-width: 576px) {
    .statBox .statBoxContent .wfhSchedule ul li span {
        width: 28px;
        height: 28px
    }
}

.statBox .statBoxContent .wfhSchedule ul li.wfo span {
    background: #0ab5d7
}

.statBox .statBoxContent .wfhSchedule ul li.wfh span {
    background: #059d5d
}

.totalhours {
    text-align: right;
    font-size: 14px;
    color: #636578;
    font-weight: 500
}

@media(max-width: 767px) {
    .totalhours {
        margin-bottom: 10px;
        font-size: 12px
    }
}

.totalhours strong {
    color: #1aa8e9;
    padding-left: 4px;
    font-weight: 600
}

.graphDetails {
    text-align: center
}

.graphDetails ul {
    margin: 0;
    padding: 0
}

.graphDetails ul li {
    display: inline-block;
    padding: 0 15px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #969494;
    font-weight: 500
}

@media(max-width: 576px) {
    .graphDetails ul li {
        padding: 0 7px;
        font-size: 11px
    }
}

.graphDetails ul li span {
    background: #dadada;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 10px
}

@media(max-width: 576px) {
    .graphDetails ul li span {
        margin-right: 5px
    }
}

.graphDetails ul li strong {
    font-weight: 600;
    color: #797575;
    padding-left: 5px
}

.graphDetails ul li.total span {
    background: #333333
}

.graphDetails ul li.completed-wfo span {
    background: #00b4d8
}

.graphDetails ul li.completed-wfh span {
    background: #059d5d
}

.graphDetails ul li.completed span {
    background: #ffd700
}

.graphDetails ul li.remaining span {
    background: #ff7f50
}

.quicLogBox {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #eee;
    box-shadow: 0 0 5px #0000000f;
    text-align: center
}

@media(max-width: 576px) {
    .quicLogBox {
        padding: 10px
    }
}

.quicLogBox strong {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 0;
    padding: 5px 3px;
    font-weight: 600;
    background: #00b4d8;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

@media(max-width: 576px) {
    .quicLogBox strong {
        font-size: 14px
    }
}

.quicLogBox span {
    display: block;
    box-shadow: 0 0 2px #0000001c inset;
    background: #fafafa;
    padding: 10px;
    font-size: 24px;
    font-weight: 500;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px
}

@media(max-width: 576px) {
    .quicLogBox span {
        padding: 4px;
        font-size: 20px
    }
}

.tableFilter {
    position: relative;
    padding-left: 100px;
    margin-bottom: 15px
}

@media(max-width: 767px) {
    .tableFilter {
        padding-left: 75px
    }
}

.tableFilter label {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    padding-top: 12px;
    display: inline-block
}

.tableFilter label i {
    margin-right: 5px
}

@media(max-width: 767px) {
    .tableFilter label {
        padding-top: 14px;
        font-size: 14px
    }
}

.logsSearch {
    position: relative;
    margin-bottom: 15px;
    z-index: 6
}

.logsSearch input[type=text] {
    width: 100%;
    background-color: #fdfdfd;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 5px #0000000f;
    height: 45px;
    padding: 5px 45px 5px 15px;
    font-size: 16px;
    color: #636578;
    font-weight: 400;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    border-radius: 5px !important
}

.logsSearch input[type=text]:focus {
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 5px #00000032;
    outline: none
}

.logsSearch input[type=button] {
    background: url("../images/search-icon.svg") no-repeat center center;
    background-size: 25px 25px;
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    border: none;
    outline: none;
    opacity: .5
}

.logsSearch input[type=button]:hover {
    opacity: .7
}

.quickLogTable th,
.quickLogTable td {
    vertical-align: middle
}

.quickLogTable td {
    background: #eeeeee1c
}

.quickLogTable .workFrom i {
    margin-right: 5px
}

.quickLogTable .logsCheckInOutBox {
    position: relative
}

.quickLogTable .logsCheckInOutBox figure.userImage {
    left: 15px;
    top: 15px;
    display: inline-block;
    margin-bottom: 0;
    width: 70px;
    height: 70px;
    border: 1px solid #ccc;
    margin-right: 10px;
    overflow: hidden;
    float: left
}

.quickLogTable .logsCheckInOutBox figure.userImage img {
    width: 100%;
    height: 100%
}

.quickLogTable .logsCheckInOutBox span {
    padding-top: 23px;
    display: inline-block
}

.quickLogTable .logsCheckInOutBox span .updateAttendance {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 0 10px;
    font-size: 16px;
    color: #06a0be
}

.quickLogTable .logsCheckInOutBox:after {
    display: block;
    clear: both;
    content: ""
}

.quickLogTable tr.holiday td {
    background: #f7f7f7
}

.quickLogTable tr.late td {
    background: #fdf0df6b
}

.quickLogTable tr.leave td {
    background: #e8fae56b
}

.quickLogTable tr.absent td {
    background: #f8dddd6b
}

.lateBg {
    background: #fdf0df6b !important
}

.leaveBg {
    background: #e8fae56b !important
}

.absentBg {
    background: #f8dddd6b !important
}

.reportPage {
    background: #eeeeee1a;
    padding: 15px;
    border: 1px solid #ccc
}

.defaultNotify {
    background: #fdfdfd;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #0000000f;
    border: 1px solid #eee;
    cursor: not-allowed
}

.defaultNotify li {
    color: #474747;
    font-size: 16px
}

.leavelistingTable tr,
.leavelistingTable td {
    vertical-align: middle
}

.leavelistingTable tr.approved td {
    background: #e8fae56b
}

.leavelistingTable tr.rejected td {
    background: #f8dddd6b
}

.leavelistingTable tr.pending td {
    background: #fdf0df6b
}

.leavelistingTable .leaveDates span {
    display: inline-block;
    padding-right: 8px;
    border-left: 1px solid #ccc;
    padding-left: 10px
}

.leavelistingTable .leaveDates span:first-child {
    border: none;
    padding-left: 0
}

.leavelistingTable .leaveDates span small {
    font-size: 12px;
    color: #0495b1;
    padding-right: 5px;
    display: block
}

.leaveEntitlementTable {
    margin-bottom: 30px
}

.leaveEntitlementTable tr.totalLeaves td,
.leaveEntitlementTable tr.totalLeaves th {
    background: #eefaed
}

.leaveEntitlementTable tr.remainingLeaves td,
.leaveEntitlementTable tr.remainingLeaves th {
    background: #edeffa
}

.leaveCardWrap ul li {
    width: 170px;
    float: left
}

.leaveCard {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #eee;
    box-shadow: 0 0 5px #0000000f;
    text-align: center
}

@media(max-width: 576px) {
    .leaveCard {
        padding: 5px
    }
}

.leaveCard strong {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 0;
    padding: 6px 5px;
    font-weight: 600;
    background: #00b4d8;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

@media(max-width: 576px) {
    .leaveCard strong {
        font-size: 12px
    }
}

.leaveCard span {
    display: block;
    box-shadow: 0 0 2px #0000001c inset;
    background: #fafafa;
    padding: 10px;
    font-size: 24px;
    font-weight: 500;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px
}

@media(max-width: 576px) {
    .leaveCard span {
        padding: 4px;
        font-size: 20px
    }
}

.leaveBox {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #eee;
    box-shadow: 0 0 5px #0000000f
}

.leaveBox strong {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 0;
    padding: 8px 15px;
    font-weight: 600;
    background: #00b4d8;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.leaveBox .leaveBoxInner {
    display: block;
    box-shadow: 0 0 2px #0000001c inset;
    background: #fafafa;
    padding: 10px 5px;
    margin: 0;
    font-weight: 500;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px
}

.leaveBox .leaveBoxInner table {
    width: 100%;
    margin: 0
}

.leaveBox .leaveBoxInner table th {
    padding: 0 10px;
    font-size: 14px;
    color: #008fab;
    font-weight: 600
}

.leaveBox .leaveBoxInner table td {
    padding: 0 10px;
    font-size: 14px;
    color: #474747;
    font-weight: 500;
    text-align: right
}

.leaveBox .leaveBoxInner.availedAll {
    background: #f8dddd6b
}

.leaveBox.total {
    padding: 0;
    border: none
}

.leaveBox.total .leaveBoxInner {
    background: #fff;
    padding: 10px 15px
}

.leaveBox.total .totalInnerTable {
    box-shadow: 0 0 2px #0000001c inset;
    display: block;
    padding: 10px;
    background: #eee;
    border-radius: 5px
}

@media(max-width: 992px) {
    .leaveBox.total .totalInnerTable {
        margin-bottom: 10px
    }
}

@media(max-width: 767px) {
    .leaveBox.total .totalInnerTable {
        padding: 10px 0
    }
}

.leaveBox.total .totalInnerTable.entitled {
    background: #fafafa
}

.leaveBox.total .totalInnerTable.availed {
    background: #fdf0df6b
}

.leaveBox.total .totalInnerTable.remaining {
    background: #e8fae56b
}

.leaveBox.total .totalInnerTable th {
    font-weight: 500;
    font-size: 18px
}

@media(max-width: 767px) {
    .leaveBox.total .totalInnerTable th {
        font-size: 16px
    }
}

.leaveBox.total .totalInnerTable td {
    font-size: 18px
}

@media(max-width: 767px) {
    .leaveBox.total .totalInnerTable td {
        font-size: 16px
    }
}

.tableActions button {
    display: inline-block;
    border: 1px solid #ccc;
    width: 30px;
    height: 30px;
    line-height: 27px;
    text-align: center;
    background: #888;
    color: #fff;
    font-size: 14px;
    border-radius: 3px
}

.tableActions button.edit {
    background: #eaca23
}

.tableActions button.delete {
    background: #fb5d5d
}

.tableActions button.reminder {
    background: #5d89fb
}

.tableActions button.comments {
    background: #78e3e2
}

.tableActions button.applyAgain {
    background: #d978e3
}

.employeeScheduleTable tbody th,
.employeeScheduleTable tbody td {
    color: #fff;
    font-size: 12px
}

.employeeScheduleTable tbody th i,
.employeeScheduleTable tbody td i {
    margin-right: 5px
}

.employeeScheduleTable tbody th {
    background: #717171
}

.employeeScheduleTable tbody td {
    background: #8d8d8d
}

.tooltip-inner {
    background-color: #4e4c4c;
    box-shadow: 0px 0px 4px #000;
    padding: 10px
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: #4e4c4c !important
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: #4e4c4c !important
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #4e4c4c !important
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #4e4c4c !important
}

.profilePage .employeeInfoWrap {
    position: relative;
    padding-left: 105px;
    min-height: 90px
}

@media(max-width: 767px) {
    .profilePage .employeeInfoWrap {
        padding-left: 85px
    }
}

.profilePage .employeeInfoWrap figure.userImage {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    margin-bottom: 0;
    width: 90px;
    height: 90px;
    border: 1px solid #ccc;
    margin-right: 10px;
    overflow: hidden
}

@media(max-width: 767px) {
    .profilePage .employeeInfoWrap figure.userImage {
        width: 70px;
        height: 70px
    }
}

.profilePage .employeeInfoWrap figure.userImage img {
    width: 100%;
    height: 100%
}

.profilePage .employeeInfoWrap ul {
    margin: 0;
    padding: 0
}

.profilePage .employeeInfoWrap ul li {
    font-size: 16px;
    color: #474747;
    margin-bottom: 5px;
    font-weight: 500
}

@media(max-width: 767px) {
    .profilePage .employeeInfoWrap ul li {
        font-size: 14px
    }
}

.profilePage .employeeInfoWrap ul li span {
    display: inline-block;
    font-weight: 600;
    padding-right: 5px;
    min-width: 70px;
    color: #0495b1
}

.employeeProfilePage .userImageArea {
    position: relative;
    padding-left: 115px;
    min-height: 100px;
    margin-bottom: 15px
}

@media(max-width: 767px) {
    .employeeProfilePage .userImageArea {
        padding-left: 0
    }
}

.employeeProfilePage .userImageArea figure.userImage {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    margin-bottom: 0;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    margin-right: 10px;
    overflow: hidden
}

@media(max-width: 767px) {
    .employeeProfilePage .userImageArea figure.userImage {
        position: inherit
    }
}

.employeeProfilePage .userImageArea figure.userImage img {
    width: 100%;
    height: 100%
}

.employeeProfilePage .userImageArea .form-group {
    padding-top: 20px
}

.exportCSV {
    text-align: right;
    margin-bottom: 15px
}

.exportCSV a,
.exportCSV button {
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    font-weight: 500
}

.exportCSV a i,
.exportCSV button i {
    font-size: 18px;
    color: #00b4d8;
    margin-left: 10px
}

.exportCSV a:hover,
.exportCSV button:hover {
    color: #00b4d8
}

.dropdown {
    position: relative;
    font-size: 14px;
    color: #333
}

.dropdown .dropdown-list {
    padding: 12px;
    background: #fff;
    position: absolute;
    top: 45px;
    left: 2px;
    right: 2px;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .15);
    transform-origin: 50% 0;
    transform: scale(1, 0);
    transition: transform .15s ease-in-out .15s;
    max-height: 66vh;
    overflow-y: scroll;
    z-index: 66
}

.dropdown .dropdown-check-all {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px
}

.dropdown .dropdown-option {
    display: block;
    opacity: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: opacity .15s ease-in-out;
    position: relative;
    padding: 0 0 0 20px
}

.dropdown .dropdown-option input {
    position: absolute;
    left: 0;
    top: 4px
}

.dropdown .dropdown-label {
    background-color: #fdfdfd;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 5px #0000000f;
    border-radius: 5px;
    display: block;
    height: 45px;
    padding: 13px 15px;
    line-height: 1;
    cursor: pointer;
    font-size: 16px;
    color: #636578;
    font-weight: 400
}

.dropdown .dropdown-label:before {
    content: "▼";
    float: right
}

.dropdown.on .dropdown-list {
    transform: scale(1, 1);
    transition-delay: 0s
}

.dropdown.on .dropdown-list .dropdown-option {
    opacity: 1;
    transition-delay: .2s
}

.dropdown.on .dropdown-label:before {
    content: "▲"
}

.dropdown [type=checkbox] {
    position: relative;
    top: -1px;
    margin-right: 4px
}

.dbHeader {
    background: #fff;
    border-bottom: 1px solid #eee;
    min-height: 100px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 15px 10px 315px;
    box-shadow: 5px 3px 5px #0000000f;
    z-index: 77
}

@media(max-width: 992px) {
    .dbHeader {
        padding: 10px 15px 10px 265px
    }
}

@media(max-width: 767px) {
    .dbHeader {
        padding: 10px 15px 10px 70px
    }
}

.dbHeader .welconeNotes {
    float: left;
    margin-right: 30px;
    min-width: 300px
}

@media(max-width: 992px) {
    .dbHeader .welconeNotes {
        display: none
    }
}

.dbHeader .welconeNotes strong {
    font-size: 24px;
    color: #4e4c4c;
    font-weight: 600;
    display: block;
    margin-bottom: 0
}

.dbHeader .welconeNotes span {
    display: block;
    color: #807d9b;
    font-size: 14px
}

.dbHeader .notificationBar {
    position: relative;
    background: #eee;
    padding: 5px 35px 5px 15px;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #474747;
    min-height: 30px;
    border-bottom: 1px solid #e2e2e2
}

.dbHeader .notificationBar i {
    margin-right: 10px
}

.dbHeader .notificationBar.error {
    background: #f7e7e7
}

.dbHeader .notificationBar.success {
    background: #e9f7e7
}

.dbHeader .notificationBar.warning {
    background: #f7f6e7
}

.dbHeader .notificationBar .removeAlert {
    background: none;
    position: absolute;
    right: 10px;
    top: 4px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #474747
}

.dbHeader .attendance {
    float: left;
    margin: 10px 0 0 0
}

@media(max-width: 576px) {
    .dbHeader .attendance {
        margin: 15px 0 0 0
    }
}

.dbHeader .attendance.noButtons {
    padding-top: 12px
}

.dbHeader .attendance ul {
    margin: 0;
    padding: 0
}

.dbHeader .attendance ul li {
    list-style: none;
    display: inline-block;
    vertical-align: top
}

.dbHeader .attendance ul li a {
    background: #f7f7f7;
    border: 1px solid #00b4d8;
    padding: 8px 20px;
    display: inline-block;
    font-size: 14px;
    color: #0a96b1;
    text-align: center;
    font-weight: 600;
    border-radius: 5px;
    text-transform: uppercase
}

@media(max-width: 992px) {
    .dbHeader .attendance ul li a {
        padding: 7px 10px;
        width: auto;
        font-size: 14px
    }
}

@media(max-width: 767px) {
    .dbHeader .attendance ul li a {
        font-size: 12px
    }
}

.dbHeader .attendance ul li a:hover {
    background: #eee
}

.dbHeader .attendance ul li a i {
    font-size: 16px;
    color: #000
}

.dbHeader .attendance ul li a.checkInBtn {
    margin-right: 4px
}

.dbHeader .attendance ul li span {
    padding-top: 5px;
    display: block;
    font-size: 14px;
    color: #000
}

@media(max-width: 576px) {
    .dbHeader .attendance ul li span {
        font-size: 11px
    }
}

.dbHeader .attendance ul li span strong {
    font-weight: 600;
    color: #00b4d8
}

.dbHeader .dbNotificationIcons {
    float: right;
    margin: 32px 30px 0 0
}

@media(max-width: 576px) {
    .dbHeader .dbNotificationIcons {
        margin: 16px 30px 0 0
    }
}

.dbHeader .dbNotificationIcons li {
    display: inline-block
}

.dbHeader .dbNotificationIcons li a {
    padding: 0 10px;
    display: block;
    color: #86868c;
    font-size: 20px;
    position: relative
}

.dbHeader .dbNotificationIcons li a span {
    display: block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    position: absolute;
    top: -6px;
    right: 3px;
    background: #00b4d8;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -ms-border-radius: 50% !important;
    border-radius: 50% !important;
    font-size: 8px;
    text-align: center;
    color: #fff
}

.dbHeader .dbNotificationIcons li a:hover {
    color: #00b4d8
}

.dbHeader .dbNotificationIcons li a:hover span {
    background: #00b4d8
}

.dbHeader .dbSearch {
    width: 250px;
    overflow: hidden;
    float: right;
    margin: 27px 20px 0 0;
    position: relative
}

@media(max-width: 992px) {
    .dbHeader .dbSearch {
        width: 180px
    }
}

@media(max-width: 767px) {
    .dbHeader .dbSearch {
        display: none
    }
}

.dbHeader .dbSearch input[type=search] {
    border: 1px solid #ececec;
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    -ms-border-radius: 15px !important;
    border-radius: 15px !important;
    background: #f8f8f8;
    width: 100%;
    height: 34px;
    font-size: 14px;
    color: #a9a9a9;
    padding: 3px 20px 3px 15px;
    float: left;
    outline: none
}

.dbHeader .dbSearch input[type=search]:focus {
    border: 1px solid #00b4d8
}

.dbHeader .dbSearch input[type=button] {
    position: absolute;
    right: 10px;
    top: 6px;
    width: 20px;
    height: 20px;
    background: url(../images/search-icon.png) no-repeat;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0
}

.dbHeader .UserDropdown {
    margin-top: 13px;
    float: right
}

@media(max-width: 576px) {
    .dbHeader .UserDropdown {
        margin-top: 17px
    }
}

.dbHeader .UserDropdown button {
    background: none;
    outline: none;
    border: none;
    vertical-align: top
}

.dbHeader .UserDropdown button strong {
    display: inline-block;
    float: left;
    padding: 15px 15px 0 0;
    font-weight: 500;
    color: #4e4c4c
}

@media(max-width: 576px) {
    .dbHeader .UserDropdown button strong {
        display: none
    }
}

.dbHeader .UserDropdown button:after {
    display: none
}

.dbHeader .UserDropdown .userImage {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #00b4d8;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ccc
}

@media(max-width: 576px) {
    .dbHeader .UserDropdown .userImage {
        width: 45px;
        height: 45px
    }
}

.dbHeader .UserDropdown .userImage img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.dbHeader .UserDropdown .dropdown-menu {
    background: #4e4c4c;
    padding: 0;
    margin: 0;
    width: 200px
}

.dbHeader .UserDropdown .dropdown-menu .aboutUser {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #00b4d8;
    border-color: #00b4d8;
    padding: 12px 15px;
    font-size: 14px;
    color: #fff
}

.dbHeader .UserDropdown .dropdown-menu .aboutUser strong {
    display: none;
    font-weight: 500;
    margin-bottom: 4px
}

@media(max-width: 576px) {
    .dbHeader .UserDropdown .dropdown-menu .aboutUser strong {
        display: block
    }
}

.dbHeader .UserDropdown .dropdown-menu .aboutUser span {
    display: block
}

.dbHeader .UserDropdown .dropdown-menu li {
    border-bottom: 1px solid #7c7c7c
}

.dbHeader .UserDropdown .dropdown-menu li a {
    padding: 12px 15px;
    font-size: 14px;
    color: #fff
}

.dbHeader .UserDropdown .dropdown-menu li a:hover {
    background: #00b4d8
}

.dbHeader .UserDropdown .dropdown-menu li:last-child {
    border-bottom: none
}

.hamburgerDbSideNav {
    position: fixed;
    left: 295px;
    bottom: 5px;
    width: 40px;
    height: 50px;
    background: #4e4c4c;
    font-size: 30px;
    margin: 18px 15px 0 0;
    padding-top: 3px;
    text-align: center;
    color: #fff;
    z-index: 999;
    cursor: pointer;
    -webkit-border-top-right-radius: 30px;
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-topright: 30px;
    -moz-border-radius-bottomright: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px
}

@media(max-width: 992px) {
    .hamburgerDbSideNav {
        left: 235px
    }
}

.hamburgerDbSideNav i {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s
}

.hamburgerDbSideNav.close {
    left: 68px;
    padding-right: 5px
}

.hamburgerDbSideNav.close i {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    display: inline-block;
    transform: rotate(180deg)
}

#navDbSidebar.close {
    width: 70px
}

#navDbSidebar.close .dbSideNav ul li i {
    margin-right: 0
}

.dbSideBarWrapper {
    width: 300px;
    background: #4e4c4c;
    position: fixed;
    z-index: 88;
    left: 0;
    top: 0;
    height: 100vh;
    overflow: auto;
    border-right: 1px solid #c2c2c2;
    -webkit-transition: .15s ease-in-out;
    -moz-transition: .15s ease-in-out;
    -o-transition: .15s ease-in-out;
    transition: .15s ease-in-out
}

@media(max-width: 992px) {
    .dbSideBarWrapper {
        width: 250px
    }
}

.dbSideBarWrapper::-webkit-scrollbar {
    width: 5px
}

.dbSideBarWrapper::-webkit-scrollbar-track {
    background: #e4e4e4
}

.dbSideBarWrapper::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 10px
}

.dbSideBarWrapper::-webkit-scrollbar-thumb:hover {
    background: #c4c4c4
}

.dbSideBarWrapper .dbSiteLogoWrap {
    background: #f1f1f1;
    padding: 27px 15px;
    min-height: 100px
}

.dbSideBarWrapper .dbSiteLogoWrap .dbSiteLogoWeb {
    max-width: 200px;
    margin: 0 auto
}

.dbSideBarWrapper .dbSiteLogoWrap .dbSiteLogoWeb img {
    width: 100%;
    height: auto
}

.dbSideBarWrapper .dbSiteLogoWrap .dbSiteLogoMob {
    display: none;
    font-size: 40px;
    color: #fff;
    text-align: center;
    width: 45px
}

.dbSideBarWrapper .dbSiteLogoWrap .dbSiteLogoMob i {
    color: #00b4d8
}

.dbSideBarWrapper .dbSiteLogoWrap .dbSiteLogoMob img {
    display: inline-block;
    width: 45px;
    height: auto
}

.dbSideBarWrapper .dbSideNav {
    min-height: 350px;
    margin-bottom: 30px
}

.dbSideBarWrapper .dbSideNav ul {
    margin: 0
}

.dbSideBarWrapper .dbSideNav ul li {
    border-bottom: 1px solid #646464
}

.dbSideBarWrapper .dbSideNav ul li a {
    display: block;
    padding: 14px 15px;
    font-size: 16px;
    color: #fff
}

@media(max-width: 992px) {
    .dbSideBarWrapper .dbSideNav ul li a {
        padding: 10px 15px
    }
}

@media(max-width: 767px) {
    .dbSideBarWrapper .dbSideNav ul li a {
        font-size: 14px
    }
}

.dbSideBarWrapper .dbSideNav ul li a i {
    color: #ffffffa3;
    font-size: 18px;
    margin-right: 10px
}

@media(max-width: 767px) {
    .dbSideBarWrapper .dbSideNav ul li a i {
        font-size: 16px
    }
}

.dbSideBarWrapper .dbSideNav ul li a:hover {
    background: #00b4d8
}

.dbSideBarWrapper .dbSideNav ul li a.active {
    background: #00b4d8
}

.dbSideBarWrapper .dbSideNav ul li.hasSubNav>a {
    position: relative
}

.dbSideBarWrapper .dbSideNav ul li.hasSubNav>a:after {
    display: block;
    content: "";
    position: absolute;
    right: 20px;
    top: 20px;
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transition: transform 0.3s ease;
}

.dbSideBarWrapper .dbSideNav ul li.hasSubNav.active > a:after {
    transform: rotate(135deg); /* Rotate when active */
}

@media(max-width: 767px) {
    .dbSideBarWrapper .dbSideNav ul li.hasSubNav>a:after {
        width: 6px;
        height: 6px
    }
}

.dbSideBarWrapper .dbSideNav ul li ul.subNav {
    display: none; /* Hide submenu by default */
}

.dbSideBarWrapper .dbSideNav ul li.hasSubNav.active ul.subNav {
    display: block; /* Show submenu when parent is active */
}

.dbSideBarWrapper .dbSideNav ul li ul.subNav li a {
    background: #2c2c2c;
    display: block;
    color: #fff
}

.dbSideBarWrapper .dbSideNav ul li ul.subNav li a:hover,
.dbSideBarWrapper .dbSideNav ul li ul.subNav li a.active {
    background: #2c2c2c;
    color: #00b4d8
}

.dbSideBarWrapper .dbSideNav ul li ul.subNav li a:hover i,
.dbSideBarWrapper .dbSideNav ul li ul.subNav li a.active i {
    color: #00b4d8
}

.dbSideBarWrapper .dbSideNav ul li ul.subNav li:last-child {
    border-bottom: none
}

.dbSideBarWrapper .sideNavCta {
    padding: 0 15px 30px 15px;
    margin-bottom: 20px
}

.dbSideBarWrapper .sideNavCta .siteBtn {
    border-radius: 0 !important
}

.dbSideBarWrapper .quicLogBtn {
    width: 100%;
    margin-bottom: 20px
}

.dbSideBarWrapper .downloadReport label {
    font-size: 18px;
    color: #fff;
    display: block;
    margin-bottom: 5px
}

.dbSideBarWrapper .downloadReport select {
    width: 100%;
    background: none;
    padding: 0;
    font-size: 14px;
    color: #fff;
    border: none;
    outline: none;
    margin-bottom: 10px
}

.dbSideBarWrapper .downloadReport .downloadRepBtn {
    width: 100%
}

.dbSideBarWrapper.close .dbSiteLogoWrap {
    padding: 20px 10px
}

.dbSideBarWrapper.close .dbSideNav li a {
    text-align: center
}

.dbSideBarWrapper.close .dbSideNav li a span {
    display: none
}

.dbSideBarWrapper.close .dbSideNav li.hasSubNav>a:after {
    display: none !important
}

.dbSideBarWrapper.close .sideNavCta {
    display: none
}

.dbSideBarWrapper.close .dbSiteLogoWeb {
    display: none
}

.dbSideBarWrapper.close .dbSiteLogoMob {
    display: inline-block
}

.dbFooter {
    background: #fff;
    padding: 15px
}

.dbFooter .dbCopyRights {
    font-size: 14px;
    color: #4e4c4c;
    padding-left: 30px
}

@media(max-width: 767px) {
    .dbFooter .dbCopyRights {
        text-align: center;
        padding-left: 0
    }
}

.dbFooter .dbFooterNav {
    text-align: right;
    margin: 0;
    padding: 0
}

@media(max-width: 767px) {
    .dbFooter .dbFooterNav {
        text-align: center;
        margin: 0 0 10px 0
    }
}

.dbFooter .dbFooterNav li {
    display: inline-block;
    margin-left: 20px
}

.dbFooter .dbFooterNav li a {
    font-size: 14px;
    color: #4e4c4c;
    text-decoration: underline
}

@media(max-width: 767px) {
    .dbFooter .dbFooterNav li a {
        font-size: 12px
    }
}

@media(max-width: 767px) {
    .dbFooter .dbFooterNav li {
        margin: 0;
        padding: 0 10px
    }
}

.cameraModal .modal-dialog {
    max-width: 320px !important;
    margin: 0 auto
}

.cameraModal .modal-body {
    padding: 10px !important
}

.canvasWrapper {
    width: 300px;
    position: relative;
    border: 2px solid #ccc;
    overflow: hidden
}

.canvasWrapper video {
    background: #000;
    width: 300px;
    height: auto;
    min-height: 250px;
    display: block
}

.canvasWrapper canvas {
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0
}

.CaptureButtonWrapper {
    text-align: center;
    padding: 10px
}

.CaptureButtonWrapper button {
    display: inline-block;
    border: none;
    outline: none;
    background: #00b4d8;
    border-radius: 23px;
    padding: 10px 40px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    color: #fff
}

.CaptureButtonWrapper button i {
    font-size: 18px;
    margin-right: 10px
}

.CaptureButtonWrapper button:hover,
.CaptureButtonWrapper button:focus {
    background: #00a0c0
}

.updateAttendanceModal .modal-dialog {
    max-width: 520px !important
}

.updateAttendanceModal .modal-header {
    background: #00b4d8;
    padding: 30px;
    color: #fff
}

.updateAttendanceModal .modal-header h5 {
    color: #fff
}

.updateAttendanceModal .modal-body {
    padding: 30px !important
}