/*:root {
    --Gray: #74788d;
    --LightGray: #ced4da;
    --Green: #25507c;
    --LightGreen: #77bf9e;
    --SoftGreen: #e0fff1;
    --DarkGreen: #0f8d52;
    --white: #ffffff;
    --WhiteBody: #f5f6f8;
    --WhiteShade: #f1f1f1;
    --White50: rgba(255, 255, 255, 0.5);
    --NormalShadow: #ebebeb;
    
}*/
:root {
    --Gray: #74788d;
    --LightGray: #ced4da;
    --Green: #25507c;
    --LightGreen: #d7ebff;
    --SoftGreen: #d7ebff;
    --DarkGreen: #0f8d52;
    --white: #ffffff;
    --WhiteBody: #f5f6f8;
    --WhiteShade: #f1f1f1;
    --White50: rgba(255, 255, 255, 0.5);
    --NormalShadow: #ebebeb;
    --Black: #000;
    --Pink: #D61A7A;
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

@font-face {
    font-family: 'fontawesome-webfont';
    src: url('fontawesome/fonts/fontawesome-webfont.ttf') format('truetype');
}

.bg-success {
    background: var(--Green) !important;
}

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

p, a, span, ul, li, ol {
    font-weight: 400;
    line-height: 24px;
    font-size: 14px;
}

.fw-600, b, strong {
    font-weight: 600;
}

.b4-radius {
    border-radius: 10px;
}
/*Login Page Start*/
.takshakLogo {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 110px;
}

.themeBtn, .themeBtn:hover, .themeBtn:focus {
    background: var(--Pink) !important;
    border-color: var(--Pink) !important;
}

.loginBg {
    background: url('../img/loginBg.jpg') no-repeat;
    background-size: cover;
}

.dtblSort th, dtblSort td {
    text-align: left;
}

.loginPage a {
    color: var(--Gray) !important;
    text-decoration: none;
}

    .loginPage a.Signupnow {
        color: var(--Green) !important;
        text-decoration: none;
        font-weight: 600;
    }

.loginPage .form-control {
    border: 1px solid var(--LightGray);
    padding: 8px;
    height: 44px;
    border-radius: 2px;
}

.loginPage label {
    font-weight: 600;
}

.loginBg::before {
    background: rgb(0 2 142 / 62%);
    content: "";
    left: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
    width: 100%;
}

.Qoutes p span {
    font-size: 20px;
    font-style: italic;
    line-height: 34px;
}

.Qoutes p i {
    font-size: 24px;
    line-height: 34px;
    margin: 5px;
}

.QuarterlyOverview .owl-nav {
    display: none !important;
}

.QuarterlyOverview .owl-dots span {
    display: block;
    width: 15px;
    height: 15px;
    background: var(--LightGreen);
    border: solid 1px var(--DarkGreen);
    border-radius: 100%;
    margin: 3px;
}

.QuarterlyOverview .owl-dot.active span {
    background: var(--DarkGreen) !important;
}
/*Login Page End*/

/*Dashboard Start*/

.adminBody {
    background: var(--WhiteBody);
}

.MainPanel {
    height: calc(100vh - 16px);
    width: 100%;
    overflow: hidden;
}

.sideBar {
    width: 70px;
    top: 0px;
    background: var(--white);
    border-radius: 10px;
    height: calc(100% - 0px);
    padding: 10px 0px;
    transition: all .2s;
    left: 0px;
    position: relative;
}

.profileBox {
    padding: 20px 0px;
    text-align: center;
    background: var(--SoftGreen);
    margin: 15px;
    border-radius: 10px;
}

    .profileBox img {
        border-radius: 100%;
        max-width: 54px;
        border: solid 1px var(--WhiteShade);
        padding: 3px;
    }

.sideBar .navbar-nav .dropdown-menu {
    position: absolute;
    left: 100%;
    top: 0px;
    padding: 0px !important;
    margin: 0px;
    border-radius: 0px !important;
}

    .sideBar .navbar-nav .dropdown-menu .dropdown-menu {
        transform: translate(0px, -50%);
    }

.nav-link.show, .dropdown-item.show {
    background: #214570;
}

.nav-link.profileDropdown.show {
    background: none !important;
}

.nav-link.show > span, .sideBar .dropdown-item.show > span, .sideBar .dropdown-item.show.dropdown-toggle::after {
    color: #fff !important;
}


.sideBar .dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
}

    .sideBar .dropdown-toggle > span {
        font-size: 12px;
        font-weight: 600;
        color: #000;
    }

        .sideBar .dropdown-toggle > span > span.nav-title {
            display: none !important;
        }

.sideBar .navbar .navbar-nav > .dropdown > .dropdown-toggle {
    padding: 8px 15px !important;
    justify-content: center;
}

    .sideBar .navbar .navbar-nav > .dropdown > .dropdown-toggle > span i {
        font-size: 24px;
    }

/*.sideBar .navbar .navbar-nav > .dropdown:hover > .dropdown-menu {
    display: block !important;
}*/


.sideBar .dropdown-item > span {
    font-size: 12px;
    font-weight: 600;
    color: #000;
}

.sidebarImg {
    position: absolute;
    bottom: 15px;
}


.mainContent {
    width: calc(100% - 70px);
}

    .mainContent > .container-fluid.py-4 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

        .mainContent > .container-fluid.py-4 > .row {
            align-items: center !important;
        }


.searchform .form-control {
    border-radius: 20px;
    padding-right: 20px;
    min-width: 350px;
    color: var(--white);
    background: var(--White50);
    border: solid 1px #000000;
}

    .searchform .form-control::placeholder {
        color: var(--white);
    }

.searchform i {
    right: 10px;
    top: 10px;
}



.fyYear {
    border-radius: 10px;
    padding-right: 20px;
    max-width: 130px;
    color: var(--white);
    background: var(--White50);
    border: solid 1px #000000;
}

    .fyYear option {
        color: #333;
    }

.sideBarCollapse {
    width: 0px;
    padding: 0px;
    transition: all .2s;
}

    .sideBarCollapse > * {
        display: none;
    }

.mainContentFull {
    width: 100%;
    transition: all .3s;
}

.profileDropdown img {
    border-radius: 100%;
    max-width: 32px;
    max-height: 32px;
    border: solid 1px var(--WhiteShade);
    padding: 1px;
}

.breadcrumb {
    margin: 0px;
}

    .breadcrumb .breadcrumb-item a {
        color: var(--Gray);
        text-decoration: none;
    }

    .breadcrumb .breadcrumb-item.active {
        color: var(--Green) !important;
        text-decoration: none;
    }

.removeAfter::after {
    display: none !important
}

.iconMenu {
    font-size: 24px;
}

.statics-Boxs {
    width: 100%;
}


.statics-items {
    width: calc(100% / 5 - 10px);
    margin-right: 10px;
    box-shadow: 0px 5px 5px var(--NormalShadow);
    text-decoration: none !important;
    transition: all .2s;
    margin-top: 10px;
}

.statics-Boxs2 .statics-items {
    width: calc(100% / 2 - 10px) !important;
}

    .statics-Boxs2 .statics-items:nth-of-type(2n) {
        margin-right: 0px !important;
    }

