* {
    font-family: Calibri;
    color: #181100;
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

body {
    height: 100%;
    min-height: 100%;
    background-color: var(--bgColr );
}

:root {
    --blue: #25408F;
    --lightBlue: #8190BE;
    --black: #181100;
    --white: #ffffff;
    --bgColr: #fafafc;
    --error: #AA2B2B;
    --lightRed: #F5E6E6;
    --grey: #E8E7E6;
    --green: #009900;
    --lightGreen: #E6F5E6;
    --greyText: #A09D96;
    --title: #3F392B;
}

.position-relative {
    position: relative;
}

footer {
    display: none !important;
}

.m-0 {
    margin: 0 !important;
}

.mr-12 {
    margin-right: 12px !important;
}

.p-0 {
    padding: 0 !important;
}

.plr-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.bgBlue {
    background-color: var(--blue) !important;
    color: white;
    font-weight: 400 !important;
}

.bgGrey {
    background-color: var(--grey);
}

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: end !important;
}

.flex-start {
    justify-content: flex-start !important;
}

.mb-28 {
    margin-bottom: 0.2em !important;
}

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

/*.mt-20 {
    margin-top: 20px !important;
}*/

.mr-20 {
    margin-right: 20px !important;
}

.justify-between {
    justify-content: space-between;
}

.align-item-center {
    align-items: center;
}

.hamburger {
    padding-right: 30px;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

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

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


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

.cursor-pointer {
    cursor: pointer;
}

.scroll-x {
    overflow-x: scroll;
}

.visible-in-mobile {
    display: none;
}

.visible-in-web {
    display: block;
}

.mandatoryMark:after {
    content: '*';
    position: absolute;
    color: var(--error);
}
/* login page css starts here */
.loginContainer {
    background: url(../assets/login-frame.png) no-repeat bottom;
    width: 100%;
    text-align: center;
    background-size: contain;
    height: 100vh;
}

    .loginContainer .logo {
        margin: 1.5em;
        /*margin-bottom: 33px;*/
    }

    .loginContainer .loginBox {
        max-width: 451px;
        width: 100%;
        margin: auto;
    }

    .loginContainer form {
        /* box-shadow: 0px 0px 12px 0px #00000012; */
        box-shadow: 0px 0px 30px 6px #00000045;
        padding: 48px 36px;
        background-color: var(--white);
        border-radius: 8px;
    }

        .loginContainer form p:first-child {
            font-size: 20px;
            font-weight: 700;
            line-height: 120%;
            margin-bottom: 10px;
        }

        .loginContainer form p:nth-child(2) {
            font-size: 14px;
            font-weight: 400;
            line-height: 120%;
            margin-bottom: 2em;
        }

        .loginContainer form label {
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            display: block;
            text-align: left;
        }

        .loginContainer form input {
            margin: 10px 0 16px;
            padding: 14px 16px 12.09px 16px;
            border-radius: 5px;
            border: 1px solid var(--grey);
            color: var(--black);
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            width: 100%;
            outline: none;
        }

        .loginContainer form .showPassword {
            position: absolute;
            background-color: var(--grey);
            padding: 9.5px 16px 9.5px 16px;
            top: 10px;
            right: 0px;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
        }

.showPassEyeCross::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    background: grey;
    height: 1px;
    width: 25px;
    right: 17px;
    top: 49px;
    transform: rotate(145deg);
}

.loginContainer form .forgetPassword {
    color: var(--blue);
    position: absolute;
    right: 0;
    top: -16px;
    cursor: pointer;
}

.loginContainer form .checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

    .loginContainer form .checkbox input {
        width: auto;
        margin: 0 5px 0 0;
        cursor: pointer;
    }

.loginContainer form button {
    padding: 10.39px 0 12.21px 0;
    border-radius: 8px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    border: none;
    cursor: pointer;
    margin-top: 16px;
    background: transparent;
    color: var(--black);
}

    .loginContainer form button.blueBtn {
        background-color: var(--blue);
        color: var(--white);
        width: 100%;
    }

.greenToaste {
    padding: 16px;
    background-color: var(--lightGreen);
    border-radius: 4px;
    position: absolute;
    top: 35px;
    right: 35px;
}

    .greenToaste p {
        color: var(--green);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px;
        letter-spacing: -0.5px;
        margin-left: 16px;
    }
/* login page css ends here */

/* system user master css here */
.sideNavDashboard {
    width: 15em;
    background-color: var(--white);
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.07);
    z-index: 2;
    height: 100%;
    position: relative;
}

    .sideNavDashboard .dashboard-logo {
        width: 105px;
        margin: 7px 0 8px;
    }

    .sideNavDashboard .text-center {
        box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.07);
        position: relative;
        z-index: 1;
    }

.sideMenu {
    background-color: var(--blue);
    height: 100%;
    padding-top: 8px;
}

