/*NEW DESIGN CSS START*/

.heading-section {
    display: flex;
    border-bottom: 1px solid #ddd;
    align-items: center;
    margin-bottom: 20px;
}

    .heading-section h4 {
        color: #000;
        font-size: 20px;
        font-weight: 400;
        line-height: 29px;
        text-align: left;
        margin-bottom: 0px;
     
    }

.head-tab {
    border: 1px solid #EDEDED;
    padding: 8px 12px 8px 12px;
    gap: 8px;
    border-radius: 18px;
    border: 1px 0px 0px 0px;
    background: #fff;
    display: flex;align-items: center;
}

.outr-cir {
    border: 2px solid #666;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.innr-cir {
    background: #fff;
    height: 5px;
    width: 5px;
    border-radius: 50%;
}

.head-tab.active {
    background: #E8F0FF;
    border: 1px solid #0253F1;
    color: #0253F1;
}

    .head-tab.active .outr-cir {
        border: 2px solid #0253F1;
    }

        .head-tab.active .outr-cir .innr-cir {
            background: #0253F1;
        }

.dashboard-cards {
    padding: 16px 24px 16px 24px;
    border-radius: 8px 10px;
    margin: 20px 0px;
    box-shadow: 4px 4px 9px 0px #09173C0D;
}

    .dashboard-cards.selected {
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        transform: scale(1.01);
        border-width: 3px;
    }

    .dashboard-cards .data span {
        display: block;
        font-size: 40px;
        font-weight: 700;
        line-height: 48px;
        text-align: left;
        color: #000;
    }

    .dashboard-cards .data {
        font-weight: 500;
        text-align:left;
    }

.save-sub {
    background: #EAF1FD;
    /*border: 1px solid #C4C4C4;*/
}

    .save-sub .bd-right {
        border-right: 1px solid #D1DEF8;
    }

    .save-sub .data {
        color: #A6B4CF;
    }

    .save-sub h6 {
        color: #031861;
        font-weight: 600;
        font-size: 16px;
    }

.paid {
    background: #ECFED7;
    /*border: 1px solid #9BD458;*/
}


    .paid .bd-right {
        border-right: 1px solid #CFECAC;
    }

    .paid .data {
        color: #9BD458;
    }

    .paid h6 {
        color: #498533;
        font-weight: 600;
        font-size: 16px;
    }

.pwp {
    background: #EDEAFF;
    /*border: 1px solid #A69CEF;*/
}

    .pwp .data {
        color: #A69CEF;
    }

    .pwp .bd-right {
        border-right: 1px solid #CDC6FB;
    }

    .pwp h6 {
        color: #031861;
        font-weight: 600;
        font-size: 16px;
    }

.rejected {
    background: #FED7DC;
    /*border: 1px solid #EF5F5F;*/
}

    .rejected .data {
        color: #FE8F8F;
    }

    .rejected .bd-right {
        border-right: 1px solid #F6C5C5;
    }

    .rejected h6 {
        color: #B91802;
        font-weight: 600;
        font-size: 16px;
    }

.under-rev {
    background: #E7F7FE;
    /*border: 1px solid #0A85BD*/
}

    .under-rev h6 {
        color: #074765;
        font-size: 16px;
        font-weight: 600;
        text-align: left;
    }

    .under-rev .sub-card {
        background: #F7FDFF;
    }