.statics-Boxs4 .statics-items {
    width: calc(100% / 4 - 10px) !important;
}

    .statics-Boxs4 .statics-items:nth-of-type(4n) {
        margin-right: 0px !important;
    }

.statics-items:hover {
    box-shadow: 5px 5px 5px #dbdbdb;
}

.statics-items:nth-of-type(5n) {
    margin-right: 0px;
}

.statics-items h6, .statics-items h6 span {
    font-size: .75em;
}

.progress-sm {
    height: 5px;
}

.statics-items-icons {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: #fff;
    font-size: 24px;
}

.statics-items-content {
    width: calc(100% - 44px);
    padding-left: 10px;
}

.statics-items-1 .statics-items-icons {
    background: #4a81d4;
}

.statics-items-2 .statics-items-icons {
    background: #1abc9c;
}

.statics-items-3 .statics-items-icons {
    background: #f7b84b;
}

.statics-items-4 .statics-items-icons {
    background: #43bfe5;
}

.statics-items-5 .statics-items-icons {
    background: #f2677c;
}

.statics-items-6 .statics-items-icons {
    background: #a067f2;
}

.statics-items-7 .statics-items-icons {
    background: #7fb695;
}

.statics-items-8 .statics-items-icons {
    background: #af609b;
}

.statics-items-9 .statics-items-icons {
    background: #5653ab;
}

.statics-items-10 .statics-items-icons {
    background: #d443e5;
}

.Graph-area .dropdown-menu {
    padding: 0px !important;
    border-radius: 0px !important;
}

.dropdown-menu .dropdown-header {
    background: var(--SoftGreen);
    color: var(--Green)
}

.single-items {
    width: calc(100% / 1 - 0px);
    margin-top: 20px;
    box-shadow: 0px 5px 5px var(--NormalShadow);
}

.threeBox-itemsNew {
    width: calc(100% / 3 - 10px);
    margin-top: 10px;
    margin-right: 10px;
}

.threeBox-items {
    width: calc(100% / 3 - 10px);
    margin-top: 10px;
    margin-right: 10px;
    box-shadow: 0px 5px 5px var(--NormalShadow);
}

    .threeBox-items div:not(.hide):nth-of-type(3n) {
        margin-right: 0px !important;
    }

    .threeBox-items table tr td b {
        font-size: 14px;
    }

    .threeBox-items table tr td {
        vertical-align: middle !important;
    }

.border-top {
    border-top: dashed 1px var(--LightGray);
}

.TowBox-items {
    width: calc(100% / 3 - 10px);
    margin-top: 20px;
    margin-right: 10px;
    box-shadow: 0px 5px 5px var(--NormalShadow);
}

    .TowBox-items:nth-child(2n+2) {
        margin-right: 0px;
    }

    .TowBox-items table tr td b {
        font-size: 14px;
    }

    .TowBox-items table tr td {
        vertical-align: middle !important;
    }

.overFlowScroll {
    overflow: auto;
    height: calc(100% - 172px);
}
/*
    .overFlowScroll::-webkit-scrollbar, body::-webkit-scrollbar {
        display: none !important;
    }*/

/* width */
/*.table-responsive::-webkit-scrollbar {
    width: 5px !important;
    display: block !important;
    height:5px !important;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}


.table-responsive::-webkit-scrollbar-thumb {
    background: #888 !important;
}

    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555 !important;
    }*/
.table-responsive {
    padding-bottom: 5px !important;
}




.RecentActivity li {
    position: relative;
    padding-left: 50px;
    padding-bottom: 20px;
}

    .RecentActivity li::before {
        position: absolute;
        height: 100%;
        width: 3px;
        background: var(--LightGreen);
        content: "";
        left: 25px;
    }

    .RecentActivity li::after {
        position: absolute;
        height: 100%;
        width: 15px;
        height: 15px;
        background: var(--LightGreen);
        content: "";
        left: 19px;
        background: #fff;
        border: solid 3px var(--Green);
        border-radius: 100%;
        top: 5px;
    }

    .RecentActivity li span {
        color: #74788d !important
    }

    .RecentActivity li p {
        color: #495057 !important;
        margin-bottom: 3px;
    }

    .RecentActivity li b {
        color: var(--Green) !important
    }

.RecentProjects {
    max-height: 350px;
    overflow: auto;
}

    .RecentProjects li {
        position: relative;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }

        .RecentProjects li::before {
            position: absolute;
            height: 100%;
            width: 3px;
            background: var(--LightGreen);
            content: "";
            left: 25px;
        }


        .RecentProjects li span {
            color: #74788d !important
        }

        .RecentProjects li p {
            color: #495057 !important;
            margin-bottom: 3px;
        }

        .RecentProjects li b {
            color: var(--Green) !important
        }

        .RecentProjects li span.shortname {
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--SoftGreen);
            width: 50px;
            height: 50px;
            border-radius: 100%;
            color: var(--Green);
            position: relative;
            z-index: 1;
            margin-right: 20px;
        }

        .RecentProjects li div {
            width: calc(100% - 50px)
        }

.projectstatus {
    border-radius: 10px;
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    margin-top: 15px;
    border: 0px;
    outline: none !important;
}
/*******Milestone Status******/
.status-success {
    background: #c2ffe3;
    color: #0f8d52;
}

.status-On-Process {
    background: #fffec2;
    color: #878b36;
}

.status-overdue {
    background: #ffefef;
    color: #bf2626;
}

.status-Yet-to-start {
    background: #f0d3ff;
    color: #8336ab;
}

/*******Invoice Status*****/
.status-created-invoice {
    background: #f16c20;
    color: #ffffff;
}

.status-submitted-invoice {
    background: #cd83b9;
    color: #ffffff;
}

.status-inaction-invoice {
    background: #0d3c55;
    color: #ffffff;
}

.status-inobjection-invoice {
    background: #1395ba;
    color: #ffffff;
}

.status-hold-invoice {
    background: #0f5b78;
    color: #ffffff;
}

.status-fwd-invoice {
    background: #f7b84b;
    color: #ffffff;
}

.status-process-invoice {
    background: #1abc9c;
    color: #ffffff;
    cursor:default;
}

.status-process-payment-invoice {
    background: #b64949;
    color: #ffffff;
    cursor: default;
}

.status-paid-invoice {
    background: #a2b86c;
    color: #ffffff;
    cursor: default;
}

/*******Payment Status******/
.status-full {
    background: #c2ffe3;
    color: #0f8d52;
}

.status-partial {
    background: #f0d3ff;
    color: #8336ab;
}

/*******Outstanding Invoice Delayed Duration*****/
.delay-high-invoice {
    background: #000000;
    color: #ffffff;
}

.delay-medium-invoice {
    background: #ff6a00;
    color: #ffffff;
}

.delay-low-invoice {
    background: #ff0000;
    color: #ffffff;
}

.progress-bar-project {
    background: var(--Green);
}

.projectListcard {
    border: 0px !important;
    box-shadow: 0px 5px 5px var(--NormalShadow);
    margin-bottom: 27px;
    margin-bottom: 15px;
}