.sideNavDashboard .sideMenu p {
    padding: 13px 20px 15px;
    color: var(--white);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

.sideNavDashboard .sideMenu ul {
    padding-bottom: 13px;
    list-style: none;
}

    .sideNavDashboard .sideMenu ul li {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 10%;
        padding: 9px 10px;
        cursor: pointer;
        color: var(--white);
        position: relative;
    }

        .sideNavDashboard .sideMenu ul li a {
            color: var(--white);
            text-decoration: none;
        }
            /* menue css*/
            .sideNavDashboard .sideMenu ul li a:hover, .sideNavDashboard .sideMenu ul li.activeSideMenu a {
                color: var(--blue);
                text-decoration: none;
            }

        .sideNavDashboard .sideMenu ul li div p {
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            color: var(--white);
            padding: 0;
        }

        .sideNavDashboard .sideMenu ul li:hover .showMoreNav {
            display: block;
        }

        .sideNavDashboard .sideMenu ul li img {
            filter: invert(1);
        }

        .sideNavDashboard .sideMenu ul li:hover img, .sideNavDashboard .sideMenu ul li.activeSideMenu img {
            filter: initial;
        }

        .sideNavDashboard .sideMenu ul li:hover::after, .sideNavDashboard .activeSideMenu:after {
            content: '';
            width: 3px;
            height: 25px;
            background: var(--blue);
            position: absolute;
            left: 0;
            border-radius: 0 2px 2px 0;
            top: 9px;
        }

/* .sideNavDashboard .sideMenu ul li:hover img.right-arrow-menu, .sideNavDashboard .sideMenu ul li.activeSideMenu img.right-arrow-menu {
            transform: rotate(90deg);
        }*/

.showMoreNav {
    display: none;
    margin-top: 12px;
}

    .showMoreNav ul {
        padding-bottom: 0.5px !important;
    }

    .showMoreNav:hover + li {
        display: block;
    }

    .showMoreNav li::after {
        display: none;
    }

    .showMoreNav:hover,
    .sideNavDashboard .sideMenu ul li:hover .showMoreNav,
    .sideNavDashboard .sideMenu li.activeSideMenu .showMoreNav {
        display: block;
    }

    .showMoreNav li {
        background-color: var(--grey);
        color: var(--blue) !important;
        padding-left: 37px !important;
    }

.sideNavDashboard .sideMenu ul li:hover + .showMoreNav, .sideNavDashboard .sideMenu li.activeSideMenu + .showMoreNav {
    display: block;
}

.showMoreNav:hover + .sideNavDashboard .sideMenu ul li,
.sideNavDashboard .sideMenu ul li:hover div p,
.sideNavDashboard .sideMenu ul li:hover .showMoreNav, .sideNavDashboard .sideMenu li.activeSideMenu .showMoreNav,
.sideNavDashboard .sideMenu ul li:hover, .sideNavDashboard .sideMenu li.activeSideMenu,
.sideNavDashboard .sideMenu li.activeSideMenu p,
.sideNavDashboard .sideMenu ul li:hover a {
    color: var(--blue);
    font-weight: 700;
    background: var(--grey, linear-gradient(90deg, rgba(29, 63, 138, 0.10) 72.1%, rgba(29, 63, 138, 0.00) 138.85%));
}

    .sideNavDashboard .sideMenu ul li:hover .showIcon,
    .sideNavDashboard .sideMenu ul li .hoverIcon,
    .sideNavDashboard .sideMenu li.activeSideMenu .showIcon {
        display: none;
    }

    .sideNavDashboard .sideMenu ul li:hover .hoverIcon,
    .sideNavDashboard .sideMenu li.activeSideMenu .hoverIcon {
        display: block;
    }

.sideNavDashboard .sideMenu ul li img {
    /*margin-right: 12px;*/
}

.right-arrow-menu {
    position: absolute;
    right: 0;
}

header {
    padding: 0.6em 2em;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.07);
    background-color: var(--white);
}

    header .user .profile {
        margin: 0 8px 0 24px;
        border-radius: 50px;
    }

    header .user p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        margin-right: 10px;
        margin-left: 50px;
    }

    header .notification span {
        background-color: var(--error);
        color: var(--white);
        border-radius: 50px;
        font-size: 11px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        position: absolute;
        right: -4px;
        padding: 1px 5px;
        top: -4px;
    }

main {
    padding: 0 25px 25px;
}

    main .dashboardTitle {
        font-family: Calibri;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        color: var(--title);
        padding: 18px 0;
        text-transform: capitalize;
        font-variant-caps: all-petite-caps;
    }

    main .searchBox {
        display: flex;
        padding: 13.5px 22px 13.7px 10px;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        border: 1px solid var(--blue);
        background: var(--white);
        width: 450px;
    }

        main .searchBox .searchInput {
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            border: none;
            color: var(--blue);
            outline: none;
        }

        main .searchBox img {
            margin-right: 10px;
        }

        main .searchBox .searchInput::placeholder {
            color: var(--blue);
            opacity: 1;
        }

    main .accordion .advaceSearhBtn {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        text-decoration-line: underline;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        position: relative;
        left: 15px;
        top: 12px;
    }

        main .accordion .advaceSearhBtn img {
            width: 25px;
        }

    main .buttonArea button + button {
        margin-left: 20px;
    }

.buttonArea button, .buttonArea .formAbtn {
    border: none;
    background: none;
    border-radius: 4px;
    padding: 10px 30px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    cursor: pointer;
    /*height: 45px;*/
    height: 2.5em;
}

.buttonArea img {
    margin-right: 5px;
}

.buttonArea .blueBtn {
    background-color: var(--blue);
    color: var(--white);
}

.buttonArea .darkBlueBtn {
    background-color: var(--blue);
    color: var(--white);
}

