.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;
}

.dropdown-menu.ui-slider.show {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    white-space: nowrap;
}

.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;
}


/* Force badge text color for mobile */
@media (max-width: 767px) {
    .badge {
        color: #fff !important;
    }
}

.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;
    }
.login-banner-wrapper {
    background-color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.company-wrapper {
    max-width: 350px;
    display: inline-block;
    vertical-align: middle;
}

.company-dynamic {
    display: block; /* IMPORTANT */
    max-width: 100%; /* IMPORTANT */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.25rem;
    font-weight: 600;
    padding-left: 0.3rem;
}

@media (min-width: 1400px) {
    .company-wrapper {
        max-width: 450px;
    }
}


/* Very large screens: hide input initially */
@media (max-width: 1700px) {
    .company-logo{
        max-width:100px;
    }

    #searchWrapper .input-group,
    #searchWrapper .input-group .input-group-prepend,
    #searchWrapper .input-group .form-control,
    #searchWrapper .input-group-text {
        background: transparent; /* make icon background transparent */
    }

    #searchWrapper {
        position: relative;
        display: flex;
        align-items: center;
    }
    /* Search input hidden initially */
    #employeeSearch {
        display: block;
        position: absolute;
        right: 27px; /* space for icon */
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        opacity: 0;
        transition: width 0.3s ease, opacity 0.3s ease;
        z-index: 1000;
    }
    /* Expanded input */
    #searchWrapper.active #employeeSearch {
        width: 250px;
        opacity: 1;
        padding: 0 0.5rem;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    /* Keep search icon visible on right */
    #searchIcon {
        z-index: 1100; /* above input */
        cursor: pointer;
    }
}
/* Image rules — prevents stretch on zoom */
.login-banner-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}


.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
}


.mycard.selected {
    background-color: #eaf3ff;
}

.mycard {
    cursor: pointer;
    transition: all 0.2s ease;
}

.Leave-card.selected {
    background-color: #eaf3ff;
}

.Leave-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.Expense-card.selected {
    background-color: #eaf3ff;
}

.Expense-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.Attendance-card.selected {
    background-color: #eaf3ff;
}

.Attendance-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.Timesheet-card.selected {
    background-color: #eaf3ff;
}

.Timesheet-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.bg-dark-blue {
    background-color: #4169ef;
}


.Leave {
    background-color: #ffb752;
}

.Timesheet {
    background-color: #4169ef
}

.Expense {
    background-color: #6fb3e0;
}

.Attendance {
    background-color: deeppink
}

.mycard-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}


.mycard.expanded .mycard-details {
    max-height: 1000px;
}


.icon-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.post-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
    font-family: "Segoe UI", Arial, sans-serif;
    position: relative;
    overflow: hidden;
}
.reaction-container {
    position: relative;
    display: inline-block;
}

.reaction-popup {
    display: none;
    position: absolute;
    bottom: 32px;
    left: 0;
    background: #fff;
    border-radius: 30px;
    padding: 6px 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    z-index: 999;
    white-space: nowrap;
    /* ⭐ ADD THESE 2 LINES */
    display: none;
    align-items: center;
    gap: 10px;
}


/*.reaction-container:hover .reaction-popup {
    display: flex;
    gap: 10px;
}*/

.reaction-option {
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

    .reaction-option:hover {
        transform: scale(1.3);
    }
.reaction-option.selected {
    transform: scale(1.3);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}


.like-btn {
    cursor: pointer;
}

/* Balloon element */
.balloon {
    height: 80px; /* smaller to fit card */
    width: 60px;
    border-radius: 75% 75% 70% 70%;
    position: absolute;
    bottom: 20px;
}

    /* Balloon string */
    .balloon:before {
        content: "";
        height: 50px;
        width: 1px;
        background-color: #555;
        display: block;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        margin: auto;
    }

    /* Balloon tip */
    .balloon:after {
        content: "▲";
        text-align: center;
        display: block;
        position: absolute;
        color: inherit;
        top: 75px;
        left: 0;
        right: 0;
        margin: auto;
    }

/* Floating animation */
@keyframes float {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }

    25% {
        transform: translateY(-25%) translateX(5px);
    }

    50% {
        transform: translateY(-50%) translateX(-5px);
    }

    75% {
        transform: translateY(-75%) translateX(3px);
    }

    100% {
        transform: translateY(-130%) translateX(0);
        opacity: 0;
    }
}
/* Profile + header */
.post-header h6 {
    font-size: 15px;
    margin: 0;
    font-weight: 600;
    color: #fff
}