.copyright {
    font-size: 12px;
    color: #74788d;
    margin: 0px;
    padding: 9px 0px;
}

    .copyright a {
        font-size: 12px;
        color: var(--Green);
        text-decoration: none;
    }

a.projectListName {
    text-decoration: none;
}

    a.projectListName h5 {
        color: #333
    }

    a.projectListName span {
        color: #a8a8a8;
    }



.ProjectTags span {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 15px;
    border-radius: 10px;
    background: var(--SoftGreen);
    color: var(--Green);
}

.dateBudget {
    width: calc(100% / 5 - 10px);
    margin-bottom: 10px;
    margin-right: 10px;
    border: solid 1px #efefef;
    padding: 10px;
    box-shadow: 0px 2px 4px #f1f1f1;
}

    .dateBudget p {
        color: #74788d;
    }

.TeamMember span {
    display: inline-block;
    border: solid 1px #e6e6e6;
    color: #74788d;
    padding: 5px 7px;
    position: relative;
    cursor: pointer;
    margin-right: 4px;
    margin-bottom: 4px;
}

.apexcharts-toolbar {
    display: none !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgb(240 247 255) !important;
}

.TabDesign {
    border: 0px;
}

    .TabDesign li {
        margin-right: 5px;
    }

        .TabDesign li button {
            display: flex;
            align-items: center;
            color: #495057;
            background: var(--SoftGreen) !important;
            border-radius: 10px !important;
            padding: 10px 10px !important
        }

            .TabDesign li button i {
                margin-right: 8px;
                font-size: 26px;
            }

            .TabDesign li button b {
                display: block;
                font-size: 14px;
                white-space: nowrap;
            }

            .TabDesign li button span {
                text-align: left;
                padding-left: 0px;
                line-height: 18px;
                font-size: 13px;
            }


.TabDesigntab .tab-pane {
    padding-top: 15px;
}

.TabDesign li button.active {
    background: var(--Green) !important;
    color: #fff !important;
}

.equalColumn4 {
    width: calc(100% / 4);
    margin-bottom: 20px;
}

    .equalColumn4 p.mt-1 {
        margin: 0px;
    }

.card-header {
    background: linear-gradient(0deg, #c9c9c9, #ffffff);
}

.ViewWorkOrderFiles a {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 5px 15px;
    border-radius: 10px;
    background: #fff;
    color: var(--Green);
    border: solid 1px var(--Green);
    text-decoration: none;
}


    .ViewWorkOrderFiles a.haveAttachement {
        display: inline-block;
        margin-right: 10px;
        padding: 5px 15px;
        border-radius: 10px;
        background: var(--SoftGreen);
        color: var(--Green);
        text-decoration: none;
    }

        .ViewWorkOrderFiles a.haveAttachement:hover {
            background: var(--Green);
            color: var(--white);
        }

.ActionBtn a {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    color: var(--Green);
    border: solid 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 2px;
}

    .ActionBtn a:hover {
        background: var(--Green);
        border: solid 1px var(--Green);
        color: #fff !important;
    }

    .ActionBtn a img {
        width: 20px !important;
        max-height: 20px !important;
    }



tr.inProgressTr td {
    background: #feffcd !important;
}

tr.CompletedTr td {
    background: #d9ffed !important;
}

.projectListDetails > div {
    padding: 10px;
    /* border-left: solid 1px #dbdbdb; */
    width: calc(100% / 5 - 10px);
    margin: 5px;
    box-shadow: 0px 0px 3px #e5e0e0;
    min-height: 81px;
}

.projectstatuslagend {
    position: relative;
    margin-right: 25px;
    padding-left: 20px;
}

.projectstatuslagend::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 4px;
    width: 16px;
    height: 16px;
}

.ActiveOrders::before {
    background: #1abc9c;
}

.OrderstobeExpired::before {
    background: #f2677c;
}

.OrderPendingforRenewal::before {
    background: #f7b84b;
}

.OrderPendingforClosure::before {
    background: #43bfe5;
}

.OrdersExpire::before {
    background: #4a81d4;
}

.PriorityTasks::before {
    background: #ffd5db;
    border: solid 1px #000;
}

.ExpiredModules::before {
    background: #e8f8f5;
}

.SelfTask::before {
    background: #d0ddf5;
    border: solid 1px #000;
}

.InActiveResources::before {
    background: #ffd5db;
}

.projectstatuslagend.onlyRiskRegistered {
    background: #ffeded;
    padding-right: 5px;
}

.projectstatuslagend.TemporaryProjectRisk {
    background: #d5e3d8;
    padding-right: 5px;
}

.projectListcard.ActiveOrders {
    border-left: solid 10px #1abc9c !important;
}

.projectListcard.OrderstobeExpired {
    border-left: solid 10px #f2677c !important;
}

.projectListcard.OrderPendingforRenewal {
    border-left: solid 10px #f7b84b !important;
}

.projectListcard.OrderPendingforClosure {
    border-left: solid 10px #43bfe5 !important;
}

.projectListcard.OrdersExpire {
    border-left: solid 10px #4a81d4 !important;
}



#ProOverViewCollapse .accordion-button, #ProOverViewCollapse .accordion-button:focus {
    outline: none !important;
    font-weight: 600;
    box-shadow: none !important;
}

    #ProOverViewCollapse .accordion-button i {
        margin-right: 10px;
    }


.radioGroupsDesign label {
    margin-bottom: 10px;
}

.radioGroupsDesign label {
    border: solid 1px #e6e6e6;
    color: #74788d;
    padding: 10px;
    position: relative;
    cursor: pointer;
    margin-right: 4px;
}

    .radioGroupsDesign label input[type=radio] {
        position: absolute;
        visibility: hidden;
    }

    .radioGroupsDesign label:has(input[type=radio]:checked) {
        background: var(--Green);
        color: var(--white);
    }

        .radioGroupsDesign label:has(input[type=radio]:checked)::after {
            position: absolute;
            width: 16px;
            height: 16px;
            background: var(--Green);
            content: "";
            transform: rotate(45deg);
            bottom: -4px;
            left: 46%;
        }

    .radioGroupsDesign label span {
        background: var(--SoftGreen);
        position: relative;
        top: -20px;
        display: inline-block;
        padding: 0px 4px;
        border-radius: 10px;
        color: var(--Green);
    }


@media(max-width:1440px) {
    .projectListDetails > div {
        width: calc(100% / 4 - 10px);
    }
}

@media(max-width:1024px) {
    .statics-Boxs {
        justify-content: flex-start !important;
    }

    .statics-items {
        width: calc(100% / 3 - 10px);
    }

    .projectListDetails > div {
        width: calc(100% / 3 - 10px);
    }
}

@media(max-width:991px) {
    .statics-Boxs {
        justify-content: flex-start !important;
    }

    .statics-items, .statics-Boxs4 .statics-items {
        width: calc(100% / 2 - 10px) !important;
        margin-bottom: 10px !important;
    }

    .threeBox-items {
        width: calc(100% / 1 - 0px);
        margin: 15px 0px 0px 0px !important;
    }

    .dateBudget {
        width: calc(100% / 5 - 10px);
    }

    .projectListDetails > div {
        width: calc(100% / 2 - 10px);
    }
}