.buttonArea .lineBtn {
    border: 1px solid var(--blue);
    color: var(--blue);
}

.exportFile:hover .actionItem {
    display: block;
    top: 40px;
}

.actionItem ul li a {
    font-size: 16px;
    text-decoration: none;
    display: flex;
    color: var(--black);
}

.actionItem ul li:hover a {
    color: var(--white) !important;
}


table {
    min-width: 1029px;
    width: 100%;
    border-collapse: collapse;
    overflow-x: scroll;
    background-color: white;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.07);
    margin-bottom: 26px;
}

th, td {
    border-bottom: 1px solid var(--lightBlue);
    padding: 15px;
    text-align: center;
    position: relative;
}

th {
    background-color: var(--blue);
    color: white;
}

.sec th {
    background-color: #576aa0;
    color: white;
    padding: 6px !important;
}

th:first-child, th:last-child {
    border-radius: 4px 0 0 0;
}

th:last-child {
    border-radius: 0 4px 0 0;
}

tbody tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

tbody tr:last-child td:last-child {
    border-radius: 0 0 4px 0;
}

tbody tr:last-child td {
    border-bottom: none;
}

table .downArrow {
    position: absolute;
    top: 19px;
    filter: invert(1);
    cursor: pointer;
}

table .userPic {
    padding-left: 49px;
    text-align: left;
}

    table .userPic img {
        position: absolute;
        left: 0;
        top: 10px;
        border-radius: 50px;
        width: 37px;
    }