.post-header small {
    font-size: 12px;
    /*   color: #6c757d;*/
    color: #fff
}
/* Post content */
.post-text {
    font-size: 15px;
    color: #222;
    /*    margin: 8px 0 12px 0;*/
    line-height: 1.5;
}

    .post-text ul,
    .post-text ol {
        padding-left: 1.25rem; /* consistent spacing */
    }

    .post-text li {
        margin-bottom: 6px; /* spacing between list items */
        line-height: 1.5; /* match text line-height */
    }
/* Actions */
.post-actions {
    margin-top: 8px;
    gap: 16px;
}

    .post-actions span {
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #606770; /* neutral gray */
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

        .post-actions span:hover {
            background: #f3f2ef; /* light gray hover */
            color: var(--primary); /* Bootstrap primary color */
        }

    .post-actions .liked {
        color: var(--primary); /* Bootstrap primary color */
    }

        .post-actions .liked i {
            color: var(--primary); /* Bootstrap primary color */
        }

    .post-actions .unliked {
        color: #606770;
    }

.bg-dark-slate {
    background-color: #8F8F8F !important;
    color: #fff !important;
}



/* Comments */
.comment-box {
    border-top: 1px solid #eaeaea;
    padding-top: 10px;
    margin-top: 10px;
}


.comment-body {
    background: #f3f4f6;
    padding: 8px 12px;
    border-radius: 18px;
    font-size: 13px;
}


.comment {
    display: flex;
    align-items: flex-start;
}

.comment-bubble {
    background: #f3f2ef; /* light gray like LinkedIn */
    padding: 8px 12px;
    border-radius: 16px;
    display: inline-block;
    max-width: 80%;
}

.comment-text {
    margin: 0;
    font-size: 12px;
    color: #000;
    line-height: 1.4;
}

/* Author + Time below bubble */
.comment-meta {
    font-size: 12px;
    color: #606770;
    margin-top: 4px;
    margin-left: 2px;
}



.comment-time {
    color: #606770;
}

/* Input */
.comment-input {
    font-size: 14px;
    border-radius: 50px 0 0 50px !important;
    padding: 8px 15px;
}

.comment-btn {
    font-size: 13px;
}
/* Popover body scrollable when content is tall */
.popover .popover-body {
    max-height: 220px;
    overflow-y: auto; /* likes > jitne bhi, yaha scrollbar aayega */
}

    .popover .like-item:last-child {
        margin-bottom: 0;
    }


.clickable-stat {
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
}

.stat-active {
    background: #e3f2fd;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    border: 1px solid #2196f3;
}
.icon-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    color: white;
    font-size: 16px;
    position: relative;
}

    .icon-btn i {
        pointer-events: none;
    }

.icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 10px;
}
.icon-btn,
.icon-btn:hover,
.icon-btn:focus,
.icon-btn:active {
    color: white !important;
    text-decoration: none !important;
}

/* Custom horizontal collapse */
.collapse-horizontal {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.4s ease-out;
    white-space: nowrap; /* prevents wrapping */
}

    .collapse-horizontal.show {
        max-width: 1000px; /* enough space to fit full content */
    }

    /* Prevent children from shrinking during animation */
    .collapse-horizontal .d-flex {
        display: inline-flex;
        flex-wrap: nowrap;
    }

.infobox.selectable {
    cursor: pointer;
    transition: 0.2s;
}

    .infobox.selectable:hover {
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }

    .infobox.selectable.selected {
        border: 2px solid #428bca !important;
    }


.options label {
    display: inline-block;
    cursor: pointer;
}

.dt-container > .row:first-child {
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-left: 0;
    margin-right: 0;
    background-color: #eff3f8;
    margin-bottom: 0 !important;
}

.dt-container > .row:nth-child(3) {
    border-bottom: 1px solid #e0e0e0;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-left: 0;
    margin-right: 0;
    background-color: #eff3f8;
}


div.dt-container > div.row {
    margin-bottom: 0 !important;
}


div.dt-container div.dt-search input {
    margin-right: 0.5em;
}
/* only affects workflow cards, not global infobox */
.workflow-card.infobox {
    width: 100%;
    min-height: 90px; /* reduced height */
    padding: 1rem !important;
    display: flex;
    align-items: center;
    border-radius: 0.6rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s ease-in-out;
}

    .workflow-card.infobox:hover {
        transform: translateY(-4px);
    }