@media(max-width:640px) {
    .statics-items {
        width: calc(100% / 1 - 0px);
        margin-right: 0px !important;
    }

    .createNewOption {
        display: none !important;
    }

    .mainContent {
        width: calc(100% - 70px);
    }

    .TabDesign, .radioGroupsDesign {
        overflow: auto;
        display: flex;
        flex-wrap: nowrap !important;
    }

        .TabDesign li button span, .radioGroupsDesign label {
            white-space: nowrap !important;
        }

            .radioGroupsDesign label span {
                top: unset !important;
            }

    .mainContent.mainContentFull {
        width: calc(100% - 0px);
    }

    .projectListDetails > div {
        width: calc(100% / 1 - 0px);
        margin: 0PX !important;
        margin-bottom: 5px !important;
    }

    .dateBudget {
        width: calc(100% / 1 - 10px);
    }

    .hideSmall {
        display: none !important;
    }
}

@media(max-width:1339px) {
    .threeBox-items {
        width: calc(100% / 2 - 10px) !important;
        justify-content: space-between !important;
    }

        .threeBox-items:nth-of-type(2n) {
            margin-right: 0px !important;
        }

        .threeBox-items:nth-of-type(3n) {
            margin-right: 10px !important;
        }
}


.draggable .modal-header {
    cursor: move;
}

.tablehead {
    background: #25507c;
}

    .tablehead tr th {
        font-weight: 600;
    }

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

    .form-group label {
        font-weight: 600;
        margin-bottom: 4px;
    }

thead.bg-light, thead.bg-light th {
    background: #b4d9ff;
    color: #333;
}

.dataTables_length, .dataTables_filter {
    float: left;
    width: 50%;
    background: #ededed;
    height: 48px;
    padding: 5px 15px;
}

    .dataTables_length label, .dataTables_filter label {
        display: flex;
        align-items: center;
    }

        .dataTables_length label input, .dataTables_length label select, .dataTables_filter label input, .dataTables_filter label select {
            border: solid 1px #b3b3b3 !important;
            padding: 3px !important;
            margin: 5px;
            outline: none !important;
        }

    .dataTables_filter label {
        justify-content: flex-end
    }

.dataTables_info, .dataTables_paginate {
    float: left;
    width: 50%;
    margin-top: 5px;
    display: flex;
}

.dataTables_paginate {
    justify-content: flex-end;
    display: flex;
}

    .dataTables_paginate .paginate_button {
        display: inline-block;
        border: solid 1px #b3b3b3;
        padding: 2px 10px;
        text-decoration: none;
        color: #979797;
        margin: 0px 1px;
        cursor: pointer;
    }

        .dataTables_paginate .paginate_button.current {
            background: #25507c;
            color: #fff;
        }


nav.position-sticky {
    z-index: 999;
}


.tabOverflow {
    overflow: hidden;
    overflow-x: auto !important;
}

/*datalist table Sorting CSS Start*/
table.dataTable thead th, table.dataTable thead td {
    padding: 10px 18px;
    border-bottom: 1px solid #111;
}

table.dataTable thead th, table.dataTable tfoot th {
    font-weight: bold;
}

table.dataTable, table.dataTable th, table.dataTable td {
    /*box-sizing: content-box;*/
}

    table.dataTable thead .sorting {
        background-image: url(../img/sort_both.png);
    }

    table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center right;
    }

    table.dataTable thead .sorting_asc {
        background-image: url(../img/sort_asc.png);
    }

    table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center right;
    }

    table.dataTable thead .sorting_desc {
        background-image: url(../img/sort_desc.png);
    }

    table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center right;
    }
/*datalist table Sorting CSS End*/


.timeline {
    counter-reset: li;
    position: relative;
    display: flex;
    z-index: 1;
}

    .timeline li {
        list-style: none;
        float: left;
        position: relative;
        text-align: center;
        font-size: 12px;
        color: #555555;
        line-height: 15px;
        height: 65px;
    }

        /* .timeline li:last-child {
            width: 5%;
        }*/
        /*
            .timeline li:last-child:after {
                width: 350%;
                left: -350%;
            }*/

        .timeline li strong {
            font-weight: 700;
        }

        .timeline li span {
            display: block;
            text-align: left;
            width: 100%;
        }

            .timeline li span strong {
                display: block;
                text-align: left;
                width: 100%;
                color: #20426c;
                font-weight: 600;
            }


        /*.timeline li:before {
            counter-increment: li;
            content: counter(li);
            width: 25px;
            height: 25px;
            border: 2px solid #c7ccda;
            border-radius: 50%;
            display: block;
            text-align: center;
            line-height: 21px;
            margin: 0 0 10px 0;
            background: #ffffff;
            color: #8c97b7;
            z-index: 2;
            position: relative;
            transition: all ease-in-out .3s;
            cursor: pointer;
            font-size: 14px;
        }*/
        .timeline li:before {
            font-family: 'fontawesome-webfont';
            content: "\f0da";
            width: 25px;
            height: 25px;
            border: 2px solid #c7ccda;
            border-radius: 50%;
            display: block;
            text-align: center;
            line-height: 21px;
            margin: 0 0 10px 0;
            background: #ffffff;
            color: #8c97b7;
            z-index: 2;
            position: relative;
            transition: all ease-in-out .3s;
            cursor: pointer;
            font-size: 23px;
        }


        .timeline li.CurrentStage::before {
            font-family: 'fontawesome-webfont';
            content: "\f0da";
            width: 25px;
            height: 25px;
            border: 2px solid #c7ccda;
            border-radius: 50%;
            display: block;
            text-align: center;
            line-height: 21px;
            margin: 0 0 10px 0;
            background: #ffffff;
            color: #ef1c1c;
            z-index: 2;
            position: relative;
            transition: all ease-in-out .3s;
            cursor: pointer;
            font-size: 23px;
        }


        .timeline li:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #c7ccda;
            top: 12px;
            left: 0px;
            z-index: 1;
            transition: all ease-in-out .3s;
        }

        /* .timeline li:first-child:after {
            content: none;
        }*/

        .timeline li.active {
        }

            .timeline li.active:before {
                background: #4caf50;
                color: #ffffff;
                border: 2px solid #214570;
            }

        .timeline li.next:before {
            background: #eff7ff;
            color: #214570;
            border: 2px solid #214570;
        }

        .timeline li.pending:before {
            background: #d8c524;
            color: #ffffff;
            border: 2px solid #a79714;
        }


        .timeline li.active + li:after {
            background: #214570;
        }

        .timeline li.pending + li:after {
            background: #a79714;
        }

        .timeline li span {
            display: block;
            top: -38px;
            text-align: left;
            width: 100%;
        }

.tableTimeline .timeline li span.status {
    z-index: 999;
}

    .tableTimeline .timeline li span.status.simpleStatus {
        background: #e4e4e4 !important;
        color: #000 !important;
    }

.tableTimeline .timeline li.StagesComplete span.status {
    background: #e4e4e4 !important;
    color: #000 !important;
    font-weight: 600;
}