table .tableStatus {
    padding: 7px 8px;
    border-radius: 4px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

    table .tableStatus.green {
        background-color: var(--lightGreen);
        color: var(--green);
        border: 1px solid var(--green);
    }

    table .tableStatus.red {
        background-color: var(--lightRed);
        color: var(--error);
        border: 1px solid var(--error);
    }

.tableStatusBanner {
    padding: 2px 2px;
    font-size: 15px;
    border-radius: 5px;
    margin-bottom: 0em !important;
}

table .activeDots {
    cursor: pointer;
}

table tbody tr:hover {
    background-color: #e9ecf4;
}

table .userPic {
    cursor: pointer;
    text-decoration: underline;
}

/* pagination css  */
.pagination ul {
    list-style: none;
}

.pagination p:first-child {
    border-radius: 4px 0 0 4px;
}

.pagination p:last-child {
    border-radius: 0 4px 4px 0;
}

.pagination p, .pagination ul li {
    padding: 8px 13px;
    border: 1px solid var(--blue);
    cursor: pointer;
}

    .pagination ul li.active,
    .pagination ul li:hover, .pagination p:hover {
        background-color: var(--blue);
        color: var(--white);
    }

.actionItem {
    position: absolute;
    background: white;
    box-shadow: 0px 0px 12px 0px #00000012;
    z-index: 1;
    right: 0;
    top: 30px;
    border-radius: 5px;
    display: none;
    left: 0;
    margin: auto;
    width: 103px;
}

    .activeDots:hover + .actionItem, .actionItem:hover {
        display: block;
    }

    .actionItem ul li:first-child {
        border-radius: 5px 5px 0 0;
    }

    .actionItem ul li:last-child {
        border-radius: 0 0 5px 5px;
    }

    .actionItem ul li {
        list-style: none;
        text-align: left;
        padding: 7px;
        border-bottom: 1px solid var(--grey);
       /* width: 103px;*/
        cursor: pointer;
        display: flex;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

        .actionItem ul li img {
            margin-right: 10px;
        }

        .actionItem ul li:hover {
            background-color: var(--blue);
            color: var(--white);
        }

            .actionItem ul li:hover img {
                filter: invert(1);
            }
/* accordian css for advance search */
.accordion input[type="checkbox"], .accordion-content {
    display: none;
}

    .accordion input[type="checkbox"]:checked + label + .accordion-content {
        display: block;
    }

.accordion-content {
    position: absolute;
    border: 1px solid var(--grey);
    left: 0;
    width: 1136px;
    top: 50px;
    /*height: 330px;*/
    background: white;
    z-index: 1;
    border-radius: 5px;
    box-shadow: 0px 0px 12px 0px #00000012;
}

.inputSearchs {
    padding: 10px;
}

    /*.inputSearchs .flex + .flex {
        margin-top: 20px;
    }*/

    .inputSearchs .flex {
        margin: 10px 0;
        display: flex;
        box-sizing: border-box;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .inputSearchs form .flex label,
    .inputSearchs .tabSection .flex label {
        display: flex;
        flex-direction: column;
        width: 48.5%;
    }

        .inputSearchs form .flex label + label,
        .inputSearchs .tabSection .flex label + label {
            margin-left: 10px;
        }

.normalSearch {
    position: absolute;
    background: var(--blue);
    color: var(--white);
    right: 3px;
    padding: 12px 20px;
    appearance: none;
    outline: none;
    border: none;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
}

.inputSearchs form input,
.inputSearchs form select,
.inputSearchs .tabSection input,
.inputSearchs .tabSection select {
    border: 1px solid var(--grey);
    border-radius: 4px;
    padding: 8px 10px;
    outline: none;
    margin-top: 5px;
    background: white;
}

.inputSearchs button.blueBtn {
    padding: 10.4px;
    width: 200px;
    border-radius: 8px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    border: none;
    cursor: pointer;
    margin-top: 16px;
    background: var(--blue);
    color: var(--white);
}
/* popup model delete css here */
.popup-overlay {
    position: fixed;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: rgb(0 0 0 / 32%);
    top: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 2;
}

    .popup-overlay.display-block {
        display: flex;
    }

    .popup-overlay .popup-head {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        box-shadow: 0px 0px 12px 0px #00000012;
        padding: 19px;
    }

    .popup-overlay .popup {
        background-color: var(--white);
        border-radius: 5px;
        width: 456px;
    }

    .popup-overlay .popup-action {
        padding: 30px 18px;
    }

        .popup-overlay .popup-action p {
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
        }

.popup-btn {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px;
    margin-top: 26px;
}

    .popup-btn button {
        border: 1px solid;
        font-weight: 700;
        padding: 11px 0;
    }

.greyBtn {
    background-color: var(--grey) !important;
}

.popup-btn .redBtn {
    background-color: var(--error);
    border: 1px solid var(--error);
    color: var(--white);
}
/* popup model for import file  */
.importBox .file {
    display: none;
}

.popup-action.importBox {
    margin: 19px 18px 29px 18px;
    border: 1px solid var(--grey);
    border-radius: 4px;
}

.importBox .lineBtn {
    font-weight: 400;
}

.importBox .inputBox {
    margin-top: 10px;
}

.importBox .flex {
    border: 1px solid var(--grey);
    border-radius: 4px;
}

.popup-action.importBox input {
    border: none;
    padding: 15px;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    outline: none;
}

.uploadFileBtn {
    padding: 0 24px;
    background: #E9ECF4 !important;
    cursor: pointer;
}

    .uploadFileBtn input.btn {
        color: var(--blue);
        cursor: pointer;
        background: #E9ECF4 !important;
    }

    .uploadFileBtn img {
        background: #E9ECF4 !important;
    }
/* footer css */
footer {
    position: fixed;
    background: var(--white);
    padding: 19.5px 24px 17.49px 24px;
    width: 100%;
    bottom: 0;
    right: 0;
}

    footer p {
        color: var(--greyText);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

img#closePopup {
    border: 1px solid var(--grey);
    border-radius: 4px;
    padding: 10px;
    position: absolute;
    right: 20px;
    top: 12px;
    cursor: pointer;
    background-color: var(--grey);
}

/* add resource css  */
.whiteBoxShadow {
    background-color: var(--white);
    border: 1px solid var(--grey);
    border-radius: 4px;
    margin-top: 19px;
    box-shadow: 0px 0px 12px 0px #00000012;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.heading {
    padding: 10px 0;
    box-shadow: 0px 0px 12px 0px #00000012;
}

    .heading h3 {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        padding: 0 0 0 19px;
    }

.bodyContent {
    padding: 19px;
}

    .bodyContent .imgBox {
        background-color: var(--grey);
        height: 120px;
        width: 120px;
        margin: auto;
        display: flex;
        flex-direction: column;
        position: relative;
        border-radius: 2px;
    }

        .bodyContent .imgBox span {
            appearance: none;
            border: none;
            background-color: var(--greyText);
            color: var(--white);
            padding: 7px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            cursor: pointer;
        }

        .bodyContent .imgBox input {
            padding: 7px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            cursor: pointer;
            opacity: 0;
            z-index: 1;
        }

    .bodyContent input[type="radio"] {
        width: 47%;
        background: white;
        appearance: none;
        height: 33.6px;
    }

        .bodyContent input[type="radio"]:checked {
            background-color: var(--grey);
        }

    .bodyContent .gender input[type="radio"]:first-child::after {
        content: 'Male';
    }

    .bodyContent .gender input[type="radio"]:last-child::after {
        content: 'Female';
    }

    .bodyContent .status input[type="radio"]:first-child::after {
        content: 'Active';
    }

    .bodyContent .status input[type="radio"]:last-child::after {
        content: 'Inactive';
    }

    .bodyContent button, .bodyContent a {
        width: auto;
    }

/* profile tab css here */
.resourceProfile {
    margin: 15px 15px 0 40px;
    height: 100%;
    width: 392px;
}

    .resourceProfile .uploadPhoto {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: black;
        height: 30px;
        opacity: 0;
        cursor: pointer;
    }

.upload-profile-pic-btn {
    position: absolute;
    color: white;
    display: flex;
    justify-content: center;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    background-color: #00000045;
    padding: 8px;
    cursor: pointer;
}

.nameBox {
    padding: 28px 20px;
    text-align: center;
    border-bottom: 1px solid var(--grey);
}

    .nameBox h3 {
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        margin-top: 14px;
    }

    .nameBox small {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        color: var(--greyText);
    }

    .nameBox p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        color: var(--greyText);
        margin: 9px 0 6px;
    }

    .nameBox h4 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        margin-bottom: 14px;
    }

.resourceAddress {
    padding: 14px 28px;
}

    .resourceAddress small {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        color: #79756B;
    }

    .resourceAddress p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        margin: 10px 0;
    }

.profileHead {
    padding-bottom: 35.5px;
    background-color: var(--white);
}

    .profileHead .dashboardTitle {
        padding: 17.5px 37px 18.06px 33px;
    }