.workflow-card .infobox-icon {
    font-size: 1.4rem; /* smaller icon */
    margin-right: 0.8rem;
}

.workflow-card .infobox-data {
    flex: 1;
}

.workflow-card .infobox-content {
    font-size: 1rem;
    font-weight: 600;
    max-width:100%;
}
/* Blue border for selected workflow card */
.workflow-card.selected {
    border: 2px solid #007bff !important; /* Bootstrap primary blue */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3); /* optional glow effect */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.btn-leave {
    color: #363642;
    background-color: #edc04d;
    border-color: #edc04d;
    color: white;
}
.btn-leave:hover {
        color: #ffffff;
        background-color: #e8b110;
        border-color: #e8b110;
}
    .btn-leave:focus, .btn-leave.focus {
        color: #ffffff;
        background-color: #e8b110;
        border-color: #e8b110;
        box-shadow: 0 0 0 1px rgba(225, 109, 111, 0.5);
    }
.btn-attendance {
    color: #363642;
    background-color: #da6468;
    border-color: #da6468;
    color: white;
}

    .btn-attendance:hover {
        color: #ffffff;
        background-color: #d53f40;
        border-color: #d53f40;
    }

    .btn-attendance:focus, .btn-attendance.focus {
        color: #ffffff;
        background-color: #d53f40;
        border-color: #d53f40;
        box-shadow: 0 0 0 1px rgba(225, 109, 111, 0.5);
    }

.btn-expense {
    color: #363642;
    background-color: #8ac3e7;
    border-color: #8ac3e7;
    color: white;
}

    .btn-expense:hover {
        color: #ffffff;
        background-color: #6fb3e0;
        border-color: #6fb3e0;
    }

    .btn-expense:focus, .btn-expense.focus {
        color: #ffffff;
        background-color: #6fb3e0;
        border-color: #6fb3e0;
        box-shadow: 0 0 0 1px rgba(225, 109, 111, 0.5);
    }

.btn-timesheet {
    color: #363642;
    background-color: #5460f0;
    border-color: #5460f0;
    color: white;
}

    .btn-timesheet:hover {
        color: #ffffff;
        background-color: #1144eb;
        border-color: #1144eb;
    }

    .btn-timesheet:focus, .btn-timesheet.focus {
        color: #ffffff;
        background-color: #1144eb;
        border-color: #1144eb;
        box-shadow: 0 0 0 1px rgba(225, 109, 111, 0.5);
    }

/*ALUMNI PORTAL*/
.quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 110px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: 0.25s ease;
}

    .quick-tile i {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .quick-tile:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.15);
        color: white;
    }
.bg-doc {
    background: #3983c2;
}

.bg-pay {
        background: #9abc32;
    }

.bg-fnf {
        background: #e8b110;
    }

.bg-form {
        background: #fd7984;
    }

.job-row {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    transition: 0.25s ease;
    cursor: pointer;
    padding: 18px;
}
    .job-row:hover {
        border-color: #6ea8fe;
        transform: translateY(-3px);
    }

        .job-row:hover .job-left * {
            color: #0d6efd !important;
        }
        .job-row:hover .apply-btn {
            color: #0d6efd !important;
            background: rgba(13, 110, 253, 0.07);
        }
    /* Touch feedback for mobile */
    .job-row:active {
        border-color: #6ea8fe;
        transform: translateY(-2px);
    }

        .job-row:active .job-left * {
            color: #0d6efd !important;
        }

        .job-row:active .apply-btn {
            color: #0d6efd !important;
            background: rgba(13, 110, 253, 0.07);
        }
.job-title {
    font-size: 1.05rem;
    font-weight: normal;
    color: #333;
    margin-bottom: 6px;
}

.job-meta {
    display: flex;
    gap: 16px;
    align-items: center;
}


.meta-item {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #777;
}

.meta-value {
    font-size: 0.9rem;
    color: #444;
}

.meta-divider {
    width: 1px;
    height: 32px;
    background-color: #ddd;
    margin: 0 12px;
}

.apply-btn {
    background: #f4f5f7;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 1.2rem;
    text-decoration: none;
    color: #444;
    font-weight: bold;
    transition: 0.2s;
}


    .meta-value i {
        margin-right: 4px;
    }

.job-desc {
    font-size: 0.9rem;
    color: #6c757d; /* muted color */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-jobs {
    background: #fff;
    border: 1px dashed #dee2e6;
    border-radius: 10px;
    color: #6c757d;
}
/* =========================
   MOBILE FIXES
   ========================= */