.tableTimeline .timeline li.StagesDisabled span.status {
    background: #e9e9e9 !important;
    color: #898989 !important;
    cursor: not-allowed;
}


/*.tableTimeline .timeline li:nth-child(1) span.status {
    background: #9e9e9e !important;
}*/

.tableTimeline .timeline li span.status {
    left: 30px !important;
    top: 0px !important;
    white-space: nowrap;
    width: 160px;
    text-align: center;
    margin: 0px !important;
    position: absolute;
    padding: 3px 10px !important;
    border-radius: 5px;
    background: #c7ccda;
    width: calc(100% - 38px);
}

.DayDuration {
    position: absolute;
    bottom: 5px !important;
    z-index: 999;
    right: 7px !important;
    width: auto !important;
    background: #2ba4b1;
    color: #fff;
    top: unset !important;
    padding: 2px 5px 0px 5px;
    border-radius: 7px;
    bottom: 5px;
    font-size: 12px;
    line-height: 18px;
}

.StatusDate {
    position: absolute;
    bottom: 5px !important;
    z-index: 999;
    right: 7px !important;
    width: auto !important;
    background: #778a8d;
    color: #fff;
    top: unset !important;
    padding: 2px 5px 0px 5px;
    border-radius: 7px;
    bottom: 5px;
    font-size: 12px;
    line-height: 18px;
}

.modal-lg {
    min-width: 1000px !important;
    max-width: 1000px !important;
}

.modal-header {
    background: #25507c;
    color: #fff !important;
}

.modal-footer .btn-success {
    background: #25507c !important;
    border-color: #25507c !important;
}

.modal-title {
    color: #fff !important;
}

.modal-content {
    overflow: auto !important;
}


.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto !important;
    color: #fff;
    opacity: 1;
    background: #25507c;
    border: none;
}

/*Select2*/
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.select2-dropdown {
    border-color: #e0e3e4;
    top: -1px !important;
}

/*.select2-container {
    width: 100% !important;
}*/

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    display: block;
    width: 100%;
    height: calc(2.25rem + 4px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #324148;
    background-color: #fff;
    border: 2px solid #e0e3e4;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .select2-container--default .select2-selection--single:focus,
    .select2-container--default .select2-selection--multiple:focus {
        border-color: #179237;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow,
    .select2-container--default .select2-selection--multiple .select2-selection__arrow {
        height: calc(2.25rem + 4px);
        top: 0;
        right: 6px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        color: #324148;
        line-height: inherit;
    }

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #e0e3e4;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #179237 2px;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #179237;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: .25rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #179237;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f5f5f6;
    color: #324148;
}

.select2-container--default .select2-selection--multiple {
    height: auto;
    min-height: calc(2.25rem + 4px);
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #39453c !important;
        border: none;
        color: #fff;
        margin-right: 6px;
        margin-top: 6px;
        padding: 1px 7px;
    }

        .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
            color: #fff;
            font-weight: 600;
            margin-left: 6px;
            float: right;
            font-size: 14px;
            opacity: 0.5;
            padding-top: 1px;
        }

            .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
                opacity: 1;
            }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 0 6px;
    }

.select2-container {
    z-index: 999;
}

.projectListcard.onlyRiskRegistered {
    background: #ffeded !important;
}

.projectListcard.TemporaryProjectRisk {
    background: #d5e3d8 !important;
}

@media (max-width:1100px) {
    .modal-lg {
        min-width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
    }
}

@media (max-width:800px) {
    .searchFilterBtns > * {
        margin: 2px 0px;
    }
}

div.details-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_open.png') no-repeat center center !important;*/
    background: url('../img/details_open.png') no-repeat center center !important;
    cursor: pointer;
}

tr.shown div.details-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_close.png') no-repeat center center !important;*/
    background: url('../img/details_close.png') no-repeat center center !important;
}

div.details-control2 {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_open.png') no-repeat center center !important;*/
    background: url('../img/details_open.png') no-repeat center center !important;
    cursor: pointer;
}

tr.shown div.details-control2 {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_close.png') no-repeat center center !important;*/
    background: url('../img/details_close.png') no-repeat center center !important;
}

div.projectdetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_open.png') no-repeat center center !important;*/
    background: url('../img/details_open.png') no-repeat center center !important;
    cursor: pointer;
}

tr.shown div.projectdetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_close.png') no-repeat center center !important;*/
    background: url('../img/details_close.png') no-repeat center center !important;
}

div.moduledetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_open.png') no-repeat center center !important;*/
    background: url('../img/details_open.png') no-repeat center center !important;
    cursor: pointer;
}

tr.shown div.moduledetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_close.png') no-repeat center center !important;*/
    background: url('../img/details_close.png') no-repeat center center !important;
}

div.submoduledetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_open.png') no-repeat center center !important;*/
    background: url('../img/details_open.png') no-repeat center center !important;
    cursor: pointer;
}

tr.shown div.submoduledetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_close.png') no-repeat center center !important;*/
    background: url('../img/details_close.png') no-repeat center center !important;
}

div.resourcedetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_open.png') no-repeat center center !important;*/
    background: url('../img/details_open.png') no-repeat center center !important;
    cursor: pointer;
}

tr.shown div.resourcedetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_close.png') no-repeat center center !important;*/
    background: url('../img/details_close.png') no-repeat center center !important;
}

div.submoduleresourcedetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_open.png') no-repeat center center !important;*/
    background: url('../img/details_open.png') no-repeat center center !important;
    cursor: pointer;
}

tr.shown div.submoduleresourcedetails-control {
    /*background: url('https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_close.png') no-repeat center center !important;*/
    background: url('../img/details_close.png') no-repeat center center !important;
}

label.EmployeeStatusRadio {
    position: relative;
    padding: 2px 10px;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
}

    label.EmployeeStatusRadio input[type=radio] {
        position: absolute;
        visibility: hidden;
    }

    label.EmployeeStatusRadio.Active {
        background: #10ac0a;
    }

    label.EmployeeStatusRadio.Inactive {
        background: #d40a0a;
    }

.maxHeightScreenWithoutFilter {
    height: calc(100vh - 256px);
}

    .maxHeightScreenWithoutFilter table thead {
        position: sticky;
        top: 0px;
        background: #fff !important;
        z-index: 999;
    }


.select2-container .select2-selection--single {
    height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;
}

.tabArrowUl li {
    float: left;
}

    .tabArrowUl li a {
        position: relative !important;
        padding-left: 33px;
        background: #f4f4f4 !important;
    }

        .tabArrowUl li a::after {
            content: "";
            position: absolute;
            width: 0px;
            height: 0px;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #f4f4f4;
            top: 0px;
            right: -20px;
            z-index: 9;
        }

        .tabArrowUl li a::before {
            content: "";
            position: absolute;
            width: 0px;
            height: 0px;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #5c5c5c;
            top: 0px;
            left: 0px;
        }

        .tabArrowUl li a.active::after {
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #0d6efd;
        }

        .tabArrowUl li a.active::before {
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #e1e1e1;
        }

        .tabArrowUl li a.active {
            background: #0d6efd !important;
        }

.LeftSticky1 {
    position: sticky;
    left: 0px;
    z-index: 99;
    background: #fff !important;
}