.profileTabSection {
    position: relative;
    top: 0;
    width: 100%;
    margin-right: 40px;
}

    .profileTabSection .tab .tablinks + .tablinks {
        margin-left: 8px;
    }

.tab, .payTab {
    overflow: hidden;
}

.payTab {
    display: flex;
    justify-content: space-around;
}

    .tab button, .payTab button {
        background-color: white;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 7.5px 16.27px 8px 15px;
        transition: 0.3s;
        font-size: 15px;
        background-color: var(--grey);
        border-radius: 2px 2px 0 0;
    }

        .tab button:hover,
        .tab button.active {
            background-color: var(--blue);
            color: var(--white);
        }

.tabcontent, .payTabContent {
    /*display: none;*/
    padding: 6px 12px;
    border-top: none;
    box-shadow: 0px 0px 12px 0px #00000012;
    margin-top: 15px;
    background-color: white;
    overflow: hidden;
}

button.payTabLink {
    background: white;
    border-radius: 5px;
    /*padding: 20px;*/
    margin: 10px 0 0 0;
    font-size: 1em;
    width: 20%;
}

.payTab button.active, .payTab button:hover {
    font-weight: bold;
    border: 1px solid var(--blue);
    position: relative;
    background-color: transparent;
    color: var(--blue);
}

    .payTab button.active:after,
    .payTab button:hover:after {
        content: '';
        width: 40%;
        height: 2px;
        border-radius: 4px;
        background-color: var(--blue);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        margin: auto;
    }
/*.tab {
    overflow: hidden;
}

    .tab button {
        background-color: white;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 7.5px 16.27px 8px 15px;
        transition: 0.3s;
        font-size: 13px;
        background-color: var(--grey);
        border-radius: 2px 2px 0 0;
    }

        .tab button:hover,
        .tab button.active {
            background-color: var(--blue);
            color: var(--white);
        }

.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
    box-shadow: 0px 0px 12px 0px #00000012;
    margin-top: 15px;
    background-color: white;
}*/

.tabcontent .inputSearchs form .flex label,
.tabcontent .inputSearchs .tabSection .flex label {
    width: 48.5%;
}

.w-30 {
    width: 30%;
}

.tabcontent .inputSearchs form .flex.threeBox label,
.tabcontent .inputSearchs .tabSection .flex.flex.threeBox label {
    width: 31.5%;
}

.tabcontent .inputSearchs form .flex.fourBox label,
.tabcontent .inputSearchs .tabSection .flex.fourBox label {
    width: 23.5%;
}

.addMoreAddress + .addMoreAddress {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--grey);
}

.roundBorderBox {
    margin: 19.39px 0 21px;
    padding: 14px 12px 25px 12px;
    border: 1px solid var(--grey);
    border-radius: 4px;
}

    .roundBorderBox .minus-icon {
        cursor: pointer;
    }

.attachDoc {
    background-color: #EBF5FF;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ABD5FF;
    border-radius: 4px;
    position: relative;
    margin-right: 12px;
    margin-top: 5px;
    width: 200px;
}

    .attachDoc p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        color: var(--blue);
        margin: 1px 12px;
    }

    .attachDoc img {
        width: 25px;
    }

    .attachDoc input {
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

.prevUpload {
    width: 100%;
    padding-bottom: 0;
}

.prevUploadTab {
    background: var(--grey);
    border-radius: 4px;
    width: 24%;
    display: flex;
    justify-content: space-between;
    padding: 12px;
    margin-top: 10px;
}

    .prevUploadTab img {
        margin-right: 5px;
    }

.w-800Popup .popup {
    width: 800px;
}

.w-800Popup .inputSearchs form .flex label {
    width: 48%;
    text-align: left;
}

.centerBtn button {
    width: 200px;
    padding: 10px;
}

    .centerBtn button + button {
        margin-left: 19px;
    }

.input-switch {
    display: none;
}

.label-switch {
    display: inline-block;
    position: relative;
    width: 3.4em !important;
    top: 12px;
}

    .label-switch::before, .label-switch::after {
        content: "";
        display: inline-block;
        cursor: pointer;
        transition: all 0.5s;
    }

    .label-switch::before {
        width: 3em !important;
        height: 1em;
        border: 1px solid #757575;
        border-radius: 4em;
        background: #888888;
    }

    .label-switch::after {
        position: absolute;
        left: 0;
        top: -4px;
        width: 1.5em !important;
        height: 1.5em;
        border: 1px solid #757575;
        border-radius: 4em;
        background: #ffffff;
    }

.input-switch:checked ~ .label-switch::before {
    background: var(--blue);
    border-color: var(--blue);
}

.input-switch:checked ~ .label-switch::after {
    left: unset;
    right: 0;
    background: white;
    border-color: #009a00;
}

.info-text {
    display: inline-block;
    position: relative;
    left: 70px;
    top: -15px;
    width: 80px;
}

    .info-text::before {
        content: "Not active";
    }

.input-switch:checked ~ .info-text::before {
    content: "Active";
}

table.popupTable {
    min-width: auto;
    box-shadow: none;
}

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

.profileTabSection.addProperty {
    margin-left: 33px;
}

.blueHeading {
    background-color: #576aa0;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    padding: 15px 12px;
    color: white;
}

.addProperty .tabcontent {
    padding: 0;
}

.checkboxBtn {
    border: 1px solid var(--grey);
    border-radius: 4px;
    padding: 15px 10px;
    outline: none;
    flex-direction: initial !important;
    justify-content: flex-start !important;
    align-items: center;
}

.inputSearchs .form .checkboxBtn p {
    font-size: 17px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    margin: auto;
    display: flex;
    align-items: center;
    padding-left: 35px;
}

.inputSearchs .form .checkboxBtn input {
    border: 1px solid var(--title);
}

    .inputSearchs .form .checkboxBtn input:checked + p {
        /*background-color: var(--blue);
        color: white;*/
        font-size: 15px;
        font-weight: 500;
    }

.checkboxBtn input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    background-color: var(--white);
    border: 1px solid var(--white);
    margin: 0;
    cursor: pointer;
    z-index: 1;
    padding: 0;
    position: relative;
    top: 3px;
}

    .checkboxBtn input[type="checkbox"]:checked {
        background-color: #fff;
    }

        .checkboxBtn input[type="checkbox"]:checked::before {
            content: "✔";
            display: inline-block;
            font-size: 12px;
            line-height: 16px;
            color: var(--blue);
            margin-left: 3px;
            font-weight: bold;
            position: relative;
            top: -3px;
        }