.sub-card {
    padding: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .sub-card.selected {
        background: #fff !important;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        transform: scale(1.04);
    }

.under-rev .sub-card {
    background: #F7FDFF;
}


.dashboard-cards h6 {
    margin-bottom: 20px;
}

.under-rev .sub-card .days {
    color: #031861;
    font-weight: 300;
}

.under-rev .sub-card .amt {
    color: #0A85BD;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-top: 20px
}

.under-rev .sub-card .number {
    background: #DCF4FF;
    width: 80%;
    padding: 8px;
    border-radius: 20px;
    text-align: center;
    margin-top: 10px;
    color: #006492;
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
}

.approved {
    background: #FFF5E2;
    /*border: 1px solid #EC860F*/
}

    .approved h6 {
        color: #895509;
        font-size: 16px;
        font-weight: 600;
        text-align: left;
    }

    .approved .sub-card {
        background: #FFFAF0;
    }

        .approved .sub-card .days {
            color: #543A0B;
            font-weight: 300;
        }

        .approved .sub-card .amt {
            color: #FF9900;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            margin-top: 20px
        }

        .approved .sub-card .number {
            background: #FDEACE;
            width: 80%;
            padding: 8px;
            border-radius: 20px;
            text-align: center;
            margin-top: 10px;
            color: #FF9900;
            font-size: 16px;
            font-weight: 800;
            line-height: 20px;
        }

.inv-table {
    border-radius: 8px;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-24 {
    font-size: 24px !important;
}
.fs-21{
    font-size:21px !important;
}
.fs-18 {
    font-size: 18px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.theme-table, .theme-table td, .theme-table th {
    border: 2px solid #E1E9F8;
}

    .theme-table th {
        border: 2px solid #ECECEC !important;
        color: #444746 !important;
        font-size: 16px ;
        font-weight: 700 !important;
        padding: 12px 8px !important;
        line-height: 19.36px !important;
        text-align: center;
        vertical-align: middle !important;
        background:#fff;
    }

.theme-table {
    width: 100%;
    border-collapse: separate;
    display:table;
}

    .theme-table .searchrow td {
        border: 2px solid #E1E9F8;
        padding: 12px 8px !important;
        background: #F6F8FC;
    }

        .theme-table .searchrow td div input, .theme-table .searchrow td div select {
            background: #EAF1FB;
            border: none;
            font-size: 12px;
            font-weight: 500;
            line-height: 14.52px;
            text-align: left;
            padding: 10px;
        }

    .theme-table tr td {
        padding: 12px 16px;
        color: #000;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.94px;
       /*word-break:break-all;*/
    }

    .theme-table tr.highlight td {
        background: #EAF1FB
    }

.popup-notification {
    border: 1px solid #D7E2F9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 14.52px;
    text-align: left;
}

    .popup-notification span {
        color: #0253F1;
        text-decoration: underline;
    }

.kt-header {
    padding: 10px 15px;
    justify-content: space-between;
}

.bell {
    border: 1px solid #D7E2F9;
    background: #F0F5FF;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

    .bell .number {
        background: #F54C4C;
        font-size: 10px;
        font-weight: 900;
        line-height: 12.1px;
        text-align: center;
        height: 20px;
        width: 20px;
        position: absolute;
        top: -2px;
        right: 0px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }


.truncate {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.filter {
    line-height: 9px !important;
    color: #D0D0D0;
    font-size: 14px;
    cursor: pointer;
}

.theme-btn {
    background: #0253F1 !important;
    padding: 8px 12px;
    gap: 5px !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 19.36px !important;
    text-align: center !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    width: fit-content;
    cursor: pointer !important;
    justify-content: center;
}

.theme-btn-secondary {
    border: 1px solid #DEE9FE !important;
    background: #fff !important;
    color: #0253F1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    width: fit-content;
    margin-right: 5px !important;
    padding: 8px 12px;
    border-radius: 6px !important;
    gap: 5px !important;
    line-height: 19px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.theme-btn:hover {
    color: #fff;
}

.theme-btn .add {
    border: none;
    border-radius: 4px;
    height: 22px;
    width: 22px;
    background: #fff;
    color: #0253F1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-btn-secondary .add {
    border: none;
    border-radius: 4px;
    height: 22px;
    width: 22px;
    background: #0253F1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.disable {
    opacity: 0.3;
}

.close-btn {
    background: #E85252;
    height: 36px;
    width: 36px;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
}

.kt-footer__copyright {
    color: #000 !important;
    font-weight: 600 !important;
}

.img-dim {
    height: 22px;
    width: 22px;
}

.img-dim-l {
    height: 40px;
    width: 40px;
}

.img-dim-xl {
    height: 65px;
    width: 65px;
}

.content-card {
    border: 1px solid #E2EBFE;
    /*border-radius: 0px 0px 8px 8px;*/
    padding: 10px;
}

    .content-card .upload {
        display: flex;
        flex-direction: column;
        gap: 9px;
        align-items: center;
        padding: 10px;
    }

.logout {
    display: flex;
    align-items: center;
    border-top: 1px solid #D3E3FD;
    background: #E0EBFD;
    padding: 10px 15px;
    justify-content: space-between;
    color: #000;
}
@media (max-width: 786px) {
    .logout {
        position: sticky;
        bottom: 0px;
        width: 100%;
    }
    .kt-aside-menu .kt-menu__nav {
        padding: 50px 0;
    }
    .chat-box .message-content {
        min-width: 122px !important;
    }
    .theme-table tr th, .theme-table tr td {
        font-size: 10px !important;
        padding:10px 4px !important;
    }
    .clsLoadingMsg{
        font-size:13px !important;
    }
    .ProgressBar img {
        height: 30px;
        width: 30px;
    }
  
}
.logout-icon {
    height: 20px;
    width: 20px;
}

.profile-pic {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    margin-right: 10px;
}

.kt-aside--minimize .details, .kt-aside--minimize .logout-icon, .kt-aside--minimize .theme-btn.sidebar p span {
    display: none;
}

.kt-aside--minimize .details, .kt-aside--minimize .logout-icon, .kt-aside--minimize .theme-btn.sidebar p {
    font-size: 11px;
    line-height: 14px;
}

.kt-aside .kt-aside-menu {
    padding-top: 10px;
}

.kt-aside--minimize .theme-btn.sidebar {
    margin-bottom: 5px !important;
    flex-flow: column-reverse;
    padding: 8px;
}

    .kt-aside--minimize .theme-btn.sidebar .add {
        background: #0253F1;
        color: #fff;
        height: auto;
        width: auto;
    }

.kt-aside-menu .kt-menu__nav > .kt-menu__item {
    margin-bottom: 5px;
}

.w-85 {
    width: 85%;
}

.form-control {
    background: #eaf6ff78 !important;
    border: 1px solid #DEE9FE;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #666 !important;
    height: 36px;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-800 {
    font-weight: 800;
}

.text-black {
    color: #000;
}

.theme-outline-btn {
    border: 1px solid #C6DBFC;
    background: #fff;
    color: #0253F1;
    padding: 8px 12px;
    border-radius: 6px;
}

.upload-item {
    border: 1px solid #C6DBFC;
    background: #EAF1FB;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    color: #444746;
    font-weight: 500;
    margin-bottom: 8px;
}

.inv-scroll {
    height: 193px;
    overflow: auto;
}

.popupSide {
    display: none;
    position: fixed;
    top: 0;
    right: -300px; /* Adjust this value to change the initial position */
    width: 300px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: right 0.5s ease;
    z-index: 99999;
}

.popup-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
}

.closebtn {
    cursor: pointer;
    font-size: 18px;
}

.mark-read {
    color: #000;
    font-weight: 400;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.spnTotalMessages1 {
    background-color: #F54C4C;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .spnTotalMessages0 span, .spnTotalMessages1 span {
        font-size: 12px;
    }

.spnTotalMessages0 {
    background-color: #3877F2;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*.theme-btn img {
    height: 12px;
}*/

.note-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    gap: 8px;
    justify-content: space-between;
    border-bottom: 1px solid #b8b8dd;
}

    .note-item .img-dim {
        width: 30px;
        height: 30px;
        margin-right: 15px;
        border-radius: 50%;
    }

    .note-item h6 {
        font-weight: 600;
        color: #000;
    }

    .note-item p {
        font-weight: 400;
        color: #000;
        word-wrap: break-word;
        word-break: break-word; /* You can also use break-all */
        white-space: normal;
    }

    .note-item.unread h6 {
        font-weight: 700
    }

    .note-item.unread p {
        font-weight: 500
    }

    .note-item.read {
        background: #E1E9F8;
    }

.not-scroll {
    height: calc(100vh - 54px);
    overflow: auto;
}

.kt-aside--minimize .kt-aside .kt-aside__brand {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 0px !important;
}

.kt-aside--minimize .kt-aside .kt-aside__brand-logo .expand-sidebar {
    display: flex;
    flex-direction: column;
    /*padding: 20px;*/
    gap: 10px;
    margin: 10px 0px 0px 0px;
}

    .kt-aside--minimize .kt-aside .kt-aside__brand-logo .expand-sidebar h4 {
        font-size: 14px;
    }

.kt-aside__brand {
    margin: 15px 0px !important;
}

@media (max-width: 1500px) {
    .dashboard-cards .data span {
        font-size: 22px;
    }

    .under-rev .sub-card .days, .approved .sub-card .days {
        font-size: 12px;
    }

    .under-rev .sub-card .amt, .approved .sub-card .amt {
        margin-top: 5px;
        font-size: 20px;
    }

    .dashboard-cards {
        padding: 15px;
    }

        .dashboard-cards .data span {
            line-height: 27px;
        }

            .dashboard-cards .data span .fs-32 {
                font-size: 21px !important;
            }
}

@media (min-width: 1500px) and (max-width: 1700px) {
    .dashboard-cards .data span {
        font-size: 25px;
    }

    .under-rev .sub-card .days, .approved .sub-card .days {
        font-size: 14px;
    }

    .under-rev .sub-card .amt, .approved .sub-card .amt {
        margin-top: 5px;
        font-size: 24px;
    }

    .dashboard-cards {
        padding: 15px;
    }

        .dashboard-cards .data span {
            line-height: 30px;
        }

            .dashboard-cards .data span .fs-32 {
                font-size: 24px !important;
            }
}

.expand-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #002E63;
}

    .expand-sidebar h4 {
        font-weight: 600;
    }

.h-60 {
    height: 60px !important;
}

.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 5px 5px 10px;
    /*text-align: center;*/
}

.theme-tab li {
    background: #E1E9F8;
    padding: 12px;
    border: 1px solid #EDF3FF;
    color: #9DA1A4;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    padding: 0px;
}

    .theme-tab li a {
        padding: 10px;
    }

        .theme-tab li a:hover {
            color: #9DA1A4;
        }

    .theme-tab li.active a:hover {
        color: #fff;
    }

    .theme-tab li.active {
        background: #0253F1;
        color: #fff;
        font-weight: 600;
    }

    .theme-tab li:first-child {
        border-radius: 16px 0px 0px 16px;
    }

    .theme-tab li:last-child {
        border-radius: 0px 16px 16px 0px;
    }

.line-div {
    display: flex; /* Use flexbox */
    align-items: center; /* Center-align items vertically */

    text-align: center; /* Optional: center-align content */
}

    .line-div::after {
        content: "";
        flex: 1;
        border: 1px solid #C7DAFF;
        margin-left: 10px;
    }

.message-bg {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #E2EBFE;
    overflow: hidden;
    margin-bottom: 20px;
}

    .message-bg .heading {
        padding: 10px;
        border-bottom: 1px solid #E2EBFE;
    }

        .message-bg .heading h4 {
            font-size: 16px;
            line-height: 40px;
            font-weight: 600;
            color: #000000;
        }

    .message-bg .list-item .carditem {
        display: flex;
        background: #fff;
        padding: 10px;
        gap: 5px;
        border-bottom: 1px solid #E2EBFE;
        cursor: pointer;
    }


        .message-bg .list-item .carditem.active {
            background: #EAF1FB;
        }

        .message-bg .list-item .carditem h5 {
            color: #000;
            font-weight: 600;
            font-size: 14px;
        }

        .message-bg .list-item .carditem p {
            color: #6B6B6B;
            font-weight: 400;
            font-size: 12px;
            margin-bottom: 0px;
        }

        .message-bg .list-item .carditem .nmbr {
            color: #002E62;
            font-weight: 600;
            font-size: 16px;
            width: calc(25% - 40px);
        }

.new {
    background: #D3E3FD;
    color: #0253F1;
    font-weight: 600;
    font-size: 10px;
    padding: 4px;
    border-radius: 4px;
}

.message-bg .right-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E2EBFE;
    padding: 10px;
    background: #fff;
}

.bd-right {
    border-right: 1px solid #E2EBFE;
    height: 100%;
}

.message-bg .innerdet {
    /*background: white;*/
    padding: 8px;
    margin-bottom: 10px;
}

.innerdet h6 {
    color: #000;
    font-size: 12px;
    font-weight: 600;
}

.bg-chat {
    background: #F8F8F9;
}

.chat-msg {
    padding: 10px 0px;
    height: 312px;
    overflow: auto;
    background: #fff;
}

.chat-area {
    background: #fff;
}

    .chat-area .det {
        border-bottom: 1px solid #E2EBFE
    }

.chat-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 20px;
}

    .chat-box .message-content {
        background: #F2F3F8;
        padding: 10px;
        border: 1px solid #DEE9FE;
        color: #000;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.94px;
        text-align: left;
        max-width: 500px;
        min-width: 250px;
    }

    .chat-box .recipient {
        border: 1px solid #DEE9FE;
        color: #0253F1;
        background: #EAF1FB;
        padding: 5px;
        font-weight: 500;
        max-width: 200px;
    }

.chat-right-new {
    display: flex;
    align-items: center;
    justify-content: end;
}

    .chat-right-new .chat-details {
        display: flex;
        flex-direction: column;
        align-items: end;
    }

    .chat-right-new .recipient {
        border-radius: 8px 8px 0px 0px;
    }

    .chat-right-new .message-content {
        border-radius: 8px 0px 8px 8px;
        text-align: right;
        word-break:break-word;
    }

.chat-left-new {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-flow: row-reverse;
}

    .chat-left-new .chat-details {
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }

    .chat-left-new .recipient {
        border-radius: 8px 8px 0px 0px;
    }

    .chat-left-new .message-content {
        border-radius: 0px 8px 8px 8px;
        word-break: break-word;
    }

.attachment-new {
    border: 1px solid #DEE9FE;
    background: #EAF1FB;
    color: #0253F1;
    font-size: 12px;
    font-weight: 500;
    width: fit-content;
    padding: 5px;
    border-radius: 4px;
    margin-top: 5px;
}

.message-details {
    background: #fff;
    padding: 10px;
}


.more-rec {
    font-size: 16px;
    font-weight: 500;
    color: #0253F1;
}

    .more-rec:hover {
        color: #0253F1;
    }

.rec-det {
    background: #FFFFFF;
    border: 1px solid #DEE9FE;
    color: #0253F1;
    padding: 4px 8px 4px 8px;
    border-radius: 4px;
    /*margin-right: 10px;*/
    display: flex;
    /*min-width: fit-content;
    width: fit-content;*/
    align-items: center;
    gap: 12px;
    width:fit-content;
}

.ln-ht-40 {
    line-height: 40px;
}

.ln-ht-9 {
    line-height: 9px;
}

.note-item .msgicon {
    height: 24px !important;
}

.message-bg .card-scroll {
    height: 642px;
    overflow-x: hidden;
    overflow-y: auto;

}

.msg-list-card {
    padding: 14px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E2EBFE;
    align-items: center;
    cursor: pointer;
}

    .msg-list-card:first-child {
        border-top: 1px solid #E2EBFE;
    }

    .msg-list-card.active {
        background: #EAF1FB;
    }

.mx-w-70 {
    max-width: 70%;
}

.gap-15 {
    gap: 15px;
}

.bd-50 {
    border-radius: 50%;
}

.w-70 {
    width: 70%;
}

.w-30 {
    width: 30%;
}

.scroll-horzontal {
    overflow-x: auto;
    overflow-y: hidden;
}

.disable-scrollbars::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 2px;
}

.disable-scrollbars {
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.img-name {
    display: flex;
    gap: 21px;
    align-items: center;
    width: fit-content;
}

    .img-name a {
        white-space: nowrap;
    }

.sender-icon {
    background: #eaf1fb;
    padding: 10px;
    margin: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    border: 1px solid #0253f1;
    font-size: 20px;
    color: #0c5bf1;
    font-weight: 600;
}

.closebtnsm {
    background: #F54C4C;
    color: #fff;
    border-radius: 4px;
    padding: 4px;
    border: none;
    height: 27px;
}

.inp-ht {
    height: 20px;
}

.pill {
    background: #C7DAFF;
    border-radius: 20px;
    padding: 5px 12px;
    text-align: center;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    margin-right: 10px;
}

.w-400p {
    width: 400px;
}

.bg-white {
    background: white !important;
    border-radius: 8px;
    border: 1px solid #E5E5E5;
}

.theme-text {
    color: #0253F1;
}

.custom-chk {
    /*   display: block;*/
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: fit-content;
    line-height: 23px;
}


    .custom-chk input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }


    .custom-chk .checkmark {
        position: absolute;
        top: 0px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #EAF1FB;
        border-radius: 4px;
        border: 1px solid #0253f1b0;
    }



    .custom-chk input:checked ~ .checkmark {
        background-color: #0253F1;
    }


    .custom-chk .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    .custom-chk input:checked ~ .checkmark:after {
        display: block;
    }


    .custom-chk .checkmark:after {
        left: 6px;
        top: 3px;
        width: 6px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .custom-chk .partial:after {
        left: 8px;
        top: 4px;
        width: 0px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(90deg);
    }

        .h-20 {
            height: 20px !important;
        }

.selected-split {
    background: #F6F9FF;
}

.splitshow {
    border: 1px dashed #0253F1;
    padding: 10px;
    border-radius: 8px;
    min-height: 443px;
}

    .splitshow .card-heading {
        background: #D1D9E5 !important;
        border-radius: 5px 5px 0px 0px;
    }

    .splitshow .invoice-card {
        height: auto !important;
    }

.ht-36 {
    height: 36px;
}

.ht-15 {
    height: 15px;
}

.w-200 {
    width: 200px;
}

.w-15 {
    width: 15px;
}

.mx-w-50 {
    max-width: 50%;
}



/* VARS */
/* MIXINS */
/* STYLE THE HTML ELEMENTS (INCLUDES RESETS FOR THE DEFAULT FIELDSET AND LEGEND STYLES) */


fieldset {
    margin: 0;
    padding: 2rem;
    box-sizing: border-box;
    display: block;
    border: none;
    border: solid 1px #ccc;
    min-width: 0;
    background-color: #fff;
}

    fieldset legend {
        margin: 0 0 1.5rem;
        padding: 0;
        width: 100%;
        float: left;
        display: table;
        font-size: 1.5rem;
        line-height: 140%;
        font-weight: 600;
        color: #333;
    }

        fieldset legend + * {
            clear: both;
        }


/* TOGGLE STYLING */
.toggle {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

    .toggle input {
        width: 0;
        height: 0;
        position: absolute;
        left: -9999px;
    }

        .toggle input + label {
            margin: 0;
            padding: 0.75rem 2rem;
            box-sizing: border-box;
            position: relative;
            display: inline-block;
            border: solid 1px #ddd;
            background: #E1E9F8;
            color: #9DA1A4;
            font-weight: 400;
            font-size: 14px;
            cursor: pointer;
        }

            .toggle input + label:first-of-type {
                border-radius: 16px 0px 0px 16px;
                border-right: none;
            }

            .toggle input + label:last-of-type {
                border-radius: 0 16px 16px 0;
                border-left: none;
            }



        .toggle input:checked + label {
            background: #0253F1;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 0 10px rgba(102, 179, 251, 0.5);
            border-color: #4b9dea;
            z-index: 1;
        }



@media (max-width: 800px) {
    .toggle input + label {
        padding: 0.75rem 0.25rem;
        flex: 0 0 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
.status {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
}

    .status span {
        font-weight: 600;
        color: #b6985a;
    }

        .status span:first-of-type {
            display: inline;
        }

        .status span:last-of-type {
            display: none;
        }

@media (max-width: 800px) {
    .status span:first-of-type {
        display: none;
    }

    .status span:last-of-type {
        display: inline;
    }
}

.inpDisable {
    pointer-events: none;
    opacity: 0.6
}

.btnDisableNew {
    pointer-events: none;
    opacity: 0.3;
}


/* Breadcrups CSS */

.arrow-steps .step {
    font-size: 14px;
    text-align: center;
    color: #666;
    cursor: default;
    padding: 10px 10px 10px 30px;
    min-width: 180px;
    float: left;
    position: relative;
    background: linear-gradient(270deg, #B9D1FF 0%, #E0E8F8 100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color 0.2s ease;
    width: 19.5%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .arrow-steps .step:after,
    .arrow-steps .step:before {
        content: " ";
        position: absolute;
        top: 0;
        right: -34px;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 26px solid transparent;
        border-left: 35px solid #B9D1FF;
        z-index: 2;
        transition: border-color 0.2s ease;
    }

    .arrow-steps .step:before {
        right: auto;
        left: 0;
        border-left: 17px solid #fff;
        z-index: 0;
    }

 

    .arrow-steps .step .chkimg {
        display: none;
    }

    .arrow-steps .step span {
        position: relative;
        font-size: 13px;
        font-weight: 600;
        color: #7C8FB4;
    }

        .arrow-steps .step span:before {
            opacity: 0;
            content: "✔";
            position: absolute;
            top: -2px;
            left: -20px;
        }

    .arrow-steps .step.done span:before {
        opacity: 1;
        -webkit-transition: opacity 0.3s ease 0.5s;
        -moz-transition: opacity 0.3s ease 0.5s;
        -ms-transition: opacity 0.3s ease 0.5s;
        transition: opacity 0.3s ease 0.5s;
    }

    .arrow-steps .step.current {
        background: linear-gradient(270deg, #0253F1 0%, #378DF2 100%);
    }

        .arrow-steps .step.current span {
            color: #fff;
        }

        .arrow-steps .step.current .chkimg {
            display: block;
            margin-right: 5px;
        }

        .arrow-steps .step.current:after {
            border-left: 35px solid #0253F1;
        }

        .arrow-steps .step.current .date {
            background: #C7DAFF36;
        }

    .arrow-steps .step .date {
        background: #96a4c136;
        font-size: 12px;
        font-weight: 400;
        line-height: 14.52px;
        text-align: left;
        padding: 5px;
        border-radius: 20px;
        margin-left: 5px;
    }

.timestamp p {
    color: #00000078;
    font-size: 12px;
    margin-bottom: 0px;
}

.chat-msg-extend {
    height: 400px !important;
}

.bd-bottom-blue {
    border-bottom: 1px solid #E2ECFE;
}

.table-chk .checkmark {
    top: auto;
    left: auto;
    position: relative;
}

.table-chk span.lab {
    color: #444746;
    font-size: 16px;
    font-weight: 600;
    padding-left: 5px;
}

.kt-aside--minimize .kt-menu__nav {
    /*max-height: calc(100vh - 375px);*/
    overflow: hidden !important;
    padding-top: 0px !important;
}

.kt-aside-menu .kt-menu__nav {
    height: calc(100vh - 375px);
    overflow: auto !important;
}

.v-a-c {
    vertical-align: middle;
}

.head-card {
    background: #F4F7FA;
    /*border-radius: 8px 8px 0px 0px;*/
    border: 1px solid #E2EBFE;
    padding: 8px;
}

    .head-card h4 {
        font-weight: 500;
        font-size: 15px;
        line-height: 21px;
        margin-bottom: 0px;
        line-height: 23px;
    }

.form-group label {
    margin-bottom: 5px;
    color: #000;
    font-weight: 600;
}

.content-card {
    border: 1px solid #E2EBFE;
    /*border-radius: 0px 0px 8px 8px;*/
    padding: 10px;
    height: calc(100% - 37px);
}

    .content-card .upload {
        display: flex;
        flex-direction: column;
        gap: 9px;
        align-items: center;
        padding: 10px;
    }

.t-18 {
    top: 18px !important;
}

.line-ht-28 {
    line-height: 28px !important;
}

.upload-file-input {
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 10;
    height: 100%;
    cursor: pointer;
}

.theme-bg {
    background-color: #0253F1 !important;
}

.wrkflowscroll {
    max-height: 250px;
    overflow: auto;
}

.swal2-styled.swal2-confirm {
    background: #0253F1 !important;
}

.table-heading {
    background: #0253f1;
    color: #fff;
    padding: 8px;
    text-align: center;
    margin-bottom: 10px;
}

.nomsg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f8fafb;
    flex-direction: column;
}

    .nomsg img {
        height: 200px;
    }

.padding-cell {
    padding: 12px 8px !important;
}

.chat-msg-lg {
    height: 350px;
}

.invoice-card h5 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
}

    .invoice-card h5 span {
        color: #666;
    }

#mySidenav .invoice-card {
    height: auto !important;
}

.invoice-card {
    background-color: #fff;
    /* padding:10px; */
    border-radius: 10px;
    box-shadow: 4px 4px 9px 0px #09173C0D;
    height: 100%;
    margin-bottom: 20px;
    height: calc(100% - 20px);
    color: #000;
}

    .invoice-card .card-heading {
        border-bottom: 1px solid #3877F2;
        padding: 10px;
        background: #EAF1FB;
    }

.cstm-drop {
    border: 1px solid #ddd;
    border-radius: 9px;
    position: absolute;
    top: 68px;
    background: #fff;
    width: 93%;
    z-index: 10;
    max-height: 300px;
    overflow: auto;
}

    .cstm-drop ul {
        margin-bottom: 0px;
        padding: 0px;
    }

        .cstm-drop ul.frequent {
            border-bottom: 1px dashed #000;
        }

        .cstm-drop ul li {
            list-style: none;
            margin-bottom: 1px;
            cursor: pointer;
            padding: 3px 10px;
        }

            .cstm-drop ul li:hover {
                background: #eaf1fb;
            }

            .cstm-drop ul li h6 {
                margin: 5px 0px;
                font-weight: 700;
            }

            .cstm-drop ul li.heading {
                cursor: none;
            }

                .cstm-drop ul li.heading:hover {
                    background: #fff
                }

.dropdown-menu {
    height: auto;
    max-height: 275px;
    overflow: auto;
}

.w-78-v {
    min-height: 78vh;
}
/*.divider {
    display: flex;
    align-items: center;
    text-align: center;
   
}

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 2px solid #C7DAFF;
    }

    .divider::before {
        margin-right: 10px;
    }

    .divider::after {
        margin-left: 10px;
    }*/
.custom-th {
    color: #444746 !important;
    font-size: 16px !important;
    margin-left: 10px;
}

.table-chk1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .table-chk1 .custom-chk {
        padding-left: 0px !important;
        margin-bottom: 0px !important;
        height: 20px !important;
        width: 20px !important;
    }

.mb-16 {
    margin-bottom: 16px !important;
}

.user-name {
    text-align: center;
    color: #0253F1;
    margin: 10px;
    font-weight: 600;
    font-size: 24px;
}

.tbmain p {
    color: #000;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}

.tbmain .itenary {
    font-size: 24px;
    font-weight: 600;
    color: #002E63;
    text-align: center;
}

.itcard {
    border: 1px solid #E5E5E5;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5FAFD 100%);
    border-radius: 8px;
    width: 270px;
    cursor: pointer;
}

    .itcard .bookiconimg {
        margin: 0 auto;
        background-size: cover;
    }

    .itcard .card-title {
        font-weight: 600;
        font-size: 24px;
        color: #000;
    }

    .itcard p {
        margin-bottom: 20px;
        color: #797979;
        font-size: 16px;
        font-weight: 400;
    }

    .itcard a {
        font-size: 20px;
        font-weight: 600;
        color: #0253F1;
        cursor: pointer;
    }

.gap-30 {
    gap: 30px;
}

.gap-45 {
    gap: 45px;
}

.c-p {
    cursor: pointer;
}

.select-tab {
    display: flex;
    gap: 20px;
    justify-content: center;
    list-style: none;
    padding-left: 0px;
}

    .select-tab li div {
        height: 64px;
        width: 98px;
        padding: 10px 30px;
        border-radius: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid #EDEDED;
        box-shadow: 1px 3px 6px 3px #09173C0D;
    }

    .select-tab li svg {
        fill: #1674df;
    }

    .select-tab .flight.active {
        background: #ECFED7;
        border: 1px solid #66a818;
    }

    .select-tab .active svg {
        fill: #0253F1;
    }

    .select-tab .hotel.active {
        background: #EDEAFF;
        border: 1px solid #6147FF
    }

    .select-tab .restaurant.active {
        background: #FFF5E2;
        border: 1px solid #FF9505;
    }

    .select-tab .train.active {
        background: #E3F8FF;
        border: 1px solid #1674DF
    }

    .select-tab .car.active {
        background: #FED7DC;
        border: 1px solid #FF5A6F;
    }


.travel-label {
    position: relative
}

    .travel-label label {
        position: absolute;
        top: -10px;
        left: 23px;
        background: #fff;
        padding: 0px 9px;
        z-index: 10;
        color: #0253F1;
        font-size: 12px;
        font-weight: 400;
        text-transform: uppercase;
    }

    .travel-label .detailstravel {
        border: 1px solid #E5E5E5;
        border-radius: 12px;
        padding: 10px 5px;
        background: transparent;
        display: flex;
        align-items: center;
        height: 67px;
        justify-content: space-between;
    }

        .travel-label .detailstravel h5 {
            font-size: 20px;
            font-weight: 600;
            color: #1F2937;
        }

        .travel-label .detailstravel p {
            color: #737373;
            font-size: 14px;
            font-weight: 400;
        }

.detailstravel .city-det {
    border-left: 1px dashed #E5E5E5;
    padding-left: 10px;
}

.waytab ul {
    list-style: none;
    padding-left: 0px;
    display: flex;
    margin-bottom: 0px;
}

    .waytab ul li:first-child {
        border-radius: 8px 0px 0px 0px;
    }

    .waytab ul li:last-child {
        border-radius: 0px 8px 0px 0px;
    }

    .waytab ul li {
        padding: 10px 20px;
        border-bottom: 1px solid #E1E9F8;
        background: #fff;
        cursor: pointer;
    }

        .waytab ul li a {
            display: flex;
            align-items: center;
        }

            .waytab ul li a p {
                font-size: 14px;
                color: #767778;
                font-weight: 400;
                margin-left: 5px;
            }

            .waytab ul li a .outr-cir {
                border-color: #0253F1;
            }

        .waytab ul li.active {
            background: #0253f114;
            border-bottom: 2px solid #0253F1;
        }

            .waytab ul li.active a .innr-cir {
                background: #0253F1;
            }

.border-rad-left-top {
    border-top-left-radius: 0px;
}

.mt-100 {
    margin-top: 100px;
}

.travel-label .calender-wrapper {
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 100%;
}

.w-45 {
    width: 45%;
}

.filternew {
    border: 1px solid #EAEAEA;
    background: #FAFBFD;
    padding: 10px;
    border-radius: 6px;
    max-height: 600px;
    overflow: auto;
}

.selected-filter {
    display: flex;
    gap: 5px;
    margin-bottom: 30px;
}

    .selected-filter span {
        background: #E9F3FD;
        border-radius: 10px;
        color: #000000;
        font-weight: 600;
        font-size: 10px;
        width: fit-content;
        padding: 5px;
    }

.airlinelogo {
    width: 12px;
    height: 12px;
}

.flight-list {
}

.flight-list-card {
    border: 1px solid #EAEAEA;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
}

    .flight-list-card .flight-det {
        display: flex;
        align-items: center;
    }

        .flight-list-card .flight-det img {
            height: 30px;
            width: 30px;
        }

.view-det {
    background: #F0F6F8;
    padding: 4px;
    border-radius: 6px;
    text-align: center;
}

    .view-det a {
        color: #1674DF;
        font-weight: 500;
        font-size: 14px;
    }

.progress-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    max-width: 600px;
    min-width:320px;
    border-radius: 10px;
    position: relative;
}

.progress-step {
    text-align: center;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

  /*  .progress-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 30%;
        right: -50%;
        width: 100%;
        height: 2px;
        background-color: transparent;
        border-top: 2px dotted #b0bec5;
        transform: translateY(-50%);
    }*/

    .progress-step.active .icon {
        background-color: #c5e1a5;
    }

    .progress-step .icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: #b0bec5;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 10px;
        font-size: 20px;
        color: #ffffff;
    }
.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.step-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ddd;
    border: 2px solid #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    transition: all 0.3s ease;
}

.step-label {
    margin-top: 10px;
    font-size: 10px;
    text-align: center;
    color: #333;
}

/* Line connecting the steps */
.progress-line {
    position: absolute;
    top: 6px; /* Align with the center of the circles */
    left: 0px;
    height: 4px;
    background-color: #ddd;
    z-index: 0;
}

.progress-line-filled {
    position: absolute;
    top: 6px;
    left: 0px;
    height: 4px;
    background-color: #0253F1; /* Blue color for filled progress */
    z-index: 0;
    transition: width 0.3s ease;
}

/* Active step styling */
.active .step-circle {
    background-color: #0253F1 !important;
    border-color: #0253F1 !important;
}

/* Completed step styling */
.completed .step-circle {
    background-color: #4BC81E; /* Green for completed */
    border-color: #4BC81E;
}

/* Rejected step styling */
.rejecteddot .step-circle {
    background-color: red; /* Red for Rejected */
    border-color: red;
}

.icon-bg {
    border: 1px solid #ECFED7;
    background: #fff;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

.booking-status {
    background: #E3F8FF;
    border-radius: 20px;
   padding:20px;
   margin-top:20px;
}


.progress-step.active .icon-bg {
    background: #ECFED7;
}

.booking-status h3 {
    color: #1F2937;
}

.calender-wrapper .form-control {
    height: 67px;
}

::-webkit-scrollbar-thumb {
    background: #0253f1 !important;
}

.filter-box {
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    margin-top: 20px;
    padding: 20px;
}

.m-y-20 {
    margin: 20px 0px;
}

.top-37 {
    top: 37px !important;
}

.top-8 {
    top: 8px;
}

.right-10 {
    right: 10px;
}

.room-opt {
    border: 1px solid #E5E5E5;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    margin-top: 30px;
}

.overview-hotel {
    border: 1px solid #E5E5E5;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
}

.rating-hotel {
    font-weight: 600;
    color: #0253f1;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 25px;
    border-radius: 10px;
    margin-bottom: 13px;
    margin-right: 10px;
    margin-left: 10px;
}

.heading-hotel {
    background: #E3F8FF;
    padding: 10px;
    display: flex;
    gap: 15px;
}

    .heading-hotel a {
        background: #fff;
        border-radius: 6px;
        padding: 10px;
        color: #767778;
        font-size: 14px;
        font-weight: 400;
    }

        .heading-hotel a.active {
            position: relative;
            background: #0253f114;
            color: #0253F1;
        }

            .heading-hotel a.active:after {
                content: "";
                position: absolute;
                width: 100%;
                bottom: 0px;
                left: 0px;
                background: #0253F1;
                height: 2px;
            }

.progress-hotel.active .icon-bg {
    background: #EDEAFF;
}

.room-detail-pay {
    background: #FFFCF8;
}

.head-sticky {
    position: sticky;
    top: 249px;
    z-index: 7;
}
@media screen and (min-width: 1200px) {
    .search-stickyy {
        position: sticky;
        top: 40px;
        z-index: 9;
    }
}

.top-272 ul {
    top: 272px !important;
    bottom: 0px;
}

.top-360 ul {
    top: 360px !important;
    bottom: 0px;
}

.top-5 {
    top: 5px !important;
}

.restaurant-list {
    height: calc(100vh - 386px);
    overflow-y: auto;
    overflow-x: hidden;
}

.left-0 {
    left: 0px;
}

.chef {
    height: 200px !important;
    bottom: 0px;
    left: 50px;
}
.itnary-trips {
    padding: 20px 0px;
}

    .itnary-trips h3 {
        color: #000;
        font-size: 24px;
        font-weight: 400;
    }

    .itnary-trips p {
        color: #737373;
        font-size: 14px;
        font-weight: 400;
    }

.ite-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 10px;
    margin: 0px 20px 20px 20px;
    cursor: pointer;
}

    .ite-card h4 {
        color: #1F2937;
        font-size: 20px;
        font-weight: 500;
        line-height: 24.2px;
    }

    .ite-card span {
        color: #0253F1;
        font-size: 20px;
        font-weight: 700;
        line-height: 24.2px;
        text-align: left;
    }

    .ite-card.plane {
        background: #ECFED7;
    }

    .ite-card.hotel {
        background: #EDEAFF;
    }

    .ite-card.car {
        background: #FED7DC;
    }

    .ite-card.restaurant {
        background: #FFF5E2;
    }

    .ite-card.train {
        background: #E3F8FF;
    }

    .ite-card .img-border {
        height: 46px;
        width: 62px;
        background: #fff;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ite-card.plane .img-border {
        border: 1px solid #A0D660;
    }

    .ite-card.hotel .img-border {
        border: 1px solid #6147FF
    }

    .ite-card.car .img-border {
        border: 1px solid #FF5A6F
    }

    .ite-card.restaurant .img-border {
        border: 1px solid #FF9505;
    }

    .ite-card.train .img-border {
        border: 1px solid #1674DF
    }

.itenary-newcard {
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    cursor: pointer;
}

    .itenary-newcard h4 {
        color: #1F2937;
        max-width: 70px;
        width: auto;
        font-size: 20px;
        font-weight: 600;
        line-height: 24.2px;
    }

    .itenary-newcard .edit {
        background: #E3F8FF;
        border-radius: 2px;
        color: #0253F1;
        font-size: 12px;
        font-weight: 600;
        height: 25px;
        width: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .itenary-newcard .datesitenary {
        color: #737373;
        font-size: 12px;
        font-weight: 400;
        line-height: 14.52px;
    }

    .itenary-newcard.active {
        background: #1674DF;
    }

        .itenary-newcard.active h4, .itenary-newcard.active .datesitenary {
            color: #fff;
        }

.new-expense-card {
    background: #ECFED7;
    border-radius: 6px;
    padding: 20px;
    height: 170px;
    display: flex;
    align-items:center;
    justify-content: space-between;
}

    .new-expense-card img {
        height: 70px;
        width: 70px
    }

    .new-expense-card h3 {
        font-size: 20px;
        font-weight: 600;
        line-height: 24.2px;
        text-align: left;
        color: #0253F1;
    }

    .new-expense-card p {
        color: #1F2937;
        font-size: 12px;
        font-weight: 400;
        line-height: 14.52px;
        text-align: left;
    }

.inner-card-expense {
    border: 1px solid #E5E5E5;
    padding: 20px;
    border-radius: 6px;
}

    .inner-card-expense span {
        color: #0253F1;
        font-size: 24px;
        font-weight: 700;
        line-height: 29.05px;
        text-align: left;
    }

    .inner-card-expense.travel-advance {
        background: #1674DF;
    }

        .inner-card-expense.travel-advance p {
            color: #fff !important;
        }

        .inner-card-expense.travel-advance span {
            color: #fff !important;
        }

    .inner-card-expense.outstanding {
        background: linear-gradient(59.4deg, #FFFFFF 6.28%, #FFFFFF 41.72%, #FFF2E0 96.2%);
        color: #fff;
    }

    .inner-card-expense.reportsexpense {
        background: linear-gradient(47.09deg, #FFFFFF 5.73%, #FFFFFF 43.08%, #ECFED7 99.53%);
        color: #fff;
    }

    .inner-card-expense.approvals {
        background: linear-gradient(48.08deg, #FFFFFF 5.1%, #FFFFFF 49.99%, #FFE7E7 102.03%);
        color: #fff;
    }

    .inner-card-expense p {
        font-size: 14px;
        font-weight: 500;
        line-height: 16.94px;
        text-align: left;
        color: #737373;
    }

.reportstable {
    border: 1px solid #E5E5E5;
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    margin-top: 20px;
    min-height: calc(100vh - 347px - 50%);
}

    .reportstable h3 {
        color: #0253F1;
        font-size: 20px;
        font-weight: 700;
        line-height: 24.2px;
        text-align: left;
        margin-bottom: 20px;
    }

.table-tabbing .pillsexpense {
    background: #F0F6F8;
    border-radius: 10px;
    padding: 5px 10px;
    width: fit-content;
    color: #737373;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

    .table-tabbing .pillsexpense.active {
        background: #0253F1;
        color: #fff;
    }

.recipt {
    border: 1px solid #E5E5E5;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    min-height: 300px;
}

.recipt-bg {
    border: 1px solid #E8ECF2;
    background: #F5FAFF;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
}

    .recipt-bg p {
        color: #737373;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.94px;
        text-align: left;
    }

    .recipt-bg img {
        height: 130px;
        width: auto;
        max-width: 130px;
        object-fit: contain;
    }

    .recipt-bg .right {
        height: 152px;
        width: 50%;
        align-items: flex-end;
    }

    .recipt-bg i {
        cursor: pointer;
    }

.recipt h4 {
    color: #0253F1;
    font-size: 20px;
    font-weight: 700;
    line-height: 24.2px;
    text-align: left;
    margin-bottom: 20px;
}


.recipt .recipt-row {
    overflow-y: auto;
    white-space: nowrap;
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

    .recipt .recipt-row .items-recipt {
        width: 400px;
    }

.outstandingcc {
    border: 1px solid #E5E5E5;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    margin-top: 20px;
    height: 624px;
    overflow:hidden;
}

    .outstandingcc.outstandingccinner {
        height: 393px !important;
        overflow:hidden !important;
    }

.outstandingrow {
    box-shadow: 0px 4px 4px 0px #D6D6D640;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
    /*cursor: pointer;*/
}

.outstandingcc h4 {
    color: #0253F1;
    font-size: 20px;
    font-weight: 700;
    line-height: 24.2px;
    text-align: left;
    margin-bottom: 20px;
}

.theme-bg-box {
    border: 1px solid #E5E5E5;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px;
}

.detailsexpense .card {
    background: #DFE3F7;
    padding: 10px;
    margin-bottom: 6px;
}

.filedrop {
    border: 1px dashed #0253F1;
    padding: 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #444746;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
}

.attachementdrop {
    border: 1px solid #E5E5E5;
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 10px;
}

.remove-it {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    position: absolute;
    right: -5px;
    top: -5px;
}

.expense-sum {
    background: #F9F9F9;
    padding: 10px;
    color: #1674DF;
    font-weight: 600;
    text-align: right;
    width: 100%;
    display: block;
}

    .expense-sum.collapsed i {
        transform: rotate(180deg);
    }

.receiptdrop {
    border: 1px dashed #1674DF;
    border-radius: 6px;
    padding: 10px;
    position: relative;
    margin-bottom: 20px;
    text-align: center;
}

    .receiptdrop input {
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

.headingback {
    padding: 10px;
    background: #E3F8FF;
}

.overflow-y-auto {
    overflow-y: auto;
    overflow-x: hidden;
}

.mxht-300 {
    max-height: 300px;
}

.mxht-270 {
    max-height: 270px;
}

.minht300 {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 20px;
    height: 320px;
}

@media only screen and (min-width: 1200px) and (max-width:1400px) {
    .w-100-sm {
        width: 100% !important;
    }

    .flex-col-sm {
        flex-flow: column;
    }
}

.mx-ht-90p {
    max-height: calc(100% - 50px)
}

.back-white {
    background: #fff;
}

.top-75 {
    top: 75px;
}

.theme-text-dark {
    color: #002e62;
}

.sidebar-mob-coll {
    display: none;
}

.kt-aside--minimize .sidebar-mob-coll {
    display: block;
    height: 36px;
}

.sidebar-mob-exp {
    display: block;
    height: 50px;
}

.kt-aside--minimize .sidebar-mob-exp {
    display: none;
}
@media only screen and (max-width: 786px) {
    .sidebar-mob-exp{
        display:block !important;

    }
    .sidebar-mob-coll {
        display: none !important;
    }
}





.kt-aside--minimize .kt-aside__brand {
    padding: 0px 7px;
}
.pricemulticityouter {
    display: flex;
    flex-flow: column;
    justify-content: end;
    align-items: end;
    margin-bottom: 20px;
}
.pricemulticity {
    width: 200px;
    align-items: end;
    display: flex;
    flex-flow: column;
    justify-content: end;
    color:#000;
}
    .pricemulticity h3 {
        font-size: 18px;
        font-weight: 700;
        
    }
.multicity {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    padding: 10px;
    border-radius: 8px;
    width: 200px;
}

    .multicity h4 {
        color: #1F2937;
        font-size: 20px;
        font-weight: 700;
        line-height: 24.2px;
        text-align: center;
    }

    .multicity.select {
        background: #C0D9F5;
    }

ul.uib-datepicker-popup li button.btn-info {
    color: #0abb87 !important;
    background-color: #fff !important;
    border-color: #0abb87 !important;
}

    ul.uib-datepicker-popup li button.btn-info:hover {
        color: #fff !important;
        background-color: #0abb87 !important;
    }

ul.uib-datepicker-popup li button.btn-success {
    color: #fff !important;
    background-color: #0253f1 !important;
    border-color: #0253f1 !important;
}

    ul.uib-datepicker-popup li button.btn-success:hover {
        color: #0253f1 !important;
        background-color: #fff !important;
    }

.bg-white-pl {
    background: #fff;
}

.collapsebtndesign {
    width: 100%;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

    .collapsebtndesign.collapsed {
        border-bottom-left-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
    }


.ht-500 {
    height: 500px;
}

.ht-full {
    height: calc(100vh - 300px)
}

.whitespc-nowrp {
    white-space: nowrap;
}

.line-ht-36 {
    line-height: 36px;
}

.ht-22 {
    height: 22px;
}

.ht-560 {
    height: 560px;
}

.gotoinv {
    right: 25px;
    color: #0253f1 !important;
    font-weight: 500;
    text-decoration: underline !important;
    position: absolute;
    cursor: pointer;
    z-index: 10;
}

.mx-ht-500 {
    max-height: 500px;
}

.bg-highlight {
    background: #E2EBFE;
}

.input-mask {
    font-family: 'Courier New', Courier, monospace !important
}

.text-transform {
    text-transform: capitalize;
}

.cursor-default {
    cursor: default !important;
}

.expense-status {
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #fff;
    border: none;
    width: 124px !important;
    display: block;
    text-align: center;
    margin: auto;
    border-radius: 20px;
}

    .expense-status.inprogress {
        background: #0A85BD;
    }

    .expense-status.superapp-pending {
        background: #55679C;
    }

    .expense-status.apapp-pending {
        background: #A0D660;
        color: #1F3801;
    }

    .expense-status.apapproved {
        background: #FF9900;
    }

    .expense-status.rejected {
        background: #F1462F;
    }

    .expense-status.paid {
        background: #9384F7;
    }

.line-ht-32 {
    line-height: 32px;
}

.line-ht-40 {
    line-height: 40px;
}

.employeeAddress {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.linethrough {
    text-decoration: line-through 2px;
}

.arrow-steps.rejectedstatus .step {
    width: 16% !important;
}

    .arrow-steps.rejectedstatus .step.rejectpill.current:after {
        border-left: 35px solid #F1462F;
    }

    .arrow-steps.rejectedstatus .step.rejectpill.current {
        background: #F1462F;
    }

.m-w-c3 {
    min-width: 209px;
}
.min-w-sm{
    min-width:80px;
}
.w-200p{
    width:200px;
}
.clsLoadingMsg {
    font-weight: bold;
    color: #000;
    font-size: 18px;
}
.m-w-c4 {
    min-width: 150px;
}
.m-w-c5 {
    min-width: 123px;
}
.m-w-c6 {
    min-width: 105px;
}
.m-w-c7 {
    min-width: 90px;
}

.allocatetable tr td:first-child,
.allocatetable tr th:first-child {
    position: sticky;
    left: 0;
    z-index: 99;
    min-width:67px;
}

.allocatetable tr td:nth-child(2),
.allocatetable tr th:nth-child(2) {
    position: sticky;
    left: 67px; /* Adjust based on the width of the first column */
    z-index: 1;
}

.allocatetable tr td:nth-child(3),
.allocatetable tr th:nth-child(3) {
    position: sticky;
    left: 123px; /* Adjust based on the width of the first column */
    z-index: 1;
}

.allocatetable tr td:nth-child(4),
.allocatetable tr th:nth-child(4) {
    position: sticky;
    left: 273px; /* Adjust based on the width of the first column */
    z-index: 1;
}

.allocatetable tr td:nth-child(5),
.allocatetable tr th:nth-child(5) {
    position: sticky;
    left: 423px; /* Adjust based on the width of the first column */
    z-index: 1;
}

.allocatetable tr td:nth-child(6),
.allocatetable tr th:nth-child(6) {
    position: sticky;
    left: 543px; /* Adjust based on the width of the first column */
    z-index: 1;
}

.allocatetable tr td:nth-child(7),
.allocatetable tr th:nth-child(7) {
    position: sticky;
    left: 663px; /* Adjust based on the width of the first column */
    z-index: 1;
}
.w-d-100{
    width:100px !important;
}
.h-100-web{
    height:100% !important;
}
@media only screen and (min-width: 786px) 
{
    .arrow-steps .step:first-child:before {
        border: none;
    }
}

@media only screen and (max-width: 786px) {
    .arrow-steps{
        margin-top:40px !important;
    }
    .arrow-steps .step {
        width: 90% !important;
    }
    .d-none-mob {
        display: none;
    }

    .progress-step:not(:last-child)::after {
        top: 29px;
    }

    .hotel-list-right .inner {
        align-items: center !important;
    }

    .hotel-list-inner {
        text-align: center;
    }
    .inv-tab .invoice-card .card-heading h4 {
        font-size: 10px !important;
    }
    .kt-header {
        position: fixed;
        top: 42px;
        right: 0;
        left: 0;
        z-index: 97;
    }

    .kt-header--fixed.kt-subheader--fixed.kt-subheader--enabled .kt-wrapper {
        padding-top: 100px !important;
    }

    .overflow-hidden-mob {
        overflow: unset !important;
    }

    .kt-aside-menu .kt-menu__nav {
        height: calc(100vh - 315px) !important;
    }
    .chat-msg-extend {
        height: calc(100vh - 490px) !important;
    }
    .gotoinv {
        right: 12px;
        top: 61px;
    }
}

.textAreaFormat {
    white-space: pre-wrap;
}
.chef-mobile {
    height: 180px !important;
    bottom: 21px;
    left: 15px;
}
.two-arrow-mobile {
    transform: rotate(90deg);
}
.form-control:focus{
background:#fff !important;

}
.toggle-container {
    display: flex;
    border: 2px solid #0253f1;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    cursor: pointer;
    user-select: none;
    font-family: Arial, sans-serif;
}

.toggle-option {
    flex: 1;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    transition: background 0.3s, color 0.3s;
}

.toggle-container .active {
    background: #0253f1;
    color: white;
}

.toggle-container .inactive {
    background: white;
    color: #0253f1;
}
/* Panel Header Toggle Button */
.panel-toggle {
    background-color: #fff;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    padding: 10px;
}

/* Badge Styling */
.label {
    font-size: 12px;
    padding: 5px 8px;
}

.label-approved {
    background-color: orange;
    color: white;
}

.label-rejected {
    background-color: red;
    color: white;
}

/* Panel Body Custom */
.panel-body-custom {
    background: #fff;
    border-radius: 5px;
}

/* Panel Details */
.panel-details {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

/* Sidebar Filter Panel */
.sidebar-filter {
    position: fixed;
    top: 0;
    left: -300px; /* Hidden by default */
    width: 280px;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    padding: 20px;
    transition: 0.3s ease-in-out;
    z-index: 999;
}

    .sidebar-filter.show {
        left: 0; /* Slide in */
    }
/* General Panel Styles */
.panel {
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
    margin-bottom: 10px;
}

/* Panel Heading */
.panel-heading {
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 5px;
    cursor: pointer;
}

/* Accordion Toggle Link */
.panel-title a {
    text-decoration: none;
    color: #333 !important;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

   

/* Toggle Icon */
.toggle-icon {
    transition: transform 0.3s ease-in-out;
    font-size: 18px;
}

/* Rotate icon when active */
.rotate {
    transform: rotate(180deg);
}

/* Status Badge */
.panel .status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width:120px;
}

.panel .approved {
    background: #FF9900;
    color: white;
}

.panel .rejected {
    background: #F1462F;
    color: white;
}
.panel .fullycoded {
    background: #A0D660;
    color: #1F3801;
}
.panel .pending {
    background: #0A85BD;
    color: #fff;
}
.panel .email {
    background: #bcaaa4;
    color: #000;
}
/* Panel Body */
.panel-body {
    background: #fff;
    padding: 15px;
    border-radius: 5px;
}

/* Responsive Details */
.panel .detailss {
    font-size: 13px;
    color: #555; 
    white-space:nowrap;
}
.heading-panel {
    font-size: 15px;
   
    color: #000;
    /* font-size: 20px; */
    font-weight: 400;
    line-height: 29px;
}
.panel-body p{
    color:#000;
}
.heading-section i.fa-caret-down {
    transition: transform 0.3s ease-in-out;
}

/* Rotate arrow when collapse is shown */
.heading-section[aria-expanded="true"] i.fa-caret-down {
    transform: rotate(180deg);
}

.split-div-inner {
    border-left: 2px solid #0253f1;
}
.w-75p{
    width:75px;
}
.filter-container, .action-container {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
    /* Responsive Filter Section */
    .filter-container .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .filter-container .col {
        min-width: 150px;
    }

.accordion-button {
    font-size: 14px;
    padding: 10px;
}
/* Filter Button */
.filter-btn {
    position: fixed;
    top: 116px;
    height: 43px;
    width: 43px;
    right: 20px;
    z-index: 100;
    background: #0253F1 !important;
    color: white;
    border: none;
    padding: 10px 12px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Sliding Filter Panel */
.filter-container,.action-container,.message-container {
    position: fixed;
    top: 0;
    left: -360px; /* Hidden by default */
    width: 340px;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    padding: 20px;
    transition: 0.3s ease-in-out;
    z-index: 999;
}
    .message-container{
        width:300px !important;
    }

    .filter-container.show, .action-container.show, .message-container.show {
        left: 0; /* Slide in */
    }

.close-filter {
    background: none;
    border: none;
    font-size: 20px;
    float: right;
    cursor: pointer;
}

.filter-scroll-cont {
    height: 80vh;
    overflow: auto;
    padding-right: 18px;
}
.bottom-btn {
    position: sticky;
    left: 0px;
    right: 0px;
    width: 100%;
    bottom: 0px;
    background: #0253f1;
    border: none;
    padding: 4px;
}
.sidpopupscroll {
    overflow-y: auto;
    height: 50vh;
}
.inv-tab ul li.active .card-heading {
    background: #cfddf1;
}
.inv-tab .invoice-card .card-heading h4 {
    font-size:12px;
}
.inv-tab .invoice-card .card-heading{
    height:43px;
}
.inv-tab .invoice-card {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.cardinvoice {
    border-bottom: 1px solid #dee2e6;
}
    .cardinvoice p, .cardinvoice span {
        word-break: break-all;
    }

.text-decoration-underline{
    text-decoration:underline;
}
.h-400{
    height:400px;
}
.gap-5{
    gap:10px;
}
.ht-400{
    height:400px;
}
.profile-table table {
    width: 100%;
    table-layout: auto; /* Allow columns to size naturally */
    border-collapse: collapse;
}

.profile-table td {
    word-break: break-word; /* Prevent overflow */
    white-space: normal; /* Allow wrapping */
    overflow-wrap: break-word; /* Safe wrap if long */
    padding: 8px;
    vertical-align: top;
    font-size: 10px;
}

    .profile-table td:first-child, .profile-table th:first-child {
        width: 40%; /* Optional: gives space for labels like 'Email Address' */
    }
.mn-ht-300{

min-height:300px;
}
.disable-card {
    opacity: 0.5
}
.panel:has(.collapse.show) .toggle-icon {
    transform: rotate(180deg);
}
.ht-66
{
    height:66px;
}
.word-wrap-table tr td {
    word-break: break-word;
}
.cRed {
    color: #ff0000 !important;
}

#asideOverlay, #noteOverlay, #messageOverlay, #filterOverlay1,
#filterOverlay2, #mobileOverlay, #reportFilterOverlay, #sidenavOverlay, #actionPanelOverlay, #expenseOverlay,#restaurantOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
}

@media (min-width: 769px) {
    #asideOverlay, #noteOverlay, #messageOverlay, #filterOverlay1,
    #filterOverlay2, #mobileOverlay, #reportFilterOverlay, #sidenavOverlays, #actionPanelOverlay, #expenseOverlay, #restaurantOverlay {
        display: none !important; /* never show on desktop */
    }
}

#mySidenav, #actionpanel, #expenseOverlay {
    z-index: 999; /* ensure it's above the overlay */
    position: fixed; /* required if not already */
}
.mx-wd-120{
    max-width:120px !important;
}
.w-40 {
    width: 40% !important;
  
}

.w-60 {
    width: 60% !important;
}
.mx-wd-60{
    max-width:60%;
    min-width:60%;
}
/*New Workflow start*/
#workflow, #workflowBlank {
    display: flex;
    gap: 80px;
    /*padding: 50px;*/
    position: relative;
    align-items: center;
   margin-bottom:20px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.box {
    background: #e0e0e0;
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 140px;
   /* flex-flow: column;
    align-items: center;
    display: flex;*/
}

.employee {
    background: #c7f0d8;
}

.employeesecond {
    background: #e0e0e0;
}

.approval {
    background: #f0c674;
}

.finalrespon {
    background: #B0BEC5;
}

.final {
    background: #d8b4f8;
}

.encirclenmbr {
    height: 21px;
    width: 21px;
    display: inline-block;
    background: #3498db;
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    font-weight: 600;
}
.box img {
    height: 35px;
    width: 35px;
    border-radius: 50%;
}
.forMobile{
    padding:20px 0px !important;
    max-width:66vw !important;
}
.mx-wd-100{
    max-width:100px;
}
.min-h {
    min-height: 45px;
}
/*New Workflow end*/
.ticker-input-wrapper {
    position: relative;

}

    .ticker-input-wrapper input {
        width: 100%;
        padding: 8px 10px;
        font-size: 14px;
        box-sizing: border-box;
        position: relative;
      
        z-index: 2;
    }

.ticker-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    color: #666;
    font-weight: 500;
    font-size: 12px;
}

    .ticker-placeholder span {
        display: inline-block;
        animation: scroll-left 6s linear infinite;
    }

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Hide the placeholder when input has value or is focused */
.ticker-input-wrapper input:focus + .ticker-placeholder,
.ticker-input-wrapper input:not(:placeholder-shown) + .ticker-placeholder {
    display: none;
}
.gap-10{
    gap:10px;
}
.mobile-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.mobile-tooltip-toggle {
    display: none;
}

.mobile-tooltip-icon {
    cursor: pointer;
    font-size: 18px;
}

.mobile-tooltip-box {
    display: none;
    position: absolute;
    top: 125%;
    left: 0;
    background-color: #fdf5e6;
    color: #000;
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    max-width: 220px;
    z-index: 1000;
    white-space: normal;
}

.mobile-tooltip-toggle:checked + .mobile-tooltip-icon + .mobile-tooltip-box {
    display: block;
}
@media (min-width: 1400px) {
    .modal-dialog.modal-xl {
        max-width: 1200px !important;
    }
}
.scroll-locked,
.scroll-locked body,
.scroll-locked html {
    overflow: hidden !important;
    height: 100% !important;
}