.progressDatas span {
    left: 43%;
    top: 0px;
    font-weight: 500;
}


.view-resume {
    background-color: #00000087;
    position: fixed;
    height: 100vh;
    width: 50%;
    z-index: 99999;
    top: 0;
    right: -100%;
    padding: 10px;
    transition: 0.3s;
}

.pdf-view {
    margin-left: auto;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    height: 98vh;
}

    .pdf-view iframe {
        width: 100%;
        height: 100%;
    }

    .pdf-view h2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        font-size: 20px;
        border-bottom: 1px solid #a3a3a3;
    }

        .pdf-view h2 button {
            background: #25507c;
            border: 0;
            color: #fff;
            padding: 6px 11px;
            border-radius: 6px;
            font-size: 16px;
        }

.right-1000 {
    right: 0;
}

.maxheightScrollRole {
    height: calc(100vh - 295px);
    overflow: auto;
}

/****************Notification Component*/
.NoficationBox > a.nav-link {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: solid 1px;
    border-radius: 100%;
}

    .NoficationBox > a.nav-link.show::before {
        position: absolute;
        bottom: -19px;
        left: 30%;
        font-family: 'fontawesome-webfont';
        content: '\f063';
    }

    .NoficationBox > a.nav-link span {
        position: absolute;
        right: -5px;
        top: -4px;
        background: #fff;
        display: inline-block;
        padding: 2px;
        border-radius: 4px;
        color: #000;
        font-size: 12px;
        line-height: 12px;
    }

.NoficationBox .dropdown-menu {
    min-width: 420px;
    left: unset !important;
    right: 0px !important;
    top: 54px !important;
    border-radius: 0px;
    padding: 0px !important;
    max-height: 400px;
    overflow: auto;
}

    .NoficationBox .dropdown-menu li a, .NotificationAlertsBody ul li a {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        color: #000;
        padding: 5px 15px;
        text-decoration: none;
        border-bottom: dashed 1px #d2d2d2;
    }

    .NoficationBox .dropdown-menu li.viewAllNoti a {
        text-align: center;
        background: #25507c;
        color: #fff;
        justify-content: center;
        align-items: center;
    }

        .NoficationBox .dropdown-menu li.viewAllNoti a i {
            margin-left: 15px;
        }

    .NoficationBox .dropdown-menu li a h4, .NotificationAlertsBody ul li a h4 {
        font-size: 16px;
        font-weight: 600;
        margin: 0px;
    }

    .NoficationBox .dropdown-menu li a > div, .NotificationAlertsBody ul li a > div {
        text-align: left;
        width: calc(100% - 44px);
        padding-left: 10px;
    }

        .NoficationBox .dropdown-menu li a > div > div, .NotificationAlertsBody ul li a > div > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 5px;
        }

    .NoficationBox .dropdown-menu li a p, .NotificationAlertsBody ul li a p {
        font-size: 12px;
        margin: 0px;
        color: #818181;
        line-height: 18px;
    }

    .NoficationBox .dropdown-menu li a span.icons, .NotificationAlertsBody ul li a span.icons {
        width: 44px;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border: solid 1px;
        border-radius: 100%;
        margin-top: 5px;
    }

    .NoficationBox .dropdown-menu li a span.dateTime, .NotificationAlertsBody ul li a span.dateTime {
        color: #214570;
        font-size: 12px;
        line-height: 12px;
    }

    .NoficationBox .dropdown-menu li a.AddedNewProject span.icons, .NoficationBox .dropdown-menu li a.ProjectCloser span.icons, .NotificationAlertsBody ul li a.AddedNewProject span.icons, .NotificationAlertsBody ul li a.ProjectCloser span.icons {
        background: #d0fce0;
        color: #179237;
    }

    .NoficationBox .dropdown-menu li a.AddedNewTask span.icons, .NotificationAlertsBody ul li a.AddedNewTask span.icons {
        background: #d0defc;
        color: #175d92;
    }

    .NoficationBox .dropdown-menu li a.AddedNewInvoice span.icons, .NotificationAlertsBody ul li a.AddedNewInvoice span.icons {
        background: #ffeebe;
        color: #cb9b0f;
    }

@media (max-width:580px) {
    .NoficationBox .dropdown-menu {
        min-width: 280px;
        left: unset !important;
        right: -150px !important;
        top: 54px !important;
        border-radius: 0px;
        padding: 0px !important;
    }
}

/****************Notification Component*/

.monthHeaders {
    display: block;
    border: solid 1px #a8caf2;
    border-bottom: 0px;
    background: #cfe5ff;
    color: #25507c;
    padding: 5px 15px;
    font-weight: 600;
    font-size: 18px;
}

.font-italic {
    font-style: italic;
}

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

.VacancyStatus {
    font-size: 12px;
    border-radius: 5px;
    padding: 2px 8px;
}

.thColor thead tr th {
    background: #25507c !important;
    color: #fff !important;
}

.card-header form {
    width: 100%;
}


.threeBox-items .vertical-top tr td {
    vertical-align: top !important;
}

.openPostionVal {
    background: #25507c;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fff;
}

.openPostionText {
    width: calc(100% - 24px);
    padding-left: 10px;
}

/* password toggle start */
.password-section {
    position: relative;
    display: inline-block;
}

    .password-section .fa-eye {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust this value to control the icon's position */
        transform: translateY(-50%);
        cursor: pointer;
    }

    .password-section .fa-eye-slash {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust this value to control the icon's position */
        transform: translateY(-50%);
        cursor: pointer;
    }

.old-password-section {
    position: relative;
    display: inline-block;
}

    .old-password-section .fa-eye {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust this value to control the icon's position */
        transform: translateY(-50%);
        cursor: pointer;
    }

    .old-password-section .fa-eye-slash {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust this value to control the icon's position */
        transform: translateY(-50%);
        cursor: pointer;
    }

.new-password-section {
    position: relative;
    display: inline-block;
}

    .new-password-section .fa-eye {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust this value to control the icon's position */
        transform: translateY(-50%);
        cursor: pointer;
    }

    .new-password-section .fa-eye-slash {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust this value to control the icon's position */
        transform: translateY(-50%);
        cursor: pointer;
    }

.confirm-password-section {
    position: relative;
    display: inline-block;
}

    .confirm-password-section .fa-eye {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust this value to control the icon's position */
        transform: translateY(-50%);
        cursor: pointer;
    }

    .confirm-password-section .fa-eye-slash {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust this value to control the icon's position */
        transform: translateY(-50%);
        cursor: pointer;
    }
/* password toggle end */