.blueBtn .whiteAtag {
    color: white;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/*css for rolemaster*/

label.roleswitch .label-switch {
    position: relative;
    left: -41px;
    top: 41px;
}


label.roleswitch {
    display: flex;
}

.isActive input {
    margin-right: 8px;
}

.isActive {
    position: relative;
    top: 9px;
    left: 30px;
}


.roleswitch .info-text:before {
    left: -105px;
    position: absolute;
    top: 50px;
}

.page-item.active .page-link {
    background-color: var(--blue);
    border-color: var(--blue);
    z-index: 0;
}

.page-link {
    color: var(--black);
    border-color: var(--blue);
}

.page-item.disabled .page-link {
    border-color: var(--blue);
}

div.dataTables_wrapper div.dataTables_info {
    padding: 0;
    position: relative;
    top: 33px;
    padding-top: 0 !important;
}


@media screen and (max-width: 768px) {
    table {
        border: 0;
    }
}

/* Responsive css here */
@media screen and (max-width: 576px) {
    .loginContainer form {
        margin: 0 20px;
    }

    .visible-in-mobile {
        display: block;
    }

    .visible-in-web {
        display: none;
    }

    .sideMenu {
        height: auto;
    }

        .sideMenu p button {
            color: var(--greyText);
            border: 1px solid var(--greyText);
            background-color: white;
            position: absolute;
            right: 12px;
            padding: 8px 13px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            top: 12px;
        }

            .sideMenu p button span {
                font-size: 18px;
                color: var(--greyText);
                margin-left: 11px;
            }

    .sideNavDashboard {
        height: 100vh;
        position: absolute;
    }


    footer {
        width: 100%;
        position: relative;
        margin-top: 20px;
    }

    .buttonArea button, .buttonArea .formAbtn {
        width: 100%;
        text-align: center;
        display: initial;
        position: relative;
        text-decoration: none;
        /*height: 45px;*/
        height: 2.5em;
    }

        .buttonArea button img {
            position: absolute;
            left: 10%;
            top: 3px;
        }
}

@media screen and (max-width:890px) {
    .greenToaste {
        top: 20%;
        right: 0;
        left: 0;
        margin: auto;
        max-width: 390px;
        width: 100%;
    }

    .mobile_flexColumn {
        flex-direction: column;
    }
}

@media screen and (max-width:924px) {
    main .mobile_flexColumn {
        flex-direction: column;
    }

    .searchBox {
        margin-bottom: 20px;
    }

    .pagination {
        margin-top: 16px;
    }
}

table.dataTable > thead .sorting:before, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_desc_disabled:before,
table.dataTable > thead .sorting:after, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:after, table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc_disabled:after {
    top: 0.5em;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: left !important;
}

    div.dataTables_wrapper div.dataTables_filter input {
        padding: 13.5px 22px 13.7px 10px;
        border-radius: 4px;
        border: 1px solid var(--blue);
        width: 450px !important;
    }

.dt-buttons.btn-group.flex-wrap {
    position: absolute;
    right: 0;
    display: flex;
    gap: 8px;
}

    .dt-buttons.btn-group.flex-wrap button {
        background: none;
        border-color: var(--blue)
    }

        .dt-buttons.btn-group.flex-wrap button span {
            color: var(--blue);
            border
        }

.whiteWithPadding {
    background: white;
    padding: 20px;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.07);
    border-radius: 5px;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}

.profileHead .dashboardTitle {
    padding: 17.5px 37px 18.06px 33px;
}

/*.profileTabSection {
    position: relative;
    top: -31px;
    width: 100%;
    margin-right: 40px;
}

.profileTabSection.addProperty {
    margin-left: 33px;
}*/

.clientImg {
    width: 170px;
    margin: 0;
    height: 170px;
}

/*
.profileTabSection:after {
    content: '';
    width: 100%;
    height: 1px; 
    position: absolute;
    top: 34px;
    left: -95%;
    margin: auto;
    z-index: 1;
}

.profileTabSection:before {
    content: '';
    width: 100%;
    height: 1px; 
    position: absolute;
    top: 34px;
    right: -5%;
    margin: auto;
    z-index: 1;
}
*/

