.alignright {
    text-align: right;
}

.help-button {
    display: inline-block;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    padding: 0;
    background-color: #65bcda;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    cursor: default;
    margin-left: 4px;
    border-radius: 100%;
    border-color: #FFF;
    border: 2px solid #FFF;
    -webkit-box-shadow: 0 1px 0 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 0 1px rgba(0,0,0,0.2);
    z-index: auto;
}





.icon-calculate {
    position: absolute;
    right: -25px;
    top: 300px;
    color: black;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 18px;
}




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


/*.card {
    text-align: center;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1rem;
    justify-content: center;
    box-sizing: border-box;
}
*/


/*.card {
    justify-content: center;
}
*/


.fullscreen-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
}

/*.centered-card {
    width: 700px;*/ /* Adjust the size as needed */
    /*padding: 20px;
    text-align: center;
}


.bold-title {
    font-weight: bold;
}*/

.dotted-divider {
    border-left: 2px dotted #555; /* darker than #999 */
    height: 50px;
}
.fz-custom {
    font-size: 2.5rem; /* 48px */
}
    .custom-alert {
    width: 50%; /* Adjust width as needed */
    margin: 0 auto; /* Center the container */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Regular shadow */
}

.width-20 {
    width: 20% !important;
}

.width-25 {
    width: 25% !important;
}

.width-30 {
    width: 30% !important;
}

.width-35 {
    width: 35% !important;
}

.width-40 {
    width: 40% !important;
}

.width-45 {
    width: 45% !important;
}

.width-50 {
    width: 50% !important;
}

.width-55 {
    width: 55% !important;
}

.width-60 {
    width: 60% !important;
}

.width-65 {
    width: 65% !important;
}

.width-70 {
    width: 70% !important;
}

.width-75 {
    width: 75% !important;
}

.width-80 {
    width: 80% !important;
}

.width-85 {
    width: 85% !important;
}

.width-90 {
    width: 90% !important;
}

.width-95 {
    width: 95% !important;
}

.width-100 {
    width: 100% !important;
}

.error {
    color: #D15B47;
}






.input-medium {
    width: 150px;
    max-width: 100%;
}

.editable-text {
    background: transparent;
    border-top: transparent !important;
    border-left: transparent !important;
    border-right: transparent !important;
    border-bottom: 1px dotted;
    font-weight: 200;
    /*color: white;*/
    padding-left: 0;
}

.editable-text-none {
}

.EmpDetailUpdated {
    background-color: #faecc3;
}


.item {
    border-right: 1px solid #f3f3f3 !important;
}


.app-main {
    overflow: visible !important;
}


.inline-flex {
    display: inline-flex;
}


.table {
    margin-bottom: 0rem !important;
}


.Overtime -Approve {
    color: #82af6f !important;
}


.pointer {
    cursor: pointer;
}

.item-figure {
    font-size: 46px;
    font-weight: 300;
    text-align: center;
}

.item-title {
    font-size: 14px;
    color: #a2a6af;
    text-align: center;
    margin-top: 10Px;
}