@media (max-width: 768px) {

    /* 1️⃣ Stack job row vertically */
    .job-row {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 14px;
    }

    /* 2️⃣ Push apply button to bottom right */
    .apply-btn {
        margin-top: 12px;
        align-self: flex-end;
        padding: 10px 14px;
    }

    /* 3️⃣ Stack meta items vertically */
    .job-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* 4️⃣ Remove vertical divider on mobile */
    .meta-divider {
        display: none;
    }

    /* 5️⃣ Make meta items full width */
    .meta-item {
        width: 100%;
    }

    /* 6️⃣ Slightly reduce font size */
    .job-title {
        font-size: 1rem;
    }

    .meta-value {
        font-size: 0.85rem;
    }
}
/* Alumni Stats Spacing */
.alumni-stats {
    gap: 15px; 
}
    /* Alumni Stats Button Clean Spacing */
    .alumni-stats .btn-app {
        min-height: 3.5rem;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px; 
    }

    .alumni-stats .stat-value {
        font-size: 15px;
        line-height: 1.2;
    }

    .alumni-stats .stat-label {
        font-size: 12px;
        opacity: 0.9;
        line-height: 1.1;
    }
/* Alumni Stats Mobile Fix */
@media (max-width: 767px) {

    .alumni-stats {
        gap: 10px;
    }

        .alumni-stats .btn-app {
            min-width: 140px;
            flex: 0 0 45%;
            margin: 0 !important;
            padding: 10px 6px;
            font-size: 13px;
        }

            .alumni-stats .btn-app span {
                font-size: 12px;
            }
}

.timeline_area {
    position: relative;
    z-index: 1;
}

.single-timeline-area {
    position: relative;
    z-index: 1;
    padding-left: 180px;
}
@media (max-width: 767.98px) {

    .single-timeline-area {
        padding-left: 0 !important;
    }
        /* Make date normal flow */
        .single-timeline-area .timeline-date {
            position: relative !important;
            width: 100% !important;
            height: auto !important;
            justify-content: flex-start !important;
            padding-right: 0 !important;
            margin-bottom: 10px;
        }

            /* Remove vertical line & dot */
            .single-timeline-area .timeline-date::after,
            .single-timeline-area .timeline-date::before {
                display: none !important;
            }
}
    .single-timeline-area .timeline-date {
        position: absolute;
        width: 180px;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding-right: 60px;
    }

        .single-timeline-area .timeline-date::after {
            position: absolute;
            width: 3px;
            height: 100%;
            content: "";
            background-color: #ebebeb;
            top: 0;
            right: 30px;
            z-index: 1;
        }

        .single-timeline-area .timeline-date::before {
            position: absolute;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background-color: #f1c40f;
            content: "";
            top: 50%;
            right: 26px;
            z-index: 5;
            margin-top: -5.5px;
        }

        .single-timeline-area .timeline-date p {
            margin-bottom: 0;
            color: #020710;
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 500;
        }

    .single-timeline-area .single-timeline-content {
        position: relative;
        z-index: 1;
        padding: 30px 30px 25px;
        border-radius: 6px;
        margin-bottom: 15px;
        margin-top: 15px;
        -webkit-box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
        box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
        border: 1px solid #ebebeb;
    }

        .single-timeline-area .single-timeline-content .timeline-icon {
            -webkit-transition-duration: 500ms;
            transition-duration: 500ms;
            width: 30px;
            height: 30px;
            /* background-color: #f1c40f; */
            -webkit-box-flex: 0;
            -ms-flex: 0 0 30px;
            flex: 0 0 30px;
            text-align: center;
            max-width: 30px;
            border-radius: 50%;
            margin-right: 15px;
        }

            .single-timeline-area .single-timeline-content .timeline-icon i {
                color: #ffffff;
                line-height: 30px;
            }

        .single-timeline-area .single-timeline-content .timeline-text h6 {
            -webkit-transition-duration: 500ms;
            transition-duration: 500ms;
        }

        .single-timeline-area .single-timeline-content .timeline-text p {
            font-size: 13px;
            margin-bottom: 0;
        }

        .single-timeline-area .single-timeline-content:hover .timeline-icon,
        .single-timeline-area .single-timeline-content:focus .timeline-icon {
            background-color: #020710;
        }

        .single-timeline-area .single-timeline-content:hover .timeline-text h6,
        .single-timeline-area .single-timeline-content:focus .timeline-text h6 {
            color: #3f43fd;
        }