.ptrl-20 {
    padding: 20px 20px 0;
}

.bodyContent .valuationType input[type="radio"]:first-child::after {
    content: 'Fixed';
    top: -4px;
    position: relative;
}

.bodyContent .valuationType input[type="radio"]:last-child::after {
    content: "General";
    top: -4px;
    position: relative;
}

.text-danger span {
    color: #dc3545 !important;
}

.accordianDetails {
    /* background-color: #EBF5FF;*/
    background-color: #576aa0;
    color: white;
    padding: 10px;
    border-radius: 5px;
    align-items: center;
    cursor: pointer;
}

    .accordianDetails p {
        color: white;
        margin-bottom: 0;
    }

.accordianErrorDetails, accordianErrorDetails {
    background-color: #dc3545 !important;
    padding: 10px;
    border-radius: 5px;
    align-items: center;
    cursor: pointer;
    color: white;
    /* font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;*/
    font-size: 16px;
    background: var(--error);
    border-left: 9px solid red;
    margin: 0.3em 2em 0em 2em;
}


.panel {
    margin-top: 20px;
}

.accordianDetails img {
    transform: rotate(90deg);
    filter: invert(1);
}

/* dynamic input on add more property description */
.addPropertyInputDynamic {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    padding: 20px 0;
}

.inputFieldProp {
    position: relative;
    width: 47%;
}

    .inputFieldProp label {
        display: flex;
        flex-direction: column;
    }

    .inputFieldProp input {
        margin-top: 0 !important;
    }

    .inputFieldProp img {
        position: absolute;
        top: -6px;
        right: -8px;
    }
/* dynamic input on add more property description ends*/

.hamburger a {
    color: #25408f;
    background-color: transparent !important;
}

.actionItem ul {
    margin-bottom: 0px;
}

.buttons-excel, .buttons-pdf, .buttons-csv {
    border: none;
}

.flex-column {
    flex-direction: column !important;
}

.navMenuToggle {
    display: none;
}

    .navMenuToggle ul {
        margin-top: 15px;
    }

.sideNavDashboard .sideMenu ul li img.right-arrow-menu.rotateNav, .sideNavDashboard .sideMenu ul li.activeSideMenu img.right-arrow-menu {
    transform: rotate(90deg);
}

.activeSideMenuClcik:hover {
    background-color: var(--blue) !important;
    color: var(--white);
}

.sideNavDashboard .sideMenu ul li.activeSideMenuClcik:hover img {
    filter: brightness(20);
}

.sideNavDashboard .sideMenu ul li.activeSideMenuClcik:hover a {
    color: var(--white);
    background: var(--blue );
    font-weight: normal;
}

.sideNavDashboard .sideMenu ul li.activeSideMenuClcik:hover img.right-arrow-menu {
    filter: invert(1);
}

.sideNavDashboard .sideMenu ul li.activeSideMenuClcik:hover .navMenuToggle li:hover img {
    filter: initial;
}

.sideNavDashboard .sideMenu ul li.activeSideMenuClcik:hover .navMenuToggle li:hover a {
    background: var(--grey, linear-gradient(90deg, rgba(29, 63, 138, 0.10) 72.1%, rgba(29, 63, 138, 0.00) 138.85%));
    color: var(--blue);
}

.redToaste p {
    color: var(--error);
}

.redToaste {
    background-color: var(--lightRed);
}

.greenToaste img {
    width: 16px;
}

#profileMenu ul li {
    width: 100%;
}

.tableXscroll {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.accordion.valueAdvance {
    position: absolute;
    left: 550px;
    margin: auto;
    margin-top: 12px;
    width: auto;
    z-index: 1;
}

    .accordion.valueAdvance .inputSearchs {
        transform: translateX(-502px);
    }

.input-validation-error {
    border: 1px solid #dc3545 !important;
}

.accordianErrorDetails ul li {
    list-style: none;
    color: white;
    display: inline;
    margin-right: 10px;
}

.accordianErrorDetails ul {
    margin-bottom: 0;
}

#assingApprover {
    display: block;
    left: auto;
    right: 0px;
    height: auto;
    width: 330px;
    border: 1px solid var(--blue);
    z-index: 99;
}

.dataTables_scrollBody table td, .dashboardTable td {
    border: none !important;
    border-bottom: 1px solid var(--blue) !important;
}

.footerAudit {
    padding: 8px 20px;
}

    .footerAudit img {
        width: 25px;
    }

.auditLog-acc.roundBorderBox {
    padding: 16px;
}

.footerAuditContainer {
    margin: 0 24px 20px;
}

div#amentiesdiv label {
    margin: 0 0 16px 20px;
}

.valueReqTable th {
    background-color: #ebf5ff;
    padding: 10px;
    color: black;
}

.valueReqTable td {
    padding: 10px;
}


/* notification css here */
.notificationInside span {
    background: var(--error);
    color: white;
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    text-align: center;
    left: -14px;
    font-size: 10px;
    top: -18px;
}

.notificationInside img {
    transform: rotate(0deg);
}