.ellipse {
    display: inline-block;
    width: 80px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.app {
    overflow-x: visible !important;
}

.steps .wf-forward + li:before {
    background-color: #FFB752;
}

.steps .wf-forward a {
    background-color: #FFB752;
    color: #fff;
}

.steps .wf-forward .step-indicator {
    color: #fff;
}

.steps .wf-forward:hover + li:before {
    background-color: #FFB752;
}

.steps .wf-forward:hover a {
    background-color: #FFB752;
    color: #fff;
}

.wf-forward {
    color: #00A28A;
}

.steps .wf-approved + li:before {
    background-color: #00A28A;
}

.steps .wf-approved a {
    background-color: #00A28A;
    color: #fff;
}

.steps .wf-approved .step-indicator {
    color: #fff;
}

.steps .wf-approved:hover + li:before {
    background-color: #00937d;
}

.steps .wf-approved:hover a {
    background-color: #00937d;
    color: #fff;
}

.wf-approved {
    color: #00A28A;
}


.steps .wf-applied + li:before {
    background-color: #346CB0;
}

.steps .wf-applied a {
    background-color: #346CB0;
    color: #fff;
}

.steps .wf-applied .step-indicator {
    color: #fff;
}

.steps .wf-applied:hover + li:before {
    background-color: #3165a4;
}

.steps .wf-applied:hover a {
    background-color: #3165a4;
    color: #fff;
}

.wf-applied {
    color: #346CB0;
}



.steps .wf-managerapproved + li:before {
    background-color: #6FB3E0;
}

.steps .wf-managerapproved a {
    background-color: #6FB3E0;
    color: #fff;
}

.steps .wf-managerapproved .step-indicator {
    color: #fff;
}

.steps .wf-managerapproved:hover + li:before {
    background-color: #62acdd;
}

.steps .wf-managerapproved:hover a {
    background-color: #62acdd;
    color: #fff;
}

.wf-managerapproved {
    color: #6FB3E0;
}






.steps .eob-approved + li:before {
    background-color: #87B87F;
}

.steps .eob-approved a {
    background-color: #87B87F;
    color: #fff;
}

.steps .eob-approved .active {
    background-color: #428BCA;
    color: #fff;
}

.steps .eob-approved .step-indicator {
    color: #fff;
}

.steps .eob-approved:hover + li:before {
    background-color: #7fb883;
}

.steps .eob-approved:hover a {
    background-color: #7fb883;
    color: #fff;
}

.eob-approved {
    color: #87B87F;
}

.steps .eob-pending + li:before {
    background-color: #f5fafa;
}

.steps .eob-pending .active {
    background-color: #428BCA;
    color: #fff;
}

.steps .eob-pending a {
    background-color: #f5fafa;
    color: #000000;
}

.steps .eob-pending .step-indicator {
    color: #000000;
}

.steps .eob-pending:hover + li:before {
    background-color: #edf0f0;
}

.steps .eob-pending:hover a {
    background-color: #edf0f0;
    color: #000000;
}

.steps .eob-rejected + li:before {
    background-color: #D15B47;
}

.steps .eob-rejected .active {
    background-color: #428BCA;
    color: #fff;
}

.steps .eob-rejected a {
    background-color: #D15B47;
    color: #fff;
}

.steps .eob-rejected .step-indicator {
    color: #fff;
}

.steps .eob-rejected:hover + li:before {
    background-color: #d15047;
}

.steps .eob-rejected:hover a {
    background-color: #d15047;
    color: #fff;
}

.eob-rejected {
    color: #D15B47;
}

.steps .eob-submitted + li:before {
    background-color: #FFB752;
}

.steps .eob-submitted .active {
    background-color: #428BCA;
    color: #fff;
}

.steps .eob-submitted a {
    background-color: #FFB752;
    color: #fff;
}

.steps .eob-submitted .step-indicator {
    color: #fff;
}

.steps .eob-submitted:hover + li:before {
    background-color: #ffab52;
}

.steps .eob-submitted:hover a {
    background-color: #ffab52;
    color: #fff;
}

.steps .eob-saved + li:before {
    background-color: #FEE188;
}

.steps .eob-saved .active {
    background-color: #428BCA;
    color: #fff;
}

.steps .eob-saved a {
    background-color: #FEE188;
    color: #fff;
}

.steps .eob-saved .step-indicator {
    color: #fff;
}

.steps .eob-saved:hover + li:before {
    background-color: #fed188;
}

.steps .eob-saved:hover a {
    background-color: #fed188;
    color: #fff;
}

.eob-saved {
    color: #FEE188;
}

.steps .eob-inprogress + li:before {
    background-color: #000000;
}

.steps .eob-inprogress .active {
    background-color: #428BCA;
    color: #fff;
}

.steps .eob-inprogress a {
    background-color: #000000;
    color: #fff;
}

.steps .eob-inprogress .step-indicator {
    color: #fff;
}

.steps .eob-inprogress:hover + li:before {
    background-color: #000000;
}

.steps .eob-inprogress:hover a {
    background-color: #000000;
    color: #fff;
}

.eob-inprogress {
    color: #000000;
}

.steps .eob-compelete + li:before {
    background-color: #999999;
}

.steps .eob-compelete .active {
    background-color: #428BCA;
    color: #fff;
}

.steps .eob-compelete a {
    background-color: #999999;
    color: #fff;
}

.steps .eob-compelete .step-indicator {
    color: #fff;
}

.steps .eob-compelete:hover + li:before {
    background-color: #999999;
}

.steps .eob-compelete:hover a {
    background-color: #999999;
    color: #fff;
}

.eob-compelete {
    color: #999999;
}


.steps .eob-partiallySubmitted + li:before {
    background-color: #9585bf;
}

.steps .eob-partiallySubmitted .active {
    background-color: #7d6fa1;
    color: #fff;
}

.steps .eob-partiallySubmitted a {
    background-color: #9585bf;
    color: #fff;
}

.steps .eob-partiallySubmitted .step-indicator {
    color: #fff;
}

.steps .eob-partiallySubmitted:hover + li:before {
    background-color: #9585bf;
}

.steps .eob-partiallySubmitted:hover a {
    background-color: #9585bf;
    color: #fff;
}

.eob-partiallySubmitted {
    color: #9585bf;
}




.steps .eof-approved + li:before {
    background-color: #87B87F;
}

.steps .eof-approved a {
    background-color: #87B87F;
    color: #fff;
}

.steps .eof-approved .step-indicator {
    color: #fff;
}

.steps .eof-approved:hover + li:before {
    background-color: #7fb883;
}

.steps .eof-approved:hover a {
    background-color: #7fb883;
    color: #fff;
}

.eof-approved {
    color: #87B87F;
}

.steps .eof-pending + li:before {
    background-color: #f5fafa;
}

.steps .eof-pending a {
    background-color: #f5fafa;
    color: #000000;
}

.steps .eof-pending .step-indicator {
    color: #000000;
}

.steps .eof-pending:hover + li:before {
    background-color: #edf0f0;
}

.steps .eof-pending:hover a {
    background-color: #edf0f0;
    color: #000000;
}

.eof-pending {
    color: #f5fafa;
}

.steps .eof-rejected + li:before {
    background-color: #D15B47;
}

.steps .eof-rejected a {
    background-color: #D15B47;
    color: #fff;
}

.steps .eof-rejected .step-indicator {
    color: #fff;
}

.steps .eof-rejected:hover + li:before {
    background-color: #d15047;
}

.steps .eof-rejected:hover a {
    background-color: #d15047;
    color: #fff;
}

.eof-rejected {
    color: #D15B47;
}

.steps .eof-submitted + li:before {
    background-color: #FFB752;
}

.steps .eof-submitted a {
    background-color: #FFB752;
    color: #fff;
}

.steps .eof-submitted .step-indicator {
    color: #fff;
}

.steps .eof-submitted:hover + li:before {
    background-color: #ffab52;
}

.steps .eof-submitted:hover a {
    background-color: #ffab52;
    color: #fff;
}

.eof-submitted {
    color: #FFB752;
}

.steps .eof-saved + li:before {
    background-color: #FEE188;
}

.steps .eof-saved a {
    background-color: #FEE188;
    color: #fff;
}

.steps .eof-saved .step-indicator {
    color: #fff;
}

.steps .eof-saved:hover + li:before {
    background-color: #fed188;
}

.steps .eof-saved:hover a {
    background-color: #fed188;
    color: #fff;
}

.eof-saved {
    color: #FEE188;
}

.steps .eof-inprogress + li:before {
    background-color: #000000;
}

.steps .eof-inprogress a {
    background-color: #000000;
    color: #fff;
}

.steps .eof-inprogress .step-indicator {
    color: #fff;
}

.steps .eof-inprogress:hover + li:before {
    background-color: #000000;
}

.steps .eof-inprogress:hover a {
    background-color: #000000;
    color: #fff;
}

.eof-inprogress {
    color: #000000;
}

.steps .eof-compelete + li:before {
    background-color: #999999;
}

.steps .eof-compelete a {
    background-color: #999999;
    color: #fff;
}

.steps .eof-compelete .step-indicator {
    color: #fff;
}

.steps .eof-compelete:hover + li:before {
    background-color: #999999;
}

.steps .eof-compelete:hover a {
    background-color: #999999;
    color: #fff;
}

.eof-compelete {
    color: #999999;
}


.modal-content {
    /* 80% of window height */
    height: 80%;
}

.modal-body {
    /* 100% = dialog height, 120px = header + footer */
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}


.blink {
    animation: blinker 3.0s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.shift1 {
    background-color: #5BAD5D !important;
    color: #ffffff !important;
}

.shift2 {
    background-color: #669E68 !important;
    color: #ffffff !important;
}

.shift3 {
    background-color: #73A075 !important;
    color: #ffffff !important;
}

.shift4 {
    background-color: #94BD95 !important;
    color: #ffffff !important;
}

.shift5 {
    background-color: #A6BDA6 !important;
    color: #ffffff !important;
}

.shift6 {
    background-color: #A3B1A3 !important;
    color: #ffffff !important;
}

.shift7 {
    background-color: #A0A5A0 !important;
    color: #ffffff !important;
}


.drag-handler:hover {
    cursor: move;
}

.drag-handler {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 10px;
    width: 5px;
    border-left: 2px dotted #dddddd;
    border-right: 2px dotted #dddddd;
}

.remove-style {
    list-style-type: none;
}

.subscription-plan .card.active {
    border-width: 0.25rem !important;
    border-color: forestgreen !important;
}

/*.display-message {
    font-size: 1.125rem;
    border: 4px solid
}*/
.display-message {
    padding: 3rem;
    text-align: center;
    font-size: 1.125rem;
    border-top: 4px solid;
}

    .display-message.danger p, .display-message.info p, .display-message.success p, .display-message.warning p {
        color: #888c9b
    }

    .display-message h1 {
        margin-bottom: 1rem;
        color: inherit
    }

.kpi-item .kpi-title {
    font-weight: bolder;
}

.kpi-item .kpi-title, .kpi-item .kpi-description {
    margin-bottom: 0 !important;
    margin-left: 1rem;
}

.padding-top-3 {
    padding-top: 3px;
}


hr.dotted {
    border-top: 1px dotted rgba(85,85,85,.2) !important;
}

.reviewer-purple {
    color: #a069c3 !important;
}

.reviewer-green {
    color: #69aa46 !important;
}

.reviewer-red {
    color: #dd5a43 !important;
}

.reviewer-blue {
    color: #478fca !important;
}

.reviewer-orange {
    color: #ff892a !important;
}

.reviewer-brown {
    color: #a52a2a !important;
}

.reviewer-skin {
    color: #ff9966 !important;
}

.greenbottom {
    border-bottom: 2px solid #69aa46 !important;
}

.pinkbottom {
    border-bottom: 2px solid #c6699f !important;
}

.redbottom {
    border-bottom: 2px solid #dd5a43 !important;
}

.yellowbottom {
    border-bottom: 2px solid #ffb752 !important;
}

.bluebottom {
    border-bottom: 2px solid #478fca !important;
}

.purplebottom {
    border-bottom: 2px solid #a069c3 !important;
}

.kra-block {
    /*padding-bottom: 1rem;*/
}

    .kra-block .kra-item {
        padding-bottom: 0.5rem;
    }

        .kra-block .kra-item .kra-title {
            color: #6FB3E0;
            font-size: 0.9rem;
            margin-bottom: 0 !important;
            font-weight: 600;
        }

        .kra-block .kra-item .kra-description {
            margin-bottom: 0 !important;
        }

    .kra-block .kpi-item {
        margin-bottom: 0.3rem;
    }


.profile-info-name {
    width: 170px !important;
}

.div-left-border-active {
    border-left: solid 0.35rem green;
}

.div-left-border-Inactive {
    border-left: solid 0.35rem #d15b47;
}

.div-left-border-Rejected {
    border-left: solid 0.35rem pink;
}

.div-left-border-Unapproved {
    border-left: solid 0.35rem grey;
}

.subcat {
    padding-left: 1.5rem;
}

.fixed-bottom-left {
    left: 15rem;
    position: fixed;
}
.row-highlight-gradient-warning {
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(248, 148, 6, 0.7))
}


.rounded-custom {
    border-radius: 30px; /* Adjust the value as per your preference */
}

.pos {
    position: absolute !important;
    display: block;
    right: 0;
    bottom: 0;
    border-radius: 4rem !important;
    margin-bottom: -2.5rem !important;
    margin-right: -2.5rem !important
}

    .pos.pos-1 {
        width: 5.25rem;
        height: 5.25rem;
        background-color: #eae8f4
    }

    .pos.pos-2 {
        width: 4.75rem;
        height: 4.75rem;
        background-color: #dddbed
    }

    .pos.pos-3 {
        width: 4.25rem;
        height: 4.25rem;
        background-color: #d0cce6
    }

.card-stats.card-ace {
    overflow: hidden
}

    .card-stats.card-ace .card-body {
        justify-content: space-evenly
    }

        .card-stats.card-ace .card-body .stats-data {
            margin-left: 0;
            margin-right: 1rem
        }

        .card-stats.card-ace .card-body .icon {
            font-size: 3rem
        }

.card-stats {
    transform: translateY(-.5rem);
    opacity: .75;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.09)
}

    .card-stats.card-stats-brown.card-ace .pos-1 {
        background-color: #f4e4d8
    }

    .card-stats.card-stats-brown.card-ace .pos-2 {
        background-color: #eed7c5
    }

    .card-stats.card-stats-brown.card-ace .pos-3 {
        background-color: #e8cab2
    }

    .card-stats.card-stats-pink.card-ace .pos-1 {
        background-color: #f7d6e6
    }

    .card-stats.card-stats-pink.card-ace .pos-2 {
        background-color: #f3c2da
    }

    .card-stats.card-stats-pink.card-ace .pos-3 {
        background-color: #efadce
    }

    .card-stats.card-stats-green.card-ace .pos-1 {
        background-color: #e7f1e5
    }

    .card-stats.card-stats-green.card-ace .pos-2 {
        background-color: #dbead9
    }

    .card-stats.card-stats-green.card-ace .pos-3 {
        background-color: #cfe3cc
    }

    .card-stats.card-stats-red.card-ace .pos-1 {
        background-color: #ee8080
    }

    .card-stats.card-stats-red.card-ace .pos-2 {
        background-color: #ec6060
    }

    .card-stats.card-stats-red.card-ace .pos-3 {
        background-color: #e73131
    }