/********Update Menu Css************/
@media (max-width:840px) {
    .sideBar {
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        position: fixed;
        padding-top: 115px;
        overflow: auto;
        z-index: 1;
    }

        .sideBar.sideBarCollapse {
            width: 0%;
        }

    .mainContent {
        width: calc(100% - 0px) !important;
    }

        .mainContent.mainContentFull {
            width: calc(100% - 0px) !important;
        }

        .mainContent.ps-3 {
            padding-left: 0px !important;
        }

    .sideBar .dropdown-toggle > span {
        display: flex;
        align-items: center;
    }

        .sideBar .dropdown-toggle > span > span.nav-title {
            display: block !important;
            margin-left: 10px;
        }

    .sideBar .navbar .navbar-nav > .dropdown > .dropdown-toggle {
        justify-content: flex-start !important;
    }

    .sideBar .navbar-nav .dropdown-menu {
        position: relative !important;
        z-index: 9999;
        top: 0px;
        width: calc(100% - 15px);
        left: 15px;
    }

    .sideBar .dropdown-menu .dropdown-header {
        display: none !important;
    }

    .sideBar .dropdown-toggle.show {
        background: #25507c;
    }

        .sideBar .dropdown-toggle.show > span {
            color: #fff !important;
        }
}
/********Update Menu Css************/

/*.select2-container .select2-selection--single .select2-selection__rendered {
    width: 150px !important;
}*/

.select2-container {
    z-index: 99999;
    display: block !important;
    
}

.select2Lists .select2-container {
    width: 100% !important;
    border: solid 1px #ced4da;
    border-radius: 4px;
    min-height: 38px !important;
}

.select2Lists .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 0px !important;
}



.minWidth200px {
    min-width: 200px;
}

.minWidth150px {
    min-width: 150px;
}

.minWidth250px {
    min-width: 250px;
}

.minWidth100px {
    min-width: 100px;
}

.maxheightPopup90 {
    height: calc(100vh - 200px) !important;
    overflow: auto;
}

.NotificationAlerts {
    width: 360px !important;
    position: fixed;
    right: 20px;
    bottom: -100%;
    background: #fff;
    border: solid 1px #c7ccda;
    box-shadow: 0px 0px 5px #333;
    border-radius: 10px;
    z-index: 999;
}

.NotificationAlertsTitle {
    background: #25507c;
    color: #fff;
    padding: 8px 15px;
    border-radius: 10px 10px 0px 0px;
}

.NotificationAlertsBody {
    max-height: 300px;
    overflow: auto;
    padding: 10px;
    width: 100%;
}

.NotificationAlertsTitle button {
    border: 0px;
    padding: 0px;
    background: none !important;
    color: #fff;
}

.NotificationAlertsShow {
    transition: all .8s;
    bottom: 20px !important;
    display: none;
}

@media (min-width:841px) {
    .sideBar .navbar-nav > li > .dropdown-toggle > span {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sideBar .dropdown-toggle > span > span.nav-title {
        display: block !important;
        font-size: 9px !important;
        line-height: 12px !important;
        white-space: break-spaces;
        text-align: center;
        font-weight: 600;
    }
}
/*@media(max-height:640px) {
    .sideBar .navbar-nav .dropdown-menu .dropdown-menu {
        transform: translate(0px, -50%) !important;
    }
}*/

/*.select2-container {
    z-index:1;
}*/

#ulBellNotification li:nth-last-child(1) {
    position: sticky;
    bottom: 0px;
    width: 100%;
}

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


.MultiRescheduleLegend::before {
    background: #FFE0E0;
}
.FeedbackPendingLegend::before {
    background: #fff7dd;
}

.MultiRescheduleLegendShow {
    display: block;
}

.MultiRescheduleLegendHide {
    display: none !important;
}

/*Jquery Toggle*/
.form-check .form-switch .form-check-input .toggle {
    height: 24px;
    display: inline-block;
    margin-top: 15px;
}

.toggle-bg-green {
    background: #22af47;
    color: #fff;
    text-shadow: none;
    box-shadow: none;
}

.DeleteProjection::before {
    background: #cbbebe !important;
    border: solid 1px #000;
}

.EditProjection::before {
    background: #a2b86c !important;
    border: solid 1px #000;
}

.RejectProjection::before {
    background: #f5d5ed !important;
    border: solid 1px #000;
}

.offer-provided-accep h1 {
    color: #2cd977;
    font-size: 35px;
    margin: 0;
}

.offer-provided-accep h3 {
    color: #505d6f;
}

.offer-provided-accep span {
    display: block;
    font-size: 14px;
    color: #606060;
    font-weight: 400;
    margin-top: 5px;
}

.offer-cunt {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
    position: relative;
    margin-bottom:20px;
}
    .offer-cunt > div.text-center {
        position: relative;
        width:100%;
    }
    .offer-cunt > div.text-center::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        background-color: #d9d9d9;
        top: 0;
        left: 0px;
    }
    .offer-cunt > div.text-center:nth-child(1)::before {
        display:none !important;
    }

.brder-right {
    border-right: 1px solid #c3c3c3;
}


@media (min-width: 1400px) {
    .col-xxl-3 {
        flex: 0 0 auto;
        width: calc(100% / 3) !important;
    }
}
@media (min-width: 1500px) {
    .col-xxl-3 {
        flex: 0 0 auto;
        width: calc(100% / 4) !important;
    }
}
@media (min-width: 1800px) {
    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25% !important;
    }
}

tr.group,
tr.group:hover {
    background-color: #ddd !important;
}

.VacancyBox {
    width:100%;
}
.VacancyHeader {
    background:#25507c;
    color:#fff;
}
.VacancyHeader > div, .VacancyBody > div {
    padding: 5px;
}
.VacancyBox .VacancyBody:nth-child(1) {
    border-top: solid 1px #c7ccda;
}
.VacancyBody {
    border-bottom: solid 1px #c7ccda;
}
.VacancyNo {
    width: 30px;
    border-left: solid 1px #c7ccda;
    border-right: solid 1px #c7ccda;
}
.VacancyCV {
    width: 90px;
    border-left: solid 1px #c7ccda;
    border-right: solid 1px #c7ccda;
}
.VacancyInfo {
    width: calc(100% - 120px);
}

.TimeLineViewChange {
    min-width:960px !important
}
.TimeLineViewChange li{
    min-width:150px !important;
        width:100% !important;
}
    .TimeLineViewChange li.ForwardtoAccount {
        min-width: 200px !important;
        width: 100% !important;
    }

    .TimeLineViewChange li.ProcessforPayment {
        min-width: 200px !important;
        width: 100% !important;
    }

    .TimeLineViewChange li span.status {
        font-size:12px !important;
        font-weight:600;
    }
    .TimeLineViewChange li span.DayDuration {
        font-size: 11px !important;
        width:45px !important;
    }
    .TimeLineViewChange li span.StatusDate {
        font-size: 11px !important;
        padding: 2px 3px 0px 3px !important
    }
    .TimeLineViewChange li a.plusAction {
        position: absolute;
        right: -24px;
        bottom: 5px;
        border: solid 1px #25507c;
        color: #fff;
        color: #214570;
        width: 24px;
        height: 24px;
        border-radius: 100%;
        padding: 0px;
        display:none !important;
        z-index:9;
        cursor:pointer;
    }
    .TimeLineViewChange li.CurrentStage a.plusAction {
        display:block !important;
    }
    .TimeLineViewChange li.Paid.CurrentStage {
        margin-right: 30px;
    }

.maxHeightScreenWithoutFilter thead tr th {
    z-index:9999;
}

.RecentTaskBox {
    width: 100%;
}