/* Dashboard css starts here */
.dashboard-status {
    /*padding: 0 20px;*/
    gap: 2%;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .dashboard-status .dashboard-box {
        width: 23%;
        height: 122px;
        border: 1px solid var(--grey);
        border-radius: 5px;
        text-align: center;
        padding: 10px 20px;
    }

        .dashboard-status .dashboard-box h3 {
            font-size: 1.5em;
            margin-top: 16px;
            color: var(--blue);
        }

table.dashboardTable {
    min-width: 100%;
    box-shadow: none;
    margin: 10px 0 0;
}

.dashboardTable th {
    /*background: none;
    color: var(--black);*/
    text-align: left;
    border: none;
}

.dashboardTable td {
    border: none;
    text-align: left;
}

table.dashboardTableExt {
    min-width: 100%;
    box-shadow: none;
    margin: 10px 0 0;
}

.dashboardTableExt th { 
    text-align: left;
    border: none;
    padding: 10px;
}

.dashboardTableExt td {
    text-align: left;
    border: none;
    padding: 10px;
}
 

.dashboardMapArea {
    display: grid;
    grid-template-columns: 30% 68%;
   /* padding: 20px;*/
    grid-gap: 2%;
}

    .dashboardMapArea .roundBorderBox {
        height: 216px;
        align-content: center;
        display: grid;
    }

        .dashboardMapArea .roundBorderBox h3 {
            font-size: 3em;
            border: 5px solid;
            width: 137px;
            height: 137px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: auto;
            margin-top: 10px;
        }

    .dashboardMapArea .dashboard-status p {
        font-size: 20px;
        font-weight: 600;
    }

.dashboard-status .green {
    color: var(--green) !important;
}

.dashboard-status .orange {
    color: var(--orange) !important;
}

#profileMenu li:hover button {
    color: white;
    background-color: var(--blue);
}

#profileMenu li:hover i {
    color: white;
}


.checkboxColumn {
    display: flex;
    padding: 19px 15px;
    justify-content: space-around;
}

table.multipleValueTable {
    /* width: auto; */
    margin-top: 10px;
    /* min-width: 50%; */
    border: 1px solid var(--greyText);
}

    table.multipleValueTable th, table.multipleValueTable td {
        /* background: white;
    color: var(--black); */
        border: 1px solid var(--greyText);
        border-bottom: 0;
        border-top: 0;
        padding: 10px 0;
    }

    table.multipleValueTable th {
        background-color: #576aa0;
        color: var(--black);
        border-bottom: 1px solid var(--greyText);
        color: white;
    }


/* amenities Icon */
.amenitiesIcon {
    position: absolute;
    right: 18px;
    top: 0;
    bottom: 0;
    margin: auto;
    filter: brightness(0.3);
    width: 10%;
}

/*.checkboxBtn input[type="checkbox"]:checked ~ .amenitiesIcon {
    filter: none;
}*/

/* search button on dashboard */
.inputSearchs form .dashboardSearch label {
    width: 27%;
}

.dashboardSearch .blueBtn {
    margin-bottom: 10px;
    width: 75px !important;
}

.inputSearchs form .dashboardSearch {
    align-items: end;
}

.phoneWithDrop {
    display: grid !important;
    grid-template-columns: 17% 1fr;
}

.scroll-y {
    height: 600px;
    overflow-y: auto;
}
/* Edge */
.scroll-y {
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.fileInputTogetName {
    display: none;
}

.fileInput {
    background: #576aa0 !important;
    width: 500px;
    color: white;
    position: relative;
}

    .fileInput:after {
        content: ' click to upload \2191';
        position: absolute;
        right: 10px;
    }

    .fileInput::-webkit-file-upload-button {
        display: none;
    }

.yesNoToggle {
    width: 96px;
}

#scrollToTop {
    display: none;
    position: fixed;
    bottom: 3.5em;
    right: 20px;
    background-color: var(--blue);
    color: var(--white);
    border: none;
    border-radius: 50%;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 16px;
    z-index: 1;
}

table.latestRequestsTable,
table.latestQuotationsTable,
table.topValuationsTable,
table.topQuotationDuesTable {
    min-width: auto;
}



/* custom scrollbar css here */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    cursor: pointer;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--lightBlue);
    border-radius: 5px;
    cursor: pointer;
}

::-webkit-scrollbar-thumb {
    background: var(--lightBlue);
    border-radius: 10px;
    cursor: pointer;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--blue);
        cursor: pointer;
    }

#previewImage {
    margin-bottom: 36px;
    width: 170px;
    height: 135px;
}

.select2-container--default + .select2-container--default {
    display: none;
}

.ahyperlink {
    color: var(--blue);
    padding-left: 1em;
}

.bodyContent .yesNoToggle input[type="radio"] {
    width: auto;
    height: auto;
    background-color: initial;
    appearance: revert;
    margin-right: 7px;
}

a {
    color: var(--blue);
    padding-left: 1em;
}

.rolechk {
    height: 18px;
    width: 18px;
    cursor: pointer;
}

#rolemanage input[type=checkbox]:checked:after {
    content: '\2713';
    color: white;
    position: absolute;
    font-size: 11px;
    left: 5px;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-weight: bolder;
}

#rolemanage input[type=checkbox]:checked {
    background-color: var(--blue);
    appearance: none;
    position: relative;
    border: 0.5px solid white;
    margin: 0;
}

#ValuationActions ul li:hover span {
    color: white;
}