.modal-xxl {
    max-width: 90%;
}

.signature-pad {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 10px;
    width: 100%;
    height: 100%;
    max-width: 700px;
    max-height: 460px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
    padding: 16px;
}

.ej-Entity {
    background-color: mediumturquoise
}

.ej-Department {
    background-color: green
}

.ej-Designation {
    background-color: deepskyblue
}

.ej-Band {
    background-color: pink
}

.ej-Payroll {
    background-color: peachpuff
}

.ej-Location {
    background-color: orangered
}

.ej-Joined {
    background-color: mediumpurple
}

.fc-today-button, .fc-next-button, .fc-prev-button, .fc-button-next, .fc-button-prev, .fc-button-today, .fc-header-left, .fc-header-center, .fc-header-right {
    display: none;
}

.page-wrapper {
    flex: 1 0 auto;
}

.login-container {
    height: 100% !important;
    display: flex;
}

    .login-container .company-pane {
        -webkit-box-flex: 0;
        height: 100%;
        padding: 0;
    }

        .login-container .company-pane img {
            background-repeat: no-repeat;
            background-position: center !important;
            background-size: cover !important;
            display: block;
            width: 100%;
            max-width: 100%;
            object-fit: contain;
        }

    .login-container .login-pane {
        background-color: #fff !important;
        height: 100%;
        padding: 0;
        border-left-width: 1px !important;
        border-left-style: solid !important;
        border-color: #e7f0f5 !important;
    }

.badge-ex-managersmanagerapproved {
    background-color: #33cbb6
}

.badge-ex-Hodapproved {
    background-color: #4cb8c1
}

.badge-ex-BUHeadapproved {
    background-color: #348d94
}

.badge-ex-preverified {
    background-color: #d8bd6f
}

.badge-ex-verified {
    background-color: #c7af6a
}

.badge-ex-adminapproved {
    background-color: #9dd195
}