.RecentTaskHeader {
    background: #25507c;
    color: #fff;
}

.RecentTaskHeader > div, .RecentTaskBody > div {
    padding: 5px;
}

.RecentTaskBox .RecentTaskBody:nth-child(1) {
    border-top: solid 1px #c7ccda;
}

.RecentTaskBody {
    border-bottom: solid 1px #c7ccda;
}

.RecentTaskNo {
    width: 30px;
    border-left: solid 1px #c7ccda;
    border-right: solid 1px #c7ccda;
}

.RecentTaskDuration {
    width: 200px;
    border-left: solid 1px #c7ccda;
    border-right: solid 1px #c7ccda;
}
.RecentTaskStatus {
    width: 120px;
    border-left: solid 1px #c7ccda;
    border-right: solid 1px #c7ccda;
}
.RecentTaskInfo {
    width: calc(100% - 120px);
}

tr.trLightBlue {
    background: #f2f8ff !important;
}
    tr.trLightBlue table > thead {
        background: #25507c !important;
        color: #fff !important;
    }
tr.trLightRed {
    background: #fff6f2 !important;
}
    tr.trLightRed table > thead {
        background: #a36d55 !important;
        color: #fff !important;
    }
tr.trLightGreen {
    background: #f2fff4 !important;
}

tr.trLightGreen table > thead {
    background: #55a962 !important;
    color: #fff !important;
}

.value-tabs-span {
    background: var(--SoftGreen);
    position: relative;
    top: -30px;
    display: inline-block;
    padding: 0px 4px !important;
    border-radius: 10px;
    color: var(--Green);
}

.list-unstyled {
}

    .list-unstyled h5 {
        font-size: 13px;
        text-align: right;
        font-weight: 400;
        margin-bottom: 0;
    }

        .list-unstyled h5 span {
            font-size: 12px;
        }

    .list-unstyled li {
        display: flex;
        gap: 10px;
        justify-content: end;
        align-items: center;
        margin-bottom: 8px;
    }

    .list-unstyled .legend-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 20px;
    }

.graph-eye {
    background-color: transparent;
    border: 1px solid #b9b9b9;
    padding: 0;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.nav.graph-tabs {
    margin-top: -30px;
    margin-left: 10px;
    gap: 10px;
    border: 0;
}

    ul.nav.graph-tabs a {
        padding: 4px 15px;
        border-radius: 6px;
        border: 1px solid #ff8f6b;
        font-size: 12px;
        background-color: #fff;
    }

    ul.nav.graph-tabs .active {
        background-color: #2e4e63;
        color: #fff;
        border: 1px solid #2e4e63;
    }

    ul.nav.graph-tabs button {
        padding: 4px 15px;
        border-radius: 6px;
        border: 1px solid #ff8f6b;
        font-size: 12px;
        background-color: #fff;
    }

    .modal-xxl {
        max-width: 1500px;
    }
    .modal-heading {
        text-align: center;
        font-size: 22px;
        font-weight: 600;
        color: #000;
        margin-top: 20px;
    }
    button.modal-close {
        position: absolute;
        right: 10px;
        top: 10px;
        background-color: #000;
        width: 24px;
        height: 24px;
        border-radius: 50px;
        border: 0;
        color: #fff;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    button.modal-close span {
        font-size: 20px;
        font-weight: 500;
    }
    .modal-remark {
        width: 80%;
        margin: 30px auto 0;
    }

    .modal-remark .form-group label {
        font-weight: 500;
        margin-bottom: 4px;
        color: #000;
        font-size: 13px;
    }
    .modal-remark .form-group input, .modal-remark .form-group textarea {
        font-size: 13px;
    }
.milestonen-des{
    display:inline-block;
    width:600px;
}

.sales-mange .box-outer {
    border: 1px solid #E0E0E0;
    padding: 14px;
    border-radius: 16px;
    position:relative;
}
    .sales-mange .box-outer h2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 30px;
        color: #2E4E63;
        margin: 18px 0 10px;
        font-weight: 600;
    }
    .sales-mange .box-outer span {
        display: inline-block;
        background: #605BFF;
        color: #fff;
        border-radius: 8px;
        padding: 2px 20px;
        position: absolute;
        top: -14px;
        left: 15px;
    }

        .sales-mange .box-outer span.bg-new-1 {
            background: #FF8F6B; 
        }
        .sales-mange .box-outer span.bg-new-2 {
            background: #2E4E63;
        }
.meters-graph {
    text-align: center;
}

    .meters-graph h2 {
        font-size: 30px;
        color: #2E4E63;
        margin: 18px 0 10px;
        font-weight: 600;
    }

        .meters-graph h2 span {
            display: block;
        }

.box-quarterly {
    padding:20px;
    border-radius: 10px;
    margin-bottom:15px;
}
    .box-quarterly h2{
        font-size:20px;
        color:#fff;
        margin-bottom:20px;
    }
    .color-gr {
        background: linear-gradient(90deg, #C75AFF -0.01%, #693FFB 99.8%);
    }
.color-gr-1 {
    background: linear-gradient(90deg, #D65F5F 0.2%, #FF8B25 100%);
}
.color-gr-2 {
    background: linear-gradient(90deg, #5B40C5 0%, #2C1F5F 100%);
}
.color-gr-3 {
    background: linear-gradient(90deg, #41C9F6 -0.01%, #6499D6 99.8%);
}

.projection-datavalue{
    display:flex;
    gap:10px;
    align-items:center;
}
    .projection-datavalue h4 {
        color: #dddddd;
        font-size: 14px;
        font-weight: 400;
    }
    .projection-datavalue h4 span{
        color:#fff;
        font-size:24px;
        font-weight:600;
        display:block;
        margin-top:8px;
    }

.color-light-bg-1 {
    background: rgba(96, 91, 255, 0.1);
}
.color-light-bg-2 {
    background: rgba(255, 143, 107, 0.1);
}
.color-light-bg-3 {
    background: rgba(46, 78, 99, 0.1);
}
.projection-datavalue img {
    height: 43px;
}

.shap-outr-box {
    padding: 40px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    position: relative;
}
.color-bg-3 {
    background: linear-gradient(90deg, #FF883D -0.01%, #F4272A 99.8%);
}
.shap-outr-box h3 {
    color: #fff;
    font-size: 34px;
    margin: 0;
    position: relative;
}
    .shap-outr-box h3 span {
        font-size: 16px;
        display: block;
        margin-top: 4px;
    }
.vactor-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}
.color-bg-4 {
    background: linear-gradient(90deg, #FFBB01 -0.01%, #FF6B01 99.8%);
}

.graf-value-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
    .graf-value-main li {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #6a6a6a;
    }
span.target-color {
    display: inline-block;
    width: 40px;
    height: 12px;
    background: #dedeff;
    flex: 0 0 auto;
    margin-right:10px;
}
.actual-color {
    display: inline-block;
    width: 20px;
    height: 12px;
    background: #26a706;
    flex: 0 0 auto;
}
.actual-color-red {
    display: inline-block;
    width: 20px;
    height: 12px;
    background: #ef4444;
    flex: 0 0 auto;
    margin-right: 10px;
}